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.
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.
Not a very helpful answer is it?
Well let’s dig a little deeper, then. In this article, I am 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 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.
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.
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.
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.
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.
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.
Posts
