Read through the brief carefully. Specifically the part about the look and feel of the required design. Note what your client likes, dislikes, and any other specifics required for the presentation. Make notes about potential colours, fonts, imagery, and overall styles that might convey that message. Have a solid idea of what your primary option will be and stick to your client’s requirements closely. And then think of an alternative of how you might improve things if some of the requirements were more flexible.

2. Set Your Mobile & Desktop Grids

Grids are super helpful and should be set up and followed. It will help the developed website to match your design. I usually stick to the 12 column default desktop grid in addition to the mobile one used in Bootstrap Framework. That’s only my preference because this is the one most used by the developers I work with.

Some projects require a different, more fluid grid which can make for a more unique and premium look and feel. I find that those tend to entail more time and budget, specifically during development. So make sure your client and your developers are on the same page when a more customised approach is required. If in doubt, stick to the basics to avoid complications further on. Talk to your developer and your project manager if you have people working on the project in those roles.

Download

3. Typography

The fundamental purpose of any website is to convey information. Information is communicated through language. And language requires typography — it is the basic unit of your design. Get this right and that might be all that your client needs. The rest of the design are just wants. You might want to use brand colours and other design elements to convey the message in the right way, with the right emotions, associations, feelings, etc — but they shouldn’t get in the way of information.

Check if the brief requires you to stick to a specific set of fonts, and follow those guidelines (make sure the client has a web licence to use those fonts online).

If your client is open to new font ideas, refer to the brief again and check Google Fonts (or a premium service if you’ve got one, such as Typekit) for the right font combination that would help convey the required message. A more characterful typeface might need a separate client sign off before you go any further. And if your client’s existing brand fonts are too heavy for web use, suggest a web friendly alternative.

Setting the Type

Setting the basic typography and connecting your visuals to a developer’s code can be time consuming and tricksy. I recommend starting with code using either Type Scale (for simpler websites) or Modular Scale (for larger projects), and then taking screenshots and recreating it in your design tool (Sketch App, Photoshop, or Adobe XD?).

Luckily for you, I’ve done the hard bit and got a freebie ready for you to download and use. So you just need to pick the fonts, update the styles and stick to the relative scale font sizes provided. It will ensure your typography is set right, looks good, and that your developer is happy as well.

Stick to as few font styles as possible and only add new ones when absolutely required. My rule of thumb is that a new font style has to be used at least a few times throughout the design to justify its existence. I usually have different styles for h1 — h5, p, quote, and small p (for captions, breadcrumbs, footer text etc). Some of those would have an inverted version for dark backgrounds. And if you use all caps versions for some of those — you’ll have a big variety of font styles to choose from without having to create random one offs.

Typography Template Starter (For Sketch App)