Learn UI Design
November 08, 2017
This course consists of about 20 short, crisp tutorials on UI Design — once done, you should have a good understanding of what the field of UI looks like, have a good understanding of principles of visual design, as well as know a bit about the tools you can use to create your first mockups.
Introduction
This section will give you a brief introduction to UI Design, get into a little bit into how it’s different from UX Design, and also has an article with Dieter Rams’ 10 principles of good design.
Visual Design Principles
In this section, we’ll cover the top visual design principles you will need as part of your toolbox to make your designs a lot better.
- Z-Pattern, F-Pattern, Visual Hierarchy, and White Space
- Gestalt Principles of Grouping
- The Fold, Images & Headlines
- The Axis of Interaction and Primary/Secondary buttons
- Typography
- Color Theory
- Animation Design
- Project: Make a list of as many Visual Design Principles as you can spot on airbnb.com
Toolbox
In this section, we will look into the tools that you’ll be using on a daily basis to actually get your work done — these include digital design tools like Sketch (covered in depth), Figma, Adobe XD etc. and a brief overview of some of the top animation design tools.
- Digital Design tools: Sketch, Figma, Adobe XD and Photoshop
- Learn Sketch: Part I
- Learn Sketch: Part II
- Learn Sketch: Part III
- Animation Design tools: Framer, Principle, After Effects, Invision Studio, ProtoPie, Origami Studio
Conclusion
Hopefully you’re comfortable with some of the aspects of UI Design by now. This section will help you think about how to get started with building your UI Portfolio to get hired as a UI Designer, and what other places you can go to, or books you can read to keep improving your UI Design skills.
Projects
This section covers a few real-life projects that you can work on to start off your portfolio. The Commonlounge team will critique each submission, and will consider implementing solutions you propose to the actual product! This is a great chance to get some real-life UI Design experience :)