Final Day (Reference Links)

8 12 2009

Galleries

Dynamic Drive ( http://www.dynamicdrive.com ) is a wonderful resource for building dynamic content on your pages.

Below is a selection of code and javascript that you can download to create an overlay gallery. This allows you to setup thumbnail, or smaller images on your page, that when clicked, open a larger image along with a caption, and darken the page behind:

http://www.dynamicdrive.com/dynamicindex4/lightbox/index.htm

Highlight Navigation

If you want to include a “You are Here” feature in your navigation, the tutorial below is a great place to start. This allows you to incorporate a script that highlights the button on the navigation bar that indicates which section of the site you’re in:

http://www.creativepro.com/article/dreamweaver-how-create-you-are-here-navigation-links

Social Networking: Taking Part in the Conversation

Once you have a website, it’s important that you continue to explore ways to promote your website. Whether you are a community building website, an ecommerce store (ie, you are selling a product) or a portfolio website, letting people know you are out there is important.

There are a number of ways you can use Social Networking to connect with peers, colleagues, customers and much much more. Below are just a few:

Facebook

More than just a way for college kids to connect, Facebook has become an integral marketing tool for most organizations. Sign up, create an account, and use the PAGES feature to announce your website. Collect “fans” for your website, post information and press releases, images of new work, etc.

LinkedIn

A hugely popular networking tool, use this to connect with former colleagues, current coworkers, friends, family members, etc. This allows job searches, postings for events, and much more. Create a profile, and use the new Sites feature to market your website!

budURL

A URL shortening service, budURL also allows you to track clicks as your site visitors click on the specially organized links that you create. Provides statistics that can show you how often people are visiting and clicking on certain website links, as well as links posted on Facebook, Linkedin, or via Email.

Twitter

Twitter is an evolving phenomenon, that is an alternative way to stay in constant contact with associates, business partners, friends and more. You can even use Twitter to track keywords, client websites, or competitors, using Summise.

Blogs

You can choose to maintain your blog and use it as a source to promote your website content, products, services, client work, etc. Blogs are only as good as the content you add to them, so you might start out with setting up a Google Blog Reader account, where you can track blogs and real time news, and get a feel for how other people are using blogs to promote everything imagineable.

Linked InEcommerce Options for Small Businesses

LinkedIn is slowly evolving into an extremely useful and robust business/marketing tool. You can really fill out your profile to include so many promotional elements – your photo, links to your website, blog, RSS feed, portfolio, etc, recommendations, etc..

LinkedIn has added new applications recently – one of which allows you to display links to your recent blog posts and those of your connections. There’s also a great application for promoting and inviting others to events (gallery openings, design shows, speaker events, etc).

You can also optimize your profile for search results. Google will spider your profile, but won’t show more than your name in the results.

For LinkedIn results, however, you want to make sure your headline, summary, and experience are well-optimized. Below is a post on a local LI user’s blog about it, which will give you some tips:

Apart from your profile, LinkedIn provides you with ample opportunity to demonstrate your expertise by giving free advice via the Answers section as well!

http://thecaffeinatedblog.typepad.com/the_caffeinated_blog/2008/08/unlock-the-full-potential-of-your-linkedin-profile.html
 

Selling products online can be a tricky side of the business. Merchant accounts, transaction fees, privacy issues, secure transactions, etc. Custom solutions can be expensive and time consuming so if you are just starting out, you might check out some of these basic storefronts:

Breadcrumb Navigation

WebMonkey was a long-standing resource in the design and coding community. It’s now a Wiki site, where programmers and designers collaborate and collect information to share.

http://www.webmonkey.com/tutorial/Build_Dynamic_Breadcrumbs_With_JavaScript_

Menus: Dropdown Navigation

Dynamic Drive is known for it’s extensive list of customizable menu systems. When you peruse the options, you want to make sure that the menu is cross-browser and cross-platform compatible, is controlled by CSS visually speaking and can easily degrade on older browsers. Lots of information here:

http://www.dynamicdrive.com/dynamicindex1/indexb.html





Week 11

13 11 2009
  1. Understanding CSS:
     Read Understanding CSS >>
  2. CSS Layouts
    Read “CSS Page Layout Basics” >>
  3. CSS Zen Garden website:
    CSS Zen Garden
  4. Estimating Your Time
    Read it here >>

VIDEOS

Templates:

http://www.adobe.com/designcenter/video_workshop/index.html?id=vid0157

http://www.adobe.com/designcenter/video_workshop/index.html?id=vid0158

 

 

//





Final Design Comps

11 11 2009

I am not convinced that I like the final results. I really liked some elements of  the orginal designs and tried to keep the overall theme and layout the same but I attempted to incorporate everyone’s feedback into the revised comps. I think that it will improve in time.





Week 10

3 11 2009

From table-based to tableless web design with CSS

Exporting CSS and HTML directly out of Fireworks CS4

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

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

 





Week 9

25 10 2009
  • 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 website to create “dummy” placeholder text, or “greeked” text to use in your designs or storyboards
    http://www.lipsum.com/

    VIDEOS

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




  • Week 8

    20 10 2009

    Articles

     Type for the web

    www.ilovetypography.com

    Anatomy of a Web Font >>

    Code Style’s Combined Font Survey Results >>

    CSS Typography >>
    Glossary of Font Terms

     Photography Sources:





    Week 7

    12 10 2009

    Typography References

    Font Websites

    Free Fonts

    Fonts for sale

    Recommended by Jason Beaird

    Designing for Search Engine’s – RESOURCES

  • Search Engine Watch: http://www.searchenginewatch.com
  • http://searchenginewatch.com/2168021
  • 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
  • Domain Name Advice

    Web Design Advice





    Week 6

    5 10 2009

    Good Web Design by Matt Brown

    Bread Crumb Navigation by Jakob Nielson

    Adobe Labs – Spry Resources

    Navigation Examples

    Examples of Traditional Navigation Styles

    News / Column based navigation :

    Dynamic Drop Down menu navigation:

    Basic Graphic Navigation:

    CSS-driven text navigation:

    Breadcrumb:

    Annimation Techniques:





    Final Project Proposals

    27 09 2009

    Concept 1: Redesigned Chesapeake Bay Roasting Company Website

    The Chesapeake Bay Roasting Company brand was developed and launched in February 2002 by myself along with 2 other primary business partners. The sole focus for many years has been food service sales but there has been a recent shift to bolster our retail image through marketing and packaging efforts. I would like to develop a pilot retail site that would introduce an entirely new look and updated content.

    I have access to a tremendous amount of images both custom and stock as well industry publications, brochures, etc.

    Concept 2: Hair Stylist Professional Website (for a friend)

    A close friend of mine has recently expressed interest in possibly putting together a website for her hair styling business that she manages from home. The main focus would be to outline the products and services she specializes in and communicate booking times with existing and new clients.

    I would be limited primarily to stock images and having to publish content provided to me by my friend.

    Note:

    I have to be honest. Concept 1 is the one that I am really shooting for. I can provide further details after drafting up an outline.





    Week 5

    27 09 2009

    CSS

    Styling Text in the CSS Property Inspector >>

    Webpagesthatsuck.com – by Vincent Flanders

    http://www.webpagesthatsuck.com/videos.html

    Bad Navigation:

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

    http://www.webpagesthatsuck.com/mysterymeatnavigation.html

    Annual Suckers:

  • Review the 10 Worst Web Site Uses of Navigaiton for 2008.
  • Review some of the nominations for 2009.
  •  

    Beatiful Web Design, Chapter 3: Texture (by Jason Beaird)

    Rounded Corner Techniques

    Cool Textures and layouts








    Follow

    Get every new post delivered to your Inbox.