Intro to Web Design

A website needs to be:

• Consistent. A website should have 1 global design language that it maintains page-to-page.

• Attractive. Sites need to be beautiful or else they reflect poorly on your brand.

• Trendy. You need to constantly stay on top of the newest trends in visual and web design.

• User friendly. It should be easy and intuitive for users to interact with your site.

• Responsive. Whether it's being accessed via mobile, tablet, or desktop, your site should look and function perfectly.

UI vs. UX

• User Interface (UI). Overall look and feel of a product, creating layout and visual display.

• User Experience (UX). Putting the consumer's needs first.

What is a brief?

A web design brief is a document that clearly communicates the requirements of the website to the web designer. It lays out exactly what the site needs to accomplish.

Example brief

For this template, Anath started with a design brief to build a site for a business that was transitioning classes from in-person to online. The brief included the following requirements:

• The site should be 1 page

• It must be easy to use

• Target online classses during COVID-19

• Offer classes via Zoom Widget

• User Flow: Lead the user to immediately subscribe to a class

Staying up-to-date

Staying up-to-date on the most recent design trends is critical. Anath stays up-to-date by consulting multiple design resources to see what her industry peers are doing.

Inspiration sources

Before you start building a site, take a look at recent treds for the industry you're designing for. You're not looking for designs to copy, but rather trends in color, UI, and so on. Try out these sites for inspiration:

• Muzli: https://muz.li/

• Land-book: https://land-book.com/

• Pinterest: https://www.pinterest.com/

• Dribbble: https://dribbble.com/

• lapa.ninja: https://www.lapa.ninja/

Stock Image Sources

Images bring your site to life. Make sure you are sourcing high-quality images and that you have the rights to use them.

Resources

Some good resources for free stock image include:

• Unsplash: https://unsplash.com/

• Pexels: https://www.pexels.com/

Start Sketching

Once you've browsed for inspiration and chosen your design elements, it's time to start putting pen-to-paper. For most designers this means using design software such as Sketch or Figma, but some people prefer doing this literally with a pencil and a pad of paper. This process allows you to organize and visualize your thought process.

Choosing Fonts

While looking through design trends and inspiration, be mindful of what fonts you're seeing. Are you seeing more serif fonts or sans-serif? What about handwriting fonts? We recommend a maximum of 3 fonts on a site.

Resources

Here are the two articles that Anath showed in the video:

• 15 Great Google Font Combinations For Your Next Design Project: https://digitalsynopsis.com/design/best-google-font-combinations-typeface-pairings/

• 10 Great Google Font Combinations For Your Next Design Project: https://digitalsynopsis.com/design/best-google-fonts-combinations-typeface-pairings/

Here you can see the visual hierarchy of the site start to come together. This site is focused on converting visitors with a highly-visible button in the middle of the hero section. The colors, fonts, and images are all adding to one coherent narrative.

Site goals become site structure

At the top of your site you have your hero image and your header. After that, the structure of the site should follow your site's goals and desired user flow. Here you can see how this site was designed first and foremost to drive class sign-ups, followed by additional goals such as sharing information about classes, testimonials, and more.