Feeds:
Posts
Comments

Week 9

This week we started to think about usability, and also common mistakes designers make when trying to create a webpage.  Web coders that come from a design background usually create a webpage around there design.  That, most of the time, isn’t pracitcal and will actually create bad websites.  Most of the reading and lectures were centered around disecting good web practices and looking at CSS.  One of the most compelling articles I read used Dao philosophy to explain how Web designers think and look at the web.  The is the Dao principle he used :
“Well established hierarchies are not easily uprooted;
Closely held beliefs are not easily released;
So ritual enthralls generation after generation.”
Tao Te Ching; 38 Ritual
He used this an example of how  we use old ideas to create new ones.  Web Design is highly influenced by its predecessor Print Design.  Since the web is still very new, we often times find the influence of print design, over time the web will find its own sense of design and operations.  We’re starting to see that through CSS and Javascript.  It will be exciting to see how it evolves over our lifetimes.
Here are the links to several other articles we read:
For lectures this week we looked at the complete design process and how to incorporate fireworks and photoshop to make mock-ups of a site.   Most professional designers make complete interactive websites with just html and then use CSS to add all of the design elements later.  The importance of the mock-up is usablity.

Week 8
This week we started to think about usability, and also common mistakes designers make when trying to create a webpage.  Web coders that come from a design background usually create a webpage around there design.  That, most of the time, isn’t pracitcal and will actually create bad websites.  Most of the reading and lectures were centered around disecting good web practices and looking at CSS.  One of the most compelling articles I read used Dao philosophy to explain how Web designers think and look at the web.  The is the Dao principle he used :
“Well established hierarchies are not easily uprooted;Closely held beliefs are not easily released;So ritual enthralls generation after generation.”Tao Te Ching; 38 Ritual
He used this an example of how  we use old ideas to create new ones.  Web Design is highly influenced by its predecessor Print Design.  Since the web is still very new, we often times find the influence of print design, over time the web will find its own sense of design and operations.  We’re starting to see that through CSS and Javascript.  It will be exciting to see how it evolves over our lifetimes.
Here are the links to several other articles we read:
http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/http://www.alistapart.com/articles/dao/http://bokardo.com/archives/five-principles-to-design-by/
For lectures this week we looked at the complete design process and how to incorporate fireworks and photoshop to make mock-ups of a site.   Most professional designers make complete interactive websites with just html and then use CSS to add all of the design elements later.  The importance of the mock-up is usablity.
http://tv.adobe.com/watch/fireworks-tips-and-tricks/the-complete-design-process/http://tv.adobe.com/watch/max-2008-design/common-mistakes-print-designers-make-on-the-web/

Advertisements

Week 8

Week 8

This week in our reading we were diving back into CSS.  We found out the main differences between ID and Class tags and how they relate to CSS and HTML.  Talking about style inevitably led us to Typography, this is important.  If people can’t read your web page, then what’s the point, really?  It gave us food for thought on line spacing, and height and how it correlates directly to how fast a person can read and process the words.  It also gave us warnings about of the 100,000 different fonts available now most people only have up to 40 installed on there the computer.  Which translates: “Just because we have it, doesn’t mean everyone else does,” so we need to be mindful of that.

The Difference Between ID and Class

http://css-tricks.com/the-difference-between-id-and-class/

In the book “The Principles of Web Design,” we continued with typography.  They’re five categories of font-families: serif, sans-serif, cursive, fantasy and monospace.  We have literally thousands of variations but when coding font in CSS we can use these categories as the last resort for what the browser should display.

To get around using fonts that people don’t have installed on their operating systems we have new technology combing flash and javascript called sIFR.  I’m just trying to understand the concept myself of how this works, so I can’t explain it to you at this moment.  But, it is out there and people are using it.

Finally that chapter moved into the mechanics of what is type for instance: x-height, ligature, baseline, cap height, crossbar, and bowl.  This takes me back to graphic design fundamentals, which is one of my favorite classes taught by probably the best teacher AACC has to offer, and probably deserves a raise…hint hint, Admin staff at AACC!

Finally we looked at some place where we can buy fonts at:

www.fontshop.com

www.dafont.com

www.wantedfonts.com

www.veer.com/products/type

www.myfonts.com

www.itcfonts.com

CSS Typography

http://www.digital-web.com/articles/css_typography/

www.ilovetypography.com

http://articles.sitepoint.com/article/anatomy-web-fonts

http://www.codestyle.org/css/font-family/sampler-CombinedResults.shtml

http://www.digital-web.com/articles/css_typography/

In the Lynda.com tutorials we looked the structure of a webpage and what to think through when designing for the web.  The basic skeleton of a page is:

Title, Header, Body, Sidebars, Footer

Next we need to think of the content or Information Hierarchy.  Information hierarchy is going from most important to least, general to specific.  This is how we naturally read web pages, and how we should lay out information.

Week 7

This week we worked on animating GIF files and learning about how to create pages that can be easily found on web search engines.

A couple ways to make a site been found in search engines is using key words or phrases in your titles of the page, and also in what are called META tags.  Although the words and phrases wont be seen on the page, only in code, they will be picked up by a search engine.

There are a couple types of search engine out there the first being a Crawler, the second being Human, and the third Hybrid.  Google is a great example of a Crawler, MSN is a Human.

http://www.webreference.com/dev/gifanim/ Optimizing Animated GIF’s

http://www.tips-tricks.com/k_gifanimation.asp GIF Animation programs

Looked at Top Level Domain (TLD), how to acquire, why they are important.  A TLD is usually the last part of a website address, example .com, .biz, or .gov.

12 Rules for choosing a domain name:

  1. Brainstorm 5 top keywords
  2. Make the name unique
  3. Only choose dot-com available domains
  4. Make it Easy to Type
  5. Make it easy to remember
  6. Keep the name as short as possible
  7. Create and fulfill expectations
  8. Avoid Copyright infringement
  9. Se yourself apart with Brand
  10. Reject Hyphens and Numbers
  11. Don’t follow the latest trends
  12. Use an Ajax Domain selection tool

Use Godaddy.com to find TLD

Some search engine links that have info on how to design sites specifically for search engines.

www.searchenginewatch.com

http://www.groovecommerce.com/ecommerce-blog/search-engine-optimization/20-nifty-seo-tools/

http://www.seomoz.org/

http://www.seroundtable.com/archives/014550.html

http://www.seomoz.org/blog/web-design-tactics Web Design tactics to help you when your stuck!

In our practice tutorials for the week we are learning how to create animated GIF files. Here’s a link to what I worked on: http://bcts-potomac.aacc.edu/CAT/cat03/Week%207/week7.html

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.

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

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.

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/