Becoming a Master Designer Rule Two: Limit Your Colors

Rule Two: Limit Your Colors. Sounds a lot like the last rule of limiting your fonts right? Exactly! We want to limit our colors for the same reason we want to limit our fonts. Reducing the number of colors we use in our design will make the piece feel consistent. Basically, everything will look like it goes together. Just like a sports team’s uniform or a company’s branding - we want a uniform over-all look to the colors.
As with the font selection, limiting the number of your colors is just a guide not a rule. You could very well have a rainbow of colors in your design and it will look great. But you need to start with a coloring strategy and stick with it. Use your color consistently throughout your design.
For starters lets talk about color values. A color’s value is how bright or dark the color is. A yellow for instance is fairly bright. A purple is fairly dark. Of course, a color can have a range of values. Purple for instance is a color that most of us think of as relatively dark, but you can also have a very light purple. Here is an example of some colors and their relative value. Then next to that you can see a range of values for one color.
So here is one rule I use when picking my color scheme: make sure you have a range of values in your color scheme. In any design you’re going to need some light colors and some dark colors to produce contrast. If for instance, the background of your design is dark, you’ll need a light color so that the copy can be easily read. Or conversely, if you have a bright background you’ll need a dark color for your art or text or whatever.
I will also typically only pick 2-5 colors to make up my color schemes. Reduce the number of options and you’ll typically have good results in the design. Here is a sample of a color scheme I put together. As you’ll see I picked One dark color, one middle-valued color and one bright color. Just to the right, I also set up a value range for each of these colors. It’s this collection of colors that I will use on my project as my palette. Once I have this color palette set up I will try my best to only use these color.
Ok, so now that we’ve addressed some technical color picking issues like how many colors to pick and what values they should be; what’s next? I’ll tell you what’s next, the hardest part; deciding what those 2-5 colors should be! I personally find this to be a somewhat difficult task at times. Here is a list of techniques I’ll use to help me pick my color schemes:
• Stick to a temperature range. As in… pick all warm colors or pick all cool colors. Warm colors are reds, oranges, yellows, browns, etc. Cool colors are blues and purples. I consider greens to be fairly neutral. If you pick all of your colors in one temperature range, they will probably go together fairly well.
• Use a website like www.colourlovers.com for inspiration. This wonderful site is all about picking color schemes. You can just click through page after page of color schemes.
• Keep an eye out. There are color schemes all around you. Look at packaging in the grocery store, look at the paint colors in your local Starbucks, look at Mother Nature! If you see something with a pleasing set of colors, just take a mental note and see if you can replicate it on your computer.
• Pay attention to pre-existing company colors. Frequently I am playing off of some pre-existing brand colors. I’ll look at their logo, color scheme and use that as my starting point. Then maybe just add a color or two.
Here are a finished design that I’ve done which show fairly restricted color schemes.
As you can see, the tight color scheme and limiting my fonts really pulls everything together.
I know these lessons are the basics… …but these remain cornerstones of design. So, it never hurts for a little refresher. 5 more rules to come. I promise the next 5 are a bit more interesting. Thanks for your time!

Become a Master Designer - Rule One: Limit your fonts

Part One of Seven Easy Principles to Becoming a Master Designer.
Ok, “master designer” might be a bit of a stretch – but you can at least become a “proficient designer” by following 7 easy principles. This will be the shortest, most informative series of blog posts you’ve ever read on how to become a better designer. Please note: these principles CAN be broken… these are not laws, they’re just general guides that I typically follow when putting together a design.Follow these simple design principles and you’ll be on your way to artistic excellence.Principle One: Limit Your fonts. A big part of putting together a good design, as you’ll see, is making sure the over-all look is consistent. The best way to accomplish a consistent look to your design is limiting the number of artistic motifs (themes) that you use. The fonts you select are the first variable you want to limit. I typically like to pick just 2 fonts per design.The first font can be fancy or artistic. This font will be used to give your design some flair, character and personality. It’s this font that sets the mood for the piece. Is it a fun font with swirls for a girl’s party, or is it a grungy evil font for a rock band? I would use this fancy font for the header copy – anywhere it’s big, I’ll use this font. The fancy font will be the focal point of the piece. You will usually have less copy in this fancy font, but it will be much bigger – so that’s what people will see and focus on.
The second font should be very basic. The audience shouldn’t take notice of this secondary font at all. This secondary font needs to be very easily legible. It’s this basic font that will be used for large bodies of copy. Obviously, it’s very hard to read large bodies of copy that are in some extravagantly artistic font. So, this second font is all about functionality.Here is an example of proper use of fonts in a design. As you can see, there is only two fonts used here. The fancy font is used as the headers and the basic font is used for the copy. It looks clean and consistent.Here is a Bad use of fonts. In this case I used too many fancy fonts. It just makes the piece look inconsistent. The sub sections don’t seem like they match with the main header.Having too many fonts in a design is the biggest mistake. Nothing looks worse than someone who has used 8 different fonts on their flyer. Even worse than that is using a very fancy font for your body copy. Here is a sample of font use at it’s worst:One last thought before I let you go. If your fancy font looks modern or contemporary, then your basic font should be a san-serif font. If your fancy font looks old fashioned, then use a serif font for your secondary font.

网站的视觉路径和版式设计

cooper谈到用户的视觉路径一般是：从上到下，从左到右。好的视觉设计路径应该是顺应这样的用户习惯，糟糕的设计会让用户无所适从，焦点到处都是。当然，上图的视觉路径图并非绝对的，浏览习惯因人而异。

网站中方块
因为人们从接触信息以来，信息的呈现就是以方块式存在：报纸、书，单个字成点，一行字成线，一段字成面，而这个面当然是以方形呈现的效率最高。网站的视觉设计大部分其实都是在拼方块。网站中的方块能很好地引导用户的视觉路径，用户可以通过区块来分辨这个区域的信息是否是自己需要的，从而可以迅速缩小范围细致寻找或者浏览下一个区块，比如yahoo的首页，从大块上来看，用户很容易分辨出4个大区块，每个区块里面又有小的区块。
方块感越强越能给用户方向感。
方块越少越好。
尽量用留白做视觉区分。

对齐和间距
视觉设计最简单，也是最容易忽略的就是对齐。检查的方法就是查看每个方块中的边线，方块与方块之间的边线，尤其是纵向维度。间距的一般规律：字距小于行距，行距小于段距，段距小于块距。检查的方法可以尝试将网站的背景图案、线条全部去掉，看是否还能保持想要的区块感。
拿淘宝的新首页举个细节的例子(右边是我调整后的)。有时候我们不需要花心思做多么漂亮的图标和颜色搭配，用心地调整好网站的每一个像素或许也能让它焕然一新。

主次关系
怎么对用户引导的关键就在于怎么处理主次关系。说白了就是对比，从视觉的角度上看：形状的大小，颜色，摆放的位置都会影响信息的重要与否。从大的区块来看，不要平均分割页面，三栏的设计应该让其中一栏明显短一些。从局部来看，也要把握信息呈现的节奏，比如yahoo中间新闻栏的设计，大图带大标题是第一要点，小图带字是第二要点，纯文本第三，节奏感、主次关系非常强。
常见问题
视觉设计师不懂代码，前端设计师在视觉方面又不专业。常常是实现出来的产品跟视觉设计出来的图片有所偏差。建议视觉设计师跟进调整。
广告图片破坏视觉效果。如果网站足够牛的话，可以让广告方遵循视觉规范。如果不行的话，起码设计师还能决定广告的尺寸，位置等等。
写这篇文章刚刚赶上4月份新浪、腾讯、淘宝的首页改版。单纯从视觉设计的角度上看，腾讯非常清爽，很用心。