Web design

Design Strategy:

I chose to use the same event for my web site that I used for my poster project. That event is the Kappa Karwash which benefits Reading Is Fundamental. In using the same event I wanted to play off of the soap bubble theme that I used in my poster. I used to soap bubbles ad the link on my navbar to add interest and creativity, but also because it makes the link stand out and they become more user friendly. To distinguish which page was being viewed I put sponges on either side of the soap bubble link to that page. I wanted my web site to be simple, user friendly and clutter free so I wanted to make sure I used white space and didn’t cover every inch of the page in color. On my directions page I overlaid a blue fleur di lis over the star on the directions page indicting Kappa Kappa Gamma because that is the symbol of the sorority. Overall I tired to keep the images, text, and layout as simple and minimal as possible as to not overwhelm the user.

Typeface:

To give my web site a simple, clean, and streamlines feel I chose to use sans serif fonts that were on the lighter side. The font used in my header is called Castorgate and was downloaded from dafont.com. Aside from the header it is used only one other place which is on the home page. I stacked the type next to Kappa Karwash in 18 pt. to effectively fit it in. The rest of the type on my five pages was all Helvetica Neue in either regular weight or LT Std 57 condensed. I chose to use Helvetica because it is such a perfect font that it would not distract attention away from the information on the web site or clutter it.

Color:

I chose to use a blue theme for my web site, since the soap bubbles that I used from my poster were blue but also because the colors of Kappa Kappa Gamma are light and dark blue. I also thought that blue would be a safe color choice and not too crazy or hard to work with. The other color that I chose to offset the blues was yellow because the sponges were yellow and the warm color contrasted well against the cool blues. The blue and yellow used throughout the five pages tied the whole web site together and really created the crisp, simple, and streamlined look I was going for. The shade of blue used on the stacked part of the header to the left of Kappa Karwash is RGB:152, 202, 241. The dark blue used throughout the five pages as the background container, navigation bar, and the header “Kappa Karwash” is RGB: 89,139,240. The stroke outlining the soap bubbles is RGB: 17, 191, 218. The color inside the soap bubbles and also used on the contact and about pages is RGB: 191,231, 247. The color used to emphasize that certain pieces of type are links is RGB: 10, 1, 128. The shade of yellow used throughout the five pages is RGB: 248. 213, 74. The sponges used on the navigation bar are made of two shades of yellow, a darker RGB: 249, 198,6, as well as a lighter RGB: 252, 198, 6.

Wrap-up

As the semester is coming to an end, I can't ignore the fact that I've learned more than I ever expected to get out of this course. I don't think I'll ever again be able to look at a sign, poster or any form of type again without thinking about leading, kerning, serifs, sans serif, etc. or the use of type. At the beginning of the semester I thought that this course was going to be just about creativity and creating something visually pleasing. I never imagined the technical aspects that come along with graphic design.

What I will take away most from this class is an overall ability to asses and analyze design as good or bad. No longer will I just see words, colors and shapes, but I can also recognize, choice of typeface, layout, hierarchy, color choice, etc. Not to mention that I now have a basic overall understanding of how to use all of the indesign software and photoshop.

The hardest part of this class for me was the amount of time that must be spent in the labs to complete the projects. Sometimes I would be in the labs past midnight working on a project. When you're in the labs hours seem to go by like minutes. A problem I faced while working on the projects was that sometimes we weren't taught in lab how to use a certain program or tools necessary to complete a project until a few days before the project was due. For example, I wanted to start the website project the week it was assigned and hopefully have most of it done before Thanksgiving break, but wasn't taught in lab how to use photoshop until the thursday before it was due the next Tuesday.

Overall I learned a lot in this class, but I won't lie, I'm looking forward to turning in the last project and being relieved of all of the stress it brought me!

Logo Project

In creating my logo I really had no idea what I wanted to do at first. I am a magazine major and wasn’t sure how in incorporate that into a logo. After a bit of thinking I decided that since I’m specifically interested in women’s fashion and beauty magazines that I would design my logo from that. A tube of red lipstick is the epitome of chic in the fashion and beauty world so I figured that was a great route to go. The whole idea of my logo is for it to appear as if my name has been written out in the lipstick, so I chose a font that was similar to my cursive handwriting. The lipstick tube I traced with the pen tool from a picture off of the internet.

The typeface I used is Spring Std LP in light and regular. I chose this font because it looked like cursive handwriting so went along with the idea that my name was written in the lipstick. On my business card and stationery, my name is written in Spring Std Regular 48 pt while my phone number and e-mail are Spring Std light 18 pt. On my envelope I made the logo smaller so my name is 36 pt and my address is 12 pt.

The only colors I used were black, red, and a goldish color to keep my design simple I used the red because I was going off of the idea of a tube of red lipstick, but the warmth of the color makes my name stand out. The black is pantone process black EC, the red is pantone 200 EC, and the gold is pantone 458 EC.

Radar Magazine

Design Strategy:

After choosing to use Jennifer Aniston for my magazine and having read the article I selected, I knew my design strategy. The article focuses on how even still at 40 years old and having been single for 4 years now, Jennifer Aniston is still just as beautiful and carefree as she was years ago. I wanted this to be reflected in all of my images. To do that, I decided to use only pictures of her smiling and seeming happy and comfortable with herself, nothing too serious or fashion magazine like. I also wanted the photos to show off her body and not have her completely covered up by clothing so that it visually verbalizes how the article emphasizes how great she looks at 40 years old. Since the pictures were all very natural looking and not so posed, I wanted to reflect that in a minimalist and simplistic layout. I didn’t want to weigh down my layout with too many pictures or pull quotes. I chose to title my magazine Radar as I wanted it to be a celebrity based magazine and have it emphasize how through the paparazzi and media, the personal lives of celebrities like Jennifer Aniston are always on the public radar. For my sidebar I made a time line of Jennifer Aniston over the years, showing how she has aged, but still looks beautiful. I even chose to feature an advertisement on the back cover of my magazine that Aniston did when she was the face of SmartWater.

Typeface Selection:

The typefaces that I used all throughout my magazine were all on the list of the 10 text faces you can rely on that you gave us in class. The title of my magazine on the front cover is Bembo Std regular 185 pt. I knew I wanted a serif font and I particularly like the way that the legs of the R’s had a curvature to them. For my cover lines I used both Century Expanded Italic 48pt. and a variety of weights and heights of Frutiger LT Std. The headline of my second spread is Garamond Bold 90 pt. My byline is ITC Berkeley Oldstyle Std book 22 pt and my deck head is ITC Berkeley Oldstyle Std italic 18 pt. I wanted all three of these texts to be different but yet still work together. The serifs of the two typefaces make them mix well. The body font of my article is Garamond Regular 12 pt, except for the 15 pt I used on the second spread to effectively lead into the story on the next page. My sidebar is all weights and heights of Frutiger LT Std because the sans serif provides a good contrast to all of the serifs I had in my layout.

Color:

I used three colors consistently throughout my layout that I felt worked well together. The blue and orange were the main colors I used and are harmonious because they are opposite each other on the color wheel. The blue is CMYK: 75.23, 15.17, 34.49, 0.11. The orange is CMYK: 8.37, 58.7, 51.25, 0.08. The third color brown was a nice complement to the two and I used that as the background color for my sidebar. The brown is CMYK: 50.91, 67.13, 57.21, 36.04.

Usability- The Apple Store

The Apple Store website has great features that make it extremely easy and fast for it's users to navigate. The tool bar across the top of the page clearly displays all of the different products that Apple sells so users can immediately be directed to the page with information regarding the product they are interested in. Similarly, centered on the home page are pictures of every product that Apple offers so that users can visualize and more easily choose which product they want to purchase or learn more about. Right below this section of pictures is a red bar that advertises free shipping on orders of $50. Red is a warm color that comes forward off of the screen and leads the user's eye to the deal which is an incentive to make a purchase. Along the left side of the screen there is a vertical bar listing categories of products that can be viewed. This helps users who know which type of product they need, but aren't sure specifically which product they want. There is a similar bar on the right side of the screen which features specific select products to interest a user who is on the website just to browse all of the products and has no specific idea in mind. All of the type used on the site is very easy to read. All of these things combined create a very user friendly site that has great usability.

Horizontal Grids

The website for Carrot Creative, a media marketing and design firm in Brooklyn, uses the second technique of joining for variety. This web page is designed on a horizontal grid, lending a more creative and airy feel to the overall design. The page is broken down into rows, rather than columns, that emphasize each section and visually lead the reader through the page. Even the woodgrain of the background is on the horizontal which makes the page feel wider. I personally feel this is more aesthetically pleasing as you don't have to scroll down the page to read the information and nothing gets cut off. To break up the strict horizontal layout, this website emphasizes technique 3 as well by utilizing angles. The angled photographs behind the layout add creativity to the page and break up the horizontal grid to make it more visually interesting.