Feeds:
Posts
Comments

Archive for March, 2010

Ok, so here are two very similar comps that have a little different color scheme.  These are very rough and to be honest I don’t like either of them.  I’m having a hard time translating the ideas in my head to the web.  Hopefully over the next couple of week i’ll be able to flush out some more ideas and get some better looking material.

Comp One:

bcts-potomac.aacc.edu/CAT/cat03/Final%20Project/Blue%20One.jpg

Comp Two:

bcts-potomac.aacc.edu/CAT/cat03/Final%20Project/Brown%20One.jpg



Advertisements

Read Full Post »

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/

Read Full Post »

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.

Read Full Post »

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

Read Full Post »