Website Design @ St. AugustineA Technical Viewpoint

Deja Vu anyone?

Agenda

Approach to design Design Elements Visual Elements Compliance & Accessibility Questions

Introduction / Approach

User Centered Approach Identify & meet with target audience

e.g. Faculty, Staff, Current / Prospective Students

Conduct interviews & tasks What users need What is important to them Frequent / Infrequent tasks How they accomplish tasks now How they should accomplish (mental notes)

Develop Prototypes

"Throughout the entire development process and beyond, users play a critical

role in the design of easy-to-use products. After all, who knows more about which

products are easy to use than the people who use them?"

IBM User-Centered Design website

Outline / Work Flow

{Develop Prototype*}

Prototype Existing Websites

Final Design

Conduct Usability Tests

*Prototype design based on best practices / researching other similar websites as well as utilizing information gained from first phase of usability tests

Example outcome of aforementioned processes

Wire frames to begin template designs Group of templates to be used for Faculties /

Departments

Header with crest and top navigation

Footer

MENU

Spotlight Image

A B C D E F G

Announcements & Job Opportunities

News

Header with crest and top navigation

Footer

MENU

Spotlight Image

A B C D E F G

Announcements & Job Opportunities

News

EventsCalendar

Sample Wire Frames For Faculty Homepages

A-G represent

image links to

department homepage

Agenda >> Next

Approach to design Design Elements Visual Elements Compliance & Accessibility Questions

Standard Elements of Design

Web page objects and positioning Header with UWI Crest & text Campus Navigation & Search Footer with contact info, disclaimer, privacy, flags Menus - Left Hand Side or Top

About Contact Program Details Research Initiatives Staff Information Student Information Linkages

Optional Elements for Content

Pre built modules can be used to support content on the Faculty or Department Home Pages:

News Modules Calendar Modules Announcement Modules Job Vacancy Module Other custom handles not catered for already or in the

pipeline e.g. eCommerce Cart, Blogs

Agenda >> Next

Approach to design Design Elements Visual Elements Compliance & Accessibility Questions

Visual Elements

Graphics & Spotlights standardize on the techniques used to design

website spotlights. This should be aided by a Marketing / Design Specialist.

Use of Visual Buttons appropriate university related imagery with clear

and readable text Identify standard group of fonts to be used

on graphical buttons and images

Agenda >> Next

Approach to design Design Elements Visual Elements Compliance & Accessibility Questions

Compliance & Accessibility

Use of CSS with compatibility above 1.0 XHTML 1.0 WAI Compliance Use of Interactive Objects / Alternatives

Requires 3rd Party components

Works with standard web browsers

Flash

JAVA

AJAX

DHTML / Java Script

Agenda >> Next

Approach to design Design Elements Visual Elements Compliance & Accessibility Questions

Questions

Can one design encompass all faculties / departments? Possibility of different designs with similar

layouts for faculties and departments (state a distinction / definition for design and layout)

All sites should have a standard set of links / content what should these links be?

Thank You