P2 Design Guidelines

1. Document Details

P2 Project Requirements

Megumi Takada and Meltem Ozcan

CS 110-01 April 4, 2014

2. Administrative Details

Client Name: Nan Nan, artist and founder of art school “Atutu”

Website Name: Nan Nan Art Studio

Contact person: Jennifer Henbest

3. Purpose, goals and audience

The website’s purpose is to spread global awareness of Nan Nan’s life and artwork and to inspire people from abroad to help her. Thus, our goal is to inform and intrigue users about Nan Nan and the wonderful work that she does, as well as to provide users with volunteer and donation opportunities. The website’s main audience will be those who are interested in Nan Nan’s life and artwork, such as people who would be interested in looking through Nan Nan’s gallery for inspiration and pleasure, art teachers and students who would like to learn about a foreign artist and Myanmar art, as well as potential donors and volunteers who would like to get explicit information about the ways in which they could help.

4. Navigation Structure

The navigation structure of Nan Nan's website can be described as clique, and it is shown in Figure 1. From the homepage, it is possible to access all of the pages included in the website, and vice versa, it is possible to access the homepage from every page through the use of a roll-over menu. Though not visible until hovered upon, the links for each web page are included within every page.

Our reason for choosing a clique structure is to give the user as much freedom within the website as possible and to make him/her aware of the general structure and content of the website without displaying it all. For example, a user on the artwork_paintings.html page can easily access sub-pages within other categories such as the atutu_volunteerAndDonate.html page by accessing the simple roll-over menu. Without immediate access to pages within each section such as "Atutu Art School," the user may never notice that "Children's Artwork" or "Donate and Volunteer" exist.


5. Page Layout and Appearance

In coming up with the universal design, we especially focused on the goal to intrigue users about Nan Nan and her work; considering that many new users will not know Nan Nan, the universal design will be important in developing their first impressions of the website and Nan Nan herself. We have therefore focused on making the universal design simple and clean, with a focus on the navigation bar which will have informative tabs which are succinct and easy-to-read. The navigation bar provides tabs covering the full range of topics and therefore instantly fulfil the needs of the target audience who will be interested in Nan Nan’s life and artwork; the “Artwork” tab will be especially useful for those interested in looking through Nan Nan’s gallery, the “Inspirations” tab for art teachers and students, and the “Atutu Art School” and “Contact/Support Us” tab for potential donors and volunteers. Finally, Nan Nan requested that we create a simple, clean look, possibly white with a texture. She also requested that we include the Atutu Art School logo, which we have included on the upper left hand corner; we believe that this universal design will fulfil her requests.

generic image
Figure 2: Mockup for Generic Features

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

6. Content

There will be nine separate pages as follows:

  1. Homepage-homepage.html

    The homepage will be the first page that will appear when users visit the website. Although the homepage will not include any content, a larger image will appear and give users a preview of the content of Nan Nan’s website.

    The homepage will fulfil the goal of intriguing users about Nan Nan. Consistent with the universal designs of this website, we will therefore create a homepage that is simple and will encourage users to further explore the website. Because too much text will overwhelm the audience, we decided to include just one large image that we hope will grab the user’s attention. By keeping the text to a minimum, we will also be able to prompt users to the navigation bar.

    Through the use of Javascript, images will be randomly presented on the homepage. Each image will have a height of 400px and will be centered in the body.

    mockup for homepage
    Figure 3: Mockup for homepage.html
  2. About-about.html

    The “About” page will provide a brief biography about Nan Nan and the work that she does.

    This page will help us achieve the goal of informing users about Nan Nan’s life. Similar to the homepage and universal design, the “About” page will provide art teachers, students, and potential donors and volunteers with one of their first impressions of Nan Nan. Thus, we will continue to emphasize simplicity through a clean layout that will include one portrait of Nan Nan in the upper right-hand corner.

    The image of Nan Nan will be floated to the right, and text will wrap around the image. The image will be 250px by 250px with rounded borders. We will make sure to reduce the image size to less than 100kB to prevent a slow-loading web page.

    mockup for about
    Figure 4: Mockup for about.html
  3. Inspirations-inspirations.html

    The “Inspirations” web page will include information about Nan Nan’s work and how this has been influenced by Myanmar’s art and culture.

    This page will fulfil the goal of further informing users about Nan Nan’s artwork as well as Myanmar’s contemporary art forms and culture in general. It will serve the needs of those such as students who will further their understanding about a foreign artist and Myanmar’s unique art form. We will fulfil this goal by making the web page especially informative and educational, through the use of pictures showing the location of Myanmar and unique materials used in Myanmar art.

    Images with a height and width of 200px will be floated to the right or the left throughout the page.

    mockup for inspirations.html
    Figure 5: Mockup for inspirations.html
  4. Artwork "Paintings"-artwork_paintings.html

    This section will be one of two pages showing Nan Nan’s artwork, and will include about thirty pictures of her artwork. This page will specifically focus on her paintings.

    This page will fulfil the goal of informing and intriguing users about Nan Nan’s artwork. In order to allow users to fully appreciate each piece of art, we will make the layout one that is simple, with a solid white background which will prevent unnecessary colors from detracting from the power of her artwork. In order to help users focus on each artwork, the shadow color will get darker when users hover over the image, providing even more emphasis on what the user is viewing.

    Each image will have a height and width of 150px. In order to ensure that the pages load quickly, we will make sure to make each image size smaller than 100kB. Each black-bordered box will have a height and width of 200px with 50px margins and paddings. The shadows will be gray but will turn to black when hovered. When the image is clicked, the image will be enlarged 250%. The new black-bordered box will have a height of 350px and width of 450px. The white color of the background images will also be turned into a black color with 50% transparency.

    mockup for artwork_paintings.html 1
    Figure 6a: Mockup for artwork_paintings.html
    mockup for artwork_paintings.html 2
    Figure 6b: Mockup for artwork_paintings.html
  5. Artwork "Design"-artwork_design.html

    This section is identical to the previous page, with the exception that it will focus on pictures of Nan Nan’s designs instead of her paintings. The goals and mockups are identical as well, with the exception of the heading which will be changed to “Design.”

  6. Atutu Art School "About"-atutu_aboutTheSchool.html

    This page will be one of three pages under the “Atutu Art School” section. It will be called “About” and include information about the school philosophy, motto and class offerings.

    This page will fulfil the goal of informing and intriguing users about Nan Nan’s life dedicated to art and education. In order to provide both an informative, yet intriguing web page, we will balance out the content with some images that will be visually-compelling. For example, along with the content, we will also include images of the school, the logo of the school, and a picture of the course offerings.

    Two images with a 200px width and a 150px length will appear at the top of the page, alongside the logo of Atutu Art School with a 150px width and a 100 px length. The images will be centered on one line. The class offerings will be included in a chart, with width and length of 600 px.

    mockup for atutu_aboutTheSchool.html
    Figure 7: Mockup for atutu_aboutTheSchool.html
  7. Atutu Art School "Children's Artwork"-atutu_childrenArtwork.html

    This page will be the second page under the “Atutu Art School” section. It will be called “Children’s Artwork” and include a gallery of children’s artwork and pictures of them doing art at Atutu Art School.

    This page will fulfil the goal of informing and intriguing users about Nan Nan’s life dedicated to the art school. Similar to the artwork pages showing Nan Nan’s paintings and designs, we will fulfil this goal by displaying the children’s artwork using a very simple, yet dynamic layout as shown in the mockup. By keeping the layout simple, we hope that each of the art pieces will stand out and allow users to reflect not only on the wonderful work that the children are doing, but also on Nan Nan’s strong dedication in running her art school.

    This section will have the same design format as the two pages in the artwork section, with the exception of the header which will be changed to “Children’s Artwork.”

    mockup for atutu_childrenArtwork.html
    Figure 8: Mockup for atutu_childrenArtwork.html
  8. Atutu Art School "Donate and Volunteer"-atutu_volunteerAndDonate.html

    The last page part of the “Atutu Art School” pages will be called “Donate and Volunteer.” “Donate and Volunteer” will include a donation wish list and volunteer application form.

    This page will fulfil the goal of providing users with practical volunteer and donation information. In order to encourage users to help out, we plan to make this web page concise and coherent. We will provide a volunteer form right on this page, which users will instantly be able to fill out to show their interest in volunteering. The web page will also request donation items in the form of a list, which will be more visually appealing than a long paragraph.

    This page will have two columns, each with width of 400px. One will include a unlisted list of donation request materials. Each column will have a solid orange border, with margin of 50px and padding of 100px.

    mockup for atutu_volunteerAndDonate.html
    Figure 9: Mockup for atutu_donateAndVolunteer.html
  9. Support/Contact Us-supportAndContactUs.html

    This page will include contact information (email, address, phone number), a map, and a link that will direct users back to the “Donate and Volunteer” page in “Atutu Art School.”

    This page will help us fulfil the goal of providing users with the opportunity to take action and stay connected. In order to make sure that users have an easy time finding information, we will keep this document simple. No content will be in the form of long paragraphs, and all images will be practically meaningful. For example, we will include both a map and a picture of Nan Nan’s Art Studio, which will be helpful for those who plan to go visit her. Finally, we have chosen to include a link to the “Donate and Volunteer” page, because we suspect that users trying to find such information may come to this web page. In order to make sure that users do not overlook such information, we believe that giving them the direct link will allow them to more easily navigate the website.

    This page will have an image with width of 200px and length of 175px floated to the right. There will also be a large Google map included, with width of 700px. The link will turn orange when hovered.

    mockup for supportAndContactUs.html
    Figure 10: Mockup for supportAndContactUs.html

7. Minimum Requirements

We plan to fulfil the minimum requirements of Javascript applications in this way:

Meltem Ozcan will be in charge of implementing:

  1. A Javascript function that will dynamically display artwork in a random fashion in a slideshow. Since Nan Nan's website is very visual, we would like it to be as interactive and appealing as possible. The random image display through Javascript will increase user's curiosity and interesty by portraying a variety of different aspects of Nan Nan's artwork, Atutu Art School, and the children.
  2. A Javascript function that allows a pop-up window to display a larger version of the thumbnail picture when clicked on. We will have many pictures of paintings and the school, so in order to decrease loading time and not confuse the user, we will use 150px x 150px thumbnails, which the users will be able to click on to enlarge. The resulting larger picture will be 350px x 450px. We plan to make it similar to Facebook's function for pictures and the blurred gray background.

Megumi Takada will be in charge of implementing:

  1. 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. We do not want every link to appear constantly on the page, hence links of similar topics will appear under one heading that will hint the user to hover over. For example, the user can hover upon the "Atutu Art School" tab and the menu will roll down displaying atutu_aboutTheSchool.html, atutu_ChildrenArtwork.html and atutu_volunteerAndDonate.html.
  2. A Javascript that uses loops for arrays to display prices and artwork respectively. Nan Nan will be selling her artwork to potential customers using the web page, so it is important for her to have easy control over the price lists and art piece names and other relevant information such as dimensions and material in one place.

As one of the pages include volunteer information, we hope to add a fifth Javascript to display a volunteer form to acquire all the necessary information for Nan Nan easily and efficiently.

8. Plan

We will be following the following organizational scheme to create and store our files and the work division table to keep track on who creates what and when.

Organizational Scheme

All of the following files will be gathered inside a folder nannan which will be created in the coding phase of the project.

List of Files and Folders

Work Division and Deadlines

Filename Description In charge Deadline
homepage.html The homepage Megumi 04.11.2014
about.html Brief biography about Nan Nan and the work that she does Meltem 04.11.2014
inspirations.html Information on Myanmar’s art and culture Megumi 04.11.2014
artwork_paintings.html Nan Nan's paintings Meltem 04.11.2014
artwork_design.html Nan Nan's design and crafts Meltem 04.14.2014
atutu_childrenArtwork.html Information on the children and display of their artwork Megumi 04.14.2014
atutu_aboutTheSchool.html Information on the school and classes Meltem 04.14.2014
atutu_volunteerAndDonate.html Volunteer and donation information Megumi 04.14.2014
supportAndContactUs.html Information on contacting and supporting Nan Nan and Atutu Meltem 04.14.2014
headerLogo.png Logo for the header: children's drawing edited on Photoshop Megumi 04.15.2014
menu.part Meltem 04.16.2014
randomImages.js A Javascript to randomly display images of artwork and the school Meltem 04.18.2014
artWorkPrices.js A Javascript using loops and arrays to correlate Nan Nan's artwork with the respective prices Megumi 04.20.2014
rollOverMenu.js A Javascript for a roll over menu when hovered upon Megumi 04.18.2014
imageSize.js A JavaScript to add an interactive size attribute Meltem 04.20.2014
styling.css The CSS file containing all styling for the website Megumi and Meltem 04.30.14
Final controls Double checking each file for errors, checking the javascript and css Megumi and Meltem 05.01.2014

Valid CSS!

Valid HTML 5