Occam’s Razor in Web Design, Simplicity Wins

You may have herd of the term “Occam’s Razor” before, but most likely it was not in relation to web design (or design in general). If not take your moment to familiarize yourself with the concept as it could alter how you design or craft interfaces from this point forward.

The concept was developed by a 14th-century English logician and Franciscan friar by the name of William Ockham.

It is a simple concept, yet it is so powerful especially when applied to the web.

Paraphrased the concept states that “All other things being equal, the simplest solution is the best.”

What Does “Simplest Solution” Mean for Web Design?

When I first began designing I had a tendency to try and make my work interesting, exciting, and dynamic. Now that is not to say there are not reasons to design work that fits those descriptions. Rather it is rarely the best solution. Any element on a page or in a design changes the signal to noise ratio (something I will cover in later blog posts).

A design can be simple and still exciting, well crafted, and interesting. Simple doesn’t necessarily mean minimal (which is a specific design style). It means that given what you need to have included things should be laid out and designed in the simplest manor possible.

How to go about simplifying your designs

Following Occam’s Razor is more about careful planning and deliberate thought process rather than any sort of art form. The first step is to figure out exactly what needs to be included in the design. Here is a typical example from a work that I had created long ago:

• Company logo
• Photography (to communicate subject matter)
• Descriptive text (communicate subject matter)
• Company messaging (marketing message)
• Newsletter subscription (site goal)
• Navigation
• Company address + contact information
• Parent company’s logo

After you have decided what absolutely has to be on the page you must then order them in terms of importance.

1. Company logo (branding)
2. Navigation (usability)
3. Photography (quick communication of subject)
4. Messaging
5. Contact Information
6. Newsletter Subscription
7. Parent company (not as important)
8. Address (not as important)

From their you can decide what elements should be seen in what order, and assess if any design element you add is noise and competes with the important pieces of the design.

Example Real Estate Company

A few years ago my first attempt at the design in the example resulted in this design concept.

Clearly I did a fair amount of visual decoration that really didn’t add any “signal” to the design and was nothing more than noise. Let’s break down what really was unnecessary

• The goofy break out headlines
• The background color stripes
• The huge picture (it used way more visual real estate than needed)
• The different color zones and blocks
• The “stacked paper” look
• All of the extra information at the footer

Revisiting Today

Now that I have been away for awhile, I decided to try and revisit this design and really think about how I could simplify it. This included:

• Removing all decorative elements (goofy headlines, background, etc)
• Rework the navigation so it is harder to miss and balances out the design, rather than being an afterthought
• Simplifying the content area to improve readability and comprehension
• Balancing the photo so it complements the design, rather than dominates it
• Simplifying the footer information

The result is a much stronger and more visually attractive design. Even though I removed a lot of decorative elements, the design actually looks better. As designers we need to be careful of trying to hard to “over design” our work. Ultimately our job is to make difficult information easy to understand, not to create digital art.

Think you can do better?

Think you can do a better job simplifying the design? Let me know and I would be happy to send you the PSD of the file and post up your simplification.

Improve your typography with “typographic contrast”

Having just spent a week in various countries through out Europe I found myself studying the design techniques of thee various different cultures as well as how it compares to that of the US. Interestingly enough I found myself able to look at the typography of design completely independent of the message (as I did not know the language). This is an oddly effective way to see what techniques of displaying and using type were effective, for what reasons, and why.

With out knowing what anything said I could easily identify even subtle cues as to what was the most important element in type, what was secondary information, and what was practically meta data. This hierarchy of visual importance in regards to type can also be referred to as typographical contrast.

What is “Typographical Contrast”?

Simply put it is the grouping of two typographical elements, then using different methods of traditional design to create contrast. The contrast places emphasis on the important element of type, letting the secondary element command less attention. The result is an improvement in the communication of the overall design message.

If we look at traditional forms of contrast then we have:

• Size
• Color
• Spacing
• Shape

All of which can be used with type to improve our typography on the web. To keep this post short an interesting I will be offering some examples, explain what I did, and move on.

1. Size

This is probably the most common use of typographic contrast and is quite common on blogs and other content that has a time relevance. Many blogs uses this method to provide additional information for those who are interested, but kept it subtle enough where it doesn’t distract or command your attention.

My blog, for example uses large headlines with smaller type for supportive data. The headlines are large as it is the most important element of type in it’s area. However there is additional content that is of value, it simply is less important (in this case the number of comments, posted date, and author).

The concept is pretty simple, make the most important element of type larger while and supportive type can be smaller. See the example below:

Size Contrast

By contrasting large type with small type we get a visually interesting typographical design and it is functional. The most important element commands the most attention, while the secondary element is subtle yet legible. This dynamic builds a visual hierarchy.

2. Color

Color is another common way to develop some contrast between typographical elements. The most common way that we see this in design is having some type lighter than others. Obviously lighter text (when dealing with a light background) has less energy and thus less visual attention. This creates a contrast between it and any darker element.

I have also seen great examples where black is contrasted with color, or the richness or vibrance of colors is used to develop a level of contrast.

Color Contrast

Again this establishes a visual hierarchy as the most important elements will command the most visual attention (and I might note that the lighter type element doesn’t necessarily have to be the at a lower visual importance.)

3. Spacing

The use of spacing can be a tricky technique to master. However when done properly it creates a rich contrast and interesting typography in design. The spacing of type itself can obviously be altered in three traditional ways, letter spacing, line spacing, and word spacing. To be honest I have only see spacing work effectively in line spacing and letter spacing, however I would be more than happy to be corrected in terms of the use of effective word spacing in typographic contrast.

Space can also be altered simply in the placement of type. Right justified vs left, indented vs on the same rule, etc… Any time you alter the typical placement of type you will create tension and visual interest (and thus contrast).

Spacing Contrast

Space works best when used in conjunction with other techniques. It is a tricky technique to master because depending on the situation more space can either increase or decrease the visual weight.
It can either thin the text out, removing visual interest and attention; or it can also cause the element to take up more space more than thinning it out which could cause it to have more visual interest and attention.

4. Shape

When I refer to shape I am talking about either using different typefaces or italic, bold, etc caps vs lowercase, etc… Really altering and playing with the shapes of two different typographic elements.

This can range from something as simple as coupling a serif with a san-serif, or as dramatic as a decorative font with an ultra-simple font.

When used effectively it can be a nice balance between legibility, style, and visual interest.

Contrasting with Shape

Shape probably has the most capability to create typographic contrast. Because of this you also must be careful of how you use it, it is really easy to create some “cool” design elements that really detract from everything else on the page because they simply command too much attention.

5. Putting them all together

After you have worked with the different individual elements for some time you can start to work them together for an even richer experience. This is another situation where you really want to ensure that you balance the interaction and relationship between the two type elements and everything else in the composition. It is easy to create a lot of visual contrast using all possible elements, only to end up detracting from the rest of the composition.

Contrasting Everything

You may notice that I was able to play with the different elements to increase contrast in one way, but decrease it in another. For example make the type bigger, but lighten it; or make it smaller but a brighter color. A thinner font but played with the spacing.

You can create some very powerful typographic contrast by playing with these elements. Every adjustment you make alters the message a little bit, and by balancing the message and communication with visual impact it enrichens the visual experience.

Any thoughts on other ways to increase typographic contrast? How about some good examples?

Better design by brushing up on your techniques

I often fall into the trap where I limit the scope of my design capabilities by what techniques I have learned for my design tools (in this case photoshop, and illustrator.) You may not realize it, (and I often do not either) but the techniques that you don’t know actually hinder your overall design capabilities.

Even if you have been through graphic design school or experienced in fine arts, you will still suffer from a narrow design capability if you don’t work to learn more about these tools. This is because there are techniques you could use but don’t even realize are an option while creating a new piece of work.

Photoshopers vs Designers

I see two different skills related to this subject, “Photoshopers” and “Designers.” I used to be very specific about calling myself a “designer” over a “photoshop guru.” The reason being that photoshop gurus tend to be amazing at altering photos, or developing incredible works of digital art in photoshop (sometimes making the surreal look real.) Where design requires functionality, usability, balance, and finesse. These are two different and specific skills, however it pays greatly to have both.

Getting to my point

When you are working with a design, even if you have done sketches, thumbnails, etc… chances are you are not even considering some great design accents because you simply don’t know how to do them. Maybe you don’t even realize that they exist as a possibility. If you were to know about them, in the right moment you would realize said technique would be worth trying and it would raise the quality of your work.

You may be looking to create a specific look, feel, or develop a specific mood. Naturally you will be thinking in terms of “what can I do to achieve this goal?” However “what can I do?” is actually “what can I do to achieve this goal that I know how to do?”

This is why it pays to take time to continually expand your skills and capabilities with your tools so that you have a wide range of available technique and have more to select from. Eventually you will have thousands of techniques and capabilities to create a wide range of moods/impacts/feelings/etc, and won’t be limited to the basic techniques you have used in a hundred of your old designs.

Long story short, you should have the skills and capabilities of a photoshoper with the design fundamentals of a designer.

Some Examples

You can often tell which designers have not only mastered the fundamentals of design but the tools used to create the work as well. N Design Studio and Veerle are two excellent examples of this. In the case of N Design Studio, Nick La clearly has a great sense of design. His work is balanced, the typography is well crafted, and the color scheme communicates a specific message. However he is able to take the design to a whole new level by some of the advanced as well as stunning techniques he has learned.

If you take a look at Avalon Star you will notice the same trend. Again the designer has a clear mastery of design fundamentals. So much so that the site would be very well designed even with out the level of detail put into it. However he is able to create a truly memorable, high impact design through his understanding of photoshop.

So what am I saying?

If you have time it is worth while to practice your photoshop/illustrator skills as often as you can. With so many great tutorial sites available, there are always new techniques and methods to learn. Below is a list of the ones I follow,

• PSDTuts
• VectorTuts
• Smashing Magazine
• Verlee
• Web Designer Wall

What sites do you follow for tutorials?

Spatial Awareness in Design

Have you ever come across a design that is so simple, so clean, yet so beautiful that it makes you wonder “How are they able to do so much with so little?” If so, then you are probably subconsciously realizing the special awareness of the design. Huge, Inc is a perfect example of the “less is more” approach with outstanding spatial awareness.

What is Spatial Awareness

Spatial awareness is simply the understanding and use of space in an effective way on your canvas. It sounds simple but it really requires a high level of mastering to get correct. This could be taking advantage of whitespace, or even grouping elements close together to create tension.

Those designers who can harness and use space to their advantage will find that elements can be placed in all sorts of unconventional ways, yet still work. Often times beginning designers place elements based on what “looks” or “feels” right, however that is not the best way to use space as accuracy and consistency is very low.

How can I use Spatial Awareness?

The first step to great spatial awareness in a design is developing a grid system. A grid divides your canvas up into small sections consisting of margins, columns, modules, flowlines and spatial zones. The canvas then ends up looking like a a series of boxes with columns (I found an example on google images here).

With this grid you can now find where elements should and can be placed on the page in a way that activates and takes advantage of space. Because you are using space in a consistant mathamatical way the overall composition of the design feels much more consistant and unified.

Taking it to the Next Level

These same principals of consistency can be applied to the typography as well. Because the grid will dictate margins for any element on the page (if a column is 18 pixels in width, then the margins of headings should be 9px/18px/27px/36px/etc…). The line heights off all type should also follow the structure and rules of the grid.

All of these steps to better map out your designs will be a subtle but noticeable improvement in your design over the tried and passable “eyeball it” methods. Note: There are times where you want to break the grid, some designs actually benefit from the chaotic and unstructured feel. However you have to make a decision as a designer that it is in fact what should be done.

I will be posting more about spatial awareness and using grid systems in the future, stay tuned.

Have any experiences with grids or spatial awareness? Post them here!

As designers we need to use more adjectives in our work…

Adjectives? Wait am I confused? Should I be talking about copy writing? No no, I assure you I am in fact talking about design. Like many of you I am always browsing through galleries and assessing new web site launches, because I am interested in seeing what type of working is being done outside my Michigan network. Like me, you may come across designs that are stunning and beautiful, but don’t seem to do a think to enhance the subject matter.

It seems there is a stage that some designers easily bypass, and others tend to get stuck in. That stage is caring more about making something beautiful, over making something that is beautiful in the right context. A marketing professional that I have worked with before by the name of Joe Radding once said “Everything is marketing. A blank piece of paper is marketing. Everything gives you an impression…” This could not be more true when it comes to design, which in turn creates a problem when your number one goal is to make something visually stimulating.

Of course making a design visually stimulating is important and can have great benefits, after all you have on average 3 – 5 seconds to impress a user and convince them they are at the right place before they leave. However you can give the wrong impression, with the wrong design, regardless of how great it might look. The classic example of this is a bold black background white text design, high in contrast and high in impact… used on a site that is trying to communicate higher level knowledge, education, etc (for example, a database consulting firm.)

This is usually the result of not understanding the brand or an ineffective (and sometimes non-existent) design discovery phase. A well done design discovery phase will leave you with adjectives. Oh wonderful adjectives, and they will make your designs sing. These adjectives will describe the FEELING of the design. How should you FEEL when you are creating it? How should you FEEL when you see it? What emotions will be associated with the brand, and what emotions will the user FEEL when they view it?

These are the good adjectives, and they will often be words like:

• Excited
• Bold
• Unique
• Consistent
• Organized
• Open
• Contained

From those adjectives you can derive DESIGN adjectives. It is important not to let the client skip to design adjectives. Your job as the designer is to make that connection, not them. Design adjectives might be –

• curvy
• sharp
• boxed
• rounded
• dark
• light
• clean
• structured
• simple
• minimal
• photographic
• rich
• earthy

If needed use some sort of mind mapping techniques to really break out what the design should feel like and why. What adjectives should be associated with the design, what feelings should be associated with it… then think about how you can connect those feelings and adjectives with visual representations.

Earthy will likely be organic shapes, earth color tones, and an open unrestricted layout (ie: no hard borders). Where structured will likely be a design with a strong visual grid, clear boxes of content, and hard edges.

Take some time to develop a set of questions that you can use to extract these adjectives out of your clients, and then practice developing those adjective keywords into feelings, design adjectives, and design concepts.

Improve Your Creative Process, Better Design, Quicker Approvals

There are two things I struggle with the most in my job, staring at a blank photoshop canvas and having to fight the fourth round of revisions despite the fact that we had established doing only two in our contract. However there is hope, I have found ways that have improved our approval process and improved my designs significantly. Our projects are actually more profitable because we added a few steps to the creative process.

EXPLORATION

Exploration is really two phases in and of itself, as you have two areas to explore and gather information from. One is the clients themselves, learning what they want, their needs, and their expectations is critical. Secondly doing your own exploration and research into the industry, their competitors, will give you a whole new perspective on the project.

Kick Off Meeting

Exploration on the client end usually starts with a kick off meeting. Use the kick off meeting to find not only the technical and information requirements (what exactly is going to go on the site/page), but this is a great opportunity to ask a lot of probing questions as to how the website should communicate and what usability considerations are in play.

Now I avoid saying “how the website should look” because a lot of people who are not trained have passionate opinions on that question and it is not always linked to communication. Instead I want to move deeper, almost into a “brand messaging” level to really get to the core of “What is this group all about?”

Example Questions:

• What should the users first thoughts be after seeing the site design?
• What is the age group of the common user?
• What is their level of technical ability?
• If you had to boil it down to one specific goal, what is the primary goal for the website?
• What are some tasks that users will be performing on the website?
• If the design could say one sentence, what would that sentence be?
• How can we visually communicate that sentence?

The idea is to get them thinking about the message and how that message can be communicated graphically. Now what I have found in many cases is that the untrained people in the meeting might have some vague ideas that may or may not be valid, but this is a perfect way to steer the group towards your expert thoughts and ideas while still letting them feel like it was their group ideas.

External Research

After you have learned as much as possible about the client(s) from their own perspective, it is time to do external research and find out what their competitors are doing and what other people think of them. Their competitors are easy to investigate, simply firing up a web browser and search engine can give you a wealth of knowledge about them ranging from their communication strategy, to reviews/opinions about them.

However to research the client further I will often try and get a list of average customers lined up and give them a quick call and ask them 3-5 unobtrusive questions to see what the general perception of the client is. You could ask them to perform a survey if they are busy, or if you have more than 5 questions to ask. The goal is to really learn the true perception rather than the assumed perception.

Communications Strategy Document

Sometimes this is also referred to as a creative brief, but we tend to call it a communication strategy document simply because we
feel it fits better. This may feel like an extra step but I assure you it saves time in a way you couldn’t imagine. The benefit is really two fold.

1. It requires YOU to think about everything you have learned, what the client wants to communicate, the contradicting perceptions, and HOW you are going to do it. If you have ever found yourself hunting through design galleries or sketching trying to figure out how to get a look and feel that seems to “fit”

   Ask yourself questions, such as “How can I communicate young and edgy, and put that into words?” or “The company is very free spirited and wants to communicate ease of interaction, does that mean rounded flowing design or open and clean?”

2. It also puts the client on the same page as you in terms of how the design should look. When you have a 1 – 2 page document that explains how the website should look and feel and WHY it is almost impossible to say “No, that doesn’t make sense.” Further you can get the client to sign off on it, which will be a subconscious “I agree” on the clients side. This will make it much less likely that the client will object or want to “play around” with the design concepts presented.

You will find that your design revisions drop dramatically, and if there are revisions they will be simple and minor compared to “Lets try a different look” type of revisions.

WIREFRAMES

At this point you have a choice, you could develop wireframes or you should move straight into photoshop. For me this really depends on the client, as sometimes wireframes can feel a bit limiting. There might be 2-3 different locations that the navigation could go and still be completely usable. In this case a signed off wireframe could limit my creativity.

However if I am dealing with a client that has more than 2 – 3 decisions makers, or they seem extremely opinionated and likely to draw out the creative process I will start with wireframes simply because it makes it harder to want to “try” different design decisions. Again the goal of the wireframe is to block out where the different elements of the website will be located and get the client to sign off on it. It is a mental “I agree with what they came up with” and a commitment on the clients part that makes it hard to go back and ask for changes, and if they do you are fully justified in asking for more money (due to increased time on the project.)

DESIGN MOCK UPS

Now I am not going to talk about doing the design mock-ups themselves, rather how you present them. I deeply believe the designs should be presented in person, in a browser, in the form of a web slideshow.

What we do is have an explanation page that links to the mockup page, followed by another explanation page followed by the second mockup page.

Explaining your design decisions before you show the mockup to the client gives you a chance to talk about all of the things you tried that didn’t work, you can re-enforce the communication strategy, and talk about every nuance of the design. By the time you show them the design concept they will both be nodding their head in agreement, but also eager to see the masterpiece you have created. It will prevent you from having to DEFEND your design decisions (which becomes a YOU vs the CLIENT situation) and instead you explain them before hand and they just make sense when the client sees it.

Secondly by showing the client on a screen in a browser you will avoid the situations where the client likes/dislikes something based on the fact that it is not being displayed in its natural environment. The most common situations are when a client prints out the design concept and wants something bigger because it doesn’t take up half the page, or later they find that there is content below the fold and they don’t like that.

If you present the mockup like it is a masterpiece that will move mountains the client will feel like it is too. It gives you a chance to really sell and presell your design in a way that simply opening up a PDF or JPEG could never do. Again this will save countless hours in revisions and you will end up with a stronger design for your portfolio because it won’t be washed out by the opinions of 4-5 different people on the design committee.

CONCLUSION

The real gems that I get out of this process is a better understanding of what I should be communicating, and the process of thinking and writing out what is the best visual way to go about the communication. I have always worried more about creating high quality work than time/budget, however there is the added benefit of a smoother and quicker creative process because you keep the client agreeing with you with out unnecessary design review and justification steps.