You know about outlines. You’ve probably heard of templates. Now it’s time to add another tool to your arsenal: the website mockup.

Realize that mockups are like scale models. This flat JPEG image acts like a full color, real pixel-dimension prototype of the site you’re going to design. Mockups can be easy or complicated, depending on how specific the client is to begin with. Maybe they want a color scheme that matches their logo. Maybe they want to imitate a competitor. Maybe they want to reskin a site, changing the look without effecting structure.
Lucky for you, the basic steps of mockup design remain the same no matter how complex the assignment.

 

Before Starting the Mockup:

1) Research similar sites

Please get to know your client first. What market do they fall into? What niche market? Then find a wide selection of similar sites.

Look for trends. See what most of these sites have in common; look at how they structure information, what color schemes they use, how their landing pages differ from their subpages, whether they have their main navigation at the top of a page or in the sidebar.

You may need to narrow (or expand) your search to hone in on sites that fit your client’s purpose. A broad category, like e-commerce, will get you too many results. Narrow it down to a specific product. Conversely, if your client is in a niche market, expand your search to include sites in the general market. These are the people your client will compare you to, later. You want to shine in comparison.

 2) Settle on a structure

Many clients will provide you with a wireframe, also known as a skeleton, that determines the structure and positioning of a site. If they did, good for you. But don’t get too excited, because you still need to make some decisions like the rest of us. What is the site’s total width? How wide or tall are the sidebars, banner, content area? Is the site fixed width, or flexible?

Get your client to clarify what’s important to them about structure. Then if you don’t have the benefit of a wireframe, go over the results of your research. What worked for everyone else?

And keep in mind:

–Standard site width is 1000px – 900px

–Standard main content width is 800px – 500px

–Main navigation should have room to grow

–A website should feel centered, even if it has an adjustable width

 

Designing the Mockup:

3) Recreate your basic site structure in Photoshop

–Make sure the Photoshop document has about 500px of dead space on either side of the total site width for added perspective. Give yourself some dead space on the bottom, too.

— Use guides to define your banner, sidebars, navigation, content, and total website width. Don’t bother mapping out the little stuff–at this point, all you want are the basic dimensions.

–Create your basic layers and groups. Make folders for the banner, navigation, sidebars, content, and footer. Create corresponding layers and give them a fill. You’re still just organizing, which sucks, but this is your first visual representation of the site—use this opportunity to tweak structure while it’s easy.

4) In a new Photoshop document, design your banner.

Woah, you say. Really? Don’t I need a color scheme before I start on the banner?

In my experience, designing the banner first makes life easier. The banner tends to inform everything else on the site, from tone to the color scheme, to the glossiness of navigation buttons. You can fight it, but you will need to design one eventually.

So keep these things in mind:

–Your research. What kind of banners did the competitors have? Which styles fit in with which colors schemes? What style do you see working for this site?

–Your client’s logo or business colors scheme. What are their logo colors? What other colors would compliment the logo? How did competitors incorporate their logo into their banner?

 

5) Color Scheme

Now the subjectivity really begins. But as a professional, you should consider these three things while settling on a color scheme:

–Colors in the client’s logo
–Common color schemes based on your research

–Your newly designed site banner

Here are a few additional tips to keep in mind:

–Every site needs one dominant color. Go neutral. Blacks and whites are really common, but charcoal grays, classy blues, and warm browns work as well.

–Neutral is boring. For your secondary colors, pick one or two that pop. (Fact: “pop” is not the same as “clash.”) You want an equal balance of contrasting colors, and complimentary ones.

–Text colors next. Make sure they have a high contrast and easy readability. To achieve that, most people settle for black or white—if the effect is jarring, go a shade lighter or darker.

–Once you have this main set of colors, continue to use different shades, tertiary, or complimentary colors to add depth and variation to the site.

–If you’re stuck, experiment with the colors in your banner.

 

6) Design your backgrounds

Web standards suggest using small, repeatable background tiles for faster loading times, vs. a splashy texture. But in some circumstances, like a Flash site, it may be a moot point. It all goes back to knowing your client. If all else fails, use your researched sites as a secondary guideline.

 

And never forget:

1) How the design would translate into code

In the end, someone has turn this mockup into a website. And it may be you. Don’t back yourself into an impossible design. It’s just sad.