10 Building a website

 

This chapter covers

  • Building a landing page based on the requirements given to us by a client
  • Organizing content using user experience fundamentals
  • Making visual design choices and applying them in a step-by-step process

Thus far, we have covered the basics of user experience design, the need to understand business requirements before starting to wireframe, how to wireframe, common web layouts and whitespace, typography choices and how typography conveys the tone of a brand, and how to use and apply color. Now we’ll apply what we’ve learned by walking through how to build a landing page for a travel agency. This process is only one way to approach design, and different people have different workflows. You’ll find what works for you, but the goal is to give you a blueprint to approach design step by step, from wireframe to a full-color design.

10.1 The website requirements for our project

We are designing a website for a new travel agency that wants to target people planning a luxury vacation but without the luxury price point. The travel agency wants its website to feel modern, hip, and luxurious while still maintaining a professional feel that inspires confidence. The goal of the website is to drive potential customers to book a vacation package as well as highlight some of the other services it offers, such as guided tours and group travel.

10.2 Figuring out content placement with a wireframe

10.3 Establishing the grid system and spacing

10.4 Choosing typography

10.5 Establishing vertical rhythm

10.6 Choosing imagery

10.6.1 Using imagery to set the tone

10.6.2  Text over imagery

10.7 Pick and apply the color palette

10.8 Finishing touches

10.9 Responsive design

10.9.1 Tablet design, the eight-column grid

10.9.2 Mobile design, the four-column grid

10.9.3 Mobile-first design

Summary