5 UI Tips to Become a Better Front End Developer
Tags: webdev, ui, ux, webdesign
Published: 2021-07-25 05:43:29

Often while starting out, beginners struggle to create _captivating_ **UI** that gets users hooked to their applications. Today we are going to fix just that. 

But before starting I would like to point out that there is no **One Right Answer** to Designing, anything that looks pleasing to the eye of a large majority of the people is considered _good design_. In this article, we would go over 5 Tips that are considered _Good Design Practices_.

# 1. Maintain Consistent Alignment

A lot of sites follow _Inconsistent Alignment_, with different alignments for the _Navbar_ and the _Main Content_ of the site. This leads the websites to look something like this:

![Alignment Issue](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/brj26gmvhhh9k0vuxywx.PNG)

The example below looks much more structured:

![Alignment Fix](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/maak0kguwy4j4yofaj3s.PNG)

# 2. Space Out Your Content

![Spacing Issue](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0e6keqxr8zrnbs2q90vk.PNG)

![Spacing Fix](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lwn14a58fy7th26rue27.PNG)

This is one of the things you develop an eye for by default, as you gain more experience in developing more websites. As you can see here, the one with more spaced-out content looks much more professional. 

**NOTE:** More spacing isn't always what is required, for example, you can get away with little spacing between the _Title_ and _Date_ in the case of a Blog website. 

Something that goes hand-in-hand with the previous point, maintain consistent spacing: the _padding/margin_ in the left & right sides should be equal, same is the case for the _padding/margin_ in the top & bottom.

# 3. Color and Contrast

Color is an inherent part of design and is simply the most important thing to keep in mind while developing a modern **UI**, without proper Color & Contrast, even the websites with the best **UI** end up looking like crap. You can see the significant improvement in the picture below, just by changing the colors:

![Color Issue](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/130grpl85ak7ddem42jz.PNG)

![Color Fix](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7serm7wplr2nih18715y.PNG)

You can use Tools like [Coolors](https://coolors.co/6e2594-ecd444-808080-000000-ffffff) to generate colors that go well with each other. It's a good idea to limit the _number of colors_ you use to **Two** (you can very well use different _hues_ of the same colors and some generic colors like _white_, _black_ & _grey_).

For **Web Accessibility**, **WCAG 2.0 level AA** requires a contrast ratio of at least **4.5:1** for normal text and **3:1** for large text. **WCAG 2.1** requires a contrast ratio of at least **3:1** for graphics and user interface components (such as form input borders). **WCAG Level AAA** requires a contrast ratio of at least **7:1** for normal text and **4.5:1** for large text.

To check your Website's **Accessibility**, you can use tools like **Lighthouse** (from **Chrome Dev Tools**) and [Wave](https://wave.webaim.org/).

# 4. Typography

You can easily get away with using only one **Font Family** for your entire website. At most you should try to keep the **Font Families** limited to **Two** as using multiple **fonts** can easily overwhelm the user and even make the website look unstructured and unprofessional.

![Typography Issue](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ubevxxbtkftdasb1fc0n.PNG)

![Typography Fix](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t5bzcw2tvxrwu32jl0jb.PNG)

# 5. Visual Hierarchy

**Visual Hierarchy** is also one of the most crucial components of an amazing **UI**. There is a great quote by a _Great Developer_ (read: By Me 😜):

> A great developer is someone who makes implied actions evident

**Visual Hierarchy** is used to highlight certain parts of the Website which you want the users to focus on. You can employ several tactics for making users focus on a part of the site.

**No Focus**

![No Focus](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t7ewpawl3x88nt0by6u0.png)

**Focus using Contrast**

![Focus using Contrast](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1l8q3zgmt0xy6vqmae3t.png)

**Focus using Color**

![Focus using Color](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pmb3m84r0ctm9e3kt75a.png)

**Focus using Scale**

![Focus using Scale](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wky5cy2jlokf1vxvo7w0.png)

**Focus using Contrast, Color & Scale**

![Focus using Contrast, Color & Scale](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3hcaq2u9bdmcxdx3bdlt.png)

**Visual Hierarchy** provides information to the users where they should look at

![Visual Hierarchy Issue](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y0mkh6f49887msf28kd6.PNG)

In this example, it's not evident in one glance where we should focus our attention on. This can easily be improved by making some minor changes:

![Visual Hierarchy Fix](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fad4wub4bhkqp9bxcar2.PNG)

# Conclusion

In this article, we went through some **UI** concepts that help you develop a more attractive **UI**. I would like to remind you **UI** design is quite subjective and as stated in the _Intro_, there is no **ONE** correct answer. Hope you will employ these concepts in your applications and make awe-inspiring websites :)

Finding **personal finance** too intimidating? Checkout my **Instagram** to become a [**Dollar Ninja**](https://www.instagram.com/the.dollar.ninja/)

# Thanks for reading

Want to work together? Contact me on [Upwork](https://www.upwork.com/o/profiles/users/~01c12e516ee1d35044/)

Want to see what I am working on? Check out my [GitHub](https://github.com/ruppysuppy)

I am a freelancer who will start off as a Digital Nomad in mid-2022. Want to catch the journey? Follow me on [Instagram](https://www.instagram.com/tapajyotib/)

Follow my blogs for weekly new tidbits on [Dev](https://dev.to/ruppysuppy)

**FAQ**

For the past few weeks, I had a lot of people reach out to me asking these questions hundreds of times, so I decided to add a dedicated **FAQ** section for them

1. **I am a beginner, how should I learn Front-End Web Dev?**
    First get the fundamentals of **HTML**, **CSS**, **JS** down; Learn any _front-end framework/library_ (**React**, **Vue**, **Angular**); Then keep making **Projects** or make **Open Source Contributions** to attain mastery.

    **Relevant Article Links**
        1. [Front End Project Ideas](https://dev.to/ruppysuppy/5-projects-to-master-front-end-development-57p)
        2. [Get Started With Open Source](https://dev.to/ruppysuppy/zero-to-hero-get-started-with-open-source-10b7)

2. **Would you mentor me?**
    Sorry, I already am under a lot of workload and would not have the time to mentor anyone.

**Connect to me on**

-   [LinkedIn](https://www.linkedin.com/in/tapajyoti-bose/)
-   [Portfolio](https://tapajyoti-bose.vercel.app)
-   [Upwork](https://www.upwork.com/o/profiles/users/~01c12e516ee1d35044/)
-   [GitHub](https://github.com/ruppysuppy)
-   [Instagram](https://www.instagram.com/tapajyotib/)