Since this is a website only for the event, there is not much information needed on the website in total and in each section. Therefore, I chose to do something different. I made this big blue box in the center of the page that contains all the information I need in homepage and other link pages. This way the central box is prominent. Also I make the headline hanging on the edge of the central box, and gave it a glow, which makes it looks like a sun hanging in the sky. In addition, I have two flowers as a continuity factor through out the six pages. On the homepage, the bee and the text are from Illustrator doc of my poster.
Typeface Choices
The headline, I used Postino Std since it has this thick strokes and fun characterastic. For the net bar links, I used Hobo Std. It is sans serif, which is easy to read and with a fun character. For other 5 link pages, I used Chalkduster for the titles, and Gill Sans for the body text. Gill sans is readable and looks simple and modern.
Pictures:
I found all the pictures from Say Yes to Education Syracuse Chapter’s website.
(I think this appears backwards thanks to Blogger, so read it from bottom to top if it does)
Event Choice When choosing my event I decided to do a lacrosse game for my old high school team that’s benefiting autism research. Lacrosse has held a special place in my heart and playing it back in high school is one of my fondest memories. When I heard they were having a game to raise funds towards a good cause, I felt this would be a very appropriate event to make a web site for.
Design Strategy I wanted to keep my design simple and not too over the top. Considering this was for a one-time, annual event and for something which not much of a budget would be going into, I decided to not go overboard and just go simple with an appealing design. I was also going for user accessibility when going through the process of creating the web site. I made a clean navigation bar on the left hand side that is simple for finding links and for splitting up the site nicely. The photo on the top bar is of my high school’s field, which I felt would set up the page nicely. The autism ribbon also helps to signify the cause for the fundraiser. The circle with the D in the middle is a variation of my high school’s logo and I felt was good to fill up some of the excess empty space on the bottom of my navigation bar.
Color/Typeface Choice The colors blue (RGB 1/1/248) and grey (RGB 181/180/180) are my high school’s colors, so I decided to make the site those colors. The current page is highlighted in white on the navigation bar to stand out from the links in grey so that the user knows what page they are on. The body type is black once again for legibility while the headline is blue to grab attention. I decided to go with the Futura family of fonts for the top bar and the navigation bar because I thought it went well with the simple design. My headline and body text, on the other hand, are the Arial family because although it’s one of the more used fonts out there, it is very readable for users of all ages.
Design: I chose to do my sorority's philanthropy because this past fall was the first time that I was able to participate in it and it was really fun and meaningful. There is so much work that goes on behind the scenes when planning something as simple as a soccer tournament. I wanted the site to be very simple and fun, to mirror the day. Although the topic is very serious, the actual day is very care-free and fun. I chose purple and yellow because I thought they contrasted well, and they were the colors of our shirts during recruitment for our philanthropy. I made three main containers for my website to make it simple and organized.
Text: For my text I used two fonts. For the sidebar I used Balzano Regular because although it did not have very many weights I thought it was a lot of fun and different. For the rest of my text I used Bulmer, in many differnet forms including italics, bold, bold, display, display, and regular. The colors I used were yellow and purple with the purple being R=83 G=19 and B=71.
Pictures: All the pictures were from friends in the sorority or my own camera. The logo I got from the Autism Speaks website. I traced a soccer ball for the marker on the side bar.
Design
I wanted to create a clean, simple and organized look for the Savor New Hope: Showcase the Arts event in July. I also wanted to maintain New Hope Arts, Inc.’s “personality.” I decided to create a banner using a painting of a street in New Hope as the home page to introduce the user to the event. I felt that this emphasized the importance of art in the community. For the five linked pages I kept the layout the same in order to keep the site organized and easy to follow. To create gestalt, I incorporated the colors of the logo, red and black, throughout the design. The black portion of the logo also serves as the icon when a user hovers over a link. Black containers were used as sidebars throughout the design and red containers were used for the main information of each page. I included photos from the event in order to give the visitor a feel for what it is. Also, since we are at Syracuse right now, I chose to make the directions to the event from Syracuse University.
Typefaces
I used Bembo Std. for the navigation bars at the top and bottom of each page because this was the font I used on my poster. In order to create a stronger image for the event, I used Futura Std. bold for the flag and Futura Std. book for the headers. The reason I used two different weights was to create a sense of balance on the page. The main text is Helvetica because it is a font that anyone can see online and it is clear. Although the difference between the other two fonts and Helvetica is subtle, the main text also stands out on its own due to the font.
I decided to use the Marie Claire website because I have visited it a lot lately because I did a magazine project on it. I really like how the name Marie Claire is very large and red so that that name of the magazine is very established. However, I like their layout the best because I think it uses hierachy very well. It had the main picture in the center that draws the eye, but also 5 larger text heads that are headline for articles. Because of the larger text heads the eye is immediatly drawn there. Next, the eye goes down to the next biggest thing- the daily blog icon. I think hierarchy is used well here because it moves the eye around to the most important parts of the page. Obviously, the links at the top to other parts of the site are smaller because they aren't newsworthy or interesting...they are just there. However, the other headlines are different sizes according to their importance and attention- grabbing status. The use of smaller pictures for smaller stories, and bigger pictures for more important ones also contributes to hierarchy.
This evening, I had an opportunity to listen Annie Leibovitz. Honestly, I was not aware of how important she was and I haven't done a research of what she actually was. Now, after exploring information on internet and of course attending her lecture, I realized what a great opportunity of seeing her I had. Seeing and hearing all the names she worked with, makes me feel that this woman has already accomplished so much that many people can only dream about.
Not knowing of what celebrity I am going to hear, I was at first surprised of the number of peoples who attended. I came to Hendrick's Chapel about 30 minutes earlier and it was almost packed at that time. Not only the students were excited to see her, but professors, photography lovers, family, and friends were also there to support her.
The audience was applauding and shouting when she showed up. Leibovitz, being 60, still looked young and stylish. People could not stop taking pictures of her. After impressive introduction, I was excited to hear her speak and tell of how her life happened to be so successful.
However, I felt that her photography was talking more than Annie herself. Our professor for graphics design, Sheri Taylor, revealed that the projector was brought even from New York in order to satisfy Leibovitz's wants. That was also the condition Leibovitz would make an appearance at Syracuse. And I feel, it worked well. Lots of photos she showed were remarkable, but some not too much, for me personally.
I was amazed of how she was able to get into contact with celebrities such as John Lennon, Demi Moore, Nicole Kidman, Elizabteh II... This list of celebrities looks never end. I realized that being a photographer is not only about being good at your job but also about great personality. With this, she even the Queen Elizabeth could not resist of taking more pictures outside which was not planned before.
I think the beginning of her success was her young age of 19-20 and job at Rolling Stones magazine which brought her celebrities such as John Lennon to work with. Starting young, she already built an impressive portfolio which became well recognized and respected.
My father is a photography lover, and even though he would probably not know of Annie Leibovitz, her works would talk for her. I wish I could put myself in her shoes and have the experience she has. Meeting all the people she did is priceless.
The event I chose is an annual fundraiser at my high school that goes towards the non-profit Camp Good Days and Special Times. I was unsure about what to do on the home screen until I settled on the idea of making it look like a dance floor pattern. I knew I wanted to incorporate my school’s colors (Green and White) with colors from the logo of Camp Good Days (Blue and Red). I chose a shade of neon green for the dance floor to contrast the forest green in the bar across the top of the website. The other colors in the dance floor were pulled from the Camp Good Days logo. Keeping with the dance/music theme, I titled my navigation bar playlists and put eighth notes next to each page title. I knew that the majority of people visiting the website would be students and parents so I tried to gear the content towards those audiences.
Choice of Typeface:
Since most websites have serif typefaces I went looking for a serif and decided upon Frutiger. Many of the serifs I looked at had bowls on the letter a’s that didn’t look good at medium point sizes. For the event title I placed the D and the M in black weight because the event is often abbreviated among students as “DM” in place of Dance Marathon.
Visuals:
The main visual was the dance floor on the home page that I described above. I used the colors in the dance floor as the background colors for the web pages. I chose grey as the color for the navigation bar because iTunes uses a lot of greys in their program and iTunes is popular for making playlists. Grey is also a universal color and goes nicely with the multicolored dance floor pattern. The other visuals were pictures that I got permission to use from a friend that took pictures of the event the year I was a senior and MC’d the event. I used the lasso tool to crop the photo featured in the upper left hand corner of every page showing students sitting with campers from Camp Good Days.
For this design, I choose to use the same not for profit event that I used for the Poster Design project, Condom Casino. Condom Casino is a fun, laid back, yet educational event that caters to the students at S.U. and E.S.F. I wanted the design of the interface to play off of similar design ascetics that I created in the poster design, to create continuity. In order to do this, I repeated the fonts of Script MT Std and Adobe Jenson Pro and also the dominant visual from the poster as a sort of logo for the event. The color scheme was inspired by the poster and includes a background green color of R64 G107 B2, and red R214 G24 B8. I used red instead of yellow as the accent color because it has better contrast with green and is more engaging on a computer screen. The pages featured for the interface design include the main “event” page, a “FAQ”, “photos”, “prizes”, “map” and “join RHA”page. I wanted my navigation bar to have character and depth so I scanned six red poker chips and used them as my “buttons”. To show a roll over, or what the pages would look like when visited, I changed the font color from Black to White. This contrast in color would help to clearly define when a page is visited. On the “photos” page I depicted what if we had launched the sites, would be a working image gallery. This gallery would feature scroll through tabs that play off the natural shapes of the spade and diamond to act as arrows or pause marks. The “prizes” page depicts visual and written representations of all the wonderful prizes that the event rewards. In designing this page I grouped the items by how valuable or desirable they are; the two most desirable together on the bottom. The “map page” was included because I knew from personally hosting this event in the past, that students often complained of not knowing where the Mount is in relation to the rest of campus. Hopefully the micro view of the area that is a “pull out” from the larger all campus map will relieve confusions. The final page I designed was one acknowledging the organization that hosts the event. The “Join RHA” page serves as a PR space for the organization to represent themselves and the other organizations that were integral to this event.
Girls in bathing suits – what frat boy wouldn’t want to attend Delta Gamma’s annual AnchorSplash competition? But in all seriousness, the philanthropy is aimed at both fraternity boys and sorority girls, and is hosted by the ladies of Delta Gamma.
Inspiration for the design of the web interface came directly from the Rho Chapter (Syracuse) Delta Gamma house. Decorated in pale blues with cream-colored trim and pink accents, the house is a life-sized dollhouse at 901 Walnut. Similarly, the pastels used in the interface are girly and classic, but without being overwhelmingly sweet. The use of pastel pink, blue, green, and yellow highlight the fun and exciting nature of the event. The colors are eye-appealing and fun: there is nothing boring about the interface. AnchorSplash isn’t your typical sporting-event-for-charity; it invites participants to relax, have fun, and enjoy the competition all in the name of service.
The interface is simple in its navigation. Different tabs highlight the essential aspects related to AnchorSplash, and provide fun visuals to highlight the entertaining event and encourage future participants. The external links to register or donate to Service for Sight, Delta Gamma’s national philanthropy, are found on both the first and last tabs.
The tabs on the navigation bar change color when selected to create a unified page look. When the Home tab is highlighted, the tab remains green when viewing that page. It creates a cohesive look and marks the flow of the website as the audience jumps from link to link, like bookmarking a page in a book. The Golden Anchor also appears when different tabs are selected, highlighting both the DG symbol and the tabbed page.
Choice of Typefaces:
The headline typeface is in Century, a serif, which stands apart from the rest of the sans serif text on the website. Century is feminine and sweet, but still asserts itself as a different font in the header.
The rest of the interface is designed in variations of News Gothic MT. With different sizes and weights, the sans serif is a legible and even font with medium-sized x-heights that is fun to look at and easy to read. It communicates the message of the website perfectly: simple and to the point.
Visuals:
The header includes the Greek letters Delta and Gamma making a splash – after all, the event is focused on Delta Gamma’s “Doing Good” in their community and for their philanthropy. Each paged has a different image from past AnchorSplash events. The Home and Contact pages utilize cutout figures to enhances the page, but not distract from the information. Instead, both use the images to direct the eye to the information: the home page has the DG sister doing the salute towards the text, and on the contact page the girls salute on the bench and point up towards the contact information.
Ideally, the live interface would allow the Photo Gallery page to scroll through various photos from AnchorSplash events, hence the cutoff of the next picture in the Gallery.
The Events page uses visuals to give an example of the activities and the pool play that happens at AnchorSplash. Similarly, the Delta Gamma page uses images to illustrate sisterhood at its finest.
Both text boxes and images are bound and set on boxes to make the text/image pop: white borders are used for images, blue-on-yellow boxes are used for text. All together, the use of bright pastel color and fun images are what make the interface.
I chose to build my website off my not-for-profit poster for the Susan G. Komen Race for the Cure. I created a total of 8 links, because I felt the others were necessary to my site.My homepage is drastically different from my other pages, but there is a reason for this. I wanted the visual entry point into the site to be a large banner, which I thought would capture the eye the best.
I put little information on the home page, aside from a welcome, an ad for this years race t-shirt that participants receive, and social media links at the bottom (youtube, I thought would be especially important because the user could view videos of the actual event). I also included a watermark on my homepage to continue the ribbon-runner in the logo. Adding to this, I thought it fit nicely in the open whitespace. I also continued the runner on my nav bar to show the “active” state. My nav bar on the home link is different than from the other pages because of the banner I incorporated (originally, they were all side nav bars).
I fell in love with white-space in this design, which I feel is important on a website to make it “breathable.” As a result, the design is simplistic, and I only have pink accents on the pages.
I used san-serif fonts, Clearface Gothic LT Std for my “headers” and ITC Kabel Std for my body copy, because san serifs are easier to read online.
I also included as many photos as possible (there isn’t a page without one), though they aren’t the greatest quality. If I were doing this site for real, I would contact the organization for more photos that are larger and have a higher dpi.
