Polish how it looks

In the last chapter you learned to put a page together. But looking at what you had made, you will have felt it looked somehow amateurish. This chapter is where you close that gap.

The difference between a page a professional made and the one you made is almost always in the details. Not a gift for colour or clever decoration, but the way space is left, how far apart the letters sit, how a shadow is laid on — a build-up of things nobody points out. Which also means it is a gap you can close by learning.

The first thing you take on is how to build a surface. Lay a colour on the background and put text on top of it. What starts to matter here is transparency. Let a colour through by half and it mixes with what is underneath and gains some depth. Rather than pure black text, a black let through a little has the settled look of something printed on paper.

Around text you deal with letter spacing and line spacing — how much room you leave between one letter and the next, and between one line and the next. Cramped is tight and hard to read; too open and it stops holding together. Headings especially read well pulled in a little, and body text opened up a little. They are small dials, but turn them and the impression changes plainly.

Next come headers and lists: the band across the top and the area of cards lined up, which every site has. This is the first time the question is "how do I place several elements". Line them up, get them level, keep the gaps even. Every basic worry of layout turns up here.

The second half of the chapter is the response when you touch something. The colour changes when you put the mouse over it; it sinks a little when you press. A response like that tells the person using it "this is a place you can press". It works not as decoration but as information. A button with no response at all leaves people unsure whether they may press it, so they do not.

You also learn how to make things change. A colour that switches instantly and a colour that changes slowly leave completely different impressions. Slowly here means about 0.2 seconds, which never reaches your conscious mind. It is still plenty to make something feel smooth.

One caution for building on a phone. Give anything pressable enough room. A finger is fatter than a mouse pointer, so a button that looks small is hard to press. Every screen in this course is built to that measure.

Worth learning too is how to handle shadow. A shadow makes an element look lifted, and says "this is a set apart from the rest". Laid on too heavily it looks dated, so the knack is faint, and not spreading too far. It really tells in a list of cards, where the same thing repeats.

There is a way of thinking about polish that is worth passing on. Nothing works better than lining things up. Line up the left edges, make the gaps the same, do not let the number of text sizes grow. Put unrelated values down by feel and you get a screen that looks scruffy for reasons nobody can name. The other way round, simply reusing the values you settled on will pull it together.

So it helps to decide on a few of each in advance and then choose from those for colours and space. Three steps of space — small, medium, large — and for colour, a text colour, a light text colour, a background and an accent. Stop deciding on the spot every time and the sense of one piece arrives by itself.

Looking for examples is a good method too. Open a site you thought was well made and watch how much space is left and how many text sizes there are. Anything that looks good usually has a reason. What you copy is not the palette or the trimmings, it is the reason.

Coming out the far side of this chapter, you will be able to show your pages to other people. Aim for a state where it not only works but is thought of as properly done. It is a build-up of details, so you will not get good at it all at once, but you will certainly get good at it.