CodeNewbie Community 🌱

Cover image for Why and how you can develop Design Sense? πŸ‘©πŸ½β€πŸŽ¨
Sarthak Sharma πŸš€
Sarthak Sharma πŸš€

Posted on

Why and how you can develop Design Sense? πŸ‘©πŸ½β€πŸŽ¨

This article was first scheduled to be posted on dev.to but then I thought it will make more sense if I post it here. This will be my first post here so first I want to tell a bit about myself. I'm Sarthak πŸ‘‹πŸΌ. 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. 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

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" 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 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 πŸ‘€

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
  2. Dribbble
  3. Behance
  4. Designspiration
  5. Producthunt

πŸš€ Tips and Trick:

  1. You can use Panda Extension so that every time you open a new tab you will see trending designs.
    Screenshot 2021-01-24 at 2.12.34 PM

  2. Collect Designs you like on Pinterest using their web extension.
    Screenshot 2021-01-24 at 2.18.26 PM

  3. Try Muzli extension, it's like Panda but more design-focused Screenshot 2021-01-24 at 2.27.05 PM

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

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 to get pallets of any sites.
  2. Use a tool like What Font to find fonts combinations used in trending website.
  3. Reading books can also help you analyse design better. Here are some books to consider

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
4. Post it on Dev.to with #showdev
5. Or you can always tweet me πŸ˜‡

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:

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 dev.to,XenoX and Medium and share with your friends and colleagues.
If you want to share some of your own tips hit the comment section below. Will see you next time see ya.

Top comments (11)

Collapse
 
jacobkurien03 profile image
Jacob kurien

Well the thing that pulled me to read the article is how you presented it. The why before how gives it more exaggeration.
Being a backend developer, on my hardwork on becoming as of those legends who own their full stack develepor title creating or having a designing idea is a bit competitive for a person like me but after reading this it was like 'Chill dude you got it, even if you dont know those the worlds here to teach you' And thats whats the best in this one observe and analyze.
Truly that mean a lot and will practically involve it in mine

Collapse
 
sarthology profile image
Sarthak Sharma πŸš€

Thanks, Jacob πŸ™‚

Collapse
 
monika_roy1 profile image
Monika Roy

You see everything with a different lens when you do have that right designing sense. 😎🀟

It's a very neatly drafted article Sarthak, all the sections contain Tonnes of Valuable information. Really helpful to all the newbies.

Collapse
 
sarthology profile image
Sarthak Sharma πŸš€

Thanks Monika✨✨

Collapse
 
daisy71223 profile image
Daisy71223 • Edited

Thank you for asking how to develop a design sense like the one used for trending CapCut templates. Start by mastering design fundamentals like color theory, typography, and visual hierarchy. Study successful templates to see how creators use bold visuals, quick transitions, and syncing with music to engage viewers. Stay updated on trends by browsing social media platforms like TikTok and Instagram. Experiment with CapCut’s template library to create fresh, on-trend content. Regular practice and keeping an eye on trends will help you refine your design skills

Collapse
 
limbakenzo profile image
limbakenzo

Hello! I have been working as a web designer for four years and can safely recommend my findings! I found a site where there is a large number of thematic vectors such as this archery silhouette which came in handy for a new project that I did for the first time, my customers are satisfied and I recommend you!

Collapse
 
juanfrank77 profile image
Juan F Gonzalez

Design thinking helps a lot even if one is not a UX designer. Us front-end developers can benefit a lot from it and also everyone else that is taking part in development.
Great post @sarthology !

Collapse
 
sarthology profile image
Sarthak Sharma πŸš€

Thanks a lot Juan.

Collapse
 
manpreet_024 profile image
Manpreet virk

Design sense can only improve by being open and flexible enough to incorporate the changes suggested by important feedback.
Really liked the extensions mentioned by you.

Collapse
 
sarthology profile image
Sarthak Sharma πŸš€

Thanks πŸ™πŸ»

Collapse
 
crislanarafael profile image
Crislana Rafael

These are great resources! I've been interested in learning more about design and how to create better UIs. I like your point about observing and analyzing why some things are popular.