Frame 4 (2).png

Overview

About the Projects

personal project to fulfill assignment 04 of hacktiv8 to focus on create review e-commerce design starting with brainstorming with crazy 8 and create wireframe in whimsical then designed on figma by applying grid, spacing, typography, color and prototype.

personal projek untuk memenuhi tugas 04 dari hacktiv8 untuk membuat design yang berfokus pada aplikasi review e-commerce diawali dengan brainstorming dengan crazy 8 di whimsical selanjutnya di desain pada figma dengan menerapkan grid , spacing , typography, color and prototype. tools menggunakan figma dan whimsical

Output and Outcome The output of this project is a prototype application based on review e-commerce apps sector such as Digital wireframe, visual design/mockup, text style & color libraries using Figma but before the design is made, there are certainly other attention to Assignment Task . Meanwhile, the outcome of this project is a trave application that solves user problems and is easy to use.

Assignment Task

Screenshot 2024-02-19 at 10.31.10.png

Assignment Objectives

  1. Do ‘Crazy 8’ for sketching your solution based on the requirements defined.

WhatsApp Image 2024-02-19 at 10.38.11.jpeg

  1. Translate your sketches into digital wireframe using Whimsical (Low-Fi)

<aside> 📖 Wireframe design in whimsical

</aside>

image 1.png

  1. Convert your wireframe and make a foundational like text style & and color libraries

Typography & Color.png

<aside> <img src="https://prod-files-secure.s3.us-west-2.amazonaws.com/cc427bc3-4a8e-4927-a442-6175cfb8ef0d/49195a44-43d9-4f0a-8c85-2fb1313cd773/figma.jpg" alt="https://prod-files-secure.s3.us-west-2.amazonaws.com/cc427bc3-4a8e-4927-a442-6175cfb8ef0d/49195a44-43d9-4f0a-8c85-2fb1313cd773/figma.jpg" width="40px" /> Foundational of my design ( picked : pink color )

</aside>

  1. make a component using grid, spacing and prototyping using figma based on wireframe in whimsical

https://www.figma.com/embed?embed_host=notion&url=https%3A%2F%2Fwww.figma.com%2Ffile%2F9tFuhgejhlwhqxKMAfpAho%2FEcommerce%3Ftype%3Ddesign%26node-id%3D4-2%26mode%3Ddesign

<aside> <img src="https://prod-files-secure.s3.us-west-2.amazonaws.com/cc427bc3-4a8e-4927-a442-6175cfb8ef0d/49195a44-43d9-4f0a-8c85-2fb1313cd773/figma.jpg" alt="https://prod-files-secure.s3.us-west-2.amazonaws.com/cc427bc3-4a8e-4927-a442-6175cfb8ef0d/49195a44-43d9-4f0a-8c85-2fb1313cd773/figma.jpg" width="40px" /> Component My Design

</aside>