Design UI - Wireframe (6-8h)

Wireframes are crucial when we are designing a website, it is a blueprint and rough sketch of our website which shows us how our website is going to look like. We can save a lot of time by creating something that is often very low fidelity (grayscale shapes) and think about layout and hierarchy of our website before we start creating any styling. Hierarchy is a very important aspect of this process since it determines what is the most important information on our website and what is least important. In this guide You will create a wireframe and have hierarchy in mind when laying out all of the components and information you want to have on your website.

Understand what makes a good wireframe.

Understand how to use hierarchy, alignment and what makes a good layout in your wireframe

Be able to create a connected and working wireframe.

From the last project you should have a mood-board which kinda tell you what is the theme and the feeling of your project you can use that to create a wireframe which takes inspirations from the mood-board. Have the wireframe connected so you can use prototype mode.