web identity application · web development and design considerations web identity application 102....
TRANSCRIPT
web identity application
secti
on
ele
ven
99
contents
elements of webpage design ......................................................................... 100-101
web development and design considerations ........................................................102
website examples .......................................................................................... 103-106
University of California, San Francisco | Public Affairs | Visual Identity Standards
For purposes of identity and usability, certain elements of every offi cial UCSF webpage are
required when creating a new site or new design. In addition, other standard elements and
design considerations are recommended; standardization aids organization of content and
facilitates the creation of consistent, recognizable, usable and accessible webpages.
BannerAs noted in section 10, use of one of the standard UCSF web banners is required for all offi cial UCSF webpages. This banner includes a required link to the main UCSF website. See page 89.
Copyright noticeAll offi cial UCSF webpages must include a copyright notice referencing the Regents of the University of California. The three required elements of this copyright notice are: a) the word “copyright” or the copyright symbol ©, but not both; b) the year, which may be a single year or a range, and which for actively maintained sites should always be updated with the current year; and c) the phrase “The Regents of the University of California.” The phrase “All rights reserved” is not necessary, as it is implicit in the copyright notice. No punctuation is required.
Some examples:
Copyright 2007 The Regents of the University of California
© 2007 The Regents of the University of California
© 1997-2007 The Regents of the University of California
Page titleAll offi cial UCSF webpages must include, in the title fi eld of the HTML or other generated code, the name of the University, either in its correct and preferred usage in all caps (no periods, no spaces) – UCSF – or as the full, expanded version – University of California, San Francisco (with an initial cap for all words except “of”). The name may be used either before or after the specifi c page title content, set off with a space, a dash or a colon as preferred. Another alternative is to use “at UCSF” or “at University of California, San Francisco” after the specifi c page title.
Some examples:
<title>UCSF Online Campus Directory</title>
<title>Faculty & Staff – UCSF</title>
<title>University of California, San Francisco | Campus Life Services</title>
<title>UCSF: A-Z list of websites</title>
Contact informationAll offi cial UCSF webpages must include a contact phone number or email address, a link to such information, or a link to a contact form.
elements of webpage design
ele
ments
of w
eb
page d
esig
nw
eb
id
en
tity
ap
plicati
on
required page elements
100
University of California, San Francisco | Public Affairs | Visual Identity Standards
University identifi cationTo ensure that UCSF websites are consistently identifi able and retrievable by search engines, all offi cial UCSF webpages should include both usages of the University name – i.e., both in all caps and in the full, expanded version – as text somewhere within the page; e.g., the page title, the page content, in graphic element “alt” or “title” attributes, or in hidden meta-tag keyword or description fi elds.
Update/review dateA “last updated” or “last reviewed” date is recommended for inclusion on all UCSF webpages.
FooterFor usability considerations and for consistency across University websites, it is recommended that certain required elements, such as the contact information and/or links and the copyright notice, be incorporated into a standard repeating footer. Other elements that could be included in a standard site footer include the “last updated” or “last reviewed” date, a link to a site map, and links to site policies (e.g., privacy, accessibility, etc.).
SearchThe standard recommended confi guration of the required UCSF web banner (see page 89) includes an embedded link to the UCSF search page. If the optional confi guration of the banner (which does not include the “Search UCSF” link) is used for a given page, then it is recommended that a separate link to the UCSF search page be incorporated somewhere on the page.
elements of webpage design (continued)
ele
ments
of w
eb
page d
esig
n (continued
)w
eb
id
en
tity
ap
plicati
on
recommended page elements
101
University of California, San Francisco | Public Affairs | Visual Identity Standards
GeneralWhile section 10 of this document deals with considerations unique to web design, other sections – e.g., sub-branding, improper logo use, partner logos, etc. – also apply to web design projects.
As with any new design project, you should start by consulting a professional graphic designer. On-campus creative web services are available and estimates can be provided from UCSF Public Affairs ([email protected]). Or if you are hiring an outside professional graphic designer, ensure that the vendor has access to the UCSF Visual Identity Standards.
Information about guidelines, policies and laws governing use of the web at UCSF is available online (identity.ucsf.edu).
Screen resolutionWhile the percentage of users accessing UCSF websites at screen resolutions of 800x600 or smaller is decreasing, UCSF Public Affairs continues to recommend that offi cial UCSF websites be designed to display accurately, with a minimum of horizontal scrolling, at a screen resolution of 800x600.
TypographyAs noted on page 93, for live text elements, offi cial UCSF websites should use only Helvetica (all weights and styles), Verdana (all weights and styles), Arial (all weights and styles) and Times New Roman (all weights and styles except bold italic). For text created as graphics, however, use the offi cial UCSF typefaces, Helvetica Neue and Bodoni.
Color paletteThe offi cial UCSF web color palette is covered on pages 95-98.
UC sealUse of the UC seal is restricted to offi cial UCSF webpages, and even there should be incorporated only selectively as a background graphic, if at all. For most offi cial UCSF webpages, in fact, use of the UC seal is not recommended. The primary graphic identity affi liation should be to UCSF rather than to the UC system as a whole, and accomplished through inclusion of one of the required standard banners, as covered on page 89.
Cascading style sheets (CSS)Use of CSS for page layout and positioning, especially as opposed to using tables for such purposes, is strongly recommended.
web development and design considerations
web
deve
lop
ment
and
desig
n c
onsid
era
tions
web
id
en
tity
ap
plicati
on
102
University of California, San Francisco | Public Affairs | Visual Identity Standards
website examples
The following examples demonstrate the range and impact of a cohesive visual identity on the web. Consistent application of elements of our web identity system unifi es various UCSF departments and entities. These examples also illustrate how the identity framework can achieve a range of creative expression.
All materials featured were created by UCSF Public Affairs. Look for more information at identity.ucsf.edu whenever questions arise during the creation of UCSF web materials. For answers to technical questions during the creation of UCSF web materials, or for creative services, web resources or information about developing a website, please contact UCSF Public Affairs ([email protected]).
UCSF homepage
web
id
en
tity
ap
plicati
on
web
site e
xam
ple
s
103
advancing health worldwide™
University of California, San Francisco | Public Affairs | Visual Identity Standards
website examples (continued)
stem cell research website
web
id
en
tity
ap
plicati
on
web
site e
xam
ple
s (continued
)
104
University of California, San Francisco | Public Affairs | Visual Identity Standards
website examples (continued)
mission bay campus website
web
id
en
tity
ap
plicati
on
web
site e
xam
ple
s (continued
)
105
University of California, San Francisco | Public Affairs | Visual Identity Standards
website examples (continued)
positive quit website
web
id
en
tity
ap
plicati
on
web
site e
xam
ple
s (continued
)
106