WEB202 » Resources
Books:
- The Elements of User Experience: User-Centered Design for the Web, by Jesse James Garrett
- Eyetracking Web Usability, by Jakob Nielsen and Kara Pernice
- A Project Guide to UX Design: For user experience designers in the field or in the making, by Russ Unger & Carolyn Chandler
- Information Architecture: Blueprints for the Web, by Christina Wodtke & Austin Govella
- Web Anatomy: Interaction Design Frameworks that Work, by Robert Hoekman, Jr. & Jared Spool
- Designing for Interaction: Creating Innovative Applications and Devices (2nd Edition), by Dan Saffer
- Undercover User Experience Design (Voices That Matter), by Cennydd Bowles & James Box
- Web Design for ROI: Turning Browsers into Buyers & Prospects into Leads, by Lance Loveday
- PHP Solutions: Dynamic Web Design Made Easy, by David Powers
- Effortless E-Commerce with PHP and MySQL, by Larry Ullman
- Measuring the User Experience: Collecting, Analyzing, and Presenting Usability Metrics, by Tom Tullis & Bill Albert
Websites:
- Product Experience Strategy & Design | AdaptivePath
- Insights and inspiration for the user experience community | UXmatters
- Jakob Nielsen on Usability and Web Design | UseIt
- Visual Vocabulary for Information Architecture | Jesse James Garrett
- Measuring the User Experience | Tom Tullis & Bill Albert
- User Experience & Usability Blog | UXBooth
- Quantitative Usability, Statistics and Six-Sigma | Measuring Usability
- Sleek, intuitive, and powerful front-end framework for faster and easier web development | Bootstrap
- User Experience Design in Adobe Illustrator | Matt D. Smith
Downloads:
- Leveraging Business Value: How ROI Changes User Experience | AdaptivePath
- Patterns for Sign Up & Ramp Up: Inspirations and Guidelines from the Web 2.0 Landscape | AdaptivePath
- Shapes of the Visual Vocabulary | Jesse James Garrett
- Workstation Technologies Template | Premium Design Works
- 360º Slideshow JavaScript | Premium Design Works
- Persona Template | Wireframes Magazine
- Sketching & Wireframing Kit | Janko At Warp Speed
- Sketchy Illustrator Wireframes | Matthew Rea Design
- Sqetch Illustrator Wireframe Toolkit | Wireframes Magazine
- Free Illustrator Wireframe Elements | The Freelance Designer
- Design Stencil Kit version 1.0 | YAHOO!
- Webpage Wireframe Stencil | Pixeden
- User Interface Design Framework | Webalys
Tutorials:
- Building a Website Wireframe in Illustrator | AiBURN
- How to Convert a Photoshop Mockup to XHTML/CSS | Line25
- Creating a Website Wireframe in Illustrator | Premium Design Works
Articles:
- How to Make Your Shopping Cart Suck Less | The Oatmeal
- Develop Personas | Usability.gov
- Reseach-Based Web Design & Usability Guidelines | Usability.gov
- Personas: The Foundation of a Great User Experience | UX Magazine
- 35 Excellent Ecommerce User Interface Designs | Vandelay Design Blog
- Shopping Carts Gallery: Examples and Good Practices | Smashing Magazine
Podcasts:
- How to be a UX Team of One | Adaptive Path
This portion of the Premium Design Works website is written by Mike Sinkula for the Web Design & Development students at Seattle Central College and the Human Centered Design & Engineering students at the University of Washington.
26 Comments:
Placeholder images! Yay!
http://placehold.it/
This site is cool: if features 50 (!) different color picking/designer sites.
http://www.printmag.com/article/50-best-color-sites-for-designers/
Have fun with bubbly, splashy, sedate moody colors !
Christian
http://www.smashingmagazine.com/2008/02/07/shopping-carts-gallery-examples-and-good-practices/
This is a great link on how to create a good shopping card visual.
Make that “cart”
Free book on product and service design from 37Signals.com, the folks who created Basecamp, one of the most popular business collaboration tools in use today.
http://gettingreal.37signals.com/
Read it online or sign up for their mailing list (non-spammy) to download the PDF version.
Are you a techie? Of course you are.
So, go make some money using your web skills, your reading list and O’Reilly Books’ brand new Affiliate Program:
http://oreilly.com/affiliates/index.html?imm_mid=0a504f&cmp=em-npa-pr-brp-affiliiate-program
This is similar to the Amazon Affiliate program:
Build a nice e-store wrapper for any of the 3,000+ titles O’Reilly sells, entice customers, and you’ll get 5% of the purchase price (or $100 for convention sign-ups!)
By the end of WEB202, you’ll be ready to repurpose your class coursework directly into a technical bookstore.
Have fun.
For students:
Fair Use
http://www.copyright.gov/fls/fl102.html
§ 107. Limitations on exclusive rights: Fair use
Notwithstanding the provisions of sections 106 and 106A, the fair use
of a copyrighted work, including such use by reproduction in copies or
phonorecords or by any other means specified by that section, for
purposes such as criticism, comment, news reporting, teaching
(including multiple copies for classroom use), scholarship, or
research, is not an infringement of copyright. In determining whether
the use made of a work in any particular case is a fair use the
factors to be considered shall include —
(1) the purpose and character of the use, including whether such use
is of a commercial nature or is for nonprofit educational purposes;
(2) the nature of the copyrighted work;
(3) the amount and substantiality of the portion used in relation to
the copyrighted work as a whole; and
(4) the effect of the use upon the potential market for or value of
the copyrighted work.
The fact that a work is unpublished shall not itself bar a finding of
fair use if such finding is made upon consideration of all the above
factors.
Source: U.S. Copyright Office
Good read on how some things still are in practice and what we can do to think about them while making “carts”…
http://uxdesign.smashingmagazine.com/2012/09/04/the-state-of-e-commerce-checkout-design-2012/
Freebie:
Customizable CSS3 animated on-off switch
http://proto.io/freebies/
Proto.io is a pretty good online prototyping tool, btw.
It’s not the only website I read honest…
Good Form Validation Discussion on Shopping Cart, Checkout process…
http://uxdesign.smashingmagazine.com/2012/06/27/form-field-validation-errors-only-approach/
SurveyMonkey.com
An easy(ish) way to get minimal user research
Ronco Spray-On Usability
http://daringfireball.net/2004/04/spray_on_usability
Why developers should never be trusted with your user interface.
Eightshape Unify
A comprehensive documentation system for UX design project from the pros at Eightshapes.
Templates, workflows, tools
http://unify.eightshapes.com
Samples of documents used created using the Unify system
http://unify.eightshapes.com/about-the-system/samples/
Excellent UX & web design book/ebook publishers
http://rosenfeldmedia.com/books
Example titles:
Storytelling for User Experience
Card Sorting
Prototyping
Design is the Problem
Mental Models
Eye Tracking the User Experience
Web Form Design
See also http://rosenfeldmedia.com/deals/
They offer frequent deep discounts
http://www.jqueryui.com
Great read on eCommerce sites that have problems. Seems like it all falls back to being easy, straightforward and simple in design.
http://mashable.com/2012/04/12/ecommerce-mistakes/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+Mashable+%28Mashable%29
Here is the tutorial for making a tabbed content area with CSS and jQuery that I used on my ITC200 project.
http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-a-slick-tabbed-content-area/
I used ‘Example 2’ of this JQuery tutorial for my thumbnail rollovers:
http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
And this is the JQuery slideshow I used:
http://jquery.malsup.com/cycle/pager3.html
I got the slide show for my ITC200 final from these guys. http://sorgalla.com/projects/jcarousel/
Mine looks a little different because I broke into the images folder and styled the buttons.
This is a great tutorial for Simple Tabs w/ CSS & jQuery:
http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/
This review of the e-Commerce WordPress plugin was written by a professional programmer who uses Magento. He also discusses code quality.
Here’s the website I showed in class:
http://www.growandmake.com/
Hi Deb,
I’m curious to learn why you showed our site in your class?
-Will
Will,
She thought it was good.
Great. I’m about to do a home page re-design, so would love any feedback. We’re going to have more of a blog/twitter feed focus.
Heres a shopping site that takes customer choice to the n’th degree.
http://instructables.spreadshirt.com/us/US/Shop/
Trackbacks: