You’ve had an idea.
Or…you have a project. A portfolio. Something great.
You want people to see it, so the internet is the obvious place for it to live. But before it can be published, you want to make it look as good as it can be. You want to do it justice. It has to be professional, and attractive, and neat.
So…what’s the first thing you need to work on?
Content
Design exists for one reason - to make the content it’s applied to look good. And this might seem an obvious statement, but as content is the primary attraction of a website, it should not be chucked in at the last minute with no attention paid to it.
(The internet is ninety per cent made up of written content. Making yours worth reading will be a great asset.)
So, you’ve got your awesome words, all polished and shiny. You create an empty style.css file. Now what?
Front and Centre
You don’t want long lines of text. They’re a pain to parse, and sometimes hard to read. By setting a limit on characters per line, you will greatly enhance the appeal - and the ability of your audience to read - a wall of text.
body {
margin: 0 auto;
max-width: 50em;
}
Now you’ve styled the text blocks. What about the text?
Font
Browser fonts often default to ‘Times’. This doesn’t always look the best, because it’s an unstyled font. But! It’s easy enough to switch to something you like better. Switching to a sans-serif, like Helvetica or Arial can make things look a lot better.
body {
font-family: "Helvetica", "Arial", sans-serif;
}
(And there’s always Georgia if you want to stick with a serif font.)
Okay, so this makes the text look a lot better, but we can also make it easier to read.
We need Space
Any time a page looks wrong, or downright broken, it’s most often down to the spacing. If you put space around your content, and also within it, it gives everything room to breathe and is a lot easier on the eye.
body {
line-height: 1.5;
padding: 4em 1em;
}
h2 {
margin-top: 1em;
padding-top: 1em;
}
Okay, better. We’re getting there. Let’s add some subtlety.
Colour/Contrast
You know what else isn’t easy on the eye? Black text on a white background. Not all the time, anyway. We can soften the black for the main text, because that’ll be much more comfortable to read.
body {
color: #555;
}
And because we need contrast to highlight words that are important:
h1,
h2,
strong {
color: #333;
}
This is a lot nicer to look at, but the rough edges need to be knocked off. The code snippets stick out like a sore thumb.
Balance
This won’t take long to even out, and you’ll end up with a page that has lovely balance. And you need balance, or viewers will find themselves horribly disjointed when they look at it.
code,
pre {
background: #eee;
}
code {
padding: 2px 4px;
vertical-align: text-bottom;
}
pre {
padding: 1em;
}
What next? Well, the page needs to pop a little. It needs character, it needs to stand out.
Primary Colour
Most brands will have a primary colour. It acts like a visual highlight, and draws the brand product to mind when you see it. On a website, this can be used to draw attention to the bits you want your consumers to click on, like links.
a {
color: #e81c4f;
}
You can’t just have one colour, though. That would be boring. You need…
Secondary Colours
You don’t want the primary and secondary colours to clash, or cancel each other out. It’s best to have the primary one as the stand-out, and use secondary colours to complement it. Secondary colours are good for use on borders, and in the background, or perhaps in the text.
body {
color: #566b78;
}
code,
pre {
background: #f5f7f9;
border-bottom: 1px solid #d8dee9;
color: #a7adba;
}
pre {
border-left: 2px solid #69c;
}
But why stop at changing the colours? There’s a lot more you can alter, like the shape.
Custom Font
Remember what we said up at the top, about how text is the main content of a page? Well, if you use a special, custom, font, then the words will stand out even more.
You can embed your own webfont into a site, or use an online service. (Typekit is good.) For now, we’ll use ‘Roboto’ from the Google Fonts service (it’s free).
@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,500';
body {
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
}
Now that’s done, why not add some words? Or rather, that thing that’s worth a thousand of them.
Graphics can be there as something to show off or support your content, or they can be an active part of the message or aesthetic you’re trying to get across.
You can enhance the header as you like - background images are nice.
header {
background-color: #263d36;
background-image: url("header.jpg");
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
line-height: 1.2;
padding: 10vw 2em;
text-align: center;
}
And a logo will be a good touch. Always good for branding, logos.
header img {
display: inline-block;
height: 120px;
vertical-align: top;
width: 120px;
}
And while we’re here, the style of the text could be neatened up a bit. Let them shine a little more.
header h1 {
color: white;
font-size: 2.5em;
font-weight: 300;
}
header a {
border: 1px solid #e81c4f;
border-radius: 290486px;
color: white;
font-size: 0.6em;
letter-spacing: 0.2em;
padding: 1em 2em;
text-transform: uppercase;
text-decoration: none;
transition: none 200ms ease-out;
transition-property: color, background;
}
header a:hover {
background: #e81c4f;
color: white;
}
And there it is! A decent layout in four minutes, using the basic principles of web design.
Do you think we missed anything? Let us know in the comments below!