Example of Design: London Creative+ Website
How is it that a website can be classic and structured, yet bold and disjointed at the same time? This website is filled with opposites and while the bright yet simple colors help to grab the viewer, the photographic images are the strongest force. These images rotate and each is very unique, but contained within each is an opposite. In the image above it is the unknown photographer that is the focus with the pictures in the shadows. The soft face of a women framed by sharply angled bangs and fringe, the extremely glossy metal of a sports car in the woods, the textured and weathered face that steals the attention from the intense starring all make you forget you are looking at an advertisement and instead make you stare longer. I use to think that the photography itself would be the only reason I enjoy this graphic design, but after this week's reading I see there is so much more going on....
Margins: This website allows for proper margin spacing and though everything is boxed in there is an appropriate amount of space. The margins exist as a box holding the images in place, with the smaller images having smaller margins than the main rectangle.
Colors: There are three colors (yellow, black and white) the colors are bold, but there is a limited amount of colors to not overpower the main design. Colors are reminiscent of a highway and give an impression of movement or drive.
Visuals: The images are attention catchers and immediately draw the viewer in. Some images are controversial, though they cannot be seen through this screenshot. Each picture has an intriguing aspect to it that makes the viewer want to see more.
Font: There are two fonts used, the same two that are within the company logo. The normal and bold juxtapose each other subtly.
Line: The wide yellow line is not connected, though it appears so at first glance. The line helps draw the viewer into the center, but also adds to the highway image as it looks like a caution banner. The yellow banner lines also go directly against the rest of the lines created by the margins which a very strict: right angels, vertical and horizontal.
Shape: All of the shapes within the site are rectangles of various sizes. Again this gives a very contained and orderly feel. The Graphic Design Basics describes this type of shape as being "masculine, stable, and secure"which contrast nicely with the yellow disjointed banner.
Reversing: Their is some reverse writing, which can be a sin, if not done correctly. The font size however is large and bold enough that there is no visual distortion and the viewer can clearly read the text.
Scale and Size: The pictures are of different sizes (not just the ones in the screenshot, but throughout the main site page.) All of the top images rotate so the emphasized photo will differ but there is still emphasis on the main top photo.
Two Column Design: Though this is not apparent in the screenshot above, the actual website utilizes the "Works-Every-Time layout" seen in White Space is Not Your Enemy in that is has the large image on top and a two column layout below. The cutlines are right and left justified and the paragraphs are small. (Golombisky & Hagen, 2010)
Value: The value within the site is actually in the top image. The shadows to light focuses the viewers eye to the center of the picture. However, this value exists in this image, but not in the others.
Texture: All of the images have a texture that the viewer can almost feel; from the pores in the man's face to the sleek body of the car. The 3D quality is noticeable instantly and also helps to draw the viewer in. This balances the very clean two dimensional feel of the rest of the website.
Harmony Exercise: Visual Echo
I love color and the use of, so I opted to create three music festival posters using visual echo. Visual echo requires the creator to use repetition of an element within the design such as color or font family. These exercises were my first attempts at creating a visually stunning graphic design and I had to explore and learn new tools as well as the new concepts we have learned in our readings this week. For these reasons, and that I am much better at building off of an idea than creating everything from scratch, I used the lay out formats within 'Design Basics Index' for two of the three examples. Below each image there is a brief description of which echo is utilized in the layout.
Color Echo: The colors in the image are repeated in the font and background (the protest sign and the stripes on the sleeve of the raised arm).
Content Echo: A piece of the image is repeated in the text area and the bottom headline with the image bridges the two pieces together. Also contains color echo.
Loosened Alignment Exercise
Alignment refers to the framing of the elements within the piece. For example, with an alined design one could connect an imaginary line from a right angle within an image to the beginning or ending of a text line. This assignment called for a strict and then a loosened alignment. Again for this activity I followed the layout format within Design Basics Index and focused on finding images with angles and lines and connecting them to text beginnings and endings.
Strict Alignment:
Loosened Alignment:
All images taken from http://www.sxc.hu/
Golombisky, Kim, & Hagen, Rebecca (2010). White Space is Not Your Enemy. New York:
Focal Press.
Lynch, Brittany (2012, June 4) Graphic Design Basics. Retrieved from http://www.brittanylynch.com/graphic-design-basics/
Penner, Eli (2009, June 17) 10 Web Design Rules That Your Can Break. Retrieved from http://www.webdesignerdepot.com/2009/06/10-web-design-rules-that-you-can-break/
Brandi,
ReplyDeleteI thought your use of color for the harmony exercises was really well-thought out. Your ads look professional and well thought out. As a viewer I thought there was a clear theme to each of the posters. They were neat, concise and provided me with the information I needed to make a decision about attending the event.
Also, the London+ Creative Website was a nice example to analyze in respect to our readings. At first glance it feels like there is a lot going on, but after reading your analysis I can understand how there is organization and thought put into the layout. It is a great example of a website that chooses a color scheme and uses it effectively to guide the viewer's attention and keep the information organized.
Hi Brandi,
ReplyDeleteI love the London+ Creative Website. Has the look of a simple layout, but the colors and the way the content is organized really makes it pop out. I like how the horizontal scroll bar buttons are a plus and minus sign.
The color harmony flyers look great. I do want to throw out a suggestion or two. For the first one, maybe change the body font to not match the headline one? That way there can be a textual contrast (even though you already used a different font for the company logo.
For the third flyer, maybe add some text in the empty space that you have underneath your title. I suggest putting a short list introducing the different bands that will be there, listening two or three and then say, "plus much more/and many others"
-Mae-Lin
Great job with the loosened alignment flier! I think it works better than the rigid structure in this case because it gives the ad a more whimsical feel, which is perfect for a toy store. Also, I think your color scheme is great. It manages to be bold yet balanced.
ReplyDeleteThanks everyone for the feedback. This being my first time designing ads and posters, your compliments were very encouraging.
ReplyDeleteTo Mae-Lin: Thanks for the suggestions. Adding another font to the color echo poster will make it better and the list of musicians in the other will add more details to the typography echo. I appreciate the suggestions and will make the necessary corrections soon.