A Beginner’s Guide to Pairing Fonts

Posted on October 12, 2013

Reprinted from webdesign.tutsplus.com

Pairing fonts can be a challenge. Selecting two or more fonts which work well is one thing – selecting two which work together to achieve your typographic aims may have you reaching for the aspirin. Let’s see if we can alleviate any headaches. This guide will help you get started with font pairing for the web.

Luckily, typography has been around a lo-oong time. Typographic rules and conventions have had plenty of opportunity to establish themselves and there are loads of resources to help you out. The only problem is that by searching the internet you’re only going to find yourself confronted with millions of conflicting opinions! Let’s see if we can clarify a few things.

Here’s a quick breakdown of what we’ll cover in this guide:

• Your Aim
• How Many Fonts Should I Use?
• To Buy or Not to Buy?
• What’s the Nature of my Content?
• How Do I Achieve Successful Pairing?
• Pairing 1: Concord
• Pairing 2: Contrast
• Pairing 3: Conflict

Your Aim

Keep the essentials in mind. When you’re selecting multiple fonts to work together it’s crucial that you maintain both unity and variety.

How Many Fonts Should I Use?

How many fonts you throw into the mix is entirely up to you, but bear in mind the overall effect you’re trying to achieve. Fonts, like people, have personalities. And fonts’ personalities, just like those of people, can sometimes clash. Think of your fonts as table guests at a wedding reception; one entertainer is usually enough as too many strong personalities can make the atmosphere awkward, like an episode of Big Brother.

Make sure that there is some charisma in the group though; eight people with little to say just results in a toe-curling wait for the speeches..

It’s no longer around, but the Fusion Ads 2011 bundle site sicks in my mind as a great example of successful stack-em-high font use.

There are no rules to say you should or shouldn’t use a specific number of fonts on a page layout. Using multiple fonts together can be difficult, achieving harmony is challenging, but if you manage it the result can be decorative and striking. Use fewer fonts and your task is more straight forward. Try to make the best of both worlds by selecting fonts with multiple variants and weights. In this way you can take advantage of an array of styles, safe in the knowledge that they’ll compliment each other just fine.

To Buy or Not to Buy?

There are loads of free services through which you can take advantage of @font-face: google fonts,fonts.com, fontsquirrel’s font kit generator, but don’t immediately discount paying for fonts if the project warrants it. The cost of a single domain license can vary, but there are several advantages to shelling out.

Quality. The care and attention which goes into the production of commercial fonts is usually evident in the quality. That’s not to suggest the designers behind free fonts are caged monkeys, far from it, but there is often a qualitative difference. It’s a difference noticeable in the finer details; the line thicknesses, the forms, the white space and the kerning (spacing between characters).

Compare these two similar fonts..

Quicksand and Museo Sans Rounded

The kerning executed with Museo is superior. Without some tinkering, the kerning in Quicksand is imperfect (focus on the ‘o’ and the ‘i’ for example), and tinkering with kerning on the web isn’t hugely intuitive. Thereare tools, kern.js for example, which allow you to specify kerning on a per-character basis, but large bodies of text make this impractical.

“Big deal, the difference is barely perceptible!” you may say, but the devil’s in the details. So my Nan tells me.

Originality. Another advantage is the opportunity to stand out with original work. Having paid for your fonts, there’s a greater chance your design will retain an element of uniqueness.

Community. Putting your hand in your pocket is also a way of encouraging the growth of the industry. Foundries rely on healthy commerce to continue their craft. In any case, we’re looking at a cost which can be factored into the project and passed on to the client.

What’s the Nature of my Content?

When selecting fonts it’s important to consider the nature of the layout you’re dealing with. Are we talking mainly body copy? Are there multiple headings, sub-headings? Perhaps it’s a magazine layout with decks, blockquotes? When using multiple fonts make sure that the roles are clearly established; if one font is used as a sub-heading, don’t switch to another font for a sub-heading elsewhere. Keep a font’s purpose clear.

For the time being, we’ll keep things straight forward and select a few font pairs. We’ll consider the circumstances under which they’ll work well together, and ask ourselves why.

How Do I Achieve Successful Pairing?

You might have already heard this; successful pairing relies on concord, or contrast, but not conflict. That is to say your selected fonts can work well together by sharing certain qualities, or by being completely different from one another. However, font pairs can conflict in a number of ways – being too similar being just one.

Let’s examine each of the successful possibilities.

Pairing 1: Concord

Describing two fonts as having concordance suggests the presence of the same trait in both of them. Perhaps their kerning is similar, their proportions, their cap height. Have a look at these examples from Kerry Scott Jenkins and you’ll notice clear proportional similarities.

One way of achieving concordance between fonts is to pair two from the same family. If they’re family, they’re bound to get on well, right?! In any case, the Droid family, designed by Steve Matteson for use on Google’s Android devices, comprises various weights and styles, with serif and sans-serif faces. Perhaps a bit un imaginative, but these two work very well together. One or the other takes charge of headings, the other the body text.

Droid Serif and Droid Sans

Either way round is a great combination.

Droid Sans and Droid Serif

They’re clean and modern, plus (as you’d expect) they’re well suited for the web and smaller devices on account of their large x-height.

The x-height of a font describes the height from the base line to the upper reaches of the lower case characters, like the x. A proportionately large x-height helps with readability. And these two both share that quality.

Equally, fonts from the same designer often share qualities which help them achieve harmony. Look at the surprisingly similar proportions these two fonts display (check out the ‘o’)..

Cowboyslang and Supria Sans Condensed by Hannes von Döhren

Pay attention to the line quality of two typefaces. They may at first appear to have nothing in common, but two crisply executed fonts may work better together than you’d think:

Bevan and Arapey Italic

Softer lines together can be just as effective:

Anodyne and Poulaire

Pairing 2: Contrast

Contrast between fonts often lends a winning combination, but in what ways can fonts contrast? Here are just some qualities to look for:

• Style: Take a look at any font resource site and you’ll see them categorized as Blackletter, Monospace, Script, Slab Serif etc. Fonts of different styles will often contrast.
• Size: Big font, little font. Say no more.
• Weight: Varying the weight of fonts is a common way to establish visual hierarchy. Hierarchy achieved by contrast.
• Form: Consider the proportions of a typeface. The relative length of the descenders, the curvature of the shoulders, the direction of the movement.
• Color: Not something we’re going to go into here, but color can easily determine whether two fonts work well together.

At its most simple, consider the contrast between serif and sans-serif fonts.

It’s a classic way of pairing; take a decorative serif for the heading and a sure-footed sans-serif for the body. Or take a no-nonsense sans-serif for the headings, with a pleasantly legible serif for the body. A winner in many cases. Let’s look at a few, kicking off with two system fonts. That’s right, even they can work well together.

Georgia and Arial

Where can you see these two in action? Have a look at the skeleton boilerplate. Stripped of all superfluous styling, Georgia and Arial work perfectly in this environment.

For a little more refinement..

PT Serif and PT Sans

Don’t forget the role of whatever text you’re choosing fonts for. In the cases above, we’ve shown hierarchy through font-size; the headings are larger than the body text. There are other ways of establishing who’s the boss, weight being an obvious one.

Lora Bold and Istok Web

Let’s say we’re not concerned with an entirely textual page layout. Perhaps we’re dealing with two headings and nothing more (an Under Construction message, for example). We can afford to be a little more adventurous as we don’t have to account for long measures or large bodies of text. How about a striking h1, coupled with a reinforcing h2?

Condensed fonts always work well to get your attention, as they take up a lot of vertical real estate.

Bebas Neue and Alex Brush

Here’s an example of a similar combination working very nicely:

The distinctive work of Gerren Lamson and Simon Walker

And for those of you interested, here’s a breakdown of what those typefaces are:

• Script: Scriptorama Tradeshow JF
• Body copy: Actor (Google Web Fonts)
• Heading: Custom typeface by Simon Walker

And again, utterly contrasting qualities, yet a clear hierarchy through color which prevents either from stepping on the other’s toes..

Or how about two straight-playing sans-serif buddies? The next main heading (Conqueror) is an inline font designed expressly for titling. With it being an uppercase font, you might need to expand the letter-spacing a bit, as done in the example below.

Inline describes a typeface with white lines appearing inside the character strokes. –fonts.com

Sadly, it’s not available as a web font (yet) so you’ll have to make do with it for pixel design at the moment.. It’s definitely one of my favorite fonts at the moment.

AW Conqueror Inline and Gudea

Take this slab serif font; minimum effort, maximum impact.

Alpha Slab One and Mako

Slab serifs make very effective attention grabbers, but can be a bit pushy if you’re not careful. Bull in a china shop sort of thing. The above example works actually very well with its more delicate partner, because it contrasts whilst also sharing some personality traits. They appear to be very different fonts, but if you examine the curves, you’ll see they’re not as dissimilar as you’d first think.

Some fonts are just so delicious that you almost can’t fail. Take Buttermilk for example; sumptuous, elaborate and decorative. It will look great whatever you pair it with (as long as you don’t try to steal its thunder!) Here we have pairing with Georgia:

Buttermilk and Georgia

And with Aller, an equally subtle sans-serif:

Buttermilk and Aller

Then this was going to be my example of pairing it with a clashing personality – too strong in its own right. But you know what? I can live with this, it’s actually quite nice! I guess sometimes you can never tell..

Buttermilk and Eccentric

Pairing 3: Conflict

Let’s not focus too much on what doesn’t work well, we don’t want to sour the joyous combinations in the rest of this guide do we? That said, let’s just illustrate how two fonts, which are arguably too similar, can look awkward together.

Almendra and Stoke

But why don’t they work well together? I thought the idea was to contrast whilst ensuring an element of unity?

They’re different styles; one’s a Blackletter, the other Roman serif, check.

They have different proportions; one’s condensed with a relatively large x-height, the other more extended with taller ascenders, check.

Yet they share weight and size, and both share those odd spurs on the end of each character.

Therein lies the problem. By sharing those last three details (weight, size and decoration) they’ve becometoo alike. They’re performing very similar roles, but the small differences are conflicting which makes for an awkward overall effect.

The curvatures of the spurs, for example, are completely at odds with one another:

Their axes are just ‘off’:

And the way a Blackletter’s formed gives it a slight direction, as opposed to the vertical nature of the Roman:.

These differences might not be a problem in other examples, but here we have two fonts which (at first glance) appear the same. It’s a bit like when you see a celebrity standing next to their waxwork model atMadame Toussauds. It’s never comfortable to look at.

It’s difficult to attribute ‘working’ or ‘not working’ to facts and figures, normally it will be a feeling you get, you’ll just know. Once you’ve concluded that you don’t like a font pairing, try to work out why and it will help you make decisions more quickly in the future.

One Last Tip

These days, if you head on over to Google’s Web Font directory, you’ll find pairing suggestions for each font. Tidy.

Conclusion

I hope your approach to pairing fonts has been simplified by this beginners’ guide. If there’s one important rule you should take away from this it’s “You won’t know until you try!”

Be adventurous. As web designers we have an ever-growing repository of fonts available for use in our designs. Consider the fundamentals, then experiment. You’ll undoubtedly be surprised by what you find.

Choosing the Right Font: A Practical Guide to Typography on the Web

Posted on October 12, 2013

Reprinted from webdesign.tutsplus.com

Typography is an huge field. People devote years of their lives to this ancient craft, and yet there’s always something new to learn. In this article, I’ll be reviewing the major points that you should consider when selecting a typeface for a website.

Practical Typography

When you design for the web, you have to accept that the content will change. It’s simply out of the question to take the time to kern (adjust space between individual letters) each title on a huge website. In other words, you give up some control.

What I’m going to be focusing on today is practical typography. For me, this means accepting that you will never have total control over the type on your websites. Choosing a typeface, deciding on a size, these are all things we as designers have a say in. Practical typography means learning how, and more importantly why, to adjust what you do have control over. Let’s get started.

Readability

What do you do with type? Read it! So why do so many websites make it so damned difficult to do just that? Be it tiny font sizes, crammed line-height, or just plain ugly fonts, it seems that a lot of sites out there are determined to not let you enjoy their content!

By making your type readable, you immediately jump ahead of at least half of the competition, which is fortunate, really, because it’s not that hard!

Typefaces

When deciding what typeface to use on your website, it’s important to remember: don’t over think it. I know that many designers hate using Helvetica, because it is wildly overused. I agree with this, but there’s one very important piece of information this statement leaves out: why. People overuse Helvetica because it’s just so damn good. It fits right in with virtually every design imaginable, it works well in small, as well as huge sizes.

While it may go against your beliefs to set your type in such an abused face, if it works, then go for it.

Your body copy is arguably the part of your design that needs to be most readable, so make sure you pick a font that works well in small sizes. What do I mean by that? If you can set your copy to 10px and you can still make out what it says, then that’s a good indication you’ve chosen a readable typeface.

That covers body copy, but what about titles?

Readability in large titles is far easier to figure out than in body copy. If you can make out what it says immediately, then it’s readable enough.

What’s good about typefaces is that once you’ve worked on enough projects, you’ll have a good idea of what works and what doesn’t. From there, you’ll be in a better position to make critical choices about fonts.

There’s no formula for choosing the right fonts for your website. Often, the best way to decide on one is to just try out each font you think might work, and then compare. Choosing fonts is really a gut instinct, but it’s important to remember that 90% of the time, a user won’t be thinking about what font is used, so if it’s readable, then that’s often good enough.

Pairing

There’s rarely (if ever) a situation where just one typeface is appropriate for use on a site. The average website has a lot of text. There’s no way one typeface will work for all of them! The vast majority of well-designed websites use two typefaces: one for body copy, and one for headlines.

When choosing a pair of fonts, the most important thing to consider is how they work together. “Are they similar enough?” “Too similar?” “Not different enough?” All these are questions you should be asking yourself. I find that the best way to choose a pair of fonts that works is to just put a lot of them side by side and decide on the best. There’s no way to know which is the best until you’ve tried all of them.

Sometimes, the most appropriate thing would be two sans-serifs, while other times, you want a sans for headlines, and a serif for body copy. It doesn’t particularly matter if they look similar, what matters is if theyact similar. This of course depends on the rest of your design. Whichever fonts you choose has to convey your message strongly, and if that means having contrasting typefaces, then go for it.

Simon Collison uses font pairing excellently on his site, choosing a strong sans-serif for main titles, and a simple Serif for the other, smaller headlines, as well as copy. This partnership expertly displays the message that the website is trying to say, in a way that each font individually could not express.

Size

As a general rule, designers like to set their body copy at the very least at 12px. Most, however, chose a larger size like 14px, which is even better for readability. Font-sizing is really quite easy to decide on for body copy, but it’s the titles that start to get complicated.

How big should your titles be? It depends. In my observation and creation of websites, I’ve come to the conclusion that a title should only be as big as it needs to be. This means that you should try out different sizes until you find one that is just big enough to draw the attention you want to it, but no bigger, unless huge text is what you’re going for, in which case go right on ahead.

Hierarchy

The nature of a title is big. It’s an important item on the page, so naturally it should be bigger, right? Yes and no. Yes, titles are generally bigger than other elements, but no, this is not the only way to draw attention to them. Color, weight, and placement are all equally important to establishing a clear visual hierarchy to your pages.

The key point to remember about visual hierarchy is that it’s all relative. Text on your site only has to stand out compared to the other text on your site. Take Wilson Miner’s site for example. His titles are quite small for how important they are, and are surprisingly close in size. However, his use of color distinguishes the most important title, and gives them more meaning.

The use of type is a very important tool to establishing visual hierarchy, be it through size, color, weight, or even placement.

Leading

Leading, or the space between lines of text, is an invaluable tool for readable text. Bad leading can ruin an otherwise stellar piece of copy, and good leading can make even the worst type look readable. Fortunately, it’s not that complicated to implement.

Using the CSS line-height property, you can easily assign space between your lines of copy. Generally speaking, for large blocks of text, 1.5 times the size of the text is a good size. Smaller text should have tighter leading, and huge text should have a lot. It’s not that complicated, really.

Tracking

Tracking is the space between characters in text. I’ll admit, this one’s a bit of a grey area when it comes to “Practical Typography,” in that CSS doesn’t give us huge control over it. Usually, you won’t have to worry about it for small text, it’s only for titles that it becomes an issue. Generally speaking, adding letter-spacing: 1px; or letter-spacing: 2px; to your CSS should be enough space between the letters.

Another place it would be beneficial to add tracking to is small-caps. Here it’s generally considered good practice to add an extra pixel or two between the characters, as they naturally appear larger.

Color

While not strictly-speaking typography, color is a very important part of every website’s type. I’m not talking about color schemes, but rather about the contrast needed to insure readability on your site. Black text on a white background (or light background) is widely considered to be the most readable color for text.

I’m not saying you should go and set everything to black-on-white, just that when you’re designing, you should be aware of the contrast of your text. It could come back to bite you if you’re not careful.

The Grid

In my opinion, use of the grid is the most important idea for practical typography on the web. You can have great fonts, spacing, and colors, but if you don’t have a good layout, you may as well be using comic sans.

Using a grid when you’re designing with type provides a clear balance and geometric structure to your design. It isn’t the magic fix to a bad design, but if you design with a grid from the start, you can be sure that at the very least, your layout will be solid.

So what does a grid have to do with typography? Put simply: everything. The grid embodies all the fundamental ideals of typography. It’s geometric, consistent, usable, and above all: beautiful.

Setting your text with a grid is a key way of establishing visual hierarchy, and it’s a great indicator of how large (or small) your text should be.

Standing Out

As I said before, if you’re typography is readable, then you’re already ahead of 50% of the competition, so what about the other half? If you’ve made it this far, then together we leave the clear, consistent rules of readability and enter the murky and mysterious world of being unique.

Fonts

You want your website to stand out? Step 1. Employ some unique typography. Presumably for you this means to use some unique fonts. But what makes a unique font? For me, it’s not one that isn’t used often, but one that has a message or feeling not employed by other faces.

Choosing a unique font is really about the feeling. Does this font feel different? Or does it just look different? When choosing typefaces for any projects, you should always be considering the feeling of the design. As this is totally a personal opinion, I can’t help you find a unique typeface. What I can do is show an example of unique fonts.

The Design Cubicle has a very unique logo and design. It’s strong yet classy, attention-grabbing yet subtle. When I look at its design, the feeling of class just oozes out of the site. It says, “I know what I’m doing.”

Be Unorthodox

How many websites do you know whose logo is as big as the content? What about an ultra-thin title? Unlike my last point, being unorthodox is about seeing what others are doing, and then doing the opposite.

The folks at Savvy Belfast are smart. They noticed the cramped look of most websites, and decided to replace all that meaningless copy with one statement.

Even if you visit their site for only a moment, you can’t help but remember their name.

Match Your Design

Typography is not it’s own thing. It’s a part of web design just like any other. Type is important, yes, but you shouldn’t forget that is is just part of what makes a web design great. You should design your type with the rest of your design in mind.

If you use a highly elaborate background texture, then maybe a nice serif would be good for your titles.

My point here is simple: Don’t forget the context. Design is a huge field, and today I’m just talking about one part of it. For a successful website design, all the parts have to mesh together successful. That’s the goal: to craft the experience that somebody will have on your website. You can’t do that with just type, or just color, or even just content!

Emotional Type

So much of an experience is defined by how you feel: happy, sad, amused, angry, blah blah blah. Humans have a wide range of emotions, and as designers, it’s our job to evoke these emotions with our designs.

Of all the things I’ve talked about today, this is by far the most abstract, and it’s a little hard to explain. Instead of trying to explain this to you, let me show you.

When I first visited Solid Giant, I smiled. I smiled the next time I saw it, and even the next time. Immediately I felt a kinship towards the design. That big, fuzzy “G” is just too adorable to forget!

Quite frankly, I think it’s genius.

There’s no way to teach emotional design, it’s something you have to experience, and then play with in your own designs.

Practical Typography

Well, you’ve reached the end of the post. I hope that at the very least you’ve learned something, but if not, that’s fine too. If there’s one think I want to leave you with after reading this, it’s that above all: be readable. The rest will follow.

What do you think the most important part of typography on the web is? Leave your opinion in the comments!

Less is More: Fundamentals of Minimalist Web Design

Posted on October 12, 2013

Reprinted from webdesign.tutsplus.com

Fighting the battle against clutter is something every designer undertakes, whether it’s on their own site or when designing for a client. Your web site’s design should enhance your site’s purpose by putting the focus on the content and being usable by everyone. Taking the extra time to ensure no detail is left overlooked will produce an effective and attractive website.

Define the Site’s Purpose

Your site needs a clearly defined purpose to eliminate any confusion from the start…

First things first – before opening up your favorite graphics app to design your hot new minimal site, you will need to establish what the site is going to be used for. Your site needs a clearly defined purpose to eliminate any confusion from the start by having a single, strong focal point. It may be to display award winning photographs to potential clients, share breaking technology news or used to sell your hand made pet toys. Start by making a simple statement:

My site needs to ______________________________________.

• Educate teens on the dangers of texting and driving
• Showcase award winning photos to potential clients
• Sell hand-made, premium dog toys

By clearly defining a purpose early on, you will be able to use it to help keep your design on track. As you work through the design elements, continue to ask yourself questions such as:

• Will this compliment and reinforce my site’s purpose?
• Is this really needed or am I just filling space?
• Will this be distracting from my site’s purpose?

Anything you add to the site that does not reinforce your site’s true purpose can be a distraction, weakening your overall message. The additional items must compliment your focus.

Your site selling high-performance pogo sticks does not need to include a link to your stock photography portfolio, no matter just how awesome it is.

This isn’t the time for things you want on your site, it’s what is needed that is truly important. You only have a few seconds to convince your visitors to stick around and read your message.

Sweat the Little Things

Every detail has significance, what you remove from your design is equally as important as what you add.

The fundamentals are just that, fundamental. All your design principals become much more important to understand and implement when clutter and unneeded items are removed, pushing your message to the forefront.

Mistakes are magnified with clean, simple, minimal designs. Ensuring you have studied the design fundamentals is vital when it comes to placing items on the page and relating them to one another. Everything you do needs planning and purpose – just because there is room for “one more thing” doesn’t necessarily mean there needs to be something there.

Many if not all of the design principles apply to clean, simple, minimal style designs but be sure to get these down from the beginning:

Unity

Your page elements need to get along and fit well together to improve the overall design. Items that stand out to grab attention on the page need to stand out because you want them to, not because they don’t mesh with the other items on the page.

 

Simple splashes of color add interest to a black and white color scheme and draw your eye from the logo right into creative, clever and fun.

Whitespace

Elements on the page need room to breathe. It may seem logical to you and you may be doing it without even thinking but common requests from clients seem to be:

• “Let’s add one more thing, there seems to be a lot of extra space here…”
• “There is room under the menu, move it up so we can add…”
• “There is a gap along the sides of the site, we should also include….”

By giving up valuable whitespace between elements, the site becomes cramped and elements begin to run together, not giving your eyes a needed break which help to define separate areas.

 

Web Creme has a limited number of ads but places them in an area with greatest impact.

Alignment

There are many ways to align objects on a page but with a clean, simple, minimal design, if something is even a pixel or two off it will be much easier to spot.

Use a grid to keep everything you need aligned, squared away and perfect. They’re great from sketching out a design all the way to development with many frameworks to choose from.

 

Subtlety not your thing? Create an immediate impact by choosing a bold color to compliment your design.

Hierarchy

With many sites, you only have a few seconds to convey your message or help lead a user where you want them to go.

The way you use different sizes and weights of elements creates a path, leading the user through the page, typically ending up in a call to action area. When users feel comfortable they are heading in the right direction, they will continue on, but if confused as to what is going on, they may become frustrated.

 

Pandaweb uses whitespace to keep visitors’ attention on the promotional area.

Remove the Unnecessary

What is the best way to find and eliminate unnecessary elements? By not adding them in the first place! Spend extra time planning out the site and defining your purpose early on to eliminate extras that were just filling up space.

During the design process, spend ample time going through each element of your site asking – do I really need this? Your purpose or focus may shift slightly along the way so it’s a good idea to keep asking yourself this as you move along.

If you have access to a test group, try using click tracking software on a test site to locate elements that are never used. Look at the unused elements and decide whether you can remove them or place them in a different location.

Remember, creating a clean, simple, minimal design allows the mind to get down to the basics, shows your visitors what you have to offer and get your message across in the most efficient way possible.

Usability is Not Optional

There’s no good reason to choose design over usability, they will work together perfectly if executed properly. A well designed, easy to use site will keep visitors around longer and fulfill the site’s ultimate purpose of displaying your content and delivering your message effectively.

A site that is easy and comfortable to use will almost feel as if it is reading the user’s mind and browsing becomes easy and fun.

Don’t be afraid to be creative with new styles and techniques but be conscious of common functionality and placement of elements that you may take for granted:

• Links should be easy to identify and click on
• Always provide a way to go home
• Never disable the back button
• Add close buttons to content in pop-up windows
• Indicate what page the user is currently on

Some people associate clean, simple, minimal designs with miniature text and almost unusable elements on an empty page. Some of the most basic guidelines are commonly overlooked when designing new sites:

• The navigation should be consistent and intuitive to use
• The content should be readable with clearly defined headings
• The code should be clean and comply with the latest web standards
• Ensure your site displays and functions properly on all browsers

Locating Trouble Spots

While some things look great in the design phase, once you get the site in your browser, you may uncover usability challenges you never noticed while the design was in Photoshop.

A great way to actually find out how the site is used is by grabbing a volunteer and looking over their shoulder or (with their permission) use a desktop sharing tool if you’re not in the same physical location.

Give them a list of tasks and watch closely to see if they’re easily accomplished:

• Purchase a book from my store
• Contact me for an appointment
• Find out about my background

You may be amazed how different people may interpret different areas of the site or the paths they may take. Watch them closely but don’t give any help or tips along the way.

• Will they know where to click?
• Do they get lost on a specific area?
• Are they clicking on a design element thinking it will bring them to a new page?
• Do they have a hard time clicking on a tiny icon?

Take notes on areas they may struggle on and find ways to improve. Do not get defensive or angry if problems are found with the site. Use that new knowledge to improve your work and carry that knowledge onto future projects.

But I Like Color!

Creating a clean, simple, minimal design does not mean you need to be stuck in black & white or with a drab and uninteresting site, just learn to simplify your color choices. There are two main routes to take when adding color:

Color Splash

With small pops of color, your visitors’ eyes will immediately know that the area with color is important. Use this to your advantage by using it to paint a path for the eyes to follow.

 

CSS Frameworks such as the 960.gs system provide a way to keep everything aligned perfectly.

Simple Yet Bold

A more daring choice may be to make your color statement in the background with a bold solid color. Bold can be distracting so make sure you are not taking away from the message of your site, making it hard to read or unusable but this will definitely get your site noticed.

 

The elements of Finch feel as if they all belong on the page and work together.

It’s Not for Everyone

Nearly anyone will benefit from a site with a strong focus but a clean, simple, minimal style is not for everyone.

Website Theme Authors – Often times you only get a few seconds before a buyer will decide on whether they want to spend time looking at the site you created. Displaying only a super minimal design as the only layout option may register as “basic” and be thought of immediately as lacking in features. You may just need to show various levels of what’s possible in areas and let them decide whether to use the feature or not.

Ad Heavy Sites – The clean, simple, minimal style will probably not the best fit for sites that rely heavily on advertising unless you have very understanding ad-owners that adapt to fit your style. A better option may be to place fewer ads but locate them in an area that would be clicked on the most.

 

Sofa uses an inverted pyramid of information leading you down the lage from the heading, company overview and into the services they provide.

Finding a Balance

Realizing we don’t all get full creative control of every design project, try and find a balance with your clients.

When explaining why you designed a site in a certain way, refer to other sites that do things correctly and explain why it works and why their website is a success.

Explain how they benefited and how you could too. Show them the positive results and responses the other site has received because of the good design choices and taking the extra time to ensure all visitors have a usable, effective site.

Planning Ahead: Ways to Improve Your Web Design Workflow

Posted on October 12, 2013

Reprinted from webdesign.tutsplus.com

If you’re looking to up your game as a web designer, the planning phase is probably the single most “bang for your buck” skill-set that you could work on. Sometimes it seems that in the dizzying world of web design blogs, roundups, and screencasts, people just skim over the part of the process that makes everything else possible.

This post marks the first in a series where we’ll be examining the “planning” phase in web design. The goal: to better understand the role that planning plays in design; when it’s effective, and when it’s wasted.

Why Plan At All?

Some web designers feel that planning has become a somewhat irrelevant part of the creative workflow –“Why bother planning when I can dig right into the creative phase”?; this kind of attitude is great for the designer who doesn’t mind spending an extra 10 hours on a project for the fun of it, but for others it’s a waste of time to ignore something so integral to the design process.

Before we really dig in, it’s probably important to explain what kind of planning I’m referring to – I’m not referring to the type of plan that involves “guessing” and falls apart minutes after the project starts. What I am talking about is a plan that will eliminate guesswork, define goals, and establish a solid foundation for you to get creative with. The art of planning is more like a “brainstorm with a purpose” than it is a comprehensive technical spec.

It’s a waste of time to ignore something so integral to the design process

Planning is the formative phase in any project – it doesn’t hinder the creative process, it defines it. A good planning session doesn’t even require a lot of time or energy, but the benefits will last far into the entire duration of the project. A thoughtful approach to planning will help boost your creativity, save you time in the creative process, and make you look like a rockstar to clients!

When Should You Plan?

Before you even fire up Photoshop or your favorite code-editor. Design Planning is about setting the overall mission of a project, so it’s important that you define the ultimate goal of the website that you’re going to be working on before you approach it creatively. Some top level questions you should ask are:

• Why will people be visiting the site?
• What function does it serve you or your client?
• What needs to happen for this design to be a success?

Answering these questions early on will save time, energy, and money in the long run, but more than anything, it’ll help you to figure out exactly how your website design is going to rock! Something as simple as spending 15 minutes planning out your ultimate goals can help refine your purpose and make sure that you don’t miss the bigger picture.

What Should You Plan?

Planning is going to be a little different for everyone out there – some sites are straight forward and require just a few minutes of planning; others are big, complex, and can spend days, weeks and even months in the planning stages. I’ll be discussing these steps in more depth in future articles, but I can outline about 6 crucial planning steps in any web design project:

1. Define Success
2. Define the Content
3. Define the Features
4. Consider the Audience
5. Do the Research
6. Organization, Hierarchy and the Wireframe

What Does Planning Look Like?

The actual format of your planning can be anything from an elaborate creative brief document to a sketch on the back of a napkin. Honestly – use what works for you and don’t try to force it. If you aren’t ever going to go back and read an elaborate creative brief, then don’t bother writing one! The trick is to use a planning format that works for you and your workflow genetics. I happen to love the idea of hands-on notepads; especially those snazzy Action Books from Behance – but realistically, I know that I do my best planning using a simple text-editor app: no frills, no formatting, no distractions. Your planning method is going to look unique to you though – so take some time to consider what works best for your own personal style.

The actual format of your planning can be anything from an elaborate creative brief document to a sketch on the back of a napkin.

Know the Limitations of Planning

Let’s make one thing clear: designing a website is a lot like building something in a vacuum; Try as you might, you won’t ever be able to plan for every possible outcome when your site hits the web. The likelihood that your design will cover every possible scenario for the next 2-3 years of that site’s life are slim at best. The site will change, the visitors will change, heck, you or your client will change.

The planning stage isn’t for defining each and every tiny variable, it’s for painting broad strokes and establishing your overall strategy. Planning each and every detail will ultimately fail because it will force you to make guesses – and regardless of how educated a guess might be, it’s still just a guess. Keep your planning focused on the big picture stuff that will stay the same throughout the project.