in

Getting started with UI Design in 2020

It’s 2020 already and you might be wondering if this is a good year for you to get started in UI Design. UI design as a career path has seen a lot of popularitiy over the past two years. The question that we’re trying to ask if it is already too saturated to get into UI design or if there’s still enough space for you to get started and how to. For the purpose of this article we are not looking into UX design. If you want to get started with UX design, it requires a different set of skills. A different set of strategies. So, it’s very important to break them down individually. You will be able to understand exactly what you need to do to get your journey started in UI Design this year. This will help you put your energy in the right place as it can be very confusing in the beginning as to where to get started.

An Overview

Let’s take an example when you do UX Design, it’s mostly about the strategy and logic and how users behave, what they experience on the app or website. However, if you look at UI Design – it is about visual communication. What do things look like? What are the colors? The layout, and the fonts used? Now this right here is a very general way of saying what is UI and UX design concerned with. So let’s take a little deeper look into UI design for apps, websites and landing pages, and wearable.

What is UI Design?

UI stands for User Interface. So whenever you look at any app or website or any kind of digital product that you interact with a lot of things for example buttons and texts that you read, the sliders that you swipe, the fields you fill in with your name, or information. Interaction also includes consuming information for example reading the text written on the website or consuming the images on an app like Instagram or watching a video on Youtube or TikTok.

Now that we know what UI design is, we need to understand that it’s basically Visual Design. The reason we say that is because UI design is concerned with how things look and the visual design on things. A lot of the times you’ll see jobs that don’t say that they are looking for a UI Designer but they might be looking for a visual designer instead. A visual designer who will be working on digital products. That just means they are looking for a UI Designer.

Preparing yourself for the journey

There’s a lot of things that you need to consider when you start preparing yourself as a UI Designer. If you’re coming from a background in design, you’ll find it much easier because the foundation would have already been laid out for you. You might not struggle as much with which colors, fonts to choose and how to design the layout. Having said that, it doesn’t that if you don’t have any design background you will struggle alot. If you have keen interest in UI Design and want to get started, that’s all that you need at this moment. Any kind of skill takes a lot of time. I’ve a 10,000 hour rule. That means that you need to put 10,000 hours into anything that you do to be good at it. It may sound like too much work at the beginning but if you treat it as your full time job, you’re working on it 8 hours a day. That’s almost 3 years of work. It’ll take about 3 years to be an expert. Don’t let that make you afraid. Always remember that the master has failed more times than the student has even tried.

Setting up measurable goals

It’s very important to know what you are aiming for. you might just end up practicing and looking at other people’s design and then you feel that you haven’t created enough for you don’t know how to get there or how to be as good as other designers that you find on dribble or behance or some other kind of website. for that we need to know what you need to deliver before we even get started with how to get it done.

As a UI designer you need a basic foundation of color typography layout responsive design and some basics of UI design in general a bathroom that you also need to have a portfolio and a certain set of projects that you’ve already done. So let’s take a look at the skills set that you need.

Skill Sets

If you’re interested then you might want to check out an article that I wrote about 7 skills that every UI designer needs.

Color Theory

Understanding color theory is very important. it will help you decide what kind of colors do you use for your for your UI design and also why you choose them. in a typical situation you might want to use the colors of the brand to reflect in your designs of a website or an app. however, sometimes you might have the opportunity to actually go ahead and break all the rules and choose your own colors that might be most suitable for the industry your client is trying to crush.

Within color theory you want to learn how to mix colors how you choose colors and how to build contrast between the different elements of your designs. in 2019 a lot of the apps that came out and websites had the option of dark mode or a lot of the websites or apps coming out now or do you have about theme installed so you wanted to look at the certain kind of rules that you need to consider while designing a dark mode or dark theme for your app or website. the rules are slightly different for both situations where you have a light or dark theme and if you like to know more on how to design dark themes for your Apple website you can check out the article that I wrote recently on UeyeDesign.

Typography

Once you figured out what colors to choose you need good look at the fonts that you’re going to use. if you’re not sure about what is the difference between a typeface and a font you might want to check out the guy that I recently wrote about typefaces for UI designers. there’s some basic rules like you should always keep a weight when you’re using any type of phone do I have enough contrast and distinction to create clear hierarchy. your headings your body texture subheadings and your captions everything comes together in harmony if you use one phone or maybe next time to two phones if you use more than two phones are you going to run into a lot of issues where everything looks like a Frankenstein version of several apps. when you’re designing websites you need to be careful about web phones because they are suitable fonts that are usually found on Google’s website google.com/fonts and you can find everything that you need and they’re faster to load. These fonts have been optimized for the use on digital devices and for text heavy apps and websites.

it’s always good to start learning about typography from the very basics for example you need to know what is kerning letting paragraph spacing how big the font size should be. these kind of questions will help you get started and make the right decisions for your app or website design. typography is such a technical and satellite that if you don’t do it well everyone’s going to notice it but I only if you do it really well no one notices it.

Layouts

Needless to say layouts for websites and apps are going to be completely different because mobile experience is vastly different in terms of the scale and also the orientation of the screen for the user. okay so you’re staring at an empty screen of white canvas on Adobe XD sketch figma whatever you like to use and you have no idea how to get started so what you are going to do is setting up a layout for your design. you have a variety of different styles or types of phones that you would like to use I usually try to stick to bootstrap layouts because those grades are pretty simple that divided in sections of 12680 and 4 depending on what device to use it makes it super easy to actually create responsive designs we shall both good for phones and computer screens. if you’re doing a web design project or if you’re trying to make any kind of a landing page or a full-blown community website or an e-commerce website you want to try to look at mobile first design even though your client may be doesn’t see the need to make designs that are more suitable for the mobile experienced a lot more users are turning T-Mobile devices to browse the internet rather than their computer. Having said that there are a few kinds of websites that might not need a mobile-friendly view for example dashboard for your office or Intranet that you have set up for communication with in the office. As typically most of your users will be only looking at this website from the office desktop or laptops while they’re at work. at first choosing a layout or creating a composition on your page can be very daunting but if you’ve done any kind of research before it would be much easier for you to decide usually the layout or design by a ux designer in the form of wire frames that are then passed on to you as a UI designer to work on and make it look beautiful with the different elements that you’ve created. for a small business or a small company it is very hard for them to separate UI designer in ux designer in the teens let alone individual UI and ux designers so for most cases you guys in the beginning we will have to do both of our friends and the actual UI design off the product.

Tools of the Trade

There’s a bunch of tools out there for you to choose from when you’re starting to make any kind of you I designed some of them are very very expensive and production level while others are completely free and still super reliable. Which is the most popular tool for UI Designers? I’ve been using sketch for over two years since I first became a UI ux designer and although I love it but one of the things that I found is kind of limiting since it’s only available on Mac OS and seems like sketch developers are not really Keen to produce it for windows at all in the near future. why there comes with a huge performance capabilities for prototyping very complex projects how to manage different versions of your app or website design getting feedback and handing over your designs through the developer so they can code it faster through a tool called Zeppelin. basically Zeppelin lets you upload all of your designs from any of the major programs including photoshop on to their servers into project where the developer can basically just click on each element and they can get the code for CSS or they can get the iTunes or images at any scale or SVG and PNG formats.

that being said let’s take a look at other programs that are very very popular with you I use designers across the globe and not just limited to macos or in this case any OS. Let’s begin with the new software that I’m recently began switching to. Figma! It’s absolutely free and there’s no subscription or one-time fee nothing it starts right of the box it’s completely free it’s not based for any OS although you can download the application for Mac OS or Windows it is actually a web-based tool that you can use to design for projects. the designers recently have been debating why they want to switch from sketch to figma and I’m on the hype-train I realize that I have to also now that I’m changing jobs the new team that I’m going to delete it using sigma to do all day design work why the previous thing that I was working with most of the people owned Macbooks so we were using sketch to build a robust apps. Figma first caught my attention when I realized that you were has been using figma to build the app not over is very very huge where I am although you to reason stupid things over have to be at Mom but it’s an amazing app it’s so robustly can do so many things and it’s an overall complete app. there are some limitations on her toes that I’m facing with figment compared to sketch in terms of not having my files off lines of an I work with a client they really want to see if they want to own a fire that they can all because everything is on the web and also another issue is that if you’re not online is very hard to work on your files locally. however if you’re working in a group project in a lot of people are working on the same fire or the same app or website or any kind of design if you have multiple designers in the same team big mod really takes advantage of you and your team exchanging call men’s giving feedback and making adjustments on the fly simultaneously.

then comes the third biggest player which is Adobe XD is really really doing well also because it’s free but because most people are familiar with Photoshop and would like to make that switch and stay within the Adobe family. if you’ve had any kind of design background before you might have been using Photoshop Adobe illustrator InDesign or any of those other softwares from the creative cloud family so this switch Adobe XD was pretty seamless in the beginning of obxd didn’t stand up to sketch for the 4th of the years but recently Adobe XD has become super popular for people to make precise because of the oto anime feature which I would dive into later. Adobe XD just like finger is also free you can make comments and people can work on the project at the same time however that is kind of limited you can simultaneously work on the same files as of writing this article.

so which is it true that is right for you if you’re just getting started and you’re not very sure and you wouldn’t try it out I would suggest that you go with either figma or adobe XD download one of the templates on UI design and then you can get started with editing them and get a few of the tools and its capabilities.

Each and every individual through or software that you use all those limits or creates the opportunity for you to create something. it is merely an extension of your mind and your thought process so whatever ideas are in your mind are going to be executed through that tool. For example, just because you have a better pencil doesn’t mean that you become better at drawing.

if you would like you can get a side by side comparison of all the design tools for UI ux designers on DopeUX.

Practicing

now that you know what are the basic design thinking and skills you need to get started as a UI designer and the kind of tools that you need to actually execute them now comes the most important part and that is practicing. UI design or any kind of creative field is requires you to be creative but it is still a skill so you need to practice a lot to improve your skill and how you can do that is actually to go 200 days of UI on you I don’t count and you can sign up do our newsletter so you can receive one real life design brief every day for the next 30 days into your inbox via email. he’s a great way to get started in to have real life projects or briefs from clients to actually be able to create your designs everyday. The reason why I created that challenge for all you are designers is because it’s beginner friendly and I feel like sometimes when you don’t have any ideas for the kind of project that you want to build that really helps you out to just get something done everyday. Going back to the 10,000 hour rule you need to put at least 10,000 hours hope your mind and your labor into any new kind of skill that you’re trying to develop. this challenge is completely free and it’s a separate newsletter so that does not include that you will get some kind of articles you will get a link through helpful videos for each kind of skill that you will learn to not only do you do that channel but you get a support video every day for the next 30 days to complete a challenge and learn along the way.

Finding Inspiration

when you have any kind of project app or website in mine maybe you got a real client that’s trying to ask you if you can build a website or an app for them in that situation you need to get started with finding inspiration for your design. the original brand identity for that company will highly govern how you going to choose the colors of the phone on the type of imagery because you want to stick to the original brand as much as possible. however a lot of the times because we all consume the same kind of content it is quite easy to come up with something that everyone has already seen before and innovation becomes harder. Do solved that what you want to do is have a lot of sources of inspiration so you have like a nice pool of evenly distributed content so it’s not just coming from one designer or one source or one website is coming from across the internet. why you search for inspiration you will notice a lot of trans in UI design 2019 was mostly about flat illustrations large illustrations and character and people shown on the website or an app. By the end of 2019, we started to see a lot of semi flat and neumorphic that designers are now debating if it’s going to be the trend of 20/20 or not and I guess it will be but only for UI designers not really for products. I mean by that is designers I always find a bush and Bill the trains the trains do not come from consumer companies but they actually come from designers who influenced each other so if you’re part of UI Ux design community on dribble, behance, Pinterest or Facebook groups you are almost always ahead of the curve you know what’s going on in the industry right now what are the trends that you are focusing on or building towards. at the end of the day you don’t want to be designing websites that look like they were built but they were designed back in 2012 while you’re learning to do design apps and websites in 2020.

here’s a list of websites or groups that I really enjoy the have a very active community where you can post your work and also get started with learning from other designers or getting inspired by others.

I also want to point out when you’re just starting out it’s totally okay to copy other designers work to learn. if your end goal is to learn from other designers design, them that’s a very good way to practice because you learned and noticed a lot of details why you try to recreate their apps or websites. however if you copy other designers work and try to portray it as your own original work then you might just get yourself into a lot of trouble and being a very small community you don’t want to lose your reputation trying to rip off other designers.

So what can you learn when you tried to copy other designers? if you go to dribbble.com now and you drive to copy one of the most popular posts for Apple product design or mobile or web pages landing page is any of those keywords you will be able to realize how these designers have created something that looks at how many the font that illustration the color palette everything looks like it belongs together. and you will notice a lot of small details like the phone size and the kind of phone that they’ve used or the negative space between different elements in the layout.

Sharing your Work

you can create and observe design as much as you want but that’s not going to help you if you haven’t created any thing and you haven’t got feedback from other people in this situation I found that Facebook groups extremely well. put together a bunch of Facebook groups that I’m a pot off and very active in and the amount of feedback that you can get these astonishing. It’s not just about getting the lights are the reactions but it is also about getting quality feedback from other people who are within the same industry. [Link to groups]. Whenever you create something try to put it on your block or create some kind of documentation online maybe your Instagram page or on Facebook group so you have a catalog of how you are working and what improvements you’ve made and learned along the way. Saying your work is equally important to creating it. and make sure that you don’t just post an image but rather I also describe your work what you’re trying to do and what you’re trying to achieve your work doesn’t speak for itself you have to speak for your work.

the idea is not to get upset by the feedback that you received but actually did they get as constructive criticism for you to improve more.

if you ever design something and you’d like me to comment on it or give you any kind of feedback you can reach out to me on Facebook.

Conclusion

so I hope that 2020 will be a great year for you to getting started into UI design I’m really excited to the community is getting bigger and you are showing interest in the same field that I worked in for several years. you want to start with educating yourself with the right kind of content you can either go on my YouTube channel and find videos for beginners that I will link here or you can read any of the articles online about visual design. I feel. You want to try out some of the tools most popular being sketch Adobe XD or figma and you want to find specific video tutorials on that or articles to get started. After playing around a little bit with the UI design tools you can actually do some research or sign up yourself for the 30 days of UI design challenge to begin designing and practicing. thought emphasizes enough there is no growth without practice in any kind of skill especially in design. once you have created something that you feel satisfied about or maybe you get stuck with something it is the right moment to actually share your work with the community so you can get some feedback or some opinion and just to have a catalog off how your design is improving all the time so you can look back and see what your first or second or 100th design looked like. 2020 is going to be an exciting year for all of us in the UI ux design community if you would like to learn about ux design then you can head over to DopeUX.com. feel free to write a comment on this blog post if you have any beginning questions or you don’t know just where to start or if you get stuck somewhere just feel free to ask I read every comment and I will reply to all of them. hope you have a great year!

Shopping Website Kit for Sketch and Photoshop