Graphics for the Web (CGR-205)

Notes

• Igor Stravinsky's The Rite of Spring
• Facebook Redesigns
• Current mediums reliving web design circa 1996

Links

General Web Design Resources

• A more detailed history of the Internet and World Wide Web
• W3C's Internet Timeline
• Sitemap through Flowcharts
• 9 Essential Principles for Good Web Design

Copyright Resources

• Smashing Magazine's Copyright Explained: I May Copy It, Right?
• Copyright Confusion Wiki
• Graphic Artists Guild's Copyright Myths Resource
• Etsy's You Be the Judge

Fireworks Resource Sites

• Smashing Magazine's Fireworks Tutorials and Downloads Best of
• Fireworks Guru Tutorials and Resources Forum
• Noupe.com's 50+ Excellent Examples of Fireworks Tutorials
• Fireworks Zone - Tutorials and Downloads
• WebDevFoundations Tutorial: Creating a Logo Banner

Files/Resources

• Resource1.zip (ZIP download)

Notes

• Interpreting Ambiguous Pictures - A student's paper on perception that contains useful resources

Links

General Web Design Resources

• Web Design From Scratch's Imagery
• Smashing Magazine's Vivid Imagery in Modern Web Design

Stock Images -- Free, Royalty-Free, Rights Managed

• Stock.XCHNG
• MorgueFile
• iStockphoto
• Creative Commons

Software

• Skitch - Software that lets you annotate, edit and share screenshots and images.
• InVision - Web-based app that lets you create fully interactive wireframes & prototypes
• Aviary - a suite of web-based tools for graphic design and audio editing.
• AppStorm - a list of 15 free alternatives to popular Mac software

Files/Resources

• Resources2.zip (ZIP download)

Notes

• Fluid vs. Fixed Demo Battle Royale
• Begin and keep a Morgue File
• Perform CSI:Layout on websites you visit

Links

General Web Design Resources

• An outdated version of The World's Worst Website
• Andy Rutledge's Bad Layout Conventions
• Got Scroll? 2-Column - Bad Layout Example
• 80 Inspiring Quotes about Design
• 99% Invisible - a tiny radio show about design, architecture, and the 99% invisible activity that shapes our world.

Finding Inspiration - Links to design showcase and design pattern sites

• Unmatched Style
• CSS Drive
• Design Meltdown
• Pattern Tap
• Yahoo Pattern Design Library

Software

• Skitch - Software that lets you annotate, edit and share screenshots and images.
• Evernote - A great (and free!) program that you can use to create, tag, store and organize your morgue files.

Files/Resources

• Resources3.zip (ZIP download)

Links

Color resources

• Adobe Kuler
• Jason Snook's Contrast Checker
• Colour Lovers
• Color Scheme Designer
• Hexadecimal Color Code Chips from December.com

Files/Resources

• Resources4.zip (ZIP download)

Notes

• Craig Robinson's Flip Flop Flyin'
• Do websites need to look exactly the same in every browser?
• CSS3, Please! - The Cross-Browser CS3 Rule Generator
• Cameron Moll's That Wicked Worn Look Series

Links

General Web Design Resources

• BounceApp - a fun and easy way to share ideas on a website.
• TestSize - test any web page in any window size.
• Google Browser Size - a visualization of browser size windows. Google explains how Browser Size works.
• iWebTool Speed Test - find out the overall size of a website, and how long it takes to load.

Files/Resources

Project 1 Files/Resources

• Project 1 Instructions and Steps (PDF download)
• Project 1 Rubric (PDF download)
• Project 1 Checklist - You must submit this checklist twice, once for each website you evaluate.
• Google Browser Size - a visualization of browser size windows. Google explains how Browser Size works.

Class Tutorial Resources

• Resources5.zip - (ZIP download)

Notes

Trends for Different Target Audiences

• A collection of industry showcases
• Corporate and Corporate Blogs, plus List of companies and the typeface they use
• eCommerce
• Fashion 1 and Fashion 2
• Kids
• Legal 1, Legal 2, and Legal 3
• Meet the Team
• Mobile Web Design
• Movies and TV Shows
• Newspapers
• Non-profit
• Online Shops
• Portfolio Case Studies
• Portfolio Design Study: Design Patterns and Current Practices
• Showcase of Designs Optimized for iPhone

Links

General Web Design Resources

• 15 sites web developers and designers should know
• The anatomy of a horrible web design client

Files/Resources

Notes

Links

Wireframe Resources

• 35 Excellent Wireframing Resources by Smashing Magazine.
• Wireframe Showcase - a gallery that features wireframes alongside the completed designs they represent.
• Web Without Words - Every week this site takes a popular and known website and reconstructs it by removing all words and images, replacing them with blocks.
• The Boxing Glove Wireframing Technique by 90 percent of everything
• I ♥ wireframes - a gallery that pulls from a flickr group
• Website Wireframes by Muiomuio
• How I Learned to Design by GiftRocket

Navigation

• Showcase of Creative Navigation Menus by Smashing Magazine

Files/Resources

Notes

Links

Typography Resources

• CSS Font-Size: em vs. px vs. pt vs. percent by Kyle Schaeffer
• The Ultimate Guide to Readable Web Typography (using the Golden Ratio) by Pearsonified
• Web Typography Tutorials, Tips, and Best Practices from InstantShift.com
• Fluid Web Typography - a book by Jason Cranford Teague

General Web Design Resources

• How to use headings in HTML from CSS Globe
• Six Ways to Style Blockquotes from CSS Newbie

Files/Resources

Project 2 Files/Resources

• Project 2 Instructions and Steps (PDF download)
• Project 2 Rubric (PDF download)
• Project 2 Sample - Download for a sample, based on Tiddly Resume for Conan Doyle.

Notes

Links

Banner Ad Links

• Interactive Advertising Bureau (IAB)
• IAB Guidelines, Standards, & Best Practices

Banner Ad Examples

• Interactive
  • The World's Best Banner Ads(and why) presentation
  • Coke Zero - Boy Band
  • GTI- Gas Pedal
  • Pringles - Love Can Be Complicated
• Customizable
  • Smart ForTwo - Smart Maps
  • Tok & Stok - Take Your Time
  • Volkswagen - Twitter Analyzer
• Entertaining
  • Lipton - 26 Ways to Cool Down
  • Banner Space Concerts
• Playable
  • Burger King - Sharpie
  • Athletica - Run and Live Longer

Files/Resources

Notes

Adobe CS Upgrades

• Adobe CS6 Upgrade - if you buy CS5.5 in before May 6, you can upgrade to CS6 for free!
• Adobe CS6 Release Date - Facts and Guesses from CS5.org (not an official Adobe website)

Links

General Web Resources

• Are You Ready for a Web Design Challenge by Smashing Magazine - Can you justify your web design choices?
• A Fun Approach to Creating More Successful Websites by Smashing Magazine

Files/Resources

Class Tutorial Resources

• Resources11.zip - (ZIP download)

Notes

Fireworks Resources

• Pages, Layers & States from FireworksZone.com
• CommunityMX.com - search for Fireworks or Jim Babbage, a Fireworks expert and author of great resources

Optimizing Graphics for Mobile Devices

• How to Validate & Test Your Designs for the Mobile Web from DesignFestival.com

Links

Optimizing Links

• GIF, JPG, and PNG - What's the difference?
• Smush.it - free web-based optimizer

General Web Design Resources

• Spur - a fun and easy way to critique your web pages to see what's working.

Files/Resources

Notes

Links

Fireworks Resources

• Prototyping with Fireworks - contains information and tips about using Fireworks to create an interactive Prototype
• Creating a Simple Navigation Bar using Textual Links - Start with Step 4. These instructions were created for CS3, so substitute "States" for "Frames"
• How to create buttons and navigation bars - (PDF Download)

Files/Resources

Final Project Files/Resources

• Final Project Instructions and Steps (PDF download)
• Final Project Rubric (2 pages) (PDF download)

Notes

Links

Optimizing Graphics for Mobile Devices

• How to Validate & Test Your Designs for the Mobile Web from DesignFestival.com

Files/Resources

Notes

Links

Final Links of Interest for Graphics for the Web 2012

• So, you need a typeface? - a great infographic to help pick a typeface.
• Colours in Cultures - a visual guide to how color is interpreted in different cultures.
• Let's Talk About Semantics - includes an HTML5 flowchart for when to use nav, article, section, aside, etc. elements
• Vischeck - a tool that simulates colorblind vision so you can test your design

Files/Resources