P2 Project Requirements
Megumi Takada and Meltem Ozcan
CS 110-01 April 4, 2014
Client Name: Nan Nan, artist and founder of art school “Atutu”
Website Name: Nan Nan Art Studio
Contact person: Jennifer Henbest
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.
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.
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:
There will be nine separate pages as follows:
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.
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.
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.
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.
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.”
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.
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.”
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.
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.
Meltem Ozcan will be in charge of implementing:
Megumi Takada will be in charge of implementing:
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.
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
|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|
|styling.css||The CSS file containing all styling for the website||Megumi and Meltem||04.30.14|