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 π
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.
π Tips and Trick:
You can use Panda Extension so that every time you open a new tab you will see trending designs.
Collect Designs you like on Pinterest using their web extension.
Try Muzli extension, it's like Panda but more design-focused
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:
- Looks out for colours that are trending. Use tool like Site Palette to get pallets of any sites.
- Use a tool like What Font to find fonts combinations used in trending website.
- 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:
- 7 Practical Tips for Cheating at Design
- Refactoring UI
- Design Thinking β Adobe Live Event
- Chris Coyier - The All-Powerful Front End Developer
- Niice
- 5 Interface Laws Every Software Designer Should Know -CollectUI
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)
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
Thanks, Jacob π
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.
Thanks Monikaβ¨β¨
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
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!
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 !
Thanks a lot Juan.
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.
Thanks ππ»
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.