Introduction
Welcome to day one of your five-day UI (user interface) design short course, and congratulations on taking your first step towards becoming a fully-fledged UI designer! As a complete beginner, consider this course your introduction to this exciting field. Over the next five days, you’ll learn the fundamental skills of UI design—putting your newfound knowledge from each tutorial into practice as you design your first-ever climate change app from scratch.
Let’s take a look at what we’ll cover in today’s tutorial:
What does a UI designer do?
What are the skills required to become a UI designer?
What we’ll be learning over the next five days
Setting up your artboard in Adobe XD
Ready to get stuck in? Let’s go!
1. What does a UI designer do?
UI design refers to the visual design of a digital product’s interface. It’s the process of creating interfaces (namely apps and websites) with a focus on look, style, and interactivity. A UI designer will design the movement between different screens, and create the visual elements—and their interactive properties—that facilitate user interaction.
While UI design is largely a visual discipline, UI designers work on a vast array of projects. In order to design accessible, user-friendly interfaces, UI designers bring empathy into every stage of the design process—from designing screens, icons, and interactions, to creating a style guide that ensures consistency and the proper implementation of a visual language across an entire product. They also take great care in making sure the product is accessible and inclusive for all users, as opposed to a select few.
Think about your favorite app. When you first downloaded it, you didn’t spend hours working out how to use it—you just started using it straight away. This is because the UI designer uses stylistic elements like patterns, spacing, and color to guide the user in a way that feels natural.
What’s the difference between UI design and UX design?
UI design and UX (user experience) design are often used interchangeably. While they both share the same end goal of providing a good experience for the user, UI designers and UX designers work different sides of the same coin.
UX designers enhance user satisfaction by improving the usability and accessibility of a product, while UI designers enhance user satisfaction by making the product’s interface look and feel enjoyable for the user. UX designers draw out the map of the product, which UI designers then flesh it out with visual and interactive touchpoints. UX and UI designers often work in tandem to maximize the responsiveness, efficiency, and accessibility of a website.
What does the UI design field currently look like?
As you embark on this journey towards becoming a UI designer, it’s important to know for sure whether you’ll be in demand—so let’s take a quick look at the facts.
UI design is widely considered to be one of the most fulfilling careers in tech—with even senior product designers expected to have UI design skills in their arsenal. Promising creativity, variety, and a competitive salary to boot, a career in UI design offers tech hopefuls the opportunity to make a real impact on people’s lives. In 2020, there are just shy of around 6,000 job listings associated with the search term “user interface designer” on indeed.com (in the US). According to Glassdoor, the national average salary for a user interface designer is $80,450 per year in the United States.
On this list of the 19 most in-demand digital creative talent for 2020, UI designer ranks fourth. The best part? UI designers can work remotely from anywhere in the world—with an increasing number of flexible and remote UI design roles cropping up across job boards. It’s safe to say that UI design is here to stay, and the field is only growing.
2. What are the skills required to become a UI designer?
As with any career path, a career in UI design requires a strong grasp on both the technical skills that you need in order to produce your designs, and the soft skills that will see you excel in the workplace. Let’s take a quick look at the three main skills a UI designer should have:
A career in UI design requires a mastery of at least one of the popular industry-standard tools, such as Sketch, Adobe XD, or Figma, and prototyping tools like InVision. These tools are used across the board in any UI design role, and once you’ve gotten to grips with one, it won’t take you long to settle into using another.
A UI designer needs to be well versed in the fundamental methods, theories, and practices of the field. This includes things like color theory, typography, and UI design patterns, as well as fundamental design approaches such as the Gestalt Principles that help you to gain a deeper insight into how users perceive and interpret your work.
Strong collaboration skills are a huge requirement for any UI designer. From understanding the vision of the client to working with the wireframes provided by the UX designer, to handing the final prototype over to the developers—UI designers collaborate at every level. If you consider yourself a great collaborator in your current role, you’re already off to a great start!
3. What we’ll be learning over the next five days
Now that we’re all caught up on what UI design actually is, let’s take a look at what we’ll be learning over the next five days.
During this short course, you’ll use the fundamental pillars of UI design (wireframing, symbols and buttons, color, typography, and hierarchy) to create your first ever app log-in screen from scratch using industry-standard tool Adobe XD.
You’ll choose to design one of two different climate change apps:
Activist App: the app that sees you foster conversations around environmental activism with like minded peers, and
Ethical Eater: the app that helps you track your meat consumption and share healthy recipes with friends
We’ve created our own designs to use as a guideline, but you’ll have full creative license to design your own version of whichever app screen you go for. You’ll go through the exact same steps regardless of the app you choose.
Each tutorial will see you add new elements to your design, and by the end, you’ll have a strong understanding of the methods and process involved in creating an app screen.
Let’s look at what you can expect from each tutorial.
Today, you’ll set up your artboard on Adobe XD and play around with the tool to familiarize yourself with its functions. You’ll choose which app screen to design, and hopefully do some extra-curricular reading on a few of the topics we touched on earlier.
Day two will see us learn about UI elements, and you’ll create a low-fidelity wireframe for your app screen.
On day three we’ll learn about symbols and basic shapes, and you’ll create buttons and a logo for your app screen.
On day four we’ll learn all about text and typography, and you’ll choose the font and copy for your app’s tagline.
On the fifth and final day, you’ll bring your app to life by choosing colors and imagery. You’ll also learn how to export and share your work.
To put your newfound skills to the test, you’ll round off the course with a quiz on day six. This will be your chance to recap on everything you learned over the week.
So, let’s get set up!
4. Setting up your artboard in Adobe XD
First, let’s download and install Adobe XD. For the purposes of this short course, the free version is fine to use. Once installed, open up the application to view the home screen.
To get started, you’ll be presented with an array of artboard presets for iOS, Android, iPad, and web screens. You can also create an artboard with custom width and height. For this course, we’ll be using the artboard for iPhone X/XS/11 Pro (375 ✕ 812).
Once you’ve selected the correct artboard, you’ll be taken to XD’s ‘design mode’ where you’ll be able to see everything you need to create an app screen. The image below shows the artboard and the design settings/tools on the far right of the screen.
Think of your artboard as a canvas where you can add and style all of your user interface elements. Once your artboard is set up, you’re good to go!
Summary
Today we learned what goes into being a UI designer, and where UI design skills can take you. We looked at the project we’ll be working on over the next five days, and dove into what we’ll be covering in each tutorial. Finally, we learned how to get set up with Adobe XD and create our very first artboard. That’s pretty good progress for day one!
Tomorrow, we’ll get to grips with wireframing, shapes, and UI patterns. See you then!
Comments