Stacey s. School of Dance. Design Brief Website. Amy B. Breitkreutz DS S

Size: px

Start display at page:

Download "Stacey s. School of Dance. Design Brief Website. Amy B. Breitkreutz DS S"

Melvin Sullivan
5 years ago
Views:

1 Stacey s School of Dance Design Brief Website Amy B. Breitkreutz

2 Stakeholder History Stacey s School of dance is a family-run dance studio in Schaumburg, Illinois. They offer youth and adult dance classes in ballet, pointe, jazz, tap, modern, yoga, and pilates. The dance studio is currently owned and operated by Stacey Wilson, but was originally founded by her mother Connie Wilson. Both mother and daughter teach at the school, along with a team of other instructors. Dancers at the studio perform annual events including the Nutcracker Ballet and the Spring Recital. v Stakeholder Objectives The site needs to be an information source for new and continuing students, with access to information regarding schedules, registration, studio news, event information, and media including photos and video. The stakeholder needs the site to be both promotional and informative to attract new business and maintain current enrollment. User Demographics Users are mostly female and include young adult students (ages 4-18), their parents (ages 30-50), and adult students (ages 18-60). Users vary in educational background based on age, but all have computer experience to the extent of at least and social networking. First-time users are looking for information about classes offered, instructors, registration, and event dates, schedule information, pricing, and media including photos and videos. Repeat users want to see current event information, and they will use the site regularly for registration and payment options.

User Personas User Scenario Lindsay first visited the site through a friend referral from a

Lindsay was looking for a place to take yoga classes, and wanted information about schedule

Her first impression was positive, as she was able to quickly find the links to classes

3 User Personas User Scenario Lindsay first visited the site through a friend referral from a currently enrolled dancer. Lindsay was looking for a place to take yoga classes, and wanted information about schedule options and pricing. Her first impression was positive, as she was able to quickly find the links to classes offered and pricing, and found herself reading about the Yoga instructors. She felt a connection with the images she saw and with the professional quality of design, so she decided to use the enrollment page to register for the next class.

4 Content Specs: Theme and Consistent Features Background color on each page is white, and text is black unless otherwise noted. Color palette includes only shades of black and Pantone Radiant Orchid, aside from photographs, videos, and external links with existing branding (e.g., Facebook). The header is consistent from homepage to subpages and displays the company logo approximately 60 pixels tall in the upper left corner. This logo is a clickable feature returning users to the homepage from any subpage. The right side of the header contains the contact phone number in 12-pt font. There is nothing else in the header aside from the background color. Below the header on the homepage and all subpages is the navigation bar (nav) spanning the entire width. The nav background color is 20% strength of Pantone Radiant Orchid, and contains six buttons for Home/About Us/ Classes/Gallery/News & Events/Login. Text is 20-pt black font and includes rollover images changing the font color only and adding drop-down menus with subcategories. The current page retains the hover-state font color. The footer is consistent on homepage and each subpage. It s background color of 75% strength of Pantone Radiant Orchid displays contact information centered in 10-pt white Verdana font, including full company name, street address, phone number, and contact with hyperlink feature. The bottom right line of text in the footer denotes copyright. Functional Specs: Home Page Homepage content includes a full-screen black-and-white photo of a line of students dancing at the barre. When the user scrolls below the first image, two rows of three images fill the next section of the screen. Each image is a representation of the links contained in the nav (Classes/ About/Gallery/News/Account) with 70-pt font, light pink labels aligned bottom right within each image. Upon rollover of any image the Radient Orchid colored box appears around the text label of that image, and the entire image is a hyperlink to the corresponding subpage.

5 Functional Specs: Sub Page 1 A two-column layout displays two black-and-white images aligned next to each other over a white background and centered to fill the screen with 20-pixel white space borders around each image. Each image is labeled with 57-pt font light pink labels aligned bottom right. Upon rollover the Radiant Orchid colored box appears around the text label of that image, and the entire image is a hyperlink to the corresponding subpage. Clicking the left image titled Photos opens a shadowbox feature allowing the user to scroll through enlarged fullscreen color images of the studio, instructors, performances, and professional class pictures. During this slideshow, the background is masked with a black semi-transparent overlay and picture captions display in 10-pt white font. The image on the right has a simulated play button, centered on the image and the entire image is a hyperlink to the studio s YouTube channel. Functional Specs: Sub Page 2 A three-column layout displays three black-andwhite images aligned next to each other over a white background and centered to fill the screen with 15-pixel white space borders around each image. Each image is labeled with 57-pt font light pink labels aligned bottom right, labeled: Classes/Schedule/Register. The Classes image is a black-and-white photograph of a ballet dancer in action in class. Clicking anywhere within the image opens a new subpage with class descriptions. The Schedule image is a black-and white photograph of a calendar. Clicking anywhere on this image opens a new subpage with schedule and cost information. The Register image is a black-and white photograph of a pen filling out an admissions form. Clicking anywhere in this image opens a subpage where new and continuing students can login to register for classes.

6 Features Table: Home Page Feature How will the feature be implemented? What concerns do we have about the feature? Content Logo as hyperlink back to homepage Navigation Bar Footer Link Image Rollovers Images as Hyperlink The header is consistent from homepage to subpages and displays the company logo approximately 30 pixels tall in the upper left corner. This feature spans the page horizontally below the header and features links to the subpages: Home About Classes Gallery News Account The address listed will be a hyperlink to creating a new message. Upon rollover the images will change from b&w to color, as the text also changes from white to black. The image will be coded to act as a hyperlink button redirecting the user to the destination page. The logo must be designed to change color schemes annually and to be readable and visually impactful, even in a small scale. The order of the subpages might need to be revisited. Should another contact option be considered, such as a link to a text input box? It is important to consistently and precisely crop images and text so no visual jump occurs between b&w image and color image during rollover. This link will need to be checked for correct routing to the proper destination. Adobe Photoshop will be used to create the button images and rollover images. Adobe Dreamweaver will be used to make the content functional. Adobe Photoshop will be used to create the button images and rollover images. Adobe Dreamweaver will be used to make the content functional. Adobe Dreamweaver will be used to make this functional. Images and text will be prepared in Adobe Photoshop. The hyperlink will be entered into the hyperlink box in Adobe Dreamweaver.

7 Assets Table: Home Page Asset Format Description Logo.gif or.png Company logo positioned in upper left of header of all pages. Associated Assets/Media Other Info Logo will be created using Adobe Illustrator. Navigation Links.gif Will be used to navigate the site, found below header on all pages. Nav button images and rollover images wil be created in Adobe Photoshop. Footer CSS with hyperlink The Footer include text contact information. Image Rollovers.jpg Seven images will be used as follows: CSS Images will be prepared in Adobe Photoshop. Main Image Home About Us Classes Gallery News & Events Login

8 Features Table: Subpage 1 Feature How will the feature be implemented? What concerns do we have about the feature? Content Logo as hyperlink back to homepage Navigation Bar Footer Link Image Rollovers Images as Hyperlink The header is consistent from homepage to subpages and displays the company logo approximately 30 pixels tall in the upper left corner. This feature spans the page horizontally below the header and features links to the subpages: Home About Us Classes Gallery News & Events Login The address listed will be a hyperlink to creating a new message. Upon rollover the images will change from b&w to color, as the text also changes from white to black. The image will be coded to act as a hyperlink button redirecting the user to the destination page. The logo must be designed to change color schemes annually and to be readable and visually impactful, even in a small scale. The order of the subpages might need to be revisited. Should another contact option be considered, such as a link to a text input box? It is important to consistently and precisely crop images and text so no visual jump occurs between b&w image and color image during rollover. This link will need to be checked for correct routing to the proper destination. Adobe Illustrator will be used to create a vector image which can be easily resized and edited. Adobe Photoshop will be used to create the button images and rollover images. Adobe Dreamweaver will be used to make the content functional. Adobe Dreamweaver will be used to make this functional. Images and text will be prepared in Adobe Photoshop. The hyperlink will be entered into the hyperlink box in Adobe Dreamweaver. Shadowbox A shadowbox feature will allow users to scroll through images. The correct style of shadowbox will need to be found which includes text caption options. The shadowbox feature will be added using Adobe Dreamweaver.

9 Assets Table: Subpage 1 Asset Format Description Logo.gif or.png Company logo positioned in upper left of header of all pages. Associated Assets/Media Other Info Logo will be created using Adobe Illustrator. Navigation Links.gif Will be used to navigate the site, found below header on all pages. Nav button images and rollover images wil be created in Adobe Photoshop. Footer CSS with hyperlink The Footer include text contact information. Content Images.jpg Two images will be used as follows: CSS Images will be prepared in Adobe Photoshop. Photos Videos

10 Features Table: Subpage 2 Feature How will the feature be implemented? What concerns do we have about the feature? Content Logo as hyperlink back to homepage Navigation Bar The header is consistent from homepage to subpages and displays the company logo approximately 30 pixels tall in the upper left corner. This feature spans the page horizontally below the header and features links to the subpages: Home About Us Classes Gallery News & Events The logo must be designed to change color schemes annually and to be readable and visually impactful, even in a small scale. The order of the subpages might need to be revisited. Adobe Illustrator will be used to create a vector image which can be easily resized and edited. Adobe Photoshop will be used to create the button images and rollover images. Adobe Dreamweaver will be used to make the content functional. Footer Link Image Rollovers Images as Hyperlink The address listed will be a hyperlink to creating a new message. Upon rollover the images will change from b&w to color, as the text also changes from white to black. The image will be coded to act as a hyperlink button redirecting the user to the destination page. Should another contact option be considered, such as a link to a text input box? It is important to consistently and precisely crop images and text so no visual jump occurs between b&w image and color image during rollover. This link will need to be checked for correct routing to the proper destination. Adobe Dreamweaver will be used to make this functional. Images and text will be prepared in Adobe Photoshop. The hyperlink will be entered into the hyperlink box in Adobe Dreamweaver.

11 Assets Table: Subpage 2 Asset Format Description Logo.gif or.png Company logo positioned in upper left of header of all pages. Associated Assets/Media Other Info Logo will be created using Adobe Illustrator. Navigation Links.gif Will be used to navigate the site, found below header on all pages. Nav button images and rollover images wil be created in Adobe Photoshop. Footer CSS with hyperlink The Footer include text contact information. Image Rollovers.jpg Three images will be used as follows: CSS Images will be prepared in Adobe Photoshop. Classes Schedule Registration

12 Flowchart History Schedule & Costs Home News Photos Types of Classes Instructors Videos Alumni Stories Recital Nutcracker Account May a Payment Registration Studio Create an Account About Classes Gallery Class Photos Instructors Registration Login

13 Style Guide Colors #231f20 #7f6e7c #f7dae9 #b163a2 #7f4775 Fonts Title Znikomit (50pt) Image Labels Znikomit (22pt) Navigation Helvetica Light (12pt) Body Copy Helvetica Light (12pt) Footer Helvetica Light (9pt)

14 Wireframe: Home Page

15 Wireframe: Subpage

16 Prototype: Home Page S D S Stacey s School of Dance Classes Stacey s School of Dance About Gallery News Account Photo Stacey s School of Dance Fall Registration Opens July 14th for all ages Stacey s School of Dance is a family-friendly and age-appropriate studio with a teaching staff who loves to share their passion for dance and performance! At Stacey s School of Dance, we feel it's important for the star in every child to have the opportunity to shine! Classes About News Account Gallery Stacey s School of Dance 1000 Plaza Drive, Ste 100 Schaumburg, IL info@ssdance.net All images copyright their respective owners. S D S

Prototype: Subpage Stacey s School of Dance Stacey s School of Dance 847-585-4602 Classes

Daytime, Evening, and Summer Class Options Whatever the skill level, whatever the dance

Whether your student wants to pursue a professional career in dance and the performing arts,

tools they need to succeed and to be the best dancer and person they can become!

17 Prototype: Subpage Stacey s School of Dance Stacey s School of Dance Classes About Gallery News Account Photo Classes Schedule Register Let s Dance! Daytime, Evening, and Summer Class Options Whatever the skill level, whatever the dance goals, Stacey s School of Dance has classes available to suit the needs of your student! Whether your student wants to pursue a professional career in dance and the performing arts, or if they just want to enjoy dance for the fun of learning, we give each young person the tools they need to succeed and to be the best dancer and person they can become! Stacey s School of Dance 1000 Plaza Drive, Ste 100 Schaumburg, IL info@ssdance.net All images copyright their respective owners.

McMaster Brand Standard for Websites

McMaster Brand Standard for Websites McMaster University s policy calls for all university websites to follow its brand standard. McMaster websites share common elements, presentation and behavior and a consistent design, enabling visitors