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:
- Create an account on figma.com
- Follow along with the video tutorial above. Click here for the Figma file you need to duplicate.
- 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:
- 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.
- 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:
- Design your own homepage.
- 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?
- Brix Templates – website templates
- Wild Kind Website Templates (view their demos)
- Tonic (look through their customer showcase and template demos)
- Abdulrahman Alsharkawy (Behance) – portfolio website example
- Akshay Roy (Behance) – portfolio website example
- Lab Salon and Brow Studio – small business website example
- Brix Templates – nonprofit website example
Step 4: Design two subpages
Instructions:
- Design an About page.
- Design a second subpage. This can be a Services, Gallery, Projects or Work page for you or your pretend client.
- Tag me in a comment on your Figma file once your subpages are complete & ready for review.
Need inspiration or guidance?
- About Us Page Examples & How to Create One (video)
- Designing Effective Subpages for your Websites (video)
- Brix Templates – small business About Page template
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.