GD 67 Class 06 + 07

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

sketching
Resource: http://mobile.smashingmagazine.com/2012/06/07/sketching-a-new-mobile-web/


Mobile First

mobile-first

As Luke handily describes in his Mobile First bookthe 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

  1. What are the client’s objectives and goals for the website?
  2. Who is the target audience?
  3. Did the designers approach this project “mobile first?” Explain in more detail.

Bootstrap Tutorial

Bootstrap 3 Tutorial: Part 2

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.

Example 1

Example 2

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

Fuzzy-Math-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

3ov4SLv

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/

Leave a comment