Mockup Design: Starting From Scratch

7 Minutes time to read
Mockup_design_Ester_Digital

Every design starts with a concept. Creating something without giving it a clear structure and outline first is a waste of time. Mockups help to visualize the idea and present it to the partners or clients.

What are mockups? How to build a mockup? What do they consist of? What software can you use for that? What are the benefits of incorporating them into the design process?

If you are still not clear about how to employ mockups in your work and looking for the answers to the questions above, this guide, which our UI/UX design agency in New York has compiled, is just for you.

What is a mockup

A mockup is a close-to-final design of a product. If we talk about web design, a mockup is a website or mobile app static design draft. Even though the mockup pages may have all the seem-to-be functional elements, they are not clickable and can’t lead you to a specific path like a standard page on a website. A mockup mainly serves a visual purpose, although it already has some content. A page sample with a functional purpose is called a prototype.

A mockup includes various visual components of a digital product such as colors, content layouts, icons, navigation visuals, fonts, text, images, logo, and other features that will be employed on a website. 

Mockups represent a ready-made design, but we should note that they are not the final product. They help designers to negotiate the overall concept with a client and implement early provisions without interfering with the coding.

Also, mockups are great for showing the client what they’re getting in the end and a great way to gain feedback on the design or products.

When to use mockups

With the definition of a mockup cleared up, let’s study its use and determine the basic points. In terms of practical order, mockups go after wireframes – page schemes – and just before prototypes – fully functional elements. But when specifically do you need to start making a mockup?

  • Once the wireframe is done, mockups help to see how different visual elements stick together in a blend.
  • To test different looks of a product and to make sure that the different elements are coherent.
  • To demonstrate the user interface to the client when you want to get their feedback and corrections.
  • When you need to see the design from a user’s perspective and assess its level of usability before starting to work on a prototype.

Why design a mockup

Making mockups is highly beneficial for both a client and designer as it saves time, money, and resources. Thanks to their flexibility and versatility, they are a work-boosting element for you as well as for your team and stakeholders.

Let’s discuss four main reasons why we design mockups.

01 Engaging clients

Starting out, a client may have a completely different vision of the way the project will look. Here come mockups. Since a mockup is a high-fidelity tool, this gives the clients a chance to see how their ideas may be implemented and to negotiate possible corrections, if any, with you.

02 Enhancing team collaboration

Mockups allow you to introduce changes to your team at the early stage of development and make it easier to understand what you expect from them early on.

Also, different points of view are always a good play. The team may give feedback from a professional perspective based on their experience and share their ideas. Interactions with your team build connections and facilitate smooth work and communication. It gets easier to understand the vision of each member of the project you are working on.

03 Determining UX issues right away

A mockup helps you to detect potential UX mistakes and hurdles before the launch of the website. It can potentially save a lot of time and money both for the team and for the client. Mockups give an idea of how things will work together and showcase all visual elements in an environment they’re going to be in on a website. It will greatly reduce the time and effort spent fixing things and adding modifications.

04 Getting feedback from users

Essentially, users are those for whom we develop the design in the first place. You can check it on a target audience or ask your team to test the mockup, spot the difficulties with the user’s interface usability, typography and spacing, color use, navigation, graphics, and icons. Take their feedback into consideration, and make the needed changes.

Get the best design team to fulfill your dreams

Start now

Explore

Anatomy of mockup

A mockup is visually identical to the product it represents, which means that apart from a design, it also has specific mockup anatomy consisting of the following elements.

Structure

Structural elements are used for the logical arrangement of the information and for providing a coherent form to how the information is displayed. It may include the navigation, header, footer, main body, etc. Even though the structure obtains its main features during the mockup building, it is being designed during the wireframing step.

Content

The gist of any website or a mobile app is information. Usually, it includes titles, text boxes, videos, embedded social media profiles, etc. The content elements used in a mockup should be approximately the same as for the final design. The thing that needs to be taken into consideration is how readable and digestible the content is going to be.

UI

Besides the content, the user also interacts with certain interface elements such as links, buttons, sliders, forms, various icons, etc. These elements have to be represented in your mockups – otherwise, the user experience wouldn’t be as full and wholesome as it should be. Unlike wireframes, mockups for these elements need to be aligned with the brand style and represent the corporate visual identity.

Visuals

At the surface level, designers flesh the wireframe out by adding images, photos, fonts, and other elements that make the mockup more “3D” and flashy.

Layout

A layout is used for deciding how the content will be organized in the project. It also defines the content borders, spacing, and positioning of the main elements.

As you can see, generally, every mockup consists of two types of building blocks: structural and design elements. The structural ones concern the layout, information arrangement, and navigation – everything that “moves” the users across the website, making their user path unobstructed and unforced. Design elements, in their turn, help to provide a more engaging and fun experience, as they are concerned with how the website looks and feels. Let’s focus more on the design elements of a mockup.

Design elements

Branding

Having a mockup that follows the company’s brand style and employs corporate identity elements is crucial. It lays the groundwork for any future design decision there is to make. Special attention should be paid to a logo since it is a main visual representation of a company that has to be displayed across the whole website.

Colors

Colors are the way of communicating with users as they can give certain cues to how you want the information to be perceived. Some colors transmit a more somber, official tone, while others give off exuberant and cheerful vibes. However, some colors need to be implemented with care: there are people who are insensible to colors or visually challenged. Make sure to test them out to see how people react to certain color combinations.

Shapes

Even though the mockup is not fully functioning and completely static, you need to decide how the navigation and content elements will look like since they play a big part in providing a wholesome user experience.

Typography

What’s the point of having the content if readers don’t get it? The main principle here is incorporating easy-to-read and comprehensible fonts. Striking a balance between readability and creativity is key – you can play around with sizes and styles but don’t forget that the main function of types is to help provide information.

Images

Images make the whole design look complete and polished. To make the product look trustworthy and visually appealing, use HD images only. Pixelated and stock images won’t work since they lack the exclusivity and uniqueness of a custom illustration. Also, pictures should be compatible with the screen size as different device models have different screen dimensions.

Different types of mockups

Even though we were mostly discussing digital mockups, there are plenty of ways mockups can be utilized. Simply said, they can be used anywhere where there is even a vague hint of design. So, here are the most in-demand mockup types.

  • App mockups

Mockups can be used to make app interfaces without actually building an app. They allow you to see how it’s going to look on a mobile screen and resize or modify the interface accordingly.

  • Website mockups

The web page mockups are a bit more complicated since they are designed for a wider variety of screen sizes. To avoid unpleasant outcomes, use the best design software to ensure consistency and use a flexible screen design tool.

  • Logo mockups

Logo mockups represent a logo design and its different variations. A logo form is rarely decided on straight away – there may be tons of different mockups that take into consideration such things as scalability, color contrast, size, and many more.

  • Business card mockups

Business cards are an effective way to introduce the company to the people and make the best first impression. While working on a business card mockup design, it is crucial to implement the brand attributes of your client’s company and showcase their unique approach to handling business. You can save time by discussing the client’s vision, implementing the changes right away, and coming up with the best option.

  • Book mockups

Book design has come a long way as the market is saturated with loads of different authors and publishers who want to make their oeuvres stand out. Book mockups help to see how well the design is going to appear on a limited book cover space or its spine. They help to identify whether the visual feel and overall vibe coincide with those of a book itself. You can look at the way your design will comply with the book and implement changes if there are any.

  • Poster mockups

Posters are aimed to attract people’s attention and inform them about certain issues. Therefore, making poster mockups is a great tool that saves time and resources for the advertisers or promoters. There are tons of poster mockup styles and whole art movements that deal with posters predominantly, so you can get carried away on that one.

  • Stationery set mockups

The design of branding bottles, gum sticks, card stands, flyers, envelopes, invitation cards, and letterheads for your presentation needs may be facilitated by using stationery set mockups. Just like other types of mockups, stationery set mockups help to extend the brand identity of a company further.

Looking for stunning mockup design?

Look no further

Explore

Different ways to create a website mockup

Based on your taste, experience, and skills, you can choose a mockup program out of a vast range of means to build mockups of your choice.

Mockup software

Mockup tools provide massive amounts of interface choices. These programs have features like sharing and commenting on the design which enhances the design process and makes it a team effort. The most commonly known mockup tools and pieces of software that you can choose to fit your needs:

  • InVision Studio
  • Adobe XD
  • Balsamiq
  • Pencil
  • Proto.io
  • Justinmind

Design software

Apart from specific programs for creating mockups, you can build them out in standard design software of your choice, for example:

  • Figma
  • Sketch
  • Photoshop
  • Illustrator

These programs are amazing for working on big or medium-sized mockups. It won’t be an issue to build more detailed mockups via these programs.

End-to-end user experience (UX) tools

End-to-end user experience (UX) tools are developed to ease the use of the product. They facilitate every step of the product creation: mockup design, prototyping, documentation, developer handoffs, and design systems. End-to-end tools employ a design system to ensure consistency for multiple projects. To be more specific, when you start a new project, the design system will provide common assets and design principles as default. Consider the following aspects when choosing to work with end-to-end UX tools:

  • Ease of use: programs that are easy to master save designers a lot of time to focus on more pressing matters
  • Fidelity: how interactive and close-to-final the mockups will be with the help of the tool
  • Cost: some programs offer more niche and exclusive feature sets, some are more standard – the choice is yours
  • Collaboration: what level of team cooperation the tools provide

Coded mockups

Some designers use design to get rid of “cans” and “cants” before starting a website building. It’s easier to eliminate elements that are not going to be coded early on than to deal with such issues when mockups are ready. It can save a lot of time and nerve cells for the whole team.

However, starting to code in the early stages impedes your creativity, and you begin to think not about the mockup look with all imaginative elements but frames that coding installs. So unless you’re tech-savvy, this option is harder to tackle.

How to design a mockup: a step-by-step guide

Finally, how to design a mockup? Before jumping on a mockup creation, we recommend starting with wireframes. Even though this may seem time-wasting, it’s going to be worth it: you’ll need to think over the whole structure, layout, hierarchy, and functionality in advance, and wireframes are going to help with that.

The process includes 5 steps that are of crucial importance and have to be followed closely. Let’s discuss them in a little more detail.

Step 1: Graphic design

As you can guess, this step includes the creation of graphic elements. The temptation here is to make a bunch of mediocre mockups to save time – just to see the big picture. However, as we’ve mentioned, mockups are as close to the final design as they can be. Therefore, try to use only high-quality graphic elements and invest your time and effort into making them look impeccable.

The elements you can include:

  • Navigation systems and calls to action are the foundation of any website. We have to make them stand out from the rest of the content by applying contrasting fonts or colors.
  • Color is one of the key elements because it’s generally the first thing the user notices when they open an app or a website. They can push away a user at the very first minutes of the product experience. Keep in mind that colors have their psychological meaning. It’s great if you learn more about its psychology before selecting a color.

Besides the color, you will have to choose a color scheme. Your helpers here are Adobe Colour CC, the latest color trends, and your taste. In addition, check the Pantone to find out the colors of the year. E.g. The colors of 2021 are PANTONE 17-5104 Ultimate Gray + PANTONE 13-0647 Illuminating.

  • Images and photos are what users notice at first when they access a website. Use high-quality visuals for illustrating the content. Pixelated images may signal that an app or a website is improperly functioning or are not reliable sources.
  • Typography is another building block for a website. Search for fonts compatible with CSS/HTML. Used fonts should complement each other, so it’s better to use the fonts from one font family.

When working on typography, pay special attention to the line spacing. It’s usually measured in percentage, not in exact numbers (since all platforms and products are different). The ideal value for readability and accessibility is 130%-150% – experiment to find the best option. The biggest mistakes here are line spacing that is too short so that the line can overlap, and fonts that are hard to decipher.

  • Content is the king of any website – we’ve already mentioned that. Fill the layout with the information for users to visualize the complete design. Add real content, images, headings, and titles to improve the quality of the mockup.

It’s mandatory to work on the content relentlessly and transfer it into the final design early on. When thinking about the content, put yourself in the audience’s shoes – the content is always about the users. The client should always be there to advise on the information architecture and the general data input.

Step 2: Interaction

After the work on the content is finished, focus on the elementary navigation. Don’t overburden the usability – cluttered websites will never be popular among users. The aim here is to ensure that the basic foundation of the website is done – there’s no need (yet) to chase after super-complex interactions and try to implement them so early in the process.

At this stage, it’s useful to work on user flows and develop user personas to see how all interactions are taking place and how users are going to act. They need to know how many steps they need to undergo to finish tasks or move to another page. The main goal here is to let visitors see where they’d need to do something to navigate to the next screen or a page.

Step 3: User testing

When you have finished the previous steps, it’s time to test everything out. This process can be carried out in many different ways, but we talk about usability testing that is divided into 3 phases:

01 Exploratory

Involves early research and testing usability in the early stages of product development to understand how users think and to detect possible issues in the early development.

02 Assessment

With the exploratory stage being over, the assessment phase takes into consideration the issues fixed previously and focuses on more minor mistakes and errors that might impede the solution’s effectiveness and usability.

03 Comparative

As the name suggests, at this stage, the testing experts analyze two or more products or designs and identify their strengths and weaknesses.

Step 4: Polish everything out

When the testing phase is done, it’s time to receive the user and client feedback and fix the main pain points. This process is not as creative and demanding as others, but it can be arduous and time-consuming since the number of iterations is not limited – test everything over and over again until all issues are completely fixed.

The earlier you spot and correct those problems, the better the product will be. Apply iterations that are essential for the development process. Find out the unworking elements and determine which of them you would rather eliminate than try to fix. Settle on the final version of the whole thing. You know, the final final (does it count as a pun?).

In need of a perfect set of custom illustrations?

Contact us now

Explore

Step 5: Developer handoff

When a mockup is finished and properly tested, it’s time for the developers to get on to the coding and carry out the so-called developer handoff. Its principles are stipulated in a developer handoff protocol. It consists of the requirements for the developers to include in the product.

In most cases, the protocol contains the following elements:

  • Content brief

Usually, the client provides this information – your team proofreads and modifies it if needed. The brief is a short description of what the product is and how the client wants it to work. Ideally, it should include a short substantial product definition showcasing the essential features that need to be incorporated for the launch.

  • Mockups

One of the main components of the protocol, creating mockups is a walk in the park if you follow our guide, right?

  • Design system

Design systems include all developed assets and the brand guide to serve as a handbook to implement a homogeneous style.

  • Checklist

Checklists help to keep everything in order. It’s easier to track what has been done with the help of those. Don’t forget to mention everything – and we mean it – everything that has been developed to make sure that every single element is working.

More tips to follow

We have covered the technical aspects, and now we would like to share some bits of practical advice to improve your design.

  • Be mobile-oriented

Mobile usage is taking over the internet – with 3.5 billion users, it’s a crime to ignore this market. Start designing small screens for the design elements to look good on mobile phones first – it’s much easier to build and scale up a bigger design out of the smaller ones.

  • Use SVGs

Try to use vector graphics for your website mockup since they are much more scalable and versatile. Designers can modify them according to the screen size whenever and however the project requires.

  • Study how professionals work

An obvious recommendation, but learning from competitors and other artists in the industry is crucial. You discover what feels and looks good, examine your taste and preferences, read about how they do it, and grow as an expert. Of course, some designers are scared of parallel thinking and the fact that they might accidentally and subconsciously “steal” from others, but it’s still worth trying to see how others do it.

  • Build websites with accessibility in mind

Accessibility is no longer an exclusive option but rather a necessity for a website: with all kinds of regulations on web accessibility, website creators have to think about providing an easy and intuitive experience for all visitors. It covers such things as adding alt texts for images, avoiding super bright colors, providing extra navigation options, and many more.

  • Use only necessary information

It’s tempting to fill the mockups with all information available, but the trick here is to employ only the most crucial data and information elements that will convert users, not overburden them with facts and numbers.

On a final note

Designing a mockup requires great attention to detail and a certain amount of visual sensitivity. You create a branding item with different design elements in it, such as logo, typography, images, etc., and simultaneously focus on fitting these elements together in a compelling and digestible way. It’s a task that demands the utmost consideration of the whole team and thorough planning out.

Mockups play a crucial part in the whole working process as they present how the final product is going to look and serve as a blueprint for every design and development step. They help to define the project’s visual representation and focus on more practical steps further down the line.

If you want to build an amazing responsive mockup but are still not sure where to start, or you have other questions, contact us. Ester Digital team is ready to assist you, providing you with all the necessary information and more valuable insights into the topic.

    No problem!

    Enter your email adress below. We’ll shoot you a link.

    Thank you! The link to the article is already in your email inbox.

    Well sometimes it is quite complicated to explain simplicity!

    We let our work speak for itself.

    Explore
    How_to_Design_an_App_in_6_Steps_Ester_Digital

    How to Design an App in 6 Steps

    Designing an app is always challenging, as it requires a complete understanding of what you can bring to the table. With all efforts made and knowledge implemented, you will withstand the competition to draw your clients’ attention. And only if you keep a close eye on the needs of potential users will you be able...

    What_Is_a_CRM_in_Real_Estate_Ester_Digital

    What Is a CRM in Real Estate

    As we’ve already established in our earlier article, customer relationship management (or CRM) software is an innovative tool, highly demanded by lots of companies these days. Generally, it allows you to improve client communication and conveniently store data. But what does CRM stand for in real estate? Let’s find it out. What is real estate...

    How_To_Create_A_Personal_Website_Ester_Digital

    How to Create a Personal Website

    Without any exaggeration, people look things up on the Internet every single day. Whatever you do, you can find a lot of users interested in your products online, but you’ll need an excellent personal website to become truly successful.  Websites can offer you any type of information, products, or services. If you want to efficiently...

    10_Benefits_of_CRM_System_Ester_Digital

    10 Benefits of CRM System

    In the previous article, we explored the importance of CRM, and today it’s time to unfold its benefits so you can be sure it leverages your performance no matter the business size and industry. CRM, or customer relationship management, is a perfect tool to collect and store all the necessary information, monitor customer communication and...