Lesson 4:

Design A Website!

Home » Intro to Web Design » Lesson 4: Design A Website

Lesson Overview

In this lesson, you’ll be designing your own website mockup! By the end, you should have a mood board and a website design of 3 pages.

NOTE that this class is no longer in session. However, the course content has been released so you can engage in self-study and learn to design your own website! The assignment instructions (like sending to Jess for review) do not apply to you, but feel free to follow along with the Figma tutorial!

Get Started with Figma | Design a Homepage Follow-Along

We will be using Figma to design your site. Watch the video below to get started with Figma. Follow along and recreate the portfolio design in the video. In later steps, you’ll customize this design to create your own.

Instructions:
  1. Create an account on figma.com
  2. Follow along with the video tutorial above. Click here for the Figma file you need to duplicate.
  3. Finish recreating the rest of the portfolio homepage.

Design Your Own Website

Now that you’ve gotten a little practice on Figma, you’re gonna take the homepage mockup from the video and redesign it to make it your own!

Step 1: Decide what website you want to create

You can choose to design one of the following:

  1. Portfolio website for yourself. Create a portfolio for a hobby or skill you already have (photography, writing, graphic design, illustration), or use this assignment as practice and design a pretend portfolio for any industry of your choice.
  2. Small business website. Create a small business website either for yourself or for a local small business. For the latter, think about the types of businesses or industries you may want to work with (fashion, restaurant, education, health, etc.) and select an existing business to use as your pretend client.

Need inspiration before deciding?

  • Dribbble or Behance– search up terms like “nonprofit website”, “portfolio website”, “beauty website”, etc.
  • Brix Templates – preview their website templates
  • Website Demos – look through different WordPress themes
  • Squarespace – look through different themes

Step 2: Create a Mood Board

Click here for more guidance on how to create your website mood board.


Step 3: Design your homepage

After you’ve completed your mood board, start designing your homepage! Use the mockup we recreated in the video as a template and redesign it to design your own homepage.

Instructions:
  1. Design your own homepage.
  2. Keep the same general structure of each section (so it’ll be easier to code later), but feel free to change the typography, imagery, and colors to create a design that matches your mood board. You can also experiment with different background colors/images/textures or add some decorative graphics.

Need design inspiration?


Step 4: Design two subpages

Instructions:
  1. Design an About page.
  2. Design a second subpage. This can be a Services, Gallery, Projects or Work page for you or your pretend client.
  3. Tag me in a comment on your Figma file once your subpages are complete & ready for review.

Need inspiration or guidance?

Suggestion: look through any of the previously linked websites / template libraries like Brix or Website Demos to study the types of pages they created per website type.

The Most Meaningful Way to Succeed is to Help Other People Succeed!!

We're looking for our HQ Co-Manager!

Did you answer “YES” to the questions above? This contractual position will be from June 1 to August 31. We will follow up with you over email regarding next steps!