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

Principles of Responsive Design

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.
Define your project
Pick a movie or band you want to create a landing page for.
Organize your site
Create a list outlining the content of your website.
Simplify your website
Consolidate and group content where relevant

Laying The Foundation

Design the foundation
Start with Mobile, then move to Tablet, and end with Laptops and/or larger.
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.
Illustrate your content behavior
Illustrate how content would adjust when moving between screen-size thresholds.

Keep it touch-friendly for mobile and tablets.
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

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.
Preview your design and make adjustments
Preview: Use your phone and/or tablet to preview your design and make adjustments and improvements as needed.
Share your designs
Share: Once you've completed your designs, share them with others, update, and improve.
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)

Additional Resources

John Ashenden

2,076