web design guidelines by scott grissom1 a quick introduction to web design scott grissom associate...

16
Web Design Guidelines b y Scott Grissom 1 A Quick Introduction to Web Design Scott Grissom Associate Professor Computer Science & Info Systems [email protected] www.csis.gvsu.edu/~grissom

Upload: cordelia-hudson

Post on 02-Jan-2016

215 views

Category:

Documents


2 download

TRANSCRIPT

Page 1: Web Design Guidelines by Scott Grissom1 A Quick Introduction to Web Design Scott Grissom Associate Professor Computer Science & Info Systems grissom@gvsu.edu

Web Design Guidelines by Scott Grissom

1

A Quick Introduction to Web Design

Scott Grissom

Associate Professor

Computer Science & Info Systems

[email protected]

www.csis.gvsu.edu/~grissom

Page 2: Web Design Guidelines by Scott Grissom1 A Quick Introduction to Web Design Scott Grissom Associate Professor Computer Science & Info Systems grissom@gvsu.edu

Web Design Guidelines by Scott Grissom 2

Introduction

Web site designWeb usability

Page 3: Web Design Guidelines by Scott Grissom1 A Quick Introduction to Web Design Scott Grissom Associate Professor Computer Science & Info Systems grissom@gvsu.edu

Web Design Guidelines by Scott Grissom 3

Your Goal

Create a web site that is:– useful– compelling– attractive– easy to use– satisfying

Page 4: Web Design Guidelines by Scott Grissom1 A Quick Introduction to Web Design Scott Grissom Associate Professor Computer Science & Info Systems grissom@gvsu.edu

Web Design Guidelines by Scott Grissom 4

Web Development Team

Content providerInformation architectGraphic designerWriter / editorProgrammerProject ManagerUsability Expert

Page 5: Web Design Guidelines by Scott Grissom1 A Quick Introduction to Web Design Scott Grissom Associate Professor Computer Science & Info Systems grissom@gvsu.edu

Web Design Guidelines by Scott Grissom 5

Mission Statement

What are you creating and why?Who will use it?What will they want to do?What are your short and long term goals for the

site?How will you know if your site is successful?

Page 6: Web Design Guidelines by Scott Grissom1 A Quick Introduction to Web Design Scott Grissom Associate Professor Computer Science & Info Systems grissom@gvsu.edu

Web Design Guidelines by Scott Grissom 6

Identify the Audience

Prospective studentsCurrent studentsFaculty / staffAlumniGeneral public

Page 7: Web Design Guidelines by Scott Grissom1 A Quick Introduction to Web Design Scott Grissom Associate Professor Computer Science & Info Systems grissom@gvsu.edu

Web Design Guidelines by Scott Grissom 7

Identify the Content

What do your visitors want?What information do you want to provide?What do similar organizations provide?What do you already have?What do you need to create?

Page 8: Web Design Guidelines by Scott Grissom1 A Quick Introduction to Web Design Scott Grissom Associate Professor Computer Science & Info Systems grissom@gvsu.edu

Web Design Guidelines by Scott Grissom 8

Activity #1

Develop a mission statement– only one sentence

Include– purpose– audience– content

Develop an initial inventory of content

Page 9: Web Design Guidelines by Scott Grissom1 A Quick Introduction to Web Design Scott Grissom Associate Professor Computer Science & Info Systems grissom@gvsu.edu

Web Design Guidelines by Scott Grissom 9

Web Usability

What is it?Why is it important?

Page 10: Web Design Guidelines by Scott Grissom1 A Quick Introduction to Web Design Scott Grissom Associate Professor Computer Science & Info Systems grissom@gvsu.edu

Web Design Guidelines by Scott Grissom 10

Home Page

What can I do at this site?No scrolling should be necessary!AttractiveThis is your first impression

Page 11: Web Design Guidelines by Scott Grissom1 A Quick Introduction to Web Design Scott Grissom Associate Professor Computer Science & Info Systems grissom@gvsu.edu

Web Design Guidelines by Scott Grissom 11

Navigation System

How do I get home?Where am I?Where else can I go?

Page 12: Web Design Guidelines by Scott Grissom1 A Quick Introduction to Web Design Scott Grissom Associate Professor Computer Science & Info Systems grissom@gvsu.edu

Web Design Guidelines by Scott Grissom 12

Usability Evaluation

ChecklistUser testingUsability inspection

– bring in a usability expert

Page 13: Web Design Guidelines by Scott Grissom1 A Quick Introduction to Web Design Scott Grissom Associate Professor Computer Science & Info Systems grissom@gvsu.edu

Web Design Guidelines by Scott Grissom 13

Usability Checklist

Are all links correct?Is there a link to home on every page?Is navigation consistent on every page?Does each page have an appropriate title?Did I proofread all content?Create user profiles

– can they do what they will likely want to do?

Page 14: Web Design Guidelines by Scott Grissom1 A Quick Introduction to Web Design Scott Grissom Associate Professor Computer Science & Info Systems grissom@gvsu.edu

Web Design Guidelines by Scott Grissom 14

Activity #2

Go to other university sitesKick the tires and look for usability problemsWhat do you like?What do you think will cause problems?What do you hate?

Page 15: Web Design Guidelines by Scott Grissom1 A Quick Introduction to Web Design Scott Grissom Associate Professor Computer Science & Info Systems grissom@gvsu.edu

Web Design Guidelines by Scott Grissom 15

Other University Sites

Hope College

www.hope.edu

U of M

www.umich.edu

Michigan State

www.msu.edu

Wayne State

www.wayne.edu

Hillsdale

www.hillsdale.edu

Page 16: Web Design Guidelines by Scott Grissom1 A Quick Introduction to Web Design Scott Grissom Associate Professor Computer Science & Info Systems grissom@gvsu.edu

Web Design Guidelines by Scott Grissom 16

Conclusion

Web site design– start with a mission statement– plan and organize the content

Web usability– you are NOT the typical visitor– find out what problems the typical visitor has with your

site