Website Design Essentials

A tidy, up-to-date website is one thing, a well-designed one is quite another. Today we interview NYC design industry professional Matt Hocking on the essential elements of website design.  Matt Hocking has international management experience within design schools and studios. He has a proven ability in design, management and strategy, together with a solid understanding of business and the creative process.

Q. What are the essential elements of a well designed website?

A. The essential elements necessary for a well designed site come from successfully answering the question ‘What are people coming to your site for?’. Depending on how someone uses your site, the elements essential to the site’s success in each circumstance will change in importance as the needs of the user are catered for. In order to do this, a well designed website in my opinion is one which organizes it’s content well.

If I’m buying, allow me to access and browse your merchandise with ease and make me feel safe entering my payment details. If I’m reading the news, make it easy to get to the information I need and set the type so that I can comfortably read it.

In every site there will be elements of navigation, content, branding, social media etc. In a well designed site, all of those elements will fit together seamlessly so that the user can fulfill the function they visited the site to do with ease.

Q. What is crucial to a great user experience?

A. Keeping it simple. Allow the user to know where they are and where they need to go to get what they need at all times. It’s all about trust. As soon as the user can’t get to what they need or you try to lead them to something else that they aren’t interested in or is unexpected, it begins to break down that trust. How many times have you simply closed a browser window due to an unwanted pop up ad or a page taking too long to load because of unnecessary animations? A well designed site should make the experience easy and intuitive. Relevant content is brought to the front, while everything else steps back. No instructions necessary. Always ensure that the site is designed from the perspective of the user. They are the ones that will be using it -so look at it through their eyes.

Q. What specifically (colors, photos, illustrations, fonts) build trust?

A. I wouldn’t say that there is a specific recipe for building trust, any design should always be critiqued in context. However to get your design off to a good start, I usually start with a few basic building blocks –

• Set a rigid grid and be consistent in the placement of consistent elements (navigation, branding, etc)

• Set your copy in a basic serif or sans-serif typeface and in a neutral color. Don’t use crazy colors.

• Try not to reverse a lot of copy out of dark colors as it’ll make it harder to read. Use this technique to contrast and draw attention to smaller packets of info.

• Subtly introduce color, scale and spacing as the information becomes more important (Headings, links, etc). A sub heading doesn’t need to be 5x as big as the copy its leading.

• Keep imagery and headings closer to the content it relates to than other content on the page.

• Be consistent. If two elements are at an equal level importance, style them the same. If one is more important, make it look like it is (bolder, more colorful, different typeface, etc)

Q. How important is white space?

A. Extremely important. White space is the frame. The more important the content the bigger the frame (more white space). By spacing elements appropriately, it can really aid the hierarchy of your information and allow it to be easier to navigate.

Q. What fonts build trust?

A. For me it’s using fonts which display the same qualities I look for in the organizations and people who I trust. If your font looks healthy, honest, wholesome and well established it’s a good start. Try to avoid display typefaces that maybe represent a specific period in time or person. Oh and never trust a website that uses black-letter type – Odds are they are probably pirates -www.nytimes.com ;). No seriously, again it all comes down to context, but the easier a font is to read the more trustworthy it will generally be.

Q. How about infographics and data visualization? Are they a better way to share information?

A. They are definitely interesting and can add value to the information if designed well. I think the fine line is always whether the design actually adds to or takes away from the legitimacy of the information. Most of the time, infographics are a good way to draw the attention of the user and easily allow them to make sense of otherwise complex or even confusing facts and figures. If something is worth drawing attention to, why not make it stand out! Check out Nicholas Feltron’s work (www.feltron.com) for some examples of really interesting info graphics.

Q. Photos vs illustrations?

A. Depends completely on the person you are designing for and what will speak to them. Whatever you are going to go with, do it well! Hire a photographer or an illustrator and use treatments and color palettes which keep your look and feel consistent across your entire site. Avoid at all costs using imagery which appears low res or stretched. If your image is too small for the intended application – Get it resupplied at the right size, reshoot it or don’t use it at all. Never resample. At the end of the day your site is a reflection of how you run your business. If the content on your site looks unconsidered and inconsistent, people will draw the same conclusions about the way you do business.

Interested in learning how you can improve your website design? You can reach Matt Hocking on LinkedIn and follow him @matt_hocking for more.

2 Comments

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s