Click to the archives to get past how-tos. A new one will appear on this page each month.
Register here if you want to be alerted when new articles appear.
Email us if you need to know how to do something. If we don't know how to do it we'll find out and produce an article for you.
How to design a website
without overloading your wastebasket
Why did I feel like a beached whale when I designed this website? Well, I know how to swim, but I’ve never surfed the waves. I was dumping draft after draft into the trash, just like a surfboard would have me thrashing around in the silt if I ever tried surfing.
Now I know what I should have done, so here’s some tips for anyone who wants to design a website, who has never used web design software before, but who is fairly OK at following menus and creating nice looking word documents, or (un)cool PowerPoint presentations.
Realize you need to learn more than the web design software. Web pages have images, photos, design, and layout. You need to know how to use graphic design software, too. I used Adobe Creative Suite CS2, including In-Design, Illustrator and Photoshop.
Choose your software. Adobe Creative Suite comes with Go-Live, but I chose to use Macromedia Dreamweaver 8. A friend who works for Adobe and has a web design business advised me to. Adobe owns Macromedia so I was happy to go along with his suggestion. Your knowledgeable friends are going to be worth their weight in gold (my friend is a big guy!). I had used FrontPage before, but Microsoft is abandoning it and introducing something new – anyway I never found it easy to use.
Invest in graph paper and pencil. The alternative is to open a new page in your software and figure out the look of the page on the go. Bad idea. Sketch out what you want your main page to look like AND size up everything. I’m not going to get technical here. Think of it like making a patchwork quilt. You need to plan where the different shapes and sizes are going to go on your canvas – it’s exactly the same with your web page canvas. Note the sizes you want each of your elements to be so that when you come to create the actual page you can set all your guides quickly and easily.
Sketch out all the other pages noting what needs to link to what. The time you invest in this planning before starting up the software will repay you a million times over. I would have saved so much time and avoided so many attempts if I had just had a picture of what I was trying to create.
Look at your favorite web pages to get design ideas. Link to About Us to get the lowdown on why WordisWorth contains what it does and looks like it does. Theory has informed it, but About Us explains it in practice without jargon.
Go to a class or get an instruction book to learn how to use the software. I chose to learn from books. Some books are available for download from libraries for free but as I have only one computer screen, I preferred to have a print text so I could have it by my side as I worked. If you’ve got two computers (maybe a desktop and a laptop or a PDA) you can use the two screens side-by-side and save money.
Choose a book that suits your style of learning. Some are designed around tutorials where you work on pre-prepared files to learn different things. Others take you step-by-step through the process of learning as you create your own files. I tried to learn from the tutorial texts without using their files. I tried to implement their lessons on my own site. Draft six later, I realized it was a bad idea and started from scratch yet again.
Realize that the textbooks take you through different methods of developing websites – with tables, with layouts, with frames and with CSS (cascading style sheets). Learn them all before creating your own Website. I moved from one method to another as I was going through the book before realizing that it was the final method, CSS, that I really needed to make my tasks, updating, standardizing and formatting so much quicker and easier. But I wouldn’t have understood it without learning about tables and seeing them in practice. I've still not quite mastered setting up CSS files, but I will eventually.
Decide on your font sizes, colors, and styles for headings, general texts, links, sidebars, navigation bars, and captions and note it down on your notepad – believe me you’ll forget if you don’t. Look at http://www.alistapart.com/. Note that some fonts are sans and some are serif. OK, that was jargon, sorry. Sans serif is text without squiggly bits and serif has squiggles. Ariel is sans serif and Times Roman is a serif font. Neither looks good on the web. Make sure that what you choose is supported by various browsers; otherwise, those trying to read your site might get gobbledygook. Geneva and Perpetua are the main typefaces in WordisWorth.
Watch the sizes of your images. Avoid placing a huge image onto your webpage and then resizing it in the webpage – it will retain its humungous number of bytes. Resize and sharpen it in Photoshop first and then place it on your page. Or optimize it in Macromedia Fireworks to get the smallest and best-looking format for your image.
Learn about Meta-tags. So far I know what they are - the words you put in to get search engines to find your site. I still haven't implemented them, though!
Ignore all the above if you want an in-depth practical learning experience. My experience was packaged with graying hair, deepening frown lines, heightened stress levels, grumpiness, late nights, and no chance to slip in a G and T as a reward for doing something right!
I loved Jim Krause's Idea Index books for creative ideas, especially his idea index, layout index and design basics index.
I invested in several layout and design books to help me get ideas for layouts. I used Robin Williams' Design Workshop, 2nd. edition; David E. Carter's The little book of layouts; and Robin Williams' & John Toillett's The non-designer's web book, 3rd. edition.
Sony has brought out an e-reader. You could download a free library text book to it and use it side by side with your computer.
I used Sams Teach Yourself Macromedia Dreamweaver 8 in 24 hours by Betsy Bruce to learn how-to use the software.
I found the Macromedia Studio 8 - Exploring Studio 8 book, which comes with the software, useful too.
Adobe has a series of classroom in a book texts that include files to practice on.
I found Illustrator CS2 in easy steps, by Robert Shuffle Botham, a great little book for learning and getting ideas for making images. I then discovered there is a whole series of them and now have Photoshop CS2, InDesign CS2, Digital Photography and CSS. Only CSS was not easy!
I took my own photos and edited them in photoshop rather than search the web for photos and worry about copyright issues. I then invested in Art Explosion Image Library with over 800,000 images and photos that I could use and manipulate copyright-free.
How to design a website