Jianing Xiong & Xiaorong Liu
CS110 Final Project P2 Design Guidelines
03/18/2016

P2 Design Guidelines

Administrative Details

Website name: SEO China
Client Name: SEO China
Contact person: Xue Guan, managing director for SEO China

Purpose, Goals and Audience

The purpose of the website is to enhance the presence of SEO China and therefore encourage young Chinese students to participate in this program. Our goal is to display clear introduction to SEO China and it programs, allow all students to submit their applications online and provide information about donation and contact for anyone interested. The website’s main audience will be young Chinese students who are looking for internship opportunities in finance in China and would be interested in applying for this program. In the meantime, this website also serves alumnae, enterprises or charity organizations who would like to get explicit information about donation or ways to get involved.

Navigation Structure

The navigation structure of SEO China’s website can be expressed as clique, as shown in figure 1. Every page in this website is connected with every other page.

The reasons for choosing clique are efficiency in directing to other pages and the fact that our website is not too large. To get around in this website as quickly as possibly, we do not use a special navigation page, but instead there are links to other pages on every page. Furthermore, SEO China website is not too large, so the clique structure won’t be too complicated in this case. "About us" page has two sections: our story and our people. In addition to the navigation bar on the top, this page has a menu bar on its left, that allows users to easily access and direct to the corresponding information that they want to see. Moreover,Users can always return back to the home page by clicking on the Logo on the upper right side of the page. In this way, they can easily switch to different pages in the website.

Navigation structure
Figure1: Navigation structure of the website

Page Layout and Appearance

Considering the universal design of the web page, one principle to keep in mind according to our client is professionalism. Since the main audience of this website is young Chinese student who might be new to SEO China and is looking for internships in finance, the design of SEO China website will play an important role in forming the visitor’s impression of this organization. Therefore, the universal design should be simple and clean. The use of color or images should emphasize the important information on the page, instead of distracting the viewer’s attention. For example, we chose white as the background color in the whole website.

Secondly, to make this website easier to understand for new visitors, our client expressed the preference to display information by scrolling down on one single page, instead of directing to subpages. Therefore, we only keep two sections, called “Our Story” and “Our People” under the “About Us” page, as the information of team members may be longer than expected, and such division of two sections under “About Us” is not confusing. The navigation bar on top of the page should cover the full range of topics to facilitates audience to be redirected in this website. The navigation bar includes homepage icon, “About Us”, “Program”, “Application”, and Donate. A drop-down menu is needed here to link “Program”, “Application”, and “Donate” page to two sections “Our Story” and “Our People” page under “About Us”. Navigation bar will also appear in the bottom of the page, except for the homepage icon.

Finally, our client requested that we design and include a new SEO China logo, which we have included in the page. Users can always return back to the home page by clicking on the Logo on the upper right side of the page.

Generic feature
Figure2: Mockup for generic features

The specific styling for the website that will apply to all pages can be found below:

Content

a. Home Page- homepage.html
The homepage will be the first page to appear when users visit the website. The homepage is not content-heavy but rather present the core values and function of our website. Its goal is to give a brief introduction of SEO China and deliver a graphical message to the audiences consistent with our design style.

More specifically, the home page first shows a one sentence introduction of SEO China on a compelling background image. And it prompts the user to the application page with a clickable button. In the second half of the homepage, we highlight a section stating the mission of Seo-China in a short paragraph. In order to emphasize the mission, we used a dark green based color scheme to make it graphically distinguishable. By keeping the text to a minimum, we will be able to prompt users to either the top or the bottom navigation bar. The navigation bar will later direct users to other pages.


hompage
Figure3: Mockup for homepage.html

b. About - about_our_story.html
The “About” Page will include two sections, introducing the history as well as function of SEO China, and members of the team. Through the use of javascript, users can get a drop down menu from the top navigation bar. This page will focus on a the history and function of SEO China.

The page will help achieve the goals of informing and intriguing users about this organization and services it provide. Similar to homepage, the about page will keep universal design for the top nav bar. To create a positive and professional impression, the page design will emphasize a clean and simple layout. The page will include a photo of the founder, and text descriptions of the history of SEO China.

Other than a side menu on the left side of the page, the image of the founder will be floated to the left, and the text will wrap around the image. The size of the image could be adjusted according to the final version of the founder’s photo that we should receive soon from our client. We will make sure the image size is smaller than 100KB to prevent a slow-loading web page.


about_story
Figure4: Mockup for about_story.html
about_dropdownmenu
Figure5: Mockup for drop-down menu

c. About - about_our_people.html
This page will focus on members of the team. Identical to previous page, this page has the same design for nav bar, and we'll make sure the layout is simple, with a solid white background, which prevents unnecessary and distractive colors.

The page will help achieve the goals of informing the users about the structure of this team. The page contains profile photo, name and title of each member, and people are grouped according to their positions in the organization.

Each image will have a height and width of 100px, subject to changes, according to final versions of profile photos we get. We will again make sure the image size is smaller than 100KB to prevent a slow-loading web page.

By implementing a javascript powered function, the user can click on each of the image in the web page and a pop-up window will be shown with the resized photo and descriptions on the bottom.In this way, the position and image of the member will be emphasized.


about_people
Figure6: Mockup for about_story.html
large photo js
Figure7: Mockup for imageSize Javasript function

c. Program Page-program.html
The program page will give a general view of the program and demonstrate some different components of this program.

The goal of this page is to intrigue Chinese students to participate in the program by informing them what SEO China’s program is in a clear and professional way. The page should contain a general introduction to current internship programs, schedules, application deadlines, and easy-to-see gateways to the application page on the top and bottom of the page.

On top of the page is the navigation bar identical to that of all other pages. Then some images about logistics of the program follows. Then scroll down. There will be four components of the program, organized in a two-column layout. The left column is the name of the component, including “Internship Placement, Training Program, Career Talks, and Community Projects.”


program
Figure8: Mockup for program.html

c. Application Page-application.html
The page will achieve the goals of providing general information about application, and a gateway to another application site. After further communications with our client and project advisor, the complicated application page that involves log-in and data storage will be designed by someone else. Our website needs to provide preparatory information of application process and a link to the formal application site.

On top of the page is the universal navigation bar, followed by “What To Know Before Applying” part. This part is most important in providing general information about application eligibility, deadlines and gateway to the formal application site, so it will be highlighted with a background image hat is related to student or application. The final decision of which image to use for this background will require further negotiation with our client. The “What To Know Before Applying” part has xxx width, with two column layout. The information about eligibility and preparation of application is presented on the left, and information about deadlines and a gateway to the formal application page designed by others will be on the right. Following that, there is information about “Summer Career Program” and “Tips for Application Process”. The Summer Career Program has two columns. With an image that says “Summer Application Process Timeline” floating left, the table about timeline is listed on the right. At the bottom of the page, we will use a slideshow to present different profile photos floating on the left of past program participants and their comments on the right. This function will be implemented using javascript.


application
Figure9: Mockup for application.html

c. Donation Page-donation.html
The donation page serves as an informational page and a portal for users who want to donate to SEO-China. This page consists of three parts.

The first part is the main body of this page containing a title and a short paragraph stating our resolutions, followed by an image section showing photos of the team members, past events, group activities, and etc. of SEO China. In the image section, we’ll implement a javascript function that randomly select images from a photo library that will be displayed.

The second part located on the bottom left gives users information about various payment method choices and details. A clickable “donate” button will redirect users to a formal payment page implemented by others.

The third part located on the bottom right is a short video of SEO-China members containing what they want to say to all the users. The video will be powered by a hyperlink to a video sharing website.


donate page
Figure9: Mockup for donation.html

Minimum Requirement

Shirley Xiong will be in charge of implementing:

1. Random Image. A Javascript function that will dynamically display pictures in a random fashion. This function will be used on “donation.html” page. Since we have many beautiful and decorative pictures on our sites about SEO China that we want to show to increase the visitor’s curiosity and interests in SEO China, but it is hard to choose the best one among all, and we don’t want to always show the same picture. So we will have the page show a random picture, so the site isn’t always the same.

4. Changing Image Size. A Javascript function that allows a pop-up window to display images in a larger size when clicked on. We have many images in the “about_our_people.html” page. We limit the image size to decrease loading time and to allow all thumbnails to be viewed at once. Yet, the image quality is sacrificed. In order to see larger picture and emphasize each member in SEO-China, we plan to use Javascript function to enlarge images when clicked on.

Sharon Liu will be in charge of implementing:

1. Roll-over Menu. A Javascript function for a roll over menu that will be provided on each page to allow easy access to every other page in the website. Since we do not want every link to appear constantly on the page, for example “Our People” and “Our Story” sections of the about page are hidden, the links of similar topics will appear under one heading when the user hovers over. For example, the user can hover upon the “About” tab and the menu will roll down displaying “Our Story” and “Our People”, linking to about_our_story.html and about_our_people.html

2. SlideShow. A Javascript function for an arrangement to have all images and comments of past interns shown, one at a time. Since there are a lot of cool intern experiences to show on the application page, the fixed images limit the quantity of intern images and comments that visitors can see. With a slideshow, the user can click to advance the slides. For example, each slide has a profile photo of the intern and a sentence from him or her, by clicking the visitor can see another group of profile photo and s entence.

Plan

We will be following the following schedule to create and store our website

Organizational Scheme

We will put all of our files in a folder called “seo” during the coding phase.

List of Files and Folders

Work Division and Deadlines

Filename Description In charge Deadline
homepage.html The homepage Shirley Apr.9 2016
about_our_story.html Brief introduction of SEO China and its history Sharon Apr.10 2016
about_our_people.html Information about the team member of SEO China Sharon Apr.10 2016
program.html General view of programs of SEO China Shirley Apr.11 2016
application.html Information about application process and a gateway to application page Sharon Apr.11 2016
donation.html Information about donation Shirley Apr.11 2016
menu.part Shirley Apr.16 2016
rollOverMenu.js A Javascript for a roll over menu when hovered upon Sharon Apr.16 2016
randomImages.js A Javascript to randomly display images of donation page Shirley Apr.16 2016
slideShow.js a Javascript to allow users to slide for the information past intern pictures and experience Sharon Apr.27 2016
imageSize.js A JavaScript to add an interactive size attribute Shirley Apr.27 2016
styling.css Checking CSS file that contains all styling for the website Shirley and Sharon Apr.27 2016
Final Controls Double checking each file for errors, checking the javascript and css Shirley and Sharon Apr.27 2016