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
- Digging into WordPress, by Chris Coyier & Jeff Starr
- Responsive Web Design by Ethan Marcotte, by Ethan Marcotte
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
- Mozilla Developer Network | Mozilla
- Shiny (Responsive) Demos | Media Queries
- A rock-solid default template for HTML5 | HTML5 Boilerplate
- Sleek, intuitive, and powerful front-end framework for faster and easier web development | Bootstrap
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
- Responsive Web Design: What It Is and How To Use It | Smashing Coding
- Keeping Navigation Current With PHP | A List Apart
- Ultimate Guide to Website Wireframing | Six Revisions
- Responsive Web Design | A List Apart
- 10 Rock Solid Website Layout Examples | Design Shack
- Flat vs. Deep Website Hierarchies | Jakob Nielsen
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
- Create a Responsive Web Design with Media Queries | Line25
- How to wireframe two web layouts in Illustrator using 960.gs | The Next Web
- A Contact Form for Your Website | HCDE537 | Premium Design Works
Examples:
- Wireframes for the HCDE Department Website | Mike Sinkula
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
- Jet City Improv Wireframes | Premium Design Works
- Jet City Improv Visual Design (Final) | Premium Design Works
- 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
- Free Illustrator Wireframe Elements | The Freelance Designer
- Design Stencil Kit version 1.0 | YAHOO!
- Webpage Wireframe Stencil | Pixeden
- 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 for the Web Design & Development students at Seattle Central College and the Human Centered Design & Engineering students at the University of Washington.
28 Comments:
Hey Mike, found this cool article on “the 7 rules of creating gorgeous UI”. Kind of a crash course, but it could be useful for the 200 folks!
https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-1-559d4e805cda
Here is the design specifications for Google’s “Material Design.”
A great resource for design principles and ideas.
However, keep in mind phone != desktop.
http://www.google.com/design/spec/material-design/introduction.html
CodeAcross Seattle, on February 22, is a full day of events for incubating civic innovation in our city. And, it’s free!
http://codeforseattle.org/code-across/
Here’s a link for some laughs:
click the blue door and watch the resulting page scroll upward…
who does this stuff??
http://heaven.internetarchaeology.org/
http://www.behance.net/
I am enjoying this book:
“Clout – The Art and Science of Influencial Web Content” by Colleen Jones, 2011. It has been very helpful in setting up the information architecture and wireframes for my website. I expect it will really shine when it comes to including the website’s content.
http://www.uxmatters.com/mt/archives/2011/02/content-and-clout-a-chat-with-colleen-jones.php
http://www.amazon.com/Clout-Science-Influential-Content-Voices/dp/0321733010
Excellent book:
The design of sites : patterns for creating winning web sites / Douglas K. van Duyne, James A. Landay, Jason I. Hong
The library has it:
http://library.sccd.ctc.edu/vwebv/holdingsInfo?searchId=10&recCount=30&recPointer=0&bibId=192262
Upcoming Mobile Design event @ Interact Seattle:
Mobile Usability Testing
by DAVID KELLEY on JULY 9, 2012
Join us July 18th with Tom Pease from Analytic Design Group ( http://www.analyticdesigngroup.com/ ) with a presentation on Mobile Usability Testing.
Abstract: Mobile technology is in an ever faster spinning cycle of change: they are radically changing the way we live, work and play; this change is affecting how people respond to these devices; and then change to the devices is affecting our response to them. It’s critical for mobile product managers, designers, developers and marketers to understand get inside that loop.
At ADGi we’ve been able to do just that in an innovative and cost effective way. Step into the loop with me and find out about our current methods and processes and learn what pitfalls you can avoid.
WHEN
Date: Wednesday, July 18th, 2012
Time: 7:00pm – 8:30pm
WHERE
Hope you can join us!
Aquent
1109 North 36th Street
Seattle, WA, 98103
[About 1 block west of Stone & 36th in Fremont]
If you get lost, call David at 206.653.5143
(free parking in the lot across from the building)
Commonly asked questions:
· Yes, this event is open to everyone! Feel free to bring a friend.
· No, there is never a charge to attend
· There is no formal RSVP process, but if you are attending, feel free to let us know via email.
Sexy as hell options when making “responsive” navigation…
Remember that a mobile user will use any means of gathering information if the “options” are given. Don’t assume you know what is best for a user, test user groups.
http://bradfrostweb.com/blog/web/responsive-nav-patterns/#footer-anchor
Surviving Design Projects: The Game
https://www.thegamecrafter.com/games/surviving-design-projects
Card Game, 3-7 players, less than 30 minutes to play, $15
Designed by co-founder of UX design firm EightShapes
One for the GridMeister:
Upcoming grid creation tool on the web
http://GridSetApp.com
Design your grid, save it, & modify it.
When you’re ready to use it, GridSet hands you a set of optimized positioning classes and a sample HTML template.
Check out the Specimen collection at lower left. Some real classics based on famous design work of the 20th Century.
Still in private beta, but accepting applications on the waitlist.
Mike,
The wireframe resource you list (http://www.johnnynines.com/2009/03/wireframe-symbols/comment-page-1/#comment-4891) seems to no longer be available.
Sad clown …
Mike,
The wireframe resource you list (http://www.johnnynines.com/2009/03/wireframe-symbols/comment-page-1/#comment-4891) seem to no longer be available.
Sad clown …
If you want to learn pure CSS, then these 20 advanced tutorials are a great place to start. Topics range from sliders, accordions, forms, layouts, to even image transitions. All with just plane old CSS development tricks
http://designfestival.com/twenty-top-advanced-css-tutorials/
Here is a list of almost everything a designer could need. Seems to cover all the bases.
http://www.designerslist.info/
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/
Trackbacks: