links - web design

on this page: 1a. Process - converting design to html/css 1b. Process - start with photoshop or code 2. Concepts for design 3. Websites about web design Video tutorials hiring a web designer philosophy of web design more on this site

[ to directory ]

Double-click on any word to get a definition!

Basics
Intermediate
Advanced
General for all
¦ tops in its class
i have a copy of it:
i use it in teaching:

Sometimes we use "web designer" to mean the same as "web developer". Different people use these different ways! "Web design" here means the look of the web page.

Do you have more to add? Please let us know at the contact form

1a. Process - converting design to html/css

Code up a web design from PSD to HTML/CSS http://line25.com/tutorials/how-to-code-up-a-web-design-from-psd-to-html "A couple of weeks back we went through the process of creating a gnarly snowboarding themed website design concept in Photoshop. The tutorial covered the process of designing our site concept from sketch to finished PSD design. Now, let's take the design to the next step and code up a complete mockup in HTML and CSS, ensuring our code is semantic and standards compliant. We'll then add some finishing touches with a spot of jQuery" Chris Spooner - Line25.com : February 2010

Coding your design layout in HTML/CSS http://line25.com/tutorials/coding-a-stylish-blog-design-layout-in-html-css "Last week we went through the process of designing a stylish blog layout in Photoshop. Now let's take our visual concept and cut it into slices for use with neat HTML and CSS code." Chris Spooner - Line25.com : August 2010

1b. Process - start with photoshop or code

12 Killer Tips for Designing in the Browser http://designshack.co.uk/articles/css/12-killer-tips-for-designing-in-the-browser "A static image doesn't really give you the true feel of a website like a live page does, and designing in the browser forces you to focus on content organization before design which can help ensure better accessibility and appropriate hierarchy of information. " With how-tos for doing design elements with CSS, and more Joshua Johnson - Design Shack : January 2010

Make Your Mockup in Markup http://24ways.org/2009/make-your-mockup-in-markup "A website's design should begin where it's going to live: in the browser." Good step-by-step, and what to do about changes and problems. Meagan Fisher - 24 Ways : December 2009

Our philosophy: design in the browser http://blog.quplo.com/2010/04/our-philosophy-design-in-the-browser/ "When I design in a browser I spend less time explaining to my clients how a page or an interface will work because they can readily interact with them in their browser." With links to other good pages explaining the idea. Rahul - Quplo : April 2010

Touch the future: Create an elegant website with HTML 5 and CSS3 http://www.pvmgarage.com/2010/04/touch-the-future-create-an-elegant-website-with-hmtl-5-and-css3/ Quick overviews of HTML5 and CSS3, the process of designing a website, template to download. Piervincenzo Madeo - PV.M Garage : 2010

Why we skip Photoshop http://37signals.com/svn/posts/1061-why-we-skip-photoshop "You can’t click a Photoshop mockup. ... HTML/CSS, on the other hand, is the real experience." Good comments too. Jason F - 37 Signals : June 2008

2. Concepts for design

Banner Blindness http://www.useit.com/alertbox/banner-blindness.html Eye-tracking studies show that people do not look at graphics! Notice that in all the examples, readers eyes do not even stop at the banner logo of the site.' Jakob Nieldsen : 2007

Eyetracking Overview http://www.useit.com/eyetracking/ Shows some example eyetracking "heatmaps", the equipment used for the studies, and more info. Jakob Nielsen : 2009

Eytracking Study of Web Readers http://www.useit.com/alertbox/20000514.html How people use web pages. They scan through the page, they don't often look at graphics, if it is hard to find things they leave immediately. Jakob Nielsen : 2000

Guidelines for Home Page Design http://www.useit.com/alertbox/20020512.html "The homepage is the most important page on most websites, and gets more page views than any other page." Jakob Nielsen : 2002

Homepage Real Estate http://www.useit.com/alertbox/20030210.html How much of the page to use for logs, menus, content, etc. Jakob Nielsen : 2003

Print design is different than web design http://www.useit.com/alertbox/990124.html Print design is 2-dimensional, with much attention paid to layout. Typically, each view is a design unit created for a fixed size canvas - often a big canvas when designing newspapers or posters. In contrast, Web design is simultaneously 1-dimensional and N-dimensional. Jakob Nielsen : 1999

Top ten rules for designing for low bandwidth http://www.aptivate.org/webguidelines/TopTen.html An excellent site. These are good tips for making any website, low bandwidth or high! Aptivate : July 2009

3. Websites about web design

A List Apart http://www.alistapart.com/topics/design Over 200 articles on using CSS for page design. A List Apart : 2007

CSS Edge http://meyerweb.com/eric/css/edge/ Doing cool things with css. Eric A. Meyer : 2006

CSS Layouts http://css-discuss.incutio.com/?page=CssLayouts "With CSS level 2, it is possible (and preferred) to lay out webpages purely using CSS. In the past, authors used TableDesign to lay out pages, but this has significant disadvantages." Showcases, positioning, float, columns, footers, ... CSS Discuss : 2004

Molly E. Holzschlag http://www.molly.com author : date

Stuff and Nonsense http://www.stuffandnonsense.co.uk/ author : date

UXmatters http://www.uxmatters.com/ "Insights and inspiration for the user experience community." UXmatters : 2009

Web Design from Scratch http://[h] www.webdesignfromscratch.com/ "For everyone involved or interested in creating web sites - whether novice or expert. It will help you understand what makes web sites succeed or fail, and what can be done to increase the chance of success." Ben Hunt : 2007

Zen Garden http://www.csszengarden.com/ "A demonstration of what can be accomplished visually through CSS-based design. Select any style sheet from the list to load it into the page. Download the sample html file and css file." CSS Zen Garden : 2006

Video tutorials

7 Must-See Web Design Videos and Presentations http://www.noupe.com/design/7-must-see-web-design-videos-and-presentations.html "... a short but diverse list of presentations related to design and development that I think everyone will find both informative and entertaining. I’ve included a brief description of each presentation, along with some notable quotes and related links. " Louis Lazaris - Noupe : 2010

Seven more Must-See Web Design Videos and Presentations http://www.smashingmagazine.com/2010/04/24/seven-must-see-web-design-videos-and-presentations/ "The list includes a brief description of each video, some notable quotes from the presentations, and related links. " Louis Lazaris - Smashing Magazine : 2010

philosophy of web design

Design philosphy http://www.lukew.com/about/philosophy_of_web_design.html Why design is important, and what it does. Luke Wroblewski : 2009

Interface design quotes http://www.lukew.com/resources/quotes.asp Very nice summares of beauty/form Luke Wroblewski : 2009

LukeW Interface Designs http://www.lukew.com/resources/articles.asp Articles and papers: interface design insights, tips, research, and more. Luke Wroblewski : 2009

Quotes on Design http://quotesondesign.com/ Nice quotes. With javascript to put the quotes on your own site. Chris Coyier : 2010

Thoughts on cross-cultural global web design http://speckyboy.com/2010/06/30/tips-and-thoughts-on-cross-cultural-global-web-design/ "The internet is global by its very nature. The second a website is launched online, it's accessible to anyone from Patagonia to Poland." Christian Arno - Specky Boy : 2010

Usability experts are from Mars, graphic designers are from Venus http://www.alistapart.com/articles/marsvenus/ Explains the differences between designing for print and designing for the web. Curt Kloninger : July 2000