stacey’sand displays the company logo approximately 60 pixels tall in the upper left corner. this...

DSS

Design BriefWebsite

Amy B. Breitkreutz2.17.2014

Stacey’s School of Dance

DSS

StakeholderHistory

v

StakeholderObjectives

User Demographics

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.

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.

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

DSS

User Personas

User ScenarioLindsay 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.

DSS

Content Specs:Theme andConsistent

Features

Functional Specs:

Home Page

Background color on each page is white, and text is black unless otherwise noted. Color palette includes only shades of black and Pantone 18-3224 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 18-3224 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 18-3224 Radiant Orchid displays contact information centered in 10-pt white Verdana font, including full company name, street address, phone number, and email contact with hyperlink feature. The bottom right line of text in the footer denotes copyright.

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.

DSS

Functional Specs:

Sub Page 1

Functional Specs:

Sub Page 2

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 full-screen 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.

A three-column layout displays three black-and-white 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.

DSS

Features Table:

Home Page

FeatureHow will the feature be implemented?

What concerns do we have about the feature? Content

Logo as hyperlink

back to homepage

The header is consistent from homepage to subpages and displays the company logo approximately 30 pixels tall in the upper left corner.

The logo must be designed to change color schemes annually and to be readable and visually impactful, even in a small scale.

Adobe Photoshop will be used to create the button images and rollover images. Adobe Dreamweaver will be used to make the content functional.

Navigation Bar

This feature spans the page horizontally below the header and features links to the subpages:

HomeAboutClassesGalleryNewsAccount

The order of the subpages might need to be revisited.


Footer Link

The email address listed will be a hyperlink to creating a new email message.

Should another contact option be considered, such as a link to a text input box?

Adobe Dreamweaver will be used to make this functional.

Image Rollovers

Upon rollover the images will change from b&w to color, as the text also changes from white to black.

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.

Images and text will be prepared in Adobe Photoshop.

Images as Hyperlink

The image will be coded to act as a hyperlink button redirecting the user to the destination page.

This link will need to be checked for correct routing to the proper destination.

The hyperlink will be entered into the hyperlink box in Adobe Dreamweaver.

DSS

AssetsTable:

Home Page

Asset Format DescriptionAssociated Assets/Media Other Info

Logo .gif or .png Company logo positioned in upper left of header of all pages.

CSS, HTML Logo will be created using Adobe Illustrator.

Navigation Links

.gif Will be used to navigate the site, found below header on all pages.

CSS, HTML Nav button images and rollover images wil be created in Adobe Photoshop.

Footer CSS with email hyperlink

The Footer include text contact information.

CSS, HTML

Image Rollovers

.jpg Seven images will be used as follows:

Main ImageHomeAbout UsClassesGalleryNews & EventsLogin

CSS Images will be prepared in Adobe Photoshop.

DSS

Features Table:

Subpage 1



Logo as hyperlink

back to homepage



Adobe Illustrator will be used to create a vector image which can be easily resized and edited.

Navigation Bar


HomeAbout UsClassesGalleryNews & EventsLogin



Footer Link




Image Rollovers




Images as Hyperlink




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.

DSS

AssetsTable:

Subpage 1




Navigation Links





CSS, HTML

Content Images

.jpg Two images will be used as follows:

PhotosVideos


DSS

Features Table:

Subpage 2



Logo as hyperlink

back to homepage



Adobe Illustrator will be used to create a vector image which can be easily resized and edited.

Navigation Bar


HomeAbout UsClassesGalleryNews & Events



Footer Link




Image Rollovers




Images as Hyperlink




DSS

AssetsTable:

Subpage 2




Navigation Links





CSS, HTML

Image Rollovers

.jpg Three images will be used as follows:

ClassesScheduleRegistration


DSS

FlowchartH

ome

His

tory

Regi

stra

tion

Sche

dule

&

Cos

ts

Acc

ount

New

s

Inst

ruct

ors

Phot

osTy

pes

of

Cla

sses

Vid

eos

Alu

mni

St

orie

s

Reci

tal

May

a

Paym

ent

Regi

stra

tion

Cre

ate

an

Acc

ount

Nut

crac

ker

Stud

io

Logi

n

Cla

ss

Phot

os

Inst

ruct

ors

Abo

utC

lass

esG

alle

ry

DSS

StyleGuide

Colors

Fonts

Title

#231f20 #7f6e7c #f7dae9 #b163a2 #7f4775

Image Labels

Navigation

Body Copy

Footer

Znikomit (50pt)

Znikomit (22pt)

Helvetica Light (12pt)



DSS

Wireframe:Home Page

DSS

Wireframe:Subpage

DSS

Prototype:Home Page

Photo

Stacey’s School of Dance847-585-4602

Classes About

News

Stacey’sSchool

of Dance

DSSStacey’sSchool

of Dance

AboutClasses Gallery News Account

Stacey’s School of Dance1000 Plaza Drive, Ste 100 Schaumburg, IL 60173

847.585.4602 [email protected]

All images copyright their respective owners.

Fall RegistrationOpens 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!

Account

Gallery

DSS

Prototype:Subpage

Photo

Stacey’s School of Dance847-585-4602DSSStacey’s

Schoolof Dance

AboutClasses Gallery News Account

Stacey’s School of Dance1000 Plaza Drive, Ste 100 Schaumburg, IL 60173

847.585.4602 [email protected]

All images copyright their respective owners.

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!

Classes Schedule Register

stacey’sand displays the company logo approximately 60 pixels tall in the upper left corner. this...

Documents