in julia's words

Week 14

Information from Week 14

Resources
Wonderful resource for building dynamic content on your pages: http://www.dynamicdrive.com/
Overlay gallery: http://www.dynamicdrive.com/dynamicindex4/lightbox/index.htm

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

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

Menus: Dropdown Navigation: http://www.dynamicdrive.com/dynamicindex1/indexb.html

Social Networking
Facebook, LinkedIn, budURL, Twitter, and Blogs

Ecommerce options for Small Business
Google Checkout – General Ecommerce Storefront: http://storegadget.googlelabs.com/
Yahoo! Store – General Ecommerce Storefront: http://smallbusiness.yahoo.com/ecommerce/
Network Solutions Ecommerce Packages – General Ecommerce Storefront: http://www.networksolutions.com/e-commerce/index.jsp
Etsy – selling handmade products: http://www.etsy.com/how_selling_works.php
CafePress – Brand and sell products with your own Logo: http://www.cafepress.com/make/personalized-gifts

Filed in Uncategorized 2 months, 1 week ago

Leave a Comment

Week 13

Information from week 13:

The caffeinated blog- Unlock the Full Potential of Your LinkedIn Profile: http://thecaffeinatedblog.typepad.com/the_caffeinated_blog/2008/08/unlock-the-full-potential-of-your-linkedin-profile.html

Web Video Resources
Rich Harrington’s book How to Produce Video Podcasts
Infomania’s Viral Video Film School and VC2 training: http://current.com/make/training/section/broadband.htm

Flash users:
output the AVI (or MOV) from Premiere,
import it into Flash
adjust the Canvas size of the flash file to fit your movie
Flash will step you through the process of setting up the video
Publish your flash file as a SWF

Izzy video: http://www.izzyvideo.com/ DreamweaverAdd the SWF file to a page in

Rotating Images with Dreamweaver and JavaScript: http://www.communitymx.com/content/article.cfm?cid=651FF

Filed in Uncategorized 2 months, 3 weeks ago

Leave a Comment

Week 12

Information from week 12

Website Hosting & Domain Names
Blue Host: http://www.bluehost.com/tell_me_more.html
Chrystal Tech: http://www.crystaltech.com/sharedhosting.aspx
GoDaddy: http://www.godaddy.com/default.aspx?ci=13333
Network Solutions: http://www.networksolutions.com/
Check to see what is included!

Browser Shots: http://browsershots.org/

Articles:
Killer Web Content: http://www.gerrymcgovern.com/nt/2007/nt-2007-10-01-killer-web-content.htm
Content that works on the web is customer-centric
Short, sharp, second person and active; that’s web content

CSS Cheat Sheet: http://webdesign.about.com/od/css/a/css_cheat_sheet.htm
Basic CSS Cheat Sheet and CSS Layout Cheat Sheet

How we really use the web: http://www.sensible.com/chapter.html
Fact #1: We don’t read web pages, we scan them
Fact #2: We don’t make optimal choices, we make satisfies
Fact #3: We don’t figure out how things work, we muddle through

Estimating time for a project: http://www.sitepoint.com/blogs/2009/04/14/how-to-estimate-time-for-a-project/
Identify the main project then pinpoint the specific deliverables
Break the project down into simple steps
Estimate time for each step
Remember to allocate for project management time, time to review work of subcontractors, holidays or days off that occur during the project, client turnaround time, and debugging

Filed in Uncategorized 3 months ago

Leave a Comment

Final Design Comps

Bruce commented on my comps last week and said he liked comp#1 more than comp#2. I played around with his suggestion but what I ended up with looked very similar to design comp#2. In using the bigger logo like he suggested from design comp#1 I would have to re-do the grid alignment for my navigational buttons and I didn’t like that the buttons would be different sizes. Changing the navigational bar and footer to red was too loud for my intended design purpose of the page. I stuck with the red logo and accents of the red for Header 1.

In a means to make the logo seem larger I reduced the height of the navigational bar. I noted that the logo was 70px high so I reduced the navigational bar from 40px to 35px- 1/2 the height of the logo- in hopes to create a more visually prominent logo.

I checked and all my padding was consistent. At the bottom of the page before the footer I increased the padding from 6px to 12px. When I placed the images only 6px away from the footer they seemed to be squeezed into the page. I think allowing some extra negative space helps the images stand out a bit better. I know everything should be the same distance apart but I don’t mind this spacing because it is a proportional number.

I toyed around with the alignment of my footer text. In trying to center two items by grid block (from the navigational buttons) I had three separate text items and additional “|” to space things. I assumed these could be messy to export so I finally got all the text and spacers on one line.

Lastly, I created an orginal image for the bottom left corner of my pages; it’s a paisley motif. I am not in love with it but it is growing on me. I’ll keep looking for more inspiration and see if I can create something that wows me, but for now it will do. After I created it and inserted it into the page I realized it looks better flipped. Flipping the image seems to lead one’s eye in opposed to pulling the eye away as the original image does.

Here are my final design comps and the new motif:

Filed in Uncategorized 3 months ago

Leave a Comment

Week 11

Information from week 11

Build out process, CSS design
Identify your original grid- helps organize slicing and dividing
Identify animated images- save as separate files, animate later
Identify solid hex #’s
Identify areas that are HTML text
Identify static images and pattern backgrounds
Identify navigation for rollovers- save as separate PNG or PSD files

All rollovers require TWO images:

an “OFF” state, or image that displays when the mouse is NOT on the graphic
an “ON” state, or image that displays when the mouse is ON or OVER the graphic

Things to remember with rollovers
All rollovers require two images- an ON and OFF state
All rollover images must be the same physical size
Fireworks or Photoshop can be used, save as JPG or GIF files

Insert images into the code in 2 ways:
In Fireworks use slices and layers, Define slices over rollover areas and export the individual image states – be careful not to overwrite images;
In Dreamweaver add images to your page using the Insert > Image Objects… > Image Rollover feature- be sure to give each rollover a name, ALT tag that describes it, and define two images.

Articles
Understanding CSS: http://www.adobe.com/devnet/dreamweaver/articles/understanding_css.html
CSS page layout basics: http://www.adobe.com/devnet/dreamweaver/articles/css_page_layout_basics.html
CSS Zen Garden: http://www.csszengarden.com/
How to Estimate time for a project: http://www.sitepoint.com/blogs/2009/04/14/how-to-estimate-time-for-a-project/

Videos
Creating templates http://www.adobe.com/designcenter/video_workshop/index.html?id=vid0157
Using templates: http://www.adobe.com/designcenter/video_workshop/index.html?id=vid0158

Filed in Uncategorized 3 months, 1 week ago

Leave a Comment

Week 10

Information from week 10

From table based to tableless web design with CSS : http://www.adobe.com/ class=”hiddenSpellError” pre=”">devnet/dreamweaver/articles/table_to_css_pt1.html

Introduction: http://www.adobe.com/devnet/fireworks/articles/export_css_images.html
New Options: http://www.adobe.com/devnet/fireworks/articles/export_css_images_02.html
Using the Export Features: http://www.adobe.com/devnet/fireworks/articles/export_css_images_03.html

http://download.macromedia.com/pub/developer/smolder_sample_fwcs4.zip
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 images & 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

Some benefits from using web standards:
Simplified and lower cost of development and maintenance
Continued compatibility with current and future web browsers
Improved accessibility to more people and more Internet devices
Opportunity for increased search engine rankings

Here is round 2 of my design comps for my portfolio site:
http://bcts-potomac.aacc.edu/CAT/cat10/FinalProject/comps/jhaspert_homepg.jpg
http://bcts-potomac.aacc.edu/CAT/cat10/FinalProject/comps/jhaspert_portfolio.jpg

Filed in Uncategorized 3 months, 2 weeks ago

Leave a Comment

Week 9

Information from week 9

Links
Grid and Column Designs: http://www.webdesignerwall.com/trends/grid-and-column-designs/
-Great sources for grid design ideas!
CSS Typography: http://www.digital-web.com/articles/css_typography/
-Offers ways to improve the readability and visual design of your sites
Industry Trends in Prototyping: http://www.adobe.com/devnet/fireworks/articles/cooper_prototyping.html
-”Prototypes are meant to be a cost-effective way of experimenting with ideas.” Why Prototypes are useful.
Lorem Ipsum, Greeking Generator: http://www.lipsum.com/
-Place holder text that won’t distract from design or layout

Videos
Tips & Tricks, Rapid Protyping: http://tv.adobe.com/watch/fireworks-tips-and-tricks/rapid-prototyping/
Exporting CSS and Images: http://tv.adobe.com/watch/digital-design/getting-started-06-exporting-css-and-images/
Creating HTML Clickthroughs: http://tv.adobe.com/watch/digital-design/getting-started-07-creating-html-clickthroughs/
Creating CSS, HTML layouts: http://tv.adobe.com/watch/digital-design/creating-cssxhtml-layouts/
Introduction to CSS: http://tv.adobe.com/watch/digital-design/introduction-to-css/

Filed in Uncategorized 3 months, 3 weeks ago

Leave a Comment

Week 8

Information from week 8

Websites
Dao of web design: http://www.alistapart.com/articles/dao/
Blasting the Myth of the Fold: http://www.boxesandarrows.com/view/blasting-the-myth-of
5 Principles to design by: http://bokardo.com/archives/five-principles-to-design-by/
The Difference between ID & Class: http://css-tricks.com/the-difference-between-id-and-class/
“Information that is reuseable should be kept in a class and information that is totally unique should be kept in an ID.”

Typography resource: www.ilovetypography.com
Anatomy of Web fonts: http://articles.sitepoint.com/article/anatomy-web-fonts
Characteristics of good screen font
-Low contrast and simple strokes with a consistent weight and thickness
- Generous x-height
- Generous width and letter spacing
- Generous punch width (space within letters)
Verdana, Trebuchet MS, Helvetica, san serif are good font options for the webCode Style’s

Combined font survey results: http://www.codestyle.org/css/font-family/sampler-CombinedResults.shtml
It’s best to use one of the 40 recognized system fonts (see article above) in your stack, to ensure some control over the look and feel of a font
CSS Font Family Glossary: http://www.codestyle.org/css/font-family/Glossary.shtml
CSS Typography: http://www.digital-web.com/articles/css_typography/

Videos
Adobe- The Complete Design Process: http://tv.adobe.com/watch/fireworks-tips-and-tricks/the-complete-design-process/
Adobe- Information & Interaction Design: http://tv.adobe.com/watch/fireworks-tips-and-tricks/information-and-interaction-design/
Adobe- Quickly Transform Photoshop layouts: http://tv.adobe.com/watch/everyday-timesavers-web/quickly-transform-photoshop-layouts/
Adobe- Dreamweaver Integration: http://tv.adobe.com/watch/digital-design/getting-started-06-dreamweaver-integration/

Links of Stock Image sites from The Principles of Beautiful Web Design
Stock.XCHNG (Free Images): http://www.sxc.hu/
Morgue File (Free Stock Images): http://morguefile.com/
iStock Photo (Royalty-free Images): http://www.istockphoto.com/
Corbis (Royalty-free Images): http://www.corbis.com/
Getty Images (Royalty-free Images): http://www.gettyimages.com/
Jupiter Images (Royalty-free Images): http://www.jupiterimages.com/
Dreamstime (Royalty-free Images): http://www.dreamstime.com/
Photos(Royalty-free Images): http://www.photos.com/
Shutterstock (Royalty-free Images):http://www.shutterstock.com/
Advertising Photographers of America: http://www.apanational.com/
Zen Photo(open-source PHP and MySQL based image gallery application): http://zenphoto.org/

Filed in Uncategorized 3 months, 4 weeks ago

Comments (1)

Week 7

Information from Week 7

12 Rules for choosing the right domain name: http://www.seomoz.org/blog/how-to-choose-the-right-domain-name
Check Copyright to avoid copyright infringement: www.Copyright.

Common Domain Name Registrar’s Today
Network Solutions: http://www.networksolutions.com/
GoDaddy: http://www.godaddy.com
Register: http://www.register.com
Network Solutions: http://www.netsol.com
For a full list of accredited registrars, visit ICANN: http://www.icann.org/

Designing for Search Engines
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

Readings
Search Engine Placement Tips: http://searchenginewatch.com/2168021
8 Web Design Tactics to help you when you’re stuck: http://www.seomoz.org/blog/web-design-tactics

Sites from The Principles of Beautiful Web Design
Online community for learning about/discussing typography: http://www.typophile.com
Marko Dugonji’s Typetester (see how different HTML text will look w/ different leading, tracking,etc): http://typetester.maratz.com/

Free & Shareware Font Galleries
1001 Fonts: http://www.1001fonts.com/
DaFont: http://www.dafont.com/
Wanted Fonts: http://www.wantedfonts.com
Fonts for Sale
Font Shop: http://www.fontshop.com/
AGFA Monotpye: http://www.fonts.com/
Veer: http://www.veer.com/products/type/
MyFonts: http://www.myfonts.com/
International Typeface Corporation: http://www.itcfonts.com/
Individual Artists & Foundries
AEnigma Fonts: http://cooltext.com/Fonts-Aenigma+Fonts
The Astigmatic One Eye Typographic Institute: http://www.astigmatic.com/
Blue Vinyl Fonts: http://www.bvfonts.com/
Fountain: http://www.fountain.nu/
Larbie Fonts: http://www.larabiefonts.com/
Misprinted Type: http://www.misprintedtype.com/
Pizzadude: http://www.pizzadude.dk/