Best practices for building a website mockup and prototype

  • 6 min read

Rating

Often, things we imagine in our heads that seem great regularly turn out to be bad ideas when we put them in the real world, such as a piece of paper or a computer screen. They say that the picture is worth a thousand words. What if this is not just a picture but a functioning model you can interact with? That functioning model would be called a prototype.

The prototype isn't a website mockup, and it isn't wireframe. Although, you may create one or both in your design process. 


Difference between prototype, website mockup, and wireframe

Wireframes, mockups, and prototypes can be defined as stages in the design process. Each one of them is a step closer to representing the final, functional website. You can refer to each one by its level of "fidelity" to the final product. 

The wireframe is a layout with abstract graphic elements like lines and boxes, similar to an electronic schematic. You can see how each element relates to others.

Wireframes are low-fidelity documents.

website mockup
Wireframe

Mockups are better-looking wireframes. They have bare structure skinned with grey boxes representing images, original graphics, fonts, and colors consistent with the client's brand identity.

With mockups, you can show how a website will capture the essence of a brand. A website mockup can help you show the client how a website will look without spending too much time in creating it.

Keep in mind not to get bogged down with revising mockups, because you can do all these changes on the actual prototype.

The prototype is an interactive representation of a website. It is not necessary that every interaction and animation is defined. Essential elements should be presented to show how it's going to function.

The prototype is a high-fidelity version of the final website. Most, but not necessarily all, of the components are in place.

Because of the interactivity, prototypes are much better than mockups. That's why we usually skip mockups and proceeded directly to the prototype.


Know your audience

Design and development process involves many different people, from developers and content writers to marketers and CEOs. Whatever stage you're at, make sure your prototype has features that are relevant to your audience.

A copywriter is not interested in pretty animated transitions, rather prepare prototype with their content in it.

One thing is to get your prototype in front of people who've been thinking about it for months; it's a whole other thing to get an outsider's perspective from someone who will be a user of the website.

Three things you need to do:
  • Know who your end users are going to be
  • Understand their expectations for this type of site
  • Run usability testing on prototype

Research

Start with gathering information. Look at other sites in your target industry. Find out what websites your target audience visits regularly and what makes them return.

Ask yourself: What features make these websites an enjoyable experience? 

Use this research as a source of inspiration as well as warning what not to do.


Sketch

In this stage pen and paper are your best friends. Scribble main elements of your future website pages on a sheet of paper. With pen and paper level of commitment is minimal.

Making quick sketches frees you up to identify creative solutions, saves time and can help you imagine basic website structure before you move to pixels.

Drawings should be loose without any attention given to fonts, colors, and interface elements. At this point, you are marking down the big ideas.

 

website mockup
Pen and paper prototyping

Defining scope

Think about what you want your prototype to demonstrate and make a list of pages you will need for it. In most cases, if you are building a website from scratch, you will want to list all pages, the prototype will feature. 

Prototyping

In creating a prototype, you will need to use real content. It doesn't need to be completely fleshed out, but you should have headings, and copy should be more or less defined.

Using dummy text is okay, but it's better to use an actual copy, even if it's just an early draft. There should be enough content to give someone an idea of what page is about.

Ask yourself: What's the purpose of each page?

When designing for mobile devices, it is essential to find the focus of every page. Remove distracting and repetitive elements (except for maybe your CTA). 

Conclusion

Creating a website without a prototype or website mockup is like trying to build a house without a blueprint. Sure, you can combine materials into an approximation of a building, but most likely you'll get confused and start to lose vision of the purpose of the website.

A functional prototype is a thing you can't afford to neglect in your process of building websites. It saves a lot of time in communication with software developers and the rest of the team.

Also, it saves money that would be spent on a redesign and fixing the errors.

Contact us

  • This field is for validation purposes and should be left unchanged.

How useful was this post?

Click on a star to rate it!

Average rating / 5. Vote count:

Share

Subscribe to our newsletter