Sexy Web Design Inspiration

Reading Sexy Web Design by Elliot Jay Stocks has given me a lot to consider in developing websites, as well as a lot of good inspiration and resource links. Therefore, I thought I’d quickly collect and catalog all the links that Elliot gives in his book for my future reference. Of course, these links are available freely on the web, so everyone can benefit from them. However, you won’t get the full benefit unless you read about them in the context in which they are written in the book, so head on over to SitePoint.com and pick yourself up a copy.

As the majority of the links in the books are provided for inspiration, I’ll leave those in order below. However, there are some really excellent online articles and tutorials, as well as printed books that Elliot references in his book. Those are more relevant for learning about good design, and I’ll post those first.

Articles

• Paper Prototyping – by Shawn Medero at A List Apart
• Web Form Design: Filling In The Blanks – by Luke Wroblewski
• CSS Layouts: The Fixed. The Fluid. The Elastic. – by Mike Cherim
• Fixed, Fluid, or Elastic Width Layouts? – by Anup Shah
• A Practical Guide to Designing for the Web – by Mark Boulton (PDF)
• Photoshop Levels tool Tutorial – from Creative Pro Magazine
• Depth of Field Intro – from Picture Correct
• 15 Examples of Effective Deliberate Blur – from Digital Photography School
• Crop Creatively Intro – by Mark Boulton at 24ways
• CSS Decorative Gallery – borders for photos – by Nick La at Web Designer Wall
• Eight Definitive Font Stacks – from SitePoint
• Revised Image Replacement – by Dave Shea
• Scalable Inman Flash Replacement (sIFR) – pioneered by Shaun Inman
• sIFR Lite
• Screen Reader Visibility – from CSS-Discuss
• @font-face in IE: Making Web Fonts Work – by Jon Tangerine
• Destroy The Web 2.0 Look – by Elliot Jay Stocks for the Future of Web Design in New York
• CSS Sprites: Image Slicing’s Kiss of Death – from A List Apart
• Better Nav Image Replacement – by Elliot Jay Stocks
• Writing an Interface Style Guide – from A List Apart
• Swatches Video Tutorial – from TechTutor.tv

Books

• WEB Design: E-Commerce – (Koln: Taschen, 2007)
• The Principles of Beautiful Web Design, first chapter – by Jason Beaird (Melbourne: SitePoint, 2007)
• The Elements of Typographic Style – (Vancouver: Hartley and Marks, 1992)
• The Web Designer’s Idea Book – by Patrick McNeill (Cincinnati: How Books, 2008)

Chapter 1: Interfaces Are Sexy

• 37signals’ Basecamp – clean form design
• Fall For Tennessee – attractive design
• Dara’s Garden – imagery/atmosphere
• Erratic Wisdom – navigation styles
• Mint – polished form design
• YouTube, MySpace, Vimeo – video player designs
• 280 Slides – look & feel (desktop app)
• Volunteer Lawn – packed with info, not cluttered
• Decor8 – small embellishments
• I Love Typography – typography
• Jason Santa Maria – typography
• Revyver – bold use of whitespace
• Kayak – draggable sliders

Chapter 2: Research

• Web Directions North – straightforward design
• The Sidebar Workshops – informative and cool
• dConstruct – big-name speakers obvious
• South by Southwest Interactive – general info on homepage
• A List Apart, An Event Apart – literal tie-in, branding ID between sites

Inspiration

• Flickr
• Patrick Haney’s Flickr collection
• Web Design Inspiration Flickr pool
• Vandelay Design’s List of 99 Flickr Groups for Inspiration
• Smashing Magazine
• UI Pattern Factory
• Elliot’s atmosphere set on Flickr
• Elliot’s set of composition examples
• Chris Messina’s Factory Joe – User-Interface examples
• Pattern Tap – more UI examples
• Chris Messina’s design patterns on Flickr

Collection Tools

• RealMac Software’s Little Snapper – Mac
• TechSmith’s Snagit – Windows
• Evernote – note-keeping for Windows & Mac

Chapter 3: Structure

Tools to Create Structures (Sitemaps and the like)

• Moleskine notebooks
• Microsoft Visio
• OmniGraffle
• ConceptDraw MindMap
• WriteMaps
• Paper Prototyping – by Shawn Medero at A List Apart

Chapter 4: Navigation and Interaction

• TasteBook – navigation and search
• Happy Cog – unorthodox, but clear
• 13 Creative, Deluge Studios – horizontal nav
• Emblematiq, Cameron.io – vertical nav
• Movable Type, SitePoint, Web Directions North speakers – supporting links
• Apple Store UK – breadcrumbs
• Media Temple’s knowledge base, Get Satisfaction – search bar
• Design Reviver – pagination
• Jesus Rodriguez Velasco – lists
• Apple, Designsensory – dropdowns and rollovers
• Coda – tabs, tool tips
• moo.fx – accordion menu
• Web Designer Wall – tag cloud
• Ning – forms
• Web Form Design: Filling In The Blanks – by Luke Wroblewski
• Ableton, Vimeo – complex vs. minimal
• WEB Design: E-Commerce – (Koln: Taschen, 2007)

Chapter 5: Aesthetics

• The Principles of Beautiful Web Design, first chapter – by Jason Beaird (Melbourne: SitePoint, 2007)
• Golden Ratio Calculator
• The Elements of Typographic Style – (Vancouver: Hartley and Marks, 1992)
• CSS Layouts: The Fixed. The Fluid. The Elastic. – by Mike Cherim
• Fixed, Fluid, or Elastic Width Layouts? – by Anup Shah
• Sursly – horizontal scrolling effect
• 960 Grid System, Yahoo User Interface Library’s Grid, Blueprint – grid systems
• Zeldman, Johnny Hollow, A Tennessee Winter, Brunet-Garcia – color, atmosphere
• A Practical Guide to Designing for the Web – by Mark Boulton (PDF)
• The Color Scheme Generator 2
• Adobe’s Kuler
• COLOURlovers
• The Web Designer’s Idea Book – by Patrick McNeill (Cincinnati: How Books, 2008)
• Silverback – depth
• Maxvoltar – letterpress
• Alzheimer’s Self-Test – appropriate imagery
• Photoshop Levels tool Tutorial – from Creative Pro Magazine
• Depth of Field Intro – from Picture Correct
• 15 Examples of Effective Deliberate Blur – from Digital Photography School
• Crop Creatively Intro – by Mark Boulton at 24ways
• Joyent, Squared Eye – illustrated characters
• Raka Creative, Threadless – iconography
• CSS Decorative Gallery – borders for photos – by Nick La at Web Designer Wall
• Eight Definitive Font Stacks – from SitePoint
• Revised Image Replacement – by Dave Shea
• Scalable Inman Flash Replacement (sIFR) – pioneered by Shaun Inman
• sIFR Lite
• Screen Reader Visibility – from CSS-Discuss
• @font-face in IE: Making Web Fonts Work – by Jon Tangerine
• SimpleBits, I Love Typography, designr.it – beautiful fonts
• Destroy The Web 2.0 Look – by Elliot Jay Stocks for the Future of Web Design in New York
• Museo Font

Chapter 6: Deliverables

• CSS Sprites: Image Slicing’s Kiss of Death – from A List Apart
• Better Nav Image Replacement – by Elliot Jay Stocks
• Writing an Interface Style Guide – from A List Apart
• Swatches Video Tutorial – from TechTutor.tv

This is a great resource for me, but all the credit goes to Elliot Jay Stocks for his work wrangling up these links. I’m just glad I could learn from his experience. Be sure to visit his site for more goodness.

About these ads