Welcome to Scribd, the world's digital library. Read, publish, and share books and documents. See more
Download
Standard view
Full view
of .
Save to My Library
Look up keyword
Like this
7Activity
0 of .
Results for:
No results containing your search query
P. 1
A Guide to Combining Colors

A Guide to Combining Colors

Ratings: (0)|Views: 91 |Likes:
Published by Mauricio Sanchez
tips
tips

More info:

Categories:Topics, Art & Design
Published by: Mauricio Sanchez on Jul 10, 2010
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as DOCX, PDF, TXT or read online from Scribd
See more
See less

10/25/2012

pdf

text

original

 
A Guide to Combining Colors & Color Schemes for Great Web DesignA GUIDE TO TOP COLOR COMBINATIONS IN WEB DESIGN Examples of Color Schemes and ColorCombinations Within Designs
(I recommend reading the
Color Combinations Article Here
Instead as The Formatting On Our Blog IsMessed Up)GO DIRECTLY TO COLOR COMBINATIONS Are you having problems thinking of new color combinations? Do you wish that you could have areference file for evaluating new color combinations for your website? There area many helpful toolsand websites out there that list good combination colors but wouldnt you prefer to look at designsimplementing these colors? I would. I have created about 45 different simple designs implementingworkable color combinations, and I will add to this list at regular intervals. So bookmark this page, andcome back when you are in the process of designing a website. Designers may send to me hex numbersand I will create thumbnails ( like the ones below) from these color combinations and add these to ourlist. An added benefit, Everone who adds a good color combination to this list will have there websitelisted (only if you want to). If you would prefer to send to us your own thumnail or a link to a website,you can do this instead.On the next page, you will find the designs created with workable colorcombinations. Each picture includes hex numbers so that you can try them in your designs. Below thesecolor combinations you will find a guide to choosing beautiful color schemes for your website designs.Enjoy and feel free to comment on these designs color combinations.Everybody lives with colors allaround them, and everyone views their surroundings in a different light, as well as in different colors.Both men and women coordinate their clothing together according to colors and patterns, althoughsome people do it MUCH better than others. If you have never seen anyone coordinate their clothesbadly, then you are probably the one who chooses bad color schemes for your outfits (sorry). If this isthe case, either steer clear of design or use the color combinations used in the color combining listabove. Even for those of us who do a great job at combining colors within our designs, we all have thosedays where our brains just arent working right. When I am having one of those days, I usually go toCoolHomePages.com or other similar pages and find sites that implement great color schemes.However, for the purposes of this article, I decided to collect these color palettes into one listas I didabove. This might be helpful to you, but if it isnt, below this article you will find a long list of otherresources for combining colors. Even if you are a great web designer, every designer should implementcolor scheming tools and inspiration files to help them on those nothing is going right kind of days.
THE IMPORTANCE OF COLOR WITHIN YOUR WEBSITES DESIGN
Color is very important in web design, and can be used to add spice to your website, relay the mood of apage, as well as to emphasize sections of a site. If you think about it, as soon as you look at a website,you can normally guess within seconds what that site is all about. Just like we all are quick to judge otherpeople by their appearance, and surroundings by the way they smell, look, and feel, we also judge awebsite by its color scheme and style of design. We can usually tell almost immediately, whether a
 
website is corporate, personal, whether it is for kids, teens, or just for adults, etc. Most of thisinformation is perceived solely by taking in color and design elements.
USE YOUR COLOR INTUITION TO CHOOSE APPROPRIATE COLORS FOR A WEBSITES TOPIC
 We use color intuition every time we design. It is very intuitive to know what colors are appropriate fora specific website topic. When you sit down to start designing, you probably take a look at the blankPhotoshop screen and know by pure perception which colors are off limits to that specific design. Forexample, you wouldnt use blue, red, yellow, and green for use on a website design for an insurancecompany. However, this color scheme would work fabulously on a website for a preschool. On the otherhand, You wouldnt use black, grey, and brown for use on a preschools website, but this color schemewould work wonderfully on an insurance companys website. I didnt have to tell you this, with the useof your color intuition, you knew this without even being told.
USE COLOR TO EMPHASIZE IMPORTANT SECTIONS OF YOUR WEBSITE
 As designers, it is our role to use color and other design elements to draw a visitors eye to the mostimportant part of the page. I started out my career as a fine artist, so I am going to put a different spinon your sites page elements. Fine artists make compositional choices in order to guide the viewers eyeto important components within their work. Web designers are artists too, and a good designer will seehis page as a work of art. Try to imagine that your website is an art composition, in other words, thatyou will design your websites page elements in a fashion that presents a pleasing flow to the userseyes. If it was not for search engines finding websites almost completely by text on the page, I woulddesign my entire website completely within Photoshop as gifs, jpegs, and pngs. But since we are allforced to use tables, css, and text within our pages, sometimes web design isnt a simple task, and ismuch tougher than Print Design (although thank goodness we dont have to put up with print bureausand prepress). We arent going to discuss elements of composition today, but I will come back to itwithin a different blog entry. However, I will summarize a few things for you on page elements and howa web surfer will scan a website element by element.
WHAT ELEMENTS OF WEBSITE DESIGN WILL CATCH A SITE VISITORS EYES? WHAT PATHWAY WILLEYES NATURALLY FIXATE? WHAT DIRECTION WILL THEIR EYES FOLLOW?
(1) Eyes naturally being scanning left to right(2) When viewing a website, a visitors eyes most often fixate first on the upper left portion of thescreen. Viewers often fixate on the point for a few seconds before moving their eyes to the right andthen down the page.(3)Dominant, noticeable headlines tend to draw the visitors eyes first upon entering the website(especially when they are in the upper left, and most of the time when they are in the upper right.)(4) I dont recommend this one because it is annoying  If you want to force your visitors to read, thensmaller type encourages a more focused reading / viewing behavior and larger type encourages a lightscanning result.
 
(5) Website readers often read blurbs and headlines, however, they tend to only read the first one-thirdof the blurb. Unfortunately, you only have less than a second to grab the readers attention on theseheadlines.(6) Website visitors often will scan down to the bottom of the page to see if something catches theireyes.(7) Website navigation works best on the top of the pageso try to use navigational features on the topof your page instead of on the side or on the bottom of the page.(8) Images of beautiful, clean faces, causes the visitors eyes to fixate on this image.(9) If you display articles on your website, then try to use short paragraph structure. Web surfers prefershort paragraphs opposed to longer ones. And it is no surprise that we all tend to like one columnformats opposed to a newspaper format of several columns.(10) Details and Depth within elements of design are noticed before items lacking depth.(11) The bigger a graphic or image, the longer the user will fixate on it.(12) Eyes always lock on the most noticeable aspect of a website, for example color within a grey-tonedwebsite.(13) Ads tend to do better on the top left portion of the site. This is no surprise considering that this isthe first place people look when opening a webpage.(14) Placing ads next to popular content increases an ads success.(15) Bigger banner ads did better than smaller, less noticeable ads.(16) Text ads do better than banner ads because users tend to mistake the text ad for a link to contentwithin your site.
IMPORTANT RULES FOR USING COLORS WITHIN YOUR WEBSITES DESIGN
 One of the best aspects of the internet is the wide array of different pleasing designs that you are luckyenough to witness. However, for every beautiful site that you visit, there are at least a hundred morebadly designed sites. Everyone has access to a beautiful web-safe color palette, however, it is amazing athow badly some people can implement these tools. The intention of this article is to make sure that weall use this color palette in the correct way so I can possibly get to old age with my vision still intact.
FOR THE LOVE OF G_D, PLEASE DONT COMBINE THOSE COLORS TOGETHER
Have you ever gone to a webpage and almost puked?! Well, you arent alone, Ive been there, donethat. We all have the same colors in our arsenal, however the way that some people combine themmakes me want to start a new law forcing new designers to be issued color permits. I tease you, of course, however following some rules can help you sort out what combinations look good and what

Activity (7)

You've already reviewed this. Edit your review.
1 hundred reads
compos_er liked this
mateer6 liked this
mateer6 liked this
mateer6 liked this
mateer6 liked this
dolby03 liked this

You're Reading a Free Preview

Download
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->