color temp examples
warm blue #0099FF cool blue #0000CC
warm red #FF0000 Cool red #CC0000
a color pallet that works well together
FF0066 (accent or type)
0099FF (accent or type)
222222 (main color)
FFFFFF (main color)
D8CEA6 (main color)
There isnt one perfect place..
In art school they had us do “studies” in order to practice a concept or lesson. For instance in 2D design we learned about color thoery and we had to do a color “study” We learned to mix colors by hand to create a flat consistent hue. and then we had to show the transition of one hue to another. I had to go from yellow to violet. had a rectangle divided into 10 slices or slots in each was a flat color it went yellow, 90% yellow + 10% violet, 80% yellow + 20% violet, 70% yellow + 30% violet….. so it demonstrated a transition, the middle colors are tertiary colors..
Try this: in color theory you have warm colors (red orange yellow) and cool colors (green blue violet), but there is also something called color temperature regardless of what color.
find examples of a “warm” red and a “cool” red, and “warm” blue vs “cool” blue
it helped me understand the concept because I had to “do” the excercise.
in typography we had to do a “study” like this… pick a type font. choose a vowel and a constanant, a g an f and a ligature. i had to hand draw these characters in a technical drawing, taking measurements of each part of the character. this has no practical reason, the reason I had to do this is I can identify a type face just by zeroing in on a characteristic quality of certian part of the font. I can tell you badoni is a classic sans-serif font that is easily identified by parallel walls in the O, g, b and a characters. I can identify this font bu seeing a lowecase g alone.
This doesnt make you a type font expert, it makes you aware of what subtle details will work in your designs, it gives you a keen awareness of the details..
some exercises or “studies” of your own will help you.
set up a color study, design website comps using primary colors, secondary colors and complementary colors. then move to creating just color palates using 5 colors that work well together (convert them to web hex color values), then force yourself to use just those colors in a web design.
Go to www.google.com/webfonts and start viewing and comparing fonts for headlines (display fonts, decorative) and compare fonts for body text at different sizes, eliminate any that stop your eye from moving smoothly, plug a few into your designs and change the settings around.
Play with paragraph blocks using a grid, see what settings create the best harmony, use the rag right, rag left and centered settings for paragraphs. see what line height, character spacing and font size combos work the best for your paragraph blocks.
play with gutter spacing in your design. this is the margins in CSS and padding too. see how much margin should be used between elements, try using consistent margin spacing, learn where to make things a different margin spacing…
dont submit everything you make.
make 10 studies and narrow down to 2 of the strongest and then submit those. this is a discipline, force your self into your own process to make your self better, MAKE A DESIGN PROCESS!
Take some time to study proper design if you are serious about this, start with these. If they dont make sense to you its possible you are not wired for designing.http://coding.smashingmagazine.com/2011/03/14/technical-web-typography-guidelines-and-techniques/#tt-face http://www.smashingmagazine.com/2010/01/28/color-theory-for-designers-part-1-the-meaning-of-color/ http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/ http://www.noupe.com/design/a-graphic-design-primer-part-3-basics-of-composition.html http://sixrevisions.com/design-showcase-inspiration/using-photos-web-design/
these are the building blocks, this is not exaustive but a start. Going to art school gives a person all the fundamentals for design, but you dont have to go to school, you do have to understand the concepts though.
A lot of people learn to use Photoshop, Illustrator and learn to write HTML and CSS, but that doesnt make them a designer. In reality this is saying that if you can operate scientific apparatus like microscopes you are a scientist. These tools cant make you a designer. First learn to design and then use these tools help you to create a more refined end product.
Give a different font a try, use different font sizes and weights, variation in type is very visually appealing and directs the eye.
If you invest some time studying typography it will payoff in any composition you create. Its like color theory, if you understand how colors will work together you create a harmony visually.
The type needs to have a certian flow. Display fonts need to carry thier own weight (pun intended) while displayed in larger point sizes. This means the characters themselves need to be of good proportion and form. It becomes a composition itself when used that large. Note the difference between points, picas, pixels and em. Note when they are used and why.
copy fonts or what you use in smaller sizes to display bodies of text dont need to be so sophisticated on thier own but have thier own flow, they need to aid the eyes in proper movement. This is why publications have always used serif fonts, these are the fonts that have feet. They do give a more classic look but were created for reading. If you must use a sans-serif font for copy it needs to have a balance visually that makes it easy to read. (Kerning) Character spacing, leading (the space between lines of text) and how condensed the font is all factor into how readable it is at small sizes.
Understanding how to use fonts properly really changes the whole design drastically, but its also very subtle, subconcious even.
spend some time studying typography as a design element itself, you wont regret it.
Also if you are willing to give up that easy you wont learn to master design, or even gain proficiency.
start with Helvetica, study its history, its parent font and compare this to say Times New Roman. even 1 hour doing this will give you a base to jump off of.http://coding.smashingmagazine.com/2011/03/14/technical-web-typography-guidelines-and-techniques/