Week 8: Wireframes and Bootstrap Theming

We’re midway through the Website Modernization Project, and at this point you should be working on three interrelated tasks:

  • Downloading or copying/pasting all usable content from your client site. Depending on the state of client site, tools like SiteSucker and HTTrack might be helpful, but whatever method you use, you should have local copies of everything you plan to include in your new site.
  • Separating the content into usable “chunks” (pages, sections, etc.) and cleaning up the HTML for each chunk. Each chunk should be saved as a separate file, ready to be dropped into your Boostrap template.
  • Experimenting with the Bootstrap framework until you feel confident creating new pages by combining various elements.

Here’s how we’ll spend our time in class next week and what you need to do to prepare for each day:

  • On Monday, we will spend most of class in a wireframing workshop. Before you come to class, please read “Sketching: the Visual Thinking Power Tool,” by Mike Rohde, and “Using Wireframes to Streamline Your Development Process,” by Eric Shafer. (See the “Wireframing” section of the Resources page for more links.)
  • At the beginning of class on Wednesday, you will submit wireframes for at least two different pages (e.g., home page, blog page, contact page, image gallery) of your Unit #2 site. (If you have created additional wireframes, I would love to see those, too.) During class, we will experiment with some tools for theming and extending Bootstrap, so if you’d like to get a jump start on our workshop, you should familiarize yourself with Jetstrap, Bootswatch, and Bootstrap Magic.

As always, I’m happy to meet with you during my office hours if you feel like you need extra help on this project. Next week I need to modify my office hours due to some departmental meetings, so I will be available on Tuesday and Wednesday from 9-12. Feel free to drop by during those hours or email me if you’d like to reserve a specific time slot.