What do you want to design today?
Wendy's Web Design
general web design resources, tutorials & intros
The below are a few resources that I and many others highly recommend:
Need help making your Web page for the first time? Why not do it the easy way -- try a wizard:
Don't forget that ATN has a variety of online and print primers for making Web
pages, some of which are in your DTE. See, for example, their Web authoring guides:
The best designed Websites have a unified look, they catch and hold our interest, they are intriguing but not bewildering to navigate, they are simple to use, and they are well maintained without spelling and other errors. Well-designed Websites showcase their content.
Is it easy to produce Websites that meet this criteria? Yes and no.
Yes, because when in doubt we can fall back on the famous dictum associated with the Bauhaus architect Mies van der Rohe: less is more. Strip away; get rid of the clutter. Just leave the essential on your site, form following function, which is a phrase coined by the influential American architect Louis Sullivan.
No, because it takes diligence to keep a site up to date, to resist cute effects, to do the painstaking work necessary to avoid broken HTML tags, and to stay current with evolving Web standards. Simplicity and maintenance takes time and trouble.
But for those who enjoy good online design -- and what Web surfer does not? -- the results are well worth the effort. A well-crafted Website could be your ticket to a new career, it can open the door to new friends and ideas, and it can help develop your personal style and taste.
Graphic design texts often define the characteristics of good design as tension. Neither too static nor too busy, neither too plain nor too fancy, neither too eye-catching nor too dull. The below is a quick look at a few of these visual tensions.
Symmetry + Irregularity = Order
Older Web pages generally are boring. They're flat, black type on a grey page. Outside of some links, not much is happening.
Then along came early tables and the <center> tag. All of a sudden Web designers could lay out pages in two columns or otherwise breakup the monotony of left aligned pages. But the initial result wasn't much better: too much symmetry.
And then with more sophisticated tables, frames, and other extensions to HTML, designers found ways to lay out pages in eye-catching ways. Some Web authors go overboard and try too many things on one page. But generally online design has improved quite a bit and we now have the means at hand to produce pages that are both lively and well balanced. Many Web pages today have an internal order that creates interest and aids comprehension for the user.
Create movement and rhythm by:
Color + Monochrome = Interest
Color is life. Nothing perks up a page more quickly than the well-considered use of color.
But a little bit of color goes a long way. Work with a limited, non-dithering palette. Contrast color with black, white, and greys and other neutrals. In terms of download time, remember that color is data and more data means a longer wait for pages to load.
Color theory is an art or science in itself and can be complicated to explain. The below are some simple rules of thumb:
Copy + White Space = Clarity
The best method for breaking up your pages and increasing readability is the intelligent use of white space. In newspaper layout, a page that is too copy heavy is said to be a "grey page," meaning flat and uninteresting.
When used well, white space controls the pacing of a page. The blocks of type tell the user where to read quickly and where to slow down.
When used poorly, white space creates chaos and the page looks sloppy. Learn how to control white space through layout.
Control within the layout is achieved through the <blockquote> tag for shorter line lengths (horizontal space), and through line breaks, paragraph breaks, and the <pre> tag for leading (vertical space).
Designing for the Web is not like designing for other media for these reasons:
These are the challenges that make Web design both frustrating and exciting. The interface, or the way users interact with the medium,
isn't flat. Users scroll and click rather than turning pages.
Navigation: Websites, Homepages & Hyperlinks
Users navigate Websites. They have to be able to get around and find their way through different pages on a Website and back to the homepage without getting lost. For the Web designer, this requires careful planning.
A Website is a collection of pages unified by a common theme, whether for an organization, a portfolio, or a group of pages such as a syllabus. They should have a similar look and feel or interface design.
The user should sense an overall style or point of view that acts as your design signature. This unifying identity will help the user comprehend where your site begins and ends even after he or she exits through hyperlinks. Create an environment that encourages repeat visits.
A homepage is the first page of a site. It acts as book cover, title page, and table of contents. The home page is the central hub of the Website.
Additionally a personal page, such as for a student, is referred to as a homepage. This type of homepage acts as business card, biography, and classified ad, and often is linked to a résumé. Many homepages include a hotlist of favorite or recommended sites.
It's crucial to manage the hyperlinks on a site. Only link what will help your user. Don't link indiscriminately. Remember that users will take your links as endorsements and judge you by their quality and appropriateness. And every link you provide will require maintenance later; check your links periodically to make sure they still work.
Page Conventions: Who @ Where + When
All Web pages should include the following:
Consider Your Users: Download Time & Browsers
Waiting for Web pages is only slightly less interesting than waiting for
paint to dry. Do all you can to prevent your pages from loading slowly.
A few "dos":
Conservation Society offers a number of other suggestions and comparisons for reducing
Remember that users have widely varying equipment. Your pages will
look different on different platforms, meaning PCs, Macs, and Unix systems. Monitor
quality makes a big difference as does the size of the display. The amount of RAM
your users have will effect the performance of your pages.
The Web is a constantly changing medium or media. The below highlights a few of the most dynamic areas of Web development.
Interactivity: CGI, Java & Multimedia
Programmers are constantly working to push the envelope -- and to move the Web from a pull-based information delivery system to one that is push-based.
The plain-vanilla Web that "anyone" can design for is flat and text-based. In the newspaper industry, this way of using the Web is called "shovelware," or simply taking what's already in print and shoveling it onto the Web.
Users obtain what they need by pulling from the server, surfing for information, and otherwise doing the work of retrieving the information they want. This can be an inefficient use of users' time.
What is making the Web increasingly cool is that it can do so much more than print and yet still can be printed out. The Web can be programmed to be "smarter," to find what we need for us through the use of customization and setting preferences. This more responsive way of programming the Web is called push technology.
Web programmers are the Web designer's best friend and scariest adversary. They're always coming up with something new that we have to learn. Below are some programming tools and toys that make our work easier and better, more "professional":
CGI -- The Common Gateway Interface has been around
since the early days of the Web and remains popular for small applications
("applets") such as page counters, forms, and drop-down menus. There often
are security problems with CGI and the programs are restricted to the server side.
This means that you as the Web author are dependent on whatever scripts are available to
you on the server to which you have write permission. See CNET on The ABCs of CGI.
Cascading style sheets for layering and positioning are the latest
cutting edge for Web authors. Style sheets can be set up with new HTML style tags
specs, backgrounds & dithering
Within the header information, you can set the "specs," or specifications, of your pages so that you control the background color or image and the text and hypertext colors.
The specs are controlled through the body tag: <body bgcolor="white" text="black" link="blue" vlink="#333333" alink="red">. These specs would give you the effect on this page, a white body background, black text (default), blue links (default), active links that turn red when clicked, and visited links that turn dark grey.*
Because you don't want to set up the specs so that the text disappears or the color combination is unattractive, you need to establish a pleasing and practical color scheme. You can preview backgrounds and color schemes to see how things look before your pages are uploaded to the server.
When you're using ordinary colors like red, green, blue, and yellow (primary colors), you can write them out in English. For more subtle effects, you may need to use hex values, which are expressed as six-character codes preceded by the number (#) sign. No need to worry about what that means. What matters is that you need help converting RGB (red-green-blue) to hex color.
There are a number of conversion tools you can use:
If you're really feeling adventurous, try the Color Blender for a cool rainbow effect on your page.
Netscape can only display 216 colors.
If you save your photos as JPEG, which means they contain 16 million colors, your browser
will have to guess at a number of the colors.
Note: If you view the source,
you won't see those specs because my HTML editor does things a bit differently.
You'll see this: <body bgcolor="#FFFFFF" vlink="#333333"
headings, styles, fonts & faces
Typography, or type design, is improving online. The below are a few ways you can manipulate type on the Web.
You can use heading tags, such as <H1>Top Level Head</H1> (24 pt) and <H2>Second Level Head</H2> (18 pt). Heading tags automatically create a paragraph break.
If you want to change the type size but don't want a break afterwards, the same same effect can be achieved by specifying the type size <font size=3>type</font> or by using pluses and minuses <font size=-1>type</font> within the font tag.
You can make type <b>bold</b>, <i>italics</i>,
<u>underline</u>, and use <tt>teletype</tt> among other styles.
<img src> part I: formats, linking & alt
Online images generally come in two flavors: .jpg (or .jpeg, pronounced "jay-peg") and .gif (pronounced "giff" or sometimes "jiff"). JPEG is the preferred format for photographs and GIF is preferred for graphics such as clip art and illustrations.
While there is a lot to learn about image formats, the most important information is that JPEGs have 16 million colors and GIFs have 256 colors. See Unplugged Software on the difference between GIF and JPEG.
The tips below on linking and the alt tag come from Rich Beckman:
For relative links: Omit the host and protocol from the URL if the image is on the same server. Omit the forward slash (/) if the image is in the document's directory.
Tip 3: Use small, low resolution images as thumbnails for larger images (see example above): <a href="hi_res.jpg"><img src="thumbnail.gif"></A> .
<img src> part
II: pixels, align & borders
Tip 4: You can align text to the top, bottom, and middle of images with slight variations in between: <img src="graphic.gif" align="top"> . In the example above, the alignment has been specified as bottom, which is the default.
Tip 5: You can specify center or right alignment within the img tag, or you can make it part of paragraph alignment (see below): <img src="graphic.gif" align="right">. By default, images are left aligned.
Tip 6: To avoid text wrap around an image, use a line or paragraph break after the image, as was done in the example above: <img src="graphic.gif"><br> .
Tip 7: You can choose to have a border around an image, whether it's hyperlinked or not, and specify how thick it should be. In the example above, the border has been specified as 1. If you don't want a border, as below, set the border as 0: <img src="graphic.gif" border=0> .
Tip 8: You can specify the amount of white space around an image. This is sometimes referred to as "float." In the example below, the vspace (vertical space) and hspace (horizontal space) have been set at 5 pixels: <img src="graphic.gif" vspace=5 hspace=5> .
Tip 9: You can specify the dimensions of the image so that the browser can load it a bit more quickly. You can use this tag as well to change the size of the image, although the results generally show a loss of quality. In the examples throughout, the logo has been specified as <img src="logo.gif" width="75" height="95">, which is its actual dimensions in pixels.
<img src> part III: clip art, stock photos, illustrations & more on gifs and jpegs
Graphic art generally comes in three flavors: clip art, stock photographs, and illustrations we make ourselves or someone makes for us. The following are some sources to help you build your image library.
Remember, however, that while a picture tells a thousand words, it may well contain a thousand more bytes. Keep your files as small as possible without making unnecessary visual sacrifices.
Clip art is graphic art and design that is no longer copyrighted or is free to use within the terms of an agreement or contract. Carolina users probably will want to take advantage of the official UNC-CH Web Gifs (see policy). You can also use the clickable image map.
General sources for free clip art include Clip Art Universe and Psyched Up Graphics. Yahoo provides an exhaustive list of sources of clip art in all shapes, styles, and sizes, including animated gifs.
Stock photos are photographic images that generally can used within the terms of a carefully worded license agreement or contract. Understandably, most photographers want to be paid for their work. Index Stock provides a helpful page on the difference between clip and stock photos.
Spectrum and the Stock Solution are unusual in that they provide free photos online for limited distribution. Yahoo provides a list of companies that supply royalty-free photos, but generally you have to order the CD-ROM.
You can make your own illustrations through Photoshop or a graphics or drawing program. David Siegel provides links to a number of recommended graphic tools. You'll want to save and export your images as .gif and .jpg.
Other media files: MediaBuilder, Eclectic Artistry, and Task Force are meta-sources for free bars, banners, bullets, borders, dividers, icons, 3D images, multimedia files, screen savers, and even poetry and fine art.
And here is Professor Beckman's last tip. Whether you use someone else's art or create your own, you may want the background to recede, as above.
Tip 10: You can choose to make the background
transparent on your GIF image (as above) so that it appears to float on the page
without a boundary box. Photoshop and other graphics software packages can make this
a simple process.
GIFs and JPEGs can be sent as interlaced
or progressive. This means that the file will load consecutively in the
browser rather than all at once. We use this format as a courtesy for our users so
that they have something to look at while the page loads. It's a simple matter of
choosing GIF 89 or progressive JPEG when saving the file. See Professor Beckman's example.
By default paragraphs are left aligned.<p>
<p align=right>They can be right aligned like this . . .</p>
<center>. . . or centered.</center>
Copy flush left against the edge of the screen is unattractive and often difficult to scan quickly. Shorter line lengths and margins increase readability.
Lists can be used in lieu of paragraph indents. Items in a list can be indented scientific-outline style through the definition list <DL> tag, ordered with numbers through the <OL> tag, and unordered and bulleted through the <UL> tag. See CNET on creating lists.
layout through a grid: tables & frames
Finer control over page composition can be achieved with tables and frames. You can set up a grid, so that you have columns and blocks of type like this, or a skinny left margin and larger body block as for a résumé, or many other effects. Or perhaps you want your pages to unfold within one borderless frame.
Since tables and frames are complicated to explain and take some time to learn, try the tutorials below on your own. Another approach is to use a HTML editor, such as Composer, that sets up tables and frames for you.
Please keep in mind the following:
About this grid . . .
Where did the inspiration for this grid come from? Some art
historians credit modern artist and Bauhaus influence Piet Mondrian with
creating the contemporary layout grid.
The style guides below provide tips, tricks, and other
good Web design advice. See also what Tony Sanders says about HTML
Last but hardly least: copyright. Simply stated, everything on the Web is or once was protected by copyright, whether the © copyright symbol is used or not. As a user, you can look at and quote from a work, but you cannot take what does not belong to you unless you've been given permission.
Copyright protected content belongs to the person who or organization that provides it, which may mean that:
You may not take content online without permission, whether the
technology makes this easy or not. Request permission to use someone's or
an organization's content, and get the permission in writing.
Clip art is a notable exception in that generally the content is in the
public domain or the rights to the copyright have been given away. Read the
UNC-CH provides the following guidelines:
A final word of advice: You may read through
these policies and regulations and become confused or have lingering questions about how
copyright law applies online and your rights and responsibilities as a user and Web
author. You're not alone. Intellectual property is a hotly debated and
evolving area of the law.
|JOMC 50: Electronic Information Sources||