User Interface / Web design

User Interface Design working process sample

Client: VIISU Inc.

Software used:  Sketch; InVision; Flinto; Zeplin; Adobe Photoshop; Adobe Illustrator

---

— Rough sketch —

Hand-drawn rough sketch to kickstart thinking process and share draft concepts with team members.

---

— Wireframe —

To visually communicate abstract concepts, grid structure with users and team members to generate feedback. These can be hand-drawn or created with a software like Sketch or Moqups.

— High Fidelity Mockups —

Applying product branding, typography, color scheme, photography choice and icons.

Home Page

Secondary Page

— Design System —

Creating a unified design system to speed-up the design process while also helping build bridges amongst team members and for reference use.

❮ ❯

— High Fidelity Prototypes —

To quickly develop interactive prototypes with tools like Flinto or InVision. This lets the team easily distribute and observe exactly how well the product will be received before the product gets built.