PSDFan Extra

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

• Clients Asking for Design/mockup as Part of the Proposal? | Sitepoint

Image Credits

• Man in meeting | tisner
• Happy Bench Monday | pixelmama
• Wireframes | lilit
• More important | pogonophobia

Related Posts

• Thursday Theory: The Pros & Cons of Big Website Headlines
• 25 Totally Immersive Web Experiences
• Ask PSD.FanExtra Episode #1