Week 5 Summary

October 1, 2012 at 12:33 am (Web Design)

This week was a little trying for me.  We started off by revisiting our resume projects and adjusting them based on the final critiques.  I had a lot of difficulty finding a color for my links that would contrast well enough with the blue background color.  Even complementary colors didn’t stand out enough according to the contrast ratio measured by http://snook.ca/technical/colour_contrast/colour.html.  I finally settled on black for links and hover and a complementary orange for active and visited.

Next, we delved into a program which is very new to me- Adobe Fireworks.  I went through the tutorials no problem, but found navigating the program to be very difficult.  Many of the tools and features are supposed to be the same as other Adobe software, like Illustrator and Photoshop, but I found that they just didn’t function quite the same way.  Frequently, I would adjust a property and find that the value didn’t change and I am not at all fond of how the layers (seemingly only sublayers) work.  Each line seems to get its own layer and they can be merged pretty easily, but they add up fast and make the layers panel really messy.  I also found that certain lines show up over others that should be above them and that paintbrush strokes don’t show up on a layer and cannot be selected to be edited or deleted later.  I guess it will just take some getting used to, but I hope I catch on soon.

Our new assignment is to design seasonal banners for MyAACC and enter them into the contest for the Fall semester.  The college logos were provided and we are supposed to come up with two designs that capture our ideas of Fall.  I am not very happy with my first design.  I was going for a combination of back to school (hence the crayons) and apple harvest, but failed miserably with adding apples.  I think this option would benefit from animation, but we haven’t gotten that far yet.

I like the crayon strokes (rake) a lot, but I found that I couldn’t reproduce quite the same look when I tried to cover one of my botched apples that would not delete.

My next banner is still very much in progress.  I’m hoping to reinforce the idea of harvest by placing farm equipment on the various Autumn-colored hills.  I think it may benefit me to create some of the smaller details in illustrator and importing them.

Our lecture this week reviewed Fireworks terminology and drawing tools, but our textbook focus was texture.  Texture is closely related to a made up of various graphic design elements:

Point

Points have no size or dimension out of contex, but they are used to create the other design elements below.  Our textbook author, Jason Beaird, references an artist, Craig Robinson, who uses individual points to create art (http://flipflopflyin.com).

Line

Lines are made from two or more connected points and their directionality and style can evoke different feelings.

diagonal- movement, excitement, energy

horizontal- rest, repose

vertical- loftiness, spirituality

jagged- dangerous, frantic

90 degree angles- sharp, mechanical

curves/angles- expressiveness

A great site for examples of line variation is http://www.theidealists.com/home.

Shape

A shape is formed when two lines come together.  Geometric shapes, which are difficult to draw by hand feel technical or mechanical; while freeform shapes are informal and spontaneous.  Although HTML elements are inherently rectangular, any shape can be used as a background image.  We can also round the corners on web objects using CSS3.  These properties are browser specific and only work for newer browsers.  An example of a site that employs rounded corners is http://colly.com/.  Rotating shapes to create diagonal lines creates interest and movement in a page.  For example, http://www.ithacaevents.com/.  This can be accomplished by transforming the image before embedding it or using the CSS3 transform property (http://sxsw.com/interactive).  Using organic shapes can help to guide your visitors eye through the layout (http://tahoetechtalkconf.com/).

Volume/Depth

As we enter into the third dimension, volume and depth are implied by perspective lines, varied proportions, and light and shadow.  Gradients and drop shadows really add interest to basic web elements.  CSS3 allows for box-shadow and text-shadow properties (http://css3please.com).

Pattern

Patterns add richness to design elements.  The CSS background properties can be used to modify any element.  (background-color, background-image, background-repeat [-x, -y, no-], background-attachment, background-position).  An example of a webpage with a repeating background image is http://tileabl.es/.

These design elements, when used together effectively can create any style.  Examples:

nostalgic

http://brooksideresort.com/

http://www.cameronmoll.com/archives/000024.html

http://www.teamfannypack.com/

http://electricpulp.com/

clean & grainy

http://www.foundationsix.com/

http://newadventuresconf.com/

handcrafted

http://gomammoth.co.uk/

http://www.mariecatribs.com/

whimsical

http://www.clubpenguin.com/

minimal

http://daringfireball.net/

http://www.markboultondesign.com/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: