WEB200 > Resources
Books:
- Don’t Make Me Think: A Common Sense Approach to Web Usability, by Steve Krug
- The Zen of CSS Design: Visual Enlightenment for the Web, by Dave Shea & Molly E. Holzschlag
- Transcending CSS: The Fine Art of Web Design, by Andy Clarke & Molly E. Holzschlag
- Color Index: Over 1100 Color Combinations, CMYK and RGB Formulas, for Print and Web Media, by Jim Krause
- The Web Designer’s Idea Book: The Ultimate Guide To Themes, Trends & Styles In Website Design, by Patrick McNeil
- HTML Mastery: Semantics, Standards, and Styling, Paul Haine
- HTML5 Mastery: Semantics, Standards, and Styling, Anselm Bradford , Paul Haine
- CSS Mastery: Advanced Web Standards Solutions, Andy Budd, Simon Collison, Cameron Moll
- PHP Solutions: Dynamic Web Design Made Easy, by David Powers
- Programming PHP, Rasmus Lerdorf, Kevin Tatroe, Peter MacIntyre
- Introducing HTML5, by Bruce Lawson, Remy Sharp
Websites:
- Lorem Ipsum – All the facts | Lipsum.com
- HTML Lorem Ipsum | html-ipsum.com
- Color Trends + Palettes | COLOURlovers.com
- Adobe Color Palettes | Kuler by Adobe.com
- 400+ High Quality Patterns | DesignReviver.com
- 960px Grid System | 960.com
- Design Elements, Trends & Problems in Web Design | DesignMeltdown.com
- Fluid 960 Grid System | Design Influences
- Icons & Icon Packs Download | IconsPedia
- Wireframes to Visual Design | WireframeShowcase
- A documentation system to produce wireframes, etc. | EightShapes Unify
- Rehabilitation Institute of Washington Client Staging Area | Premium Design Works
- Immediate Unbiased Design Advice | Good Fucking Design Advice
- Because Every IA Has Something Funky Up Their Sleeve | Wireframes Magazine
Articles:
- Grid and Column Designs | Web Designer Wall
- Why You Should Create a Wireframe First | Propaganda Party
- Quickstart on Prototyping with Wireframes | EightShapes
- A new global visual language for the BBC’s digital services | BBC Internet Blog
- Common Fonts for Windows & Mac | Web Design Tips & Tricks
Tutorials:
- Creating a Website Wireframe in Illustrator | Premium Design Works
- Creating Tints & Shades in Illustrator | Premium Design Works
- Building a Website Wireframe in Illustrator | AiBURN
- How to Convert a Photoshop Mockup to XHTML/CSS | Line25
- Create a Gnarly Snowboarding Themed Web Design | Line25
- The Right Way to Wireframe | YouTube
Downloads:
- 960px Grid System Illustrator Templates | 960.gs
- Barbacoa Information Architecture | Premium Design Works
- Barbacoa Wireframe | Premium Design Works
- Barbacoa Template | Premium Design Works
- Rehabilitation Institute of Washington Information Architecture | Premium Design Works
- Rehabilitation Institute of Washington Wireframes | Premium Design Works
- Mike’s 960 Grid Wireframe | Poo Machine
- Rehabilitation Institute of Washington Color Palette | Premium Design Works
- Rehabilitation Institute of Washington Master Art | Premium Design Works
- Rehabilitation Institute of Washington Page Templates | Premium Design Works
- Building an HTML Template From Master Art | Premium Design Works
- Building an HTML Protosite Using PHP | Premium Design Works
- Wireframe Symbols | Johnny Nines
- Sketching & Wireframing Kit | Janko At Warp Speed
- Sketchy Illustrator Wireframes | Matthew Rea Design
- Sqetch Illustrator Wireframe Toolkit | Wireframes Magazine
- User Interface Design Framework | Webalys
- Illustrator 974px Grid System (12) | The Grid System
- JQuery Cycle Plugin | Malsup
- A Tiny jQuery Slideshow Plugin | Craftyslide
This portion of the Premium Design Works website is written by Mike Sinkula and dedicated to the Web Design & Development students at Seattle Central Community College.
13 Comments:
Leave a Comment:









Great book on Responsive web design called… drum roll… Responsive Web Design By Ethan Marcotte.
http://www.abookapart.com/products/responsive-web-design
Here is a site with 50 different links to wireframe symbols and kits.
http://www.smashingapps.com/2011/02/02/50-free-web-ui-mobile-ui-wireframe-kits-and-source-files-for-designers.html
This one is nice since the images can increase without loss.
http://www.fuelyourinterface.com/free-web-ui-wireframe-kit/
Enjoy
I just found a bunch of usability resources at http://www.userfocus.co.uk/articles/index.html#Anchor-ebook.
The first two booklets in the list take on user-centered design and usability test moderation, and are free.
I bought the ‘Morae for Usability Practitioners’ book (about $15), but I won’t have time to read it until later in the quarter.
I’ll post an opinion on the free books later this weekend.
I find that “Introducing HTML5″ is an excellent overview to the new HTML5 features, but it’s nothing *but* an overview.
I think that most design-oriented students will find ‘HTML5 and CSS3 for the Real World’ (Sitepoint, May 2011) to be far more useful. Here’s the companion site for the book:
http://www.sitepoint.com/books/htmlcss1/
By the way, here’s an *excellent* way to get into dangerous fun with HTML5/CSS3:
http://foundation.zurb.com
A full-blown responsive, cutting-edge HTML5 site template.
Found this article on a very interesting UX study with a guy who has never used a computer before. Some great key points towards the end.
http://jboriss.wordpress.com/2011/07/06/user-testing-in-the-wild-joes-first-computer-encounter/
splendid:
http://font-combinator.com/
I found this free online Spider Simulator on Summit Media very helpful. You type in your url and it returns a grade in percentage points with additional information about how fast your pages loaded, if you have titles, keywords, meta tags, images, etc.
http://tools.summitmedia.co.uk/spider/
Awesome Lorem Ipsum Generator app:
http://littleipsum.com/
:)
Came across these sites lots of ux information
http://www.uxmatters.com
http://www.useit.com/
http://adaptivepath.com/
http://www.uxmag.com/
http://www.ixda.org/
I always wondered how Google collected ranked website results… this is a short explanation.
forgot this… http://www.google.com/librariancenter/articles/0512_01.html
“Export Adobe Illustrator Drawings and Animations to HTML5″
- works for Adobe Creative Suite 3, 4, 5
- versions for Windows or Mac
Full Article:
http://www.webmonkey.com/2010/10/export-adobe-illustrator-drawings-and-animations-to-html5/
Here is a great resource for nice large, very high resolution free textures perfect for background images for your site. You can download up to 15MB per day: http://www.cgtextures.com/