SCVNGR-grid

In web design, there are a lot of things that you can easily do right, but it is even easier to do them wrong. Designers have a lot to think about besides just color and “look and feel”. Here are just a few things on our minds as we design a website’s layout:

  • The Grid
  • Typography
  • Introduction
  • Navigation
  • Call to Action

It’s always nice when a website has done a good job with all of these items while keeping the style itself very nice as well. I came across a website today that made my heart flutter, and it had nothing to do with the content it was delivering, but rather the delivery itself. Let’s take a look at SCVNGR.com and how they handled the points above.

The Grid

The grid is something that print designers know all about, and sadly, web designers are just now starting to figure out. I personally love to follow a grid since it makes designing and coding a lot easier. Keeping things across the layout in a uniform alignment helps the eye easily scan and accept what it’s looking at, and also just looks good. Read more about the grid at The Grid System.

SCVNGR has a nice visual grid that caught my eye pretty fast. After closer inspection, I realized it wasn’t as precise as I had first thought, but it’s still good enough to accomplish the purpose of using a grid.

Typography

Thanks to some great innovations like FLIR, sIFR, Cufon, and @font-face, accomplishing great looking typography on the web has gotten a lot easier. No designer enjoys being stuck with basic web fonts and we can take it pretty seriously, especially in conjunction with using the grid system. If you look closely at the SCVNGR grid image here, you’ll see where the designer properly aligned baselines when multiple tiles span the different columns and also aligned the vertical starting points of different lines of text, rather than just their container.

SCVNGR decided to go old school and use images for their non web fonts, but they did the right thing in using the alt attribute to supply a screen reader and search engine with the text that the images represent.

An image and it's alt text

Introduction

It pains me so much when a great design is ruined with bad usability, especially when that means no homepage text, or at least a simple explanation of what the site does. Even worse is when you’re blasted with adjectives and “we strive to provide the best for our clients blah blah blah” in place of a proper description. No matter how I get to your site, whether it be directly, searching, or just random surfing, I need to know that I’m where I want to be, and that I’m going to get the information I want from you. Tell me what this website does!

This is where SCVNGR “had me at hello”, pun intended. I really couldn’t ask for a better answer to this need than what they give. The only qualm I have is that there is no <h1> tag on the homepage, and this would be the perfect place for it.

SCVNGR is a game about doing challenges at places.

Navigation

Who cares what something looks like if you ca’tn find your way around? The navigation for a website is key to it’s success. If you want me to go any further than the homepage, you need to clearly explain how to get there. Smashing Magazine has done a lot of great articles on this, so go there to read up on 50 Beautiful And User-Friendly Navigation Menus, Navigation Menus: Trends and Examples, and The Case Against Vertical Navigation.

SCVNGR is a mobile phone app, so the main goal of the website is to get you to download and install it. For this reason, the website doesn’t require much of a fancy navigation. They still did a great job at keeping this clear and easy to use.

Call to Action

Okay, I found your website, now what do I do? You might have 5 important things you want to push on your site, or you might only have one. It’s important to prioritize these and offer them to the user in that order. This can be taken literally as in, each item is presented with the most important on top, and the least on bottom, or the importance can be expressed with size and style.

When you go to Google.com, they have a Sign in/Sign Out link at the top of the page, but it is significantly smaller than the search box. Here, the order in which they appear doesn’t matter, it’s the placement and size that counts.

In other cases, there are alternative actions that you want to give attention to, but they are still of a lesser importance. SCVNGR does a great job of making it easy to get their product by placing two big buttons in an easy to reach place as seen in the first image here. They also would apparently love for you to contact them. Contacting them is of a lower priority as it’s lower on the page and you’ll have to scroll to get there, but there is special attention brought to it since it’s in a bright yellow button against a dark background.

Conclusion

This post comes from my ongoing frustration of the separation of “look and feel” design, and usability/layout design. All things must be considered at the same time for the best result. Period.

Also, just to be clear, I didn’t design the SCVNGR site, nor am I affiliated with them in any way. But I know good design when I see it, and wanted to share my thoughts with you.