DEV Community

loading...
Cover image for How To Improve Your Design πŸš€ - Steps to be a Pro 🎨
World In Dev

How To Improve Your Design πŸš€ - Steps to be a Pro 🎨

leviathanprogramming profile image π‹π„π‘½πˆπ‘¨π“π‡π€π Programming ・Updated on ・3 min read

Have you ever wanted to be an amazing UI/UX developer but your projects aren't turning out the way you want?

Here are some tips to help you increase your skills and your eye for design.

What I mean by the phrase "eye for design" is how good you are at catching what is a good and bad design. Can you catch how much work was put into making the design of something? Is a sequence of colors nice to look at when together? Let's get started.


1. Colors

Colors. Very important elements in Web Design. How will you choose a good palette and when can you sense that someone is using a bad or good color palette?
Let's compare two examples:

  1. https://mtldinh.github.io/cung-nhau/
  2. https://syncfitapp.herokuapp.com/

Which one had a better color palette and why?
Why is #2 obviously better in every way of design?
If you come to think about it, which is easier on the eyes in contrast? Which colors are more appealing to look at?

Next time you make a website, choose a bunch of colors that look great together and are not hard on the eyes.
A great place to find amazing palettes is colorhunt.


2. Gradients

Gradients play a huge part in Design. A solid plain color compared with a smooth, amazing gradient is just beautiful.

Go to this website really quick:
https://letsgoal-app.herokuapp.com/
(P.S, the website is still under development)

Aren't the gradients used in some elements just pure amazing to look at? Gradients are like nice-looking colors but better, more appealing to the eyes, and have a much more "professional" design look to them.

Gradients simply merging from red to blue isn't something you'd want in the background or button.
Instead, a light blue to slightly darker blue is a good choice. The color difference is not that much.
Think about the difference in color.

Before you implement a gradient, take a look at it and ask yourself the following questions:

  1. How big is the change in color?
  2. Is the gradient appealing to the eyes?
  3. How will the gradient impact other elements around it?

Some great sites to get gradients from are gradienta, gradient hunt, and gradient king.


3. Overflow

What really bothers me is if a website has a Horizontal Scroll to it. Whenever I see one, I'm just like "please add the CSS overflow-x:hidden; property!!"
If your site is overflowing horizontally, it will get a πŸ‘Ž from me and other developers who have a good eye for design.
What you can do to stop horizontal overflow is to add this code to your CSS:

body, html {
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
Enter fullscreen mode Exit fullscreen mode

4. Spacing

Spacing is a very big part of the design. Make sure when you code, your elements are not "crammed-up" together so tight. Even when developing a mobile-compatible site or app, you should still maintain a reasonable amount of space.
An example of super nice spacing is Google. Take a look at google docs and some other sites made by google. The spacing is just so nice.
Take a look at this site.

Spacing and Overflow are just squished into each other. If your sites are looking like that, start letting Google be your inspiration.


5. Animations

Animations play a huge part in how nice your site is. If a site has nearly zero animations, I would say that the developer is "unprofessional" and doesn't have a good habit of putting design in their projects.
On the other hand, too many animations are not good.
A balance between both is perfect, animating all things with interactions.
Sometimes, just to animate my stuff, I'd animate everything with a duration of 0.25 seconds by adding transition: 0.25s; to my everything in the HTML document.


Thanks for reading!

Subscribe to our newsletter to receive our weekly recap directly on your email!

Join us on Discord to participate in hackathons with us / participate in our giveaways!

Happy Coding.

Discussion (0)

Forem Open with the Forem app