PSDFan Extra

A Comprehensive Guide to Mockups in Web Design

Mockup in Website Design: Tips, Tools and Examples

When you are presenting a design to client, you need to have the mockup as close to the final product as possible. This requires placing fake content and pictures into the design. Even though this step may take time, it will help you visualize what your design will look like with words and pictures on it. Don’t get me wrong, it will take time to place these elements, but this final touch will help you remedy any problems that could stem from design elements and save you the time of explaining “Oh text will go there” to a client. The faster you can get a client to say “YES” the less headaches you will have. So if you are about to make website and know nothing about wireframing, let this post be your lifebuoy.

So Just What Are Mockups?

Mockup is a refinement of the conceptual user interface design and results in a more or less realistic, though static simulation of the user interface. Mockups are about look and feel as we’ve seen on description above. You may build on the wireframe with dummy text, color, graphics and polish, and may adjust layout slightly but stays within the general guide of the wireframe. Mockup in my experience is usually a full graphic composition that has used the afforementioned wireframe as a template for the Photoshop beautifying that has created the mockup.

In the broader design context: Mockup is a scale model of a product, used for demonstrating and testing a design. For interaction design, the objectives are the same, but the mock-up is not ‘scaled’ since it needs to look as realistically as possible. It is important here to distinguish a mock-up from a prototype. A prototype is meant to function, be it partially. Mockups on the other hand do not function. They consist of static screen drawings, which only ‘look like’ the real user interface.

Mockups will help you and make clear which information goes where, not which colours to use or whether to go for rounded edges or square ones.

How about wireframes? What’s the Difference?

Okay, let me define wireframes before we talk deeper on this topic because many people get confused by meaning of this word. So, you’ll know what to consider and where you should start by this process.

Wireframes are about functional specs. Should be greyscale functional UI layout with notes about the intended functionality of the interface to be designed/developed. This leaves room for the design to be created based on the wireframe. Yes, you can drawing by your hand for the first time. May be just six rectangles, but on Wireframe these rectangles mean ‘the login form will be on the left, below header photo and navigation bar’ etc…

You could say that wireframe is more about the physical layout, and mockup is more about the design.

Why Are Mockups So Important?

Mockups are created to show your client the overall look and feel of their new website. Providing a website mock up is a great way to submit your design for approval to your client. Adobe Photoshop is a quick and easy tool for creating your design, while also providing an efficient way of making revisions or rearranging your design with little effort and this is why a mockup design become so important.

  • A mockup lets you know which information goes where. – You know which information goes where before you start writing the functional analysis or request for offer.
  • Can be used for design implementation. – Which means it’s possible to test your layout concept and trend before you’ve written a single word of code. Changes in the concept are easily and cheaply fixed.
  • Attention to detail. – About functionality and make sure you have visitor’s perspective. You can gauge which functions work better than others, and which conflict with overall usability
  • Flexibility. – Changes, delete or even add more points about your ideas and concept are easily.
  • Valueable service. – If you can give potential clients this mockup as free service, it means you got more value that other designer/developer out there don’t do this thing.
  • As part of the proposal. – If the client is huge, lucrative, prestigious, and interesting then perhaps you could invest some time in winning this job by providing a mockup. Be carefull if you do this thing, be sure to have them sign a legal document stating that they cannot use any part of your concept or design without paying for it. Sometimes unscrupulous clients will have you do a mock up and then use it without hiring you!
  • Remember that your job depends on this phase. – Clients will appreciate your work. This is important how you can often win a client’s approval through your mockup design. If your client was happy for what you’ve done with mockup design, the next phase of this job will be very easy for you

Most common mockup mistakes

There are several lists of common mistakes while creating mockups and the next step was to write a short description for each one, and the result is most common of mistakes that you will find below. Some of the points are common sense, others are more rare. Enjoy!

  • Client doesn’t understand the design concept within a few seconds: Attention is crucial at this phase. If your clients can’t figure what your design concept about in a couple of seconds, they probably just go somewhere else.
  • It’s hard to read: Be sure to use high-contrast type. Typically, that means a dark color on a very light background. Don’t make readers work too hard. Light type on a dark ground or dark type on a colored background can cause eye fatigue. Also, make sure the type size is large enough to read easily!
  • Too many effects and details: The details that will not add value to the layout and just make it harder to code. A rounded border with a coloured gradient border, a complex background that would require multiple images to reproduce and a dropshadow on the same element may be a bit too much.
  • Please use of easily readable fonts in graphic elements: Many web designers create graphical elements to signify fancy text into site designs. Make sure they are not too big or too small and are easily readable. There would be no meaning in creating content that no one can read easily.
  • Not using a color scheme: Photoshop provides a nice way to visualize and experiment with different colors, but there are also a plethora of free color scheme resources on the web. In my opinion, the best of these is Adobe Kuler.
  • Not using grids or properly align elements: Using grids is one of the best advice one can give you. The website will look more balanced and you won’t feel lost with the sight of a lot of stuff just floating around the screen and not knowing what to do with them or where to place them.

Most Effective Mockup Design Processes:

After a web designer presents a site’s architecture, or wireframe, to a client for approval, the next step is to determine the look and feel of the site through colour and graphics. In this section, I’ll explain how I keep this process as simple as possible, both for yourself and for your client. I believe in the KISS philosophy – Keep It Simple Stupid, that has become very popular by Smashing Magazine. Here’s the process:

  • Discuss and Explore The Clients Needs – Initial meet-and-greets are a great opportunity to squeeze the client for information on their tastes and their industry. If they’re overwhelmed or unable to offer useful information, it’s your job to get them in touch with their own opinions. You can going more deeper about your client with a few questions such as Do they have a logo? What key elements need to be included? What is their favorite color? What pages need to be seen in the navigation? Do they have specific images they want used?
  • Wireframing! – Personally once again I prefer to use paper and then either show them to the client in a meeting or scan and then email them (making sure it’s neat enough, of course). By doing this you can remove all the distractions like colour and fonts and just focus on the barebones layout. Of course, if you prefer to use a computer you can use other useful wireframe resources and tools that you can found on the net.
  • Clarity and Focus about Idea and Design Concepts. – Why? The underlying idea is that a design budget is better spent with ample planning, strategy and confidence applied to one ‘definite’ design, rather than letting clients chase after multiple ‘possible’ designs.
  • Check out Rival’s Designs. – By checking out sites of a similar ilk to the one you’ve been asked to design can give you ideas. Obviously there is a limit – you can’t just copy whatever you want, but this is more about examining the competition and seeing what line they are going down.
  • The “Polished” Mockup. – Once these blueprints are client-approved, the table should be set for you to create a focused, polished mockup. I’ve found client approval to come more easily if the mockup is presented with thorough notes on why your design team felt it worked, was strong, and represented them well. As we are the appointed experts in this case, they are often willing to listen.

And also, please avoid the mistakes that we’ve talked in the common mistakes section above then you can make your mockups more effective for your clients.

Tutorials From Other Resources:

I’ve collected these great tutorials that help you to deal with mockup, photoshop skills and techniques. You can follow the instructions and learn more skills and techniques, then change what you need for your own mockup design:

Create a Clean Modern Website Design in Photoshop


Build a complete website design mockup for a fictional design studio, starting with the creation of the initial layout then moving on to designing the individual page elements. The result is a modern, crisp and clean webpage layout ready for coding. You can see another part for this tutorial How to Convert a Photoshop Mockup to XHTML/CSS

How to Create a Clean Web 2.0 Style Web Design in Photoshop


you’ll learn, step-by-step, how to create a stunning and clean web layout. You’ll be using some basic to intermediate-level techniques to build your very own sleek “Web 2.0″ style web design that uses the 960 Grid System.

1st Photoshop Web Design Professional Layout Tutorial


Tutorial for advanced users, but great detail to help explain those hard points. This tutorial will be using Adobe Photoshop CS3, 960gs grid system and Windows.

Design an Online Template Shop Layout Using Photoshop


It will explain on how-to designing a homepage layout for a premium template or theme seller. The design uses a dark color scheme and some texture. Here is a preview of the final result (click the image to see it in full size). At the end of the tutorial you will be able to download the original PSD file used to create the tutorial if you would like it for your own purposes.

Business Layout #6


This tutorial will show you how to create a sleek looking business layout from scratch.


Create a Clean and Classy Web Design in Photoshop


In this web design tutorial, you will learn how to create an elegant and professional web layout. Will use various Photoshop techniques, relying on basic tools such as shape tools and layer styles that will result in a usable web design. You can download a working HTML/CSS/JavaScript web template and use it in any way that you like, free of charge!

Design a Beautiful Website From Scratch


Nettuts+ will teach you how to do so too! Essentially, it requires a few Photoshop skills and an eye for detail.

How To Build Your Own Single Page Portfolio Website


A great looking portfolio site is crucial for any designer to instantly present their work to potential clients or employers. A simple, single page site can do this effectively by displaying three key features of large header with short introduction, examples of your work and methods of contact all in one, extremely browsable page. Let’s take a look at producing a single page portfolio concept in Photoshop, constructing the page in XHTML/CSS and adding some fancy functionality with jQuery.

Inspiration to Help Inspire Your Mockups:

There are a lot of examples out there that can help you for mockup design inspiration. Here are some of the best ones:

GoMediaZine by Go Media Inc.

Web Designer Wall by N.Design Studio

Envato by Valen Design

Stack Overflow DevDays by Carsonified

Radium Labs by Branded07

Xenophon Strategies by Mark Maloney

Pioneers Running by SafetyGoat

ACAI Mockup by cerebrocreativo

GFC Website Mockup by projectDC

Trax Magazine Website Mockup by Unofficialharmony

Kalbe Nutritional by Unofficialharmony

Rapture Camps by Jay Hafling

The Globe & Mail by 31Three

Campaign Monitor by 31Three

ExpressionEngine by 31Three

Useful Tools That Will Help You

Website designers would know that creating wireframes and mockups is an essential part of the design process. It is like creating the overall structure and navigation of the site before actually designing it. There a lot of really nice tools and option out there which lets you easily create wireframes in a drag and drop interface. It is based on Adobe AIR, hence works on Windows, Mac and Linux. The importance of such a tool differentiates amongst web designers and developers, some use them, some don’t. This tools will makes web design enjoyable and allowing you to plan effectively the visual arrangement of the sites content and supports free and paid account options.

Mockingbird


Mockingbird is a new tool which makes creating and sharing website mockups a walk in the park. The service, which is completely web based, could prove to be extremely useful for designers and developers who work with large number of clients from all over the world.

Using its drag and drop interface, you can quickly create website mockup before you actually start designing it. It has all the necessary user interface elements like text boxes, search bars, buttons and much more. Create different mockup pages and link them together. Automatic resizing of text when the boxes are resized. Also preview them and share with clients easily.

MockFlow


If you are working on design of your website or software and looking for a quick way to sketch user interface mockups, head straight to MockFlow.com. It is a web tool that makes the process really easy and there is no installation.

The application has a clean interface and editing feature-set is minimalistic and well organized. Simply drag and drop shapes and elements onto the whiteboard and then customize them by resizing and moving around. Is much faster than drawing designs manually, hence all possible custom components are already there.

Protoshare


Protoshare is an online Software-as-a-Service tool that lets you build high-fidelity, interactive site mockups in collaboration with other people, such as clients or graphic designers and ability to export designs to Word documents and the way that collaborators could work together on a single design.

However, because it can create mockups that appear almost exactly like real sites, I felt the temptation to over-polish my mockups. Being web-based it lacks that immediate responsiveness that is necessary for brainstorming.

Pencil Project

The popular and fairly powerful Pencil Project is a free and opensource Firefox addon tool for making diagrams and GUI prototyping with a multitude of features. With its built-in stencils for diagramming and prototyping, the option for multi-page documents with background pages, its on-screen text editing with rich-text support and with its new cababiltity of exporting to HTML, PNG or Openoffice formats, makes this addon essential for any developer or designer.

Prototype Composer – Free Prototyping Tool


Prototype Composer makes it easy for business users and business analysts to collaborate on requirements by building simple, high-fidelity prototypes that simulate a working application.

It is a tool for prototyping data, processes, activities and most importantly, user interfaces. The app also works as a Project Management tool, which is fairly simple to use, but a little bit too much for what I need, making this application more suited for a larger company.

Hot Gloo


Hot Gloo is an easy to interact with Flash web-based wireframing application. You can fully develop a websites prototype with ease, and functions such as drag and drop, preset elements, grids, layers, snap to grids and much more contributes to how easy it is to use. Once you sign-up you will also receive a custom Hot Gloo URL so that you’re able to share your mockups with anyone such as clients and colleagues. Apart from the URL the free account comes with the capability of sustaining one worker and a co-worker, anything over that is $14/month.

Summary

The mock-up is to be considered as a realistic illustration of the interaction and presentation principles, but it is not graphic design yet. Graphic or visual design requires specific points of attention and skills, which are not covered in a mock-up. In addition to that, a graphically finished mock-up used to explore design ideas (which have not always been validated technically) might create too high and wrong expectations.

Further References

Image Credits


Get more of our great design content direct to your inbox
Join our newsletter and receive our best weekly content by email. Also get access to hundreds of free design resources via your Designer Toolkit area.

About the Author:

a 22 year old creative and also freelance web designer and developer from Jakarta, Indonesia. Write about everything related to design, trending topics in web development and symbian phone. Loves color, design, blog, wordpress, and has an unhealthy addictions to smiles and laughs. Catch him from twitter!

Leave a comment

20 Comments:

  1. Great post Bima with examples and inspiration stuff. Keep up the good work!

  2. drilanka says:

    Wow what a great roundup. keep it the good work psdfan!

  3. raymond says:

    Very Nice & Useful information about mockup in web design, thanks for sharing this good one.

  4. bima says:

    @smashingshare:
    yeah waheed, thanks for reading and comment on this page

  5. Tom says:

    Thanks for the great comments guys!

    Bima: I really enjoyed your article, I appreciate the effort that must have gone into it :) . I especially liked the tools to help build mockups for you, I didn’t know these things existed even!

  6. bima says:

    @tom:
    wow, glad if you like this good one. I put everything in order to be a reference for all of you who want to start creating mockup. and yes, absolutely..that tools will help you much more when you working on it

  7. Excellent post and full of useful information, especially for me. I will be bookmarking this for future reference. Thanks for taking the time to put this together Bima.

  8. Ted Thompson says:

    Great article, some useful information. Thanks for sharing, Ted

  9. Hugolatra says:

    Great advise, to favorites.
    Bima, what do you think, once your mockup is ready, do you prefer email it to the client, to give them the needed time to appreciate it, or get a meeting and show it yourself, to have the opportunity to answer any question?

  10. bima says:

    @hugolatra:
    Hi Hugo, thanks for comment on this page.
    okay, let me answer your query sequentially. if I work remotely, of course I’ll sent it via email. it makes me more fast, reliable, and i don’t need to spent a lot of money for transportation. But if I work offline with my clients in jakarta here, i prefer to show it by myself .. exactly, just to have the opportunity to answer any questions from client.

    Thanks for comments guys, really appreciate it!

  11. Rachel says:

    It is very effective information Thanks for sharing

  12. Hilda says:

    Hey !
    Thanks a lot for a great and very useful article. I have recently started my own blog and also have written quite a few Photoshop tutorials and related things in the past.

  13. morr says:

    I wonder if you’re looking forward to give us an example work of making mockup from scratch.. another tutorial maybe, that would be delightful ! :)

    Thanks for sharing, great list !

  14. bima says:

    @hilda:
    yaaa hilda, you’re welcome and thanks for leaving your comment here

    @amordelounge:
    wow, that’s a great idea. when a designer is tasked with creating a web design mock-up for a client, they typically have to produce several page views of the design: (Home page, content page, product pages, etc.). I’ll take your comment under advisement, thanks!

  15. cleawalford says:

    thanks a lot for the article and great information.

  16. bima says:

    @cleawalford: you’re welcome, and thanks for coming.

  17. bima says:

    thanks @mike for sharing, and remind us about your point :)

  18. B-Slice says:

    NEVER offer a mock-up as a Free Service!!.. That’s just devaluing the whole process of creating a mock-up… plus research and wireframing come before mocking the page up. This isn’t something that’s done in 2 or 3 hours, you should be charging 10 – 15 hours of time before the mock-up is finished and presentable…. Other than that, pretty good article.

  19. I’m not that much of a internet reader to be honest but your blogs
    really nice, keep it up! I’ll go ahead and bookmark your website to come back down the road. All the best

  20. Jay Deuel says:

    The author of this article, Bima Arafah needs an editor! It reads as if it was run through a software-translation application; I’m wading in a plethora of grammatical errors and typos. The irony is that I am reading this for an online MBA course.

Leave a Comment:

Related Posts

Subscribe to PSDFAN and Get Your Free Designer Toolkit

Have every post delivered to your inbox and get access to hundreds of useful design freebies.

Your Design Work, But More Awesome:

Do you know the basic tools in Photoshop but feel that your work is still looking average? Join our creative community at FanExtra and get the direction you need to take your work to the next level.

JOIN OUR FANEXTRA COMMUNITY TODAY