Feeds:
Posts
Comments

Archive for February, 2010

Week 6

This week we’ve worked with Cascading Style Sheets.  We updated our resumes using CSS, it was a great easy way to get our hands wet with this tool.

The next two links look at usability and navigation for webpages.  The breadcrumb navigation is a quick easy way for people to see where they have already been:

http://www.useit.com/alertbox/breadcrumbs.html

http://www.useit.com/alertbox/familiar-design.html

Were diving more and more into the final project.   I believe I’ll be working on a portfolio site for myself.

Read Full Post »

Week 5

This week in our Beautiful Web Design reading we looked at adding texture to a website.  It started off with the basics of what a pixel is, worked our way up to the definition of a line and then opened up the doors to Volume and Depth, looking specifically at Perspective and Proportion…elements that can make a website look spiffy.

Some websites we looked at in the book were:

http://www.alistapart.com/

http://www.vertexwerks.com/tests/sidebox/

htttp://www.html.it/articoli/nifty/

http://www.spiffycorners.com/

We also explored background patterns as opposed to using a straight solid background color for websites.  Although some  of these patterns and textures used as examples were pretty aweful, and remeniscent of the late 90’s, it is food for thought.

This week we were also introduced to Cascading Stylesheets.  Which are essentially reference files for Html code that keeps all webpages uniform.  It saves time, file space, and makes correcting or changing a h1, background colore very quick.  We also looked at creating styles as Inline, embedded, External, and imported links.

Heres a CSS dreamweaver link.

http://tv.adobe.com/watch/learn-dreamweaver-cs4/styling-text-in-the-css-property-inspector

One of the best design elements in a website are the photos.  Here are a few links to sites that specialize in photos you can buy:

Here are a few new links to websites that critique or show what not to do:

http://www.useit.com/alertbox/9605.html

http://www.useit.com/alertbox/20040510.html

Read Full Post »

Final Web Project Ideas

So I have two options for the final web design project I want to consider:

Option One:

Personal Portfolio Website.  This will showcase my video editing, and motion graphic design work.  I have a lot of current motion graphic work, I don’t have a logo or photos.

Option Two:

I work for a non-profit camp and conference center called Wabanna.  They could use a revamped website, they have a lot of digital content and photos.  They don’t have a clear vision for what they want, and they are talking about rebranding the design sometime in  late summer or early fall.

Read Full Post »

Week 4

This exciting week in web design we studied color, bad websites, and some more fireworks and xHtml tutorials.  Awesome!  So in our “Principles of Beautiful Web Design,”  we took a look at the meaning of color…or more importantly how colors can loosely convey meaning.  Here are a few:

Blue: Intelligence, Calm, Faith

Green: Nature, growth, freshness

Yellow: Happiness, Energy, Active

Orange:  Sunshine, Enthusiasm, Creativity

Red: stimulating, blood pressure, passion

One of the more intersting reading assignments were to read Vincent Flanders “Web Pages That Suck!”  Vincent has made living off of critiquing websites.  I think it’s safe to say that its easier to learn from our mistakes than what we do right, well at least for me.  He makes top ten list each year of the worst websites, and sends out warnings to designers, of what not to do.  It’s been very beneficial for me, chech it out at Webpagesthatsuck.com

Finally here are some video links for fireworks tutorials and the adobe kuler feature!

http://tv.adobe.com/watch/learn-fireworks-cs4/getting-started-01-understanding-fireworks/

http://tv.adobe.com/watch/learn-fireworks-cs4/getting-started-02-the-fireworks-interface/

http://tv.adobe.com/watch/learn-fireworks-cs4/getting-started-04-smart-guides-and-tooltip/

http://tv.adobe.com/watch/learn-fireworks-cs4/using-kuler-color-themes/

http://tv.adobe.com/watch/learn-fireworks-cs4/understanding-styles-and-symbols/

Read Full Post »

Week 3

We are getting down and dirty with this weeks lessons.  We’ve finally started reading out of your official text book “The Principles of Beautiful Web Design.”  To summariz what I’ve read is little hard to do because so much was covered, but I will try…On a side note I’m listening to Brian Eno’s “The Big Ship,” while writing this post…you should too, it was recently featured on “The Lovely Bones,”  Peter Jacksons first directorial film since King Kong.
Back on topic, so the book talked about some basic design principles and then addig a few notes on how it applies diretly to the web a few of the key headings were Unity, Balance, Emphasis,  Types of Navigation.  It also gave several websites you can use as inspiration here are a few:

http://www.csszengarden.com/

http://www.cssbeauty.com/

http://www.stylegala.com/archive/

By the end of the chapter were getting into less theory and more into the nuts and bolts of web pages talking about screen resolution and the like.

The tutorials in Dreamweaver this week dealt with using images on the web specifically JPG, GIF and PNG’s.  We learned about the differences such that JPG are used mainly for photos, GIF for vector artwork and PNG is the best but most unsupported medium.

To end the week we were introduced to Fireworks, which is a program that combines photoshop and illustrator.  Fun Times.

Here are few links to some other videos to watch:

http://tv.adobe.com/watch/learn-dreamweaver-cs4/getting-started-05-styling-text/

http://tv.adobe.com/watch/learn-dreamweaver-cs4/getting-started-04-adding-text-and-images/

http://tv.adobe.com/watch/learn-fireworks-cs4/managing-design-suite-workspaces/

http://tv.adobe.com/watch/learn-fireworks-cs4/getting-started-01-understanding-fireworks/

http://tv.adobe.com/watch/learn-fireworks-cs4/getting-started-02-the-fireworks-interface/

http://tv.adobe.com/watch/learn-fireworks-cs4/importing-files-into-fireworks/

Read Full Post »