The design stage is one of the most important steps in the development of a web-project. A website mockup is its face. A properly planned structure and custom design increase company awareness and customer loyalty, maintain a positive image, improve conversion rates and raise sales. These are the most vital indexes for a business, especially for a startup.

So, how to make a website mockup? We would like to share our own experience that allows us to work efficiently. This process usually consists of a few stages. Let’s take a look at them.

Information Gathering

This is the first step in the development of a successful website from scratch. It helps to understand your project better and plan future tasks carefully. To design a website mockup you need to define and precisely describe its tasks, goals and target audience. Don’t forget about choosing the right content.

  • Brief description of your project
    Overall review of the project, presentation of your company and the value it brings the audience.

  • Purpose of your website
    You should answer the question, why you need this website. Despite its apparent simplicity, it is a key to the success of your project. A website is usually aimed at providing information, promoting services, supporting clients, selling goods.

  • Website goals
    What are the two or three specific measurable objectives the website has to reach? How is it going to do that better than any other website on the Internet? Clear goals allow developers to focus on what will have the greatest impact and promote the success of a company.

  • Target audience
    Who will use this website? What group of people will help you to achieve your goals? It is very useful to imagine “perfect users” who will visit your website. Think about their age, gender and interests - this will help to define the best design style for your project.

  • Content
    What information will your target audience look at your website for? Are they in search of definite information about a product or a service? Do they want to make an online order, to find a friend with the same interest or to hire a contractor?

  • Examples
    It would be good to have at least a small list of websites (not necessarily of your field) you like in terms of graphics, usability, etc. It will give designers an opportunity to initially assess the level of requirements to your project.

Based on the analysis of this information designers can make a detailed estimate of the next stage.

User Experience (UX) Development

Analysis

When designers receive the task to create a website mockup the first thing they do is analyzing the project and related information. 

  • Analysis of the subject
    It is necessary to study and analyze the subject, delve into nuances, clarify missing points. It will help to create your own concept in the future.

  • Competitor analysis
    To complete the defined business tasks your website should surpass competitors’ sites. It is required to make an overview of them, taking into consideration visual branding, navigation, calls to action and key features. Having determined what is good and how to eliminate that what is bad, you have a real chance to come up with a more successful solution.  

  • Requirement analysis
    This step presupposes identifying business, technical, social and aesthetic requirements to the project and its usability.

  • Inspiration from other designers
    There are a lot of websites that collect best practices of web design. They can inspire new ideas and interesting solutions.

Planning

Careful planning at the beginning of design process is the key to successful results. It also gives an opportunity to accurately calculate and reduce the price. The secret is: every hour spent on planning saves three-four hours at the development stage on the average.

Planning consists of the following parts:

  • Website functionality. General description of function blocks (search, catalogue, news feed, etc.)
  • Website structure. This is a list of all main sections and subsections of a website that have to be designed and drawn.
  • Page structure. This is a list of blocks that should be on pages specifying their format.
  • Specifications. This document summarizes collected information. Being short and not too technical, it serves as a basis throughout a project. As a rule, it is regularly supplemented in the process of work. 
  • When planning everything, you should always remember about the end-user. A good user interface (UI) ensures an easy-to-navigate website.

Sketching and brainstorming ideas

Sketches are a great way to start the design of any complexity. With a pencil and paper you are able to easily move from one idea to another. The key to making good sketches is to reject all visual elements and to focus on generating the best ideas for the future website. There should be no text and images too. They are usually replaced with lines and blocks.

Sketch App Example
Sketch App Example

Another important point is a good understanding of ​​what your visitors are looking for on the website. The task of a designer is to balance relative visibility of all visual elements on the page so that a user was attracted to the most significant things.

Sketches rarely take more than a couple of minutes. Here designers have the freedom to work, not burdened with the limitations of complex graphic editors. It is better to draw a bunch of rough sketches of your idea, reduce their number to several ones, and check whether you are on the right way or not. This method is good to select the best implementation.

Depending on how much you know about the project or on the expectations of the client, it is possible to skip this stage and move directly to wireframes.

Wireframes

Wireframes are a simple visual presentation of a website. They display page structure without the use of colors and any graphics (in most cases). This allows designers and developers to introduce offered features, graphic elements, structure and content of a website with the help of simple layouts.

Wireframes are not interactive and do not display a lot of details. They have simple design that lays the foundation for a project. They have to show how a website will work, but not how it will look. In some rare cases wireframes can closely coincide with the design of an actual web page, but they should not determine the final design (UI).

Wireframes play a crucial role in ensuring a more realistic experience with a product. They represent the visual hierarchy of pages, shapes and interactions of elements, determine what content deserves the greatest attention and how much space it can occupy on a page. Wireframes can be used in a definite sequence of screens to show how a particular task can be performed. They emphasize how easy and intuitive a product will be.

All elements in wireframes are usually displayed and arranged to introduce the following:

  • Structure. The availability of all necessary elements and the way they are put together.
  • Hierarchy. Displaying blocks in the current location, size, and their proportionality. 
  • Functionality. Demonstration of the cross-work of website elements.
  • Behavior. The interaction of all blocks with users.
  • Content. Displaying maximally realistic content on pages makes it possible to predict the size of blocks, and position them more accurately.
  • Breakpoints. Breakpoints for responsive design are getting more and more frequent at this stage. These are information split points and display options on different devices: desktops, tablets and mobile phones.

Wireframes Example
Wireframes Example

It is preferable to create up to three options of wireframes experimenting with basic components, navigation, sizes and UI design. The one that best fits the requirements of a client is a winner.

At this stage, the communication of a client with a designer is crucial. It determines if the final version of a website will meet his needs and tastes. It is important that he works closely with a designer, expresses his ideas and wishes, discusses his likes and dislikes until all objectives are achieved.

Clients always have access to the latest versions of  wireframes. Our workflow is organized in such a way that they can add, delete or modify any sections or features. Sharing the workflow with a client gives a designer space for creativity and helps implement innovative design ideas, if they have been approved. And what is more important - it keeps a client up to date throughout project development.

Wireframe prototyping

Clients should understand how their website will work. Prototyping can be extremely useful in this situation. Prototypes make it easier to describe the performance of a website. They allow all interested parties to focus on features and user interactivity only.

The prototype is a more detailed interactive representation of a final product, based on wireframes. Prototyping allows reviewing a project before spending time and money on technical development.

Wireframe Prototyping Example
Wireframe Prototyping Example

There are a lot of tools for prototyping. For example, MLSDev uses the one called Invisionapp. Prototypes are made after wireframe (UX) development or simultaneously with it (depending on how much a customer wants to delve into the process of creating his website).

Responsive Web Design

Talking about the visual representation of a website, it is necessary to mention the differences between fixed and fluid sites.

Fluid and fixed layout

Fluid and Fixed Layouts
Fluid and Fixed Layouts

Fixed layout

Fixed layout means that your website will always have the same width regardless of user's screen resolution.

Fluid layout

"Fluid" layout means that a website page will try to take all available space on the user's screen, adjusting itself to its resolution.

In this context, such notions as responsive web design and adaptive web design should be clarified too. The first one fits into the concept of "fluid" and means that your website fits in the screen size when you change it. The second notion implies that you define the main resolutions (screen sizes) in development, and your content will adapt to them. In both cases it is necessary to develop not one but several layouts that will fit different screen resolutions. 

There are three layouts that are commonly created: for iPhone (Android Phone), iPad (Android Tablet) and Desktop.

Fixed and Fluid Layouts in Action
Fixed and Fluid Layouts in Action

This animation shows the two approaches. The upper block "responds" to any changes in the size of the container, the lower one "adapts" to a certain width. Both types have pros and cons. They are usually discussed with a client to decide which option to choose.

Modular grid

Before drafting the project scheme it is also necessary to clarify the notion of the modular grid. It implies dividing a page into separate vertical columns. Website content is aligned according to it. Creating a layout based on the grid will help accelerate development process in the future.

Modular Grid
Modular Grid

Due to the modular grid content blocks and elements will be located at a certain distance from each other and will have a certain width. This will look nice to a user and won’t cause any discomfort in the perception of a website.

Mobile First

Mobile First Platform
Mobile First Platform

Taking into account the trends of recent years, this approach has put its foot down in website design and development. Almost 60% of Internet users use mobile devices to access the network. So, the common practice now is the development of not only the desktop version of a website, but also of its mobile version.

Mobile First is the design process, where it is necessary to start with simple layouts for small screens, and then add complexity to this basis as available free area expands. Having a lot of space on the screen, it is possible to place all content without problems. In contrast -  if to start from small screens it will be necessary to immediately determine what elements and components are the most important. This approach will also help to understand what content is optional, and can therefore be excluded from the design of all versions.

User Interface (UI) Development

With the help of wireframes that fully describe necessary functionality designers begin to create UI mockups for a website. Due to the iterative process between the team and a client, all important decisions on brand style, color palette, typography and interface details are made together. Designers can create static visual models, interactive prototypes, or both options simultaneously.

A visual mockup is the best way to show a customer how a finished website will look. It can demonstrate accurate colors, font sizes, exact placement of all navigation blocks and elements in relation to each other. 

At the design stage, the main task is to create the look and usability of the entire site. Photoshop is one of the most widely used tools for this purpose. The stage is accompanied by constant communication between a customer and designers. 

The design stage is divided into several steps:

  • Research of references
    It presupposes subject analysis, generation of design ideas and  search of inspiration in the works of other designers.

  • Creation of UI mockup samples
    Development of a preliminary mockup for 1-2 pages. As a rule, one of them is Homepage. Development of a website design concept includes three different options based on client's wishes, the vision of our designers and an alternative/bold choice.

  • Finalizing UI Mockups
    Corrections according to customer’s notes (if any), finalizing the mockup. 
    UI Mockups for the rest of screens. Development of the remaining pages in the approved style.

  • Slicing, Guides, UI Kits
    After the approval of the whole design the final stage is to prepare and transfer files to developers.

How to Create a Perfect Mockup

When working on the design of a Homepage and inner pages you should be aware of some basic principles:

  • Branding
    Always take into account the shape and size of a company logo, brand style, color and overall atmosphere.

  • Target audience
    When developing design elements it is necessary to consider the age category and preferences of the target audience, which may significantly affect them.

  • Grid
    Keep elements structured and stick to the visual grid.

  • Development
    Consider the capabilities of a web-based platform used, not to do anything too complicated and irrealizable there.

So, here is the process to follow to create beautiful design for websites.

Mood board

It is one of the ways to determine primary colors and visual elements in a project. This is an imaginary canvas, where clippings of design, examples of fonts, icons, buttons, patterns and other graphic elements are collected. They form the necessary mood map together. Discovered colors and solutions will make the visual perception of a project and give users appropriate feelings.

Mood Board Example
Mood Board Example

Call-to-action elements

The concept of a call to action refers to the interactive elements of a website like buttons, banners, etc. They are made in such a way that a user would want to push them. For example, it may be a button with a call to action (Click, Buy, Save), a bright banner with a tempting offer, a bright picture and so on.

Layout concept

The Z-layout is very common. According to it, elements of a page are usually arranged in the following way: a logo on the top left, a menu on the top right , information blocks and/or images on the bottom left, a button with a call to action on the bottom right.

Pageview Diagram

Visual guides

Visual guides are decorative page components that redirect eyes of a user to certain design elements, forms, buttons, etc. It can be an arrow, the direction of human eyes in an image, the direction of the index finger, or anything else that indicates direction.

Visual Guides Example
Visual Guides Example

This effect is shown in the image with a heat map. In the first case users are attracted mainly by the straight look of the baby (right in the eyes). In the second case, the direction of the baby’s eyes and its posture automatically draw our attention to the block on the right.

Real content

A mockup should contain all blocks that will be shown on the website. If texts are not ready by the time of design development, it is possible to use "Lorem ipsum". There should be no blank spaces.

Trends

It is also very important to remember about current trends. Flat and material design dominate now, the latter being actively developed and supported by Google.

Slicing, Guides, UI Kits

The final step in creating a website mockup is to prepare and transfer files to developers.

  • Slicing
    Graphics preparation and cutting (exporting) in accordance with technical requirements.

  • Guides
    Creating interactive guidelines for designed mockups, which carry all necessary technical information (sizes, positions, colors, transparency) for a front-end developer to convert them to HTML.

  • UI Kits
    Creating a work file, which contains all interactive elements: status buttons, text fields, sliders, preloaders, placeholders, pop-up windows, appearing and disappearing effects, favicons, page 404. All these elements can make a website more interesting and alive for end users.

Afterword

At MLSDev we try to make the process of building projects as smooth as possible. Based on our own experience, we have arranged our work according to a strictly defined order. It is followed by all of our designers and has proved to ensure effective customer feedback.

Besides, we also try to explain our clients how to mockup a website. That's why, they understand what and when to expect, what to focus on. It also helps them to look at their role in creating website design mockups and how they can accelerate development.

Want to create a great design for your website?

Our team is ready to assist you with this task and guide you throughout the whole process.

Get in touch

rating
Rate this article
5.0/ 5 Based on 174 reviews