What is it and what role does it play?

If you consider a finished website as the main theatrical performance, the web design mockup could be regarded as its dress rehearsal.

What is a Web Design Mockup?

A web design mockup is the first visual representation of a website before it is created. This essential design phase is as an opportunity for stakeholders to express their desires and alleviate concerns.

The web design mockup will demonstrate all the visual aspects of the website, from color schemes and layout to fonts, images, navigation, and your company branding. The purpose of the mockup is to bring to light any irregularities or imperfections in the design. 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.

Stages of a Web Design Mockup

Brainstorming

The first step of the web design mockup process is to thoroughly brainstorm everything. The most important question at this stage is: What do you want your website to accomplish? To answer this question, you must first know who your target audience is, what they want from your site, and what you can offer them. Use a whiteboard and write down their demographics, pain points, and your offerings.

Then decide what the objective of your site should be. Do you want to generate a mailing list? If so, then you should have a call to action, ask them to sign up for a newsletter or download an ebook.

Map it out

Next, map out the components on paper – content, images, logos, navigation tools, social media links, and the ever-so-important whitespace. As a design element, whitespace, or “blank” areas, make content more approachable because it is less dense and less likely to overwhelm the user. Graph paper and stencils with common navigation bar and buttons shapes will simplify the process.

As you design the layout, consider 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. Further, a clean design may assist you when optimizing your site for smartphones.

Tip: If your goal is to generate leads, be sure to place the initial request for information – the call to action – toward the top of the site, then give your audience a second chance at the bottom.

Design It

This is where the design really begins to blossom. Using software like Photoshop, you can lay out all the pieces and evaluate color, whitespace, consistency, and repetition. Also, since it’s predicted that three-quarters of the world will access the internet via smartphones by 2025, this is when you should consider whether the design layout is optimized for these devices?

This is also the best opportunity to evaluate your brand messaging. Do the color schemes and font select support the image you want to project?

Test Test Test!

Now is the time to run the web design mockup through its paces. Does going from one section to another correlate visually? Are there any elements of the website that need to be removed or added? Next, show the prototype to as many members of your target-audience demographic as possible and collect feedback for improvements.

At the end of this process, you should be ready for the programmer. However, be prepared to start again, from the beginning if necessary, to refine your design and get it right the first time.

Summing Things Up

A web design mockup can save you time, money, and embarrassment. With these simple steps, you can look forward to your debut knowing that the performance will be its best. At Agency Partner Interactive, we have the web design and digital experts who can help you through each stage of the process, as well as provide digital support services such as digital marketing and IT strategy consulting. 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.

 

A Web Design Discovery Process Overview

What To Expect

To a neophyte, a website design discovery session is both exciting and mysterious. It is that first big meeting between a web development project team and key stakeholders that come together to ensure alignment around business goals, web design strategy and scalability, and general expectations around the process moving forward, among other details.

From the perspective of a website’s design and development team, the discovery phase is the most important phase of all. It’s the first stage of a web development project that investigates how the future website will best serve the demands of a business and its consumers. This is where questions about features and functionalities come into discussion. What sort of engine is under the hood of this new site? Does it need to integrate with payment processors, customer relationship management systems, marketing automation platforms, or something else? Are there specific cybersecurity or data privacy issues that have to be considered? For example, if you’re building a healthcare website, are there any HIPAA compliance issues for us to address? All of these questions matter in the earliest stage of your website design. 

You could say that the design thinking that goes into this process is the first phase of research and analysis. And, the most important piece? Considering your end-user and recognizing for whom the website is being designed.

Discovering Your Website’s End Goals

Of the many best practices of any web designer, a critical one is a thorough analysis of the website’s goals. Much like an interview process, you should expect that your website designer and web developer will quiz you on a series of topics related to your business, its goals, and how the website should play into that mix. Without a doubt, a quick deep dive into your company’s brand is also a part of this conversation.

In our opinion, a company’s brand comes down to six key components:

• Focus on your customer
  • Who is your target audience?
  • How does your website impact that audience?
• Culture
  • What can your customer expect from you? Do you promise that same thing every time, with everyone?
  • How can your new website further validate and support your customer and brand culture?
• Voice
  • Is your brand serious and buttoned-up or is it playful and fun?
  • This impacts the tone of your web content, and can even play into your color psychology.
• Feelings
  • What does your market think of you? What do you want them to think of you?
  • Consider how the American Airlines Customer Service portal make you feel, and then check out Tesla’s website. Big difference!
• Impact
  • What are your values and how does that impact your every decision?
  • Does the website design look capable of achieving a specific, measurable business outcome?
    • If so, what is your specific, measurable, achievable business goal from this web project?
• X-Factor
  • How do you position your brand relative to others?
  • Your new web design must truly empower your site, relative to your competitors…. does it showcase your X-factor?

It is important that you think through what your new web project is going to achieve. For the most part, you only have to show up to this meeting with your business problem, your vision, and your goals. From there, a capable team of website designers and web project managers will guide you toward the most impactful project plan.

In this first meeting, there are no “good” or “bad” answers. If your responses are thoughtful and relevant to your website, then they are valuable responses that will be strongly considered. If for some reason, key things are left out or added at a later date, your project team will work with you to determine the best path forward.

As a friendly heads up, we’ll inform you that the process may well seem like an awkward one — you may even feel uncomfortable being a part of it because some of the business questions you are asked are very specific — but the goal is to leverage your website as a digital marketing tool and establish your company’s image to the world. Everything we talk about is intended to get us from A to B (and then to C, D, E, etc). 

An example of discovery session questions may be as follows:

• What is the desired project outcome? 
• What is the project’s expected timeframe?
• What is the budget for this project for its initial development?
• Have you considered a budget for routine or periodic maintenance and updates?
• Who is the project sponsor and what is their relationship to the key decision-makers?
• Who is your target end-user and what are their expectations?
• Are there any security requirements specific to accessibility or HIPPA compliance?
• Is your website in need of post launch support, such as SEO services?
• Do you need the assistance of a content writer to ensure that your messaging is powerful? 

Looking Externally

Understanding your business needs and objectives is absolutely essential. We need to understand where your company is relative to its market niche, and we have to understand where it’s going. A website can make a small business look massive, and similarly, it can make a big brand seem small and local. What is your goal and what does your web visitor expect from you? What do your customers need? We’ll need to establish the following subcategories to get things right:

• Demographics:
  • The cultural narratives, region, and identity of the world from which your target market hails.
  • We will likely factor in the psychographics of your customer and work to understand how your site fits into that.
• Backstory problems:
  • What are the problems, or pain points, of your audience?
  • What can your website provide to address those problems?
• Your customers’ needs:
  • What are your audiences’ interests, what are they looking for, and how can your website provide a solution?
  • Is a mobile experience just as important as a desktop web experience?
• How to exceed their needs:
  • What can we do for your business that won’t just satisfy your customers, but “wow” them?
  • Does this website need to accelerate your sales process? What sort of data do you wish to collect?

What’s the Point of this Web Discovery Process?

The point of the discovery process is simple: to design and develop an absolutely brilliant business site. 

Without a proper alignment around what it should do and for whom, then we’re sort of shooting in the dark. That’s why we work to clarify objectives, align around a project plan, and make sure that the voice of all stakeholders is heard and considered.

When we say everybody, we mean you, our client, and your team, including users, decision-makers, and anyone that will touch this project. Everybody also means our team as well, including the web designer, the website developers, and the marketing content creators – quite literally, everybody. That very reasoning is why discovery is one of the (most important) best practices to begin any web design process.

Not sure what to ask in your own website kickoff meeting??  Here's what to ask.

Summing Things Up

From day one, our experts will work with you to build your website based on information obtained during the web discovery process. Our award-winning web designers and web developers will confer with you throughout the entire development process. If revisions are necessary, we will work to ensure that the final result of your website becomes an extension of your brand, creating an engaging user experience, and helping to grow your brand’s reach and subsequent success.

Throughout this process, you can expect us to share suggestions and offer helpful solutions that help you more rapidly achieve your desired end result. Our goal is to help you enjoy the fastest, most impactful return on investment. To get the ball rolling on your project, all it takes is a quick, no-obligation first conversation. So let’s get the ball rolling.

We have completed over 1500 projects and we can share information that will help you fill in the blanks faster than not — Reach out to the Dallas based website experts at Agency Partner today.

Not big on reading? That’s okay. Watch “A Guide to the Web Design Discovery Process”

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