Design Tools

 

WordPress functions.php snippets

“WPFunction.Me lets you quickly build all the functionality you need for your next WordPress project!”

Categories:
Design tools (38), Front end dev (10)

Positype

 
 
 
 
 
 

Positype type foundry was founded in 2000 by Neil Summerour. Beautiful fonts combined with humor and whimsy.

Categories:
Design tools (38), Font foundries (7), Typography (17)

Codeacademy

“Learn to code interactively, for free.”

It’s free and fun.

Categories:
Design tools (38), Front end dev (10)

Don’t Fear the Internet

 
 

“Basic HTML & CSS for Non-Web Designers”—by Jessica Hische & Russ Maschmeyer.

Have no fear. These awesome (and typographically beautiful) videos will make any designer want to learn how to code…or at least watch someone else do so.

Categories:
Design tools (38), Front end dev (10), Typography (17)

Elegant icons

www.elegantthemes.com

Follow link and scroll to download button.

Categories:
Design tools (38), Icons (3)

960px grid

Robbie Manson’s templates (photoshop & fireworks) here: 960px grid templates or Nathan Smith’s templates (Acorn, Fireworks, Flash, InDesign, GIMP, Inkscape, Illustrator, OmniGraffle, Photoshop, QuarkXPress, Visio, Exp Design) here: 960.gs.

“The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels.”
—Nathan Smith

Categories:
Design tools (38), Grids (7)

Gridulator

Gridulator calculates column pixel dimensions, based on desired width and any number of desired columns.

Does the math for you. Simple as that.

Categories:
Design tools (38), Grids (7)

Area 17 — The work of Arnaud Mercier

“A permanent online collection devoted to the work of Arnaud Mercier, widely considered to be among the most important and prolific interactive designers.”

Categories:
Design tools (38), Visual inspiration (7)

R/M Design School — Font pairing

 
 
 

1 + 1 = 3. Looking to up your knowledge about font pairing and/or inspiring examples of well-matched typeface combinations? This microsite from ReadyMag is beautifully designed and educational. Need I say more? Shared by Anna Parellada while working at Code and Theory London. Thanks, Anna! Looks like there will be more to come from R/M Design school in the months ahead.

Categories:
Design tools (38), Reading (5), Typography (17), Visual inspiration (7)

Responsive logos

This site demonstrates the capability of svg logos and is a pretty cool example of how well-designed logos respond or devolve at small sizes. The three images show desktop, tablet and mobile viewport widths.

Categories:
Design tools (38), Front end dev (10), Visual inspiration (7)

Responsive patterns — Brad Frost

A great reference for interaction patterns. Responsive demos for testing right in the browser on the screen of your choosing. I find the navigation patterns most helpful.

Categories:
Design tools (38), Front end dev (10), Interaction (1)

Siteinspire

Updated regularly. Bookmark it!

Categories:
Design tools (38), Visual inspiration (7)

The Best Designs – Web Design Inspiration

Categories:
Design tools (38), Visual inspiration (7)

FlatIcon

Categories:
Design tools (38), Icons (3)

Categories:
Design tools (38), Font foundries (7), Typography (17)

Categories:
Design tools (38), Reading (5), Visual inspiration (7)

Web Safe fonts – What exactly does that mean?

The 100% web-safe list...ugh

If

you ever find yourself perplexed by the concept of web safe fonts wondering “Web Safe fonts – What exactly does that mean?”

Then

this stackoverflow article might help.

Categories:
Design tools (38), Reading (5), Typography (17)

The History of Web-Safe Fonts – HOW magazine

“What does “web-safe” font mean anyway?”

A concise overview of both the history of type on the web and what the term “web-safe” means for those who don’t know … younger designers perhaps haven’t had a reason to learn this.

After reading the article you might understand why webfont technology evolving away from web-safe only is “like leaving the monochrome flatlands of Kansas to arrive in the magical, technicolor land of Oz.”

Categories:
Design tools (38), Reading (5), Typography (17)

AIGA symbols & signs

“The complete set of 50 passenger/pedestrian symbols developed by AIGA is available for all to use, free of charge. Icons are available in EPS and GIF formats.”

Or download the whole set at once.

 

Categories:
Design tools (38), Icons (3)

Skeleton: Responsive CSS Boilerplate

Categories:
Design tools (38), Front end dev (10), Grids (7)

A convincing rationale for using a 1000px grid (rather than 960 or otherwise).

Plus PSDs for download and a demo.

Categories:
Design tools (38), Grids (7), Reading (5)

The Square Grid

“A New Way of Designing Websites

A simple CSS framework for designers and developers, based on 35 equal-width columns. It aims to cut down on development time and help you create beautiful-structured websites.”

Download the pack includes:

1. Sketch sheets for printing (PDF)

2. Design layout templates (Photoshop, Indesign, Illustrator)

3. Code files with explanation (CSS, HTML)

Categories:
Design tools (38), Front end dev (10), Grids (7)

Unsemantic

Simply the best. This is my go-to grid plugin for all front end needs. Makes html prototyping a breeze too.

Categories:
Design tools (38), Front end dev (10), Grids (7)

A great resource for all things ‘grid’. Updated regularly and now featuring more digital grid resources than ever.

Appreciate how this site is rooted in theory of grid design in print, yet translates the same theory to digital design. Plus some nice typography related material as well.

Categories:
Design tools (38), Grids (7)

Adobe Color CC (formerly Kuler)

Create, explore and save your own themes with helpful theory based tools.

 

Categories:
Color (3), Design tools (38)

Hex color tool

A great site for quickly finding tints and shades of any chosen color.

“Digital color can be represented in a number of ways. The most common ways to represent color on the web are via a 6-digit HEX number, RGBA, and HSL (Support for HSL was added in CSS3).

  • Hex is a 6-digit, 24 bit, hexidecimal number that represents Red, Green, and Blue. An example of a Hex color representation is #123456, 12 is Red, 34 is Green, and 56 is Blue. There are 16 million possible colors.”
Categories:
Color (3), Design tools (38)

Work with color

“Color changes the world”
“Color is an important attribute of our world. It’s an effective and efficient orientation aid and it influences our attention, our mood and our actions. To some extent everybody is an artist, or designer, making choices of color frequently. Your choices can make or break the attractiveness of our world.”
Categories:
Color (3), Design tools (38)

HVD Fonts

Categories:
Design tools (38), Font foundries (7), Typography (17)

Optimo type foundry

Categories:
Design tools (38), Font foundries (7), Typography (17)

ABSTRKT

The awesomely subversive and integritous work of Roman Gornitsky.

Categories:
Design tools (38), Font foundries (7), Typography (17)

Font Squirrel

 

Web fonts and web font generator

Font Squirrel scours the internet in search of FREE, highest-quality, designer- friendly, commercial-use fonts and presents them for easy downloading.

Categories:
Design tools (38), Typography (17)

“Worry-free, perpetual font licensing for everyone.”

Thousands of fonts with easy licensing for desktop, web, ebooks and apps.

Categories:
Design tools (38), Typography (17)

Colophon type foundry

Categories:
Design tools (38), Font foundries (7), Typography (17)

CSS font stack

This site shows what percentage of computers (by platform) have specific fonts installed, and provides a font stack for using specific fonts.

This site recently changed it’s visual design and, to be honest, used to look a lot better. The content seems mostly unchanged, so that’s good. However, due to my preference for the old, I link to it instead.

Categories:
Design tools (38), Front end dev (10), Typography (17)

World class font foundry Dalton Maag offers their entire font library free for trial use.

“Browse, download trial fonts and easily purchase licences for fonts to suit any tone of voice.”

Categories:
Design tools (38), Font foundries (7), Typography (17)

Typewolf

“Typography Inspiration for the Modern Web”

This site is a great visual reference, but also a knowledge database. View fonts in use online and find recommendations and other inspirational material.

Categories:
Design tools (38), Typography (17), Visual inspiration (7)

You probably agree that typography on the web has historically been far inferior to that of print. And that any free font is intrinsically bad; the past is defined by the mindset that “you get what you pay for”.

However digital typography is quickly progressing into a non-discriminatory future. And while Google fonts are free, they offer a practical solution somewhere between Verdana* and “too expensive”.

How does the service work, you ask?

Google fonts are hosted online, so when building a site the html files are simply linked to the font file/s on the web. The great part for designers not coding a site is each font may be downloaded to desktop for use in design software.

These fonts are free so it’s easy to get carried away. As ever with any free font service you have to be cautious and exercise restraint. My advice…keep it simple. Try the recommendations below or search via filtering “popularity” as this tends to bring up the better ones.

It is also worth mentioning that when using web-hosted fonts it’s ideal to use a limited number of fonts (i.e. a maximum of 2 per website) to prevent slow-loading. Remember each typeface weight is one font. It’s not unwise to combine web-hosted and system fonts, i.e. use web-hosted fonts headings, and arial for small paragraphs and long-running text.

Categories:
Design tools (38), Typography (17)

Typetester

Find and compare safe-to-use fonts for the web. This helpful website provides a list of which fonts are automatically installed on common operating systems—these fonts are referred to as ‘system fonts’.

You are also able to set text in these fonts (and adjust the size and leading to preview paragraph styles) in side-by-side comparison.

This is my go-to website to determine if fonts used in a design are “web-safe”.

Categories:
Design tools (38), Typography (17)