⚠️ Note: This video was originally recorded for a previous course Web and Mobile I – ISTE 140 and may reference specific projects or due dates that are no longer current. However, the core concepts — especially the breakdown of wireframes, mockups, and prototypes — are still highly relevant and useful for planning any web project today.
Supplemental Notes
In this video, I walk through how to create wireframes for Project 3 and explain the key differences between wireframes, prototypes, and mockups:
- Wireframes: Think of these as the architectural blueprints of your website. They outline structure, layout, and hierarchy — and can be as simple as pen and paper sketches or built with tools like Adobe XD.
- Prototypes: These add interactivity. They’re especially useful for demonstrating functionality like dropdown menus, modals, or sliders, and are often used for usability testing or UI development.
- Mockups: A visual preview that incorporates branding, color, and typography. These are great for client presentations and stakeholder buy-in.
Key Takeaways
- For Project 3, wireframing is essential due to increased complexity and mobile responsiveness requirements.
- Mobile-first thinking helps prioritize content and structure your layout to work on small screens before scaling up.
- Wireframes can be hand-drawn or created using tools like:
- Plan first — adjusting HTML/CSS after building is more time-consuming than refining a sketch.
