Week 7 Summary

October 14, 2012 at 9:57 pm (Web Design)

This week our focus was animation.  We watched two class lectures on animation for the web and elements of design:

Lecture 1

Lecture 2

We also read our textbook The Principles of Beautiful Web Design chapter 1 to understand more about layout and composition for our final projects.  The design process involves:

Discovery

Exploration

Implementation

In good designs :

Web Page Anatomy

  • containing block
  • logo
  • navigation
  • content
  • footer
  • whitespace

Grid System Links

http://960.gs/

http://10k.aneventapart.com/

Balance

http://dlanham.com/

http://jasongraphix.com/

Asymmetrical Balance

http://www.steinway.com/about/

Unity

Proximity

Repetition

http://sketch.odopod.com/

Emphasis

Placement

Continuance

Isolation

Contrast

Proportion

http://sxsw.beercamp.com/

Common Layouts

Left-column navigation

http://www.porsche.com/usa/models/911/

Right-column navigation

http://www.southcarolinablues.com

Three-column navigation

http://www.thinkgeek.com

Finding Inspiration

http://unmatchedstyle.com/

http://cssdrive.com/

http://designmeltdown.com/

http://patterntap.com/

http://developer.yahoo.com/ypatterns/

Creating a Morgue File

Part of our final project assignment for this week was to begin a morgue file-collecting various color schemes, textures and design ideas.  You can also capture screenshots using http://www.realmacsoftware.com/littlesnapper/.

Trends

Navigationless Magazine Style

http://designinformer.com/

http://thebolditalic.com/

http://52weeksofux.com/

Expansive Footers

http://showandtellsale.com

Bare Bones Minimalism

http://analog.coop/

http://khahoang.com/

http://www.underconsideration.com/brandnew/

http://www.sagemediari.com/

Fixed, Fluid or Responsive Layouts

Fixed-width:

Fluid-width:

http://www.designinfluences.com/fluid960gs/

Responsive:

http://www.alistapart.com/articles/responsive-web-design/

Screen Resolution

http://www.w3schools.com/browsers/browsers_display.asp

Banner Projects

Our Lynda.com tutorials included some review and covered a couple different ways to apply animation to your projects.  This was all pretty straight forward and I had no problem with the practice exercises, but unfortunately, when I try to animate an object within my project, all of the other layers disappear until the animation is completed.  I’ve tried creating the animation outside of the project and bringing it in, but the same issue occurs.  I’m hoping to figure this out soon, but for now I’ve just made adjustments to my banner project based on the critiques from early this week.  I smoothed out the tiling background, added some dead leaves and made my font larger.  I also centered the text on the smaller banner.

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: