wordpress design | choosing colors & resources for design

14
COLOR TOOLS & OTHER DESIGN RESOURCES FOR YOUR NEXT WEB DESIGN PROJECT WordPress Web Design EILEEN LONERGAN & MICHAEL MURPHY

Upload: eileen-lonergan

Post on 16-Jul-2015

652 views

Category:

Design


0 download

TRANSCRIPT

Page 1: WordPress Design | Choosing Colors & Resources for Design

COLOR TOOLS & OTHER DESIGN RESOURCESFOR YOUR NEXT WEB DESIGN PROJECT

WordPress Web Design

EILEEN LONERGAN & MICHAEL MURPHY

Page 2: WordPress Design | Choosing Colors & Resources for Design

"THERE IS NO 'ABSOLUTE' COLOR. WHAT I CALL 'RED' ISN'T NECESSARILY THE SAME COLOR OTHERS EXPERIENCE AS 'RED.' "

How the Brain Processes Color

- PATRICK CAVANAGH, HARVARD PROFESSOR OF PSYCHOLOGY

Page 3: WordPress Design | Choosing Colors & Resources for Design

Cultural considerations (ie in the states we think of pinkwith baby girl).

Geography can sometimes guide you (your resort inAlaska would probably have different colors than aresort in the Caribbean).

Profession if someone is in medicine they don’t wantred on their website.

Guidelines for choosing colors for your design project:

Page 4: WordPress Design | Choosing Colors & Resources for Design

Color is meant to enhance the message - not scream at yoursite visitor.Use contrasting colors – don’t use light yellow against white.Use color to communicate a certain goal. Put all call to actionbuttons in red or your links in bright blue.

Use soft, natural colors to display most information and brightand/or dark colors to highlight information that requires greaterattention.

If you need a lot of colors (say for a chart or bar graph) use huesof the primary color. This is more gentle on the eye than sixdifferent primary colors jumping at you.

Guidelines for color schemes that work:

Page 5: WordPress Design | Choosing Colors & Resources for Design
Page 6: WordPress Design | Choosing Colors & Resources for Design
Page 7: WordPress Design | Choosing Colors & Resources for Design
Page 8: WordPress Design | Choosing Colors & Resources for Design

Coolors.com

palette generator

Page 11: WordPress Design | Choosing Colors & Resources for Design

Color Identifying Tools (these will give you hex codes ofthe colors you see on websites).

Colorzilla for Chrome/Firefox ColorPick Eyedropper for Chrome Instant Eye Dropper (for you Windows peeps)

color identifying tools

Note: free

Page 12: WordPress Design | Choosing Colors & Resources for Design

other tools we like

Mike:Adobe Photoshop Pic MonkeyPixlrPaint Monkey

Eileen:CanvaPhotoshopElements

Expand2Web Friends:FlyingMeat.comGIMPPixelmatorBohemianCoding.com

for graphic design

Note: many are free

Page 13: WordPress Design | Choosing Colors & Resources for Design

HELLOMY NAME IS

michael

HELLOMY NAME IS

eileen

MichaelTheTechGuy.com EileenLonergan.com

Visit us for more tips:

Page 14: WordPress Design | Choosing Colors & Resources for Design

https://color.adobe.com/create/color-wheel

http://theultralinx.com/2013/04/psychology-colour-infographic-3.htmlhttp://webdesign.tutsplus.com/tutorials/6-beginner-safety-first-color-guidelines-for-the-web--cms-21462

http://www.colorzilla.com

https://chrome.google.com/webstore/detail/colorpick-eyedropper/http://instant-eyedropper.com/

http://news.harvard.edu/gazette/1998/08.06/BrainsColorProc.html

http://www.dtelepathy.com/blog/inspiration/beautiful-color-palettes-for-your-next-web-project

resources

http://www.bolterandchainsword.com/Tyler/GWColors.pdf