Design inspiration, tips tricks and theory. Includes links on logos, layout, typography and designing grid systems on the web.

37signals: An Introduction to Using Patterns in Web Design (#)

Ryan Singer from 37Signals shares a great method for solving an interface design challenge, given the myriad of possibilities that the layout of an interface can have.

His method works first by listing elements and then grouping related ones together, after which the groups are prioritized, mocked up and then joined together into a unit before being drawn up for real.

There are some good links at the bottom and don't miss the link back to their blog for the ensuing discussion.

Simple Design Tips for Non-Designers (#)

Some great tips from Garrett that really ring home here at Fiftyfoureleven. As more of a programmer, I have come to learn a lot of what Garrett offers here for people who aren't from a design background.

The Elements of Typographic Style Applied to the Web - a practical guide to web typography (#)

Richard Rutter, aided by Steve Marshall, takes the book The Elements of Typographic Style and will step through Bringhurst’s working principles, explaining how to accomplish each using techniques available in HTML and CSS.

This should be an excellent resource for people who design websites.

Dave Werner's Portfolio 2006 (#)

Just gotta say wow. A window into someone elses creative mind and process, always good for some design inspiration.

LogoPond - Identity Inspiration (#)

A design gallery for logos and another great stop for inspiration. Also has a forum with a marketplace and areas to dicuss logo design and resources which includes books and links to helpful articles.

Logo Design History - Famous Logos (#)

An a-z listing of famous brands, their logo thru time and a short history of how the logo came to be what it is. Many of the examples also include a downloadable .eps file of the logos.

The website also features some comments on logo design trends and don't miss the The Big Page of Branding & Corporate Identity Design, which features a huge list of Corporate Identity Manuals & Guides and also The 22 Immutable Laws of Branding.

Five Principles to Design By (#)

Simplicity is the Ultimate Sophistication, the last principle in the list but one that I can appreciate when I see it.

Joshua Porter provides five simple design tips that could help many designers (and wanna-be designers like me). I would only add that a sixth principle would be to stop and review a design based on these principles at different stages of the process. It can be easy to over design.

Don't miss the comments for some healthy debate on the principles that Joshua presents.

Eyetracking points the way to effective news article design (#)

Another excellent article that covers an eye tracking study, and in this case research found that by working over the content of a page in addition to the layout of the content, readers would spend less time on the page and yet retained 34% more about what they read!

Three different short case studies are reviewed, each with it's own lesson.

Evolution of a Header (#)

Garrett Dimon wrote up some details about the evolution of the header area on a couple of screens for his webapp Sifter. It provides a very nice overview of the stages of development (with sketches and images) and we get to see how the decisions were made. I find these articles a good way to bring some focus back to what they are discussing, and in this case I feel compelled to examine how I handle meta data in our CMS and on my websites like 5411.

Five simple steps to better typography - Mark Boulton | Information design (#)

This is the first in a series of very good articles about typography. The rest are as follows:

  1. Measure the measure
  2. Hanging punctuation
  3. Ligatures
  4. Typographic Hierarchy - size
  5. Typographic Hierarchy - weight

Online Printers (#)

Khaled Abou Alfa offers up a list of several online printers that he has run into. If you are looking to make a business card, online printers could be your answer.

F-Shaped Pattern For Reading Web Content (#)

Some interesting eyetracking research done by Jakob Nielsen's Nielsen Norman Group. Some things to keep in mind here, be it for writing style or for advertisement placement.

Of course there are exceptions. Take Jacob's site, for instance: if a user is interested, they may just read more then this study shows.

As the Page Scrolls (#)

Some interesting notes on page design and longer pages with more information vs. shorter pages with information broken up. This study suggests that longer pages worked better, and that care should be taken with horizontal lines in page layouts.

Windows XP Font Set (#)

If you've ever wondered what fonts ship and install by default with Windows XP (and I know you have), Web Page Design for Designers has you covered. Microsoft has the full list.

Typography for Headlines (#)

Over 90 screenshots of different typography used in headlines from various websites. The main difference beside the font being used (color size etc.) is some of the creativity seen with meta data such as dates and categories. I've always felt that data should come after the title in the markup, not above. But as seen here, not everyone feels this way.

Introducing sIFR: The Healthy Alternative to Browser Text (#)

Mike Davidson introduces siFR to the world with a lenthy, well researched history lesson about typography on the web.

Scaleable Inman Flash Replacement = "Custom typography for the masses" made possible thru CSS, Javascipt and Flash.

Does design matter? (#)

Joe Clark boils it down to basics in these presentation notes that weren't given at SXSW 2005.

From the notes: So the relationship of graphic design to Web success is the same as the relationship of standards compliance to Web success: You only find it on sites that are visited solely by people who really understand the Web. We don’t have any proof that mainstream success requires good design, or even good code, for that matter

Five simple steps to designing grid systems (#)

The preface to what looks to be a great series on designing grid systems, written by Mark Boulton. Before we even begin to tackle designing grid systems we need to have a basic understanding of what they are, why we use them and where they came from.

Check out the Resource categories for older content

The latest from my personal website,

SiteUptime Web Site Monitoring Service

Sitepoint's web devlopment books have helped me out on many occasions both for finding a quick solution to a problem but also to level out my knowlegde in weaker areas (JavaScript, I'm looking at you!). I am recommending the following titles from my bookshelf:

The Principles Of Successful Freelancing

I started freelancing by diving in head first and getting on with it. Many years and a lot of experience later I was still able to take away some gems from this book, and there are plenty I wish I had thought of beforehand. If you are new to freelancing and have a lot of questions (or maybe don't know what questions to ask!) do yourself a favor and at least check out the sample chapters.

The Art & Science Of JavaScript

The author line-up for this book says it all. 7 excellent developers show you how to get your JavaScript coding up to speed with 7 chapters of great theory, code and examples. Metaprogramming with JavaScript (chapter 5 from Dan Webb) really helped me iron out some things I was missing about JavaScript. That said each chapter really helped me to develop my JavaScript skills beyond simple Ajax calls and html insertion with libs like JQuery.

The PHP Anthology: 101 Essential Tips, Tricks & Hacks

Like the other books listed here, this provides a great reference for the PHP developer looking to have the right answers from the right people at their fingertips. I tend to pull this off the shelf when I need to delve into new territory and usually find a workable solution to keep development moving. This only needs to happen once and you recoup the price of the book in time saved from having to develop the solution or find the right pattern for getting the job done..