Introduction to UI and UX design

Disclaimer: I have no formal training in UI and UX design and everything in this article is written by a self-taught designer with a couple years of experience and a ton of reading and watching videos of UI and UX design under his belt. If you do proceed to read the rest of this story, you might just pick up a thing or two that might help you as an amateur, or a new trick if you are a professional.

So you are a fan of good design. Your wall is plastered with avant-garde artwork and your desktop wallpaper is black with just the word “design.” in a serif font in white on it, reeking minimalism. You can’t wait to get your Dribbble invite to share your beautiful work with the world. But there’s just one thing holding you back-

You do not know where to begin.

If this sounds a lot like you, you’re in luck! Here’s a crash course in UI design, with details of the tools you should be using, common pitfalls you’d make and how to avoid them, and basics of UI design, including negative spaces, fonts, colors, and interaction design.

UI design falls at this cusp, where art and science meet. It is as much a science as it is an art, to understand how humans react to technology and design, and to use that knowledge to create a better product is a well researched branch of psychology and behavioral sceinces. Like for example, ever wondered why a delete button is always red?

The delete button in the iOS mail app

The color red wasn’t picked at random, it was deliberated over and through years of research into how humans react to certain colors, it was ascertained that red signifies danger to our species. That is the reason why red is used in traffic signals and on signboards (along with the fact that is the most visible color in foggy, rainy or otherwise poor visibility conditions).

Red used for the exact same reason here

Let’s begin with your tools

Now any artist needs his tools, and a UI designer is most definitely an artist at their core. The first, and most probably only tool you would need is a design toolkit. This needn’t be the most fancy software in the world. I started out designing interfaces in Apple’s Keynote software. This was software designed to make slideshows and presentations, but you can repurpose it to create interfaces in just a pinch.

Personal recommendation

But if that’s not up your alley, you should definitely give Sketch a shot. I cannot recommend this app enough, and it is my go to software to design interfaces, logos, icons and graphics now. If you are an Adobe PhotoShop or Illustrator wizard, go ahead and use that by all means! Use whatever tools you are most comfortable with. If you are looking for more animated interface design, you can give Facebook’s Framer and Origami software a shot. Be warned that both of them are more involved than regular design software but can give you more tactile results that are more alive.

Framer and Origami

Ok ron, I’ve got the software and made a new file, what now?

Great, you’re halfway there already! No seriously, getting your tools is half the work. The rest is just lots of trial and error. A lot of people I talk to thing that good design drops out of the sky, right into a designers laps, who then gives it off to the developers, ready to be implemented. This is never the case, and if it ever happens that way, it’s probably not the best design that could be implemented.

One-shot-wonders aside, most design is iterative. It is a lot of trial and error, trying out different design conventions, different fonts, layouts, colors and icons till you stumble upon one that seems to fit the project well. Be warned that just because a design is good, it needn’t necessarily ned to be the best. You might make a brilliant design, but when it comes to implementation, you will find out that it is unfeasible for some reason and you might have to scrap the idea and start from scratch at worst, or tweak the design till it works if you are lucky.

An example of iterative design for an app I worked on

Design changes over time too. A design that worked on 3.5" phones most definitely will not work on a 5.6" phone. And it definitely will not scale well to a 12.9" tablet. And let’s not even get started with 2" smartwatches and 55" smart TV’s. A lot of work goes into making sure your design looks great on all these screen designs, and every major company that makes operating systems have a design language for their class of devices. From Google’s Material design to Windows Fluent Design System and to Apple’s famous Human Interface Guidelines. And as a designer, you are to stick to certain paradigms.

Common mistake #1: You forget to design for the platform you are designing for. This was a very common mistake I used to make- trying to unify design for multiple platforms until it doesnt fit any platform. Like the different switches that iOS and Android uses. Or the different icon styles for iOS and Android.

Make sure you follow the design conventions for the platform you are designing for. Having a common custom design language for multiple platforms isn’t a bad thing. Just make sure it doesn’t confuse a user of a certain platform.

That is all very good, but what is this negative space? Is is the same as white space? And is white space just are that is white?

White space is the area around elements and is also called negative space. It is called negative space cause if you imagine design elements to have weight, white space is usually empty and have the feeling that its trying to pull elements together, hence having negative weight. It needn’t be white, but it should match the background of your design, whatever color or texture that maybe. This is also a place where a lot of amateur designers, including myself are seen making mistakes.

Common mistale #2: Not using enough whitespace. You might thing of using your space effeciently and cramming all your elements into as small a space as possible. But alays remember that whitespace is as important as the space taken by the elements themselves.

Give the elements in your design some space to breathe, and use the whitespace to break up your design into distinct areas that your eyes can discern without having to use lines or boxes to separate.

The difference proper whitespace can make

Got it! What about fonts? I love Comic Sans and can’t wait to use it for this banking software I’m designing! 😍

No. Please no. I’m not gonna make the blank statement that Comic Sans is a bad font. Granted, you will never catch me using it any design I make cause there are objectively better fonts than Comic Sans for whatever your use case. But its a simple, playful font that everyone can use since it comes embedded in almost every Operating System that exists. (Don’t use this as a reason to use it in every project you ever work on though)

Notice the seriffed font in this logo of a bank

Every font has a specific use case. Like a banking app for example, you would never use Comic Sans for it. You would rather go with a seriffed font like Times New Roman, since it looks more regal and has an all around grown up, antique and stable vibe to it, attributes that would work well with a banking app.

But for most general purpose apps, it’s a safe bet to use a sans-serif font. Most operating systems also have a preferred font that is to be used. This could be Roboto and Open Sans on Android and Chrome OS, Segoe UI on Windows, and San Francisco on macOS, iOS, tvOS and watchOS. These are your best bets when designing for these platforms. Also remember that fonts come in a number of weights that tell you how bold or light a font is. The higher a font weight, the more bold it is and the lower the font weight, the thinner and sleeker the font.

An example of different font weights

You should know how to use different font weights in different parts of the app for different emphasis. For example, a button would be best designed using a heavy font weight while a title could use a larger font size with a lighter font weight. Also remember to use character styles like italics, underlines and strikethroughs to convey more information through your design.

Great, I downloaded every font that ever existed and I am raring to go, just one doubt remains, what color do I use for the background?

Color is one of the most important parts of deisgn. Like I pointed out earlier, color plays a huge role in human society, the way we humans perceive colors and our cultural biases towards certain colors go a long way into influencing the way designers use colors to convey information.

For example, the color purple shows royalty and power. This came to be because purple has historically been a very hard color to obtain in nature. And so coloring garments purple was a luxury only the royalty could afford. And this has become so ingrained in our culture that purple is always used to signify power and royalty. This has faded in recent times because color displays can show off any color in a rainbow without any effort at all.

Another famous example is the color blue. If you notice well enough, you will notice a common trend in the logos of a lot of social networks.

Notice how the majority of them are blue? Not a coincidence

This is because blue comes off to humans as friendly, social and inviting. So designers hae hijacked this subconcious part of our brains to make their logos an inviting as possible.

Black shows off power and stability, and that’s why a lot of banking apps and software are black or have blacks accents. It is the same reason why the most exclusive and premium credit cards are black.

Black credit cards show off exclusivity

I think you have told me everything now. Before I go, I just wanted to ask you what is it that I design as a beginner?

Anything and everything! Yeah, thats it. The only way you can get good at design is by trying out a lot of things, failing, and figuring out why you failed. Don’t go ahead and start designing a production app as your first project. Your first design is going to be horrible, you just have to learn to accept that and move on. I can barely look at designs I created a couple years back and not question my sanity. So just make a lot of designs, fail, move on and rememebr to learn from the process. If you never learn what you did wrong, you will never improve.

One of my earliest design excercises was to take an existing design, of an app or a website for example and to take it apart, try to recreate it, and in certain cases to make it better. This included the Siri interface, the CBSE website, Wikipedia and many others. I would also come up with interfaces for an Operating System, an App store, a personal assistant and so on. It doesn’t matter if these designs are unfeasible or not practically implementable. All it matters is that you train your design muscles and stretch your creativity and get familiar with the tools that you are using.

An example of a website redesign project

Watch a lot of videos about UI and UX design. Read design documentation and case studies from professionals. Good examples are Apples Human Interface Guidelines, Google’s Material Design documentation, Ueno’s case studies, Airbnb and Uber’s case studies. By reading case studies from seasoned designers, you will see their inspiration for certain projects and why they made certain design decisions.

Also don’t forget to go through Dribbble, Behance and Pinterest for inspiration. You can see great design from professionals and you can use the designs of similar projects as inspiration for your own. It also keeps you upto date on design trends and whats new and trending in the world of design as well as libraries and code for their implementation.

This was just the beginning in what I think will be a small series on UI and UX design with a couple more to come that will take you into design thinking and how iterative design works. Meanwhile if you enjoyed this piece, you can check out the case studies I have done for some apps I have created here on Medium. Cheers!