Michael Doyle | Blog

CSS – Styling Forms

Found a great resource listing different articles and tutorials on how to style HTML forms using CSS.

http://socialcmsbuzz.com/40-css-web-form-style-tutorials-for-web-developers-14082008/

Web Development – Developing from a PS design

I mentioned previously that sixrevisions.com gave a good tutorial on how to create the Web 2.0 look in photoshop. They've now followed up on that article with a tutorial on how to code it in CSS and XHTML.

http://sixrevisions.com/tutorials/web-development-tutorials/coding-a-clean-web-20-style-web-design-from-photoshop/

One concern about this tutorial is the heavy reliance on images for the design rather than CSS.

Web Design – Typography

I've usually just relied on Verdana and eyeballing layouts when taking typography into consideration. At the moment, I'm living and breathing typography for the website I'm currently creating. It's a simple website, but I'm focusing on the rules for typography on the web, web safe fonts, spacing, leading, etc. It's one of my biggest weaknesses when designing websites so I'm researching as much as possible into it at the moment. Some interesting sites I've come across are:

Basic rules for web typography:

http://www.webdesignerdepot.com/2009/02/10-web-typography-rules-every-designer-should-know-2/

Browser safe fonts:

http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

Fonts bundled with Mac, Windows, Adobe and Office:

http://media.24ways.org/2007/17/fontmatrix.html

Embedding custom fonts with Javascript:

http://typeface.neocracy.org/

Smashing Magazine has a great article on 50 different web typography tools:

http://www.smashingmagazine.com/2009/01/27/css-typographic-tools-and-techniques/

Design – Typographic Desk Reference

The Typographic Desk Reference looks like a very handy reference book for designers.

Some sample pages are included on the site.

http://typedeskref.com/

Web – Modal Windows

Smashing Magazine has a good round up of the different typs of modal windows.

http://www.smashingmagazine.com/2009/05/27/modal-windows-in-modern-web-design/

Web Design – Creating the Web 2.0 Look

Even though it's now becoming outdated, sixrevisions.com have a good article on how to create a web 2.0 look in Photoshop using the 960 grid system. It's a two part article that will include how to code it in CSS.

http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-clean-web-20-style-web-design-in-photoshop/

CSS – Improving Typography

AisleOne have a great article on how to improve typography on the web using a simple few steps.

http://www.aisleone.net/2009/design/8-ways-to-improve-your-typography/

Web Design – Inspiration

Six revisions have made up a list of nice web site designs. They're technically not websites, but just mock-ups made in PS. They do serve their purpose very well though.

30 inspiring Web Design Layouts from deviantART

Web Design – Proportions

Smashing Magazine discuss divine proportions and the rule of thirds.

Web Design – Inspiration

Here is a list of web sites for design inspiration