Class 06 Topics: Group Presentations, Wireframes, Prototyping, RWD Frameworks: Using Bootstrap.
Class 07 Topics: Wireframing, In-class lab time
Announcements
Please note that class is canceled today, April 9, 2015
6:30pm – 9:30pm.
Unfortunately I’m sick and won’t be able to make it to class today. Note that your midterm projects are due April 23, so please be sure to upload your files to your student folder on the class server. Please be sure that your file contains your name and “midterm” so I can identify it.
- Bring all your work with you to class every week.
- Be sure to post your work to your WordPress process blog so I can give you credit for the work you’ve completed so far.
- When you post your assignments to your WordPress site, be sure to title the posts as Assignment 4, Assignment 5, Assignment 6 etc.
- Due Dates
March 12 – Client Survey due
March 19 (no class) – Creative/Project Brief, Estimate and Schedule due
March 26 – Competitive Analysis due
April 2 – Personas + Sitemap due
April 9 – Wireframes
April 23 – Midterm project: All Deliverables + Bootstrap “wireframe” (Bootstrap exercise is extra credit)
Class 06
Review Midterm Project
http://classes.jamiecavanaugh.com/grdes/gd-67/gd-67-midterm-project/
Group Presentation – April 2
Site maps: Toki Ngo Hoangthy, Bill O’Donnell, Marcus Welles
Resources
Creating a Website Sitemap:
http://www.slideshare.net/JeannieMelinz1/creating-a-website-sitemap
PDF of a Santa Monica College website redesign site map
Wireframes
A wireframe is a bare-bones layout of a web page. It is a simple drawing of the chunks of information and functionality for key pages in the site. You will want to create a wireframe for the home page, each unique second level page, and any other significantly different pages on the site. Wireframes include the containers for all the major elements of the page. Elements include navigation, placeholders for images, content and functional elements (like search), and footer. Wireframes do not include any reference to color, typography, or visual imagery.
Wireframes are NOT normally visual design (typography, colors, images, final layout, etc.). Wireframes are a rough draft of required content only.
Wireframes focus on required elements and their relative importance without the added complexity of visual design. Wireframes are an inexpensive way to test structural design ideas. Making major changes to a wireframe is simple compared to making major changes to a visual design.
Example of Wireframes
Tools for creating site maps and wireframes
Quirk Tools for Site map & Wireframes
http://quirktools.com/
Limited to 3 documents
Wireframe.cc for Wireframing
https://wireframe.cc
(No Free version)
Sketch before wireframes
Many designers mistakenly think a sketch is a wireframe. They are similar but they are not the same thing. Both are useful for illustrating an interface concept, but a wireframe and a sketch are done in different mediums and produce different results.
Many designers have different processes for how they work. Some might skip sketching and jump straight to wireframes. Some might skip wireframing and jump straight to mockups. But when you skip one or the either, you lose a lot of conceptual detail and refinement. The interface suffers because it enters into a stage prematurely and misses certain key elements or isn’t thoroughly refined.
What happens is you either end up creating the basic concept of the interface during the wireframing stage, or you end up refining the concept during the mockup stage.
- This is counter-productive because sketching is where creating the basic concept is done.
- Wireframing is where refining the concept is done.
- And mockups (prototype) is where the visual graphics and content is done, not the interface concepting.
When you skip the sketching and wireframing stage, you end up thinking about too many things in one stage. This not only makes it hard on the designer, but it takes a lot away from the interface because the concept doesn’t get the full attention it needs to fully develop.
Source: http://uxmovement.com/wireframes/why-its-important-to-sketch-before-you-wireframe/
Example: Sketching
Resource: http://mobile.smashingmagazine.com/2012/06/07/sketching-a-new-mobile-web/
Mobile First
As Luke handily describes in his Mobile First book, the constraints of the mobile medium force designers to focus on what’s truly important to a product or service. When you lose 80% of your screen real estate, all the extraneous bloat that tends to finds its way onto large screen designs doesn’t seem so attractive or necessary anymore. Mobile provides a great opportunity to reevaluate what content/functionality is necessary and gives us an opportunity to strip away the redundant across the board (and not just for mobile users either). These constraints also encourage ease-of-use, intuitiveness and speed as essential ingredients to a good user experience.
This mental shift in design strategy has designers wire-framing, Photoshopping, prototyping and presenting on small screens first. Establishing how a core experience fleshed out on small screens can translate up to larger screens can be more logical than trying to cram large complex desktop designs onto small screens.
Above from: http://bradfrostweb.com/blog/mobile/the-many-faces-of-mobile-first/
Website Critiques
Group Discussion
- What are the client’s objectives and goals for the website?
- Who is the target audience?
- Did the designers approach this project “mobile first?” Explain in more detail.
Bootstrap Tutorial
Download the source files for this tutorial here:
http://everythingaboutweb.com/classes/examples/bootstrap3/source_files.zip
Class 07
Midterm Projects
Examples of “A-level” Work
For the midterm presentation, combine all the deliverables into ONE pdf. This will make it easy to present your work.
Regarding Extra Credit
EXTRA CREDIT: Build one of the wireframes in Bootstrap (or any other framework) and post to the class server.
The example below was not built in Bootstrap but it’s an example of a “wireframe” prototype.
Example of Responsive “Wireframe” Prototype
Alima Pure Cosmetics Responsive Prototype
http://www.everythingaboutweb.com/classes/examples/midterm-flexible-queries/final_web/
Please note: Make your images around twice the size needed in order for the images to scale and respond “responsively.” For example, if your footer image is 960 pixels in width, create a grey box for the footer that is 1900 pixels in width. You may allow the height to scale accordingly so the image will be larger in height also.
Group Presentations – April 9
Wireframes: Casey Caputo, Jacqueline Pearson, Gaby Velasquez
Resources
Beginner’s Guide to Wireframing
http://webdesign.tutsplus.com/tutorials/a-beginners-guide-to-wireframing–webdesign-7399
Wireframes
How to read a Wireframe
PDF: How-to-read-a-wireframe Fuzzy-Math
Example of Wireframes
http://support.balsamiq.com/customer/portal/articles/615901
Another Example
Wireframe Template for Responsive Web Design
http://www.rubbercheese.com/blog/comments/a-wireframe-template-for-responsive-web-design
Free Photoshop Wireframe Kit
http://rafaltomal.com/free-photoshop-wireframe-kit/
