Web Design

From WikiLinks

Contents 1 Tools 1.1 Design 1.2 Accessibility 1.3 Screen 1.4 Fonts 1.5 Browsers 1.5.1 FireFox 1.5.2 Internet Explorer 2 Articles 3 CSS Design 4 Design 5 Backgrounds 6 Fonts 7 Type 8 Colour 9 Images 10 Logos 11 Inspiration 12 Site maps 13 Web design books

Tools

Design

• favicons
• dummy text
• Colour Blender
• Convert hex to RGB colours and back
• HTML colours in words

Accessibility

• Colour contrast: check out the colour contrast between 2 colours. The tool also indicates whether the colour contrast passes the W3C accessibility guideline "determine if they provide enough of a contrast when viewed by someone having color deficits or when viewed on a black and white screen"
• Color oracle a tool that helps you design for people with colour blindness

Screen

• jRuler: measure anything on your screen
• sRuler: does pretty much the same thing as jRuler, also lets you nudge the ruler per pixel via the arrow keys on the keyboard. Very handy.
• Desktop Zoom lets you zoom in on the screen so you can investigate what's going on

Fonts

• What the font identifies fonts from an image you upload
• Identifont identify a font by answering a series of questions
• Type tester, a screen-type comparison tool
• Web safe fonts and how common they are. More on safe web fonts
• Font samples at different font sizes
• A handy guide to what's installed by default on which operating systems

Browsers

FireFox

• Firebug a bettter JavaScript error console and better DOM inspector for FireFox
• Firefox web developer toolbar lets you do things like clear the cache, disable styles/images, view styles, delete cookies, resize browser and much more, all from a handy toolbar.
• IE tab for Firefox opens a FireFox tab which uses the IE rendering engine
• Domain Lookup for Firefox Domain Lookup lets you perform one click domain searches at your registrar of choice using the selected text in your browser window.

Internet Explorer

• Microsoft Developer toolbar does what the Firefox web developer toolbar does for Internet Explorer.
• IE accessibility toolbar offers a few accessibility widgets the MS developer toolbar doesn't

Articles

• Web design and build related articles
• Gif or PNG?
• Homepage goals, or how to tackle a homepage design
• Indicating language choice: flags, text or both. Roger Johansson explores the options.
• Contrast and Meaning
• The BBC's 15 web principles

CSS Design

• http://cssvault.com/
• http://www.stylegala.com/
• http://www.umnatchedstyle.com/
• http://www.wpdfd.com/
• http://www.digital-web.com/
• http://www.netdiver.net/
• http://www.designbyfire.com/
• http://www.stopdesign.com/
• http://www.textism.com/
• http://www.twistweb.co.uk/
• http://www.typophile.com/
• http://www.csszengarden.com/
• CSS layouts A collection of links to CSS layouts
• http://www.webcreme.com/

Design

• http://www.k10k.net/
• Design melt down: design elements and techniques, solutions to design problems, design tutorials and colour usage
• Current styles of web design: current state of the art in web design, analysis of the design elements that make a design fresh, attractive and easy to use.
• Art direction on the web: good design based on a solid concept
• http://www.welie.com/ - Numerous examples of Interaction Design (grids etc)
• A design process revealed: for non-designers who need to design
• Designing a css based template, a 5 part tutorial by Veerle Pieters with downloadable PhotoShop artwork

Backgrounds

• Background patterns 120 free to use background patterns

Fonts

• http://www.dafont.com/
• http://www.daltonmaag.com/
• http://www.houseindustries.com/
• http://www.fontsmith.co.uk/
• http://www.type26.com/
• Dave Shea article on fonts, free and paid for, for commercial and non-commerical use
• Clagnut about font stacks, discusses a strategy for specifying fonts for websites, and have them fall back on generally available fonts
• Urban fonts a collection of 8,000+ free fonts and dingbats
• How to choose a good font
• 20 best free fonts and 19 more free fonts

Type

• Compose to a vertical rhythm or how to calculate font-sizes, margins and line-heights to look good.

Colour

• Claudia Cortes Color in Motion: An interactive experience of colour communication and colour symbolism.
• Colour lovers people's favourite colours and palettes.
• Create a colour scheme also allows filtering out of colour blindness
• Eric Meyer's colour blender: insert 2 RGB values, choose the number of midpoints you'd like to see, and away you go.
• Five simple steps to designing with colour, part 2
• Photographic palettes or creating a colour palette from a well balanced photograph.
• Cheating colour Jason Santa Maria explains how to tweak colours to achieve the effect you are after, rather than to stick religiously to brand guidelines.
• Color Jack interesting experiments around colour theory

Images

• Cross browser use of PNG (A list apart)
• List of Free Stock Photo Libraries

Logos

• LogoLounge
• Graphic Design USA logo trends 2005
• Brands of the world brings you vector format of the world's best known brand logos. Obviously only for use with the owner's permission.

Inspiration

• Using Flickr as a source of inspiration: 28 useful photo pools
• Functioning form's list of design magazines online
• Stylegala web design and standards
• Internet design patterns a flickr photo pool

Site maps

• Visualize the DOM structure of your website as a graph. Very cool.

Web design books

• The Zen of CSS design looks at the 36 most inspiring designs in the CSS Zen Garden
• Designing with web standards by Jeffrey Zeldman explains how to build future proof websites making use of web standards such as semantic markup, accessibility and usability.