The moment has finally come: You’re ready to put pen to paper and begin to draw your responsive website designs! It's time to create wireframes, which are outlines or sketches of a product or a screen. You’ll start by creating paper wireframes, then you'll move to digital wireframes later.

Remember, wireframes help establish the basic layout of a screen. A layout is the structure that supports how visual components on a page are arranged, like images, text, and icons. You can apply everything you just learned about common website layouts when you create wireframes for your responsive website.

To help get your ideas flowing, here are the wireframes of five versions of the homepage of the Wisconsin Public Library website, that Dave created:

• Layout A: A large hero image with text next to it, where an author or featured collection of books could be showcased.
• Layout B: A prominent search field in the top right.
• Layout C: The logo, search, and navigation are grouped into one floating box. Other images and text are placed further down the page.
• Layout D: The discover, about, and donate areas of the website are part of the homepage.
• Layout E: The search bar is prominently featured.

<aside> 💭 Now compare your paper wireframes to the matching exemplar above. As you compare, ask yourself:

</aside>

• Did you create four versions of the homepage wireframe?
• Did you create placeholders for visual elements that will be added in later?
• Did you analyze the wireframes and decide on the best designs?
• Did you create a final homepage design with the best elements from the first four wireframes?
• Did you repeat the same process to create the wireframes for the other pages of the website?

What was useful to you when you did this activity? What would you like to do differently next time? Take this feedback with you as you continue to progress through the course.