18
Tiny details of web design - Part One
To be able to create a stunningly amazing User Interface is challenging even if you've been doing it for a while. To be honest, the hardest part of building a website is coming up with a design for it. In this tutorial, I'm going to show you tons of tips on how to improve your css code and make your website as polished as a diamond. Let's get started!
You see paragraphs in literally 99% of all websites on the internet. They may not seem like much, but in fact, they are one of the most important elements on your site! If you make ugly paragraphs, a user will automatically just scroll past them whereas if you make them look amazing, users will keep going.
There are five seriously important aspects of paragraphs I'll go over in this section which are Colors, Spacing, Dimensions, Size, and Font.
The number one thing I'll make sure to go for is make sure my paragraph's color contrast isn't too high. If your paragraph is over a white background, set it to a dark grey color. If it is on a black background, make it a light grey. Try not to make the colors pure white or black.
Also, no matter how drastic your website's colors are, you should always use a monochromatic color. Colored text usually go for headers, links, and other things a user should click on.
If a paragraph is super compacted, it looks longer and will drive a user away from reading it. Even if a spaced-out paragraph is in reality taller than a scrunched-up paragraph, it looks more readable and doesn't make you want to not read it as much.
Also, try your best to use more paragraphs rather than less. The more space between text (I don't mean massive amounts!), the more readable they look.
Take a look and observe a few websites. You usually won't see paragraphs as wide as the entire view width. Try using the max-width css property to control the width of your paragraphs, preferably from 600-700 pixels wide. Also, make sure to keep some padding/margin on the sides of the paragraph.
Too small a font size makes your paragraphs look really long whereas too large a size makes your paragraphs look like garbage. I typically will choose a font size of 18px for larger screens and shrink it down to 13px at smallest for smaller screens.
Typically, you will see a serif or sans-serif type font for paragraphs. Never use a cursive or handwriting font for your paragraphs unless you want an angry web developer coming after you (that's me of course)!
That's it for paragraphs. I hope you pay a bit more attention to the small details.
Choosing the right font usually takes me about 30-60 minutes since I have to find the right one. Most of the time, if I can't find a good sans-serif font, I'll use Open Sans, Montserrat, or Raleway - all of which are google fonts.
Headers can mean a lot of things. Since I went over a bunch of things in the previous section on paragraphs, I'll keep this a bit shorter.
Some things you'll have to pay attention to are the space around the header, alignment, font, and size.
Typically, a header should have some space above it (preferably from 25-50 pixels). Also make sure it has a decent about of space below it so that it doesn't appear to cram into the content below it so much.
It's difficult when to decide about aligning your headers to Left and when to align it to Center. When should you do each one?
If you are writing a blog post, a page with a lot of content, or a page with over 4+ headers, it's best to align them to Left.
If you have a smaller amount of headers on a single page, it's better that you align them to center.
Rarely should you ever have to align them to the right.
Try to have either a super clean and polished font for headers or a cursivey-handwriting-like font depending on what your site is. Try your best to make the font for headers differ from the one you use for paragraphs.
As for size, try to make h1, h2, and h3 headers larger than default from sizes 4em (h1) to 2.5em. Headers mean large text. You have to take that seriously.
Headers also play a very important part in web design. They express the theme of your website, so make sure to get them correct!
Inputs. There are almost unlimited ways to style them. Their default style is not something you should be using in your site. Let's go over some aspects you'll need to make them look super professional.
Typically, inputs should have a light border around them and be easily visible in terms of contrast. You wouldn't want a user to miss an input due to lack of border!
Inputs should have a reasonable amount of padding and be restricted in size as well as positioned nicely. A super long input could totally trash your site's design as well as an input with minimal padding.
There are many CSS techniques you can use for event actions on an input such as :focus, :hover, :active, :invalid, :valid, and more. Make sure you add a short animation (preferably 1/4 of a second or less) on each action.
If you are making a website involving logins, signups, and other things that require inputs, make sure to style them nicely for the people that use your website.
It doesn't matter if you use a lot of colors - just make sure they look nice together. Make sure you use css variables for them so you don't get them mixed up!
Define at least 5-7 shades of a certain color so that you can use them to describe the depths of each element. If your site has a lot of content involved in it, you'll need to use a bunch of colors to a certain extent.
defining CSS variables
:root{
--background-strongest: rgb(255, 255, 255);
--background-strong: rgb(245, 245, 245);
...
}using CSS variables
.container{
background: var(--background-strongest);
}Make sure you use the var function in css!
These sweet little html entities - you can literally click buttons until the day you die of all different sorts, but what lies behind these that makes people want to click them?
A stylish signup or subscribe button is more likely to make a user click that than a badly-designed button. How can you add this invisible bait to your site?
Similar to inputs, make sure it has a decent amount of padding, an absolutely smooth and beautiful hover animation, and a good contrast. If you balance these elements correctly, you can literally make a button cry out to a user to click them.
Well, that's it for this article. I hope you enjoyed it. Stay tuned for part two!
If you've enjoyed this post, be sure to follow me and join my discord!
18