top of page
ROROHOME
UI DESIGN
Overview
ROROHOME is an app and a respond website that I was working at the first company when I came to Vancouver. My position in this project is the UI designer. Because it was too long ago and I didn't save the mid-fidelity wireframe. So this page presents the high-fidelity wireframe and mock-up images.
My Role
UI Designer
Duration
4 weeks
Tools
Figma, Sketch, Photoshop, Illustrator
With a focus on UI for this project, the steps I covered in my design process included High-fidelity wireframing, Design System, and App store preview.
Design
After ideating the information architecture, I moved on to creating wireframes and mid-fidelity wireframes. I preferred to stick to elements that were as familiar as possible, to make interaction simple.
Style system
Typography
SF Pro Text
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0 1 2 3 4 5 6 7 8 9
Category
Title
Title
Title
Title
Title
Size
32
20
14
8
6
Weight
Bold
Bold
Medium
Regular
Regular
Primary color
Primary button, Title, Body Copy, Text
Background, Selected text
Secondary color
Error, Button
Inactive text, Dashline
Navigation Icons
Feature Icons
Prototype
Use Sketch and Figma to create my high-fidelity wireframes and create an UI Mockup gallery.
High-Fidelity Wireframes
UI MOCKUP GALLERY
Browse the UI mockup gallery below by swipe right or left the phone screen. Feel free to explore the gallery.
Mockup
Prototype
I continued to use Sketch to create my high-fidelity wireframes and create an UI Mockup gallery.
High-Fidelity Wireframes
Mockup
Want to work together?
If you like what you see and want to work together, get in touch!
bottom of page