Responsive Web Design: Learn to Design a Responsive Landing Page | John Ashenden | Skillshare

Responsive Web Design: Learn to Design a Responsive Landing Page

John Ashenden, Head of Design, Mesosphere

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
6 Lessons (3h 47m)
    • 1. Principles of Responsive Design

      50:17
    • 2. Design The Foundation (Part 1 of 2)

      24:04
    • 3. Design The Foundation (Part 2 of 2)

      63:27
    • 4. Designing for a Responsive Website (Part 1 of 2)

      8:37
    • 5. Designing for a Responsive Website (Part 2 of 2)

      33:10
    • 6. Design to Development

      47:27

Project Description

Design a responsive landing page to promote your favorite movie or band

Principles of Responsive Design

  1. Choose a Topic

    For this class, you will be designing a one-page website to promote your favorite band or movie. After you have selected your topic, define the content that will be visible on your webpage. Remember, this is a single-page website, so you should keep things simple and focus your efforts on a compelling and informative design.

  2. Define your project

    Pick a movie or band you want to create a landing page for.

  3. Organize your site

    Create a list outlining the content of your website.

  4. Simplify your website

    Consolidate and group content where relevant

Laying The Foundation

  1. Design the foundation

    Start with Mobile, then move to Tablet, and end with Laptops and/or larger.

  2. Create divisions

    Establish content divisions vertically down the screen.

    Each division should correspond to a primary bullet point in your site outline.

    Arrange information, assets, and other media inside these content blocks.

  3. Illustrate your content behavior

    Illustrate how content would adjust when moving between screen-size thresholds.

    Keep it touch-friendly for mobile and tablets.

  4. Design site wireframes

    Using your site outline as a guide, create a series of wireframes for your new Responsive Landing Page -- one for each of your supported screen sizes. For this project, you will be supporting Mobile Phones, Tablets, and Laptops. Follow the suggestions in the Lecture video, and be sure to use the wireframe templates provided in resources as a starting point.

Applying Your Design

  1. Apply your site theme/aesthetic

    Design: Apply your site theme/aesthetic.  Build a user interface that compliments your site's topic and showcases your unique style.

  2. Preview your design and make adjustments

    Preview: Use your phone and/or tablet to preview your design and make adjustments and improvements as needed.

  3. Share your designs

    Share: Once you've completed your designs, share them with others, update, and improve.

  4. Finalize your website design

    Now that you've structured your content and defined how that content will be placed on-screen across mobile devices, tablets, and larger, you are ready to apply your design. Meld design clues taken from your selected topic with your own creative style and apply a design to your wireframes.

Design to Development (Optional)

  1. Coming soon

    Project step coming soon. Thank you for your patience!


Additional Resources

Student Projects

Winston Toy
5 comments
John Ashenden
8 comments
Shane He
3 comments
Lizzie Miller
5 comments
Khara Woods
Amma Odum
Jason Tropf
4 comments
Nino Lopez
6 comments
Rebecca Cross
4 comments
Rebecca Bartola
1 comment
Marie Chuatoco
5 comments
Emily Posner
3 comments
Tina Liu
Keisha Belton
5 comments
Ines C.
4 comments