Be a Better UI/UX Designer in 2021
Tags: ux, design
Published: 2021-01-12 16:39:20

Hey, designers out there! I'm Saptarshi (a bit hard to pronounce, I know), today I'm gonna help with some effective tips & tricks on how to be a **Better UI/UX Designer** by the end of 2020 (probably you already are).

If you ever did sit with your paper and pen or might be a laptop and tried to design some cool stuff, yeah you can proudly call yourself a designer, but here we're to know that how we can be a **_better_** designer, and stand out of the crowd. So, Let's hop into the cool stuff & I'll try to keep it as short and sweet as I can, so as to not obfuscate.

## Get Into Some Research ...

A UI designer has to surf over a tonne of ideas and quirks, it's totally okay for one to not know about all the things that a client wants or your next project needs. And fortunately, we've been gifted Google by Larry and Sergey to handle such problems (some can use bing too ... ).

Let's say you've got a client for a million-dollar deal who wants a clean website to be designed for his new Coffee shop, and unfortunately, you never knew what really a Coffee is, so at this point, you ought to try out Coffee and explore about what the stuff actually is and gradually start exploring about other coffee shops and begin taking inspirations from the popular ones .... wait we'll come to **inspirations** ahead.

<img src="https://www.mollysbooknook.com/wp-content/uploads/2016/04/research-gif.gif">

**Note** : you're not told to make coffee but to make a clean website for a Cafe (so do your research accordingly or it might end up turning up yourself into a _barista_).

## Time For Some Inspiration ...

**inspiration** (_/ɪnspɪˈreɪʃ(ə)n/_): a stimulation for designers to design killer UIs.

(... continued) So, you've got quite a lot of cool **inspirations** while you're researching about our good ol' Coffee.

<img src="https://media.giphy.com/media/4cUCFvwICarHq/giphy.gif">

**Haven't you got enough ideas?**

#### Here's some cool resources that can get you boundless inspirations

- ### [Dribble](https://dribbble.com/)
<img src="https://cdn.dribbble.com/uploads/9254/original/75295792f94f69858e1708053300087b.png?1585776057">
Dribbble is a self-promotion and social networking platform for digital designers and creatives. It serves as a design portfolio platform, jobs, and recruiting site and is one of the largest platforms for designers to share their work online. The company is fully remote with no headquarters.<br/><br/>

- ### [Behance](https://www.behance.net/)
<img src="https://miro.medium.com/max/3000/1*6iALSGra7LcOP5tNykbtig.jpeg">
Behance is a social media platform owned by Adobe which claims "to showcase and discover creative work".<br/><br/>

- ### [Mobbin](https://mobbin.design/)
<img src="https://s3.eu-central-1.amazonaws.com/tophuntfolio/uploads/images/small/181120.png">
Mobbin is a hand-picked collection of the latest mobile design patterns from apps that reflect the best in design. Get inspiration from over 250 iOS apps and 25,000 patterns (screenshots from iPhone 12) available on the platform. Sign up to save your favorite patterns.<br/><br/>
Don't worry if you didn't find these much helpful to you, there's a lot more similar on the internet, these were just my biases.

## Let's Get Started With The Right Tools In Hand

(... continued) The client's been calling up you for the mock designs, now you should get off all your ideas on a sketch board using the right tools! (don't bother much about the client, take your time to do stuff.)

<img src="https://media.giphy.com/media/yhcqymRLlv7K8/giphy.gif">

I'd be carrying out the blog with **Figma** throughout, but you can choose as your wish.

Here're some of the popular design tools out in the market which you can choose from.

- ### [Figma](https://www.figma.com/)
<img src="https://i.pinimg.com/originals/9d/8a/ff/9d8aff3fa9b7194400be2bcd101d0c25.png">
Figma is a vector graphics editor and prototyping tool which is primarily web-based, with additional offline features enabled by desktop applications for macOS and Windows. The Figma Mirror companion apps for Android and iOS allow viewing Figma prototypes on mobile devices.<br/><br/>

- ### [Adobe XD](https://www.adobe.com/products/xd.html?sdid=12B9F15S&mv=Search&ef_id=CjwKCAiA57D_BRAZEiwAZcfCxY1CydgSCObe2pM_DURffXpGgpKCOg2u4vnFrmXc65lSX077p1iSmBoCn8wQAvD_BwE:G:s&s_kwcid=AL!3085!3!394015010050!e!!g!!adobe%20xd!1641846448!65452677551)
<img src="https://cdn.vox-cdn.com/thumbor/1e0WhpZRO0vWaX5fb8G8jo_MJJY=/0x0:3360x2100/1200x800/filters:focal(1412x782:1948x1318)/cdn.vox-cdn.com/uploads/chorus_image/image/65619994/Coediting.0.png">
Adobe XD is a vector-based user experience design tool for web apps and mobile apps, developed and published by Adobe Inc. It is available for macOS and Windows, although there are versions for iOS and Android to help preview the result of work directly on mobile devices.<br/><br/>

- ### [Sketch](https://www.sketch.com/)
<img src="https://miro.medium.com/max/7680/1*8LZO5BfDELOfsK0NarlIuA@2x.png">
Sketch is a vector graphics editor for macOS developed by the Dutch company Sketch B.V. It was first released on 7 September 2010 and won an Apple Design Award in 2012. It is primarily used for user interface and user experience design of websites and mobile apps and does not include print design features.

## Let's Weld Our Idea Into A Brand!

<img src="https://canwehaveapooldad.files.wordpress.com/2016/06/03-17b-homerwelds.gif">

Now what's **branding**?<br/>
**branding**: a way of making our product stand out in the market (fame!)

But branding is not always exactly that, here our product is **Coffee** or you can say a **Cafe**. The first instance we hear about coffee our brain starts assuming something comfy, hot, brownish, or even something more with the deep imaginers. This would be our customers' ideology when they hear about a Cafe! And this is our only tool(spell) to woo millions of customers. It creates recognition.

A Branding Chronology is ought to have these in it ...

- Brand guidelines
- Personality
- Name
- Colour
- Logo

Thereby, some of the best colours suiting our brand will be ... <br/><br/>
<img src="https://saptarshi.herokuapp.com/color_codes_1x.png" >

I'll leave out the Name, and Logo to you guys! hope you do well.

## Let's Do Some Real Designing Now!

I believe designers reading this must have some basic knowledge about UI/UX already, so in my words to keep it short and sweet I'll continue with some of the **Golden Rules** you should follow while designing rather than making you do the whole design.

### 1. Negative Spacing

It's simply the **areas on your design that aren't taken up by actual design assets**. It can be used to separate sections of your design, define certain areas, and also allow your design to have **room to breathe**.

<img src="https://saptarshi.herokuapp.com/negsp2.png">

(... continued)The client's been wanting to show up some of the products of his Cafe in form of a card on the website, let's see how we can make good use of Negative Spacing here.

<img src="https://saptarshi.herokuapp.com/negsp1.png">

### 2. Proximity

Proximity suggests that the design elements are **linked in some way or have a relationship** should be **grouped together**. Aspects of your design that do not have a link or a relationship should not be linked together.

<img src="https://saptarshi.herokuapp.com/proximity.png">

### 3. Repetition

It helps the design have a more continuous theme or look and feel. Repetition can be seen in things like the color scheme used throughout your design or the use of similar shapes and graphics.
<img src="https://saptarshi.herokuapp.com/repetiton.png">

### 4. Contrast

Contrast simply refers to two design elements or aspects that are different in appearance in nature. Contrast is very useful for creating a focal point and giving objects greater visual weight and balancing the image.
<img src="https://saptarshi.herokuapp.com/contrast.png">
Size, weight, and color can bring in contrast and change how the user views your design.

### 5. Alignment

The penultimate golden rule for layout design. We should always be mindful of alignment if it's for texts or design elements. In general, you should always look to align your work professionally.
<img src="https://saptarshi.herokuapp.com/alignment.png">

### 6. Hierarchy
In design, hierarchy is used to help a viewer navigate and digest information easily. It influences the order in which the human eye perceives what it sees. It helps the user navigate with ease by reducing confusion.

(... continued)The client's now making you mad for the website he wants for his Cafe, he says it be catchy and communicative with the user.

Here's a simple mock up for that ...

<img src="https://saptarshi.herokuapp.com/web_mock_up2.png">

(hope the client doesn't reads the "lorem ipsum ...")

Now, Let's see how we achieved hierarchy with the mock

<img src="https://saptarshi.herokuapp.com/web_mock_up1.png">

It's the predicted eye movement for the user.

#### How to achieve Hierarchy?

* Create a focal point from where the journey starts.

* People read bigger items first. So using size and weight will help.

* Brighter/Stronger colors tend to catch one's eyes before items in fader shades.

## The Final Design Hack

The most efficient trick to make your design stand out is to ... **Follow Trends**
Following trends is similar to listening to a million clients at once (who are not fluctuating, and the cool ones). It gives you the recognition of being *Modern* and proves that you're still on the flow!

Some of the **Hot Trends** currently in the market are

* ### Glassmorphism
<img src="https://miro.medium.com/max/1200/1*NzUy0je3bFL47qAOy8JY9Q.jpeg">Image by [UX Collective](https://uxdesign.cc/glassmorphism-in-user-interfaces-1f39bb1308c9)

The trendiest **frosted glass** UI is spreading crazily in 2020 and probably would make a great leap in designs in upcoming years and 2021.

* ### Neomorphism
<img src="https://caphe.sfo2.cdn.digitaloceanspaces.com/assets/images/neomorphism-guide-for-figma-thumb.jpg">Image by [UI Store Design](https://www.uistore.design/categories/ui-kits/page/5/)

Neomorphism (aka _neumorphism_) is a relatively new design trend and a term that's gotten a good amount of buzz lately. It's aesthetic is marked by minimal and real-looking UI that's sort of a new take on skeuomorphism.

* ### Materialism
<img src="https://www.sketchappsources.com/resources/source-image/material-design-ui-kit-csform.png">Image by [Sketch App Sources](https://www.sketchappsources.com/free-source/2758-material-design-ui-kit-sketch-freebie-resource.html)

Materialism is another old yet great trend still followed by the big IT industries such as **Google** & **Microsoft**.

## Wrapping Up

Thanks to everyone for being with me throughout this article, Hope now you're ready to jump into 2021 with a better designer you. And what you waiting for? our "Cafe" client is calling up, let's complete it fast!

I believe this article helped you even if it's an inch, then do give **reactions**, don't forget to give **feedbacks** and forgive me if I meant anything wrong in this article, you are free to correct me. **Share** it with your friends if you'd like to.

Lots of Love,<br/>
Saptarshi.


#### Find Me Around The Web

* [Github](https://github.com/saptarshibasu15)

* [Discord](https://discord.gg/GBsee8knHz)

* [Twitter](https://twitter.com/saptarshibasu_)

## Wishing Y'all A Merry Christmas & A Happy New Year, Happy Hacking! 🎄✌
<img src="https://media.giphy.com/media/ZW7GZxa37cuZi/giphy.gif">