Thread by @figmaafrica

On this week's series of #HowtoDesign. We broke down the process of How to #WireFrame.
Do well to learn from this #Thread and share with a friend.

What is #WireFrame? A wireframe is a simple visual guide that represents the skeletal framework of a website or digital product.

Types of WireFrame
- Low Fidelity WireFrame -
- HIgh Fidelity WireFrame -

* Key Pointers
- Keep Aesthetic Simple - Colors should be grayscale: white, black, and the grays in between.
- Represent graphics and images with boxes - Keep the focus on the layout by using simple symbols that relay the future placement of graphics and images.

- Consider screen size - Wireframes should be equally creative and technical. Consider the many different places, stages, and ways your design might be used. Three questions that might drastically influence your wireframe or versions of your wireframe include:

Supported devices — Your design adapts to support desktop and mobile. You’ll want to wireframe how the design changes in each instance.

Screen orientation — Depending on if you’re looking at the design in portrait or landscape, some things might need to shift and resize.

Context of use — If a specific feature in your product is more geared to desktop use, consider cutting it from the mobile version upfront. Reducing the design to match how people will actually us.
#FigmaAfrica