Website name: SEO China
Client Name: SEO China
Contact person: Xue Guan, managing director for SEO China
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.
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.
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.
The specific styling for the website that will apply to all pages can be found below:
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.
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.
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.
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.”
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.
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.
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.
We will be following the following schedule to create and store our website
We will put all of our files in a folder called “seo” during the coding phase.
List of Files and Folders
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 |