02. Wireframing 👩🎓👨🎓
🏗️ Create a Wireframe
Work with a partner to implement the following user story:
- As a developer, I want to be able to see how my elements will be grouped together so that I can better design my website.
The following image shows a wireframe that depicts the web application’s appearance and functionality:
Instructions
Navigate to Google Slides and create a new presentation using the blank template.
Using the tools highlighted in the following image, create a wireframe that includes all the elements that you need for the project:
🏆 Bonus
If you have completed the activity and want to further your knowledge, work through the following challenge with your partner:
- How might our wireframe look on a mobile device?
Use Google or another search engine to research this.
✅ Solutions
Wireframing Solved
Explanation and Result
We started with our header and sub-heading already defined which leaves us with the body and footer to complete.
We move down our page to create three elements on the same row.
When we move onto the coding phase of this mini-project you will note that we will be placing these three elements into a container. This container will determine how our elements sit on the row of our web page.
Inside of our row that is highlighted in red, we see a blue highlighted box which determines how elements sit on the column.
The container which holds our column acts similar to our row container but on the opposite axis.
We repeat the steps above to create the next row of our website.
Finally, we reached the footer of our website which is simply a blocked off area at the bottom of the page.