Time to create wireframes!

For your project, choose a site you’d like to make (or make over!) and design 3 of its pages. Using any of the discussed wireframing techniques, create a wireframe for your site. Do you like to sketch? Try the Lo Fi system. Do you love grids and Photoshop? Try the 1200 px grid Hi Fi style.

Think about user experience. What do they see on the landing page? How does the navigation work? How do the pages flow into each other? What media types are used within your site (photos? Video? Just text?)

Focus on the “skeletal” parts to your site. Don’t get bogged down into the details. We’re not worrying about color, typefaces, specific images. We’re looking for how the pages function and how they function as a whole (how do they relate to each other?).

If you’ve drawn your wireframes, photograph them and share them in our class project area. If you created yours digitally, upload a .jpg of your work for all to enjoy (if you’ve used one of the free wireframe sites, you may need to take a screenshot instead, if an export option isn’t available).

Links for online wireframing tools::

https://moqups.com

https://gomockingbird.com

https://wireframe.cc

https://go.gliffy.com/go/html5/launch

https://balsamiq.com

Sarah Tsubaki

Studying Multimedia at PCC

44

96