Web Design: Jordan Clifford

Design Strategy:

I chose to do the same event I did for my poster design because I wanted to keep it simple and do something I was familiar with/have a connection to. Orange Pulse Dance Troupe only has a website for the group in general not one specifically detailing the charity showcase; therefore much of the showcase related specifics get lost in the information overload on the main website. I wanted to create a website that would breakdown show specific information and lay it out in an easy to use and easily accessible way.

Starting out on my first spread, I ran both my header and navbar horizontally across the screen-view and left them rather simple for easy navigation. To indicate active state I have the navbar lettering changing from white to orange so you know what page you are on. The dancer is a sketch I found off of Google that I edited and desaturated in Photoshop. I liked the position the dancer was in and thought that her foot worked well leading the reader up to the info about the showcase. The type color in the word “7^th annual “ to “showcase” matches the different hugs found in the photo; and I also add a drop shadow to the letters OPDT to create dimension.

I have three sidebars that I recycled throughout each of my five pages in different combinations. The first is my Location/Poster sidebar. I chose to put this information in a sidebar because I didn’t think it was necessarily enough to take up a whole page but also because I thought having this info easily accessible would be more beneficial to my reader – the poster is easy (and free) publicity and the map is helpful for those who do not know the Syracuse campus well. The images on this sidebar are a map of main campus that I got off of our university website and the poster picture is a PNG I created of my poster layout from project #2.

My second page is the “About” page which gives a little background on OPDT explaining what they are about, how they started, what activities they do and how they benefit the community. I also added information on the charity selected to be the beneficiary of the showcase this year so that those who decide to go or want to donate money know where and to whom their charity is going. This page also debuts my second two sidebars. The first being OPDT’s executive board and the other is a list of choreographers and the dances they are choreographing. I wanted to give OP a “face,” so I chose to post photos of the four main leaders of the board: the president, the VP, the secretary, and the treasure. These photos are not real, I found them off of a Google search for headshots and thought they most resembled the Facebook photos of the real girls. The choreographer sidebar is there to kind of show those who are interested a list of the types of dances they can expect to see in the performance.

My third page is the photo gallery. I used a photo I found off of OP’s real website media page. I envisioned that there would be several photos skimming across the screen in a slide show format with the buttons along the bottom giving the viewer the opportunity to pause the action and peruse the photos at their own pace. I chose to put the exec board sidebar on here because I thought it fit well and kept with the idea of giving OP a “face.” The Location/Poster sidebar is here for people to reference back to.

Next is the ticket page which gives the site viewer – if interested – the option of buying their ticket online and getting them shipped to them or if they prefer to just buy their tickets in person, I provided Schine’s hours of operation, contact info, and website address. The order form was copied from TeenVogue.com’s magazine subscription form.

And last but not least is my contact page. It is simple and somewhat empty because OP doesn’t have much by way of contact other than email and their website. I made up a phone number to fill up space and make it look better. I also reposted my exec board sidebar and choreographer sidebar so that incase someone does decide to send an email they can choose from either list whom to address their comments toward.

Type Choice:

The font I chose was Myriad pro. I used different combinations of regular weight, italic, condensed; bold condensed, and bold condensed italic. This was actually the default font of the version of Photoshop I have on my laptop. I meant to change it but once I found out it was somewhat versatile I decided to keep it.

Color:

My color scheme came from my event poster. I wanted to keep a gestalt going between the two pieces and I though that black, orange and white flowed well together. The orange color is R: 249 G: 125 B: 11.