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.

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

• Font: “Flamenco” for the main title (35pt) and navigation bar (20pt), and “Alegreya Sans” for the body (13pt)
• Color Scheme
  • Text: Black
  • Background: off-white rgb(250, 248, 236)
  • Links: orange rgb(243, 138, 121)
  • Shadows: pictures of art will be displayed with a gray shadow at on-load, and darker, black shadows when hovered.
  • Borders of the tabs: transparency 50% for each of the following colors in order from left to right: rgb(254,171,114), rgb(245, 207,101), rgb(249, 217, 70), rgb(188, 214,237), rgb(176, 171, 216).
• Body width: 960px;
• Links: The main title “Nan Nan Art Studio” will be a clickable link which will bring users back to the home page. The menu sections will have drop-down menus that can be clicked and contain links to the respective pages.
• Navbar position and its appearance: The navbar will be included at the top of the page. When the mouse hovers over the tabs within the menu bar, the figurines will appear above the particular tab. When the mouse is on a certain tab, the background of the link will turn to a darker shade of its tab. Hence, the background colors will be, from left to right: rgb(241,121,70), rgb(250, 124,114), rgb(187, 213, 144), rgb(171, 227,237), rgb(166, 141,186).
• Banner: The banner will be "Nan Nan Art Studio" written in Flamenco, as seen at the top of the mock-up picture.
• Footer 1: nanmyanmar@gmail.com | Address
• Footer 2: Created by Megumi Takada and Meletem Ozcan, CS110 Spring 2014
• Background Images: We will use a parchment paper texture provided in Microsoft Office Word, which we will make into a jpeg file.
• Border Images: We will use a tree bark texture also provided on Microsoft Office Word.
• Logo: Our logo will be located on the upper left corner of the page next to the banner and the menu tabs. The word “Atutu” will be surrounded by figurines holding hands, a logo Nan Nan and Jennifer Henbest have requested.

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.

   

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.

   

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.

   

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.

   

   

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.

   

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.”

   

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.

   

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.

   

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

• homepage.html
• about.html
• inspirations.html
• artwork_paintings.html
• artwork_design.html
• atutu_aboutTheSchool.html
• atutu_childrenArtwork.html
• atutu_volunteerAndDonate.html
• supportAndContactUs.html
• images/
  • background_image.png
  • background_border.png
  • headerLogo.png
  • painting_1.png
  • painting_2.png
  • painting_3.png
  • painting_4.png
  • …
  • painting_30.png
  • design_1.png
  • ...
  • design_30.png
• modularity/
  • menu.part
• scripts/
  • randomImages.js
  • artworkPrices.js
  • rollOverMenu.js
  • imageSize.js
• styling.css

Work Division and Deadlines