I am available for freelance work - HIRE ME

5 Things to Consider Before Designing Your Next Website

posted by Matt Ward on Feb 2, 2010.

Fundamentally, there are two different ways that we can approach starting a new website design – by creating mockups or building prototypes. In this article we will look at 5 different areas that you can consider to help you determine whether which option would be best for your project.

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

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

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

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

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

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!

Post A Comment

Also from Echo Enduring Media:

An Unfolding Tale

About the Author

Matt Ward is a digital artist who lances freely under the moniker of Echo Enduring Media, and specializes in graphics design, illustration and writing. He is also the Creative Director for Highland Marketing, a creative direct marketing company based out of Waterloo, Ontario. You can follow Matt on Twitter

Like this post? Help Promote it!

Comments

Feb 3, 2010

Josh says:

Hi Matt. Thanks for the comprehensive insight. I particularly enjoyed your take on the type of clients one receives. Personally, I’ve done design work for clients who have no regard at all for functionality. Eye-candy is their central priority and in such cases I often find myself churning out various mock-ups.

As a designer you are often coerced into the frame of mind and perspective of your client. This calls for an extreme sense of versatility on our part to be able to adapt to varying client demands, even if such demands do not exactly correspond with our personal design ethos/principles.

Great read!

Feb 3, 2010

Design Informer says:

Hey Matt, I’m actually in the process of redesigning my site as well, and this post has opened my eyes to some of the important questions that I must think about. Thanks for another excellent post!

Feb 3, 2010

Shurandy Thode says:

Great read Matt. The article describes exactly how I look at designing websites. In my last project I use this method from Jesse James Garrett called The Elements of User Experience. Basically what he explains is that you have to start abstract and level up to more concrete things. It all starts by understanding the site objectives and user needs. And from there on start the content requirements and system functionality. I think it’s a great method and it talks about the same points you discussed in this article. Thanks for sharing your thoughts :)

Feb 3, 2010

Jon Phillips says:

Great article! I’ll often create both mock-ups and prototypes, a bit like what Meagan Fisher talked about in her article on 24Ways: http://24ways.org/2009/make-your-mockup-in-markup

I think no matter the route you take, it’s a matter of being able to explain things clearly to the client and being flexible and offer alternatives (damn, we wear so many hats!) :)

Feb 3, 2010

Chris Thurman says:

Great, thorough writeup Matt. My process has changed over time. When I first started with websites, I didn’t really know how to use Photoshop so I would just do a lot of browser designing, limiting it to simple CSS adjustments. As I’ve picked up skills in design programs, I’ve found I’m more likely to fire up Photoshop and dabble with some ideas. But I agree that it really depends on the needs of the project.

Feb 3, 2010

CodeMyConcept says:

Awesome article, I believe any new designer should read and some veterans too. Some mistakes are easy to make but this guide is quite detailed.

Love it!

Feb 3, 2010

CW4Y says:

Have to say that you nailed the distinction between mockup and prototypes and both of these are really good ways for initial presentation. Apart from that we use Screen Flows which are some where in between mockup and prototypes. In practicality all of this depends on the Client, so not only Look at the client but Listen and go from there, that’s the key deciding factor so far I have seen.
Cheers.

Feb 4, 2010

Website Design Sydney says:

This is one of the most important issues to consider when designing a website. … Your visitors may click away even before your spinning logo finishes loading.

Feb 4, 2010

designi1 says:

First of all really nice reading here, congrats! :D

I must say in overall i agree in what was said here nothing special to add to the discussion. But i truly believe that being a men´s manager its always more important of being something else! Or power of understanding what the others want in which way we should show then can be the key of success.

Keep going the good work Matt. Waiting for future contents!! :D

Feb 8, 2010

Online Kitchens says:

Very good points, designers should all read this before they design and build!

Feb 8, 2010

belt buckle girl says:

Excellent write up, definitely a recommend read to all developers!

Feb 8, 2010

Golf Royalty says:

Fantastic write up! Bookmarked as a reference for all aspiring developers.

Thanks and regards,

Lee.

Feb 8, 2010

Martin Marinov says:

Really interesting article. I thought about this things but not in a such way. Thanks!

Feb 9, 2010

Kawika says:

Thanks for the informative post! Following the paradigm of the client is surely the best way to go for those who are flexible enough use both Photoshop and HTML/CSS!

Feb 9, 2010

Jan Ingemansen says:

You people need to read up on prototypes! If you only consider programmed functionality a prototype, then you set yourself up to do some very timeconsuming an expensive prototypes. You can represent functionallity through other means – fx. storyboarding the interaction flow.
The main point of prototyping is to have a tangible object to test your ideas with and help you in your design process. The more ‘finished a prototype is the more expensive it becomes to change things. From this comes another trap: The further you are in your process the more reluctant you become to make major changes in your product and you end up fighting to keep a sub-standard design because you’ve already spent your budget.
When it comes to clients not differentiating between visual design and functionality. i suggest you use Moodboards. The are a representation of the visual design but looks nothing like a finished web-site and leaves you and your client to focus on the visual.

Feb 10, 2010

Eko Setiawan says:

Hi, These tips are simple, but very useful … thank you

Feb 26, 2010

Tony says:

Excellent points you make here,Matt. At the end of the day, all that matters is what you produce.

Mar 14, 2010

Maicon Sobczak says:

Lucid and important observations. Sometimes despite years of experience is possibly forget about important little things. And to help, every week comes out new technologies and ways of make the work more proffisional but too more complex. So, is easy apply the wrong process in the initial steps of the development.

Apr 25, 2010

Kamal says:

Great article…!!!

I absolutely agree with what you said in this article. Create mockup or do prototype first is based on the client too.

I think if I get big client (ex.apple) I will jump to do the prototype, but for several clients, not too big I will do mockup first.

Jun 29, 2010

binky says:

man that YTV site is freaking awesome!!!

Jul 13, 2010

Ebony Helbig says:

Please tell us more about that.

Jul 16, 2010

doris says:

First of all really nice reading here, congrats!

Jul 22, 2010

LittlePieStudio says:

I’m a very visual person and, in my experience, most clients have a hard time “seeing” my vision unless it’s presented to them completely. My method has always been to create mockups for my clients so they can see the initial impact the user will experience upon viewing their web site.

I often use mood boards as a way of proposing color schemes, typography, textures and graphics. It’s a way for the client to experience those elements and establish their preferences without my doing a half dozen variations on the mockup.

Thanks for the article!

Aug 28, 2010

friskel says:

great post! I totally enjoyed reading it. I will definitely come back to this site.

Sep 11, 2010

ExampleMag says:

Awesome article, I believe any new designer should read and some veterans too. Some mistakes are easy to make but this guide is quite detailed.

Nov 13, 2010

Lzkkim says:

Nice posting… very useful for the web designers… Thank for the new learning it helps me a lot to design my website better!! :-)

Dec 29, 2010

Jquery library says:

Nice Nice. Really helpful.
Thanks a lot for your informative posting

Jan 6, 2011

Thomas says:

This was very informative in fact I provide hosting information but I think my visitors would find this beneficial as well. Great job. Keep it up.

Feb 16, 2011

Akshat says:

Thats was really insightful… Thanks!!!

Mar 12, 2011

Blair Keen says:

Hi Matt,

I’m interested to hear where you think User Experience design fits in to your top 5? Do you think that designers tend to leap forward into the mockup stage too quickly, before truly understanding the problems, needs, and goals of the client’s customers?

I’m finding more and more that clients want to talk about conversion goals ahead of more traditional design features.

Mar 17, 2011

Palatine says:

Very useful for web designers great information. keep up the good work all.

May 11, 2011

Handheld GPS Review says:

Nice one, Matt. I appreciate that you share your ideas with us. It’s really a great help.

May 18, 2011

Bipu says:

Very useful for Web designers

Jul 24, 2011

Ion Bell says:

Very useful for web designers great information. keep up the good work Matt!

Sep 15, 2011

wmd biz says:

Just learnt to create mockups..using balsamiq mockups – its a great tool. Any better tools out there?

Sep 29, 2011

Jason says:

Very insightful read. Bookmarked as a reference for all aspiring developers.

Dec 12, 2011

Ontario Web Design says:

You’re so right about “looking at your client” …and I can only add here… to LISTEN to what the client is saying too. Too many of us don’t listen to THEIR needs before suggesting what we THINK they need.

Thanks,
Trish

Leave a Comment

Copyright © Echo Enduring Media 2009-2014