Week 12 CAT 274

I was consumed by finalizing my website comps.  For me that meant creating the content–text–that was represented by placeholders.  And that meant figuring out where that content resides and how it will be linked to the various pages.  Even though I had done and earlier flow chart–that was not adequate to explain the  content as it has evolved.

Since this is for my consulting practice–and the content doesn’t actually exist–yet–I had to spend quite a bit of time deciding what to feature first and what mix of content I wanted.  I developed a matrix of content to rotate in and out on the website–perhaps each month–but not less at this point.

I did not get to building templates since my first goal was to transfer my comp layout to CSS and HTML.  That didn’t go so well.  I tried several times–and things aren’t happening as directions say they will.  So I’ll wait for class to figure things out.  I don’t know if it’s me or the export feature.  In comments online–there are complaints about the export feature.

This website is going to take a ton of work from two perspectives:

1) generating all the content

2) getting the pages to work

I am going to investigate hiring someone to help me get the rest built(what needs to be done after completing the class assignment).  I want features like some sort of sharing capability–and that is beyond my skill level.  If I hire someone, I can spend time creating the content–and they can used their experience and expertise to build out the site–now that I realize how time consuming this will be for me and my limited knowledge and experience.  It’s not just using DW and that’s it!

Week 11 CAT274

Here are the links to key resources from Week 11 content in our classroom:

Understanding CSS

CSS Basic Page Layouts

CSS Zen Garden

Estimating your time

Creating templates in DW

Using templates in DW

Final Design Comps

Home page

Interior page

As of 11/8/09, here are my final design comps:  the home page and one interior page for my consulting practice’s website.

The class critique definitely improved the final product, in my opinion.  I am much happier with having less on the home page.  It is hard for me to work on this website that is for my own business and stay objective–so the class critique was of great value.  The key points I got out of the class critique were:

1. there was no one focus
2. they couldn’t tell what the site was for
3. there was too much going on (supports points 1 and 2)
4. needed to tie the red logo in somehow–or change the color of the logo

To address the “confusion” issues (points 1 and 2), I removed items, added a statement about what the site is for, changed the photo and created a much stronger hierarchy of information.  I think that each section of the design now fits in a hierarchy–based on what I want the user to focus on first.

The photo was a huge problem.  I was having a very hard time finding a meaningful photo that conveyed something about what this consulting practice does to help nonprofits and yet not be totally boring–such as showing a graph or “fork in the road” or and arrow pointing both ways.  I found that I wanted to have a person in the photo to give it life–but I definitely did not want one of those trite photos of everyone around the conference table at a meeting.  I had “clipped” many photos from Getty–and finally resorted to asking my husband to help me (I had been asking my friends all along, but they didn’t have the chance to see all the possibilities I had saved from the Getty site).  My husband made suggestions–similar to those I had thought of (Fork in the road, etc), but we both agreed those photos were “dead.”  He noticed the one I had clipped of the runner running towards a mountain.  He thought it speaks to what the consulting practice addresses–helping organizations achieve their goals on what can be a grueling run to the top–and he noticed the arrow on the rock wall.  On the original photo–that arrow is yellow.  He suggested changing it to red to match the logo.  To me–that is the touch that makes this photo work.   Without the arrow, it is too cliched.  With the arrow, not only does it compliment the logo–but it compliments the “>” that is part of the logo.  I decide to make the runner’s shirt match another color in the website.  On the original photo, the shirt is orange.  When I buy the final photo, I hope to do a much better job replacing the color of the runner’s shirt and the arrow.

The photo–as much as I was fighting it–does affect what color scheme looks best–as does the color of my logo.  When I ended up with the final color scheme, I felt is was functional–it works.  It doesn’t send me or inspire me as a color scheme–but it makes all the parts work together.  It also doesn’t totally fit one of my early critieria which is to have a warm color scheme.  While this color scheme may not be as warm as some others, I don;t think it is “cold” feeling–so I am OK with it.  When I think back about where this design has been and where it ended up–I think of what Jennifer told us in class:  good design is not necessarily good art.  This is not a work of art, but I think if functions well now.

To address the color tie-in with the logo, I tried the logo in another color and decided I like the way the red “pops.”  So then I tried a thin red line above the footer.  That was fine–but decided to add the other thin red line at the top.  On the interior page, I originally just carried over those two thin red lines.  After many attempts at various colors, I finally arrived at using red in the “subtitles” on the interior page.  And–due to the red and the photo changes–I ended up going through many iterations of the colors again–and ended up with a set of colors I didn’t expect.  But I think they work.

Week 10 CAT274

Again–what a week.  Now that we are working on the Final Project websites (in my case–my own website for my consulting firm), I want to spend more time working on that, but there is still plenty of other work to do.  Obviously we need to do that other work or we can’t build our own sites.

This week, we did work on exporting from FW to DW.  One of my exercises didn’t work–and I’m wondering if it might be a FW issue.  In the articles there was a response that said the export feature was not working well.

Ironically, I ran out of memory this week.  If I keep working with these applications I may have to upgrade.

Here are the links from the classroom for Week 10:

From tables to CSS

Intro to exporting from FW to DW

New options in CS4 for exporting

http://www.adobe.com/devnet/fireworks/articles/export_css_images_03.html

http://www.adobe.com/devnet/fireworks/articles/standards_compliant_design.html

http://www.adobe.com/devnet/fireworks/articles/standards_compliant_design_04.html

Week 9 CAT274

What a week this was.  I must have put in 24 hours outside of class.  Of course much of that was working on the redesign of my consulting website which is the website I am doing for the Final Project.

I am getting use to Fireworks and actually enjoyed doing my comps in FW versus PS.  I loved using Kuler to choose my color scheme.  The colors are so much nicer than I would choose if I simply eye-balled it.  It will be interesting to see what the photos cost to use.  I am actually starting to feel as thought I might be able to create a website.  But there is so much to learn.  That is the one thing I have really learned in this class:  how much I don’t know and how much there is to know.  Did I say that last week?

Here are the links to key resources from this week.

From the Dreamweaver test (DW-CIB): on page 144-about css rules

Understanding Specificity

From our classroom

Designing with Grids

CSS Typography

Prototyping

Source for Greeking

Rapid Prototyping – this did not play

Exporting CSS and Images

Creating HTML Click-Throughs

Creating CSS/XHTML Layouts

Introduction to CSS (Part 1)

Another good source are the instructions for the two-part digital JENN.  See the binder of hard copies I have been keeping.

 

 

Cat 274 Week 8

Wow–this was a big week.  We are now starting to learn how to design webpages and websites.  The Adobe videos (links are below) provide a lot of tips on how to use the various Adobe applications with each other: what works best in what and how to use them at the same time.  Fireworks is looking like it may be a preferable tool for designing webpages over Photoshop.  I like that you can make a “master” page–like in Power Point–the slide master–so elements are repeated from page to page.

I found the Project Profiler project to be excellent.  I was surprised at how much better my ideas became (for the redesign of my own website) as I went through and answered each question–with great seriousness (not just a cursory answer).  The only problem is, my ideas for my website redesign are getting bigger and bigger–more and more functionality.  I’ll have to earn some money before I can move to those next stages–that will cost more than my free time.

Here are links from the Week 8 module on AACC’s Angel for CAT 274-Fall 2009:

Designing websites and pages:

Dao of Web Design – bottom line,, design adaptability into your pages (fonts, colors, margins et al)

Blasting the Myth of Above the Fold

Five Principles of Design

Difference between ID and Class

Typography resources

Overall resource – blog

Anatomy of a Web Font

Code Style’s Combined Font Survey Results

Glossary of Font Terms

CSS Typography

Using the Adobe Applications for Designing Websites

The Complete Design Process – about sharing between the apps

Information and Interaction Design – more specific to designing wireframes in FW

Quickly Transform Photoshop Layouts – moving from a page design in PS to FW to slice it and into DW to tweak it

Dreamweaver Integration – refers to the editing functions between the apps and also a reminder to optimize various file types

CAT274 Week 7

I feel like we accomplished a lot this week:  we learned how to make “buttons” and animations.  We finished our AACC Fall Banners and created a new one for the Global Market to be held at AACC. The reading on typography was great: the author is right–I love typography.  And now we are learning about how to create websites that will be ranked more highly with search engines.

The more time I spend in this class, the more I appreciate the great work I see both online and from my classmates.  While all of the new software makes it easier–it still takes time, effort, lots of thoughtfulness, paying attention to minute details, and creativity.  Now that we’ve added using color to the mix–things are starting to come together for me. Well…

Here are links to the articles and websites referenced in the modules for Week 7:

re: Global Market – sites related to the cause

SERVV International

Alternative Gifts International

re: Domain name registration:

12 rules for Choosing the Right Domain Name

Network Solutions

GoDaddy

Register

ICANN

re: Search Engine Optimization (SEO):

Search Engine Watch

Free SEO Tools

Search Engine Optimization blog

Search Engine Roundtable

Search Engine Placement Tips article

re: Web design ideas

8 Web Design Tactics to Help You When Your Stuck article

CAT274 Week 6

This seems like a big week in that we started working with CSS.  There is a great site that shows the power of CSS.  It was mentioned in the Beaird book on page 25.  It would be cool if I could ever get good enough to enter a style sheet for this site.

Other key sites from this week are:

Optimizing Animated GIFs

GIF Animation Shareware programs

Matt Brown’s article on Good Websites which has some additional links at the end including

templates for websites

and an article on breadcrumb navigation

CAT274 Week 5

This week we have worked with images, including stock photos.  In particular we have learned about compressing them for use on the web.  Remember to compress in steps for a better finished quality.  Also–a note to me:  remember to “unlock” the “F” keys to view my HTML pages via a browser–but then lock it again to be able to use the PrntScrn feature and collect screen captures.

Here is a list of the links that are in the Course module for this week:

see page 72-73 of Principle of Beautiful Web Design (Beaird) for links about creating curved corners on boxes and page 96 for a book on using Photoshop for web design

Here’s a link to using CSS in Dreamweaver
And here are links to Vincent Flanders various resources on Bad Web Pages
Web Pages That Suck
Web Pages That Suck videos

Mystery Meat Navigation

10 Worse Site in 2008 for Navigation

Nominations for 2009

Final Project

There is no doubt that what I want to do for my final project is revamp my own consulting practice’s website.  It is one of the many reason’s why I am taking this course.  The name of my consulting practice is Market Strategies Group.  I am the sole owner and employee.

my consulting website

About my practice:

My consulting practice focuses on providing strategic marketing to nonprofit organizations.  This can range any where from a Strategic Plan to a project-specific plan, marketing plans at all levels and execution of specific projects.  For example, I just finished a project for a Washington-based association that, in addition to serving their members, also sells services to other organizations.  I worked with their on-staff marketing personnel to develop a customer-relationship building campaign.  The goal was to provide added value on a regular, consistent long-term basis to these customers so that the next time they need the kind of assistance my client can provide–they think first of my client.

About the current website:

Probably 4+ years ago, I designed (using Power Point) the look and feel and layout of this site and I wrote the copy. Sandy, a web designer in Maine, took my layout and text and created the actual website, purchased the URL for me ( I own it) and arranged hosting for it.  She knows I want to take over the site and is simply waiting for me to give her some instructions.  The site is so inactive that Sandy doesn’t even charge me hosting fees any more.

I don’t derive any clients directly from this site.  All of my clients come from referrals and I keep the site only as a reference tool (a brochure).  It’s not even up-to-date with my client projects.

Website ideas:

Here are some of my goals and ideas for the site.  I’ll make sure I include at least two low functionality ideas that can be done with my limited knowledge and resources:

1. Boost the user experience in order to engage them more – my ultimate goal is to make this site of greater value to clients and potential clients.  I would like to make it become a resource for them–and for me (that could be way in the future–ways of gathering customer data etc).  The priority would be that the site is a resource and the marketing of my firm is secondary i.e. the value I can offer becomes more apparent by the value offered from the site itself.
2. Add sample projects.  Most organizations do not fully understand the type of work I do (which is strategic in nature) so I want to try to make what I do more tangible (use visuals of typical documents or outcomes clients might be familiar with).
3. As far as an overall look and feel:  the current site takes off on the Google (clean feel) or the Web2.0 feel that Beaird mentions in our text–except there are no gradients!  I have always loved lots of white space and bright colors.  Some people told me it wasn’t serious enough for my business, but that was intentional.  I wanted to stand out and I wanted the user to have a good visual experience when they came to the site–one that conveyed that I (Jeanne, the consultant), would be up-to-date on the latest marketing thinking, organized, dependable and easy to work.
4. I have asked several business associates (and some friends) to critique my current website in preparation for this project.  My plan is to generate content from my own consulting work, from materials I use in the classes I teach online and from expert sources.  For images, I will use images that I create myself as well as possible stock photos from Getty or another stock image house.  Money will be the limiting factor for images.

That’s it.  What would really be great is if anyone reads this–that they take a look at my existing site and leave me some feedback on changes they think I should make.  Thanks ahead of time for that!

here is the link again