Blog

How to Create a Web Design Mockup

A high-level overview of the mockup process.

 

First, let us quickly define what a web design mockup is:

A web design mockup is the first visual representation of a website before it is created. This essential design phase is a part of design flow and it is commonly viewed as an opportunity for stakeholders to express their business needs and address any concerns or questions before actual software development kicks off.

Similar to (but different from) wireframes and prototypes, a website mockup will demonstrate the things that you can easily observe with just your eye. A mockup is truly a facade – with no actual functionality behind the buttons – and most often will allow you to click on things such as buttons, which actually include text links to a corresponding page of subsequent and/or additional mocks.

A website’s earliest form, the mockup, will often display most of the visual components that go into a business website. This may include everything from color variations and page layouts to custom fonts, site image assets, page navigation information, and your company branding.

In function, the purpose of the site mockup is to bring ensure alignment between the project team and its stakeholders as well as spark conversation about any complex integrations or development work that may need to support what makes the site be successful. Perhaps the client has different expectations regarding the style, size or placement of certain elements, all of which can be quickly rectified during the web design mockup process.

The 4 Basic Stages of Creating a Web Design Mockup

In its most simplified, high-level breakdown of web design flow, we generalize it according to four stages: Brainstorming, Visual Element Planning, Designing the User Interface, and testing for user and market acceptance.

Stage 1: Ideation and brainstorming

Get creative, spend some time with your thoughts, and engage in a healthy ideation session. A good classic brainstorm with your team and other stakeholders is really the first step of the web design mockup process. At this stage you are looking to explore possibilities… So bring your “what ifs” and perfect world scenarios to the table as you address one of your single most most important questions: What do you want your website to accomplish?

To hone in on the answer to that question, you should leverage your marketing and customer data to create a profile of who your target audience is. You perfect customer profile should detail what they want from your site and what value they seek. If your ultimate website design is not able to immediately make your site visitor feel like they’re in the right place, then you should expect that they will abandon your site and quickly move on to doing business with your competitor.

Stage 2: Map out your site

Next, map out the major visual components on paper – This means that you should combine Word docs and image libraries inclusive of any written text content, digital banners, signage, images, logos, navigation tools, social media links, and more. Pool up your digital assets and work with a designer to decide what to include, if anything, and what to make new. As you are considering what elements you want to see when you first hit your landing page, don’t forget to consider how best to utilize the blank, powerful beauty of whitespace. As a design element, whitespace is what we see as “blank” areas on a screen. A proper ratio of content dense to content light areas will work to your favor in strong ways. Proper utilization of white space makes content more approachable because it is less likely to overwhelm the user. To map this out for yourself, if using pen and paper we suggest using graph paper. If you really want to up your artistic game, you can even buy stencils with common navigation bar and buttons shapes to simplify your creative process. Additionally, online design software (both free and paid) such as Balsamiq and others help get thoughts out of your head and into a more shareable, collaborative format. These tools also make it easier to communicate your desired sitemap, in addition to site design.

Just as every song has a hook, your website has to capture your users’ attention in as little as 1-3 seconds. Make that your goal to capture and retain attention as quickly as you can, for as long as you can. As you design the layout, be sure to keep in mind that you only have about eight to 10 seconds to capture your visitor’s attention. A clean, uncluttered appearance with easy navigation and relevant content is crucial. Good messaging and proper use of white space can help you achieve this for both desktop and mobile users.

Stage 3: Start The ACTUAL design of your site

This is where the design part of things really begins to take on new life. Graphic designers will often utilize powerful software like Photoshop and InVision to lay out all the visual elements that go into a site design. This allows clients and project team members to get a first opportunity to evaluate color choices, content and layouts as it relates to whitespace, consistency, and other design considerations. Expect some back and forth to take place in this truly collaborative effort.

Stage 4: Get feedback from friends, family, and customers! Talk to anyone that will listen. 

At this stage in the game, you feel like you’re close to be done… but be sure to give yourself a sanity check by validating your data and assumptions with feedback from real people. This feedback should come from people that are not actively involved in this web design effort. You want to be sure that you are taking suggestions and advice from those who are not close to the project and are more able to give you some honest truth: good and bad. Ask yourself, the project team, and outsiders if going from one section to another flows smoothly or if it shocks the user. Consider if there are any site elements that need to be removed or added and make a list of thoughts and ideas that may spark up as you go.

At the end of this four step process, it can be assumed that your have signed off on what is surely a beautiful looking website design. With that, you can now advance to the next step and call in your software developer. This is where you start to see your site come to life in a strong, tangible way. As development takes place, be ready with site content and other assets that will help the project move as efficiently as possible.

Set yourself up for success

To maximize your ROI, it is obvious that you will want to do as much preparation and planning as possible. The project team will surely have a list of questions for you, and it is very common for you to have a list of your own. In the interest of ensuring alignment, establishing a strategy, and creating a single best tactical journey map toward success, a web design mockup can save you a lot time, money, and embarrassment. Whether your business is in need of a total site redesign or you are starting from scratch, by following these simple steps and working with an expert, you can look forward to your debut knowing that the performance will be its best.

So let’s get the ball rolling. At Accunity, our technology and business experts can help you through each stage of the process. As a full service digital agency, we also provide digital support services such as digital marketing and strategic IT consulting. If you’re ready to jumpstart your business, contact us today to see what we can do for you.

Not big on reading? That’s okay. Watch “How to Create a Web Design Mockup”

Using the power of Artificial Intelligence, we turned this blog into a video for you. Watch it below.