multimedia processing photography

Photographer

MULTIMEDIA PROCESSING PHOTOGRAPHY Processing

Analog source generally comes with certain established characteristics. For example, CD-quality audio is sampled at 44.1 KHz, 16-bit stereo sound, and video is usually 640 x 480 pixels in dimension and plays at 30 frames per second . However, analog source digitized at full resolution would require enormous amounts of disk storage and is far too large to be used on a network. One way to prepare media for network delivery is to reduce the data by, for example, downsampling the audio material to 11.025 KHz, 8-bit mono sound. This reduces file size but also substantially reduces quality. Another way to reduce file size is to apply compression.

Compression first eliminates redundant data from a file and then removes less important data to shrink file size still further. This process is achieved using algorithms, or "codecs" , that handle the media compression and the decompression when it is played. The codecs that are used for Web delivery use lossy compression: the process removes data from the original source material. You should never compress material multiple times, because each process will lower the video quality.

In preparing media for Web delivery, you should aim for files that can be managed by the average network connection and desktop machine of your target audience. The key measure is the data rate, normally measured in kilobytes per second , which is the amount of data that is used to represent one second of movie playback. For users to play your files in real time without hiccups or delays, you need to set a data transmission rate that is slightly lower than the throughput of your users' connections.

Audio processing

Normalize. Audio files may lose amplitude and clarity in the digitizing process. To compensate you can use software to normalize your audio. This process finds the highest peak in a file and then amplifies the entire file to make that peak's volume 100 percent. This ensures that you are working with the loudest possible audio signal.
Boost the midrange. Another way to enhance your Web audio is to use software with an equalizer function to boost the midrange frequencies slightly.
Frequency. Reducing the frequency reduces the data required to represent the material, for example, from 44.1 KHz to 22.050 KHz.
Depth. Sixteen-bit samples provide greater dynamic range but take up more space. Reducing the depth to 8-bit will reduce the file size.
Channel. Be sure not to use stereo settings for a mono source. If your source does have stereo audio, you might consider switching to mono to reduce the data rate.
Codec. Applying compression to an audio track may allow you to keep higher-quality audio frequency and depth settings.

Video processing

Process the audio. Perform the audio normalizing and equalizing mentioned above.
Trim clips. Make sure that your movie begins and ends with frames that make sense as still images. The first frame will appear on the user's screen while the movie is loading, and the last frame will remain on screen when the movie has finished. Take care that these images do not seem awkward out of the context of the movie.
Crop. Use video editing software to crop out unwanted noise or borders from the movie image.

Scale. Most Web video is sized to quarter-screen or smaller.
Image quality. Reducing the image-quality setting of a movie reduces the data that is stored for each frame.
Frame rate. Standard NTSC video has a frame rate of 30 fps. Most Web video is set to about 10 fps.
Codec. Some codecs compress more efficiently than others do, though usually at the expense of image quality.
Custom filters. Compression software provides filters that reduce the differences between frames, permitting more efficient compression.
Audio. The audio track of video can be downsampled and/or compressed to reduce the overall movie data rate.

source MULTIMEDIA PROCESSING PHOTOGRAPHY http://webstyleguide.com

page design frames photography

Photographer

PAGE DESIGN FRAMES PHOTOGRAPHY Frames

Frames are meta-documents that call and display multiple HTML documents in a single browser window. A frame document contains no BODY HTML tags, just the parameters for the frames and the URLs of the HTML documents designated to fill them. Frames-based pages do not function as an integrated unit, which is both good and bad. Frames are useful for certain content and greatly facilitate site maintenance. They provide a good way to maintain narrative and design consistency in your site; you can split the browser screen between site navigation and the material you wish to bring up with a link.

But frames also impose interface and design limitations. Frames can easily confuse readers who wish to print material on a page or bookmark a page for later reference or navigate using the browser's "Forward" and "Back" buttons. And screen space becomes an issue with frames; if you use frames to divide the browser screen, you will force many readers to scroll both horizontally and vertically to see the full contents of each frame. The current consensus among Web design and usability experts is that frames should be used only in the rare instances when their limited advantages clearly outweigh the many problems they can cause.

Flexibility
Frames are useful in a site whose contents are expected to change frequently. Because a frames-based site can be designed to have a single file for navigation, if you add or remove pages from the site you will have to modify only that one file. Our online Web Style Guide, for example, requires that a number of files be changed if we add or delete a page because each page in the site has its own navigation. If we had used frames in our design, we would have had a single file for the section menu, and when we needed to add a page, only that file would have had to be changed to reflect the addition. As it is, when we add a page to a section we must edit each file in that section to add the new link.

Functionality
Frames can give a targeted area of your site a functional coherence. Say your site contains a collection of poems by Emily Dickinson. You could create a virtual "reading room" for her poetry using frames, with the leftmost frame providing the navigation links and the main frame at the right displaying the poems. Because most visitors linger in this area and would use the links you provide for navigation, the quirky navigation of the "Back" button would not be too intrusive.

You can also use frames to provide additional interactivity to your page. Frames allow you to put a page up on the user's screen and change its contents without rewriting the screen. The frames can interact; clicking a link in one frame can change the contents of the other. For example, a text with annotations in one frame can be linked to a footer frame, so that clicking on the text reference fills the footer frame with the corresponding note:

www.dartmouth.edu/~milton

Aesthetics
Many page designers have avoided frames because of their prescribed borders and limited flexibility. Current versions of browser software, however, allow many more frame parameters to be defined. In fact, frame borders can now be set to zero. This allows you to design using the functionality of frames without requiring them to be visual and perhaps inharmonious elements on your page.

Frame titles
The visual relationship between the content in frames is usually obvious for users who can see: for example, navigation links in the left frame, content in the right. Without the benefit of visual cues, however, blind users will have difficulty orienting themselves in a frames-based layout. As discussed above, there are many reasons to avoid a frames-based layout, but if you must use frames, be sure to include titles for FRAMESET tags and a NOFRAMES alternative to navigating your site.

<FRAMESET COLS="20%, 80%" TITLE="Web Style Guide">


<FRAME SRC="nav.html" TITLE="Navigation">


<FRAME SRC="chapter1.html" TITLE="Chapter 1: Process">


<NOFRAMES><A HREF="content.html" TITLE="Table of Contents">Web Style Guide Table of Contents</A>


</NOFRAMES>

z</FRAMESET>

source PAGE DESIGN FRAMES PHOTOGRAPHY http://webstyleguide.com

multimedia web multimedia strategies photography

Photographer

MULTIMEDIA WEB MULTIMEDIA STRATEGIES PHOTOGRAPHY Web multimedia strategies

Simply because we can digitize hours' worth of analog video and stream it out over the Web doesn't mean that we should. The value of having the text of Paradise Lost on computer is not in making it available for reading — most people prefer to read the work in print. We digitize texts in order to use the strengths of computing, such as searching and linking, to enhance our understanding of the material. This holds true for multimedia, too: we need to consider how best to use the computer and not simply translate analog video and audio content to the computer screen. Networked multimedia requires scaling and compression, which means that much of the content created for analog delivery does not work well on the Web. The key to successful Web multimedia is to tailor your content for Web delivery.

Section contents

Audio only
Slide shows
Video
Animation

source MULTIMEDIA WEB MULTIMEDIA STRATEGIES PHOTOGRAPHY http://webstyleguide.com

site design search features photography

Photographer

SITE DESIGN SEARCH FEATURES PHOTOGRAPHY Search features

Search facilities are a necessity for large sites and are convenient even for smaller sites that contain long documents. Sites that are updated frequently also require a good search engine, because your menus and site index will probably not keep pace with every change you make in the content pages of the site. But search engines are no substitute for a carefully organized browsing structure of menus and submenus. The two systems, browsing by menu and searching by keyword, complement each other — neither system alone is adequate. Keyword searches give the reader specific links to follow but with no overview of the nature and extent of your content and no feel for how you have organized the information. Menus and tables of contents are great for broad overviews, but if your readers are looking for a specific piece of information not mentioned in the contents, they may miss what you have to offer.

The search software you use will often dictate the user interface for searching. If you update your content frequently, be sure that your search engine's indexing is done at least daily. Also be sure that your readers understand exactly what content is being searched: the entire Web site or just a subsection? If your site is complex you may wish to offer readers a pop-up menu that lists the areas of your site and allows them to limit their search to a specific area. And make sure that the results page also matches the graphic design of the site.

www.chronicle.com

source SITE DESIGN SEARCH FEATURES PHOTOGRAPHY http://webstyleguide.com

typography emphasis photography

Photographer

TYPOGRAPHY EMPHASIS PHOTOGRAPHY Emphasis

A Web page of solid body text is hard to scan for content structure and will not engage the eye. Adding display type to a document will provide landmarks to direct the reader through your content. Display type establishes an information structure and adds visual variety to draw the reader into your material. The key to effective display type is the careful and economic use of typographic emphasis.

There are time-honored typographical devices for adding emphasis to a block of text, but be sure to use them sparingly. If you make everything bold, then nothing will stand out and it will seem as if you are shouting at your readers. A good rule of thumb when working with type is to add emphasis using one parameter at a time. If you want to draw attention to the section heads in your document, don't set them large, bold, and all caps. If you want them to be larger, increase their size by one measure. If you prefer bold, leave the heads the same size as your body text and make them bold. You will soon discover that only a small variation is required to establish visual contrast.

Italics
Italicized text attracts the eye because it contrasts in shape from body text. Use italics for convention — when listing book or periodical titles, for example — or within text for stressed or foreign words or phrases. Avoid setting large blocks of text in italics because the readability of italicized text, particularly at screen resolutions, is much lower than in comparably sized roman text.

Bold
Boldface text gives emphasis because it contrasts in color from the body text. Section subheads work well set in bold. Boldface text is readable on-screen, though large blocks of text set in bold lack contrast and therefore lose their effectiveness.

Underlined
Underlined text is a carryover from the days of the typewriter, when such options as italics and boldface were unavailable. In addition to its aesthetic shortcomings , underlining has a special functional meaning in Web documents. Most readers have their browser preferences set to underline links. This default browser setting ensures that people with monochromatic monitors or people who are color-blind can identify links within text blocks. If you include underlined text on your Web page it will certainly be confused with a hypertext link.

Colored text
Although the use of color is another option for differentiating type, colored text, like underlining, has a special functional meaning in Web documents. You should avoid putting colored text within text blocks because readers will assume that the colored text is a hypertext link and click on it. Colored text does work well as a subtle means to distinguish section heads, however. Choose dark shades of color that contrast with the page background, and avoid using colors close to the default Web link colors of blue and violet.

Capital letters
Capitalized text is one of the most common and least effective methods for adding typographical emphasis. We recognize words in two ways, by parsing letter groups and by recognizing word shapes. Words or headlines set in all capital letters form rectangles with no distinctive shape. To read a block of text set in all capital letters we must parse the letter groups — read the text letter by letter — which is uncomfortable and significantly slows reading. As you read the following paragraph, notice how tiring the process is:

THE DESIGN OF THE SITE WILL DETERMINE THE ORGANIZATIONAL FRAMEWORK OF YOUR WEB SITE. AT THIS STAGE YOU WILL MAKE THE ESSENTIAL DECISIONS ABOUT WHAT YOUR AUDIENCE WANTS FROM YOU, WHAT YOU WISH TO SAY, AND HOW TO ARRANGE THE CONTENT TO BEST MEET YOUR AUDIENCE'S NEEDS.
ALTHOUGH PEOPLE WILL INSTANTLY NOTICE THE GRAPHIC DESIGN OF YOUR WEB PAGES, THE ORGANIZATION OF THE SITE WILL HAVE THE GREATEST IMPACT ON THEIR EXPERIENCE.

Spacing and indentation
One of the most effective and subtle ways to vary the visual contrast and relative importance of a piece of text is simply to isolate it or treat it differently from the surrounding text. If you want your major headers to stand out more without making them larger, add space before the header to separate it from any previous copy. Indentation is another effective means of distinguishing bulleted lists, quotations, or example text . HTML lists are automatically indented , and you can use the BLOCKQUOTE tag to indent blocks of text. You can define your own indents using CSS.

source TYPOGRAPHY EMPHASIS PHOTOGRAPHY http://webstyleguide.com

graphics accessibility photography

Photographer

GRAPHICS ACCESSIBILITY PHOTOGRAPHY Accessibility

Whenever you introduce nontext elements to your Web design you reduce the accessibility of your pages. For the purposes of universal access, text is the ultimate content type: it can be most widely adapted for use with different devices and assistive technologies. But the Web is a visual medium, and access to images and other nontext materials is one of the reasons why people turn to the Web over other information sources. As a Web page designer, you should keep this restriction in mind and take measures to ensure that your design decisions do not exclude disabled users from your Web page content.

Text alternates
Your site navigation can be supplied using graphics such as buttons, imagemaps, or animations, but it is critical that you design your navigation system for all users. If your site's navigation interface uses graphic menus, always provide an alternate navigation route using basic text links. Users without graphics capabilities, such as those using text-only browsers or visually impaired users, will not be able to use your site if you provide only graphic menus.

ALT-text
HTML has several built-in fallbacks designed to allow your content to degrade gracefully under different viewing conditions. One of these is ALT, an attribute of the IMG tag. The ALT attribute allows you to supply an alternate text description with any images you place on your page. Users who cannot see your images for whatever reason will see or hear the text you supply using the ALT attribute:

<IMG SRC="banner.gif" HEIGHT="30" WIDTH="535" ALT="Web Style Guide">

In the above example, users accessing the Web Style Guide page with graphic loading turned off will see the alternate text "Web Style Guide" in place of the banner graphic. Visually impaired users using assistive technology to access Web pages will hear the text "Web Style Guide" read aloud. This way you can use a graphic banner to establish site identity, but users who do not see images will still know what site they are visiting.

www.ebay.com

Writing good ALT-text is an epigrammatic art, challenging your ability to describe the content and function of an image in just a few words. Browsers do not currently wrap ALT-text, so users reading ALT-text from the screen will normally see only a few words, though users who are read ALT-text by software will hear the entire description. Think not only about what the image is but also how it functions on the page. What does the image say? What is its purpose? Is it there to identify your organization? If so, write ALT-text that identifies your organization. Does it provide navigation options? Write ALT-text that describes where the user will go after clicking on the image. Think about the primary purpose of the graphic and attempt to convey it in ten words or fewer.

<IMG SRC="up.gif" HEIGHT="10" WIDTH="10" ALT="Go to top of page">

Also include ALT-text describing link destinations for imagemap menus so that users who cannot see the graphic menu will know where they will go if they select an imagemap link.

At times ALT-text is not useful — for example, for interface images like custom bullets or for invisible spacer graphics — and in those cases you should include an empty ALT attribute in your IMG tag. An empty ALT attribute hides the graphic from text-only browsers and assistive technologies like screen readers. If you leave out the ALT-text, users could hear the words "image, image, image, image" because most software is designed to let the user know when there is an undescribed image on the page. If instead you include an empty ALT attribute, the software knows to skip the image.

source GRAPHICS ACCESSIBILITY PHOTOGRAPHY http://webstyleguide.com

multimedia delivery photography

Photographer

MULTIMEDIA DELIVERY PHOTOGRAPHY Delivery

The technology of networked media consists of three main components: the server, the network, and the client machine. These three components must work in tandem to deliver good Web multimedia to the desktop. It makes no difference how high-end your video server and network are if your users are running low-end desktop machines that cannot handle the demands of playback.

The wildest of all these wild cards is bandwidth. If you purchase a high-end media server, you can expect a certain level of performance. You can predict playback performance on desktop machines. These elements are somewhat measurable. But unless you are working with a dedicated network, bandwidth will be hugely variable and difficult to predict. Issues regarding bandwidth run from the basic configuration of your connection to the network to the amount of network traffic at any given time.

Given these variables, the parameters for creating and delivering Web multimedia are not easily defined. They will vary depending on the scope and content of your project. If you are creating a Web site for a corporate intranet, for example, your media can be more technologically demanding than if you send it worldwide over the Internet. The key is to be well acquainted with the configuration of your client base and prepare accordingly.

Streaming
Streaming technology sends data to the desktop continuously but does not download the entire file. In the optimal scenario, the content is stored on a media server, which maintains a constant conversation with the client to determine how much data the user can support. Based on this information, the server adjusts the data stream accordingly and sends just enough data to the client.

Streaming offers many benefits, the first of which is random access. Streaming technology permits movies to be viewed at any point in the video stream. If your reader is accessing an hour's worth of video and wishes to view only the last five minutes, he or she can use the controls to move forward to the desired starting point. Another benefit is a lower storage
demand on the client machine. Streaming media plays directly to the display; it is not stored in memory or on the hard drive.

The strengths of streaming are also its shortcomings. To play a movie in real time the player software needs to keep up with the incoming data sent from the server. As a result, if there are glitches in the network or if the client machine cannot handle playback, the data may simply be lost. Streaming playback requires significant processing power, so playback may be suboptimal if the processor has to drop frames to keep up with the incoming stream. Also, streaming media needs to be heavily compressed to create a file small enough to play in real time.

Downloading
Downloadable media is temporarily stored on the client machine in memory or on the hard drive. Most downloadable media is progressive, which means that the information necessary for playback is stored at the beginning of the file. Progressive download allows playback before the entire file has downloaded. Downloadable media is sent to the client using the same HTTP protocol as a Web page, so no special server is required. As long as the download speed stays above the data rate of the movie, playback will be uninterrupted.

The quality of downloadable media is generally higher than that of streaming media. Because the data rate is not required to remain low enough to play the material in real time, more data can be devoted to image quality and motion. Downloadable media also has integrity: all the data in the original movie is contained in the downloaded version. This means that playback is predictable and that you can download the data onto your disk for future use.

The main drawback of downloadable media is the storage demand it places on the client machine. Even videos of short duration require many megabytes of storage. The other problem is that downloadable media does not allow random access. If you want to view only the last few minutes of a long clip you must wait for the entire clip to download. One solution to both of these problems is to split longer media segments into smaller chunks. This reduces the demands on the client machine and allows users more direct access to the material they want.

www.lynda.com

source MULTIMEDIA DELIVERY PHOTOGRAPHY http://webstyleguide.com

process before you begin photography

Photographer

PROCESS BEFORE YOU BEGIN PHOTOGRAPHY Before you begin

Planning a Web site is a two-part process: first you gather your development partners, analyze your needs and goals, and work through the development process outlined here to refine your plans. The second part is creating a site specification document that details what you intend to do and why, what technology and content you'll need, how long the process will take, what you will spend to do it, and how you will assess the results of your efforts. The site specification document is crucial to creating a successful site, as it is both the blueprint for your process and the touchstone you'll use to keep the project focused on your agreed goals and deliverables.

Section contents

Planning
Developing a site specification

source PROCESS BEFORE YOU BEGIN PHOTOGRAPHY http://webstyleguide.com

page design page dimensions photography

Photographer

PAGE DESIGN PAGE DIMENSIONS PHOTOGRAPHY Page dimensions

Although Web pages and conventional print documents share many graphic, functional, and editorial similarities, the computer screen, not the printed page, is the primary delivery site for Web-based information, and the computer screen is very different from the printed page. Computer screens are typically smaller than most opened books or magazines. A common mistake in Web design is spreading the width of page graphics beyond the area most viewers can see on their seventeen- or nineteen-inch display screens:

Graphic safe areas
The "safe area" for Web page graphics is determined by two factors: the minimum screen size in common use and the width of paper used to print Web pages.

Most display screens used in academia and business are seventeen to nineteen inches in size, and most are set to display an 800 x 600-pixel screen. Web page graphics that exceed the width dimension of the most common display screens look amateurish and will inconvenience many readers by forcing them to scroll both horizontally and vertically to see the full page layout. It's bad enough to have to scroll in one direction; having to scroll in two directions is intolerable.

www.microsoft.com and www.mapquest.com

Even on small computer screens it is possible to display graphics that are too wide to print well on common letter-size, legal-size, or A4 paper widths. Current browser versions attempt to resolve printing problems by providing the option to scale the page contents to fit the standard paper width. However, many users are unaware of the "fit to page" option. Another problem is that wide pages that are scaled to fit are often illegible because the type has been scaled excessively. In many Web pages, however, printing is a secondary concern. Just be aware that your readers will either lose the right margin of your layout or produce a scaled document if they print wide pages in standard vertical print layout. Pages with lots of text should always be designed to print properly because most readers will print those pages to read them more comfortably. If the page layout is too wide readers will lose several words from each line of text down the right margin or have to contend with small type.

The graphic safe area dimensions for printing layouts and for page layouts designed to use the maximum width of 800 x 600 screens are shown below:

Graphic "safe area" dimensions for layouts designed to print well:


Maximum width = 560 pixels


Maximum height = 410 pixels

Graphic "safe area" dimensions for layouts designed for 800 x 600 screens:


Maximum width = 760 pixels


Maximum height = 410 pixels

source PAGE DESIGN PAGE DIMENSIONS PHOTOGRAPHY http://webstyleguide.com

site design what s new? pages photography

Photographer

SITE DESIGN WHAT S NEW? PAGES PHOTOGRAPHY "What's new?" pages

Many Web sites need to be updated frequently so that the information they present doesn't become stale. But the presence of new information may not be obvious to readers unless you make a systematic effort to inform them. If items that appear on your home page menu are updated, you could place a "new" graphic next to each updated item. If, however, your site is complex, with many levels of information spread over dozens of pages, you might consider making a "What's New" page designed specifically to inform users of updated information throughout the site.

Every Web page in a corporate or institutional site should carry a revision date that is changed each time the page is updated so that users can be sure they have the latest version. Many readers print pages from the Web. Without a revision date, your readers have no way of telling whether the page they printed is current or outdated.

source SITE DESIGN WHAT S NEW? PAGES PHOTOGRAPHY http://webstyleguide.com

page design consistency photography

Photographer

PAGE DESIGN CONSISTENCY PHOTOGRAPHY Consistency

Establish a layout grid and a style for handling your text and graphics, then apply it consistently to build rhythm and unity across the pages of your site. Repetition is not boring; it gives your site a consistent graphic identity that creates and then reinforces a distinct sense of "place" and makes your site memorable. A consistent approach to layout and navigation allows readers to adapt quickly to your design and to confidently predict the location of information and navigation controls across the pages of your site.

If you choose a graphic theme, use it throughout your Web site. The Bridgeman Art Library home page banner, below, sets the graphic theme for the site and introduces distinctive typography and a set of navigation buttons:

www.bridgeman.co.uk

Below is a banner at the top of an interior page in the Bridgeman Art Library site. Note how the typography and the navigation theme are carried over to the interior banners. There is no confusion about whose site you are navigating through:

www.bridgeman.co.uk

source PAGE DESIGN CONSISTENCY PHOTOGRAPHY http://webstyleguide.com

graphics diagrams for the computer screen photography

Photographer

GRAPHICS DIAGRAMS FOR THE COMPUTER SCREEN PHOTOGRAPHY Diagrams for the computer screen

Basic diagrams also work well on the computer screen if they are carefully designed to match the grid of pixels on the screen. Graphics built with orthogonal lines or diagonal lines at 45-degree angles work best for the screen, as this enlarged view illustrates:

Complex icons are hard to interpret, and they look mushy and confusing on the screen. Keep icons and navigation graphics as simple as possible:

Simple isometric perspective graphics also work well because they depend on straight lines and 45-degree diagonals. Although the restrictions of working within fixed line angles make the technique unsuitable for many diagrammatic graphics, it is possible to build complex illustrations using this technique. The regularity of the isometric line work and the absence of the complexities of perspective bring order to graphics that might otherwise be too complex for Web page presentation:

Another benefit of keeping diagrammatic art and maps simple is that graphic simplicity is ideally suited to the LZW encoding compression algorithm used in GIF graphics . This 450 x 306-pixel GIF graphic is large for a Web page, but it compresses to a mere 8 KB because the contents are well suited to LZW compression:

Be careful about choosing the proper sizes for this type of illustration. Graphics carefully built to match the pixel grid cannot be resized automatically in Photoshop — they must be redrawn by hand to larger or smaller sizes to avoid a mushy, fuzzy look that destroys their effectiveness:

The low resolution of the computer screen is insufficient for displaying diagrams that incorporate many curves or angles; lines that do not follow the pixel grid appear jagged. To optimize these kinds of diagrams for Web pages you'll need to use antialiasing to smooth the boundaries and make the jagged edges less apparent:

At great magnification antialiased graphics may have fuzzy boundaries, but at normal magnification antialiasing produces smooth, natural-looking line work.

source GRAPHICS DIAGRAMS FOR THE COMPUTER SCREEN PHOTOGRAPHY http://webstyleguide.com

typography typefaces photography

Photographer

TYPOGRAPHY TYPEFACES PHOTOGRAPHY Typefaces

Each typeface has a unique tone that should produce a harmonious fit between the verbal and visual flow of your content. With the first versions of HTML, Web authors had no control over typefaces . Fonts were set by the browser, so pages were viewed in whatever font the user specified in his or her browser preferences. The more recent versions of HTML and CSS allow designers to specify the typeface. This is useful not only for aesthetic reasons but also because of the differing dimensions of typefaces. A layout that is carefully designed using one face may not format correctly in another.

In specifying typefaces you should choose from the resident default fonts for most operating systems. If you specify a font that is not on the user's machine, the browser will display your pages using the user-specified default font. Bear in mind, too, that users can set their browser preferences to ignore font tags and display all pages using their designated default font.

Legibility on screen
Some typefaces are more legible than others on the screen. A traditional typeface such as Times Roman is considered to be one of the most legible on paper, but at screen resolution its size is too small and its shapes look irregular. Screen legibility is most influenced by the x-height and the overall size of the typeface.

Adapted traditional typefaces
Times New Roman is a good example of a traditional typeface that has been adapted for use on computer screens. A serif typeface like Times New Roman is about average in legibility on the computer screen, with a moderate x-height. Times New Roman is a good font to use in text-heavy documents that will probably be printed by readers rather than read from the screen. The compact letter size of Times New Roman also makes it a good choice if you need to pack a lot of words into a small space.

Designed for the screen
Typefaces such as Georgia and Verdana were designed specifically for legibility on the computer screen; they have exaggerated x-heights and are very large compared to more traditional typefaces
in the same point size. These fonts offer excellent legibility for Web pages designed to be read directly from the screen. However, the exaggerated x-heights and heavy letterforms of these fonts look massive and clumsy when transferred to the high-resolution medium of paper.

Choosing typefaces
The most conventional scheme for using typefaces is to use a serif face such as Times New Roman or Georgia for body text and a sans serif face such as Verdana or Arial as a contrast for headlines. We generally set our text-laden Web pages in Times New Roman because it produces a reasonable balance between density of information and overall legibility. Most readers expect a serif font for long blocks of text and find Times New Roman comfortable to read off-screen from paper printouts. Various studies purport to show that serif type is more legible than sans serif type and vice versa. You can truly judge type legibility only within the context of the situation — on the screen — as users will see your Web page.

You may use either a variation of the serif font or a contrasting sans serif face for the display type. It is safest to use a single typographic family and vary its weight and size for display type and emphasis. If you choose to combine serif and sans serif faces, select fonts that are compatible and don't use more than two typefaces on a page.

The most useful fonts that ship with the Apple Macintosh and Microsoft Windows operating systems are reproduced here :

Specifying typefaces
The early versions of HTML did not allow designers to specify a typeface for Web documents. With version 3.2 came several new tags aimed at giving designers more control over the visual properties of elements, among them the FONT tag. Many of these have been "deprecated" by the World Wide Web Consortium, which means that they may be dropped from future versions of HTML. Although the added tags enable designers to create more elegant-looking pages, they also result in cumbersome code that is difficult to adapt and maintain. You can still use the FONT tag to set the type in your documents, but a better approach is to consolidate text formatting in style sheets.

You can specify any typeface for your Web pages, but many computers have only the default operating system fonts installed. If the typeface you specify is not available on the user's computer, the browser will switch to the default font . To increase the chances that the reader will see a typeface you are happy with, you can specify multiple fonts. The browser will check for the presence of each font , so you can specify three or four alternates before the browser applies the default font, for example, "Verdana, Geneva, Arial, Helvetica." As a last-ditch effort you can end your font declaration with a generic font designation such as "sans serif." That way, if the browser cannot find any of the listed fonts, it will display the text in any available sans serif font.

P

Notice that multiword fonts like "Times New Roman" must appear within quotation marks.

A good way to make sure that your type settings are functioning correctly is to set your browser's default proportional font setting to something that is obviously different from your intended font. For example, set your browser's default font to Courier if you are not using Courier in your document. When you view your page, anything that appears in Courier must not be marked up properly.

source TYPOGRAPHY TYPEFACES PHOTOGRAPHY http://webstyleguide.com

process developing a site specification photography

Photographer

PROCESS DEVELOPING A SITE SPECIFICATION PHOTOGRAPHY Developing a site specification

The site specification is the planning team's concise statement of core goals, values, and intent, to provide the ultimate policy direction for everything that comes next. Designing a substantial Web site is a costly and time-consuming process. When you're up to your neck in the daily challenges of building the site, it can be surprisingly easy to forget why you are doing what you are, to lose sight of your original priorities, and to not know on any given day whether the detailed decisions you are making actually support those overall goals and objectives. A well-written site specification is a powerful daily tool for judging the effectiveness of a development effort. It provides the team with a compass to keep the development process focused on the ultimate purposes of the site. As such, it quickly becomes a daily reference point to settle disputes, to judge the potential utility of new ideas as they arise, to measure progress, and to keep the development team focused on the ultimate goals.

At minimum, a good site specification should define the content scope, budget, schedule, and technical aspects of the Web site. The best site specifications are very short and to the point, and are often just outlines or bullet lists of the major design or technical features planned. The finished site specification should contain the goals statement from the planning phase, as well as the structural details of the site.

Goals and strategies

What is the mission of your organization?
How will creating a Web site support your mission?
What are your two or three most important goals for the site?
Who is the primary audience for the Web site?
What do you want the audience to think or do after having visited your site?
What Web-related strategies will you use to achieve those goals?
How will you measure the success of your site?
How will you adequately maintain the finished site?

Production issues

How many pages will the site contain? What is the maximum acceptable count under this budget?
What special technical or functional requirements are needed?
What is the budget for the site?
What is the production schedule for the site, including intermediate milestones and dates?
Who are the people or vendors on the development team and what are their responsibilities?

These are big questions, and the broad conceptual issues are too often dismissed as committees push toward starting the "real work" of designing and building a Web site. However, if you cannot confidently answer all of these questions, then no amount of design or production effort can guarantee a useful result.

Avoiding "scope creep"
The site specification defines the scope of your project — that is, what and how much you need to do, the budget, and the development schedule. "Scope creep" is the most prevalent cause of Web project failures. In badly planned projects, scope creep is the gradual but inexorable process by which previously unplanned "features" are added, content and features are padded to mollify each stakeholder group, major changes in content or site structure during site construction are made, and more content or interactive functionality than you originally agreed to create is stuffed in. No single overcommitment is fatal, but the slow, steady accumulation of additions and changes is often enough to blow budgets, ruin schedules, and bury what might have been an elegant original plan under megabytes of muddle and confusion.

Don't leap into building a Web site before you understand what you want to accomplish and before you have developed a solid and realistic site specification for creating your Web site. The more carefully you plan, the better off you will be when you begin to build your site.

One excellent way to keep a tight rein on the overall scope of the site content is to specify a maximum page count in the site specification. Although a page count is hardly infallible as a guide , it serves as a constant reminder to everyone involved of the project's intended scope. If the page count goes up, make it a rule to revisit the budget implications automatically — the cold realities of budgets and schedules will often cool the enthusiasm to stuff in "just one more page." A good way to keep a lid on scope creep is to treat the page count as a "zero sum game." If someone wants to add pages, it's up to them to nominate other pages to remove or to obtain a corresponding increase in the budget and schedule to account for the increased work involved.

Changes and refinements can be a good thing, as long as everyone is realistic about the impact of potential changes on the budget and schedule of a project. Any substantial change to the planned content, design, or technical aspects of a site must be tightly coupled with a revision of the budget and schedule of the project. People are often reluctant to discuss budgets or deadlines frankly and will often agree to substantial changes or additions to a development plan rather than face an awkward conversation with a client or fellow team member. But this acquiescence merely postpones the inevitable damage of not dealing with scope changes rationally.

The firm integration of schedule, budget, and scope is the only way to keep a Web project from becoming unhinged from the real constraints of time, money, and the ultimate quality of the result. A little bravery and honesty up front can save you much grief later. Make the plan carefully, and then stick to it.

source PROCESS DEVELOPING A SITE SPECIFICATION PHOTOGRAPHY http://webstyleguide.com

typography type graphics photography

Photographer

TYPOGRAPHY TYPE GRAPHICS PHOTOGRAPHY Type graphics

Typography cannot always be neatly separated from the graphics of your Web site. Graphic text can be tightly integrated with images in ways that are impossible in HTML text:

www.dartmouth.edu/~socy15

For aesthetic reasons you may choose to use graphical representations of type rather than manipulate HTML type. In either case you'll need to understand how to best render type within GIF and JPEG graphics.

Anti-aliased type

Antialiasing is a technique widely used in computer graphics to optimize the look of graphics and typography on the display screen. Antialiasing visually "smoothes" the shapes in graphics and type by inserting pixels of intermediate colors along boundary edges between colors. In typography, antialiasing removes the jagged edges of larger type characters. At normal viewing distances antialiasing gives the impression that the type is rendered at a higher resolution:

Creating antialiased type
Sophisticated image editing programs such as Adobe Photoshop will create antialiased type automatically, and these "paint" image editors are where most Web designers create their graphic typography. If, however, you have a complex arrangement of typography and graphics , you may wish to work first in a drawing program such as Adobe Illustrator or Macromedia FreeHand. Drawing programs are better at laying out text and will let you edit the text up to the final rendering into a paint graphic to use on the Web page. Final rendering is usually done by importing the graphic into Photoshop, where all text will automatically become antialiased:

www.eng.yale.edu

We often use graphic type within banner or navigational graphics, but we rarely use graphic type simply as a stylistic substitute for headlines or subheads within a Web page. Purely graphic typography cannot be searched and indexed along with the HTML-based text on a Web page. Your best option is to repeat the textual content of the graphic inside an ALT tag and hope that search engines will pick up that content, too. Finally, bear in mind that graphic type is far more difficult to edit or update than HTML text.

When not to use antialiasing
Antialiasing is great for large display type, but it is not suitable for small type sizes, especially type smaller than 10 points. The antialiasing reduces the legibility of small type, particularly when you import it into Photoshop from a drawing program like Adobe Illustrator. If you need to antialias small type sizes, do it in Photoshop:

For the anatomic illustration below we used non-antialiased 9-point Geneva for the illustration labels:

source TYPOGRAPHY TYPE GRAPHICS PHOTOGRAPHY http://webstyleguide.com

site design site elements photography

Photographer

SITE DESIGN SITE ELEMENTS PHOTOGRAPHY Site elements

Web sites vary enormously in their style, content, organization, and purpose, but all Web sites that are designed primarily to act as information resources share certain characteristics.

Section contents

Home pages
Menus and subsites
Resource lists, "other related sites" pages
Site guides
"What's new?" pages
Search features
Contact information and user feedback
Bibliographies and appendixes
FAQ pages
Custom server error pages

source SITE DESIGN SITE ELEMENTS PHOTOGRAPHY http://webstyleguide.com

editorial style organizing your prose photography

Photographer

EDITORIAL STYLE ORGANIZING YOUR PROSE PHOTOGRAPHY Organizing your prose

Documents written to be read online must be concise and structured for scanning. People tend to skim Web pages rather than read them word by word. Use headings, lists, and typographical emphasis for words or sections you wish to highlight; these are the elements that will grab the user's attention during a quick scan. Keep these elements clear and precise — use your page and section heads to describe the material. The "inverted pyramid" style used in journalism works well on Web pages, with the conclusion appearing at the beginning of a text. Place the important facts near the top of the first paragraph where users can find them quickly.

www-3.ibm.com/ibm/easy

That said, keep in mind that much content is not well suited to the telegraphic style that works well for online documents. Web authors often cut so much out of their presentations that what remains would barely fill a printed pamphlet. Concise writing is always better, but don't "dumb down" what you have to say. You can assume that readers will print anything longer than half a page and read it offline. Simply make printing easy for your readers and you can use the Web to deliver content without cutting the heart out of what you have to say.

Another way to style online documents is to break up your information into logical "chunks" connected by hypertext links, but only where it makes sense . Don't break up a long document arbitrarily; users will have to download each segment and will have difficulty printing or saving the entire piece. The key to good chunking is to divide your information into comprehensive segments. That way readers will have direct and complete access to the topics they are interested in without having to wade through irrelevant material or follow a series of links to get the whole picture.

source EDITORIAL STYLE ORGANIZING YOUR PROSE PHOTOGRAPHY http://webstyleguide.com

page design accessibility photography

Photographer

PAGE DESIGN ACCESSIBILITY PHOTOGRAPHY Accessibility

Many accessibility issues have to do with presenting certain types of content, and these are covered in the chapters on typography, graphics, and multimedia. But you can take measures with your page design to improve access for users with physical disabilities, particularly those who use assistive technologies to access Web pages. There are also basic decisions you'll need to make about your design approach: whether to adopt a no-holds-barred stance and push the boundaries of Web design or create simple, clear designs that will accommodate all users.

Layout tables that make sense
The biggest page-design barrier for disabled users is the use of layout tables. In particular, layout tables can make things unpleasant for blind users. Many blind users rely on software that reads Web pages aloud or outputs information to a speech synthesizer or braille display. Current software looks at the HTML code of the pages and reads tables in a cell-by-cell, or linearized, fashion. This means that each cell of the table becomes a line or paragraph of text that is read in sequence . A complex layout containing multiple nested tables will produce a sort of aural cubism, with unrelated bits of information appearing from nowhere and disrupting the natural flow of the content. Worse still is the case with older screen readers, which look not at source code but instead at the rendered page. This software starts at the top left of the page and reads line by line, producing a garbled stream of gibberish for the multicolumn layouts that are so common on the Web.

www.dartmouth.edu/~webteach

The best solution is to use CSS instead of layout tables to create columns and to control spacing, but as discussed above, browser support remains too patchy and inconsistent for style sheet positioning to be a real option . Until CSS support improves, keep your use of layout tables simple and clean. Each time you add another nested table, first consider whether it is essential to your design and if the function could be handled some other way. The simpler the table, the better sense it will make when linearized.

Alternatives
Attention to accessibility needn't squelch the creative and experimental nature of Web design. There is room on the Web for designs based on complex tables, large graphics, and technologies such as Flash, but these pages need to come with an equivalent, accessible version. If there is simply no way to design your primary pages for access, provide a link to an alternative page containing the same or equivalent content in a more accessible format.

If you use graphics for navigation, be sure to include redundant text links so that those users who cannot see your graphics have an alternate method for navigating your site. Also be sure to include the ALT attribute for all graphics and imagemaps .

Clarity and consistency
All users benefit from clear and consistent Web site design, but for some users it is critical. With a lack of spatial cues and with radically different approaches to navigation that must be relearned at every site, it is far too easy to get disoriented or lost on the Web. For people with cognitive disabilities such as memory or learning disabilities, this difficulty is magnified manyfold. In the long run, there is really no place on the Web for a clever, quirky, or highfalutin design approach. Stick with a simple language and navigation applied consistently throughout your site, and everyone will benefit.

source PAGE DESIGN ACCESSIBILITY PHOTOGRAPHY http://webstyleguide.com

graphics images on the screen photography

Photographer

GRAPHICS IMAGES ON THE SCREEN PHOTOGRAPHY Images on the screen

The primary challenge in creating images for Web pages is the relatively low resolution of the computer screen. But today's computer screens can display thousands or millions of colors, and this wealth of color minimizes the limitations of screen resolution. Complex graphics or color photographs often look surprisingly good on Web pages for two reasons:

True-color or high-color displays show enough colors to reproduce photographs and complex art accurately
The light transmitted from display monitors shows more dynamic range and color intensity than light reflected from printed pages

Digital publishing is color publishing: on the Web there is no economic penalty for publishing in color. Web pages may in fact be the best current means of distributing color photography — it's a lot cheaper than color printing, and it's also more consistent and reliable than all but the most expert color printing.

Section contents

The screen versus printed color artwork
Complex illustrations or photographs
Diagrams for the computer screen

source GRAPHICS IMAGES ON THE SCREEN PHOTOGRAPHY http://webstyleguide.com

site design menus and subsites photography

Photographer

SITE DESIGN MENUS AND SUBSITES PHOTOGRAPHY Menus and subsites

Unless your site is small you will probably need a number of submenu pages that users enter from a general category listing on your home page. In complex sites with multiple topic areas it is not practical to burden the home page with dozens of links — the page grows too long to load in a timely manner, and its sheer complexity may be off-putting to many users. Providing a submenu page for each topic will create a mini-home page for each section of the site. For specialized, detailed submenus you could even encourage frequent users to link there directly. In this way the submenus will become alternate home pages in "subsites" oriented to a specific audience. Be sure to include a basic set of links to other sections of the site on each subsite home page, and always include a link back to your main organization home page.

source SITE DESIGN MENUS AND SUBSITES PHOTOGRAPHY http://webstyleguide.com

interface design make your web pages freestanding photography

Photographer

INTERFACE DESIGN MAKE YOUR WEB PAGES FREESTANDING PHOTOGRAPHY Make your web pages freestanding

World Wide Web pages differ from books and other documents in one crucial respect: hypertext links allow users to access a single Web page with no preamble. For this reason Web pages need to be more independent than pages in a book. For example, the headers and footers of Web pages should be more informative and elaborate than those on printed pages. It would be absurd to repeat the copyright information, author, and date of a book at the bottom of every printed page, but individual Web pages often need to provide such information because a single Web page may be the only part of a site that some users will see. This problem of making documents freestanding is not unique to Web pages. Journals, magazines, and most newspapers repeat the date, volume number, and issue number at the top or bottom of each printed page because they know that readers often rip out articles or photocopy pages and will need that information to be able to trace the source of the material.

Given the difficulties inherent in creating Web sites that are both easy to use and full of complex content, the best design strategy is to apply a few fundamental document design principles consistently in every Web page you create. The basic elements of a document aren't complicated and have almost nothing to do with Internet technology. It's like a high school journalism class: who, what, when, and where.

Who
Who is speaking? This question is so basic, and the information is so often taken for granted, that authors frequently overlook the most fundamental piece of information a reader needs to assess the provenance of a Web document. Whether the page originates from an individual author or an institution, always tell the reader who created it. The flood of Web sites propagating incorrect or intentionally misleading material on the Florida vote problems of the 2000 American presidential election offers a vivid example of how "information" of no known origin and of dubious authenticity can quickly cloud legitimate inquiry and discussion.

What
All documents need clear titles to capture the reader's attention, but for several reasons peculiar to the Web this basic editorial element is especially crucial. The document title is often the first thing browsers of World Wide Web documents see as the page comes up. In pages with lots of graphics the title may be the only thing the user sees for several seconds as the graphics download onto the page. In addition, the page title will become the text of a browser "bookmark" if the user chooses to add your page to his or her list of URLs . A misleading or ambiguous title or one that contains technical gibberish will not help users remember why they bookmarked your page.

When
Timeliness is an important element in evaluating the worth of a document. We take information about the age of most paper documents for granted: newspapers, magazines, and virtually all office correspondence is dated. Date every Web page, and change the date whenever the document is updated. This is especially important in long or complex online documents that are updated regularly but may not look different enough to signal a change in content to occasional readers. Corporate information, personnel manuals, product information, and other technical documents delivered as Web pages should always carry version numbers or revision dates. Remember that many readers prefer to print long documents from the Web. If you don't include revision dates your audience may not be able to assess whether the version they have in hand is current.

Where
The Web is an odd "place" that has huge informational dimensions but few explicit cues to the place of origin of a document. Click on a Web link, and you could be connected to a Web server in Sydney, Chicago, or Rome — anywhere, in fact, with an Internet connection. Unless you are well versed in parsing URLs it can be hard to tell where a page originates. This is the World Wide Web, after all, and the question of where a document comes from is sometimes inseparable from whom the document comes from. Always tell the reader where you are from, with your corporate or institutional affiliations.

Incorporating the "home" URL on at least the main pages of your site is an easy way to maintain the connection to where a page originated. Once the reader has saved the page as a text file or printed the page onto paper, this connection may be lost. Although newer versions of the most common Web browsers allow users to include the URL automatically in anything they print, many people never take advantage of this optional feature. Too many of us have stacks of printed Web pages with no easy way of locating the Web sites where they originated.

Every Web page needs:

An informative title
The creator's identity
A creation or revision date
At least one link to a local home page or menu page
The "home page" URL on the major menu pages in your site

Include these basic elements and you will have traveled 90 percent of the way toward providing your readers with an understandable Web user interface.

source INTERFACE DESIGN MAKE YOUR WEB PAGES FREESTANDING PHOTOGRAPHY http://webstyleguide.com

typography characteristics of type on the web photography

Photographer

TYPOGRAPHY CHARACTERISTICS OF TYPE ON THE WEB PHOTOGRAPHY Characteristics of type on the Web

Although the basic rules of typography are much the same for both Web pages and conventional print documents, type on-screen and type printed on paper are different in crucial ways. The computer screen renders typefaces at a much lower resolution than is found in books, magazines, and even pages output from inexpensive printers. Most magazine and book typography is rendered at 1200 dots per inch or greater, whereas computer screens rarely show more than about 85 dpi. Also, the useable area of typical computer screens is smaller than most magazine and book pages, limiting the information you can deliver on a Web page without scrolling.

But perhaps the most distinctive characteristic of Web typography is its variability. Web pages are built on the fly each time they are loaded into a Web browser. Each line of text, each headline, each unique font and type style is re-created by a complex interaction of the Web browser, the Web server, and the operating system of the reader's computer. The process is fraught with possibilities for the unexpected: a missing font, an out-of-date browser, or a peculiar set of font preferences designated by the reader. You should regard your Web page layouts and typography as suggestions of how your pages should be rendered — you'll never know exactly how they will look on the reader's screen.

www.chronicle.com

source TYPOGRAPHY CHARACTERISTICS OF TYPE ON THE WEB PHOTOGRAPHY http://webstyleguide.com

page design page headers and footers photography

Photographer

PAGE DESIGN PAGE HEADERS AND FOOTERS PHOTOGRAPHY Page headers and footers

Many Web authors surrender to the giddy thrills of large home page graphics, forgetting that a Web page is not just a visual experience — it has to function efficiently to retain its appeal to the user. Remember that the page builds its graphic impact only gradually as it is downloaded to the user. The best measure of the efficiency of a page design is the number of options available for readers within the top four inches of the page. A big, bold graphic may tease casual Web surfers, but if it takes the average reader thirty seconds to download the top of your page, and there are few links to be seen until he or she scrolls down the page , then you may lose a big part of your audience before you offer them links to the rest of your site.

Page headers: Site identity
Careful graphic design will give your Web site a unique visual identity. A "signature" graphic and page layout allows the reader to grasp immediately the purpose of the document and its relation to other pages. Graphics used within headers can also signal the relatedness of a series of Web pages. Unlike designers of print documents, designers of Web systems can never be sure what other pages the reader has seen before linking to the current page. Sun Microsystems's many Web pages and subsites all include a signature header graphic that includes basic navigation links:

www.sun.com

Even if you choose not to use graphics on your pages, the header area of every Web page should contain a prominent title at or near its top. Graphics placed above the title line should not be so large that they force the title and introductory text off the page on standard office-size display screens. In a related series of documents there may also be subtitles, section titles, or other text elements that convey the relation of the displayed document to others in the series. To be effective, these title elements must be standardized across all the pages in your site.

Page footers: Provenance
Every Web page should contain basic data about the origin and age of the page, but this repetitive and prosaic information does not need to be placed at the top of the page. Remember, too, that by the time readers have scrolled to the bottom of your Web page the navigation links you might have provided at the top may no longer be visible. Well-designed page footers offer the user a set of links to other pages in addition to essential data about the site.

The pages in the IBM Web site all carry a distinctive footer graphic with a consistent visual and functional identity:

www-3.ibm.com/ibm/easy

source PAGE DESIGN PAGE HEADERS AND FOOTERS PHOTOGRAPHY http://webstyleguide.com

page design cross-platform issues photography

Photographer

PAGE DESIGN CROSS-PLATFORM ISSUES PHOTOGRAPHY Cross-platform issues

Browser variations
Every Web browser interprets HTML and CSS tags a little differently. Tables, forms, and graphic positioning and alignment tags will all work a bit differently in each brand or operating system version of Web browser. These subtleties normally pass unnoticed, but in very precise or complex Web page layouts they can lead to nasty surprises. Never trust the implementation of HTML, CSS, JavaScript, Java, or any plug-in architecture until you have seen your Web pages displayed and working reliably in each brand of browser. If significant numbers of your readers are using the Macintosh, Linux, or UNIX operating systems, you should also test your more complex pages and programming functionality in those operating systems. Unfortunately, platform-specific bugs remain common in the major Web browsers.

source PAGE DESIGN CROSS-PLATFORM ISSUES PHOTOGRAPHY http://webstyleguide.com

typography legibility photography

Photographer

TYPOGRAPHY LEGIBILITY PHOTOGRAPHY Legibility

Good typography depends on the visual contrast between one font and another and between text blocks, headlines, and the surrounding white space. Nothing attracts the eye and brain of the reader like strong contrast and distinctive patterns, and you can achieve those attributes only by carefully designing them into your pages. If you cram every page with dense text, readers see a wall of gray and will instinctively reject the lack of visual contrast. Just making things uniformly bigger doesn’t help. Even boldface fonts quickly become monotonous, because if everything is bold then nothing stands out “boldly.”

When your content is primarily text, typography is the tool you use to “paint” patterns of organization on the page. The first thing the reader sees is not the title or other details on the page but the overall pattern and contrast of the page. The regular, repeating patterns established through carefully organized pages of text and graphics help the reader to establish the location and organization of your information and increase legibility. Patchy, heterogeneous typography and text headers make it hard for the user to see repeating patterns and almost impossible to predict where information is likely to be located in unfamiliar documents:

Section contents

Alignment
Line length
White space
Typefaces
Type size
Emphasis

source TYPOGRAPHY LEGIBILITY PHOTOGRAPHY http://webstyleguide.com

site design organizing information photography

Photographer

SITE DESIGN ORGANIZING INFORMATION PHOTOGRAPHY Organizing information

Our day-to-day professional and social lives rarely demand that we create detailed architectures of what we know and how those structures of information are linked. Yet without a solid and logical organizational foundation, your Web site will not function well even if your basic content is accurate, attractive, and well written. Cognitive psychologists have known for decades that most people can hold only about four to seven discrete chunks of information in short-term memory. The way people seek and use reference information also suggests that smaller, discrete units of information are more functional and easier to handle than long, undifferentiated tracts.

There are five basic steps in organizing your information:

Divide your content into logical units
Establish a hierarchy of importance among the units
Use the hierarchy to structure relations among units
Build a site that closely follows your information structure
Analyze the functional and aesthetic success of your system

Section contents

"Chunking" information

source SITE DESIGN ORGANIZING INFORMATION PHOTOGRAPHY http://webstyleguide.com

Menata Interior Rumah Tinggal

Interior Rumah Tinggal

Oleh Rakhmat Supriyono


DAPAT menikmati keindahan dan kenyamanan di dalam rumah merupakan impian semua orang, terutama penghuni kota yang setiap hari disuguhi kesemrawutan lalu-lintas. Sesungguhnya tidak terlalu sulit untuk menciptakan interior rumah tinggal yang nyaman dan menyenangkan.
Hal pertama yang perlu dilakukan adalah, ciptakan suasana dan kondisi interior yang dapat menampung kebutuhan-kebutuhan penghuninya secara efektif, aman, nyaman dan menyenangkan sehingga membuat betah berada di dalamnya. Singkirkan benda-benda yang kurang jelas fungsinya dan hanya memenuhi ruang. Jauhkan pula benda-benda yang tidak kita sukai dan ganti dengan benda-benda yang kita sukai. Misal lukisan yang tidak bisa kita nikmati keindahannya, bisa diganti dengan lukisan lain yang dapat memberikan kesenangan batin. Tanaman hias yang sedang nge-trend dan mahal belum tentu dapat memberikan kesenangan, tetapi justru bisa membuat stress karena takut rusak, hilang, dan kecemasan yang membuat perasaan tidak nyaman.
Pada awalnya penataan interior rumah tinggal hanya menitikberatkan pada fungsi semata. Ibarat berpakaian, yang penting dapat menutup bagian-bagian tubuh. Namun sekarang, sejalan dengan peningkatan aspek sosial, ekonomi, budaya, teknologi, seni dan sektor-sektor lainnya, fungsi rumah tidak lagi sekedar ‘wadah aktivitas’, tetapi perlu unsur keindahan yang dapat memberikan kepuasan fisik dan psikhis bagi penghuninya.
Merancang interior rumah tinggal tidak bisa diserahkan sepenuhnya pada desainer interior atau arsitek, karena yang paling tahu kebutuhan, kesukaan, dan kebiasaan-kebiasaan kita adalah kita sendiri selaku penghuni. Penataan interior yang baik adalah jika hasilnya sesuai dengan kebutuhan dan gaya pribadi penghuninya. Perlu diingat bahwa keindahan adalah hal yang subyektif, tidak bisa diperdebatkan. Orang yang menyukai warna oranye sah-sah saja mendominasi ruangan miliknya dengan warna ini. Kamar seorang remaja penggemar sepakbola bisa menjadi lebih menarik jika aksesoris di kamarnya bermotifkan gambar-gambar sepakbola. Lain lagi dengan kamar remaja penggemar musik. Benda atau hiasan yang tidak sesuai dengan kesukaan penghuni ruang bisa memicu kebosanan dan kebencian.
Menata interior rumah tinggal sebenarnya bukan sesuatu yang rumit. Setiap orang bisa melakukannya sendiri. Apalagi saat ini banyak referensi buku, majalah, dan internet yang bisa memancing ide-ide kreatif. Namun demikian jangan sekali-sekali meniru tanpa memahami maksud dan konsep perancangan yang sebenarnya. Sebagai misal, kalau kita belum bisa menikmati lukisan yang absurd, jangan dipaksakan memajangnya hanya untuk menyamakan dengan yang ada di majalah. Hasilnya tentu tidak akan memberikan kepuasan. Harus diingat bahwa segala keindahan dan kenyamanan interior paling utama ditujukan pada penghuninya, bukan untuk orang lain. Oleh sebab itu tentukan terlebih dahulu kesukaan-kesukaan penghuni ruang tanpa ada intervensi orang lain. Kesukaan anak perempuan tentu berbeda dengan anak laki-laki. Perempuan usia 17 tahun akan berbeda kesukaannya dengan ketika ia berusia 7 tahun. Maka setelah anak memasuki usia remaja perlu ada penatan ulang, mulai dari pengecatan dinding dengan warna yang sesuai, hiasan dinding, sampai ke perabot dan perlengkapan ruang.

Langkah kerja
Jika Anda ingin menata sendiri interior rumah, langkah-langkah kerja berikut ini barangkali dapat membantu.
1. Buat daftar fungsi tiap-tiap ruang. Misal ruang tidur anak, fungsinya tentu tidak hanya untuk tidur, tetapi juga untuk melakukan aktivitas belajar, bermain game dengan temannya, mengerjakan hobi, beristirahat, dsb.
2. Buat daftar lebih rinci semua aktivitas yang dilakukan dan bagaimana cara melakukan aktivitas tersebut. Misal dapur, aktivitasnya mulai dari menyimpan alat, menyimpan bahan masakan, meracik, memasak, mencuci alat, dan seterusnya. Dari sini dapat ditentukan jenis perabot dan perlengkapan yang dibutuhkan, sekaligus penataannya disesuaikan dengan hubungan aktivitas.
3. Buat daftar perabot dan perlengkapan yang dibutuhkan. Setiap benda dalam ruang hendaknya mempunyai fungsi. Perabot dan perlengkapan yang kurang jelas kegunaannya sebaiknya disingkirkan. Pilihlah desain perabot dan perlengkapan ruang yang sesuai (warna, bahan, bentuk, ukuran, style, dan tampilan desain).
4. Buat beberapa alternatif penataan perabot (layout) di atas kertas, kemudian pilih salah satu yang paling efektif dan efisien. Pertimbangkan kelancaran aktivitas, kenyamanan, keamanan dan keindahan.
5. Tambahkan elemen-elemen dekorasi seperlunya. Dimulai dari pemilihan warna dinding, pintu, korden, lantai, sampai ke pemilihan vas bunga, kap lampu, hiasan dinding, tanaman hias, patung, dan sebagainya. Khusus untuk ruang tidur (ruang pribadi) dapat ditambahkan barang-barang khas milik pribadi seperti poster sang idola, foto-foto pribadi, dan benda koleksi lainnya.

Prinsip penataan
Dalam penataan perabot dan perlengkapan ruang perlu dipertimbangkan aspek kesederhanaan, kemudahan-jangkau, sehingga seluruh aktivitas dapat berjalan lancar, nyaman, aman dan efektif. Agar interior tampak harmonis dan menyenangkan, prinsip-prinsip penataan berikut ini perlu diperhatikan.
1. Kesatuan. Elemen-elemen yang digunakan dalam ruang sebaiknya memiliki ‘kesamaan tema’ (bahan, warna, bentuk, tekstur, finishing). Misal, semua perabot menggunakan bahan utama besi, warna kehijauan, modern, dan kesamaan lainnya. Penggabungan perabot modern dan tradisional dalam satu ruang akan terlihat kurang harmonis.
2. Proporsi. Perbandingan ukuran antara benda dengan besarnya ruang yang ditempati perlu diperhitungkan. Ukuran perabot, tanaman, lukisan, dan benda-benda lainnya harus disesuaikan dengan ukuran ruang atau bidang sehingga tidak terkesan terlalu besar atau terlalu kecil.
3. Keseimbangan. Secara keseluruhan penempatan benda-benda dalam ruang harus seimbang, tidak terkesan berat sebelah. Tidak hanya dalam penempatan perabot, tetapi juga dalam penempatan hiasan dinding.
4. Irama. Penataan benda perlu diatur sehingga tampak dinamis dan tidak monoton. Misal dalam penataan hiasan dinding, tidak selalu berjejer lurus tetapi dapat dibelokkan, dimiringkan, dibedakan ukurannya, dsb.
5. Aksen. Agar suasana ruang tidak tampak monoton dan membosankan, berilah aksen atau pusat perhatian (point of interest). Aksen bisa berupa lukisan, patung, tanaman, kap lampu, dan benda-benda hias lain yang memiliki bentuk, warna, bahan, dan karakter yang mencolok, berbeda dengan benda-benda lainnya.

Interior akan tampak harmonis jika atmosfer di dalamnya tampak menyatu. Sebaliknya, interior rumah akan tampak kacau apabila di dalamnya terdapat berbagai macam style atau gaya. Sebagai misal dapat dibayangkan betapa tidak serasinya sebuah ruang tamu yang memiliki satu set sofa modern dan di dekatnya terdapat almari ukir dengan warna alam yang mengkilat. Penggabungan lebih dari satu style memang dapat menghasilkan rancangan yang menarik, namun hal ini perlu pengalaman dan sense of aesthetic yang memadai.
Betapapun, rumah adalah tempat paling penting untuk menjaga keharmonisan keluarga. Rumah yang nyaman dapat menghilangkan perasaan lelah setelah seharian kerja di kantor, dan dapat menambah gairah hidup yang pada akhirnya dapat meningkatkan produktivitas, kedamaian, dan keharmonisan keluarga. Sebaliknya rumah yang kurang tertata dengan baik dapat menambah kelelahan dan depresi. q

Desain Majalah Kampus

Desain majalah kampus: ilustrasi, fotografi, tipografi untuk majalah kampus

Oleh: Rakhmat Supriyono

PEran desain atau perwajahan dalam penerbitan pers belakangan tampak lebih dominan. Penampilan visual media cetak kini dituntut lebih atraktif, kreatif, dan persuasif untuk tujuan merebut perhatian pembaca. Tidak terkecuali “majalah kampus”. Jika aspek perwajahan tidak digarap secara menarik, jangan terlalu berharap akan dibaca. Sebab pembaca telah terbiasa "dimanjakan" matanya oleh desain-desain yang menarik dan menyenangkan mata.
Pengelola majalah saat ini tidak cukup hanya mengandalkan kualitas isi (berita/naskah), kendati aspek verbal ini amat penting. Harus disadari bahwa aspek visual (desain grafis) memiliki peran sangat strategis dan efektif untuk memikat calon pembaca.
Majalah kampus idealnya memiliki dua bidang keredaksian, yakni Redaktur Naskah (Verbal Editor) dan Redaktur Artistik (Visual Editor). Redaktur Naskah berurusan dengan kualitas isi (content) termasuk menentukan formula, seleksi naskah, membuat judul yang menarik, mengedit bahasa, dan sebagainya. Sedangkan Redaktur Artistik bertugas mengkomunikasikan naskah menggunakan unsur-unsur visual seperti huruf, foto, ilustrasi, warna, garis, dan elemen grafis lainnya sehingga naskah-naskah tadi dapat ditangkap oleh pembaca secara mudah, menyenangkan, dan mengesankan.


SASARAN PEMBACA
Bagaimana desain majalah dikatakan baik? Pertanyaan ini tidak mudah dijawab, karena memang tidak ada patokan baku untuk memastikan desain majalah yang baik. Meskipun demikian, desain majalah yang dianggap baik umumnya memiliki kriteria: mudah dibaca, komunikatif, menarik dan menyenangkan sasaran pembacanya.
Pendekatan pertama dalam merancang majalah kampus adalah mengkaji formula atau konsumsi naskah yang hendak disajikan. Pahami dengan baik siapa sasaran pembaca yang dituju dan sajian apa yang sekiranya menarik. Apakah ia seperti TEMPO dan GATRA yang memiliki gaya santai tapi ilmiah, atau semacam Kawanku dan CosmoGIRL! yang membidik remaja kota, elit, trendy, dan terpelajar? Setiap majalah seharusnya memiliki sasaran pembaca yang jelas. Dari sinilah seorang desainer mulai bekerja, menentukan image perwajahan majalah (the kind of a look) yang sesuai dengan mood pembacanya.

COVER

Cover atau sampul majalah punya peran sangat strategis untuk menarik perhatian pembaca. Kalau diumpamakan toko, cover ibarat etalase atau window-display. Usahakan agar desain sampul berteriak "LOOK AT ME!" atau "TAKE ME, NOW!". Cover majalah harus dapat mengiklankan dirinya sendiri. Beberapa aspek berikut perlu dipertimbangkan.
· Cover harus memiliki ciri khas atau identitas, ia harus tampil beda dari yang lain sehingga pembaca dapat dengan mudah mengenalinya, terutama kalau ia dipajang bersama dengan majalah-majalah lain.
· Cover majalah harus punya stopping-power yang kuat untuk merampok perhatian pembaca, untuk menghipnotis calon pembaca. Secara visual harus berani bersaing ketika dipajang di kios penjualan bersama majalah-majalah lain. Usahakan tampil segar, original dan kreatif.
· Ciptakan mood yang sesuai dengan selera pembaca melalui komposisi warna, tipografi, foto, dan aspek visual lainnya. Misal untuk majalah remaja, diperlukan warna-warna yang mencolok, kontras, dengan ilustrasi foto yang trendy dan pemilihan huruf (tipografi) yang dinamis.

Elemen-elemen visual yang perlu di-display pada sampul majalah umumnya meliputi:
· Logo/Logotype atau nama majalah. Gunakan jenis huruf yang impresif, simpel, dan komunikatif.
· Nomor penerbitan/edisi dan tanggal-bulan-tahun.
· Harga eceran.
· Judul-judul naskah yang menarik, biasanya Laporan Utama dan artikel-artikel eksklusif/fenomenal.
· Unsur visual, berupa foto, ilustrasi, dan tipografi.
· Iklan (misal: BONUS POSTER, BONUS CD, dll.)

Elemen-elemen di atas disusun dengan memperhatikan kaidah-kaidah desain (dibicarakan pada sesi lain), dengan senantiasa mengutamakan kaidah komunikasi – NOT just ART!


HALAMAN DALAM
Tugas desainer tidak hanya merancang cover. Pekerjaan lain yang tidak kalah pentingnya adalah menggarap layout halaman dalam. Setelah calon pembeli tertarik pada cover majalah dan kemudian membukanya, tugas desainer berikutnya adalah mengajak atau membimbing calon pembaca untuk menyimak halaman demi halaman hingga timbul keinginan untuk membaca (membeli).
Perlu diingat bahwa pembaca pada saat membuka majalah selalu melihat halaman kiri dan kanan sekaligus, maka dua halaman yang berhadapan harus dirancang sekaligus dalam satu kesatuan. Penempatan elemen visual (foto, teks, garis, dll) di halaman kiri harus seimbang dengan halaman kanan.
Untuk menciptakan kemudahan baca (readability) dan kenyamanan baca (legibility), ada dua aspek desain yang perlu diperhitungkan, yaitu tipografi dan fotografi.


Tipografi
Tipografi atau susunan huruf dalam desain majalah merupakan elemen paling berperan untuk mewujudkan kenikmatan dan kemudahan baca. Di komputer tersedia puluhan bahkan ratusan jenis huruf (font). Cara terbaik untuk memilih huruf adalah dengan mempertimbangkan apakah huruf tersebut “mudah dibaca”? Huruf yang terbaik untuk media cetak adalah huruf yang punya nilai keterbacaan tinggi. Jangan sekali-kali berfikir "cari huruf yang artistik biar pembaca tertarik…." Salah besar! Artistik memang perlu, tapi nilai komunikasi lebih diutamakan.
Nilai keterbacaan setidaknya dipengaruhi oleh beberapa faktor berikut ini.
· Jenis huruf (font)
· Ukuran huruf (point size)
· Lebar setting (line length)
· Spasi (baris, huruf, kata)
· Bentuk susunan (alignment)
· Variasi huruf (style)


FOTOGRAFI
Halaman majalah yang hanya dipenuhi teks, tanpa satupun foto, akan tampak seperti lapangan bola. Boring. Setiap naskah atau berita diusahakan ada foto atau ilustrasi. Secara visual foto memiliki daya tangkap (eye-catching) yang kuat. Lebih dari itu, foto yang memiliki bobot jurnalistik mampu bercerita tentang fakta-fakta yang sulit dijelaskan secara verbal.
Pembahasan mengenai fotografi jurnalistik diperbincangkan pada sesi tersendiri. Satu hal perlu diingat, perkembangan fotografi jurnalistik saat ini telah melompat jauh, baik peralatan, teknik, maupun tuntutan kualitasnya. Foto jurnalistik kini dituntut memiliki public-interest yang tinggi, tidak hanya menarik bagi seseorang atau sekelompok tertentu saja. Tugas utama desainer dalam penanganan foto adalah menyusun dan menggabungkannya dengan teks sesuai dengan prinsip-prinsip layout.

Buku Bacaan
Garcia, Mario. 1981. Newspaper Design. London: Prentice-Hall, Inc.
Nelson, Roy Paul. 1983. Publication Design. Third Edition. Iowa: Wm.C.Brown Company Publishers.
Swann, Alan. 1987. How to Understand and Use Design and Layout. Ohio: North Light Books.


Rakhmat Supriyono, lahir di Kebumen Jawa Tengah, 1958. Pernah menjabat Redaktur Artistik di salah satu surat kabar di Yogyakarta, desainer majalah, surat kabar, tabloid, dan buku. Kini mengajar Komputer Grafis, Desain Komunikasi Visual, dan Fotografi.

editorial style titles and subtitles photography

Photographer

EDITORIAL STYLE TITLES AND SUBTITLES PHOTOGRAPHY Titles and subtitles

Editorial landmarks like titles and headers are the fundamental human interface device in Web pages, just as they are in any print publication. A consistent approach to titles, headlines, and subheadings in your documents will help your readers navigate through a complex set of Web pages.

Text styles

The text styles we recommend:

Headline style: Bold, capitalize initial letters of words

Document titles
References to other Web sites
Titles of documents mentioned in the text
Proper names, product names, trade names

Down style: Bold, capitalize first word only

Subheads
References to other sections within the site
Figure titles
Lists

Page titles
Web page titles are designated in the HTML document head section with the TITLE tag. The title is crucial for several reasons. Often the title is the first thing users with slow Internet connections will see; it also becomes the text for any bookmarks the reader makes to your pages. In addition, most search engines regard the page title as the primary descriptor of page content, so a descriptive title increases the chance that a page will appear as the result of a related search query.

The page title should:

Incorporate the name of your company, organization, or Web site
Form a concise, plainly worded reminder of the page contents

Always consider what your page title will look like in a long list of bookmarks. Will the title remind the reader of what he or she found interesting about your pages?

Text formatting for web documents

Some points about text formatting specific to the Web:

Excessive markup. Beware of too much markup in your paragraphs. Too many links or too many styles of typeface will destroy the homogeneous, even "type color" that characterizes good typesetting.
Link colors. If you are including links in the body of your text, choose custom link colors that closely match your text color. Reading from the screen is hard enough without struggling with distracting link colors scattered across the page.
Use the best tool. Write your text in a good word processing program with spell-checking and search features. Transfer your text to HTML only after it has been proofread.
Style sheets in word processors. Don't use the word processor's style sheets to produce "All capitals" or other formatting effects. You will lose those special formats when you convert to plain ASCII text for HTML use.
Special characters. Don't use the "smart quotes" feature. Avoid all special characters, such as bullets, ligatures, and typographer's en and em dashes, that are not supported in standard HTML text. Consult a good HTML guidebook for the listing of special and international characters supported through HTML's extended character formatting.
No auto hyphens. Never use the automatic hyphenation feature of your word processor on text destined for the Web. This may add nonstandard "optional hyphen" characters that will not display properly in Web browsers.

source EDITORIAL STYLE TITLES AND SUBTITLES PHOTOGRAPHY http://webstyleguide.com

multimedia applications for multimedia photography

Photographer

MULTIMEDIA APPLICATIONS FOR MULTIMEDIA PHOTOGRAPHY Applications for multimedia

Web designers must always be considerate of the consumer. A happy customer will come back, but one who has been made to wait and is then offered goods that are irrelevant is likely to shop elsewhere. Because multimedia comes with a high price tag, it should be used sparingly and judiciously.

All too often Web authors include visual or moving elements on the page for the purpose of holding the user's attention. This approach is based on the assumption that Web users have short attention spans, which in many cases may be true. However, the solution is not to add gratuitous "eye candy" to your Web presentation, which may, in fact, command too much of the user's attention and detract attention from the main content of your page. When thinking about adding media to your Web pages, consider first and foremost the nature of your materials. Use images, animations, video, or sound only when relevant to your message.

info.med.yale.edu/intmed/cardio/imaging

Bear in mind, too, that there are technical limitations to the delivery of audiovisual content via the Web. For example, long-duration video and video requiring smooth motion or clear details require large amounts of bandwidth to deliver and may tax the playback capacity of the user's machine. A significant amount of downsampling and compression is required to create a file that is small enough to be delivered via the Web. In some cases, these compromises may be too significant to warrant the effort. When you are considering adding multimedia to your pages, make sure the technology can meet the demands of your content. You don't want users to spend extra time and energy retrieving files that cannot be illustrative owing to limitations of the technology.

Also be wary of fledgling technologies. Plug-ins that allow users to see new and exciting things using their favorite browser software are constantly being introduced. This is especially true of multimedia; the options for encoding and delivering audio, animations, and video are dizzying. Although designers may be tempted to create files that employ the functionality offered by custom plug-ins, they should bear two things in mind. First, the bother and potential confusion of downloading and installing plug-ins will deter many users. Second, it is not prudent to create content in a custom file format that could quickly become obsolete. It is best to create your multimedia content in the standard formats for operating systems and browser software.

This somewhat conservative discussion of multimedia considerations needs one important qualification. If you are creating a site for a specific audience and not for global interests you will probably have more flexibility and can ask more from your users. You can require them to use specific browser software and plug-ins, and you can include data-intensive multimedia elements in your presentation. Say, for example, that your site is academic and your audience is a group of students or faculty with specialized interests. You are charged with the task of creating a custom site that fully addresses these interests, so function should define form. A foreign-language teaching site, for example, could contain bandwidth-intensive audio and video elements because the students who visit the site will use these multimedia elements to improve their abilities with the language. These students are not casual visitors; they are invested in the content, so they will tolerate lengthy download times and more demanding site interaction. And because your audience is defined and finite, you can take steps to ensure that they know what to expect and are prepared when they visit your site.

www.dartmouth.edu/~germ3/rilke

source MULTIMEDIA APPLICATIONS FOR MULTIMEDIA PHOTOGRAPHY http://webstyleguide.com

typography content structure and visual logic photography

Photographer

TYPOGRAPHY CONTENT STRUCTURE AND VISUAL LOGIC PHOTOGRAPHY Content structure and visual logic

The originators of HTML were scientists who wanted a standard means to share particle physics documents. They had little interest in the exact visual form of the document as seen on the computer screen. In fact, HTML was designed to enforce a clean separation of content structure and graphic design. The intent was to create a World Wide Web of pages that will display in every system and browser available, including browsers that "read" Web page text to visually impaired users and can be accurately interpreted by automated search and analysis engines.

In casting aside the graphic design and editorial management traditions of publishing, the original designers of the Web ignored human motivation. They were so concerned about making Web documents machine-friendly that they produced documents that only machines would want to read. In focusing solely on the structural logic of documents they ignored the need for the visual logic of sophisticated graphic design and typography.

For example, most graphic designers avoid using the standard heading tags in HTML because they lack subtlety: in most Web browsers these tags make headlines look absurdly large or ridiculously small . But the header tags in HTML were not created with graphic design in mind. Their sole purpose is to designate a hierarchy of headline importance, so that both human readers and automated search engines can look at a document and easily determine its information structure. Only incidentally did browser designers create a visual hierarchy for HTML headers by assigning different type sizes and levels of boldness to each header element.

Section contents

Cascading style sheets

source TYPOGRAPHY CONTENT STRUCTURE AND VISUAL LOGIC PHOTOGRAPHY http://webstyleguide.com

process information architecture photography

Photographer

PROCESS INFORMATION ARCHITECTURE PHOTOGRAPHY Information architecture

At this stage you need to detail the content and organization of the Web site. The team should inventory all existing content, describe what new content is required, and define the organizational structure of the site. Once a content architecture has been sketched out, you should build small prototypes of parts of the site to test what it feels like to move around within the design. Site prototypes are useful for two reasons. First, they are the best way to test site navigation and develop the user interface. The prototypes should incorporate enough pages to assess accurately what it's like to move from menus to content pages. Second, creating a prototype allows the graphic designers to develop relations between how the site looks and how the navigation interface supports the information design. The key to good prototyping is flexibility early on: the site prototypes should not be so complex or elaborate that the team becomes too invested in one design at the expense of exploring better alternatives.

Typical results or contract deliverables at the end of this stage could include:

Detailed site design specification
Detailed description of site content
Site maps, thumbnails, outlines, table of contents
Detailed technical support specification
Browser technology supported
Connection speed supported
Web server and server resources
Proposals to create programming or technology to support specific features of the site
A schedule for implementing the site design and construction
One or more site prototypes of multiple pages
Multiple graphic design and interface design sketches or roughs

source PROCESS INFORMATION ARCHITECTURE PHOTOGRAPHY http://webstyleguide.com

graphics gif files photography

Photographer

GRAPHICS GIF FILES PHOTOGRAPHY GIF files

The CompuServe Information Service popularized the Graphic Interchange Format in the 1980s as an efficient means to transmit images across data networks. In the early 1990s the original designers of the World Wide Web adopted GIF for its efficiency and widespread familiarity. The overwhelming majority of images on the Web are now in GIF format, and virtually all Web browsers that support graphics can display GIF files. GIF files incorporate a compression scheme to keep file sizes at a minimum, and they are limited to 8-bit color palettes. Several slight variants of the basic GIF format add support for transparent color and for the interlaced GIF graphics popularized by Netscape Navigator.

GIF file compression
The GIF file format uses a relatively basic form of file compression that squeezes out inefficiencies in the data storage without losing data or distorting the image. The LZW compression scheme is best at compressing images with large fields of homogeneous color. It is less efficient at compressing complicated pictures with many colors and complex textures:

Improving GIF compression
You can take advantage of the characteristics of LZW compression to improve its efficiency and thereby reduce the size of your GIF graphics. The strategy is to reduce the number of colors in your GIF image to the minimum number necessary and to remove stray colors that are not required to represent the image. A GIF graphic cannot have more than 256 colors but it can have fewer colors, down to the minimum of two . Images with fewer colors will compress more efficiently under LZW compression.

www.dartmouth.edu/~hist12

Interlaced GIF
The conventional GIF graphic downloads one line of pixels at a time from top to bottom, and browsers display each line of the image as it gradually builds on the screen. In interlaced GIF files the image data is stored in a format that allows browsers that support interlaced GIFs to begin to build a low-resolution version of the full-sized GIF picture on the screen while the file is downloading. Many people find the "fuzzy-to-sharp" animated effect of interlacing visually appealing, but the most important benefit of interlacing is that it gives the reader a preview of the full area of the picture while the picture downloads into the browser.

Interlacing is best for larger GIF images such as illustrations and photographs. Interlacing is a poor choice for small GIF graphics such as navigation bars, buttons, and icons. These small graphics will load onto the screen much faster if you keep them in conventional GIF format. In general, interlacing has no significant effect on the file size of GIF graphics.

Transparent GIF
The GIF format allows you to pick colors from the color lookup table of the GIF to be transparent. You can use image-editing software like Photoshop to select colors in a GIF graphic's color palette to become transparent. Usually the color selected for transparency is the background color in the graphic.

Unfortunately, the transparent property is not selective; if you make a color transparent, every pixel in the graphic that shares that particular color will become also transparent. This can cause unexpected results:

Adding transparency to a GIF graphic can produce disappointing results when the image contains antialiasing . If you use an image-editing program like Photoshop to create a shape set against a background color, Photoshop will smooth the shape by inserting pixels of intermediate colors along the shape's boundary edges. This smoothing, or antialiasing, improves the look of screen images by softening jagged edges. Trouble starts when you set the background color to transparent and then use the image on a Web page against a different background color. The antialiased pixels in the image will still correspond to the original background color. In the example below, when we change the background color from white to transparent , an ugly white halo appears around the graphic:

Transparency works best with simple diagrammatic graphics, but it can also work with complex shapes. The GIF graphic of the watercolor painting below can run across the scan column and into the white background because we made the white background of the sparrow painting transparent. We avoided potential problems with a light halo around the leaves in the gray scan column area by retouching the painting to remove the white antialiased "halo" from the leaf edges:

info.med.yale.edu/caim/manual

Animated GIF
The GIF file format allows you to combine multiple GIF images into a single file to create animation. There are a number of drawbacks to this functionality, however. The GIF format applies no compression between frames, so if you are combining four 30-kilobyte images into a single animation, you will end up with a 120 KB GIF file to push through the wire. The load is lightened somewhat by the fact that animated GIF files stream to the user, so the frames load and play even before the entire file is downloaded. Another drawback of GIF animations is that they are an imposition and a potential distraction. Because there are no interface controls for this file format, GIF animations play whether you want them to or not. And if looping is enabled, the animations play again and again and again. GIF animations are rarely used in a meaningful way, and generally distract readers from the main content of the page. If you are using GIF animation as content — to illustrate a concept or technique where animation is really
required — use the technique sparingly.

source GRAPHICS GIF FILES PHOTOGRAPHY http://webstyleguide.com