Build Key UI Elements in High Fidelity

2. Build Key UI Elements
in High Fidelity
Vishnu Gopal

3. Where is your team now?

4. 1. You’ve Shortlisted an Idea
2. You’ve got a clear
Product Narrative
3. You’ve identified the
key elements of your UI
after Building a Low-Fidelity
Wireframe

5. 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

6. Additional good to have completed
target:
Develop Brand Basics
This helps you have a coherent
design for your UX.

7. Why is this important?

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

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

10. How is this done?

11. 1) Remember to follow
platform UI guidelines.

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

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

14. Recap: go through Design UI
Patterns learn session again.

15. 3) Use tools suited for UI
design

16. The two most popular tools
are: 1) Sketch and 2)
Photoshop/Illustrator

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

18. 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.

19. Example: SV.CO Timeline
Builder
(this is what you use to post
events to the timeline)

20. Low-fidelity UI Mockup

21. Example from Real World Pattern
(Facebook Post Editor):

22. Initial UI Mockup

23. Bonus Step:
Step 4) Convert the UI
Mockup into actual code.
i.e. HTML/CSS or Android
Layout

24. Actual HTML/CSS Mockup

25. Do this for every element
you identify as a key element.
Submit a document with all
elements mocked up.

26. Do see the Rubric for more
details.