Bringing Website Design to Life

Do you want to design a website mockup? Wondering how long each stage takes and what happens in-between? Then, you’re in the right place to find out!

Group 940
1

Competition
and trend analysis

In the first step, we analyze competitors’ websites and web design trends, reviewing the use of colors, imagery, typography, and UX flows. The conducted analysis and client’s brief provide core design assumptions for further design work.

5-10h

Time
Layer_2_1_ Page-1
Tools
  • Outputs: A short presentation with basic design assumptions
Group 941
2

Visuals and
functionality

Once the client accepts the design assumptions, the next step involves creating mood boards and simplified mockups.

Group 947@2x
A
Moodboards

A mood board is a digital collage of ideas that assembles images, copy snippets, typography, and design concepts to convey the general idea of the target website. The well-thought-out and arranged elements provide visual direction for further creative work.

8-10h

Time
Layer_2_1_ Page-1
Tools
  • Outputs: 2-3 mood boards
Group 946@2x
B
Grid layout and simplified mockups

Grids specify the placement of particular website elements, creating alignment and order. Simplified mockups represent the functional part of the end solution, and they may already include existing web copy, contact forms, headers, menus, etc.

<16h

Time
Layer_2_1_ or Group 1143
Tools
  • Outputs: A presentation with simplified layouts
3

Mid-fidelity mockups

We design the final interfaces at this stage. Usually, the mockups do not yet feature target images and illustrations. However, they provide a near-final representation of the website’s content, structure, and information hierarchy, as well as its look & feel.

<24h

Time
Layer_2_1_ Group 1143
Tools
  • Outputs: A simplified version of the target interface
Group 948@2x
4

Final mockups

Time for finishing touches before handing the project over to developers. For demonstration purposes, we generate a link to Adobe XD or Figma. Once all comments are resolved and the client is happy with the design, we are ready to implement!

8-16h

Time
Layer_2_1_ Page-1
Tools
  • Outputs: A presentation with a final version of the project
Group 949@2x

How to make a comment in Adobe XD?

Group 952@2x
1. Click the comment icon

Open the link we sent you, scroll down to see the entire layout, and use the arrows to move between the designs. Click the comment icon in the top right corner.

Group 951@2x
2. Grab and drag the pin

Grab the pin in the comment window to comment on a specific section. Next, drag it onto the design panel and drop it where you want.

Group 951@2x
3. Make a comment

Finally, type your comment and leave your name or initials. Don’t forget to submit it! Your comments help us understand what needs to be changed.