Have every post delivered to your inbox and get access to hundreds of useful design freebies.
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.
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.
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.
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.
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!
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:
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.
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:
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
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.
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.
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.
There are a lot of examples out there that can help you for mockup design inspiration. Here are some of the best ones:
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 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.
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 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.
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.
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 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.
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.
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!
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.