Good Web Design

GOOD STUFF! on the Web #9 (web design news)

GWD — Tue, 24 Apr 2012 02:10:16 +0000

more good stuff on on the web. This is just a small selection we came across while browsing, tweeting and drinking strong hot long blacks (coffee). Pretty sure you want more! simply Follow GWD on twitter @goodwebdesign for the latest stuff.
ps. feel we’ve forgotten something? drop a comment or send us a tweet.

Franchise Bold – Font

FRANCHISE is a powerful new display typeface meant to communicate your message quickly and with power.

franchise

email inspiration

Be inspired with only one email per day everyday. No big sales pitches or product launches just one image to help get you inspired!.

email inspiration

Go Live!

Go live button gives you an excuse to shout about your work. It’s free, it’s red and it’s big!

Go Live!

Patternify

CSS Pattern Generator.

Patternify

Markup

Now is could be useful. Markup lets you draw on any webpage with a variety of tools to express your thoughts, make a point or just simply edit.

Markup

typo/graphic posters

Great stuff here > typo/graphic posters. Inspiration of good design through the poster culture. They’re focussing exclusively on typographical and graphical posters. Have a browse…

typo/graphic posters

Fold Tester

Where is the fold? A quick check to show you where your site’s content will show up for different percentages of the world’s internet browsers.

Fold Tester

Ffffallback

Ffffallback makes it easy to find the perfect fallback fonts, so that your designs degrade gracefully.

Ffffallback

Subtle Patterns

Great resource for anyone in need of tilable textured patterns.

Subtle Patterns

Comic Sans Criminal

when to use Comic Sans appropriately

Comic Sans Criminal

DAMN! Good Web Design #2

GWD — Thu, 12 Apr 2012 04:13:17 +0000

The second round of ‘damn! good web design’! Again we’ve collected some big background, bold typography or plain clean no-frills websites. Make sure you have a play with the moustache fun of salleedesign.com. so without further ado – check out this damn good web design!

designlabcph.com

thecreativedistrict.ie

vondutch.com

fa-d.com

mattsalik.com

svenprim.com

pizzaza.ca

ricebowls.org

salleedesign.com

tdhcreative.com

GOOD STUFF! on the Web #8 (web design news)

GWD — Tue, 03 Apr 2012 07:52:42 +0000

another round of good stuff on on the web. This is just a small selection we came across while browsing, tweeting and drinking heaps of coffee. Pretty sure you want more! simply Follow GWD on twitter @goodwebdesign for the latest stuff.

We Love Icons

Great collection of links to desktop icons.

weloveicons.com

guideguide

fixing dealing with grids in Photoshop.

guideguide.me

Wireframe Showcase

Wireframe Showcase features the designers’ and developers’ wireframes used to plan their projects such as websites, apps, etc.

wireframeshowcase.com

Matey v2 (Free Font)

updated version.

Matey

0 to 255

a simple tool that helps web designers find variations of any color.

0to255.com

Piknik Color Picker

piknik is a simple yet gorgeous color picker tool, brilliant when you need to see your color in full screen.

Piknik Color Picker

Media Queries

A collection of websites using media queries and responsive web design.

Media Queries

we love typography

a curated gallery of type-related content. Always nice for a browse.

we love typography

css3.me – CSS3 Generator

A fully customizable CSS3 generator to fit your needs. Love the interface!

css3.me

iPad peek

a simple preview of your website on the iPad

iPad peek

DAMN! Good Web Design #1

GWD — Mon, 26 Mar 2012 03:54:54 +0000

The first series of ‘damn! good web design’! In this round up some great websites with nice big backgrounds (be sure to check out the video backs of seanobrien.com.au and thecassette.fr very nicely done). so without further ado – check out this damn good web design!

soulja.de

irontoiron.com

whatimade.com

seanobrien.com.au

caravanonexmouth.co.uk

unaghii.com

cafe-ommbla.com

airwalk.com

thecassette.fr

37east.co.uk

GOOD STUFF! on the Web #7 (web design news)

GWD — Mon, 12 Mar 2012 02:38:03 +0000

okay… it’s been awhile… but with refreshed energy (and a new design) we’ll throw in another round of good stuff. Make sure you’ll Follow GWD on twitter @goodwebdesign for the latest stuff.

CSS3 Box Shadow Builder

box-shadow" src="http://goodwebdesign.co/core/wp-content/uploads/2012/03/box-shadow.png" alt="box shadow creator" width="578" height="398" />

Design your shadow, grab the code. Simple!

CSS3 Box Shadow Builder

Best Web Fonts

best web fonts" src="http://goodwebdesign.co/core/wp-content/uploads/2012/03/bestwebfonts.jpg" alt="Google Fonts" width="578" height="398" />

A curated list/tool with only the best fonts from the Google directory. With almost 450 fonts this tools makes it easy to shift thru them.

Best Web Fonts

FontFonter

fontfonter" src="http://goodwebdesign.co/core/wp-content/uploads/2012/03/fontfonter.png" alt="FontFonter" width="578" height="398" />

Try web fontfonts on any website. FontFonter uses custom CSS and other techniques to temporarily replace a site’s font styles with Web FontFonts.

FontFonter

Sudtipos Fonts

sudtipos" src="http://goodwebdesign.co/core/wp-content/uploads/2012/03/sudtipos.png" alt="fonts" width="578" height="398" />

some great fonts to be found here.

Sudtipos Fonts

Designers’ List

designers-list" src="http://goodwebdesign.co/core/wp-content/uploads/2012/03/designers-list.jpg" alt="designers list" width="578" height="398" />

Designers’ List – Great resources and websites for designers

Designers’ List

Image Spark

image-spark" src="http://goodwebdesign.co/core/wp-content/uploads/2012/03/image-spark.jpg" alt="image spark" width="578" height="398" />

upload and create a library of images that inspire you in whatever it is you do.

Image Spark

Fillerati

filleratti" src="http://goodwebdesign.co/core/wp-content/uploads/2012/03/filleratti.jpg" alt="fillerati lorem ipsum" width="578" height="398" />

Sick of ‘Lorem Ipsums….’ check out fillerati.

Fillerati

The Agency List

agency-list" src="http://goodwebdesign.co/core/wp-content/uploads/2012/03/agency-list.jpg" alt="list" width="578" height="398" />

showcasing innovative word wide agencies. Some amazing stuff here… check it out.

The Agency List

Photoshop Etiquette

photoshop-etiquette" src="http://goodwebdesign.co/core/wp-content/uploads/2012/03/photoshop-etiquette.jpg" alt="photoshop etiquette" width="578" height="398" />

40 ways promoting web designer/developer harmony using Phototshop. The Photoshop Etiquette manifesto for web designers.

Photoshop Etiquette

Notforest

not-forest" src="http://goodwebdesign.co/core/wp-content/uploads/2012/03/not-forest.png" alt="not forest" width="578" height="398" />

a simple tool that strips away all the distractions and filler on a webpage and leaves only text you really want to read.

Notforest

Good stuff on the Web #6

GWD — Thu, 19 May 2011 21:02:12 +0000

gridulator

gridulator" width="578" height="398" class="alignnone size-full wp-image-2436" />

Tell Gridulator your layout width and the number of columns you want, and it’ll spit back all the possible grids that have nice, round integers. Just the thing for pixel-based designfolk.

gridulator

Seamless Colour Patterns

colour-patterns" width="578" height="398" class="alignnone size-full wp-image-2437" />

Seamless patterns designed with Repper Lite. Organized by color and popularity and are free to use for non-commercial purposes.

Seamless Colour Patterns

foxGuide

foxguide" width="578" height="398" class="alignnone size-full wp-image-2438" />

foxGuide is a firefox extension that displays horizontal and vertical guides. Guides will appear as thin lines that float over the webpage. You can move or remove them just the way you do it photoshop. Guides are useful for laying out elements symmetrically, structure a design and improving the overall layout

foxGuide

NounProject

noun-project" width="578" height="398" class="alignnone size-full wp-image-2439" />

The Noun Project collects, organizes and adds to the highly recognizable symbols that form the world’s visual language, so we may share them in a fun and meaningful way.

NounProject

archigraphs Dock Icons

archigraphs-dock-icons" width="578" height="398" class="alignnone size-full wp-image-2440" />

if you’re looking for some crazy, very detailed icons (dock icons – .ico) you must check archigraphs out. Amazing stuff!

archigraphs Dock Icons

Web font services – An Overview

web-font-overview" width="578" height="398" class="alignnone size-full wp-image-2441" />

a personal (great job!) overview of Sylvia Egger of web font services

Web font services

Noise Texture Generator

noise-texture-generator" width="578" height="398" class="alignnone size-full wp-image-2442" />

adding noise to websites is a big trend. It not only looks good but helps the readability of the web page as well. Check out this cool Noise Texture Generator by Andrew Ckor.

Noise Texture Generator

Generated Paper

generated-paper" width="578" height="398" class="alignnone size-full wp-image-2443" />

free printable papers for daily use – some wire framing stuff like; browsers, iPhone, iPad, Laptop but also Graphs & Grids, Design, Calendars. Cool stuff. Check it out.

Generated Paper

DevCheatSheet.com

dev-cheat-sheet" width="578" height="398" class="alignnone size-full wp-image-2444" />

looking for a cheatsheet? head over to devcheatsheet.com, a directory of free, technical cheat sheets and quick reference cards for developers, programmers, engineers, and nerds. Cheat sheets are aggregated from around the web into one centralized directory. All cheat sheets on DevCheatSheet.com are free and each has been manually reviewed to assure high quality (that’s what they say..).

DevCheatSheet.com/

I Font You: Find Great Font Combinations

i-font-you" width="578" height="398" class="alignnone size-full wp-image-2445" />

nice collection of font combinations: I Font You.

I Font You: Find Great Font Combinations

Siiimple – featured web design gallery

siiimple" width="578" height="398" class="alignnone size-full wp-image-2446" />

Siiimple is a minimalist css gallery. Not much more to say, really.

siiimple

Good stuff on the Web #5

GWD — Mon, 18 Apr 2011 09:00:13 +0000

damn! there is a lot of good stuff going on on the web. This is just a small selection we came across while browsing, tweeting and drinking heaps of coffee. Strong black coffee! How do you like yours?

Creattica – design gallery

creattica" width="578" height="398" class="alignnone size-full wp-image-2427" />

around for awhile (over 10K designs at the moment) Creattica is a gallery of great design and inspirational imagery. Anyone can submit their work for consideration and voting on items is open to one and all. Check it out if you haven’t done it yet.

Creattica

Where’s the fold?

where-s-the-fold" width="578" height="398" class="alignnone size-full wp-image-2428" />

this website helps answer the questions about where your site’s content will show up for different percentages of the world’s internet browsers.

foldtester.com

The Square Grid

square-grid" width="578" height="398" class="alignnone size-full wp-image-2429" />

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.

What’s in the Pack?
1. Sketch sheets for printing (PDF).
2. Design layout templates (for Photoshop, InDesign and Illustrator).
3. Code files with explanations (CSS, HTML).

The Square Grid

CSS3 Generator

css3-generator" width="578" height="398" class="alignnone size-full wp-image-2430" />

handy CSS3 generator for quickly getting the code for Border Radius, Box Shadow, Text Shadow, RGBA, @Font Face, multiple columns, Box Resize, Box Sizing, Outline, Transitions, Transform, Selectors and Gradients

CSS3 Generator

iPad Emulator

ipad-emulator" width="578" height="398" class="alignnone size-full wp-image-2431" />

ever wondered how your website looks like on an iPad? check out this nice iPad emulator for web developers and web designers.

CSS3 Generator

UX Stickynotes

ux-sticky-notes" width="578" height="398" class="alignnone size-full wp-image-2432" />

Although we haven’t ordered them yet (NZ) is not in their standard delivery destinations (hehe..) they look pretty cool. Never waste an idea with handy pre-printed stickynotes. Wireframe, sketch and scribble your ideas then stick and re-arrange as often as you like.

UX Stickynotes

CodeBurner v1.6

code-burner" width="578" height="398" class="alignnone size-full wp-image-2433" />

what’s new in version 1.6. The most important change is updated browser-compatibility information. The results now include support for Google Chrome, as well as the latest common versions of Firefox, Safari, Opera and IE. New feature is the addition of at-rules to special search. And a bunch of other stuff!

CodeBurner v1.6

Monochromatic Iconset _1

monochromatic_1" width="578" height="398" class="alignnone size-full wp-image-2434" />

check out this great iconset by aipotuDENG over at Devianart.

Monochromatic Iconset _1

WhatFont Tool

whatfont-tool" width="578" height="398" class="alignnone size-full wp-image-2435" />

what is the easiest way to find out the fonts used in a webpage? In comes Whatfont Tool. A nifty bookmarklet which gives you easily info of the text you’re hovering on.

WhatFont Tool

Good stuff on the Web #4

GWD — Thu, 17 Mar 2011 08:01:01 +0000

yep! another good stuff on the web. grab yourself a brew, sit back and have a browse… Pretty sure you want more! simply Follow GWD on twitter @goodwebdesign for the latest stuff.

web without words

web-without-words" src="http://goodwebdesign.co/core/wp-content/uploads/2011/03/web-without-words.png" alt="web without words" width="578" height="398" />

web without words – a visual playground. reconstructed websites by removing all words and images, replacing them with blocks (what is typical in the “concepting” phase of a design process).

web without words

fontfabric

fonttabric" src="http://goodwebdesign.co/core/wp-content/uploads/2011/03/fonttabric.png" alt="fontfabric" width="578" height="398" />

some amazing fonts here. every week, they roll out a new and totally unique font, which you can easily buy or download free of charge.

fontfabric.com

Check My Colours, analyse the color contrast of your web pages

checkmycolors" src="http://goodwebdesign.co/core/wp-content/uploads/2011/03/checkmycolors.jpg" alt="check my colours" width="578" height="398" />

a tool for checking foreground and background color combinations of all DOM elements and determining if they provide sufficient contrast when viewed by someone having color deficits. all the tests are based on the algorithms suggested by the World Wide Web Consortium (W3C).

Check My Colours, analyse the color contrast of your web pages

daily design discoveries

daily-design-discoveries" src="http://goodwebdesign.co/core/wp-content/uploads/2011/03/daily-design-discoveries.jpg" alt="daily design" width="578" height="398" />

this is a bit of a side track. not really direct web design related but great for a browse: daily design discoveries worth mentioning and other random inspirations, ideas, nonsense and projects.

daily design discoveries

LoveDsgn

lovedsgn" src="http://goodwebdesign.co/core/wp-content/uploads/2011/03/lovedsgn.jpg" alt="lovedsgn" width="578" height="398" />

what is LoveDsgn? LoveDsgn is a social website for designers, typographers and all kinds of creative people. a platform for sharing, discussing and improving your creative output. some great stuff is being uploaded here.

LoveDsgn

TextMod 2.1

textmod" src="http://goodwebdesign.co/core/wp-content/uploads/2011/03/textmod.png" alt="textmod" width="578" height="398" />

TextMod modifies the input text by various settings. unlike dummy text generators, in TextMod you can modify a real text to match your current character set and use it for testing your font.

TextMod 2.1

FontFuse – Cool Font Pairings

font-fuse" src="http://goodwebdesign.co/core/wp-content/uploads/2011/03/font-fuse.jpg" alt="font fuse" width="578" height="398" />

introducing FontFuse, the font pairing design resource driven by quality fonts from the best type foundries and your limitless creativity. take the plunge into FontFuse!

FontFuse – Cool Font Pairings

loads.in – How fast does your webpage load?

loadsin" src="http://goodwebdesign.co/core/wp-content/uploads/2011/03/loadsin.jpg" alt="loads in" width="578" height="398" />

check how fast your webpage loads in a real browser from over 50 locations worldwide. nice design as well.

loads.in

gallery @ wpbeginner – featured web design gallery

gallery-wpbeginner" src="http://goodwebdesign.co/core/wp-content/uploads/2011/03/gallery-wpbeginner.jpg" alt="website gallery" width="578" height="398" />

millions of beautiful websites & blogs are powered by WordPress. checkout the WPBeginner gallery displays for some awesome WordPress design inspiration.

… and don’t forget to give us a vote (much appreciated - hehe) > Good Web Design

gallery @ wpbeginner