March s". 2013

Tacey LenyardFor CIT-270

WEBSITE DESIGN: STEP 1

DEFINING THE WEBSITE

The science resource center is a website that provides information about theAlverno College science resource center including but not limited to centerhours and services offered. It also provides internal and external links toAlverno College students in regards to other resource centers and thoseresource center hours as well.

Audience:

The audience of the science resource center are Alverno College studentswho will vary in their level of website usage and expertise. The site isdesigned for the novice user since every user's level of knowledge about siteaccess is difference.

• The user will be able to find center hours on the webpage.• The user will be able to find calendar information of center hours.• The user will be able to understand what services are available.• The user will know what the process is to access each service

available.

The user will be able to access internal/external links to other AlvernoCollege services.

""-- ....._----/

March 9th, 2013

AlvernoCOLLEGE

NAViGATIONAL STRUCTURE:

TACEV LENY ARDFOR CIT-270

March s", 2013

WEP <)TRUCTURE

Although hierarchical structure is the most common structure ofwebsites, we will use a web structure. The web structure will be mostsuitable for a website of this size. It will allow users to first access ahome page, but then allow them to go to any other page from thatlanding page. Each page will have a link for each of the other pages,allowing the user to navigate the website as needed.

Please see included structure map

OBJECTIVES

Tacey LenyardFor CIT-270

./ To incorporate links/logos throughout website. Each page on thestructure map incorporates both .

./ Incorporate tutor information on a page by itself and a link to it so thatthe user can easily find it. Located on the structure map as Tutor page .

./ Incorporate a basic schedule as well as a special schedule specific toeach class that has specific resource center hours. Located on thestructure map as Schedule information .

./ Incorporate a welcome page/landing page that greets students,previews the other pages that are available to them and introducesthem to instructional services, specifically the SRC.

./ To incorporate links to the other RC'sand library so the user will haveeasy access to those pages and schedules as needed.

'--••...._----/

Structure MapCalendars

./ Basic SRChours./ By class

./ links./ Logos

./ Other RCInformation

Forms and Tutoring./ Tutor info

./ Session form./ links

./ Instructions./ logos

Main Page(Home)./ Logos./ Greetings./ Instructions./ Links

'-•....•_----/

EBSITE DESIGN: STEP 2 ANALYSIS

C"Jl~.k~Q{lnfQrm~JiQ~.Welcome and greetings-This section will invite users to utilize the page and all of its functionality. It will give a preview ofthe information available on each page. It will contain tabs/links to each of the other pages orsections.

Basic schedule information-This section will have the regular center hours, and a disclaimer in regards to the special center hoursfor each of the upper level science classes. This may be in the form of a calendar or a table for eachday of the week.

Special schedule information-This section will have a detailed schedule for each class. This schedule may be in the form of acalendar or a table for each day of the week.

Tutor information-This section/page will have information on how to sign up for a tutor. It may possibly have tutorinformation and pictures????(Would like to discuss at my clients earliest convenience). Thissection/page will also have access to the session form. This session form will provide vital feedbackfor tutors and the resource center in general.

Logos-Logos will be established throughout the website. Logos that state Alvemo, will act as a link to theAlvemo.edu website. Logos that state instructional services will act as a link to the Alvemoinstructional services page.

Other resource center links-A link to the other resource centers will be integrated into the website (Math resource center,communication resource center. «nd science resource centers, as well as the library just in case theuser needs quick access to checking out a book for projects etc.

Step 3: Design of the SRC Website

"'--------_/

The look and feel of the SRC website will be an informational one whichwill allow the user to read the text on the website, view the photos and logos thatare on each of the pages as well as navigate successfully through the page.There will be a toolbar on the left side of the page that will allow the user to get toevery one of the other aqes from every page that he/she is on. Each page willhave a graphic at the top of the page to balance out all of the readableinformation that displays on the page. Embedded within the readable text will behyperlinks to other pages within the website as well as the Alverno.edu landingpage and links to the other resource centers at Alverno College. I will alsoimplement a link to the Alverno library as well.

The calendars will have a page of their own so that when viewing acalendar there is nothing to distract or disorient the user. The Alverno logos willact as the hyperlink to the Alverno.edu landing page. The toolbar on the left sideof the page will act as hyperlinks for the other pages on the website. Hyperlinksfor the other resource centers and the Alverno library will appear at the bottom ofeach page so that there is a consistency of placement as well as a smoothtransition.

Active white space will appear horizontally as well as vertically betweenthe logo and the graphics display. There will be horizontal active white spacebetween the graphics display and the readable text. There will be active whitespace between the toolbar on the left side vertically between the toolbar and thereadable text creating a box where the text is. There will also be horizontal activewhite space between the readable text and the hyperlinks for the other resourcecenters at the bottom of the page. This will close the text box at the bottom of thepage, separating the n.adable text from everything else on the page.

The graphics that I will use will be a combination of the graphics sent tome by Lisa Degen and the photos taken in the SRC by myself. The calendaralthough considered a graphic representation of data will not appear as a photo,it will appear as a text box with columns and rows distinguishing the dates andtimes each in its own box. There will be several calendars. One will be solely forstandard SRC hours, and then there will be a specialized calendar for theresource center hours specific to class.

I will incorporate the color schema of the school into the design as well sothat it creates a smooth transition from the SRC site to the Alverno.edu site.

Smooth Transitions

The smooth transitions will be created by utilizing unifying elements. Thetheme of this website will be informational and collegiate. I will create a theme assuch. The toolbar as well as the toolbar at the top of the page will be theburgundy/brown color as utilized by Alverno.edu. The font family will bearial/sans-serif on all pages to maintain consistency. The graphics will be thelogo of the SRC, Alverno College, and photos of SRC staff and location creatingthe theme and unifyinp the font, color and graphics of the site and adding to thevisual theme. Since the visual theme is collegiate, we will make sure that the

"--------_/

website is polished and balanced with text, graphics, hyperlinks and readabletext. Since this site will resemble the Alverno.edu site, there will be a smoothtransition from the college's website to the SRC.

Just to reiterate what was talked about in previous paragraphs, the activewhite space will be evident amongst the pages as well and act as a dividing linebetween readable text and graphics as well as toolbars. Hyperlinks will beconsistent in the sense of color and if graphic hyperlinks are used they will all bethe same picture. For example, if a back button is used and on the home page itis a burgundy back button, it will be the same through the site so that users canidentify this on every page preventing disorientation.

Grid structure will be used to organize the content of the website intocolumns and rows creating visual consistency. The same grid structure will beused for each page. The only page that will not utilize the same grid structure willbe the calendar page, but a grid structure will still be used to keep in line with thesmooth transitions throughout the website. The four-column grid structure will beused for most of the SRC websites pages, creating an F based viewing pattern.

Accessibility

The accessibility of the site will be in step with the W3C guidelines.

Perceivable Content: All graphics will have image tags to allow people who donot have access to graphics the capability to get a description of the graphics.

Operable Content: The functionality of the toolbar and back button as well ashyperlinks will be accessible by keyboard. Capability to "click" on a link will benecessary for this site.

Understandable Content: The website will operate in a predictable way in respectto the tool bar and hyperlinks. Since this is common amongst other websitepeople who can only view a portion of the page at a time such as people whoview the page from mobile devices, will still be able to successfully navigate thepage.

MOCK UPPlease see attachment

Step 4: Devel pment

Site Layout

Page 1:Title: (SRC)HomeFile Name: Home.html

"'--------_/

0\

\-1D --to o

~----------------------------"-----'5~Dcr ( Co tOY

to fll \ i o:«:

I~

h-Uc.-\1'D 6. I\J ·\\(.~S

II

I

1(\..ft,+'::>0 .-r

S'PU--1CL(; -z.e..C'\)0rVI c.eS

,~~-------------- --'-' ---- -------.

/>-F00YIS ~

I ~_Tuton'fl~_

1 ~i~Qr~L,

I!

II

I _.aiM•...

I\ jZ.CII AlVeYYlOI \\ a y

~~~ a ~~fsQy

~(\(oO-bo0 t-1\;1Dft \D-~

se..rU\'c"D

----~i(\\< (0 ~ SC.S~fOi fOr1

t_.---' ,~- --

t.(\i\ to uY\ lnVJ 1\'\\0o~v ~() D1I\

lLL D~(( Ot'h£rgc.. ~C~--- . I-- ---.-...--~------

!,IJ

l_~ --__.--_r__----'---*--'--'~------~

Description: This page will be the SRC landing page and will contain graphicsand text as well as hyperlinks to the other pages of the website. It will also havestandard schedule information for the SRC. The Alverno logo will be used as wellfilvemD at the SRC

COLLEGE

IA[L'WI~

~

(N](0)

Instructional ServicesPage 2:Title: (SRC)CalendarsFile Name: Calendars.htmlDescription: This page will have 2 calendars on it. One will be standard SRChours and the other will be a calendar by class. It will also contain information inregards to the other resource centers and their center hours. The alverno logoand the instructional services photo will appear on this page as well however itwill not contain any other graphics since the content will be dense.

Page 3:Title: (SRC)Forms and Tutorial InformationFile Name: Formsandtutors.htmlDescription: This page will contain the session form as sent to me by LisaDegen. It will also contain information in regards to what tutoring services areavailable and photos of the tutors that work in the SRC.

Revised Structure Map

"-------_/

Minimizing User Disorientation

User disorientation will be slim. The users that will utilize this site will mostlyhave accessed the Alverno.edu site so they will have some experience with using thetoolbar as well as being able to click on the graphics as they will be hyperlinks. As statedpreviously it will be understandable content and balanced with graphics, text andhyperlinks which will create a unified visual theme.

WEBSITE DESIGN: STEP 5 IMPLEMENTATION

The grid structure that is being implemented on the SRC website is a three rowand three column grid structure. Verification of this grid structure is apparent on thelayout.html page submitted. The mock up had 4 columns and 5 rows, but that waschanged to a 3 row and 3 column grid structure. This change was made because theadditional rows and columns were not needed to separate any additional information.

The digital image that I decided to upload and utilize on the layout page, and willbe using for the SRC website will be a photo of the students in the SRC tutoring eachother. Other images may be included if necessary space is available. The feedback I havereceived from my client, Lisa Degen is, "Good use of tables! Be sure that when you addstyles to your web pages, you add them to your style sheet rather than the web page itself.Great work so far!"

I incorporated this feedback into the implementation and made sure that each ofthe styles were added to the style sheet rather than the individual page. Each of the pageswill have a different focal graphic to assist in smooth transitions so that each page willappear different, but the navigation bar will stay the same.

"'--------_/

WEBSITE DESIGN: STEP 6I put all 3 pages on the ftp server and tested them to make sure that all of

the links worked. I also made sure that the external links were done as well. Iwas unable to get the final feedback from Lisa Degen, but will definitelyincorporate it as soon as I receive it. The objectives, as stated in previous stepsremain the same:

• To incorporate links/logos throughout website. Each page on the structure mapincorporates both.

• Incorporate tutor information on a page by itself and a link to it so that the usercan easily find it. Located on the structure map as Tutor page.

• Incorporate a basic schedule as well as a special schedule specific to each classthat has specific resource center hours. Located on the structure map asSchedule information.

• Incorporate a welcome page/landing page that greets students, previews theother pages that are available to them and introduces them to instructionalservices, specifically the SRC.

• To incorporate links to the other RC's and library so the user will have easyaccess to those pages and schedules as needed.

If I had more time I would have used more images. I would haveconnected the form to a formal email address, so that the "administrator"received the messages with the form information on them. I would havealso tried to create more uniformity by creating the background inPhotoshop and then slicing the image and creating the buttons throughthe slice instead of creating each button one by one. I would also try to getthe spaces from in between the buttons in the navigation bar.

FINAL FEEDBACK FROM YOUR CLIENT:

1. Overall design (how it looks)

Simple layout making it easy to navigate. Useful links in the left-hand columnand bottom of the pages. I like that the Alverno logo links to the Alverno website. Good use of screen space, balancing graphics and text.

2. Use of graphics (well placed, clear, informative)

Graphics support the focus of the web site. I love the graphic on the homepage. It's very striking. Additionally, the images used throughout the site tie wellto the work of the Resource Center. Great visual presentation!

3. Accuracy of information

"--------_/

Accurate. No changes.

4. Accuracy of links

Accurate. No changes. I like that you linked to the Math & CommunicationResource Centers, too. It creates unity between the three resources.

GENERAL COMMENTS:

Note that the title of all pages on your site are the same - "Science ResourceCenter - Home Page." I love that you took the time to insert an online sessionform.Looks great!!

'--------_/

Tacey LenyardFor err 270

9040F N. ss" St. Milwaukee, WI 53224 I Phone: 414.639.4627lenyartc@alverno.edu I www.affordableg33k.com

'-------_/