Compared to print — which is at least 1800 years old — web design is new. If you learned about design in school, you probably didn’t learn very much about web design. If you have been designing solely for print for the past x number of years, there are most likely assumptions being made or questions needing answers.
If we go over a few things that you already know, don’t fret or be offended. There is surely someone else who will read this that didn’t know it.
Software & Document Setup
First let’s tackle the software issue. I cannot stress how important this is. As a designer/developer, I have the skills to covert improper files types into what I need—but you can’t assume that all developers will be willing to do this. I will charge extra if I receive Illustrator or InDesign files just because of all the extra work it takes to get what I need out of them to properly code a site.
It may be faster for you to work in Illustrator if that is what you know—but if you are serious about adding web or ui designer to your title , it will be worth your time to learn Fireworks. Even psds are better to work with than ai files.
You may also gravitate towards designing a website intended for Flash, but this is a poor habit to get into. Flash can be beautiful and has it’s place, but it also exludes anyone who has Flash turned off, who is blind and using a site reader, who is using a mobile device, and it makes seo much, much harder. We have other ways — like Javascript — of creating great animations to still make your site more interesting and dynamic. If you aren’t sure what technology is best suited for your idea or what is possible, just ask.
A good developer will code your design as pixel perfect as possible, but to do that they need the absolute best source files you can send.
Websites should always be designed in 72dpi. That’s it — 72dpi. And of course in RGB.
I don’t want to encourage getting in the habit of doing this but if you have already designed a site that needs to be sent to a developer, here is an article that documents how to convert an Illustrator file into Photoshop. Note your document should be RGB though, not CMYK.
The width is more subjective, especially now with things like internet capable mobile phones, netbooks and tablets poping up every where. We must design and code so that everything will degrade nicely for people with the lowest settings, but look excellent for users with higher settings. The average minimum screen resolution is still 1024px wide, subtract 30px or so for a scroll bar and you end up with 994. That is not really a nice round number that will evenly divide up into equal content areas though.
990px or 960px wide is a good starting point for the width of a fixed width site. 960px divides up without remainder pixels into three, four, five, six and many more columns. That creates a lot of design possibilities that will be easy on the users eyes. The site http://960.gs is a great resource that can further explain the wonders of this magic, ideal site width.
You can of course design a site that scrolls left and right but you must be very careful about how it is going to function. http://www.thinkingforaliving.org is a good example of a site that scolls in x and y but still works well.
Don’t shy away from grids or snapping for web design. Maybe eyeballing things works in print if you are really good; making something 90.5 pixels wide won’t for a website won’t work though.
Flexibility
A great website must be flexible. It has to be able to accommodate varying amounts of content and have navigation that can grow and shrink as needed. One of the things that keeps websites at the top of search engine results is a freqently updated site, so a website that can handle changing content and be updated easily will ultimatley be better for your clients’ business.
The first thing you will have to do is let go. Let go of worrying about orphans, about kerning in every title, about going below the fold.
Here are some things to consider keeping flexible:
- Navigation up to at least three levels
- Main and sub content area height – this includes making sure your backgrounds are tileable or fade into a solid color
- Varying number of sub content areas for items like seasonal promotion banners or resource download areas in a sidebar
- Call to action buttons that can handle different amounts of text on them ie Order Now or Click Here to Learn More
- Entire body height
Aniticipate
The copy your client gives you today will probably not be the same copy on the site a year from now. Make sure no matter how it will change it will still look good — whether you, a developer, or the client edits it.
Make sure you include styles for:
- Headings 1 – 6
- Links and their hover states
- Bulleted lists
- Numbered lists
- Table data
- Photos in the content
- Form elements
Typefaces & Fonts
Woo hoo! A wonderful time is upon us — at least for anyone not using Internet Explorer. We can now import open source fonts into your site to be viewed by anyone using Firefox, Safari, Chrome or Opera.
There are a surprising number of great fonts available that are free. A neat open source font resource is http://www.fontsquirrel.com. Some type designers only make one font free from their typeface though, so be aware of that when you are choosing your fonts. We must use open source (or free) fonts because when we make them availble for import into a website, it means they are also availble for anyone smart enough to download to do just that. Putting a $100 typeface like Ministry Script in a place where anyone can download it would I’m sure invalidate your licence agreement.
So now you have your free font(s) installed. There is one thing you have to be careful of, this is how to test it:
- Pick a backup web-safe font, like Arial or Georgia.
- After designing the initial layout and content, copy the entire design into a new folder in your document or save as a new document.
- Change all the text where you are using your open source font to your backup font. Do not change the size – if your body text is Museo Sans in 12px, you backup of Arial will also be 12px.
- Carefully look over everything to make sure nothing unexpected will happen for people using Internet Explorer. ie. The difference in character width may push a navigation link in a horizontal nav bar outside the bounds of that nav bar in one font but not another.
In the demonstration to the left you can see the comparison of Arial, Helvetica and some sans-serif fonts I obtained from Font Squirrel.com. All of them are 14px. The difference in the width of the word ‘testing’ alone is quite varied, you could image how much the width would change on a sentence or paragraph between Delicious and Arial.
Also be aware that there is only bold and normal font-weights; we can specify different weights in css but not all browsers support it.
Try to remember to that in order to make things work as well as possible in all browsers, we must (gasp!) sacrifice text being pixel perfect. Some browsers will display tracking set at 1.6em correctly, but some will round it up to 1.75em.
em = The base font size of the site. If the base is 12px, and Heading 1 is 2em, it is 24px as a result.
Get Excited!
The thing that is going to help you the most in learning to design better for the web is enthusiasim. Try not to feel restrained by the limits of web compared to print, consider it an exciting challenge and try to have fun with it. Install Firebug in Firefox and check out the code of sites you like to get a basic understanding of how it works.
If you have any questions just ask a developer (they will be happy you are interested) or Google away. I doubt there is any other industry with as much relative information available online as there is for web design and development.
Main points to remember:
- Fireworks (or Photoshop) source files
- 72dpi (means an inch is 72 pixels wide)
- under 990px wide if it’s fixed width
- code over Flash is preferable
- group layers, don’t merge them
- flexible content areas
- flexible nav and buttons
- include styles for all the basic elements
- have similar backup fonts in the stack
- flexible nav and buttons
Tags: development, education, useful, website