Web Design Guidelines

I was working on modifying my web design process and thought I’d share some of my musings. I’ve also had this in draft status for about 3 months now with only minor changes, so I figured it’s time to pull the trigger.

Pre-Design

I don’t consider this stage part of the actual design. It includes everything that you need to do in order to be prepared to create the design. This includes, client meetings, content strategy, goals and priorities assessment, competitor research, market research, even more research. You want to make sure that you do enough research to meet the goals of the project, but not so much that you’re wasting your time and the clients money. Finding that sweet spot can be difficult, but this post is about the process of creating the design after the research is complete.

That being said, if you skimp on this phase of the project, everything after it will be much worse off. This may very well be the most important part of the whole project and client relationship.

Start with pencil and paper

For a lot of us, every design starts the same way. We open Photoshop, create a roughly 1200px wide canvas, and center align a 960px grid. Then start laying out block elements for logo phone number ect. Why a 960 grid? Is that really whats best for this client? By constraining ourselves with a rigid framework, it made several decisions for us before the design had ever really started.

start by sketching your web design

Like I said, I’m and awful sketch artist

When you sketch first, and I am just AWFUL at sketching, it allows you to think more about the brand, the goal of the site, and, using a different medium, keeps you rehashing some of the old UI elements that may be getting repeated over and over on your designs. These sketches don’t need to be shown to anyone unless you want to, just use them to start fleshing out some ideas for navigation, basic page layout ect.

You can also use things like mood boards and style tiles in conjunction with sketches, whatever you feel most comfortable with. From here, I usually jump into Photoshop and start designing elements using Brad Frost’s Atomic design principles. That modularity is also how I markup and style pages so it works particularly well for me.

Things to Think About During the Design Phase

These are just some basic things that it seems like a lot of designers take for granted that everyone should be thinking about. Since almost all of my work is responsive, some of these will speak to that specifically.

Does this site need a Sidebar?

It seems like every site I see lately has a sidebar of some kind. Why? Does the sidebar add something to the content of the page? Is the sidebar maybe distracting the user from consuming the actual content, the reason the user is on the page anyway? Instead of adding a sidebar stuffed with “you might also like” types of content, consider allowing the user to read the page unabated and, if it makes sense, place related links under the content for the user to consume.

Are sidebars always bad? No. They are a necessary evil in certain designs, especially where advertising is involved. This item is mainly targeted at standard, typically smaller, informational sites as opposed to larger sites with many interacting components.

How will the user interact with the website?

Most of our design tools are static. That is starting to change with more and more people designing in the browser and tools like Adobe Edge Reflow and, more interestingly, Macaw, but, for now, it’s mainly Photoshop and Illustrator (or Fireworks for you die hards out there). When in one of these flat static tools, it can be easy to forget that the web is an interactive medium. We should constantly thinking about what happens when people interact with every element. Should this be a link, or should it provide additional details on hover or click? If it does something on hover, what does that mean for a user on a touch screen? These decisions should occur during the design phase, then be tweaked in code.

What does the site look like at various screen sizes?

When talking about responsive design, I hear a lot of people say things about a mobile, tablet and desktop view, or even worse, iPhone, iPad, and desktop. We have to stop thinking like this. The point of responsive design is that the site displays well at any screen size be it a 7 inch phone, an 8 inch tablet, or an 11 inch laptop. The more we constrain ourselves based upon specific devices, the less likely it becomes that the site will work well responsively.

I’m not saying that we should design 45 different layouts in Photoshop, but I am saying that the design needs to be thinking about break points and where they should be. This is where Reflow and macaw could be really useful but, until those are more thoroughly tested, just be sure you are considering tiny smart watches and Google Glass type devices to huge 30+ inch retina displays and everything in between.

Less is more

Don’t add design elements that don’t need to be there. Box shadows and borders are very powerful and, when used well, segment and highlight content providing a much improved page flow. When used poorly, they quickly muddy up a design and make it look dated. A very generic rule I try to follow for box shadows in particular is the rule of 3. No more than 3 elements should have a shadow on a page or the extra precedence the shadow applies to elements is lost due to repetition. This is a personal rule based on literally nothing, but it seems to work for me.

With the flat design trend, yes, trend, the super simple layout has really come to the forefront. While you shouldn’t jump on every design trend bandwagon that rolls down the pixel highway, take a look at why people like it so much and use the ideas that make sense for your project. Flat design works so well mainly because it is all about removing unnecessary design elements to allow the content to take the primary focus. The less stuff in your design, the more focus your content is given and, isn’t content the reason people are browsing your site anyway?

Hero Slider

The last thing I’ll mention in this post is the home page hero slider or carousel. We all know these and, in the past, we loved these. I don’t think I built a site in the 2008-2012 era that didn’t have one in some form. There have been recent tests showing that users typically just click on the first slide or move on down the page. This means that the other 3-5 slides are basically useless and you just dedicated a large chunk of real estate on the home page to an element that doesn’t really do all that much. At the very least, you have diluted the primary message on the page by allowing it to slide off for a less important item.

Think of other things that could go into that space. Maybe a title section that incorporates the page background as part of its imagery. Maybe a really focused single message. Maybe some amazing interaction no one has ever seen before.

Summation

To sum up this post, it really comes down to this: Consider every decision. As designers, it is our job to make sure that we keep things fresh and think about every single element that goes into a design, not to just rehash bits of our other designs that have worked. If someone asks you “Why did you decide to put these three boxes on the home page of the site?”, you should have an answer other than “Because I always do that?”.