Why and how you can develop Design Sense? 👩🏽‍🎨
Tags: webdev, javascript, frontend, css
Published: 2021-02-02 09:28:29

---
title: Why and how you can develop Design Sense? 👩🏽‍🎨
published: true
description: Is being good in design is necessary to become a frontend developer? Let's explore in this post.
tags: webdev, javascript, frontend, css
canonical_url: https://community.codenewbie.org/sarthology/why-and-how-you-can-develop-design-sense-5g66
cover_image: https://community.codenewbie.org/remoteimages/i/443n5e9bjpjrcfym8h41.png
---

*This article is reposted here, originally posted on [Codenewbies](https://community.codenewbie.org/sarthology/why-and-how-you-can-develop-design-sense-5g66).* 
I first started coding 10 years ago in my college lab and it was magic. 9 years ago I got my first computer and 6 months after that I started my Freelance career as a CSS3 animator. Today, I'm the captain of a great team at *[Skynox Tech](https://skynox.tech)*. But at the core, I'm still a learner and creator.


## Why?
Though it's totally a choice if you don't want to but there are some particle reasons for it too.

#### The Frontend Confusion 😕 
![The spiderman representing Frontend Developer Confusion](https://media.giphy.com/media/l36kU80xPf0ojG0Erg/giphy.gif)

Every time we try to find a Frontend Developer for your team, it's hard. The reason behind that is because developers who are good with React they are generally rusty with CSS skills and Vice versa. So we end up post CSS Developer and React Developer post separately. To find someone good with both CSS skills and JavaScript skills is Rare and ***being rare is good***. 

🚀 ***Note:*** *There is a great article on this already on CSSTricks called* ***["The Great Divide"](https://css-tricks.com/the-great-divide/)*** *that you can read.* 
 
#### Boost Your Side Projects 🚀
Most of the side hustles are done alone. It's hard to find Partners in the beginning and it takes a lot of money to hire a UI/UX Expert. What I have learned from [launching 15 projects](https://www.producthunt.com/@sarthaksharma0/made) in a year on Product and getting 8 in top 5 is that Your design needs to be good. The chances of your projects to skyrockets increase if you do the design well and it's economical also. Of course, you can't beat a UI/UX Designer but trust me it will sell. 

#### It's kind of a necessity 🤷🏼‍♂️

The obvious workaround for some frontend developer is using frameworks like bootstrap and Bulma. But if you're not good with CSS it becomes hard to manage code. Also, there are certain areas of UX like A11y which is a necessity in certain countries. As a frontend developer, you should be aware of that.

So in the end, To be an All-Powerful frontend developer in a true sense having a Good Design Sense can be useful for your career. Now Let's dive into the How part of it.

## How? 
 
First of all, it takes time. Before getting into how to remember that you won't be an overnight design wizard. Like all the good things it takes time and constant effort to improve your Design Sense. So once you are committed the how section boils down to three main parts.

Observe → Analyze → Practice

### Observe 👀

![](https://media.giphy.com/media/SYABnw07wJsV7G8ju5/giphy.gif)

Observing things around is the best but the most confusing tip I can give. The question is observing what exactly? I would say everything. Everything that is popular among people or the masses find pretty at first glance. It can be a table, a restaurant menu, popular product on Producthunt, a tweet, yes a tweet too. There is always a reason people make something popular and most of the time it is designed. Your goal is to observe and analyze why. 

By doing so you are training your eyes to detect the trends.
Here are a few places to look for such inspiration.

 1. [Awwwards](https://www.awwwards.com/)
 2. [Dribbble](https://dribbble.com/)
 3. [Behance](https://www.behance.net/)
 4. [Designspiration](https://www.designspiration.com/)
 5. [Producthunt](https://producthunt.com/)

***🚀 Tips and Trick:***
1. You can use ***[Panda Extension](https://usepanda.com/)*** so that every time you open a new tab you will see trending designs.
![Screenshot 2021-01-24 at 2.12.34 PM](https://community.codenewbie.org/remoteimages/i/tce4ebys5heqzddjferi.png)

2. Collect Designs you like on ***Pinterest*** using their web extension.
![Screenshot 2021-01-24 at 2.18.26 PM](https://community.codenewbie.org/remoteimages/i/ziiqybl2hefvpm1wb80o.png)

3. Try ***[Muzli](https://muz.li/)*** extension, it's like Panda but more design-focused ![Screenshot 2021-01-24 at 2.27.05 PM](https://community.codenewbie.org/remoteimages/i/bsed8wzy5bc3tpv6pe8v.png)

4. Subscribe to these ***Newsletters*** to be inspired every day.

 - [Codrops](https://tympanus.net/codrops/)
 - [Designmodo](https://designmodo.com/)
 - [Sidebar](https://sidebar.io/)
 - [Invision](https://www.invisionapp.com/inside-design/)

### Analyze 🕵🏼‍♂️

Do you know "Design Thinking" is a subject in itself? Though you can't go to college now, by Analyzing what you have observed can definitely boost your creativity. it's basically reverse-engineering the content that you observe. Here some tips to keep in mind.

***🚀 Tips and Trick:***
1. Looks out for colours that are trending. Use tool like **[Site Palette](https://palette.site/)** to get pallets of any sites. 
2. Use a tool like **[What Font](https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en)** to find fonts combinations used in trending website.
3. Reading books can also help you analyse design better. Here are some books to consider  
  - [Steal like an artist](https://www.goodreads.com/book/show/13099738-steal-like-an-artist) 
  - [The Sprint](https://www.goodreads.com/book/show/25814544-sprint?from_search=true&from_srp=true&qid=ncdDOm0FRr&rank=1)
  - [100 Things Every Designer Needs to Know About People](https://www.goodreads.com/book/show/10778139-100-things-every-designer-needs-to-know-about-people)
  - [Lean UX: Applying Lean Principles to Improve User Experience](https://www.goodreads.com/book/show/13436116-lean-ux)
 4. Dive deep with this [Youtube Playlist](https://www.youtube.com/watch?v=aWf1LpUnYmU&list=PLpQQipWcxwt9U7qgyYkvNH3Mp8XHXCMmQ)

### Practice 👩🏻‍💻

This was obviously coming, right? Perfection always takes time and constant effort. Start with replicating the design by other designers (always give credits) and once you are able to do justice with there design go next step and design something of your own.

*Once you are confident with your design it's time to get feedback. Here are a few ways you get advice and critique:* 

***1. Post on Twitter and LinkedIn*** 
***2. Post on Codepen***
***3. Go to Subreddit like [design_critiques](https://www.reddit.com/r/design_critiques/)***
***4. Post it on Dev.to with [#showdev](https://dev.to/t/showdev)***
***5. Or you can always [tweet me](https://twitter.com/Sarthology)*** 😇

### Embrace 💞
This is the toughest part I guess. Once you develop design sense you have to live with it. That means 

- Making sure whatever work you put out there is your best.
- Appreciate good design and design habit.
- Do justice to UI/UX designer work while writing code.
- Teaching your teammates why it's important.

Passing on your knowledge to others is the best way to polish up your skills and it also helps you develop a good design culture which will help your company and in turn help you also.

***🎁 Bonus Content:***
- [7 Practical Tips for Cheating at Design](https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886)
- [Refactoring UI](https://refactoringui.com/)
- [Design Thinking – Adobe Live Event](https://www.youtube.com/watch?v=tsePToj6nw4)
- [Chris Coyier - The All-Powerful Front End Developer](https://www.youtube.com/watch?v=grSxHfGoaeg&feature=emb_logo)
- [Niice](https://niice.co/)
- [5 Interface Laws Every Software Designer Should Know](https://speakerdeck.com/roundedbygravity/5-interface-laws-every-software-designer-should-know?slide=5)
-[CollectUI](https://collectui.com/)

## Conclusion 
I hope you liked this article. Design thinking helped me a lot in my career and I'm sure it will help you as well. If you liked this article check my other articles on [XenoX](https://dev.to/sarthology) and [Medium](https://medium.com/@sarthology) and share with your friends and colleagues. You can also follow me on [Twitter](https://twitter.com/sarthology) to take part in chit chats 😉

Additionally, If you want to share some of your own tips hit the comment section below. Will see you next time see ya.

![](https://media.giphy.com/media/42D3CxaINsAFemFuId/giphy.gif)