My 5 Essential Web Design Tools & Apps

When designing websites there are a few online tools that I regularly utilize. Thinking back on my growth as a designer, its hard to imagine what it was like before these tools were in my web design toolkit.

samantha
#Design | Posted

When designing websites there are a few online tools that I regularly utilize. Thinking back on my growth as a designer, its hard to imagine what it was like before these tools were in my web design toolkit.

Layout: The 960 Grid.

960 This may be the greatest invention since CSS itself... a smattering of template files set up with preset columns for the design application of your choice. whether you are blocking out content sections in Omnigraffle, lining up typography in photoshop or just sketching wireframes on paper, this downloadable toolkit has it all set up at the optimal width of 960 pixels.

 

Typography: Richard Rutter's Font Matrix

With all the fonts available out there, it has become second nature for me to create a font stack that will enhance some user's typographic experience by showing a more unique font on their screen for body copy. Not Familiar with font stacks? Richard's 24 ways article is a great introduction, where his font matrix is a wonderful companion to the daily web design process.

Lorem Ipsum: Designers Toolbox

The Designers toolbox Lorem Ipsum Generator makes filling in placeholder text a breeze. While generating paragraphs is nice, I have found this tool most useful for creating bulleted lists for mocking up list item styles.

 

Color: Adobe Kuler

While there are tons of fantastic color tools out there, I find myself consistently coming back to Kuler. The simple interface was designed to do one thing well, choose colors. I especially like looking through other users color combinations, because often I discover interesting pairings that I would have never thought of.

User Interface Patterns: LittleSnapper and Ember

I have written about using LittleSnapper for inspiration here) it's also really effective for documenting user interface design patterns. A UI pattern is a recurrent solution used to solve common interaction problems, and keeping a library of my own helps me to tag and document methods I would like to use in the future. Ember is LittleSnapper's online sister, a public collection of design snippets tagged and grouped based on common themes. Ember is a wonderful place to investigate new and interesting ways of approaching common design issues

 

While this is a list of a few of my favorite tools, I would be interested in hearing from you. What other tools do you find yourself consistently using? Any ideas for ways that I could use these tools differently?

samantha