“Good design is obvious. Great design is transparent.”
In the website design phase, a basic structure of your website is developed. Design determines the look and feel of your website. After gathering the information from you as to what type of website you want, the agency will design the basic look and feel of the website. The design of your website will be guided by the target audience of your business. A site aimed at a younger demographic will be different than a site aimed at business users for example.
The design phase will include what type of graphics to include, the colour scheme, logo, animation effects, etc. It’s crucial from the point that your design will impact the usability of the site and user engagement.
The design phase will also include developing a sitemap of your site. A sitemap is the structure of your website. It will serve as the relationship between different web pages so that a flow of navigation can be developed of how an end user navigates from one page to another. An easy to navigate website is user-friendly.
Before the agency begins to code, they need an approval from your end that everything is okay. For this purpose, a wireframe is created. A wireframe is the visual representation of the user interface you’re going to create. But it doesn’t contain any colour, graphics or anything. It’s artless and plain. It can be considered as a blueprint for the website. Since wireframes can’t convey important design elements mockups can be used instead.
A mockup is a static visual design draft of a design used to represent the structure of information, visualize the content and demonstrate the basic functionalities in a static way. Unlike wireframe, mockups provide visual details, such as colours and typography. As Marcelo Graciolli explains: “While the mockup furthers the wireframe’s purpose of documentation and organizing the team’s vision, it has an extra advantage that the wireframe does not: with its superior visuals, the mockup is more useful to stakeholders and investors.”
[ADISESHIAH, EMILY. “Wireframes Vs Mockups.” justinmind.com. https://www.justinmind.com/blog/wireframes-and-mockups-whats-the-best-option/]
Whatever you work with, wireframe or mockups, always create one with the end user in mind, not the business or the owner.