ollowing the UX design process doesn’t just give users an intuitive and enjoyable experience, it provides an opportunity for designers to iterate and improve their designs.

The first step to designing an interface users will love is knowing exactly what that process entails.

Let’s take a look at the meaning of UX, how to break down the design process, and how you can apply this method to your next project.

What is UX design?

To understand UX design process, we have to understand the acronym.

“UX”, or “user experience”, is how a user feels when they use a specific product or service. It encompasses a variety of feelings including emotion, senses, and physical interaction.

The term was coined by Donald Norman, Apple’s former vice president of the company’s Advanced Technology Group, who said:

“I invented the term because I thought human interface and usability were too narrow. I wanted to cover all aspects of the person’s experience with the system including industrial design, graphics, the interface, the physical interaction, and the manual.”

UX design is the system designers create for that experience with the goal of having the user’s experience be satisfying and easy. The term UX is involved in a lot of different products and services, but typically refers to the digital design experience.

Why is UX design important?

Good UX design creates a positive experience for your user by anticipating, and fulfilling their needs.

Successful products or services, such as a website or app needs good UX design.

UX design will look different from product to product and brand to brand. That means each UX design solution is going to be much different than others, so don’t worry about what the other team is doing.

The 6 stages of the UX design process

Your business’s UX design process is going to differ from other businesses. That means the stages below may be slightly different, and that’s okay! What’s important is that you find out exactly what works for your company.

Researching, iterating, and testing is all part of a good design process.

Stage 1: Understand

Before you get started with any project, you need to get the basics down first. That means understanding two crucial elements:

• 1st Your Users
• 2nd Your Brand

Since designing for the user experience is all about addressing your user’s issues and goals, you need to answer the question: What are their issues?

What issue are you trying to solve for your user? What problem are you trying to solve? And why are you the one with the answers?

When you understand what the problems facing your users are and you’re able to come up with the questions you need to answer, you’re able to create a strategy for design success.

How does this project align with your brand?

Next, you need to know how this project aligns with your brand’s mission and goals.

What are your company’s values and mission? How does this project contribute to that goal? Is this the right time for your company to be pursuing this project?

Keeping in line with your brand’s core mission is crucial to the success of your project and business.

The dedication to your core mission is the power of keeping in line with your company’s brand in mission.

Stage 2: Research

Once you know the project is in line with your core mission, and you know what questions you’re trying to solve, you need to conduct research.

User research is going to be the life blood of your project. The things you discover and unearth during this stage lays the foundation for how your entire project will turn out.

As a designer, you must challenge your assumptions. Good user research challenges all your assumptions.

Below are good methods of user research:

1- Interviews

Sitting down with someone from your target audience and ask them pointed questions about their issues is key. What are they struggling with? What are they looking for in your product? Face to face interviews are preferred since you can gauge their verbal and nonverbal reactions. Video or phone call can work as well.

Some good tools to use:

• Zoom for video conference calls
• Lookback to record interviews
• Temi to transcribe calls

2 – User/Focus Groups

Organize a group of 3 – 5 target users and have them discuss their attitudes, emotions, and frustrations with an issue or product. It’s a discussion, not just an interview. Encourage a dialogue between the participants and yourself.

Some good tools to use:

• FocusGroupIt for easy group moderation
• Video camera for recording the the group
• Voice recorder for recording the group

3 – Surveys

Questionnaires you send out to your target users are good for finding out your users’ attitudes towards a specific topic with the added benefit of receiving the data as soon as the users are done with the survey. However, you have to be careful not to use leading questions that could disproportionately impact the results.

Some good online survey tools to consider:

• Wufoo
• TypeForm
• Google Surveys

4 – Usability Testing

This is the practice of observing your target audience using a program or product. For example, if you were a designer for the Uber app, you might ask your user to pull up the app and order a car. As they do so, you observe how the act and react to the app. When they’re done, you can ask them questions about their experience. This is a great opportunity to see how happy your user is with the app and if it adequately addresses their needs.

Some good tools to consider:

• User Testing to run a user test on your website
• Optimizely for good A/B testing
• maze for finding out what users are clicking on

Stage 3: Analyze

In this stage, you’ll be using all of the information you gathered in the previous two stages to analyze and distill the most important elements.

Here are two ways you can analyze your research:

User personas

User personas are profiles of your ideal customer

Designers use them to help understand a number of things about their customers including their:

• Goals
• Background
• Age
• Gender
• Behaviors
• Spending habits
• Pain points
• Needs

If you ever encounter a tough problem, you can always refer back to your persona and ask, “What design best services this person’s needs?”

You can create multiple personas to represent the varied users you have.

User journey maps

A user journey map is a representation of the user’s interactions with your product.

See example below:

According to Jim Kalbach, author of Mapping Experiences, the user journey map is crucial for:

• Building empathy
• Providing a common “big picture”
• Breaking down silos
• Bringing focus
• Revealing opportunities

Leveraging the things you learned in the research phase, create a user journey map to help you understand what your user will be going through when using your product or service. Only then can you build the best product for them.

Stage 4: Design

Now, you can start to build out your design.

That means building things like:

• Site map
• User flow
• Mockups
• Images
• Icons
• Colors

One of the most important things you can create at this stage is the wireframe.

A wireframe is like the prototype of your product, a bare essentials representation of your product.

It’s a sample of what your product will eventually look like. They’re typically notable for the block layouts and “X” placeholders to represent future images, and help accomplish three things:

1. Presents information that will be displayed on the page
2. Gives an outline of the structure and layout of the page
3. Conveys overall direction and description of the user interface

Like a user journey map, this will give you a comprehensive look at your users’ experience with your product.

This is an iterative process. That means you won’t get it all done in the first go. You’ll have to design, redesign, get feedback and edit your wireframe content, design and layout.

Stage 5: Launch

After designing and redesigning, you’re going to reach a point where all your assets are ready to ship.

That means it’s time to implement; pass everything to the development team who will create a working version of the user interface.

Once it’s delivered, there are several ways you can go about making sure that the product is perfect and what your clients wants:

• User testing. Like the usability test, this involves you observing your target audience using the actual program.
• Beta launch. This is a limited release of your product to a small amount of people with the goal of finding issues and cleaning them up before you launch it to the world.
• Internal testing. When your own team uses the product and tests out each facet of it.

Feedback with the development team is crucial at this stage. You want to make sure that you clearly communicate any issues that arise and make sure that they are addressed before your product launches.

Stage 6: Analyze (again)

Once your product launches, it’s time for another round of analysis.

Instead of looking at the results of your research, you’ll be taking a look at the overall final product.

Some questions you might ask yourself:

• Where did our process go right? And why?
• Where did we struggle? And why?
• How are our users responding to the product?
• Did it solve their issues and pain points?
• Where can we improve the product?
• What lessons can we take away from this process for future products?

By thoroughly analyzing the product and the UX process, you’ll be able to get more out of the experience than just a product. You also gain invaluable knowledge you can leverage for the future.

What next?

Your UX process is going to be entirely unique to your business and product. This means the UX stages may look a lot different for you compared to another company and product. The important thing is that you find a process that works for you, your team, and your users.

s of September 2024, people using mobile devices contribute to 63.38% of all website traffic. There are approximately 4.32 billion active mobile internet users worldwide.

So if you’re not designing for mobile, you and your users are in trouble. That’s why mobile-first design is a great strategy to employ for all digital products, websites, apps, and software.

Key Points for Mobile-First Design

• Defining mobile-first design
• Why is mobile-first design important?
• The connection between mobile-first design and accessibility
• Mobile-first design best practices, plus examples

What is mobile-first design?

Mobile-first design is a design philosophy that aims to create better experiences for users by starting the design process from the smallest of screens: mobile. Designing and prototyping your websites for mobile devices first helps you ensure that your users’ experience is seamless on any device.

For example, if a mobile-first designer sits down to prototype or sketch out a website layout, they wouldn’t start sketching a desktop layout. Instead, they’d sketch out how it’d look on mobile, then move onto bigger and bigger screens.

The mobile-first design concept first came into the limelight in 2010 when Eric Schmidt, CEO of Google in 2010, announced at a conference that the company would be focusing more on mobile users in their design practices.

Eric Schmidt said:

“What’s really important right now is to get the mobile architecture right. Mobile will ultimately be the way you provision most of your services. The way I like to put it is, the answer should always be mobile-first. You should always put your best team and your best app on your mobile app.”

The reasoning behind this is simple: Mobile design is more limited. After all, you’re designing for a smaller screen and can only fit so many elements into it. That means you choose only what’s most important — what your users need the most — while ignoring everything else.

As you expand your design, you can provide them with other elements, but you know exactly what you need to bring to the forefront.

Why is mobile-first design important?

It’s a matter of numbers: The number of smartphone mobile network subscriptions worldwide reached almost seven billion in 2023, according to Statista. It’s forecast to exceed 7.7 billion by 2028. China, India, and the United States are the countries with the highest number of smartphone mobile network subscriptions. This means the majority of people are using their phones to find the content they need. There’s a big need for mobile-friendly websites out there, and so it’s your job to supply it for your users.

If you’re keeping your eyes on website traffic stats, Google’s algorithm favors mobile-friendly websites.

“Getting good, relevant answers when you search shouldn’t depend on what device you’re using. You should get the best answer possible, whether you’re on a phone, desktop or tablet. Last year, we started using mobile-friendliness as a ranking signal on mobile searches. Today we’re announcing that beginning in May, we’ll start rolling out an update to mobile search results that increases the effect of the ranking signal to help our users find even more pages that are relevant and mobile-friendly.”

That means by providing a good user experience on mobile devices, you increase your discoverability, and potentially your conversion rates.

Mobile-first design offers a wealth of opportunities for accessibility experience. See details below…

The connection between mobile-first design and accessibility

Here are a few ways mobile-first design and accessible design overlap:

• Small-screen friendly. Mobile-first design pushes you to make your digital products more readable on smaller screens, and therefore more accessible to people who might be hard of seeing. When your designs help people with limited vision, they’ll also help everyone else.
• Hierarchy of information. So mobile-first means content first. That means, putting your most important content assets (i.e. the ones your users want) at the top of your page. This also makes your content accessible to anyone with cognitive disabilities.

3 tips for good mobile-first design

Tip #1: Mobile-first = Content-first

When it comes to mobile-first design, you need to remember one thing: Content is key.

You need to give your users all the content they’re looking for, and only that. Anything else might clutter and distract from your users’ experience.

With the big constraint in screen sizes, designing for mobile devices can be a challenge . That means you need to take a look at all of your content and present it in a visual hierarchy depending on how important it is to your user. Only then can you fit the most important elements.

Key Points:

• Companies title at the top. This is key in the visual hierarchy. It lets the users know where they are and orientates them to the specific company website and content. Your brand’s logo and name will likely always go on top of any mobile design you create.
• Users see the most important info right away. Leading news agencies goes all-in on content-first. Most users aren’t coming to their website to check out the about page or privacy policy. They want to read the news, so the newspaper gives it to them.
• Easy-to-reach navigation buttons. The news agencies website stores any extraneous (or less important) content in the hamburger menu up top. That way, if there’s something the user wants to see that isn’t offered right away, they can easily find it there.

This is ultimately a great example of knowing your website’s visual hierarchy and using it to create a great mobile-first design.

Tip #2: Make it easy to navigate

Condense your secondary elements into easy-to-reach navigational buttons. One tried-and-true method of doing this is by using a hamburger menu. Hamburger menus are recognizable ways for your user to attain access to secondary elements. If you don’t have one on the page already, chances are your users know to go to the hamburger menu to find what they’re looking for.

This does come with a catch though: low engagement. According to a study by the user design research firm Nielsen/Norman Group, hidden navigation buttons like hamburger menus decrease content discoverability by 21%. Not only that, but it also increases the time it takes to use the navigation by an average of two seconds.

Unfortunately, offering all of your possible links at once is unfeasible. Luckily, there’s a way you can get the best of both worlds.

Joe Toscano, an experience design consultant, recommends using combo navigation.

Toscano writes… “Combo navigation allows the user to see the options they need the most and makes the rest accessible in a hamburger menu or something similar. […] The site’s content is laid out so well that I don’t need nav buttons. I can scroll the page and get where I want very easily. 

One great example comes from Apple’s mobile page where, instead of implementing a hamburger menu that hides options, Apple utilizes combo navigation to present the most important links (“Buy” and TV”) as buttons at the top of the page.”

If you can’t find what you’re looking for, you can always go to the navigation button on the top to see more options.

Tip #3: KISS (Keep it simple, stupid)

Successful mobile design is simple.

You never want to concern your users with extraneous elements like ads, pop-ups, and other content they don’t want to see, but especially not on mobile. Limit your compact visual real estate to only including the things they’re on the page for.

Consider adding a clear call-to-action that makes sense with the rest of the article. It’s also unobtrusive and adds even more value for the user.

Keep the user in mind

In the end, the most important thing to remember when approaching mobile-first design is that you’re designing it for your user, and only your user.

If it doesn’t add value to their experience, you can probably leave it out.

Design better with DesignBetter.co

Discover the world’s best design practices — DesignBetter.Co

DesignBetter.Co is the essential guide to the best design practices from top design experts. Learn how to build a world-class design organization and more.

Design Systems Handbook

Design Thinking Handbook

DesignOps Handbook

Design Leadership Handbook

Enterprise Design Sprints

The Design Better Podcast

Design Better Workshops

Plus much more at designbetter.co.

he History and Future of Adobe Flash

On December 31, 2020, the Adobe Flash Player was officially discontinued. Adobe finally stopped updating and distributing the Flash Player plugin, a.k.a. Shockwave Flash and blocked Flash content from running in the player starting January 12, 2021. Flash actually was done and finally died. Before the end of Flash, let’s give credit where credit is due. Flash was miraculous. It enabled new possibilities on the web, helped bring video and video sharing to the internet, and most importantly, it got some people interested in designing for the web.

Flashback

As a college student in the 1990s, being a graphic designer mostly meant creating graphics, logos, magazines, books, posters, album art, T-shirts… basically the print world. There were no online experience and courses. When the internet came along, and everyone and anyone seemed to need a website, many designers were stumped since this web thing required code.

Most designers never had to code and didn’t need to since Photoshop, Illustrator, PageMaker, Freehand, and QuarkXPress did the work for us. Import elements, place objects, move them around, scale them, change their color or size, it happened easily thanks to “what you see is what you get” (WYSIWYG) software.

Print Alone…No Longer

Why learn to code? Designers just left the web to computer scientists, computer engineers, and software developers. They understood the matrix of letters, numbers, and symbols that made up Hypertext Markup Language (HTML). They were also much faster typists. A lot of graphic designers didn’t care about HTML. “Let the coders deal with coding,” we thought, “and we’ll stick to print.”

Many of us did, until we saw new opportunities for our clients who had to be on the web and it became a matter of evolve or be left behind. Fortunately, web layout software had arrived that promised to make getting a website designed quickly and easily. GoLive CyberStudio (later acquired by Adobe), Adobe PageMill, and HoTMetaL helped you design for the web since the software’s backend rendered the necessary HTML. Imagine Microsoft Word, but instead of a page with images and text that you can print, it makes a page you can put on the web. (Even older versions of Word let you convert documents to HTML for the web, and today’s versions still let you do this.)

Even with these early web design tools, designers had mixed feelings. The typography was so limited. One of my university professors was appalled that you couldn’t layout a site with Univers or any other specialty font that a company might have as part of their corporate identity branding.

On top of the expensive software we already needed, if we did not want to learn coding we would have to pay for another tool? Art supplies, computer peripherals, digital camera equipment, etc., etc., it was already expensive and especially for those on a budget.

On the other hand, design educator Ken Hiebert, author of Graphic Design Sources and Graphic Design Processes, found software such as GoLive to be a real blessing. The story from Hiebert’s perspective: we had been using PostScript fonts on a daily basis as well as PostScript laser printers, but that didn’t require us to read and write PostScript. GoLive handled HTML in a similar way: design what you needed, let it spit out the code, and upload it when you’re ready, without really needing to know HTML. If you wanted to get on the web without knowing code, GoLive or PageMill were a small price to pay. And if you were a visual thinker, those programs were right up your alley.

One Plugin, One Solution (Almost)

By the late 90s, and even with the advances in web design, things were limited. Software could take care of most of the work, but you still needed to have some basic knowledge of HTML to make sure everything displayed properly. Additionally, Cascading Style Sheets (CSS) were on the horizon, and that was a whole new thing you would have to learn to make your site look and function as it was designed.

To complicate matters, Browser Wars as well as slow internet speeds caused other challenges. Designers just wanted a better web, an experience that was designed rather than coded. Better typography!! Sound! Animation too! Why not? For starters, it wasn’t easy to achieve. Even Macromedia’s Dreamweaver a program that promised a better web, was still a challenge and some coding was needed.

Then everything changed with the release Flash, first named FutureSplash Animator, later acquired by Macromedia. Text, vector graphics, and images could be composed in a layout and uploaded to the web, with many if not all of the refinements designers had become accustomed to. For example, if you wanted to use a particular font on the web, especially as a headline or button, you needed to make that text into a bitmap image that often looked rough. Today text as image is not done due to Google and SEO technology.

Flash to Make Them Dance

When Macromedia acquired FutureSplash and released it as Macromedia Flash, a world of possibilities arrived. Yes, you had to pay for the Flash software to make a Flash site, but it was worth it. Visually, new possibilities emerged. Artists and designers pushed the web into new and unforeseen directions.

Flash appealed to a certain audience, a creative one. “Flash was the internet that we thought we were going to get. Make things look more digital and less like documents. HTML and CSS websites were simpler then, but Flash was for visual artists, it was something you could relate to. With Flash, code was secondary, and the elements were visual.”

If you wanted to make your own digital art or online experiment or website, you could quickly and easily learn Flash by reading a how-to books, taking classes, or you could learn with Lynda tutorials. I started making my own custom Flash work, focusing on websites and motion graphics.

Flash Giveth, Flash Taketh Away

In the early 2000s, design was undergoing an identity crisis. Maybe the animated logos weren’t needed? Maybe Flash is not the best way to go for the whole site? You could design your layout and slice it up using Macromedia Fireworks, with or without Flash content. Add all the features and animation and sound and Flash headers you want. The sky was the limit and many designers and clients wanted to push the limits.

“I want my website to my creative thoughts and design!” Creating unique, thought-provoking artistic experiments with Flash was one thing, but using Flash to make an eccentric website for users who wanted and/or needed something simple, seemed difficult for users. Approaching web design like a kid in a candy store, some would put every and any tasty ingredient into a bowl, mix it around, and offer it up as a super, special, flashy treat. So much to see and explore with this new technology! Some designers thought it was their duty to challenge conventions, going so far as to “hide buttons” so the user had to work to find them. At the time, this was considered pushing the creative limits!

In 2001 Apple didn’t require the Flash plugin to use their site, but they did use bitmap images to render type. Captured via the web.archive.org.

As designers and non-designers packed more and more effects into their web content using Flash, or chose to hide web content, sites became complicated and/or unusable. Some clients wanted the complex, but larger sites with more content resulted in longer load times, meaning longer wait times, especially if you had an animated logo that required many seconds to minutes of your patience before the website even loaded.

These long Flash Intros, became the norm. In order to let a site fully load in the background, a short introduction, animation, video, or game would keep users busy and/or entertained, which really just annoyed people. In time a solution would come in the form of a button. Users who didn’t want to wait and watch an intro could jump ahead by clicking Skip Intro.

On the plus side, Flash brought people from all walks of life to web design, but we had been led astray by wanting to create one shiny thing after another. Eventually it was too much and a change was needed. We saw what the web could be, and what it shouldn’t be. Many designers and non-designers realized that the flashy animations didn’t matter as much as the content and the users. Fancy sites shouldn’t corrupt the experience. It’s all about people and usability matters.

Usability is less about flashy sites, and more about function. Create simple sites and, Keep It Simple Stupid (KISS). Books like Skip Intro: Flash Usability and Interface Design by Duncan McAlester & Michelangelo Capraro taught readers to design for users. If that meant learning code in order to be a better designer, better artist, and a better web developer, then so be it. Some Flash designers did just that. As each new version of Flash gained abilities and ultimately ActionScript, which required learning more code to create Flash sites and features.

Flash Blows Up, for Better and Worse

In 2005, Adobe acquired Macromedia and all of their products, including Flash. By that time, it seemed like everyone and anyone used Flash, even an startup named YouTube. Entertainment could reach the masses, video had evolved, and so did the internet. As design and development for the web advanced, you could do more than ever before with HTML, CSS, and JavaScript. They were lightweight and did not require a fancy Flash plugin that might crash your browser. You did have to learn more detailed code though, and for some visual designers that was difficult.

Better yet, HTML, CSS, and JavaScript did not require you to purchase a piece of pricey software to get the job done, provided you were somewhat fluent with those web development platforms and had a text editor such as TextWrangler or BBEdit. In terms of web content, or content itself became king and blogs had blown up. Content Management Systems (CMS) became the way to get on the web quickly and easily.

Flash was beginning to look especially outdated and threatened, when Steve Jobs critized it, keeping it off the iPhone. To make matters worse, Flash had become a pathway for criminals who would use it to attack your computer, as routinely reported by security experts such as Brian Krebs.

Turns out, most of us don’t miss Adobe Flash, especially if you own an iPhone, iPod, or iPad. Some miss Flash now that it’s completely gone because it changed the way we look at web design and think about the web. Flash was the original engine that helped make YouTube work. Now that Flash is officially dead, doesn’t it deserve some respect? Some credit? Who really knows? Like the opening animations and videos that Flash spawned during its glory days, we’ll have to wait and see.

nyone who is an experienced graphic designer knows how important designing with a grid is. You can create a visual and structural balance within your design using a grid system. Basically designing with a grid is a way of organizing content on a page, using any combination of margins, guides, rows and columns. It has been used for years in newspaper and magazine layouts with columns of text and images and is now commonly used in web design. You can use a combination of grids throughout an entire project to achieve a consistent look and feel. Designing with a solid grid structure will help in creating successful design layouts in both print and web design.

There is no limit to the layout options using a grid system. Grids can range from 3 columns to 16 columns to 24 columns or more. All depending on the framework you are working with for your design. These building blocks, the variation of column widths, borders, page size and other features of the grid will lead to unique page design. Using a grid system will help to position the elements of your design on the page. Once the grid is established, it is up to the designer to decide when and how to break out of it. This doesn’t mean the grid system will be ignored, but elements may cross over from column to column, extend to the end of the page, or extend onto adjacent pages. Breaking out of the grid can lead to the most interesting page designs.

I have found many great resources, blogs and sites related to the Grid System in design. Below are a few of the top links with more detail information about the grid system and using it in graphic and web design.

Reference Links for Grid System in Design

www.thegridsystem.org

960px-grid-templates

www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach

five-simple-steps-to-designing-grid-systems-part-1

960.gs

gridness.net

here are many different styles and trends used throughout the design world. One of the recent trends in design is minimalism. The term minimalism is also used to describe a trend in design and architecture where in the subject is reduced to its necessary elements. Minimalist design has been highly influenced by Japanese traditional design and architecture. In addition, the work of De Stijl artists is a major source of reference for this kind of work.

Architect Ludwig Mies van der Rohe adopted the motto Less is more to describe his aesthetic tactic of arranging the numerous necessary components of a building to create an impression of extreme simplicity, by enlisting every element and detail to serve multiple visual and functional purposes (such as designing a floor to also serve as the radiator, or a massive fireplace to also house the bathroom). Designer Buckminster Fuller adopted the engineer’s goal of Doing more with less, but his concerns were oriented towards technology and engineering rather than aesthetics. A similar sentiment was industrial designer Dieter Rams’ motto, Less but better adapted from Mies. The structure uses relatively simple elegant designs; ornamentations are quality rather than quantity.

Using sometimes the beauty of natural patterns on stone cladding and real wood encapsulated within ordered simplified structures, and real metal producing a simplified but prestigious architecture and interior design. May use color brightness balance and contrast between surface colors to improve visual aesthetics. The structure would usually have industrial and space age style utilities (lamps, stoves, stairs, technology, etc.), neat and straight components (like walls or stairs) that appear to be machined with equipment, flat or nearly flat roofs, pleasing negative spaces, and large windows to let in lots of sunlight.

This and science fiction may have contributed to the late twentieth century futuristic architecture design, and modern home decor. Modern minimalist home architecture with its unnecessary internal walls removed probably have led to the popularity of the open plan kitchen and living room style. De Stijl expanded the ideas that could be expressed by using basic elements such as lines and planes organized in very particular manners.

he art of spacing your type is know as kerning and also tracking. In typesetting, the process of subtracting space between specific pairs of characters so that the overall letterspacing appears to be even is KERNING. Where the overall tightness or looseness of the spacing between all characters in a line or block of text is known as TRACKING. Although allot of designers only use the term KERNING when adjusting type is their designs. Anyone who works with letters extensively knows that good spacing is often more important than good letters. In “Lettering as a Work of Art”, the essay that prefaces Treasury of Alphabets and Lettering (1966 but originally Meisterbuch der Schrift, 1952), Jan Tschichold says, “Good lettering demands three things:

(1) Good letters.

A beautiful letterform must be selected which is appropriate to the purpose it is to serve and to the lettering technique to be used.

(2) Good design in all details.

This calls for well balanced and sensitive letter spacing and word spacing, which takes the letter spacing into account.

(3) A good layout.

A harmonious and logical arrangement of lines is essential.

But, as Tschichold shows, the letters of the Roman alphabet pose problems for anyone hoping to achieve such perfection. They are not only variable structurally but they differ greatly from style to style, from typeface to typeface. Thus, there are letter combinations that are inherently awkward if not fiendishly difficult to space properly. Especially in metal type where letters are constrained by their bodies. But this age-old limitation disappeared years ago with the advent of phototype and its successor digital type. Today, the only restriction on good spacing in type is the design of the letter itself.

Whereas handletterers can alter and manipulate individual letters to improve the spacing of a word or line designers working with type have to make do with forms they are given—unless they want to become like Herb Lubalin and his colleagues, subtly cutting off parts of letters, redrawing them, butting letters together and doing whatever it took to achieve good spacing, even in an era that stressed “tight but not touching” spacing.

However, what Lubalin would have considered good spacing would not have passed muster with Tschichold since his work focused on the space between letters not a balance between that and counters. The difference between Tschichold and Lubalin is that the former’s view of good letterspacing was influenced by calligraphy and book typography and the latter’s was determined by the demands of advertising design. For text typography the balance between inner and outer space is essential to achieving an even color to a page of text which, in turn, makes the experience of reading smoother. Although Tschichold addressed lettering for display in Treasury of Alphabets and Lettering, his notion of display was colored by classical inscriptions on monuments and architecture. Lubalin accepted holes created by counters in his work because he was more interested in the massing of text to provide a visual punch that would attract viewers and turn them into readers. The holes created patterns that enlivened the headlines or short blocks of text found in advertising and graphic design. Lubalin’s design philosophy did not translate well to books and other lengthy texts, but it worked well for advertisements, posters, book jackets and packaging.

Now that we have covered the discussion of different philosophies of letterspacing, it’s time to have some fun. KernType is a game to practice your kerning that Mark MacKay, an interaction designer, has created for Method of Action, a company that says it is devoted to “peer-to-peer education for people who want to get things done”. KernType is apparently part of their online course Design for Programmers.

It took me a little time before I got the hang of KernType. It’s a cool idea for typography students and others to learn about good letterspacing, but it does need some work. While some of its solution are open for debate, there needs to be explanations for the solutions and what constitutes good type and letterspacing. KernType is still a fun an interesting idea to explore.

Try It Out Yourself

KERNTYPE a kerning game

teve Jobs didn’t become successful overnight.

It took years of hard work, determination, and perseverance to build Apple into the company that it is today. When you take a step back from your MacBook (and put down your iPhone), and really think about all that he accomplished, it’s beyond remarkable. He changed the way we live.

Thanks to his many lectures and speeches, we have a glimpse into his day-to-day work ethic and how he managed to do as much as he did. In order to help you reach your career goals, we’ve rounded up a few of his best quotes. Read them, be inspired by them, and then get out there and make your dreams come true.

My favorite things in life don’t cost any money. It’s really clear that the most precious resource we all have is time.

Your work is going to fill a large part of your life, and the only way to be truly satisfied is to do what you believe is great work. And the only way to do great work is to love what you do. If you haven’t found it yet, keep looking. Don’t settle. As with all matters of the heart, you’ll know when you find it.

Have the courage to follow your heart and intuition. They somehow know what you truly want to become.

I think if you do something and it turns out pretty good, then you should go do something else wonderful, not dwell on it for too long. Just figure out what’s next.

Sometimes when you innovate, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations.

Quality is more important than quantity. One home run is much better than two doubles.

The people who are crazy enough to think they can change the world are the ones who do.

Your time is limited, so don’t waste it living someone else’s life. Don’t be trapped by dogma—which is living with the results of other people’s thinking. Don’t let the noise of others’ opinions drown out your own inner voice. And most important, have the courage to follow your heart and intuition.

here have been many discussion about minimizing load time for faster user experiences and why it’s important to do so. Below you see how to optimize images in Photoshop for better web performance.

Keeping image size to a minimum is an important part of keeping your sites load time quick. By understanding a bit about image compression, and how to optimize images for web, it’s possible to significantly cut down on image size while improving image quality and site performance.

Saving for Web and Devices in Photoshop

The first key to better image optimization is adjusting how you save images for the web in Photoshop. If you’re used to the typical “Save” or “Save As…” functions, it’s time to learn a new trick:

“File > Export > Export As…” is what you should start using when saving images for the web. Working from this tool gives extra you much more control over your images and graphics with previews of how an image will look after compressed. There are multiple fine tuning controls for advanced users.

You should almost never use the typical “Save” or “Save As” option in Photoshop when an image is being used on the web. Instead, be sure to “Export As…” to get better control over image compression.

There are three formats we’ll be discussing in this article, and they are the three you’ll find yourself most commonly using:

• .png (8-bit) – Lossless Compression type, limited color range
• .jpg – Lossy Format, great for photographs
• .gif – Lossless with limited color range like .png 8, but .png is usually the better choice.

There will be instances when you’ll need to use 24-bit .png (ie: it’s the only commonly supported filetype with an alpha channel for image transparency on the web), but for the purposes of this post we will not be discussing it. It will almost always be larger than any other format given that it’s a lossless compression type that supports a wider color range.

JPG Compression

The JPG image format is best suited for images that have a wide range of colors where there aren’t sharp transitions or fine edges. Because of it’s compression algorithm, it works very well for Photographs. It’s possible to significantly reduce the file sizes of photographs using JPG while keeping image quality very high. Take a look at the images below for example: There is hardly any difference between the image saved at “GREAT” quality = 674 KB files size (a close representation to the original image) and the JPG saved at “FAIR” quality = 65 KB files size. The difference in the image is nearly 1/4th the original size!

Top Image = “GREAT” quality = 674 KB files size

Bottom Image = “FAIR” quality = 65 KB files size

With .JPG compression you have the ability to adjust the quality in exchange for file size. With photographs, you’ll probably find 60-70% quality to work just fine. If there is text in the image, you may notice more artifacts given the sharp edges, and may have to bump up the quality.

GIF and PNG Compression

The .GIF and 8-bit .PNG image formats are better suited for images with limited color ranges (they can display up to 256 colors), where there are large areas of uniform color. In these instances, .PNG and .GIF will usually produce a close-to-perfect representation of the original image while saving at a higher rate than .JPG. Typical uses of these formats include interface items, icons, and images where text needs to be represented accurately.

More often than not, the 8-bit .PNG format will compress better than .GIF. Both formats support transparent pixels (Not to be confused with alpha transparency which is supported by 24-bit .PNG).

Image File Size really Adds Up

Compressing one image might cut down a little on overall page size, but if you make it a common practice to optimize images all around your website, you’ll end up saving heaps of bandwidth serving smaller files. By serving smaller files, you can make pages load faster, and make the user experience feel much more snappy.

Page load time is a huge factor in retaining users. In one online poll, 51% indicated that slow load times were the number one element that drove them away from a web page. Optimizing images isn’t the only way to speed up your website, but it’s a great way to start.

ow well do you know HTML / CSS / JavaScript? Here is a great resource that will help you add custom design and code to your website, without knowing any code. The site codepen provides sample designs with all related code for each.

CodePen is an online community for testing and showcasing user-created HTML, CSS and JavaScript code snippets. It functions as an online code editor and open-source learning environment, where developers can create code snippets, creatively named “pens”, and test them. It was founded in 2012 by full-stack developers Alex Vazquez, Tim Sabat and front-end designer Chris Coyier. Its employees work in a decentralized, remote environment, rarely all meeting together in person. CodePen is one of the largest communities for web designers and developers to showcase their coding skills, with an estimated 330,000 registered users and 16.9 million monthly visitors.

Explore CodePen Topics

CODEPEN.io