59 - Behind Design - the process behind designing a site

Sign up for the free and useful FuseLetter!




		. . . . . . . . . . . . . . . . . . . . . . . . . . . . The long and winding creative road One of my favorite things about computers is that they let us show other people what's inside our head—it's like being able to share dreams. I'm designing a site for my new computer clocks (more about this in the next issue when the site is ready) and I thought I'd share some notes about design I've made while working on the site. Monday, 11:30. I wake up (that's right, I went to bed at 3 a.m.) and remind myself: Design is visual; yet I never start out thinking about how something should look. Design should grow out of how something works and what kind of impression you want to convey. Good design has depth and meaning behind it. Before I start, I ask myself "what is this project really about?" What do I want this site to do for me? What will visitors want the site to do for them? Tuesday, 11:30 p.m.: I think of design as a kind of "personality transfusion" where I try to infuse life into shapes and color. I know this is working if I get a feeling from a design, like: Formal or Casual Friendly or Serious Warm or Cool Modern or Traditional There are countless other impressions: "relaxed or tense," or "wild or tame" but the basics come first. When I get a feeling like "sticky" and "spongy" I suspect it's time to clean my keyboard. Wednesday, 4:30 p.m.: I start to design the site around the logo I'd previously designed. Unfortunately, the only impression I get from it is "confused" which isn't good, so I throw it out and start fresh. Thursday, 10:30 a.m. (I'm up early!) Sometimes I find it easier to think outside, away from my computer (where I can be distracted by eBay and its over 35,000 watches). I put a pen and note pad in my pocket and go outside to do Tai Chi and tree hugging. I get a lot of ideas doing this, most likely because I am surrounded by very smart trees who telepathically transmit their good ideas to me in hopes that I'll write them down (it's a well-known fact that trees have notoriously bad penmanship). I let my pen roam around the page like a Ouija board and later get distracted by looking at sites about Ouija boards. Sunday, 8 a.m. (I get up early on Sundays to do Tai Chi with a group). I worked hard on Friday and Saturday and have very little to show for it. Sometimes that happens. It will help to think about something else. Sunday, 1 p.m.: Got back from Tai Chi. Took a nap. Very productive. Dreaming is thinking in visual metaphors, just like design. For www.teacherswithoutborders.org I used a compass to show direction. For www.mindview.net and their educational programs I used a path to show the progression from randomness to order. For a book on programming http://www.will-harris.com/design/books-i.htm I used bugs to show, well, bugs as in buggy software, but also as in categories of things. Since my clock site is about time, I visualized natural objects that are moved by time. Ripples in water, the solar system, an atom. That got me going at last. Few designs just pop out of my forehead, fully formed like Athena from Zeus's head. (There goes another half hour, reading about Greek myths at a fantastic site, http://hsa.brown.edu/~maicar/index.html ). Designs require back and forth, trial and error, and come together bit by bit (no computer pun intended). Monday, 2:30 a.m.: I finally found non-copyrighted images of the solar system on a NASA site, http://www.nasa.gov/gallery/photo/index.html . Now I was set for lift-off. Tuesday, 9 p.m.: I learn from my accidents. Design software provides plenty of opportunity to something wrong and see something in a new way. The "Undo" command corrects accidents, but don't use it until you've seen the results and learned from them. Saturday, 5 p.m.: I'm wary of asking too many people their opinion about a design project—design by committee isn't good. I have a few trusted friends and colleagues I ask. I listen to their feedback. Sometimes I agree. Sometimes I don't, but I always listen and question before I decide. This particular design may be too complex and the interface is non-standard. I normally don't design sites like this, but in this case, I want the site itself to be part of the experience. The type of people who will be interested in my unusual computer clocks will probably enjoy an unusual site. I decide it works in this context. Sunday, 7:30 p.m.: Still questioning it. Bill Cosby said "The only sure way to failure is to try to please everybody." In the end, decide I to go with the unusual concept. And as my wife says, "If it doesn't work, you can always change it." Yet one more good thing about the web. editor, http://www.FuseLetter.com and http://www.efuse.com . . . . . . . . . . . . . . . . . . . . . . . . . NetObjects Fusion MX: Don't Take My Word For It A lot of people have e-mailed me asking if I like and recommend NetObjects Fusion MX. I do and I do. But you don't have to take my word for it, read cnet.com's latest review. (The link is long, and breaks in e-mail, so I created a redirect from the FuseLetter right to the cnet.com site: http://www.fuseletter.com/cnet-mx.html ) Here's the part I like best: "...This [NetObjects Fusion MX] is the hands-down front-runner of the do-it-yourself Web page programs... It's easy enough to get a good-looking site up quickly, but you're free to continue to evolve your Web site along with your skills." And it really is true. NetObjects Fusion MX breaks down the boundaries between you and the web. You don't have to know HTML. You don't have to be a designer. You just have to want to build (or rebuild) an attractive and effective web site. Click here to learn more about NetObjects Fusion MX NetObjects Fusion MX has everything you need, for only $99.95, ($49.95 for upgrades). To buy it: To purchase NetObjects Fusion MX for just $99.95, visit: To buy In the US & Canada To buy internationally To UPGRADE for $49.95: Upgrade in the US Upgrade internationally . . . . . . . . . . . . . . . . . . . . . . . . . . . . Important Virus Alert I've received MANY emails lately with Word .DOC files attached, and they've all contained viruses. Even if you receive an attachment from someone you know—do not open it until you have asked your friend or co-worker if they sent that specific message. This virus goes through someone's address books and sends email to everyone on it, attaching word files. It uses real subject lines and word files (yes, your private files), so it can look legitimate, yet still be a virus. If you don't already have an anti-virus program—get one. I recommend Norton Anti-Virus, which stopped this virus even before I opened it. If you do have an anti-virus program, make sure that it updates itself regularly to catch new viruses. www.Norton.com can go online automatically and get the latest version in the background, but you need to check and make sure that the "live update" is enabled and it's on the program's schedule. If you don't have Norton Anti-Virus and just need to remove this, you can get a free tool at http://www.sarc.com/avcenter/venc/data/w32.sircam.wor m@mm.html . . . . . . . . . . . . . . . . . . . . . . . . . . . . Javascript Dropdown Menus Couldn't Be Easier The more web-building programs I use, the more I appreciate NetObjects Fusion. Here's an example, I was reading a fine DreamWeaver book and noticed that it took more than 40 pages to explain how to create a dropdown menu (and that's just the explanation), then you have to be something of a programmer to code it all by hand! In NetObjects Fusion you can create the same kind of drop down menu in one click. How? Components. If you're not using them, then you're not doing as much as you could on your site. You need NO programming experience. I'm creating a new site that uses the coolmaps Dynamic Menu2 component: http://club.coolmaps.com/component_detail.cfm?nfx=89 This remarkable component lets you create efficient, good-looking, hard-working drop down menus by just dropping the component on the page and telling it what pages to link to. The result looks and works as well as any that took 40 pages to learn (and countless hours to write). To see more components in action, see "Components at Work" below. . . . . . . . . . . . . . . . . . . . . . . . . . . . . Art Inspiration For more information about design, see http://www.efuse.com/Design/ It's filled with useful articles and columns about graphics and content. Two good ways to stimulate your imagination and inspire creativity are looking through clip art and exploring color combinations. . . . . . . . . . . . . . . . . . . . . . . . . . . . . Find Your Clip Art Muse If you're looking for the very best font and clip art VALUE around, then look no further than the Corel Gallery 1.3 million. That's right, 1.3 million web images, AND 1,000 top quality Bitstream Fonts on 16, count' em 16 CDs. That's a lotta clip art. The package includes 120,000 editable vector clipart images; 50,000 photos (low resolutions); 1,000 animated objects; 500 sound files; 50+ video clips. The clip art is not always the best quality (though the fonts ARE), but hey, there's so much of it that you should be able to find something that will work. The graphics manager is easy to use—if you don't mind doing a LOT of CD swapping, and you have to do a lot of it just to see the images you've searched for. Still—All this for under $50? It's like one of those "insane" used car dealers, but it's true. Get it here: http://www.beyond.com/search.htm?os=ANY&name_desc =corel If you want the best clip art at the best value price then buy Image Task Force for $39.95. Image Task Force's clip art is more sophisticated and elegantly drawn than Corel's but there are no fonts in this collection. ITF's graphic manager also makes it easier to find images, too (on one single CD). The program searches by topic and style. You could pay more for a single image than you pay for this entire collection, and collection you will find endlessly useful. In the US, get if from http://www.ideabook.com/newidea/newstore.htm Outside the US, get it from http://www.nvtech.com . Can't find the clip art you need on these CDs? Or don't have those CDs and need an image right this very minute? Try http://www.eyewire.com - This site has a gigantic assortment of clip art, photos and fonts, arguably the most you'll find in one place. The site is well designed so it's easy to find what you're looking for, buy it online, and download it instantly. Chuck Green (who wrote The Mix column for eFuse) http://www.efuse.com/Design/chuck_green.html is a genius when it comes to clip art. He's written a book about it called Clip Art Crazy, and he also uses it in virtually all of his projects. His book and work shows how it can be used creatively so that it looks more like "art" and less like "clip." For more info about his "Clip Art Crazy" book, see http://www.ideabook.com/newidea/newstore.htm . . . . . . . . . . . . . . . . . . . . . . . . . . . . Get Colorful Ideas Sometimes colors can jump-start your imagination. A great book about color is "A book of colors" by Shigenobu Kobayashi http://www.amazon.com/exec/obidos/ASIN/0870118005/ efusmakithewebwo . The book provides hundreds of beautifully combined color palettes, arranged by impressions like: fresh, cool, urbane, mature, earthy, tender, dynamic, sensible, dreamy, luxurious, youthful (and more).It also gives you a quick education about colors and the feelings they can convey. It's a small book, relatively inexpensive (under $12), yet packed with instantly useful information and inspiration. Another excellent color reference is the "Color harmony" guide, with 32 pages of color palettes and 8 pages of color families, in handy swatchbook form, categorized by the moods they evoke—cool, powerful, tropical, and so on. Each includes the corresponding CMYK screen mix so you can choose the colors you like and type them into your desktop publishing, illustration, or paint program: http://www.ideabook.com/newidea/newstore.htm And here's an excellent on-line way to try various color combinations: http://www.paletteman.com/ is interactive—click on the colors you want to see together. Choose up to four and a text color. The system will e-mail the colors to you in web-friendly format. (Also take a look at site of the company that built this service, www.clearink.com—they've done some excellent design work.) . . . . . . . . . . . . . . . . . . . . . . . . . . . . Components At Work Two friends of mine who are all-around brilliant costume designers have created an online Halloween costume catalog that benefits the Bill Foundation (they rescue dogs with the Los Angeles Shelter System). You can buy your costumes online at 50% off the retail price and have the proceeds go to this worthy cause. http://www.steppinoutcostumes.com/bill.html It used to be complicated to add full-text search, forms processing and payment processing. But you can see how they added all three easily—and for almost no cost. They built this enormous site in NetObjects Fusion in just a few days (the witch, moon and text fly in using NetObjects Fusion's simple PowerPoint-like Actions), and used components to help. They used the FREE coolmaps' Atomz search component (which easily adds full-text search to your site) on their catalog home page: http://www.steppinoutcostumes.com/catalog/ Learn more about the free component here: http://club.coolmaps.com/component_detail.cfm?nfx=74 They used coolmaps' InForm forms processing component to handle their web form at: http://www.steppinoutcostumes.com/catalog/html/order_f orm.html (when you submit your order, you'll also see how they used PayPal) for more information on Inform, see: http://club.coolmaps.com/component_detail.cfm?nfx=81 This site is a great example of how, without any technical knowledge, you can still build a site that WORKS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . Just For Fun Just thinking "Ouija Board" set me off on the web to learn more about them, and I found two web-based versions:: http://www.math.unh.edu/~black/cgi-bin/kipling.cgi , and http://www.museumoftalkingboards.com/WebOuija.html . . . . . . . . . . . . . . . . . . . . . . . . . . . Do Good For Free With Just A Click NOW is the time to visit these sites, and click to donate for free. Visit their advertisers, too, so they'll keep supporting these good causes. http://www.ecologyfund.com - Save, protect, preserve wilderness and rainforest for free! http://www.saveastray.com/ Save a stray. http://www.freedonation.com - Click to donate to many worthy causes. http://www.hitsagainsthunger.com - Free $1 donation with one click. http://www.thehungersite.com - A click a day feeds a person. http://www.causeaneffect.com - Help disaster victims. http://www.thechildsurvivalsite.com - Helps kids. http://www.thekidsaidssite.com - More help for kids. http://www.therainforestsite.com - Donate to buy and protect rainforest land. http://www.webreleaf.com/ - Plant trees. https://www.amfor.org/newforms/treesself.php3 - Plant more trees! http://www.secondharvest.org/ (Not free, but important). . . . . . . . . . . . . . . . . . . . . . . . . . . . . One More Thing: Growth Oriented My wife is fond of saying, "Be growth oriented, not goal oriented," to remind me to enjoy the process, rather than rush through to the finish (of course this is the same woman who will get on any bus in Europe just because she enjoys the scenery, and she doesn't care if we get lost!). This time she was right yet again, which I have to say can get annoying after a while. Even her horoscope this month said that being right all the time was annoying to others. Design can really be fun if you relax and don't rush it. Sometimes your brain can be like a lock, and you have to give it time for all the little neuron tumblers to fall into place. You may not always get an "Ah-ha!" but it's always more fun if you look at it as a process rather than an ordeal :) Editor, www.FuseLetter.com www.eFuse.com