Final project| Sophia Montesdeoca

I used the same tool bar and picture above it to keep consistency and a sort of theme through out my project. I used the image on the right, and the stamp tool to create the fading out effect. I then used another picture of the sky and the stamp tool again to make the sky look choppy, but still look as if it was from the same sky.

I choose to have the actual tool bar, be black as it is a neutral color. I choose rounded boxes for the drop boxes as I wanted a fun yet professional feel. I used the paint brush to make the construction hat which indicates which drop box you are on. Both the drop box and the search engine “go” box are the same shade of golden yellow R=255 G=182 B=42. The rest of the colors are labeled on the mark up.

I used the 16 grid as guide lines for my website. I did not line up all of by drop boxes with the guide lines however, as I wanted to ensure that there was an equal space between them.

The text on the homepage was taken from the Home HeadQuarters website.

I tried to keep the text box the biggest visual on each page paired with a large image on the right, and pictures of two houses on the left, which are actually from Home HeadQuarters website, that would serve as active links that would take you to the land and houses they currently have for sale.

The Block Blitz event is a light event that brings people out to help improve neighborhoods by improving new homes.

All of the text, with the exception of “Block Blitz” on the Block Blitz tab is written in Helvetica Ranging from 40 pt Bold Oblique to regular 14 pt and is marked as such on the marked up copy.

Website Design | Mao

Design Strategy

For my non-profit event I chose a food/clothing drive sponsored by Syracuse University and SUNY ESF. Ten Tons of Love is a semi-annual event that happens during the winter and spring season before students leave for break. As a proud donator I was displeased to find how little advertising and graphic elements were available on their website. To re-design the site I began with a more distinct color palette. Working with a full spectrum of colors gave the event a friendlier edge that I found more inviting to its viewers. The 12-column grid was very helpful to separate my categories into six sections. I created an additional sidebar under the homepage to show information apart from this current event.

Choice of Typefaces:

For my top header I chose to use Briem Script for “ten tons of love” and Brush Script for the word “of”. I thought those typefaces established a playful appeal, which is consistent with the images provided. The rest of the font used if VAG Rounded, which comes in three weights (thin, light, bold). I wanted a sans-serif hat was not too modern and had good readability (I initially chose Avant Garde but found this font too hard to read as body text).

Visuals

The main picture used on the header is actually a picture I took in a GAP store. I loved the line up of colors and thought the use of colorful clothing was appropriate for this event. Additionally, I wanted to represent the different items accepted for donations, hence adding the cereal, book, and colored pencil visual. These are apparent once a different category is activated. Other visuals are pictures from past events such as the volunteers and snapshot of donated items. By incorporating these photos the viewer can get a better sense of the event as well as what to donate/expect. Lastly, I have included an entire gallery of past event photos.

Colors:

Beyond my colorful photography, I chose vivid shade of magenta (R=204, G=0, B=153) for my activated header, as well as the “of” (opacity = 74%) in the event title. I wanted a color that was bold and contrasted well with the black header.

Images:

All event-related images can be found on tentons.syr.edu Other images and icons were obtained from flickr.com.

Week 14: Llewellyn | Interface Design

Design Strategy:

For my website project, I chose to design for a non-profit organization called Pro Portsmouth, Inc. Pro Portsmouth works to maintain the arts, culture, and history of Portsmouth, NH through the many events that they put on throughout the year. The organization’s 10K race that kicks off Market Square Day is one of the biggest races in the seacoast area. I wanted the website to be fun and vibrant, because Market Square Day is all about celebrating the art in the area. I tried to organize the information in a way that was both easy to read and easy to navigate. The race attracts all ages and abilities so I had to make sure the site didn’t just appeal to a certain level of runner. The website is a very useful resource and allows viewers to register for the race and gain information on volunteering.

Choice of Typefaces:

The two main typefaces that I used in my design were News Gothic Std and Spumoni LP Std. I chose News Gothic, a san serif, because it is easy to read on the computer screen. It is a very simple typeface and works well in presenting information clearly. I used to Spumoni because it brought a youthful, fun tone to my design. Although it is a very decorative and spunky typeface, it adds a nice variety when used sparingly. I also used Helvetica for the navigation bar because it is easy to read and has thick strokes that do not vary much in thickness.

Visuals:

I stuck to bright visuals and photographs for this assignment. The logo for the event is very whimsical and fun so I tried to mimic that idea throughout my design. The sky and grass appear on every page of my design. I think this visual aspect helps to emphasize that the event takes place outside and is meant to bring the community together. Pictures of past events are used as the dominant element(s) on each page. I tried to feature pictures that related to their respective pages. The navigation bar that I created resembles a road. Whichever page you are currently on is marked by the sole of a running shoe. This helps to visually communicate what the event is for without having to read any information. I also included the logos of past events on the bottom of the home page, because each logo was created by a local artist and really displays the talent of the area, which is what the event is essentially all about.

Colors:

The sky blue is R=166, G=200, B=219. The green grass is R=187, G=217, B=118). The purple type that reoccurs throughout the pages is R=71, G=41, B=113. Lastly, the yellow used in the navigation bar is R=245, G=234, B=0.

Images:

All images were found on proportsmouth.org except for the big picture on the Register page (http://www.flickr.com/photos/theothermattm/3631211698/) and the two pictures on the Rules & Regulations page (http://doublejrunning.blogspot.com/2009/06/2009-market-square-day-10k.html) and (http://media.photobucket.com/image/road%20race%20runners/dukefarms/082107/runners.jpg).

Week 13| Lang

One website that I constantly use is Kayak.com I don't think this website has good visual hierarchy because when you first see it the first thing you see is the logo for Kayak and then you don't really know where to look next because everything else is the same size. You would then look at the search bar and then from then on. All the information is contained in the middle of the page but there is a small navigator bar on the left side so it's hard to determine where you should look next after seeing the logo. The most dominant item is the Kayak logo and it's the most visually pleasing because it's the only thing on the site that has color and it's the biggest thing on the website. The other item is the search button which is also in a orange color. I don't think the kayak logo is the most useful because it is just a logo and it doesn't lead the reader to the search bar to find flights, hotels and cars.

I guess the good thing about this website is that it is very simple to use. It is not hard to find what you are looking for, so you are able to distinguish quickly if you want to look up a flight or hotel. All the search options are located in the middle of the web page so that can be a positive aspect too. It would also cause the user to look in one location and not have to look all over the web page to find something. I think overall this website can be improved. There is no visual hierarchy that leads the user from item to item. It is just very simple and plain which is the only reason that makes it easy to use.

Project 5 Interface Design | Robinson

Design Strategy

The Spring Fling BBQ is an annual event hosted by a community service organization at my high school. The students grill hamburgers and hot dogs and entertain senior citizens. I wanted to combine the themes of a barbecue and spring. My design solution was to turn condiment bottles into flower vases. I drew the flowers with the pen tool and applied different effects in Photoshop to give them a sketched appearance.

Choice of Typefaces

Autobahn Tomatica is a font I found online (http://www.autobahn.nl/graphic_design/ autobahn_graphic_design_shop.php). The Autobahn designers traced Helvetica font in ketchup, which fit my theme perfectly. You obviously cannot tell by looking at it that it was drawn in ketchup, but its holes in the lettering mirror the flowers well. I repeated the font in the navigation bar. For my body text, I used the sans serif font ITC Avante Garde Gothic STD in Medium weight because it has large counters, tall x-heights, minimal contrast and wide kerning. My computer classes taught me that these traits are ideal for reading on a computer display.

The “BBQ Butterfly,” as I call it, is two “B’s” in Autobahn Tomatica. I reflected one “B” so their spines would touch. I used the pen tool to draw antennas and a dotted trail.

Color

My color theme was condiments. The mustard yellow is R=243 G=225 B=0, and the ketchup red is R=217 G=61 B=61. The green is a pop of pastel color, R=153 G=206 B=151.

Images

Members of Interact Club took all the photographs, except of the condiment bottles (http://www.equippers.com/images/inventory/) and of the elderly woman on the Guests link (http://impactnews.com/central-austin/277-dining/6605-the-pit-barbeque).

Week 13:Heirarchy|Shaer

I believe that the Wegmans website has strong visual hierarchy. As soon as you enter the site your eyes are drawn to the image of the Wegmans store. They purposely add a large image of their store as the main focal point to draw in their viewers. The veiwer is then compelled to read on and look at the new savings, discounts, or special offers that the site is attempting to draw attention to. The main navigation bar, located above the image, is bold and eye catching, so the browser can easily select a category. The majority of users who go to wegmans.com search the website with a specific purpose. With this in mind, Wegmans very clearly organizes their information so that all of the links are organized and available without overwhelming the customer.

As previously mentioned, the first thing on the page that I notice is the image and bold text on the picture. Your eyes automatically lead you above the image to the bold navigation bar. It is easy to be drawn to this area of the website next because of its bold identity and it is the prominent color of the image below it, allowing the eye to flow as though it is a continuation of the picture. This navigation bar is where the most important content is located. Wegmans.com emphasizes its target area of interest by also using large font.

I feel that the layout of wegmans.com is aesthetically pleasing. Having learned about webpage designs in class, it is clear that a grid system was used, successfully, to make a user- friendly site. The simplistic color scheme also works really well in helping to create a clean webpage. The only critique that I have is that I would personally consider making the name Wegmans a little bigger. Overall it is a great website!

Week Thirteen | Young

This website, shopbop.com is a site that I visit with some frequency for clothing. I also believe that this site has very strong visual hierarchy and is very user-friendly. As soon as you look at the page your eyes go straight to the "OBSESSIONS" since it’s so big, and thus the reader is compelled to read on and look at the new spring clothes that the site is drawing attention to. The navigation bars above are also aligned perfectly so the browser can easily pick whatever part of the site they want to go to.

The first thing I notice is again, the large font and then all of the bold pictures underneath. Your eyes automatically lead you underneath the type, where the most important content is. Shopbop.com puts emphasis with bigger font sizes on what they want you to read the most. The size of the type, and not necessarily the colors, but the overall muted tones and the simplicity of the page make it visually pleasing.

I think the layout and the structure of the site is pleasing to the eye. It's obvious that a grid system was used and that makes it easy to navigate.