Introduction

Sitemap

Wireframe

Mockup

Development

Launch

Lesson 3

Design Mockup

Estimated Time: 3 minutes

______________________

After this lesson, you will:

  • Be able to identify whether your branding assets are complete;
  • Be able to identify the appropriate website tone in line with your branding;
  • Be able to evaluate your website’s design mockup.

Descriptive transcript

Video Description: Brian, a white male, is seated. He is wearing a dark blue polo shirt, a tan flat cap, and a pair of black eyeglasses. He is using American Sign Language to teach. On his left side is a light gray dresser with an assortment of house plants on it. A plant grow lamp casts white light upon the plants. To Brian’s right side is a small brown plant stand, with more house plants on it, along with a black baseball cap with the word “Purdue” on it. Another grow lamp casts blue light on the plants on this side.

What is a design mockup?

The design mockup is the visual model of your website with colors, logo, graphic images, and other visuals involved – the stuff that makes your website truly yours! At this point, you’ll get to see what your website will look like in its final stage, at launch. Your feedback at this point is absolutely crucial. Making fixes during this stage will save us any potential headaches down the road during development and launch.

What do I need to do to support my design mockup?

We’ll need a few things from you to ensure your design mockup is done.

Know your branding presence 

Your branding reflects your identity. When your audience looks at a random page on your website and recognizes your purpose instantly based on just a glance at your colors and design style, you know you have branding down right. Your logo, color scheme, icons, fonts, and tone make up your branding. 

  • Logo
  • Color scheme
  • Icons
  • Fonts
  • Tone

So it’s important to have your branding assets together and ready to go to make sure your website can be consistent. For that reason, a branding guide is a valuable tool that we’ll work from during this stage. 

Here is how we’ll approach your branding guide. We will:

  • Identify gaps (missing assets) in your branding guide that could impact your website;
  • Integrate available assets throughout your full website – a logo at minimum is fine;
  • Build a cloud library of all your branding and visual images to be ready to plug in during web development — and make your future website updates easy to do!

Think about your tone

One more reason your branding guide is so important: it also impacts the tone that you want to communicate to your audience. Think about the difference between the Nick.com website (for kids) and Johns Hopkins Medicine’s website (for patients). What kind of tones do they communicate through just their visuals – their logo, graphics, buttons, and even fonts? Playful? Serious? Focused? Do their tones fit these websites’ purposes?

Need Help?

 Unsure of something? Please reach out to us!

Save for Later

 Feel free to pace yourself. We’ll be here!