Web Design

From Wiki Bookmarks

Contents 1 Web Design News 2 Tools 2.1 Design 2.2 Accessibility 2.3 Screen 2.4 Fonts 2.5 Browsers 3 Articles 4 CSS Design 5 Design 6 Backgrounds 7 Fonts 8 Type 9 Colour 10 Images 11 Logos 12 Inspiration 13 Site maps 14 Web design books

[edit] Web Design News

• Findings From the Web Design Survey : In April 2007, A List Apart and An Event Apart conducted a survey of people who make websites. Close to 33,000 web professionals answered the survey’s 37 questions, providing the first data ever collected on the business of web design and development as practiced in the U.S. and worldwide.

[edit] Tools

[edit] Design

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

[edit] 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

[edit] 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

[edit] 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

[edit] Browsers

[edit] 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

[edit] 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/

[edit] 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

[edit] Backgrounds

• Background patterns 120 free to use background patterns

[edit] 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

[edit] Type

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

[edit] 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

[edit] Images

• Cross browser use of PNG (A list apart)

[edit] 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.

[edit] 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

[edit] Site maps

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

[edit] 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.