How to Review Your Website Design Mockups

Throughout the various phases of your website design project, the mockup phase is probably the most exciting one – you finally have a design to look at!

Photos and colors have been added, and you’ll even get an idea of some of the site’s interactivity, with hover effects and prototyping between pages added (the full range of animations won’t be integrated until the staging site is built).

Since basic functionality and layout were determined during the wireframe phase, what should you be paying attention to now? Which elements are essential to get right during the mockup phase?

Here are a few areas to consider.

Color & Typography

The addition of colors and typography really brings the design to life.

As you review mockups, you’ll want to make sure that everything is consistent with your brand guidelines. If you have a limited color palette, the designer may have added a complimentary color, so be sure to review that.

When looking at typography, make sure both the hierarchy and sizing feels correct. Check that enough styles are available for any treatments you’ll want to use in the future, like testimonials or pull quotes.

Here’s a quick checklist of some areas you’ll want to review:

• Button colors
• Header font, size, and color
• Body font, size, and color
• Background colors, including in the navigation and footer

Overall Style & Design Elements

The overall style should feel on brand – whether that’s clean and corporate or lively and warm.

If there are design elements, like shapes, illustrations, or icons, review to make sure you’re happy with them. Beyond the elements themselves, you’ll also want to review the placement, color combinations, opacity, and size.

Review these items:

• Overall design aesthetic
• Design element size, color, and placement
• Use of white space

Imagery

If you’ve provided a library of images, then those will be implemented in the new mockups. There may also be some stock images to fill in any gaps.

Review image selection and placement to ensure the overall direction is aligned with your brand. Individual images can easily be swapped out later in the process, but looking at the overall direction during this stage is helpful.

Review checklist:

• Use of images and videos, including in the hero design
• If you’re using stock images, review each’s overall look and feel
• Photo treatments

It can be difficult to conceptualize your new site, but understanding what to review will help guide your feedback – and taking the time to review the mockups thoughtfully will ensure a smooth and successful design process.

If you have questions about what to expect during the mockup phase of your design project, reach out to us.