Design 101.5

So this was initially supposed to be a short write up for a friend, discussing how to get started at UI designs or generally becoming a better UI designer. But along the line, I remembered that I’ve also met several people prior to her, who asked me for tips on becoming a better designer. I’m not an awesome designer myself (I don’t even design much anymore, I have a teammate who helps out with that now :D ), but I started out my career as a graphic designer, so I was lucky to come across all these concepts before starting out and they really helped me out in my work, and so, I believe this will be a good starting point for anyone who wants to take on UI design or at least additional knowledge for those looking to improve on their design skills.

So long story short, this post, is supposed to serve as a go-to for extra tips on becoming a better designer. If you happened to know all these stuff already, then you’re awesome. If you didn’t, then this is your ticket to awesomeness ;).

I’m first going to talk about the fundamentals i.e basic components of every design. These components are what come together to make your design either a beautiful work of art, or something that’ll make little kids cry. After that I’ll talk about presentational tools i.e ways of presenting your work at each stage of your design. Then I talk about resources/assets that you’d use during design, and then finally, some inspirational sources, where you can get ideas for your next project.

Colors:
Colours are man’s best friend, Or worst enemy, if not used properly. Picking a palette for your design can be one of the most difficult tasks. If you’re lucky and a palette has already been chosen for you. Thats awesome, if you have to do that for yourself, then its not something to rush over, it requires time and dedication. Understanding what colour means and knowing the right colours to use to pass across the right message to the user, is really more of a User experience thing. If you do core UI designs, then i’ll advice you get someone to do this for you. Or, find an already made colour palette and make use of it. Colour theory is actually a really cool topic that everyone should know about, UX designer or not. Its knowledge that can never be useless.

Typography:
Typography is one thing that can turn your website from being a total disaster, to being a tourist attraction. Using the right font set for your website has several advantages ranging from reducing drop-offs to getting you the girl/guy of your dreams (far fetched, but still possible). There are basic typography rules that should be followed on every website such as: using serif fonts for sites with alot of reading content, or not using more than 3 fonts on a page etc. Of course, these rules can be broken, but only do that when you’re absolutely sure you know what you’re getting yourself into.

Mockups:
Mockups are really just your wireframes all fleshed up and brought to life. When designing mockups, you make decisions involving the colour palette, typography, icons/banners/images etc. These decisions made during your mockup designs should be packaged and made accessible at all times. They will serve as a standard that should be maintained in all the pages of the website. You dont want to have a website with different body copy fonts in all pages (well, if you can pull off a design like that without gouging your eyes out, then you dont need to be reading all these).
Here are some tools that’ll help in designing mockups.

Honorary Mentions: Sketch (Mac Only), InVision, Adobe Illustrator.

Prototypes:
If you’re a dedicated UI designer, prototyping is not something you must know about, you can actually survive without it. But, for those who dabble in UX every once in a while, you should definitely know about this. Prototypes are kind of a higher form of your mockups i.e bringing your mockups to life. Prototypes usually portray a walkthrough of your app/website. They could be animated (i.e automatically moving from screen to screen), or have active hotspots/buttons which change the screen when clicked. They are often mostly used to test the user experience derived from using the app/website, or to demo the product to interested parties.

Honorary Mentions: Microsoft Powerpoint (Lol)

Design workflow varies from designer to designer. Some designers move from wireframes -> code, some do wireframes -> mockups -> code (I do this), while some go through the whole process i.e sketches -> wireframes -> mockups -> prototypes -> code. The goal is to (if possible) try all work flows, find which one works for you, and stick to it.

Icons:
Except you absolutely have to, don’t waste time designing icons for your website/app. There are icon sets all over the internet that can suite whatever need you have. Only in extreme cases, that you should design your own icons. For instance where you can’t find an icon to depict a certain feature, or you need to create a set of custom icons for your app.

Image Assets:
Image assets used in design include stock images, banner images, image stubs etc. The size and resolution of these images is something you should be thoughtful of, as it can affect render time of your webpage page. Also be sure to check the license of whatever image you want to use on your webpage, so as not to get into trouble.

As a side note: Illustrations seem to be the new thing on the internet. Websites are throwing away their stock banner images, and replacing them with doodles/illustrations that follow the website theme and pass across whatever message them deem fit. Its something worth looking into.

Design Inspiration:
Its always good to see what other people have done, before doing your own stuff. You can use this a form of inspiration that’ll aid in your design, or get an idea or two from these websites. If you like the way a particular thing was represented in a website, feel free to try it out. Its not “copying”…its more like…err….okay its copying, but no one will crucify you for it, as long as you don’t just go in and copy the entire website. Whatever website you look at wasn’t designed by/for you, so it can’t fit your needs exactly, so ensure you make modifications to it, so that it fits your own design. And try to reference the source.
Note: Always check the license on an item you want to make use of. Whether its a design, or an icon, or an image, whatever. You do NOT want to get into copyright issues.

To summarise, design isn’t always about the knowing how to use the best design tools, but understanding fundamental principles of design, and knowing how to apply them to work in a way that will bring the required idea to life. So, instead of being a Jim Iyke (Nigerian Actor with a very strong face…if you know, you know) with the shotgun, you should aim to becoming the Chuck Norris with a shank. I know designers who can perform magic with Microsoft Paint. Yes. The same Microsoft Paint we all know and never use anymore, can be a weapon of mass destruction in the right hands. So yea, the tools don’t make the designer. YOU make the designer.

I hope reading this helped out somebody somewhere. If you have suggestions or comments, feel free to reach out. ✌

Related posts:

X1 Capital is a blockchain consultancy and investment partnership that believes that blockchain technology and cryptocurrencies will drastically change the way industries and markets operate on a…

This is another blog on our company values (from our 10 ATBs), a series underscoring a more modern look at value driven organizations. Story: Getting Sh*t Done/Getting Stuff Done. Urban Dictionary…

Countdown on this round is about to start! The highest is 29. Get your place before it’s done! Go!. “Countdown is about to start!” is published by HonorDice.