This chapter covers
- Converting a designer mockup into HTML and CSS
- Using contrast to draw attention to the right parts of a page
- Selecting colors
- Leveraging white space
- Working with line height
An important part of web development involves taking a mockup from a designer and bringing it to life with CSS. When you do this, you’re effectively translating art into code. Sometimes that translation is straightforward. Other times, you may have to work with the designer to make compromises. Where the designer has fine-tuned every piece of the mockup, you’ll need to consider how to organize the CSS for easy re-use. Your CSS will be more general-purpose than their single-page mockup.
After the translational work is done, it’ll fall to you, the developer, to continue adding to the site, building upon the vision laid out by the designer. It’s important that you at least have a general sense of the designer’s concerns about things like spacing, colors, and typography. You’ll need to know how to ensure your implementation is accurate. If you respect the designer’s goals, it’ll make this process less frustrating.
I also recognize you’ll not always work with a designer. If you’re at a small startup or working on a personal project, you may be on your own. In which case, it’s beneficial to have a basic understanding of design principles so you can implement them yourself.