Build Key UI Elements in High Fidelity

Vishnu Gopal

Where is your team now?

1. You’ve Shortlisted an Idea2. You’ve got a clear

Product Narrative3. You’ve identified the key elements of your UI

after Building a Low-Fidelity Wireframe

If you haven’t done all of those, please go back and complete those targets.

You can’t detail UI elements without knowing which are the important elements of your UI

Additional good to have completed target:

Develop Brand Basics

This helps you have a coherent design for your UX.

Why is this important?

1) An Appealing Visual Design is key to a good product now.

2) Your whole app/website design should feel part of the same

product.

How is this done?

1) Remember to follow platform UI guidelines.

For e.g. on Android use Material Design Guidelines.

2) Use UX Patterns when necessary, don’t reinvent the

wheel.

Recap: go through Design UI Patterns learn session again.

3) Use tools suited for UI design

The two most popular tools are: 1) Sketch and 2)

Photoshop/Illustrator

If at all possible, Sketch (paid) is highly recommended.

So, steps to complete this target:1) Identify key UI elements.

2) Look at best practices in both platform guidelines & UI patterns.3) Use a UI design tool like Sketch

to model the element.

Example: SV.CO Timeline Builder

(this is what you use to post events to the timeline)

Low-fidelity UI Mockup

Example from Real World Pattern (Facebook Post Editor):

Initial UI Mockup

Bonus Step:

Step 4) Convert the UI Mockup into actual code.

i.e. HTML/CSS or Android Layout

Actual HTML/CSS Mockup

Do this for every element you identify as a key element.

Submit a document with all elements mocked up.

Do see the Rubric for more details.