Many design courses focus on the finer details, heavy theories, getting you to the 99% of being a visual designer, but often disregard the code and handoff aspect. They end up alienating developers who just wish to learn the essentials. If you’re looking to learn “just enough” UI design to be 100% self-sufficient and collaborate better with designers, this course if for you.
Downloads
To follow this course, you can download the source file, which will help you compare your progress.
This Course
As a developer, your goal should be to create designs that are as objectively good as possible, using design systems, well-established principles and techniques that translate well to code. You should work on your speed, since you don’t want to steal away from your coding time. My goal is to get you to be satisfied with your designs and to find a system to consistently improve over time by not only explaining the foundations of UI design, but my personal insights on how it’s feasible to divide your time between design and code. We’ll be using free icons and illustrations from shape.so and mockups from angle.sh. 
What you’ll design
Starting from the dreaded blank page, we’ll work our way through UI patterns, inspiration, colors, typography and practice in the design tool for every step. In this course, you’ll design an entire app from scratch, from the landing page to the mobile version and we’ll create a design system that will bring everything together. 
Design System
Ultimately, at the end of this course, we’ll build a design system that connects designers, coders and stakeholders. This is an effort that has become increasingly popular in teams for the past few years. A design system is a language that bridges design and code, and is a perfect starting point for developers learning more about design and vice versa. 
Adapting for iPad and Mobile
We’ll learn how to set up break points and typography, spacing, navigation and size rules for adapting to the iPad and mobile web versions. 
Figma Design Tool
I believe that practice is key and it’s important to get context from the current state of design tools. While the techniques will be performed in Figma, most of the steps can translate to other design tools like Sketch, XD and Framer. Figma has a bunch of really useful resources, plugins and Auto Layout techniques that will make your experience designing extremely efficient. On top of that, you’ll have access to all the design files to compare your progress, downloadable from section 2. 
Wireframe and UI Patterns
Starting a design from scratch is one of the most daunting things for developers. But just like code, you don’t have to think of it like an art canvas. Rather, you can use known patterns to solve user experience problems. I will be sharing my own process for searching for the right inspiration and designing user interfaces in a pragmatic way. 
Icons and Illustrations
Often times, teams have to rely on pre-made icon sets and illustrations to speed up the design process. As developers, this is key for starting on the right foot and build on top of the expertise of designers. It’s important to learn how to customize the icons, illustrations and mockups properly to fit your product. We’ll be using a free version of Shape.so — you won’t need to purchase anything and it’s all in this course’s source files. 
App Mockups
One of the sure way to get your audience excited is to show your product in action, or in a context. App screenshots can be useful for landing pages, submitting to the app store, keynote presentations and promotional materials. We’ll use a free version of Angle.sh, included in the asset files. 
App Flow and Prototyping
In the design tool, you can quickly prototype app flow and interactions in minutes. Before even getting into the code, I’ll show you how to you can set things up and to avoid complicating your design file. 
About the Author
