Design a responsive homepage that works for desktop, tablet and mobile

Create a homepage design which works within a responsive grid. If you have a website that is currently not designed responsively, let’s fix that. Otherwise, tweak the website of your favorite restaurant. They’re generally simple, and chances are it’s not true responsive (does not adjust accordingly to any screen size).

A quick tip: you can check if a website is responsive by dragging the browser smaller and seeing if text and images ‘respond’ to the change in width.

Project Steps

Upload a screenshot of the original homepage you’ll be fixing.
Align the elements of that design to your chosen grid at desktop.
You may not have the clean image assets you need for this, so feel free to use other images, drawings, or colored rectangles where needed.
Display your grid adjusted for tablet, and update the design elements to fit accordingly.
Display your grid adjusted for mobile, and update the the design elements accordingly.

Download the Illustrator file attached if you'd like to work off of Skillshare's grid system.

Check out my sample project here to see how this project was done for Skillshares homepage.

Sarah Sarah

--

3