gazette | theater | bistro
Design Guides
other pages
concept maps
this page
information | interface
| graphics | FrontPage
| Ricci Street
< Port 80 < Lighthouse
|| search | sitemap | help gazette | theater | bistro |
| | |
|
|
Here's my bias. In what follows, I'm assuming that the interfaces must:
transfer information, both verbal and
visual
make the response as easy as possible
Thus, the interfaces must provide access to the information for a variety of learning styles and needs. They must help the readers orient themselves. And they must look good and work together within easily navigable structures.
We live in a designed world.
While nature is living, dynamic, and self-organizing, almost everything we touch during the day was never alive and was purposefully designed by a human. Or by a team of humans, which is why design is sometimes so frustrating.
While the Internet is dynamic, and self-organizing, every document, program, function, and object available on the Internet was never alive and was purposefully designed by a human. Or by a team of humans, which is why design is sometimes so frustrating.
The designed world is artificial, as opposed to natural, with the emphasis on artifice, something intentionally constructed.
It's always useful to check out examples of Bad Designs. They can be funny, too. Or not funny, like the worst design I know: the bicycle seat. Ouch!
Patrick Lynch's Web Style Manual,
originally written for the Yale Center for Advanced Instructional Media
Jakob Nielsen's Writing
for the Web
Kevin Kelly's Wired
Style
Web Pages that Suck
A terrific technical HTML primer and list of other style guides at the Web Developers Virtual Library
Webmonkey's Browser Chart.
Eric Meyer's Master Compatibility Chart and Josh Smith's Browser Compatibility Chart, both at WebReview. Note also WebReview's article called Figuring Out Browser Compatibility.
There are two basic problems when it comes to dealing with browser compatibility issues: they're boring and they're complicated. But for designers, developers, and managers alike, it's essential to grasp these fundamental problems that we face when putting web pages on the Internet.
UW-Madison's Web Development Series
Creating
Accessible Web Pages
Organizing
the Content of a Web Site
Writing
for the Web
Designing
an Effective Web Site Navigation
Creating
an Appealing Web Site Design
Tiffany
Shlain on Information Design
by Sarahjane White
Builder.com, December 3, 1999
Primers from HotWired:
Web Design 101
Squishy's
Crash Course in Information Design
The
Foundations of Web Design
Tim Berners-Lee's collection of articles on Web design
Top Ten Design
Tips for Commerce Sites
by Erica Nelson
WebReview, August 18, 2000
We need to make our commerce sites attractive, appropriate, and successful.
<http://www.edit-work.com> tdiscusses Web editorial procedure and style.
For a different view, Jorn Barger has a site titled HyperContent, HyperJunk. In addition to what he calls a "scathing critique" of the Yale guide I recommend above, four other pages on his site are expecially relevant.
Hypertext Theory as if the WWWeb
Matters
The Ten
Commandment of Good WWWeb Design
The
Hyperterrorist Checklist of WWWeb Design Errors
FAQ
alt.etext = electronic text
Webmonster's Web Design (digest)
For guidance on Web pages, note especially the style manual by Patrick Lynch, originally written for the Yale Center for Advanced Instructional Media. I recommend it most highly. Jacob Nielsen presents a contrary view at Use It, also highly recommended.
In addition, check out the Sun style guide, developed by Nielsen, and a terrific technical HTML primer and list of other style guide at the Web Developers Virtual Library.
Over the past decade, there have been two other influential guides:
IBM's User Interface
Guidelines
Apple's Human
Interface Guidelines
To learn design, you must start by separating a Web pages' design from its content. While most people learn from good models, many can learn a lot by examining bad models -- what not to do. To get started, try Web Pages that Suck. Not only useful, it's funny, as the title might suggest.
On the Bloopers Page, you'll see that even the largest companies let writing errors slip into their Web pages. These embarrassing examples demonstrate the pitfalls of failing to proofread.
User
Interface Design for Programmers
by Joel Spolsky
David Siegal's Creating Killer Web Sites
Andrew Mundi's Principles of Graphic Design and Web Color Theory
Introduction to Design, Color Theory, Composition & Layout Perspective and Typography. Can be downloaded; requires Shockwave Flash.
The University of Arizona's The Basics of Visual Design
History
of the Graphical User Interface
by David K. Every
Web
Graphics
by Jim Cerny
Review and explanation of common Web graphics formats (GIF, JPEG). How to use HTML to include inline images, image mapss, animated GIFs, plus use of cut-and-paste JavaScripts. Sources for graphics.
Web
Graphics Basics
by Mark Bakalor
Good web sites require a seamless integration of text and graphics. Here's the least you need to know about web graphics.
A
Web Graphics Primer
by Larry Buchanan
MultiMedia Schools, March/April 1999
If you are a beginner to creating Web pages, the whole notion of using graphics on your Web page may be a mystery. But take heart! Even many experienced Web authors still are confused about basic concepts of graphics use. While there is much to learn about graphic design, page layout, and designing a quality experience for visitors to your Web page, there are also some basic technical concepts to be kept in mind.
Example
of Bad Web Graphics
by Jim Cerny
Graphic
Design Principles
from end of Chapter 3 of
Task-Centered User
Interface Design: A Practical Introduction
by Clayton Lewis and John Rieman
For something a little more technical, go to the Web Reference Graphics page. Try their home page, too.
It's so difficult to know where to start when it comes to web graphic design. You can buy a 2000 page photoshop book, and spend the next 5 years trying to puzzle it out, or you can beg other designers to give you a few tips, but in the end you're stuck battling your way through to design stardom. It shouldn't be that hard! We want to make it easy, and show you how fun it is to design. Everybody needs a creative outlet, and the internet needs more beautiful designs. If we can help put a little bit more funky stuff out there, then it makes it all worth it.
Digital Web Magazine's Web Colors Resources links page
a resource for web designers and developers to test this expanded palette of 4,096 colors for the web
Many sites have PaintShopPro tutorials and tips & tricks. You'll find a lot of overlap among these sites. If you follow some of the techniques, you'll learn to use Paint Shop Pro even if you don't find a use for that particular technique. The skills there transfer easily to PhotoShop. If you're going to keep your images in digital form, the biggest difference between Paint Shop Pro and PhotoShop is the price.
Jasc's site has a long list of tutorials. Some I found useful:
Webweaver: The original PSPro Tips
& Tricks
GrafX Design's PSP
tutorials
GrafoManiac's
tutorials
MuseSpace's
Tricks & Tips
Communication Arts magazine
Creative Hotlist - dedicated career site for creative professionals
Design Interact - multimedia and technology
the premiere source of information and inspiration for the field of interactive media. Directed toward information architects, designers and programmers, a combination of news and feature articles explore the creativity and technology necessary for the completion of successful interactive media projects.
Basic computer vocabulary: whatis?com
Webopedia for definitions and links to computer terms
Denis Howe's FOLDOC - Free On-Line Dictionary of Computing
Charles M. Kozierok's PC Guide
TechWeb's Tech Encyclopedia
How Stuff Works' Computers
Beginners' guides - About.com
Digital Education Network
Geekgirl.guides -
easy-to-read tutorials and step-by-step guides
MBA
Core - The University of British Columbia
TipWorld: Expert Advice, News, and
Learning
TheNakedPC.com's Unofficial Guide to PCs
Webmonkey's How-To Library
FrontPage 2002 Add-in: Tutorial
The Microsoft FrontPageŽ 2002 Tutorial shows you how to use many features in FrontPage as you create and edit Web pages, and then design and publish a Web site containing those pages. You will learn to make hyperlinks, import graphics, design a feedback form.
When you're looking for FrontPage resources, remember that 2000 is such an upgrade from 98 and 97 that resources for them may be very misleading for 2000.
Tip | When you're learning FrontPage as your first HTML page editor, avoid the Themes and Shared Borders features.
Tom Brunt's Outfront, a
Microsoft FrontPage Learning Community
Microsoft's FrontPage
2000 articles
C|Net Builder.com's FrontPage 2000 Magic
ElementK Journals - Inside
Microsoft FrontPage
Beginner's tutorial at Actden.com.
Click on the top right of the home page. It's designed for 6th graders, which is about the level you want to be working on while you learn bloatware like FrontPage. I recommend these sections:
1. A Fresh Start
2. Text
3. Images
5. Hyperlinks
6. Tables
7. Previews
8. Web site
except Expand with Word 2000
10. Forms
I recommend that you omit these sections:
4. More Images
9. Style
11. Data
12. Reports
13. Publish
Training Tools' Introduction to FrontPage 2000
online version
downloadable and printable version
FrontPage lets you customize many features. If you want to know what I recommend after using FrontPage for almost four years, this page has a lot of screenshots and explanations. The screenshots are full size, so they'll take a while to load.
Tip | When you're learning FrontPage as your first HTML page editor, avoid the Themes and Shared Borders features.
|
||||||||||||||||||||||||||||||||||||
