March
s". 2013
Tacey Lenyard For CIT-270
WEBSITE DESIGN: STEP
1
DEFINING THE WEBSITE
The science resource center is a website that provides information about the Alverno College science resource center including but not limited to center hours and services offered. It also provides internal and external links to Alverno College students in regards to other resource centers and those resource center hours as well.
Audience: The audience of the science resource center are Alverno College students who will vary in their level of website usage and expertise. The site is designed for the novice user since every user's level of knowledge about site access 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 College services.
""--
_----/
.....
links to other Alverno
th
March 9
Alverno
,
2013
TACEV LENY ARD FOR CIT-270
COLLEGE
NAViGATIONAL STRUCTURE:
March
s", 2013
WEP <)TRUCTURE Although hierarchical structure is the most common structure of websites, we will use a web structure. The web structure will be most suitable for a website of this size. It will allow users to first access a home page, but then allow them to go to any other page from that landing 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 Lenyard For CIT-270
./
To incorporate links/logos throughout website. Each page on the structure map incorporates both . Incorporate tutor information on a page by itself and a link to it so that the user can easily find it. Located on the structure map as Tutor page . Incorporate a basic schedule as well as a special schedule specific to each class that has specific resource center hours. Located on the structure map as Schedule information . Incorporate a welcome page/landing page that greets students, previews the other pages that are available to them and introduces them to instructional services, specifically the SRC. To incorporate links to the other RC'sand library so the user will have easy access to those pages and schedules as needed.
'-- _----/ â&#x20AC;˘â&#x20AC;˘....
Structure Map ./
Calendars Basic SRC hours ./ By class
./
links
./ ./
Logos Other RC
Information
Main Page(Home) ./ Logos ./
Greetings
./ ./
Instructions Links
Forms and Tutoring ./ Tutor info ./
Session form
./ ./
links
Instructions ./ logos
'- _----/ â&#x20AC;˘....â&#x20AC;˘
EBSITE DESIGN: STEP
2 ANALYSIS
C"Jl~.k~Q{lnfQrm~JiQ~. Welcome and greetingsThis section will invite users to utilize the page and all of its functionality. It will give a preview of the information available on each page. It will contain tabs/links to each of the other pages or sections. Basic schedule informationThis section will have the regular center hours, and a disclaimer in regards to the special center hours for each of the upper level science classes. This may be in the form of a calendar or a table for each day of the week. Special schedule informationThis section will have a detailed schedule for each class. This schedule may be in the form of a calendar or a table for each day of the week. Tutor informationThis section/page will have information on how to sign up for a tutor. It may possibly have tutor information and pictures????(Would like to discuss at my clients earliest convenience). This section/page will also have access to the session form. This session form will provide vital feedback for tutors and the resource center in general. LogosLogos will be established throughout the website. Logos that state Alvemo, will act as a link to the Alvemo.edu website. Logos that state instructional services will act as a link to the Alvemo instructional services page. Other resource center linksA 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 the user 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 which will allow the user to read the text on the website, view the photos and logos that are 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 to every one of the other aqes from every page that he/she is on. Each page will have a graphic at the top of the page to balance out all of the readable information that displays on the page. Embedded within the readable text will be hyperlinks to other pages within the website as well as the Alverno.edu landing page and links to the other resource centers at Alverno College. I will also implement a link to the Alverno library as well. The calendars will have a page of their own so that when viewing a calendar there is nothing to distract or disorient the user. The Alverno logos will act as the hyperlink to the Alverno.edu landing page. The toolbar on the left side of the page will act as hyperlinks for the other pages on the website. Hyperlinks for the other resource centers and the Alverno library will appear at the bottom of each page so that there is a consistency of placement as well as a smooth transition. Active white space will appear horizontally as well as vertically between the logo and the graphics display. There will be horizontal active white space between the graphics display and the readable text. There will be active white space between the toolbar on the left side vertically between the toolbar and the readable text creating a box where the text is. There will also be horizontal active white space between the readable text and the hyperlinks for the other resource centers at the bottom of the page. This will close the text box at the bottom of the page, 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 to me by Lisa Degen and the photos taken in the SRC by myself. The calendar although 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 and times each in its own box. There will be several calendars. One will be solely for standard SRC hours, and then there will be a specialized calendar for the resource center hours specific to class. I will incorporate the color schema of the school into the design as well so that 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. The theme of this website will be informational and collegiate. I will create a theme as such. The toolbar as well as the toolbar at the top of the page will be the burgundy/brown color as utilized by Alverno.edu. The font family will be arial/sans-serif on all pages to maintain consistency. The graphics will be the logo of the SRC, Alverno College, and photos of SRC staff and location creating the theme and unifyinp the font, color and graphics of the site and adding to the visual theme. Since the visual theme is collegiate, we will make sure that the
"--------_/
website is polished and balanced with text, graphics, hyperlinks and readable text. Since this site will resemble the Alverno.edu site, there will be a smooth transition from the college's website to the SRC. Just to reiterate what was talked about in previous paragraphs, the active white space will be evident amongst the pages as well and act as a dividing line between readable text and graphics as well as toolbars. Hyperlinks will be consistent in the sense of color and if graphic hyperlinks are used they will all be the same picture. For example, if a back button is used and on the home page it is a burgundy back button, it will be the same through the site so that users can identify this on every page preventing disorientation. Grid structure will be used to organize the content of the website into columns and rows creating visual consistency. The same grid structure will be used for each page. The only page that will not utilize the same grid structure will be the calendar page, but a grid structure will still be used to keep in line with the smooth transitions throughout the website. The four-column grid structure will be used 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 do not 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 as hyperlinks will be accessible by keyboard. Capability to "click" on a link will be necessary for this site. Understandable Content: The website will operate in a predictable way in respect to the tool bar and hyperlinks. Since this is common amongst other website people who can only view a portion of the page at a time such as people who view the page from mobile devices, will still be able to successfully navigate the page. MOCK UP Please see attachment
Step 4: Devel pment Site Layout Page 1: Title: (SRC)Home File Name: Home.html
"'--------_/
0\
\-1D
--to
o
~----------------------------"----'5~Dcr ( Co
to
tOY
fll \ i
o:芦:
I~
1(\..ft, +'::>0 S'PU--1CL(;
)0rVI
I
I
I
h-Uc.-\1'D \J 路\\(.~S
6.
I
.-r -z.e..C'\
c.eS
,~~-------------- --'-' ---- -------.
~~~
a
~~f /
sQy
>-
F00YIS ~
I ~_Tuton'fl~_ 1
~(\(o O-bo0 t-
~i~Qr
,
~L
I
1\; 1Dft \ D-~
!
se..rU\'c"D
I
I
_. aiM •...
I
I
\
(0
-~i(\\<
jZ.C
I
--~ SC.S~fOi
t
I
fOr1 _.---'
AlVeYYlO
I
\\
ay
t.(\i\
to
uY\
o~v
---
lnVJ
1\'\\0
~()
D1I\
D~((
lLL
gc.. .
,~-
--
--
Ot'h£r
~C~ ---.-...--~------
I
!,
I J
l_~
--__.--_r__----'---*--'--'~------~
Description: This page will be the SRC landing page and will contain graphics and text as well as hyperlinks to the other pages of the website. It will also have standard schedule information for the SRC. The Alverno logo will be used as well
filvemD
at the SRC
COLLEGE
IA [L
'WI ~ ~
(N] (0)
Instructional Services Page 2: Title: (SRC)Calendars File Name: Calendars.html Description: This page will have 2 calendars on it. One will be standard SRC hours and the other will be a calendar by class. It will also contain information in regards to the other resource centers and their center hours. The alverno logo and the instructional services photo will appear on this page as well however it will not contain any other graphics since the content will be dense.
Page 3: Title: (SRC)Forms and Tutorial Information File Name: Formsandtutors.html Description: This page will contain the session form as sent to me by Lisa Degen. It will also contain information in regards to what tutoring services are available 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 mostly have accessed the Alverno.edu site so they will have some experience with using the toolbar as well as being able to click on the graphics as they will be hyperlinks. As stated previously it will be understandable content and balanced with graphics, text and hyperlinks 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 row and three column grid structure. Verification of this grid structure is apparent on the layout.html page submitted. The mock up had 4 columns and 5 rows, but that was changed to a 3 row and 3 column grid structure. This change was made because the additional 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 will be using for the SRC website will be a photo of the students in the SRC tutoring each other. Other images may be included if necessary space is available. The feedback I have received from my client, Lisa Degen is, "Good use of tables! Be sure that when you add styles 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 of the styles were added to the style sheet rather than the individual page. Each of the pages will have a different focal graphic to assist in smooth transitions so that each page will appear different, but the navigation bar will stay the same.
"'--------_/
WEBSITE DESIGN: STEP
6
I 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. I was unable to get the final feedback from Lisa Degen, but will definitely incorporate it as soon as I receive it. The objectives, as stated in previous steps remain the same: •
To incorporate links/logos throughout website. Each page on the structure map incorporates both.
•
Incorporate tutor information on a page by itself and a link to it so that the user can easily find it. Located on the structure map as Tutor page.
•
Incorporate a basic schedule as well as a special schedule specific to each class that has specific resource center hours. Located on the structure map as Schedule information.
•
Incorporate a welcome page/landing page that greets students, previews the other pages that are available to them and introduces them to instructional services, specifically the SRC.
•
To incorporate links to the other RC's and library so the user will have easy access to those pages and schedules as needed.
If I had more time I would have used more images. I would have connected the form to a formal email address, so that the "administrator" received the messages with the form information on them. I would have also tried to create more uniformity by creating the background in Photoshop and then slicing the image and creating the buttons through the slice instead of creating each button one by one. I would also try to get the 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 column and bottom of the pages. I like that the Alverno logo links to the Alverno web site. 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 home page. It's very striking. Additionally, the images used throughout the site tie well to 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 & Communication Resource 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 Resource Center - Home Page." I love that you took the time to insert an online session form. Looks great!!
'--------_/
Tacey Lenyard For
9040F N.
ss" St.
err
270
Milwaukee, WI 53224
lenyartc@alverno.edu
I
I
Phone: 414.639.4627
www.affordableg33k.com
'-------_/