15+ Must have Web Resources for Designers

Nitin — Fri, 18 Sep 2009 09:39:02 +0000

In last few weeks, while revising and organizing all my resource files and references i realized how helpful they have been to develop myself as a functional designer. Here is a compilation of some useful documents and resources which i think every designer should refer.

Design Readings

Vignelli’s Canon
A 96 page great book published by Massimo Vignelli. He shares his methodology & experiences with type, grid & design thinking. And the great thing is that he has released it for free online. A must read for every designer and in fact, i will suggest also take print and keep a hard-copy for yourself.

Grids Are Good !
Grids are Good ! Ya ! And so this PDF is.A nice document by Khoi Vinh and Mark Boulton explaining step by step Grid Construction for a web.

Better Typography – Mark Boulton
A detailed 129 slides for better typography. Also talks about Gray Box modeling and web grids.

Web Typography – Jeff Croft
Another typography document. Jeff Croft covers type basics to CSS styling.

Web Application Form Design
By Luke Wroblewski, practical explanation and guidelines for designing web forms. Really helpful to understand the way user interacts and performs tasks with forms.

Why Design ?
AIGA has been alaways providing respectful resources for design students and proffesionals. This booklet outlines the design business strategy and the process to approach a project.

Advice for Emerging Designers : After School Special
12 useful advices for students and also who are in state of developing a new design business.

Introduction to Good Usability
Visual impact is necessary but a good usability approach is what makes a website or application functional to the end-user. Introduction to good usability by Peter Pixel works well as a handy e-book for basic usability guidelines.

Getting Real by 37 Signals
A book with 16 chapters, 91 essays explaining practical approach to web-app development. And best of all its free to read online !

Corporate Identity Process
Detailed document by Identityworks.com for designing better corporate identities and brands.

Wireframes for the Wicked
37 slides by Nick Finck. Nice documentation about wire-framing and patterns involved.

Tutorials & Resources

http://www.computerarts.co.uk/
http://tutsplus.com/

Tools

Boks
Boks is an AIR application (so it works on Windows, Mac and Linux) that provides a User Interface for Blueprint CSS’s framework. It handles grid configuration, baseline rhythm pimpin’, CSS (with or without compression) and grid.png export, HTML layout and much more goodie-goodie!

Adobe Kuler
Must have for graphic artists. The Adobe AIR based desktop client allows you to search and create color schemes and later import directly to your Adobe applications.

COLOR lovers Desktop App
Desktop Color Search by Colorlovers.com, its an Adobe AIR app that runs on your desktop and allows you to search the entire COLOURlovers database for colors, palettes and patterns.

Pencil Project
Pencil is a small add-on that turns your Firefox 3 browser into a sketching tool with just a 400-kilobyte installation package. Useful for creating quick mockups and wireframes.

Have more links ? Do Drop them as comment.

Type & Grid – Wallpaper

Related posts brought to you by Yet Another Related Posts Plugin.

Visual Hierarchy

Nitin — Mon, 31 Aug 2009 14:29:01 +0000

Hierarchy exists in almost everything we know, family, companies, society, politics, workplace, army etc.

Why ?
Because it maintains the order and makes the whole system organize, which is directly related to the its efficiency & effectiveness.

Similarly, in a layout, which is a process of manipulating user’s attention on the artwork to communicate with a logic, sequence,comfort and impact, Visual hierarchy is one of the most important tools to make it more functional and communicate in a better way.

The concept of visual hierarchy is simple , the more important content should look like more important, and the less important should look like less important. And the user should be able to divide and retrieve the data in chunks.

Lets understand this with a simple example.

So, here we have our information in a liner continuous text presentation. Acceptable, if it comes as a mobile text message or something, but in a layout this arrangement fails to guide and help the user getting information.

Lets try using the White-space. The spacing divides the information into chunks and provides a better visual hierarchy. Now reader can at least focus on reading one part of the information at one time.

One way to establish Visual Hierarchy is Typographic variations. The level of attention on an specific element can be decided with the type scale, weight, and alignment. Now user automatically builds visual relationship between elements and we can make sure what should they read first and what later.

The further detailing can be done using color, texture, shape and even by layering the elements.
Having such hierarchy in layout supports the message, concept and justifies the importance of design details. It sets the fundamental for the reader’s experience and helps in setting the priorities right.

On web, visual hierarchy becomes extremely important when it comes to grouping and arranging different elements like navigation, headlines, forms and action buttons etc.

Few websites with great visual hierarchy using type.
http://www.alistapart.com/
http://informationarchitects.jp/
http://www.rikcatindustries.com/

Have anything more to share or Resources & site-links which can be great example for visual hierarchy.
Drop them as comments.