Download 1 Process - simiweb

1 Process
The first step in designing any web site is to define your goals. Planning a web site is a
two-part process: first you gather your development team, analyze your needs and goals,
and work through the development process outlined here to refine your plans. Next you
create a project charter 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 project charter document
is crucial to creating a successful site: it is both the blueprint for your process and the
touchstone you’ll use to keep the project focused on the agreed-on goals and deliverables.
Thoroughly understand and communicate your top
three goals
Know your audience
Web analytics as a planning tool
Design critiques
Content inventory
Place yourself in the background
Work from a suitable design
Do not overwrite
Prefer the standard to the offbeat
Be clear
Do the visuals last
Revise and rewrite
Be consistent
Do not affect a breezy manner
Degrade gracefully
Do not explain too much
Make sure the user knows who is speaking
The Site Development Process
Every significant web project poses unique challenges, but the overall process of
developing a complex web site generally follows six major stages that you should think
through before crafting your final project planning and proposal documents:
1.
2.
3.
4.
5.
6.
Site definition and planning
Information architecture
Site design
Site construction
Site marketing
Tracking, evaluation, and maintenance
Small is good. Plan the work and then work the plan.
2 Universal Usability
Usability is a measure of effectiveness. It describes how effective tools and information
sources are in helping us accomplish tasks. n designing web sites our job is to reduce
functional limitations through design. When we aim for universal usability, we improve
the quality of life for more people more of the time. On the web, we can work toward
universal usability by adopting a universal design approach to usability.
Accessibility
Principle One: Equitable Use, Principle Two: Flexibility in Use, Principle
Three: Simple and Intuitive Use, Principle Four: Perceptible Information
User research
3 Information Architecture





Organize the site content into taxonomies and hierarchies of information;
Communicate conceptual overviews and the overall site organization to the design
team and clients;
Research and design the core site navigation concepts;
Set standards and specifications for the handling of html semantic markup, and
the format and handling of text content; and
Design and implement search optimization standards and strategies.
Content Inventory
Navigation - Long Tail Phenomenom
Sequence, Hierarchy, Web Linked Sites
Canonical form in web pages: Where to put things, and why
4 Interface Design
Navigation isn’t just a feature of a web site, it is the web site, in the same
way that the building, the shelves, and the cash registers are Sears.
Without it, there’s no there there.
—Steve Krug
Wayfinding has four core components:
1. Orientation: Where am I am right now?
2. Route decisions: Can I find the way to where I want to go?
3. Mental mapping: Are my experiences consistent and understandable enough to
know where I’ve been and to predict where I should go next?
4. Closure: Can I recognize that I have arrived in the right place?
Clear Navigational Aides, No dead end pages, direct access, simple and
consistent, Design integrity and stability,
Bread crumb trail for navigation?
Each Page should be freestanding with who, what, when, and
where!
Summary: Information design guidelines
Every web page needs:






An informative title (which also becomes the text of any bookmark to the page)
The creator’s identity (author or institution)
A creation or revision date
A copyright statement, Creative Commons statement, or other statement of
ownership to protect your intellectual property rights
At least one link to a local home page or menu page, in a consistent location on all
pages
The home page url
Most web pages should also incorporate these additional elements:





An organization logo or name near the upper left corner, with a link back to your
home page
Navigation links to other major sections of your site
At least one heading to identify and clarify the page content
Mailing address and contact information or a link to this information
Alternate (“alt”) text identifying any graphics on the page
Include these basic information elements and you will have traveled 90 percent of the
way toward providing your users with an understandable web user interface.
5 Site Structure
SEO
Focus on your titles and keywords
The ideal optimized web page has a clear editorial content focus, with the key words or
phrases present in these elements of the page, in order of importance:



Page titles: titles are the most important element in page topic relevance; they also
have another important role in the web interface—the page title becomes the text
of bookmarks users make for your page
Major headings at the top of the page (<h1>, <h2>, and so on)
The first several content paragraphs of the page



The text of links to other pages: link text tells a search engine that the linked
words are important; “Click here” gives no information about the destination
content, is a poor practice for markup and universal usability, and contributes
nothing to the topical information of the page
The alternate text for any relevant images on the page: accurate, carefully crafted
alternate text for images is essential to universal usability and is also important if
you want your images to appear in image search results such as Google Images
and Yahoo! Images; the alternate text of the image link is the primary way search
engines judge the topical relevance of an image
The html file name and the names of directories in your site: for example, the
ideal name for a page on Bengal tigers is “bengal-tigers.html”
Keywords, directory names, meta tags, easy to navigate,
6 Page Structure
The experienced web designer, like the talented newspaper art director,
accepts that many projects she works on will have headers and columns
and footers. Her job is not to whine about emerging commonalities but to
use them to create pages that are distinctive, natural, brand-appropriate,
subtly memorable, and quietly but unmistakably engaging.
—Jeffrey Zeldman
Book design, typography, and the larger world of print publishing are enabled by
established conventions and standards for print publication. With “web standards”
methods for building sites, with carefully validated and universally accessible xhtml and
css, we now have excellent technical standards. Unfortunately we’re still in an awkward,
adolescent stage for web publishing, editorial, and design standards, but clear patterns
and user expectations a
The home page
Designing an effective home page can seem daunting, but if you’ve already thought
through the fundamentals of your site navigation and have done the hard work of creating
internal and secondary page templates, you have a great head start. Designing the home
page layout last allows you to acknowledge the unique introductory role of the home
page but places the design firmly within the larger navigational interface and graphic
context of the site.
Home pages have four primary elements:



Identity
Navigation
Timeliness, or content focus

Tools (search, directories)
Good home page designs always blend these four factors. How you blend them depends
on the overall goals of your site, but most good home pages do not balance all four
elements equally. Home pages often have a distinctive theme in which one factor
dominates. Amazon’s home page is all about navigation to products. Yale University’s
home page projects identity. The Atlantic is dominated by timeliness and content.
Google’s famously lean home page is all about tools. An effective home page can’t be all
things to all people. Decide what your priorities are, and build a home page that gives the
user a clear sense of theme and priority (fig. 6.13).
re emerging from the chaos.
7 Page Design
We seek clarity, order, and trustworthiness in information sources, whether traditional
paper documents or web pages. Effective page design can provide this confidence. The
spatial organization of graphics and text on the web page can engage users with graphic
impact, direct their attention, prioritize the information they see, and make their
interactions with your web site more enjoyable and efficient.
The primary purposes of graphic design are to:



Create a clear visual hierarchy of contrast, so you can see at a glance what is
important and what is peripheral
Define functional regions of the page
Group page elements that are related, so that you can see structure in the content
Crowded pages confuse the figure-ground relationships of page elements by creating an
ambiguous field of visual texture, with little contrast to draw the eye and few landmarks
to help the user understand content organization. Crowded elements also cause 1 + 1 = 3
effects, adding visual confusion.
Proximity and uniform connectedness are the most powerful Gestalt principles in page
layout; elements that are grouped within defined regions form the basis for content
modularity and “chunking” web content for easy scanning. A well-organized page with
clear groups of content shows the user at a glance how the content is organized and sets
up modular units of content that form a predictable pattern over pages throughout the site
Consistency, Contrast (fonts, colors, etc.)simplicity, style, whitespace, don’t overuse
contrast
Proximity
Elements that are close to each other are perceived as more related than elements that lie
farther apart (a, below).
Similarity
Viewers will associate and treat as a group elements that share consistent visual
characteristics (b, below).
Continuity
We prefer continuous, unbroken contours and paths, and the vast majority of viewers will
interpret c, below, as two crossed lines, not four lines meeting at a common point.
FIXED VS. FLEXIBLE PAGE WIDTHS
8 Typography
Consistent, Legible, Contrast,
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. 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, on paper—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 (one serif, one sans
serif) on a page.
The most useful fonts that ship with the Apple Macintosh and Microsoft Windows
operating systems are reproduced here, differentiated by their effectiveness on-screen and
on paper. Remember that many Macintosh users who have installed Microsoft Office will
have Windows fonts installed on their systems (fig. 8.9).
1. Readers like large type more than most designers do. It’s not just the taste for
graphic subtlety that drives the dichotomy: web designers are usually under great
pressure to “cram in as much as possible,” and smaller type means more words
per inch.
2. Generous leading (line spacing) is a key to legibility. Larger type helps, but the
data suggests that a moderate type size—11 points—and a standard 13 points of
leading yields the best balance of type size and overall reading comfort.
Display Typography with Graphics
9 Editorial Style
Segment the text for easy scanning, Use descriptive headings, Highlight
important words and sections, Use the inverted pyramid,
Structural markup – h1 and h2 tags, etc.
Prose style
For general advice on clear, concise writing, it is hard to beat George Orwell’s rules for
writing:




Never use a metaphor, simile, or other figure of speech that you are used to seeing
in print.
Never use a long word where a short one will do.
If it is possible to cut a word out, always cut it out.
Never use the passive where you can use the active.


Never use a foreign phrase, a scientific word, or a jargon word if you can think of
an everyday English equivalent.
Break any of these rules sooner than say anything outright barbarous.
Front-load your content, Stick to the point,Cultivate a particular voice,
Think globally, Use numerals for specific numbers whenever possible
Keep readers on your page. Links are descriptive
11 Graphics
First and foremost, consistent interface and identity graphics across a
collection of web pages define the boundaries of a web “site.”
Graphics as content
Graphics serve a number of purposes as elements of content—along with and
complementary to text content:





Illustrations: Graphics can show you things, bringing pieces of the world into
your document
Diagrams: Quantitative graphics and process diagrams can explain concepts
visually
Quantitative data: Numeric charts can help explain financial, scientific, or other
data
Analysis and causality: Graphics can help take apart a topic or show what caused
it
Integration: Graphics can combine words, numbers, and images in a
comprehensive explanation
The parameters that influence the display of web graphics are the user’s
display monitor and network bandwidth capacity.
Screen resolution refers to the number of pixels a screen can display within
a given area. Screen resolution is usually expressed in pixels per linear
inch of screen. Most standard computer displays have resolutions that
vary from 72 to 96 pixels per inch (ppi), depending on how the monitor
and display card are configured.
All major browsers have native support for gif and jpeg graphics, as well
as the basic features of png graphics. Browsers with the Adobe Flash plugin support Flash vector graphics. In theory, you can use any of these
graphic formats for the visual elements of your web pages. In practice,
however, most web developers will continue to favor the gif format for
most page design elements, diagrams, and images and will choose the jpeg
format for photographs, complex “photographic” illustrations, medical
images, and other types of images in which the compression artifacts of the
jpeg process do not severely compromise image quality
Advantages of GIF files



gif is the most widely supported graphics format on the web
gifs of diagrammatic images look better than jpegs
gif supports transparency and interlacing
Advantages of JPEG images



jpeg achieves huge compression ratios, which mean faster downloads
jpeg produces excellent results for most photographs and complex images
jpeg supports full-color (24-bit, true-color) images
Alt-text
<img src="banner.gif" height="30" width="535" alt="Web Style Guide">
Color is the response of our eye and brain to various wavelengths of light. Readers with
normal vision can sense wavelengths of light from 400 nanometers (near ultraviolet) to
700 nm (near infrared).
Computer screens use an additive color system that combines phosphors of red, green,
and blue primary colors, which, when added together in various proportions, produce the
more than 16 million colors possible on RGB screens. The maximum brightness of all
three RGB primaries produces white light on the screen.
12 Multimedia
If you want a golden rule that will fit everybody, this is it: Have nothing in your houses
that you do not know to be useful, or believe to be beautiful.
—William Morris (Use it sparingly)