You are outputting something into a browser and you are lost in it because it looks horrible.
Even you need to look hard for what you are searching for in that page. Now imagine you are collaborating with someone else or you want to show your work to someone—they are lost; therefore, you didn’t do a good job. We are visual creatures; you hear that all the time. If it doesn’t look okay, then it’s not okay.
I am about to give you 15 + 2 tips to add to your CSS & HTML that won’t make your output in the browser amazing and artistic, but it will look fine, accessible and presentable.
I will list these in order from the easiest to implement with the largest amount of improvement at the top.
1. Set Line Height for Text
The #1 thing that separates Pro design from Amateurish one. This is the thing we all hate but can’t pinpoint.
body {
line-height: 150%;
}
This makes your page much nicer looking, makes it easier to navigate, scan, read… I can’t sell this enough!
2. Limit Maximum Width of Text Blocks
In combination with line-height, you just achieved nice looking readable text.
h1, h2, h3, h4, h5, h6, p, ul, ol, dl {
max-width: 600px;
}
Short lines of text are easy for people to follow, easier to read, don’t get lost and confused.
No “looks good” mention? Well, when you prevent confusion, it’s instantly perceived as looking much better.
3. Pick Three Colors: Background, Text, Accent
Stick to a simple color scheme.
body {
background-color: #f9f9f9;
color: #333333;
}
button, .btn {
background-color: #007BFF;
}
Or reverse for dark theme.
Generally, choose two contrasting colors for your background and text (e.g., dark text on a light background), and a third accent color, which must be much closer to the body background color than text color, for buttons and links.
4. Apply Consistent Spacing
Create visual rhythm by standardizing the spacing between elements.
p, ul, ol, dl, table, h6, h5, h4, h3 {
margin-bottom: 30px;
}
h2 {
margin-bottom: 40px;
}
h1 {
margin-bottom: 50px;
}
/* Reset top margins */
* {
margin-top: 0;
}
Browser defaults are archaic and really look terrible to the modern eye.
And for the love of … cancel out that margin-top
5. Set Font Sizes
body {
font-size: 16px; /* Universal for desktop and mobile */
}
h6, h5 {
font-size: 18px;
}
h4, h3 {
font-size: 20px;
}
h2 {
font-size: 24px;
}
h1 {
font-size: 30px;
}
h5, h3, h2, h1 {
font-weight: bold;
}
Or choose your own scale (e.g., increase by 2px for each level as I do) that makes you comfortable.
You have to scale instead of random numbers, looks soooo much better. And you can skip a level if you think it looks better. The issue usually is when thinking about text in terms of separate entities (paragraph, heading, …), because if you set standard font-size to 14px (because schools taught us it’s standard, hm?) and h1 to 58px, it looks like Optimus Prime stomping a mouse.
6. Use a Single Font
body, button, input, textarea, select {
font-family: Arial, sans-serif;
}
Multiple fonts easily make your site look cluttered and ugly. A single font ensures cohesiveness.
7. Use Sans-Serif Fonts
I know there are a lot of fonts that look interesting, fun, intriguing, but as we are going for certainty of OK design, then stay with common sans-serifs.
body, button, input, textarea, select {
font-family: 'Open Sans', Arial, sans-serif;
}
If you're willing to include a custom font, try 'Open Sans'. If not, Arial is a safe, universally available choice.
8. Add Border Radius to Buttons
button, .btn {
border-radius: 4px;
}
Slightly rounded corners make buttons just feel modern and look nicer.
9. Create Larger Buttons with Adequate Padding
button, .btn {
padding: 15px;
}
Again, just looks modern and nicer.
10. Align Text to the Left
body {
text-align: left;
}
Don’t center, please.
Or use the default option for non-English languages. Isn’t Japanese top-down? Don’t center that either!
11. Avoid Using Shadows
Just don't.
box-shadow and text-shadow can easily be overdone and make your UI look cluttered and ugly. They're tricky to get right, so it's best to avoid them.
12. Add Padding from Sides
Prevent your content from touching the edges of the viewport.
body {
padding: 0 10px;
}
Alternative: If you haven't reset the body's margins, you might already have default spacing.
Adding horizontal padding ensures your content isn't crammed against the screen edges, which is one of the ultimately horrifying views.
13. Add Hover and Active States to Links and Buttons
a:hover, .btn:hover {
opacity: 80%;
}
a:active, .btn:active {
opacity: 70%;
}
Provide feedback when users interact with elements.
14. Use cursor: pointer on Clickable Elements
a, button, .btn {
cursor: pointer;
}
Make it clear what can be clicked on mouse hover. have this by default, for some reason, buttons don’t.
15. Set Maximum Width for Content Containers
Limit width of all the content. On a large monitor, it’s a fantastic improvement. The only reason for it being this low is it’s not as simple to implement as all the others - we need to change HTML.
<body>
<div class="container">
<!-- All content here -->
</div>
</body>
.container {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
Bonus Tips
Ensure Images and Videos are Responsive
Make media elements adjust to different screen sizes.
img, video, iframe {
max-width: 100%;
height: auto;
}
If you place a video or image in text or that container or whatever, they tend to overflow. With this CSS, they won’t.
Keep Everything Left-Aligned
Consistency in alignment creates a clean, organized look. You know how you love your alignments in IDE? Use it in the output, too.
Central Theme To All The Points
All we're doing here is setting some basic rules that are pleasant to the eye - consistency, alignment, simplicity. These are simple to implement with instant results.
Pro Tip: Seriously, just set the line-height as the first thing you do. It's an instant and massive improvement. By just doing that, you're already ahead of many designers who get paid for their work. I’ve seen too much in my career.
By applying these simple CSS tweaks, you'll see a significant improvement in your project's design without needing extensive design knowledge. These tips are all about making your content more readable, your layout more consistent, and your user interface more intuitive.
Use-Cases
This section is usually at the beginning of articles. But I am sure many can see where I am coming from. There are two main use-cases.
First is where you are a programmer having an idea for an awesome project, but you are not really a designer. Your project doesn’t need to be a piece of art, it only has to be OK to read, view and understand.
Second one is that you are a part of a development team and you need to program and output something. If you set up simple rules from this article, everybody will have way easier time understanding what the output is and how to work with it further.
Do you have any go-to design tips for developers?
How do you, as programmer, approach UI design in your projects?
Do you have your own experiences with those full-of-something pages?
Top comments (1)
Every time we look for a programmer, majority of trial and reference work we get is in that default browser styling. We learned to look past that, but this and remembering my beginnings, was a great inspiration for this article. It helps me, my company and may help you too :)