Conference tnpubs::i-exchange

4.0. "Corporate Design Guidelines for Web Home Pages" by DOCTP::SMASELLA () Wed May 31 1995 14:00

This note contains the Digital Corporate Design Guidelines for creating
a web page that will be accessed from the external server.

Posted with permission from Don Skarzenski.

--------------------------------------------------------------------------------


PLEASE NOTE: THESE GUIDELINES ARE *INTERIM* ONLY. THEY ARE SUBJECT TO
CHANGE AND ARE CURRENTLY (MAY, 95) BEING MODIFIED. USE THE FOLLOWING
*ONLY* AS GUIDELINES. PLEASE CONTACT DON SKARZENSKI (DTN 244-7014;
SALES::DSKARZENSKI; [email protected]) FOR THE MOST
CURRENT GUIDELINES AND ALWAYS INVOLVE HIM *EARLY* IN THE DESIGN CYCLE.


			DIGITAL CORPORATE 
			WORLDWIDE WEB PAGE 
			CONTENT DESIGN GUIDELINES
			(EXTERNAL SERVER)


Please note: 
The following guidelines are designed to fully support all
applicable elements of the Digital Branding campaign.

The guidelines are presented as briefly as possible, for your
convenience and quick reading. Please do not mistake brevity for
curtness or dogmatism: we mean these guidelines to help channel
your creativity -- not restrict it. We are not only willing to
discuss these guidelines -- we are eager to do so. Our goal is
to help you create Web pages that are vivid, bold, exciting and
contemporary. We believe that those same pages must also support
our corporate effort to create a strong. vibrant, and consistent
Brand identity for Digital.

If you have any concerns or questions about any of the guidelines
below, don't hesitate to contact 
	
			Donald Skarzenski
			DTN 244-7014
			(508) 264-7014
			SALES::DSKARZENSKI
	
DIGITAL LOGO
	The authorized corporate logo must be used, in accordance
	with corporate standards. See "Using our logo: Building
	brand equity" part # EE-C3016-50; or find it in the IR
	under Corporate Standards, doc # CS0011. Or use VTX LOS
	to order part number EE-C3016-50.

The DIGITAL logo 
	must be on every page, at the top
	should be indented or centered
	should be in Digital burgundy (if you are using color)
	should not be hot linked
	should not have a white border
	should not be printed over a graphic; it should be on a
		"clear" background (usually grey or white)
	The DIGITAL logo should be dominant over any other logo or symbol
		on the page

	Please adhere to the "exclusion zone" around the logo 
	The logo should not be located close to a graphic element that
		could dominate it through size or color, nor should it
		be near an element in burgundy or in a color that clashes
		with burgundy, such as red, purple, deep blue, and so on.
	
	Put appropriate TM and copyright statements at the bottom of every page

COMMON ERRORS IN USING THE DIGITAL LOGO:
	too small
	white outline
	hot-linked
	printed over a graphic
	misplaced
	dominated by another element
	close to an element in a clashing color


WHEN THE ORIGINAL DOCUMENT DOES NOT HAVE THE DIGITAL LOGO
Occasionally you might use an existing document from the IR or elsewhere
that does not have the Digital logo. In that case, you can 
	hotlink to wherever you found the original, 
	or use the file as preformatted (<PRE>) text within an html document 
	that does include the logo, 
	or add a textual copyright for whoever owns the text.


COLORS
	Try to use only colors that appear on the corporate color palette:
        (URL: http://www.digital.com/info/pics/palette)	
	Avoid soft pastels.
	Do not use clashing colors in elements near our logo.
	Use great care in using red, purple, and orange.
	Use colors judiciously -- avoid a riot of contrasting colors
	*Remember that many users do not have color capability.

ICONS AND HEADINGS
	Whenever possible, use existing icons and headings:
	(URL: http://www.digital.com/info/pics)	

	If it is necessary to create your own icons and headings,
	follow icon design standards and typography as illustrated:
	(URL: http://www.digital.com/info/pics)
	If you are not a graphic artist and do not have access to one,
	please don't create your own icons. A hot-linked word is better than
	an ineffective icon.
	
	A drop shadow may be used, but only in burgundy.

	Never use the same graphic image (icon) to represent multiple meanings.

	All headings and subheads should use the "sentence" or "down" style. 
	That means that only the first word of a heading (and proper nouns) is 
	capitalized. We "break" that rule here because of the limitations of 
	E-mail.


TYPOGRAPHY
Fonts are usually not controllable -- they can be selected/changed by your 
user. When you are creating a GIF file, you CAN control your fonts. 

In that case:

The corporation uses two type fonts:
	Helvetica Bold
	Garamond
If they are unavailable, 
	Arial can replace Helvetica
	Times Roman can replace Garamond

For look and size, look at the headings on the corporate home page. 
Large type, in color and in consistent type faces, are marks of our 
design personality. They help distinguish our pages from the mass of
pages on the WWW.

BULLETS
	Use the corporate standard round, burgundy bullets:
	(located at URL: http://www.digital.com/info/pics)
	If you need to use another "level" of bullet, use
	round, black bullets.

ARTWORK, PHOTOS, GRAPHICS, etc
	Avoid commercial clip art, the sort that is included in many common
		word processing and graphic applications. 
	*NEVER use any graphic unless you have worldwide usage rights 
	Always check what's available in our own online art library:
	check out http.//art.pa.dec.com/html/visual-libraries.html
	Follow the color palette:
		 (URL: http://www.digital.com/info/pics/palette)
	Avoid using a graphic merely for decoration or as an attention-
	getter. Also be sure that your graphics support your message.
	Keep graphics simple -- they'll be easier to understand and
	will load faster.
	Always consider the impact of your graphic on users of different
	cultures.
	Limit the width of your graphics to the width of the Digital 
		burgundy bar (500 pixels)


WRITING STYLE
	Digital's writing style is clear, simple, and straightforward.
	Avoid jargons, acronyms, boasting and unsupported claims.
	Write in the language of your reader.


BUSINESS TONE
	Every page on our external Web represents our corporation.  
	Avoid personal information, questionable humor, "cute"
	information, such as bulletin boards listing recipes, local
	points of interest, etc. The content of our external Web
	pages should be focused on business. That does NOT
	mean that you should not be creative, human, and lighthanded.
	The Internet culture makes creativity and the non-boring the
	norm rather than the exception. We want our pages to be bright
	and memorable, the sort of pages people return to and tell their
	friends about. However, do remember that to our users, the products 
	we sell are much more important than the people who sell or create 
	those products.  Also remember that the Internet culture opposes
	slow-loading graphics that have little content.


BUSINESS CARDS
	Business cards are not always appropriate.  Include them in external
	Web pages only when there is a clear business justification. Here
	are some (non-inclusive) guidelines for when business cards are 
	justified and how they should look:	
	1) When customer contact is an important part of your job
	2) When that contact is usually NOT face-to-face
	3) In the photo, dress professionally
	4) SMILE!  8-)
	5) Follow the standard corporate business card layout

	Do not include DTNs or internal node names -- be sensitive to
	security issues.


BURGUNDY BARS
Each of our Web pages is meant to have two (2) horizontal Digital burgundy 
bars. One divides the header from the body and the other divides the body 
from the footer. The bars  are at WWW.DIGITAL.COM/INFO/PICS.





HEADER
Ideally, to support the Brand precisely, your header would look like this:

        ---------------------------------------------------------
        |
        |
        |                      |D|I|G|I|T|A|L| (indented or centered)
        |
        |
        |
        |____________DIGITAL BURGUNDY BAR_____________________________
        |
	|NAME OF YOUR INFOCENTER


FOOTER
Your footer should look like this:

	|
        |
        |____________BURGUNDY BAR_____________________________
        |
        |
	|  About    Browse    Search    Feedback    Help
	|
	|
	|  DATE (of most recent update)
	|
	|� Digital Equipment Corporation, 1995. The DIGITAL logo is a 
	|trademark of Digital Equipment Corporation. All other trademarks 
	|are the property of their respective owners. 
	|

Please note the order of the parts that make up the footer. The initials
of the page's author are NOT recommended, for a number of reasons. 


NAVIGATION BAR
The corporate navigation bar should be at the bottom of every page. Do 
all you can to make it easy for your users to navigate your pages and the 
rest of our corporation's Web pages.

Using the corporate navigation bar:
1) reinforces a consistent look
2) allows you to take advantage of the Search, Browse, and Feedback
        functions -- which can be very useful
3) allows your user to leave your area and return to our corporate
        home page

You can add your own button for "Top of page" and/or "InfoCenter home
page." If you do, then put your buttons above the corporate nav bar.
Make your own buttons look like other corporate design elements, 
especially the icons.

Do not put navigation buttons at the top of the page. That invites your
user to go elsewhere BEFORE they read your page.


CONSISTENCY
When your user clicks on "Hot link," the next page they see should
begin with "Hot link." Not "Warm link" or "hot-link." That sort of
consistency will make it a little easier for your user to stay
oriented.

EASE OF USE
Try to avoid pages so long that you feel the need to put navigation
buttons on the page to help the reader get from one part of the page
to another. You should try to limit the number of "levels" a user
must explore -- but creating a few enormous pages is not the way to
go. If your pages has more than 5 major headings, it may be too long.


WHAT TOOLS TO USE/WHAT TOOLS YOUR READERS WILL USE
Netscape is the market leader, but several other browsers are used
by large numbers of your potential audience. Make sure that your
pages will be viewable by the widest range of browsers possible --
including the non-graphic ones, such as Lynx. We definitely want
our pages to be "Lynx-friendly."


ALWAYS CHECK YOUR WORK BY RUNNING WEBLINT
Weblint checks the accuracy of your HTML code. It's the best way to ensure
that your pages will be viewable on a full range of browsers -- including
Lynx, a common text-only browser.  Don't make the mistake of coding only
for Netscape.

HTML
Do NOT use the latest version of HTML for at least a few months after 
its release. At this date (May, 1995) it's too soon to use HTML 3.0,
for example.  As a widely accessed Web site (we're in the Internet Top 10) 
we have an obligation to trail new standards by 4-6 months or risk alienating 
much of our audience.


ALT TEXT
Our rule is to define ALT text if the graphic conveys information.
If the graphic is purely decorative then it receives no ALT text.
Of course, if the graphic is purely decorative . . .  do you need it?


USING WWW.DIGITAL.COM/INFO/PICS
We refer frequently to the graphics already available to you on the
corporate Web server.  Here's a simplified process for how to use them:

1. Go to the page (WWW.DIGITAL.COM/INFO/PICS) with your browser

	This shows a collection of all the shared graphics on the webserver, 
	and has a pointer to the online color palette.

	Some of the graphics are re-useable as is (logo, bullets, navbar, 
	rules). Others, such as the InfoCenter headings, serve as models for 
	fonts, colors, icons, etc.

2. Use your browser's View Source option - note the names of the graphics you 
   need

3. include full URLs of the files you use in your test pages for our review

4. Change those URLs to relative URLs before we mirror your pages externally


IF YOU ARE USING NETSCAPE V1.1b
When you see the /info/pics/ graphics onscreen from Netscape v1.1b,
you can save any graphic that is visible by positioning the mouse
pointer over it and clicking and holding down Mouse Button 1.
A menu appears after a couple seconds, with an option to save
the file as a local graphic.


LEGAL/CORPORATE REQUIREMENTS
Below is the standard disclaimer information that Digital Corporate
Legal says should be included with all promotional collateral -- both 
printed and electronic.  The sections within square brackets are to be 
filled in by you whenever applicable.

	"Digital believes the information in this publication is 
	accurate as of its publication date; such information is 
	subject to change without notice. Digital is not responsible 
	for any inadvertent errors."

	"Digital conducts its business in a manner that conserves 
	the environment and protects the safety and health of its 
	employees, customers, and the community."

	"Digital, [and] the DIGITAL logo, [put all other Digital trademarks 
	in alphabetical order here] are trademarks of Digital Equipment 
	Corporation."

	[trademark name] is a trademark of [company name].
	[trademark name] is a registered trademark of [company name].
	[trademark name] and [trademark name] are trademarks of [company name].
	[trademark name] is a registered trademark and [trademark name] is a
  	trademark of [company name].


"The following phrase has been previously used on promotional materials.
**DO NOT** use this phrase for promotional materials:

  "All other names, products, and services are trademarks or registered
  trademarks of their respective owners."


WE'RE HERE TO HELP
The Internet is changing constantly, growing and maturing. New tools
and techniques are introduced almost daily. That means these guidelines
will change and develop over time. We are here to help you use the 
Internet as creative, productive tool for representing Digital and its
products and services -- not to hinder you in any way.

When in doubt, consult Donald Skarzenski (SALES::DSKARZENSKI); 
DTN 244-7014 -- or the corporate home page and the other pages and
sources referred to above.