Color+Layout

The use of Colors has been studied and is proven - how can you use this in your MultiMedia

Video of JilMac Discussing Color https://youtu.be/F6OLhZs2OH0

Color Combinations:

• • JilMac's favorite Color Schemer http://hnl.name/color-schemer-online/ because you can find the Hex or RGB code or you can type in a hex or RGBcode

  • Color Schemer Free Online version - https://coolors.co

  • Scheme Colors http://paletton.com

  • Color Picker https://www.webpagefx.com/web-design/color-picker

  • Color Design http://www.colorschemedesigner.com

• Color 101 http://designfestival.com/color-theory-101-2

• Sherwin Williams – Visualizer https://www.sherwin-williams.com/visualizer/

  • Canva https://www.canva.com/color-palette/ a Colar Palette Generator

  • Adobe Color Wheel = https://color.adobe.com/create/color-wheel

  • To test for Accessibility - Jen Kramer recommends: https://contrast-ratio.com/ "If you copy your color choices here you can confirm their accessibility"

CSS

• • ColorZillia Gradients http://www.colorzilla.com/gradient-editor generates CSS code!!

  • Multi-column Layout with CSS3 - http://webdesign.about.com/od/css3/a/css3-multi-columns.htm?nl=1

• Advanced CSS3 2D and 3D Transform Techniques http://www.sitepoint.com/advanced-css3-2d-and-3d-transform-techniques/

• LESS is the CSS preprocessor https://www.google.com/#output=search&sclient=psy-ab&q=LESS+is+the+CSS+preprocessor+&oq=LESS+is+the+CSS+preprocessor+&gs_l=hp.3..0i22i30l4.1727.1727.0.3592.1.1.0.0.0.0.119.119.0j1.1.0...0.0.0..1c.1.12.psy-ab.iD-jC9_XRGE&pbx=1&bav=on.2,or.r_cp.r_qf.&bvm=bv.47008514,d.dmg&fp=8772e293f02d953a&biw=1308&bih=704

Color Blindness

• This is a great site. It shows us exactly why my brother likes blue

• http://www.iamcal.com/toys/colors/

• My brother is "Deutanopia (no green)"

• Has some good checks for kids.

• ===================================

• Check out your graphics here: Test for Color Blindness: http://colorfilter.wickline.org/

  • Color Blindness Articles:

    • Are Your Web Pages Color Sensitive?

    • WebAIM: Visual Disabilities - Color Blindness

    • Tips for Designing for Colorblind Users

LAYOUTS

Responsive Design Build Mobile http://buildmobile.com/responsive-web-design-fluid-layouts

Create a LOGO

• Logos, Buttons, Fonts http://cooltext.com/

• Text Based Logo: http://www.flamingtext.com/

Create a QR Code http://atomurl.net/qrcode/

Backgrounds & Texture

• • http://www.patterncooler.com/editor/ - plan to spend some time here! you can really customize.

Use Google DRAW to create a Banner

• http://googlepowertips.blogspot.com/search/label/VermontFest-2012

Fonts

• • http://www.google.com/webfonts Google Web Fonts has 500 free fonts

  • http://99Designs.com - spec designs - you can send them into

  • Fonts https://typekit.com/

OPTICAL ILLUSIONS

• http://www.opticalillusion.net Fence Illusion http://www.opticalillusion.net/category/animated-posts

  • The math behind it is called the Poggendorff Illusion cursor over the images http://www.michaelbach.de/ot/ang_poggendorff go through them all! Click NEXT button

Data Visualization & Information Design

• • TED http://ted.com -

  • The beauty of data visualization

    • by David McCandless

      • http://www.youtube.com/watch?v=5Zg-C8AAIGg&list=UUsooa4yRKGN_zEE8iknghZA&index=32

      • Note: he uses a Google doc - spreadsheet - that is the feed for the application!!