Intro to Web Design: Friendly Design for Startups and Small Business

Meg Lewis, Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
3 Lessons (1h 8m)
    • 1. Introduction

      5:13
    • 2. Button Styles, Avatars, Containers

      34:36
    • 3. Creating a One Pager for a Start-up

      27:56
24 students are watching this class

Project Description

Design the home page for a business of your choice

Getting Started with Web Design

  1. Familiarize yourself with design

    1. Familiarize yourself with UI design and new Photoshop techniques.

    2. Read and visit the resources housed below in Additional Resources.

    3. Don't forget to download the source files!

  2. Create buttons, avatars, containers

    Use the techniques you've learned to create the components for your own Partystarters (or other company) one-page site.

    • Build your buttons
    • Build your avatars (circular and square)
    • Build your container style

    Tip: Building a logo first is a good way to decide what color pallete will represent your brand identity.

    Example of Kelsey Kreiling's assets.

  3. Share your project assets

    Share any of the assets you have designed for your site. Offer feedback on your peers' project choices. 

    An example of assets from Annalyn Aguilar.

Putting It All Together

  1. Build your site

    Pull assets from your source file. Your design should include:

    • Header
    • Imagery, tagline and call to action (above the fold)
    • More text explaining more on what the product is (below the fold)
    • A final section (carousel optional) about who your users are (or any other secondary information you deem important to communicate to your user)
    • Don't forget your footer!
  2. Share your site

    Share your progress in your project section to get feedback from other students

    Ria McIlwraith's final design


Additional Resources

  • Read

    Resources

    • 960.gs - This is the grid system I use! Download it and open 'er up
    • Font Awesome - I use this for simple icons. This is where I got the heart and map pin from
    • Balsamiq - Great wireframing tool.
    • InVision App - For interactive clickable mocks to share with clients.
    • Slicing PSDs - Zoe Rooney's PSD slicing tutorial (helpful in moving your design to HTML/CSS for non-coders).
  • Downloads

    • Lecture Source Files
  • OPTIONAL: Office Hours (24:46)
    Originally recorded 3/18/2013

Resources(1)

Student Projects

project card
Maia Then
13 comments
project card
Hayley Bigham
18 comments
project card
Kelsey Kreiling
5 comments
project card
Ria McIlwraith
15 comments
project card
David B.
10 comments
project card
Justin Shiels
6 comments
project card
Obed Lorisson
20 comments
project card
Clare T
1 comment
project card
Jensen Luther
8 comments
project card
Andrea Gracia
12 comments
project card
7 comments
project card
David Poninski
13 comments
project card
Jason Kramer
2 comments
project card
Adam Lorber
16 comments
project card
Briana Hokanson
2 comments
project card
Lacie Cunningham
4 comments