There are probably dozens and dozens of ways for approaching the initial stages of creating a website. You could sketch out the entire concept on paper, use Photoshop to create a beautifully rendered visual representation of what the site will look like, or cut your teeth right away on some nice HTML and CSS coding. I’ve used all of these different techniques to varying degrees in the past, and they have all proven useful in their own ways.

So, is there one right way to go about this? Yes! The best way to mock up a website is to use the technique that will be the most effective for your particular project.

5 Things to Consider Before Designing Your Next Website

Not a very helpful answer is it?

Well let’s dig a little deeper, then. In this article, we are going to distinguish between creating mockups and building prototypes, and then look at five different areas that can help you determine which approach might be best for you.

Mockups and Prototypes

So, let’s start by examining the key differences that I see between mockups and prototypes. In my view, a mockup is a static graphical rendering of what the final product should look like. In this instance, the focus is entirely on appearance, with the intention of demonstrating exactly what the final product will look like. This certainly has its benefits, but can also be very limiting through a lack of interaction. There may be styled menus and buttons, but they will all be part of the static image and thus remain entirely unclickable.

A prototype, on the other hand, is more about functionality and experience. It’s a bare-bones version of the website, designed to demonstrate exactly how the site will actually work. Drop downs drop down, buttons are active and links are clickable. The idea is to test the key functionality of the site before getting into all the aesthetics. It’s not always pretty, but it works.

Some people might argue the semantics here, but this is now I distinguish between prototypes and mockups, and these are the definitions that I will be using as we work through the concepts of how you might choose to begin creating a site.

Look at Your Client

If you are working on a site for a client, then one of the key areas that you will probably want to at least consider is the client themselves. Chances are you’re not going to be told exactly how to present your concepts (and beware is you are, since that could be a warning sign of a potentially ugly relationship). However, taking a good long look at your client can yield some clues as to how to get started with the design.

For this approach, asking yourself some key questions about the client can be beneficial.

Is the client interested in stunning visuals or full functionality? While your final product will surely be both stunning and functional, we can often shift one of them to the back burner when we start working on a new design (or even a redesign). The question we need to answer, though, is which one is more important to the client?

If they spend most of their time talking about how the site is going to look, chances are their focus is on the visual. In this case, you may want to spend your time in Photoshop, creating a full but static render of what the finished site will look like.

On the other hand, if the client mostly talks about how the site is going to work, then you are probably dealing with someone whose primary focus is on functionality. They want to know that the system is working, and will trust you to add the “pretty” bits in later.

Will the client understand the purpose of your mockup or prototype? Not all clients really understand the concepts of web design (or any other design for that matter). In many cases, they key issues seems to be unfamiliarity with the various technologies. For instance, a client may receive a mockup and complain that the buttons and menus aren’t working properly. This is usually a case of the the client not understanding the difference between a flat image and an actual working website.

In another scenario, the client may look at a perfectly functioning prototype for an application-based website and complain about it not looking very “designed”. This client may not understand the amount of work that goes into creating a web-based application. They may simply assume that the user interface just kind of magically happens, and that it’s just the visuals that take all the work.

Does you client fit into either of these profiles? If so, you may want to tailor the way you begin working on the your design in order to help elicit the best possible response from them!

Look at The Purpose of the Site

Considering the purpose of the site should really one of the first steps in any web project. From this, you can determine what kind of approach you want to take for the design in general. Is the site primarily content driven? In this case, the emphasis should obviously be on the content. Of course, all sites should be about their content, but in this case we’re talking specifically about structuring content (usually textual). For this kind of a site, you might want to start with a prototype, into which you can pour different streams of content, and test how they fit into the overall design.

The same could also be true of a web application, such as a custom email client or a new, niche-based social networking site. The purpose of these sites dictate that they will be highly interactive, putting an even stronger emphasis on user interface and user experience. As such, starting with a prototype might be more ideal than creating a static mockup.

A site like DesignBump might begin with a prototype

On the other hand, if the purpose of the site is primarily a simple and static information site for a company, then using a mockup might be the better approach. This will allow you to concentrate on building the appearance of the site and designing the graphical aspects of the around the company’s brand. This can also work very well if there are only a few pages of very basic content.

Look at the Graphical Requirements

You may not always know exactly what kind of approach you will be taking with a site right off the bat, but it can be helpful to determine how you want to approach the graphical aspect of the site. Obviously, this will have a very strong influence on whether you want to begin your design process with a mockup or as a prototype.

For sites that have an extremely high degree of graphical complexity – such as large oversized headers, carefully integrated and textured backgrounds, or any other kind of extensive imagery – it only makes sense to start with a mockup in Photoshop, in order to maximize the visual integration of these various element. With sites like this, the graphics often play a more prominent role, serving as a visual compliment to the content rather than simply a structure for the content. A mockup can help perfect those graphics.

This site, with its high degree of visual complexity, would probably be mocked up first

On the other hand, if the site will make use of a primarily minimalist design or if the graphics will mostly encompass icons, logos and other “contained” elements, then creating a working prototype could be the best route. In this kind of a scenario, there is often little if any need for integrating various graphical elements into each other, meaning that creating the full site in Photoshop may just end up being more work than your really need to do. Conversely, creating a prototype will leave you with a solid foundation of code (HTML, CSS, JavaScript etc) to work from after you get those first bits of feedback from your client.

Built on a grid, this site could easily be prototyped without ever opening Photoshop

I would never suggest that any designer compromise quality for increased speed (though, of course, we need to be realistic and able to work within timelines), but if choosing to build a prototype over a mockup (or, perhaps, vice versa) will save you time without effecting quality, then that might certainly be the best route to take! Your time is, after all, one of your most valuable assets.

Look at the Audience

Like any kind of media, a website is pretty useless without an audience. It’s just a bunch of 1′s and 0′s sitting out there on a web server somewhere, probably costing you or your client money. As such, the audience is going to play an extremely important role in your design, and can effect the manner in which you approach the entire project.

For instance, if you are designing a blog targeted at CEOs and other high ranking executives, you will probably want a very streamlined and traditionally corporate look. Such a site would likely use few integrated graphical elements. Actually, the chances are it probably wouldn’t use any. Instead, it would likely have a simple white background contrasted against a single support colour. There would likely be a basic content area and at least a single sidebar (possibly two). A header or logo, a few icons and some photographs would probably be the extent of the graphics. This is another case where starting with a basic prototype may be your best option.

The YTV site is target at a younger audience, with bright colourful graphics

However, if you were designing a site that was targeted primarily at children and pre-teens, you would be dealing with an audience that would be much more interested in something full of fun and energy than would our CEOs. In this instance, you may want to create something that was much more interesting and graphically rich, perhaps with a fully rendered mascot character, bright colours and/or a uniquely shaped navigational system. This would be another case where beginning with a Photoshop mockup might be of great benefit to you and your design process.

Look at Yourself

Finally, you always need to look at yourself, too. What are your strengths and weaknesses? If you are a master coder and can whip up HTML and CSS like nobody’s business, but struggle to get your head around Photoshop, then by all means start with a prototype first, regardless of what kind of site your are going to be designing. After all, the purpose of this article is not to establish a series of absolute rules to be followed, but to offer some helpful concepts for framing your thinking when starting a new design.

Likewise, if you’re a master in Photoshop but can barely tell an HTML tag from a CSS selector and send all of your Photoshop designs out to a third party for coding, then I can practically guarantee that creating a prototype just isn’t the right option for you!

So, while taking a careful look at your client, the site’s purpose, its graphical needs and its audience can all be extremely helpful in establishing how you might want to start out on a new website design, your own abilities and skill sets are always the most important consideration. After all, you will find the greatest success in doing what you do best.

Now it’s time for you to have your say! What are your thoughts on these areas? Do you have any other suggestions or techniques for determining whether to create a mockup or prototype? Or maybe you have an entirely different approach. I’d love to hear your thoughts, comments and objections, so please feel free to share!

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd