How to build a professional website: Part 2 – Mock ups

November 22, 2017
by Daniel Klein

Build Website From Scratch: Part two – Mockups

What are mockups?

Mockups are quick drawings of user interfaces (UIs) -this typically means browser screens. They typically show the layout

of your webpage and the various buttons and options presented to users. They show you where these buttons and options are placed on the page, what text fields or buttons exist, and any other features of your website. Having solid mockups will help your web developer build faster and with fewer defects, meaning less rework (saving you time and money towards the end of your development experience). They also help you by giving you a sneak peek into what the web developer was going to build, and they enable conversations between you and your web developer so that you can get exactly what you want.

**Throughout the entire build process you should be having meaningful conversations and touch points with your web developer so that they deliver exactly what you want, and they don’t stray too far away from your vision before getting your feedback**

Mockups are very easy to build, and a competent web designer should have software like Balsamiq available to demo mockups to you. In a typical mockup meeting, the web developer or engagement manager will show you the mockups they’ve built for your web solution. They should be familiar enough with your vision and the mockup software to be able to ask for your edits and incorporate them into the mockup design on-the-fly. This is a great way for you to actively see your website being built!

TIP: If you and your web developer aren’t co-located or in the same town, having these meetings via web conference or videoconference is an excellent way to bridge that gap in geography and connect with each other.

Bringing it together

Mockups are an essential investment in your website being built! They’re fast and easy, they visually show how your web flow will fit into a user interface, and they prevent a tremendous amount of frustrating conversations with your web developer about additional changes neither of you had budgeted for. We understand! You don’t know what you don’t know. What you think you need on a website typically isn’t what you actually need or want when you see it. This happens all the time, and the best way to work around these changes is to be able to build the website fast enough to absorb the change without incurring cost overruns or schedule overruns in your engagement with your web developer. Using mockups helps you get what you want faster and cheaper.

In issue one of this blog…

we covered site flow site management, and how you and your web developer (prior to having any discussion about graphics or content) should sit down and talk about site flow and site flow management. By this, we mean how users will interact with your website, where they’ll show up, what they’ll be presented with, and how they find additional content on your site faster. If you missed that first blog post will provide a link right here.


Have Questions?
Contact Us & We’ll
Put You on the Path to Success

Our knowledgeable team is ready and eager to answer your questions. Want to learn more about our company and processes? Looking to explore our subscription services or discuss packaged pricing? Contact us or check out our pricing page to get acquainted.