Print to Web Gal's Journey

Creating website in Flash using Actionscript 3.0

lafields — Thu, 31 Dec 2009 16:57:08 +0000

Here’s is a good link to creating a Flash website using Actionscript 3.0

http://www.pixologyinteractive.com/2009/02/building-a-simple-website-using-actionscript-30/

My site is up. Check out Visual Concepts and Solutions!

lafields — Tue, 15 Dec 2009 12:24:26 +0000

Well, I finally have my Web site up. I am very pleased with the outcome and I think that had to do a lot with my color change. I like the way it feels and I think it is inviting.

Please critique. I would love to see what you think. I plan to make a few tweaks and your comments will help with that process.

www.vcasdesign.com

I tried to do the original layout in Fireworks, but ended up hand-coding about 90% of the design. The other 10% was minor adjustments in Dreamweaver. Part of me still wants to play around with Fireworks. I think it may save me tons of time in the long run. So hopefully I will get to blog about that experience very soon.

Week 12

lafields — Tue, 17 Nov 2009 23:26:02 +0000

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

Week 11

lafields — Tue, 10 Nov 2009 01:18:43 +0000

Links to my comp designs:

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.

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 >>

Week 10

lafields — Tue, 03 Nov 2009 17:27:17 +0000

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

Week 9

lafields — Mon, 26 Oct 2009 17:03:51 +0000

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/

Week 8

lafields — Sun, 18 Oct 2009 05:43:04 +0000

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

Week 7

lafields — Sat, 10 Oct 2009 15:45:52 +0000

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

Week 6

lafields — Sun, 04 Oct 2009 04:22:23 +0000

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

Final Project Proposals

lafields — Tue, 29 Sep 2009 14:54:03 +0000

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.