DEV Community

Cover image for Designing Tips & Tricks for Developers
Midha
Midha

Posted on • Edited on

Designing Tips & Tricks for Developers

Being a web developer is not an easy task. You have to learn many things from making APIs to managing databaseπŸ˜‘. In this world of full-stack developers where organizations want everything from one developer, you might think that for you code optimization and performance is a great success but if your webapp don't look good nobody will give you praise for your work that should be given to you.
SedLife
In this series, I will tell you some cool tricks and tools to decide layout, colors, typography, and illustrations.πŸš€

We will be working step by step towards this goal.
First of all draw layout for your website on a piece of paper. Yes, you heard right on a paper. You must be asking why we should start our work from the paper when we have many amazing tools available. Don't worry we will do it with tools also. There are some reasons for using paper:

  • Everyone can easily draw their thoughts on paper.
  • They don't need to install any software. They don't need to learn any tool for this.
  • When you are drawing on paper. You erase it redraws it then erase it through this whole process of drawing and erasing, you will certainly create the best thing which you can't create directly on any software.
  • If you are working in a team, give everyone tasks to depict their thoughts and present them on paper.

Now you have collected and drawn many designs. Ask your team which one is best to go with. Maybe you all come with a point where you merge different ideas together to create one masterpiece.
If you are working alone then maybe you can ask someone for advice or go with that thing which looks great from your perspective.

You must be thinking that since we are not good with frontend stuff how we will implement them? The answer to that is this: GridByExample 🀩🀩 just go to this website pick that layout which is matching most with your selected masterpiece, add some tweaks to it and yes now you are good to go. You can use many frontend libraries for your components.
e.g: bootstrap, material-ui, tailwind-css. But since you have created a proper layout of one part of your webpage, you now have to focus on other things like colors and fonts. But for that, you have to wait for the next part of this series πŸ™Œ

If you want to learn more go to this website and learn many things in 4 minutes WebDesignin4Minutes

Top comments (5)

Collapse
 
toobaahmedalvi profile image
ToobaAhmedAlvi

Very well written bro❀️πŸ”₯

Collapse
 
midhatahir profile image
Midha

Thankyou Tooba πŸ€©πŸ’–

Collapse
 
toobaahmedalvi profile image
ToobaAhmedAlvi

My pleasure πŸ˜‡

Collapse
 
hinasoftwareengineer profile image
Hina-softwareEngineer

Awesome article for those who want to improve the design. πŸ‘ πŸ‘ Waiting for the next part. As I am not good at choosing colors.

Collapse
 
midhatahir profile image
Midha

Thanks Hina. Glad to hear this 🀩.