LinksResources

=WebDesign Links and Resources= toc Online Text Link to Lesson Outline: @http://www.washington.edu/accesscomputing/webd2/student/lessons.html

Tools and Downloads: Notepad++ @http://notepad-plus-plus.org/ Color Cop @http://colorcop.net/

FireFox Add On: Firebug: @http://getfirebug.com/

Evaluating Websites:
Sample Rubrics: CyberGuide Evaluation Tool for Websites: @http://www.cyberbee.com/design.pdf' Analyzing Websites Evaluation Sheet:

Rubistar Website Rubric Creation Tool: Rubistar Website Rubric Creation Tool

Sites for good and bad examples of websites: Examples of Bad WebPages (WebPages that Stink): @http://www.webpagesthatsuck.com/ The REALLY BAD WebPage Guide: @http://www.jaydax.co.uk/tutorials/webdesign/badpageguide/badpgguide.html Webby Awards: @http://www.webbyawards.com/ examples of great websites The Best Designs: @http://www.thebestdesigns.com/ Top 10 Lists of Good and Bad: @http://www.useit.com/alertbox/991003.html Top 10 Mistakes: @http://www.useit.com/alertbox/9605a.html Ten Usability Heuristics: @http://www.useit.com/papers/heuristic/heuristic_list.html

Cheese.com @http://www.cheese.com/ World Health Organization @http://www.who.int/en/

Wayback Machine: @http://www.archive.org/web/web.php -tool that allows you to look at websites and how they have progressed over time

**Color:**
Web Style Guide: Visual Design @http://webstyleguide.com/wsg3/7-page-design/3-visual-design.html Wikipedia: Web Colors @http://en.wikipedia.org/wiki/Web_colors WebAim Color Blindness: @http://webaim.org/articles/visual/colorblind Color Blindness Simulator: @http://www.colblindor.com/coblis-color-blindness-simulator/

Color Psychology and Meanings: @http://precisionintermedia.com/color Meanings of Color: @http://www.colormatters.com/color-resources/color-matters-for-kids/57-color-symbolism/172-the-meanings-of-colors Psychology / Emotions Behind the Colors: @http://color-wheel-pro.com/color-meaning.html

**Primary, secondary and tertiary colors**
Color Wheel and Color Theory: @http://webdesign.about.com/cs/color/a/aacolortheory.htm Color Matters Color Theory: @http://www.colormatters.com/colortheory.html

**Monochromatic, complimentary, triadic (color triads), analogous** **color schemes**
Color Wheel Pro: @http://www.color-wheel-pro.com/color-theory-basics.html Color Combinations: @http://www.worqx.com/color/combinations.htm

**Contrast**
Color and Contrast:@http://www.worqx.com/color/color_contrast.htm

**Useful Color Tools**
Color Names: @http://www.genopal.com/colornames HTML Color Picker from W3Schools:@http://www.w3schools.com/tags/ref_colorpicker.asp Color Cop: @http://colorcop.net/ Kuler Color Tools: http://kuler.adobe.com
 * Color Scheme Designer: @http://colorschemedesigner.com/
 * color scheme generator: @http://coolors.co
 * Visibone Webmaster Color Lab: @http://www.visibone.com/colorlab/

Web Standards
W3C: @http://www.w3.org/ HTML 5 @http://www.w3.org/TR/html5/ HTML 1.0 (1993): @http://www.w3.org/MarkUp/draft-ietf-iiir-html-01.txt CSS 2 Specification: @http://www.w3.org/TR/CSS2/

Wayback Machine: @http://www.archive.org/web/web.php -tool that allows you to look at websites and how they have progressed over time History of Browsers: @http://upload.wikimedia.org/wikipedia/commons/7/74/Timeline_of_web_browsers.svg

=Accessibility Resources= 1. Intro to Web Accessibility:@http://webaim.org/intro/ 2. What is web accessibility? @http://www.doit.wisc.edu/outside-cms/accessibility/online-course/defined.htm 3. Web Application Accessibility: @https://www.youtube.com/watch?v=Zfin38GqxJw 4. World Wide Access: Accessible Web Design: @http://www.washington.edu/doit/Video/index.php?vid=35 5. Intro to Screen Reader: @http://www.youtube.com/watch?v=hq5FNvyWGF4&list=PLuh-XJvxFVuLHKARuPWKxdyGwgb15r1G3

Example of Sample Inaccessible Website: @http://www.washington.edu/accesscomputing/AU/before.html Example of Sample Accessible Website: @http://www.washington.edu/accesscomputing/AU/after.html

WAVE Web Accessibility Evaluation Tool: @http://wave.webaim.org/ Colorblindness Website Color Checker Tool: @http://www.vischeck.com/vischeck/vischeckURL.php How Disabled Users Access the Internet: [] More Videos on How Folks with Disabilities Use the Web: @http://www.uiaccess.com/accessucd/resources_videos.html Web Aim: [] Great Infographic on Designing for Accessibility: @http://webaim.org/resources/designers/

=Organizing and Planning Your Website= Information Architecture: @http://webstyleguide.com/wsg3/3-information-architecture/index.html

Concept Codify: Online Card Sorting Tool: @http://conceptcodify.com Card sorting activity: @http://conceptcodify.com/studies/kbsbjzja9iz1213v/via/d57n5nf824mehccu/

Elements of a Wireframe: @http://webstyleguide.com/wsg3/3-information-architecture/4-presenting-information.html Web Style Guide: @http://www.webstyleguide.com/index.html Planning Your Website Project: @http://cat.xula.edu/tutorials/planning/ MockingBird: Website Planning, Mockup, and Collaboration Tool @http://gomockingbird.com/ Wirify: @http://www.wirify.com/ lets you turn any website into a wireframe in one click Lorem Ipsum Text Filler Generator: @http://www.lipsum.com/

=File Naming Conventions= =Design Inspiration= @http://www.wpdfd.com/featured_designs/ @http://www.texelate.co.uk/blog/web-design-inspiration/ @http://www.inspirationking.com/

Pre-Coding Resources
Free online grid paper @http://incompetech.com/graphpaper/weightedgrid/

HTML Resources
HTML Editor: NotePad++ (Windows only)

Common XHTML Tags:@http://www.washington.edu/accesscomputing/webd2/student/unit2/common_tags.html

Learn HTML Tutorials from Code Academy: @http://www.codecademy.com/learn
HTML Dog (HTML and CSS Tutorials and Resources): @http://www.htmldog.com/ WDG Guide to HTML: @http://www.htmlhelp.com/reference/html40/ HTML Resource List: @http://www.pageresource.com/html/hclist.htm Additional Link Resources:@http://w3schools.com/html/html_links.asp Additional "target" attribute info: @http://www.w3schools.com/tags/att_a_target.asp FireBug: @http://getfirebug.com/

HTML Ipsum Text Generator Tools:@http://html-ipsum.com/ Lorem Ipsum Text Generator Tool: @http://www.lipsum.com/ Bacon Ipsum Text Generator Tool: @http://baconipsum.com/?paras=5&type=all-meat&start-with-lorem=1

HTML Cheat Sheet:

Dynamic Drive Advanced HTML Tools: @http://www.dynamicdrive.com/

HTML Table Layouts: @http://www.ironspider.ca/webdesign102/tables4layout2.htm HTML Table Alignment Tricks: @http://www.activejump.com/j-9.shtml Additional HTML Table Information: @http://www.w3schools.com/html/html_tables.asp Data Tables in Modern Web Design: @http://www.noupe.com/design/data-tables-in-modern-web-design.html

HTML and CSS Resources: @http://www.webdesignfromscratch.com/category/html-css/ HTML and CSS Video Tutorials: @http://www.dontfeartheinternet.com/

Just for Fun: Halloween WebSite Design: []

WebDesign Related Articles and Reading
Webmonkey: @http://www.webmonkey.com/ WebPage Design For Designers: @http://www.wpdfd.com/

=CSS Resources and Tutorials= W3Schools Resource for CSS: @http://www.w3schools.com/css/default.asp CSS Reference Guide (W3Schools.com): @http://www.w3schools.com/cssref/default.asp CSS Tutorial Course: @http://www.w3.org/community/webed/wiki/CSS/Training Difference between ID's and Classes: @http://css-tricks.com/the-difference-between-id-and-class/ Learn HTML and CSS Tutorials from Code Academy: @http://www.codecademy.com/learn Beginners Guide to HTML and CSS: @http://learn.shayhowe.com/html-css/ CSS Reference Resources from W3Schools: @http://www.w3schools.com/cssref/default.asp CSS Tutorial from HTML Dog for Beginners: @http://www.htmldog.com/guides/cssbeginner/ CSS Font Styles: @http://www.w3.org/Style/Examples/007/fonts.en.html WDG CSS Resources: @http://www.htmlhelp.com/reference/css/ WDG CSS List of Properties: @http://www.htmlhelp.com/reference/css/properties.html MaxDesigns CSS Resources: @http://css.maxdesign.com.au/ CSS Zen Garden: @http://www.csszengarden.com/ Linking Style Sheets to HTML: @http://www.htmlhelp.com/reference/css/style-html.html CSS Specificity: Things you should know: @http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ CSS Float Tutorial: @http://css.maxdesign.com.au/floatutorial/ Many CSS Examples From W3Schools.com @http://w3schools.com/css/css_examples.asp CSS VIdeo Tutorials: @http://www.thenewboston.com/?cat=29&pOpen=tutorial Primary CSS Templates: @http://www.primarycss.com/

CSS Box Model From W3Schools: @http://www.w3schools.com/css/css_boxmodel.asp CSS Border and Outline Reference: http://www.w3schools.com/cssref/default.asp#border

CSS List Style Resources: @http://css.maxdesign.com.au/listamatic2/index.htm

CSS Positioning 101: @http://www.alistapart.com/articles/css-positioning-101

Example CSS From Page Layout Lesson: Example HTML From Page Layout Lesson:

CSS Positioning Resources W3Schools: http://w3schools.com/css/css_positioning.asp

CSS Floating Resources W3Schols: @http://w3schools.com/css/css_float.asp

Example CSS Page Layout: Horizontal Nav Menu:

Example HTML From Page Layout: Horizontal Nav Menu:

Page Layout: Overall Design Strategies: @http://www.washington.edu/accesscomputing/webd2/student/unit3/module6/csslayout.html Responsive Web Design: What is it and How does it work? Smashing Magazine: @http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

=Typography and Font Resources= 50 Design Terms Explained: [] CSS Font Families: @http://www.cssfontstack.com/ A guide to Web Typography: @http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/ Typography on the Web: @http://docs.webplatform.org/wiki/tutorials/Typography_on_the_Web Web Style Guide: Typography: @http://webstyleguide.com/wsg3/8-typography/index.html Don't Fear Web Typography: @http://www.dontfeartheinternet.com/css/don%e2%80%99t-fear-web-typography Typography Prezi: @http://prezi.com/ufnrer-swszq/typography W3C Font Families: @http://www.w3.org/Style/Examples/007/fonts.en.html 16 Best Loved Font BIts in Web Design: http://www.inspirationbit.com/16-best-loved-font-bits-in-web-design Most Common Windows Fonts Survey Results: @http://www.codestyle.org/css/font-family/sampler-WindowsResults.shtml Most Common Mac Fonts Surevey Results: @http://www.codestyle.org/css/font-family/sampler-MacResults.shtml Common Fonts to Windows and Mac: @http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

Font Stacks: http://awesome-fontstacks.com/ WordMark It: Preview fonts on your computer: @http://wordmark.it/ Google Web Fonts: @http://www.google.com/webfonts Copy Paste Character: @http://copypastecharacter.com/

Free Fonts: []

=Images and Copyright= Legal Aspects of WebDesign: Copyright: @http://www.iusmentis.com/technology/www/legaldesign/copyright/ US Copyright Office: @http://www.copyright.gov/ Copyright FAQ: @http://www.copyright.gov/help/faq/
 * 10 Big Myths About Copyright Explained: @http://www.templetons.com/brad/copymyths.html
 * What is Copyright? @http://www.copyright.gov/circs/circ1.pdf
 * CyberBee Interactive Copyright Q/A: @http://www.cyberbee.com/cb_copyright.swf

Guidelines for Effective Use of Web Graphics: @http://www.washington.edu/accessit/webdesign/student/unit4/module1/Guidelines_for_web_graphics.htm Web Style Guide: Graphics @http://www.webstyleguide.com/wsg3/11-graphics/index.html Stanford Copyright and Fair Use Resources: @http://fairuse.stanford.edu/Copyright_and_Fair_Use_Overview/index.html


 * Web Graphics Basics: @http://www.washington.edu/accessit/webdesign/student/unit4/module2/web_graphics_basics.htm
 * Graphics: Characteristics of WebGraphics: @http://www.webstyleguide.com/wsg3/11-graphics/4-web-graphics.html
 * GIF, JPEG, PNG What is the difference? @http://www.sitepoint.com/gif-jpg-png-whats-difference/

Resizing Images: @http://www.digicamhelp.com/processing-photos/basic-editing/resizing/ Cropping Images: @http://www.caddpower.com/cms/croppingpictellsstory.htm Site Optimization: @http://www.webmonkey.com/2010/02/site_optimization_tutorial_-_lesson_1/

Icon Library: http://openiconlibrary.sourceforge.net/

=Copyright Friendly Sites for Images= Flickr Creative Commons: @http://www.flickr.com/creativecommons Pixabay: @http://pixabay.com/ Image After: http://imageafter.com/index.php EveryStockPhoto: http://www.everystockphoto.com/ WikiMediaCommons: http://commons.wikimedia.org/wiki/Main_Page Photos8 Free Stock Photos:http://www.photos8.com/still_moving_water-wallpapers.html Stock.XCHNG: http://www.sxc.hu/ Morgue File http://morguefile.com/ Flickr The Commons: http://www.flickr.com/commons Public Domain Pictures: http://www.publicdomainpictures.net/ Veezzle: http://www.veezzle.com/ Ookaboo: @http://ookaboo.com/o/pictures/ Open Clip Art: http://www.openclipart.org/ Wylio: http://www.wylio.com/ ImageBase: @http://imagebase.davidniblack.com/main.php World Images: http://worldimages.sjsu.edu/ Advanced Google Search: http://www.google.com/advanced_image_search?hl=en Additional Image sites: http://www.melaniewiscount.com/media.html NASA: @http://grin.hq.nasa.gov/index.html US Fish and Wildlife Service Library: @http://digitalmedia.fws.gov/ Government Science Images: @http://www.loc.gov/rr/scitech/selected-internet/imagesources.html 43 Websites with Free Images: []

Permission Request Template: http://landmark-project.com/permission1.php

=Free Online Image and Graphic Editing Tools= 3. PsykoPaint: @http://www.psykopaint.com/ note: browser based, more of a fun artistic set of tools 4. Picozou:@http://www.picozu.com/ note: browser based (Firefox or Chrome), Pixlr much better
 * 1) Pixlr: @http://pixlr.com/ note: browser based tool similiar to Fireworks and Photoshop, LB student choice 2012 "best web-based tool"
 * 2) GIMP: @http://www.gimp.org/ note: requires a download to your computer

NEW: Picadilo @http://www.picadilo.com/

NEW: @https://www.canva.com

Free Vector Graphics Creator Software: @https://inkscape.org/en/

Online Image Editing Tool Evaluation Survey Tool: https://docs.google.com/spreadsheet/viewform?formkey=dGZrOWR6WWljSlZRbnF6MnBmX1ZsVWc6MQ#gid=0

=Adobe Photoshop=

Photoshop 101 Video Tutorials from AdobeTV: http://tv.adobe.com/show/learn-photoshop-cs6/ Glass Photoshop Buttons: @http://www2.altuit.com/webs/altuit/GlassPhotoShopTutorial/QuickGlassButton.htm Creating buttons for beginners: @http://wegraphics.net/blog/tutorials/photoshop/photoshop-for-beginners-creating-buttons-for-web-part-1/ Stylish Glossy Buttons in Photoshop: @http://coregfx.org/tutorials/create-a-nice-stylish-glossy-button-in-photoshop/ Many more button tutorials: @http://www.tripwiremagazine.com/2012/06/photoshop-button-tutorials.html Fractured Text Video Tutorial: @https://www.youtube.com/watch?v=-1NR96VUJU0

Fading an image into the background using Photoshop: http://www.evolutionarydesigns.net/blog/2010/10/27/how-to-fade-an-image-into-the-background-with-adobe-photoshop-cs4/ Many Great Photoshop Tutorials for Different Tasks: @http://www.entheosweb.com/photoshop/default.asp Basic Banner in Photoshop Video Tutorial: @http://www.youtube.com/watch?v=4PntDhna6DA Feathering in Photoshop: @https://www.youtube.com/watch?v=xV7pRV-ACaY Fun Photoshop Text Effect Tutorials and More: @http://www.iceflowstudios.com/category/tutorials/ Fun Fonts that You Can Download and Use in Photoshop: @http://www.dafont.com/ Fun Tutorial in Photoshop: @http://psd.tutsplus.com/tutorials/photo-effects-tutorials/how-to-create-a-nuclear-disaster-landscape-basix/ Fun T-shirt Creation Tutorial (more advanced): http://www.prowseed.com/blog/tee-tutorial/

Veggie Head: Assignment: Image: Download directions:

15 Online Background Generators: @http://singlefunction.com/15-online-background-generators/

Convertico: Convert Favicon into .ico file type: @http://www.convertico.com/

JavaScript Resources
JavaScript resources from w3schools.com: @http://www.w3schools.com/js/default.asp Dynamic Drive JavaScript Scripts: @http://www.javascriptkit.com/cutpastejava.shtml Code Academy: JavaScript Training: @http://www.codecademy.com/en/tracks/javascript

Dreamweaver Resources
Adobe TV DW Video Tutorials: http://tv.adobe.com/show/digital-design-cs6 Learn DreamWeaver Tutorials: DW CS6 Video Tutorials: @https://www.youtube.com/channel/UCK-630PZbI642MjrSNf4YTg

=Adobe Fireworks= 40 Different Fireworks Tutorials / Tricks: @http://www.tutoriallounge.com/2009/10/40-striking-adobe-fireworks-tutorials/ Even More Fireworks Tutorials and Tricks: @http://fireworks.smashingmagazine.com/2008/03/18/adobe-fireworks-tutorials-and-downloads-best-of/ Fireworks Tutorials / Resources and Image Effects: @http://www.entheosweb.com/fireworks/default.asp Fading an Image into a Background: @http://www.joycejevans.com/tutorials/Fireworks/FWMX/fade/fade.htm

=Flash Resources and Tutorials= Flash Tutorials and Resources:@http://www.entheosweb.com/Flash/default.asp

Flash Basics Handout / Overview: @http://eduscapes.com/flash/pdf/flash2.pdf Flash Basics Handout: Animation: @http://eduscapes.com/flash/pdf/flash3.pdf Flash Basics Handout: Interaction: @http://eduscapes.com/flash/pdf/flash4.pdf Flash Basics Handout: Multimedia: @http://eduscapes.com/flash/pdf/flash5.pdf

Examples of Flash Banners and Flash Advertisements @http://www.hqprod.com/flashads.html @http://www.jennycreative.com/banners.html http://www.nola.com/mediakit/samples/index.html# @http://www.youtube.com/watch?v=kuiN90RI2Vs more advanced but creative use

Flash Banner and Web Banner ad sizes: @http://www.flashbanners.co.uk/flash-banner-sizes.htm

=Free Tools to Make Animations on the Web= Automatoon: @http://www.automatoon.com/ Rate_My_Animations: @http://www.calameo.com/link?id=5919964

=Free Tools to Create a Website= Weebly: @http://www.weebly.com/ Zoho Sites: @http://www.zoho.com/sites/ GoogleSites: @http://www.google.com/sites/overview.html Wix: @http://www.wix.com/ Joomla: Open Source Content Management System: @http://www.joomla.org/

Test Test Test