Wireframes

Ethique - Lo-Fi Wireframes

Initial Wireframes:

These wireframes were made through Figma, and I was focused on generating responsive design mock-ups for mobile, desktop, and tablet. After playing around with the format, I decided that rendering the desktop and tablet version as webpages would be most effective, and keep the mobile in app form.

Wireframing and Responsive Design Edited:

After receiving feedback from peers on my first low-fidelity sketches, I decided to make some edits to the designs before moving on to high-fidelity mock-ups. I focused on making my designs more organized with categories for search filtering, rethinking the necessity of the scan function, and slightly changing the web and tablet design to make them more relevant for a larger screen.

These changes are present in the following high-fidelity mock-ups. I also generated a visual design guide to create these mock-ups, interested in generating a modern, colorful, playful, and exciting color scheme, compatible with grey-scale and color-blind visual modes, paired with legible text.

Part 3: High-Fidelity