Articles
RSS FeedOctober 7, 2008
The Mockup
A mockup is a design proposal to the client. It’s the final result of the design process, before making it real. In most cases, it’s a saved JPG of a carefully manufactured composition of Photoshop layers. However, websites are not static images, and they need to be presented in their right context.
Presenting mockups
When presenting a mockup, your main objective is to make the mockup look as close to the real thing as possible. Attaching your JPG files in the mail and sending them over to your client is not the best of ideas: doing so, they will most likely be viewing your mockup outside of the browser window. Perhaps in a preview window, perhaps not even in the right size.
I prefer to create an index page that has links to all the different mockups. The mockup pages contain a static image and if necessary, a background image. The background images have the same height as the mockup and are typically repeated vertically.
Left: the index page. Right: one of the mockups. (High res)
This last method helps tremendously when your site’s mockup contains different background color areas that run at a 100% width (for example, the recently launched ABConcerts).
Also, a mockup inside the browser window allows you to clearly see which information is visible without scrolling, what is often called the fold, referring to what is visible in the top part when a newspaper is folded in half.
HTML mockups
A mockup doesn’t necessarily have to be a static image. In some cases, especially content-heavy sites, it makes sense to craft your mockup in HTML and CSS. For a recent newspaper website design, I used this method, which was perfect for that kind of website. You really don’t want to move a thousand layers around and align them to a pixel perfect grid in Photoshop when a simple CSS column system can do that for you.
There is a lot to be said about the benefits of HTML and CSS mockups versus a pure Photoshop mockup. Signal vs. Noise recently sparked up that age-old discussion with a post entitled Why We Skip Photoshop. There is no right answer in this discussion: this decision has to be made on a case per case basis.
Interaction
A website is not a static image. If there’s one thing that will make the final website better, it’s deeply thinking about the interaction before you finish the design. In most designs hovers, transitions, visited states and such are added as an afterhought, while they should also be taken care of during the design process.
One point that is often forgotten is page-to-page flow. How does it look when you switch from page A to B? How do you maintain a consistent look, with a navigation that stays at a consistent place (or is easily findable at least), across pages, without resorting to your typical blog-style layout?
To display interaction without making a dozen mockups, you could add some basic Javascript into the HTML/CSS mockup mix. However, if you go this far into mocking up, you might as well be building the real thing. If the only thing you want to do is displaying an interaction model or idea, pen and paper are your best friends. Those never complain about syntax.
A little mockup goes a long way
Your mockups can make or break the project, so please, take good care of them.
Nice article - also the ‘Why We Skip Photoshop.’ one, but neither touches the main reason for why I dislike Photoshop mockups: Using Photoshop it’s too easy to give the client a false sense of “wow”. It’s too easy to tweak and polish your content to fit the design in a way that’s not possible in a real website.
October 7th, 2008 at 9:21 ∞Al the time I see (beginning) designers create page layouts that look great for print, but wont work in a browser. Things like pagewidth gradients in both directions, pagewidth highlights over textboxes, text that is perfectly full justified spaced and wraps in columns, titles and textboxes that are exactly the same width, layouts that rely on a fixed browser size …
Ok, all are things that maybe is just “bad web design”, but it’s a result of the tools used: they would not be designing that way if they would build the mockup in html and CSS …
All valid points. One thing I learned over the years is to let go of your will to force all your content at a pixel-perfect place. You’re only going to be frustrated when launch it in another browser, or when you see the webpage in another language.
Just like a river, a webpage has a flow. You can box it up in conrete walls and hope it never floods, but it will someday. It’s better to guide it, and make sure it runs properly in all circumstances.
October 7th, 2008 at 9:41 ∞I agree aswell.
I often find myself realizing how laborious it is to build some basic html stuff in Photoshop. For instance, creating a table is painful, I mean, how does one even go around finding the best way to do it? I like my stuff in vector so I can quickly edit them in the future, but that makes the process o so lengthier.
The solution is the one you proposed. Fire up a text editor or something and code it. For mockups it’s not even important to validate your code, just have a working copy in your client’s browser. There’s a good chance you’ll have to revise your whole code anyway when the design is finally accepted.
A navigation for the different mockups is a great idea. Furthermore I’d also put a full-page link on every page that points to the next page. Easier to navigate for clients.
October 7th, 2008 at 3:52 ∞