Four Simple Tricks for Usable Web Design

This summer, Quote Roller has had an amazing designer intern from UC Berkley, Max Blumen, who we’ve noticed really has a knack for crisp, clean, readable web design, that he’s been applying to make our website shine a bit more. Max says, “I’m a designer because I enjoy the mix of art, psychology, and business that forms the basis of successful design.”

We decided to combine his youth and natural ability with the tried-and-true experience of our older (though not necessarily wiser) designer and developer veterans to create a quick list of easy tricks so you too can create accessible web design.

1. Follow the Basic Design Principles

“Design should never say, ‘Look at me.’ It should always say, ‘Look at this’.” — David Craib

Everyone involved in art understands the importance of simplicity. Your business must focus on developing web design with maximum simplicity because clients don’t have time to waste searching your page to find the important information. They need it all there, right in front of them, so they can make decisions now and not waste time with poor or clunky information structures.

In his book Universal Principles of Design, William Lidwell stated that: “The best designers sometimes disregard the principles of design. When they do so, however, there is usually some compensating merit attained at the cost of the violation. Unless you are certain of doing as well, it is best to abide by the principles.”

Using design elements that highlight the content instead of adding to it helps to achieve simplicity. Often, this manifests as eschewing unnecessary adornments for simple geometric shapes, clean lines, and a limited color pallet.

These are the some of the general design principles to always remember as mentioned in Getty’s blog on Design Principles:

• Balance: This is the distribution of the visual weight of objects, colors, texture and space. It provides stability and structure to a design.
• Emphasis: This is the part of the design that catches the viewer’s attention.
• Proportion: This is the relative size and scale of the various elements in a design.
• Repetition: Repetition strengthens a design by tying together individual elements
• Rhythm: This is a feeling of organized movement created when one or more elements of design are repeatedly used.
• Unity: This is the feeling of harmony between all parts of the work of art, which creates a sense of completeness.

2. Choose The Right Tools

“We shape our tools, and, afterwards, our tools shape us.” Marshall McLuhan

Knowing what works for you and what doesn’t in web design goes a long way to determining the outcome of your project. Picking the right font is an important aspect of a good web design — second only to layout — because if the user can’t easily read the content, there’s no point in writing it in the first place. Our delightful intern prefers working with Avant Garde, which he thinks has a good mix of retro and contemporary vibes.

Some tools our web design team can’t live without:

• Gray Cortland Smith’s Magazine Layout: From 1973, it may seem a bit antiquated, but since the principles of column-based typographical layout haven’t really changed all that much, this book highlights the rules governing eye-catching, useful web design. Mobile is leading to decreased popularity of columns (due to the smaller screen sizes,) but for websites and print materials that do utilize columns, this book gives inspiration and guidelines for the design. For example, there is a specific ratio between font size and column width — A rule of thumb says the column width should not be much more or less than 1 1/2 times (in picas) the type size (in points)” — that consistently lends itself to readable and attractive text layouts. Magazines are, for the most part, fairly utilitarian in design — the aesthetics are based around the copy, not the other way around — and therefore this book really helps in learning how to optimize design for content. Sometimes it’s good to think of your blog as a magazine — it makes the reader respond to the content in a more leisurely way.

• Sublime Text: This is a versatile text editor for coding that allows you to keep a number of files open at once — which is especially useful when doing HTML & CSS simultaneously. It also allows you to navigate all of its features using the keyboard without the necessity for touching a trackpad or mouse.

• Evernote: Most of our team — in web design and development and not — couldn’t live without this SaaSy dream for note-taking and archiving. It also serves as a storage center. For a designer, it’s great for keeping track of fonts and stock images for reuse, as well as to keep up with tasks that need to get done.

 3. Develop a Creative Process

“A well-defined problem is half solved.” Michael Osborne

Design generally entails creativity. Turning a good idea into reality can be a long and detailed process. Your creative process determines the quality of your work. It’s vital to have a well-structured creative process that is fluid and flexible enough to allow you the room you need to create well, while still being able to help you through when you get stuck. The following steps will help you have an idea of what the typical creative process looks like:

• Understand Your Project: The importance of having a grasp of a new project before you even start it can never be overstated. Understanding a project helps you filter exactly what you should be looking for. Be sure you really understand your clients’ needs. Before starting, be able to answer these questions:
• Who is the target customer?
• What is the message?
• What are the dimensions?
• Is there a deadline for completion?
• Can the client provide examples of design they like?

Questions like this give you a clearer perspective of what your client really wants with which you’ll be able to develop an outline of the content and goal of the project.

• Research: Find information about your target customers and make sure to module your work to suit their personas. Analyzing similar examples of your new project also helps getting along with the creative process. Max the Intern likes to keep a database of well-designed materials that inspire him or he thinks are effective to refer back to whenever he hits a design wall.

• Brainstorm: Getting inspired creatively can be daunting sometimes. It’s not so easy to sit down and start designing without a brainstorming session. Throw out any and all ideas related to your project–they can be overall concepts and styles, layouts, Color schemes, etc. This helps you to get an imaginary picture of what you’d like your outcome to look like. You can achieve this alone or with as group–with colleagues or friends like minded.

• Sketch out your idea: Max says he generally sketches out his ideas by hand first — even though he says that’s not his forte, it helps him get a sense of the working visual space and the elements that need to be placed therein.

4.  Stay up-to-date with Trends

“Follow sound business trends, not business trends.” Janice Dickinson

Designs are like fashion–they go out of style after some time and get replaced with newer trends. Most successful designers are always trendy because staying updated with trends helps you stay relevant in the fast paced worlds of business and technology. This doesn’t only help keep you in business but it also helps you keep in touch with changing customers’ needs. You can find a lot of tutorials, articles and inspiration in blogs such as HackerNews, TechCrunch, TheNextWeb, The Verge, ISO50, AisleOne, Gizmodo, Reddit, etc. Try to really read something, not just scan through the pictures.

For SMBs trying design, Max has this piece of advice to share: “Make design a priority. You don’t have to be the best designer in the world , but even thinking about how the design, layout, or readability affects how the potential customer perceives and interacts with the website or whatever you’re working on should greatly improve the experience one has with your business.”

So we’ve let you into the world of some of our design tricks, What other tricks do you have?

Photo: Flickr Creative Commons