Week 12

November 17, 2009

We get to work on our Web pages. Let’s see how this goes.

Here are some cool links for this week.

Web Site Host and a checklist.

See what they offer. Checklist.

Tech Support – via email, phone or both?
Limits on Tech Support – are there any?
Analytics – will they offer information on traffic, visitors, pages hit, etc?
Servers – Linux or PC?
Programming – what types of programming are allowed?
Email Accounts – how many? webmail or outlook compatible?

Browser Test.

test your web site at http://browsershots.org/

Killer Web Content

CSS Cheat Sheet -

How we really use the web

Estimating Time For A Project

Posted by lafields

Filed in Uncategorized

Leave a Comment »

Week 11

November 10, 2009

Links to my comp designs:

About Page

about page

Portfolio Page

I am trying to achieve a nice clean look but I think it may look boring more than anything. The structure is good. But it’s missing something. I added a side bar that could feature a design or advice on design…Perhaps even links to my my blog or facebook links.

portfolio page

Optional Page…this has a bit more life.

This design seems much more attractive. I tried to design this without thinking about whether or not I can actually make this a “real” web Site. I think I am afraid of designing Web sites and not being able to make them functional. So I let loose with this a bit…but can I make this work? HELP! I still feel a bit lost.

Articles:

Understanding CSS:
Understanding CSS

CSS Layouts:
CSS Page Layout Basics

CSS Zen Garden website:
A fantastic site that solicits designers from around the world to take the same content area, and using CSS, create a custom, original design. Amazing example of what can be done with CSS from a design standpoint – all of the page examples are the exact same code, with only the stylesheet changing. Review CSS Zen Garden, as well as some of the examples (click on the links on the right side of the homepage).
Estimating Your Time
A great article on estimating time for a project. Read it here >>

Posted by lafields

Filed in CAT274 Web Design

Leave a Comment »

Week 10

November 3, 2009

We have been doing a few tutorials to gain more knowledge about Fireworks and Dreamweaver.

I am working on the design of my Web site. I find it hard desiging my own Web site. I am constantly changing color and the layout. I am not sure what I am happy with. I want to make sure it will all come together and have a modern slick look but I want it to be functional too.

Link to Tutorials

From table-based to tableless web design with CSS

ARTICLE: Exporting CSS and Images in Fireworks CS4 – Review the article and screenshots for a better understanding of the export feature available in Fireworks CSS.
1. Introduction: http://www.adobe.com/devnet/fireworks/articles/export_css_images.html
2. New Options: http://www.adobe.com/devnet/fireworks/articles/export_css_images_02.html
3. Using the Export Feature: http://www.adobe.com/devnet/fireworks/articles/export_css_images_03.html

ARTICLE/TUTORIAL: Creating Standards Compliant Designs

Download the sample files:
http://download.macromedia.com/pub/developer/smolder_sample_fwcs4.zip
download and install the updated Fireworks scripts:
http://download.macromedia.com/pub/developer/css_export_fwcs4_v2.zip
Introduction: http://www.adobe.com/devnet/fireworks/articles/standards_compliant_design.html
Design with Semantics: http://www.adobe.com/devnet/fireworks/articles/standards_compliant_design_02.html
Using background image slices: http://www.adobe.com/devnet/fireworks/articles/standards_compliant_design_03.html
Creating standards compliant designs: http://www.adobe.com/devnet/fireworks/articles/standards_compliant_design_04.html

Posted by lafields

Filed in CAT274 Web Design

Leave a Comment »

Week 9

October 26, 2009

Hello. This is week 9 of my CAT 274 Web Design course. I just completed my proposal or project profiler. It was a cool project and I put a lot of work into the design and presentation. I am also learning more about Fireworks but still feel like there’s an entire course I need to take on this program to really benefit from it. I think it will really let me design the way I want to design for the Web.

Here are some links from the week 9 module.

* Rapid Prototyping >>
* Exporting CSS and Images >>
* Creating HTML Click-Throughs >>
* Creating CSS / XHTML Layouts >>
* Introduction to CSS (Part 1) >>

Designing with Grids:
http://www.webdesignerwall.com/trends/grid-and-column-designs/
CSS Typography:
http://www.digital-web.com/articles/css_typography/
Prototyping
http://www.adobe.com/devnet/fireworks/articles/cooper_prototyping.html

Greeking Generator – use this to create dummy text
http://www.lipsum.com/

Posted by lafields

Filed in Uncategorized

Leave a Comment »

Week 8

October 18, 2009

Links for Reading

Dao of Web Design – a timeless article from A List Apart
Blasting the Myth of Above the Fold – by Milissa Tarquini – a veteran of AOL, Milissa talks about her research in usability based on designs that extend beyond the fold of the traditional page.
Five Principles to Design By… – Good design is much more than making something look pretty, it’s all about problem solving … tried and true key principles.
Difference between ID and Class – A description of “hooks” – or IDs and Classes – used in CSS to build customization into markup.

Typography Resource:

www.ilovetypography.com

Articles about web fonts:

CSS and Typographical Choices

Reference: CSS Typography >>

Link to readings from “The Principles of Beautiful Web Design” on Imagery

Posted by lafields

Filed in Uncategorized

Leave a Comment »

Week 7

October 10, 2009

This week in my CAT 274 Web Design course we have been learning about typography thorugh our readings in, “The Principles of Beautiful Web Design.” I have a background print design, so most of the reading was very familiar. But it was nice to have the opportunity to review the topic and to see how typography is utilized on the Web. I really like some of the links that were mention. One in particular was http://typetester.maratz.com . This site allows you to play with Web fonts and their size, tracking, kerning, decoration, color, etc. and you can compare how they will appear on screen. It’s really cool if you want to test out some text to see if it fits the look you want to achieve. I really see it being a time saver for me. I am a very picky when it comes to fonts and their appearance.

This week we are also working on a design proposal. This is the first time I have ever had to complete one of these. It’s interesting and I think it’s good to know how to do one.

My Links

12 Rules for Choosing the Right Domain Name http://www.networksolutions.com/

Internet Corporation for Assigned Names and Numbers (ICANN)

GoDaddy – http://www.godaddy.com

Network Solutions – http://www.netsol.com

Complete list of acredited registrars, visit ICANN.

Search Engine Watch: http://www.searchenginewatch.com
Free SEO Tools: http://www.groovecommerce.com/ecommerce-blog/search-engine-optimization/20-nifty-seo-tools/
Search Engine Optimization: http://www.seomoz.org/
Search Engine Roundtable: http://www.seroundtable.com/archives/014550.html

Here are some good links from “The Principles of Beautiful Web Design” relating to typography.

www.bearskinrug.co.uk

Examples of Web sites that uses sIFR text:

www.abcnews.go.com www.mikeindustries.com/sifr/

www.wiki.novemberborn.net/sifr/ www.designbyfire.com/?=30

Online application that allows you to compare HTML type by font, size, and many other settings. Very neat.

http://typetester.maratz.com/

This is a great site to see how sans serif body text mixes with serif headlines.

www.coudal.com/

Need Fonts

Free Fonts

www.1001fonts.com
www.dafont.com/
www.wantedfonts.com/

Fonts for Sale

www.fontshop.com/
www.fonts.com
www.veer.com/products/type/
www.myfonts.com
www.itcfonts.com

Other Fonts produced by Artist and Foundries

www.astigmatic.com
www.bvfonts.com
www.fountain.nu
www.larabiefonts.com/
www.misprintedtype.com
www.pizzadude.dk/

List of HTML character entity references

www.w3schools/tags/ref_entities.asp

Posted by lafields

Filed in CAT274 Web Design

Leave a Comment »

Week 6

October 4, 2009

We are really learning more about CSS. I am loving it. Already have some experience so I am trying to get through the exercise with what I remember and I have been doing very well. I think I did a good job with the resume that we have to design with CSS.

We are currently trying to figure out what Web site we will design as the final project. I want to design a Web site for my business and I want it to include a portfolio section that will help sell my design for freelance. I am envisioning a site of a minimalist. Something with a nice clean open design and a font that keeps it fresh and modern.

My biggest challenge when designing Web sites is that I think too much about the technical part and get discouraged. So this time I will try my best to stay focus on the design and not worry about the technical part until later. I tend to want stuff that seems complicated, but it may not be as difficult as I think. So we shall see how this all goes.

Links that are important.

Sites with Navs that span across

Dynamic Drop Down Menu

Basic Graphic Menu

CSS Driven Menu

http://www.peta.com/

Breadcrumb Menu

http://www.peachpit.com/articles/article.aspx?p=664662

Animation

Articles

ARTICLES

Matt Brown - good website design.
- Click here for the article >>
Breadcrumb Navigation Increasingly Useful

Posted by lafields

Filed in Uncategorized

Leave a Comment »

Final Project Proposals

September 29, 2009

Visual Concepts and Solutions, LLC

This would be a personal portfolio Web site that will show the services that I provide as a graphic designer and Web designer. It will have a portfolio section that will illustrate the various type of work that I currently have completed. The content will be written by myself and any images that are needed will be produced through photography or the conversion of PDF files to JPEGS.

I would really like a Web site that would show my design projects. Rather than a business Web site, I want something markets me a professional designer in a less invasive way. This would be a Web site that compliments my business or main Web site. I would only like to show this site on a case-by-case basics…if that makes any sense.

After Thoughts: Well after week 6 of class and having further details regarding the project, I think I would like to really do the Web site for myself. I am a freelance designer p/t and I think it would really benefit me to have a complete web site with links to portfolio. So I hope this it feasible. I can discuss with teacher to see if she needs further details.

Phoenix Cultural Resources

I would also like to consider designing the Web site for Phoenix Cultural Resources. This is business that consults with lots of nonprofits in Baltimore and they need something to represent them on the Web.

Some of the services they offer is:

Consulting
Assessment
Professional Development and Training
Research and Analysis
Ethnographic research (Interviews, Focus Groups, Participant Observation)
Documentary Writing

I will be able to get text and images from the principle of the company. We are friends and we have actually already started some of the process and most of the text is ready. I can take headshots of the staff and use stock photography as well.

Posted by lafields

Filed in CAT274 Web Design

1 Comment »

Week 5

September 27, 2009

This week I am reading about texture and we are getting some information on Cascading Style Sheets (CSS). I know some basic CSS but I hope that the lessons will touch on this enough for me get a better understanding.

In the readings from The principles of Beautiful Web Design, I am learning about how to add texture to a web page. The author, Jason, really does a good job breaking down all the elements needed for good design. I also am starting to see how sites really come together. There are so many layers in a Web site and it’s really need to see the separate parts of a page and it’s properties. Seeing this depth is making me see how CSS plays an important role. CSS helps make these layers and sections. So I am guessing a page can have tons of rules depending on the design??? That is a question that I need answered. It would be awesome to see a Web page dissected into these different sections/rules to see how the designer made the overall design come together.

Links from this Week.

Module

Styling Text in the CSS Property Inspector >>

Webpagesthatsuck.com – by Vincent Flanders

http://www.vincentflanders.com/videos/gnn.html

Navigation Issues

Mystery Meat Navigation

10 Worst Web Site Uses of Navigaiton for 2008

nominations for 2009

Chapter on Texture

www.flipflipflyin.com
www.sixapart.com

Cool Corner Effects and Sliding Doors Links from book

www.w3.org/TR/css3-background/#the-border-radius
www.alistapart.com/customcorners2/
www.alistapart.com/articles/slidingdoors/
www.alistapart.com/articles/slidingdoors2/
www.html.it/articoli/niftycube/
http://tools.sitepoint.com/spanky/

www.fishmarketing.net
http://alistapart.com/articles/cssdrop2/
www.1976design.com/blog/archive/2003/11/14/shadows/
http://nubyonrails.com/
www.howtocreate.co.uk/fixedBackground.html
www.veerle.duoh.com/
http://winamo.com/skins/whatis.php
www.tatteredfly.com
www.cameronmoll.com
www.jasonantamaria.com
www.yesinsurance.co.uk/
www.letsplaymusicsite.com/
www.oreillynet.com/go/web2/
www.mozilla.com/
www.new-bamboo.co.uk/
www.sitepoint.com/books/photoshop1/

Comments on Bad Web Design

I will say that the first Web site listed is pretty bad. It’s http://www.teacherxpress.com/. Although the color palette is not a bad choice, it’s overused. All I see is orange and blue and it makes my eyes hurt. The site is very symmetrically and it has no focal point. And like the guy says, the links are overkill and outdated. WOW. There are hundred of links. There may be some valuable information on this site, but it’s poorly presented. Plus the gradients behind the links makes it hard to read as well.

One other site that I would like to comment on is the Sprint Widget site. Great graphics and I get the whole Widgets thing, but this is a bit much. Someone at Spring just had too much time and money to spend.

Posted by lafields

Filed in CAT274 Web Design, Uncategorized

Leave a Comment »

Week 4

September 17, 2009

This week we are learning Fireworks. I must admit that I wasn’t too excited about working in this program, but now I am very curious about it. It seems to be a combination of PhotoShop and Illustrator…the two programs that I work with most of the time. So Fireworks may have some new tricks that I can learn.

Here are some important links for this week:

Understanding Fireworks: View the video >>
Fireworks Interface: View the video >>
Importing and Exporting Images: View the video >>
Smart Guides and Tool Tips: View the video >>
Using Kuler Color Themes: View the video >>
Understanding Styles and Symbols: View the video >>

Interactive Advertising Bureau

Color Lecture

Review the Lecture >>

Color Matters

Website dedicated to color theory, with a great page on Color Symbolism, and some of the cultural and psychological aspects of color

http://www.colormatters.com/symbolism.html

Colorstrology

Pantone’s great website about the astrology of color

http://www.colorstrology.com/

Color In Motion

A beautiful website that describes the psychological aspects of color through motion.

http://www.mariaclaudiacortes.com/

Kuler Color

Review the video on using Kuler with Adobe products – View the video >>

Visit the Kuler website – http://kuler.adobe.com/

Top 10 Web Mistakes of All Time – Nielsen is famous for his Top Ten Mistakes in Web Design – this list is from 2007, but is still accurate and true to form.
Text Links – Nielsen talks about the research that’s been done with regards to the color and underline state of text links.