SitePoint » Web Design
	
	http://www.sitepoint.com/blogs
	News, opinion, and fresh thinking for web developers and designers.
The official podcast of sitepoint.com.
	Fri, 18 Dec 2009 09:32:11 +0000
	http://wordpress.org/?v=2.8.6
	en
	hourly
	1
			
		Designing Above the Fold and the Google Browser Size Tool
		http://www.sitepoint.com/blogs/2009/12/18/designing-above-the-fold-and-the-google-browser-size-tool/
		http://www.sitepoint.com/blogs/2009/12/18/designing-above-the-fold-and-the-google-browser-size-tool/#comments
		Thu, 17 Dec 2009 16:06:16 +0000
		Craig Buckler
				
		
		
		
		
designfoldGoogleweb
		http://www.sitepoint.com/blogs/?p=16544
		Google Working on Browser: What About Mozilla?What is a Browser?
Google Explains…Google Offers 3D Rendering in the Browser]]>
			“Above the fold” is a concept that originated in the
printed newspaper industry. Only the top half of a folded paper is
visible, so editors move important content to the top of the page to
entice people to buy the paper.
The term has been adopted by the web design industry where it refers
to the visible part of the page when it’s loaded. Many
“experts” still assume that content below the fold will be
missed. A certain large international IT company I worked for employed
a number of teams who completed to have their content placed in
prominent positions. Managers, designers, coders, copy writers, and
advert sales teams would all insist their content was more important
than others. It normally resulted in a confusing mess at the top of
every page.
I’ve never been convinced by the “above the fold”
argument. First, there is no clear fold line — monitors come in
different sizes, browsers may not be full-screen, and OS controls and
tool bars use space. Secondly, most users understand the scroll bar
and a recent report from CX Partners provides compelling evidence.
Their conclusions:

Less is more
Don’t cram everything above the fold — use of whitespace
and images encourage exploration.

Stark horizontal lines can discourage scrolling
Full-width thick lines can subconsciously indicate the end of a page,
so ensure content is visible to encourage scrolling.

Avoid in-page scroll bars
The browser scroll bar indicates the quantity of page content, so
avoid using iframes and scrollable divs which break the convention.
(I’d add that changing the scroll bar colors can cause users to
miss content too).


However, you may be able to employ simple design tweaks which ensure
people notice specific areas. For example, Google recently increased
Google Earth downloads by 10% when they shifted the
“Download” button upward by 100 pixels.
The company has subsequently created Browser Size, a new tool from
Google Labs which shows how many people can typically view areas of
your web page. The diagram is calculated from browser height and width
information collated at Google.com. For example, the top 600 x 300
pixels can be immediately seen by 99% of users. Whereas only 10% of
users can see content beyond 1250 x 800 pixels.

Designers can therefore create a page which ensures important content
is prominently displayed and minimizes scrolling for the majority of
users. It’s undoubtedly a useful tool, although I hope it
doesn’t lead to a plethora of tiny 600 x 300 pixel websites!
Links: 

Google Labs Browser Size tool
Google Blog announcement — Browser Size: a tool to see how
others view your website



Related posts:Google Working on Browser: What About Mozilla?What is a
Browser? Google Explains…Google Offers 3D Rendering in the
Browser]]>
			http://www.sitepoint.com/blogs/2009/12/18/designing-above-the-fold-and-the-google-browser-size-tool/feed/
		4
		
		
		Principles Of Design: Color
		http://www.sitepoint.com/blogs/2009/12/17/principles-of-design-colour/
		http://www.sitepoint.com/blogs/2009/12/17/principles-of-design-colour/#comments
		Thu, 17 Dec 2009 13:48:05 +0000
		Jennifer Farley
				
		
		
		
		
colorcolor schemescolourdesign
		http://www.sitepoint.com/blogs/?p=16583
		For the Color-Palette-ImpairedRemove Color Casts Using Photoshop Lab
ColorQuick ‘n’ Dirty Color Correction with LAB Color]]>
			Over the past five weeks I’ve written about simple principles you
can employ to improve your designs, namely Contrast, Proximity,
Balance and Value. In this final part of the series we’re looking at
color. Color in design is a huge topic in itself and I will
undoubtedly return to it in future blog posts, but for today let’s
take a look at how you can use color schemes when creating a mood for
your design.
Color is an integral part of our lives. Nature uses color to warn off
potential predators, to attract pollinators, to attract mates and to
show fruit is ready for eating. Anyone who drives a car in a city
follows traffic rules defined by red, green and amber, no text
necessary. In advertising and design, color is used to grab attention
and stimulate interest in ways that would be difficult to create by
any other means.  Through history color has been used to indicate
status, for example nobility and royalty is associated with purple,
and color has been an important source of symbolism in many countries.

Something’s not quite right here.
So how do you go about choosing the right colors for your design?
There is no single hard and fast rule, but the color wheel is a good
place to get started.
Warm and Cool
The three primary colors are red, blue and yellow. When you combine
these you get the three secondary colors: orange, purple and green.
When you combine each secondary colour with its neighboring primary,
you get the six tertiary colors: yellow-orange, yellow-green,
blue-green, blue-purple, red-purple, red-orange. That’s where the
color wheel comes from.

The image above shows colors arranged in the order of the spectrum:
Red, orange, yellow, green, blue and purple (going anti-clockwise).
Red is the warmest and blue is the coolest color. Warm tones appear in
the red, orange and yellow side of the spectrum, with the cool tones
appearing on the opposite side of the color wheel.
Monochromatic Color Schemes
The monochromatic color scheme uses variations in lightness and
saturation of a single color. This scheme tend to look clean, elegant
while producing a soothing effect. The primary color can be integrated
with neutral colors such as black, white, or gray. The downside of
monochromatic color schemes is that the can sometimes lack contrast
and appear less vibrant than some other schemes.


Monochromatic scheme with a blue base

Monochromatic scheme with a red base 
 Analogous Color Schemes
The analogous color scheme uses colors that are adjacent to each other
on the color wheel. One color is set as the dominant color,the other
add richness. The downside again is that there can sometimes be a lack
of contrast.


Analogous scheme with a blue base 
 Complimentary Color Scheme
The complementary color scheme is made of two colors that are opposite
each other on the color wheel. This scheme is very successful for
creating strong contrast and for drawing attention. 

 
 
Complementary scheme with a light green base

Split Complementary Scheme
The split complementary scheme is a variation of the standard
complementary scheme. Take one color on the wheel and two colors
adjacent to its complementary. The advantage of this scheme over a
complimentary scheme is that it can be a little more sophisticated
while still keeping a strong visual contrast.


Split Complementary scheme with a light green base
Triadic Color Schemes
The triadic color scheme uses three colors equally spaced around the
color wheel. It’s great for providing balance, richness and
contrast, although not as much contrast as the complimentary scheme.


Triadic scheme with a blue base
Tips for using these color schemes:
1. Choose one color to be used in larger amounts than others. You will
get a horrible mess if you try to use equal amounts of every color. Be
selective about your main or base color and then use the other colors
to add interest.

The By The Pond site uses a lovely dark-blue grey with complimentary
mustard text and highlights.
2. If the colors look too gaudy, subdue them.
3. There are several tools online for creating color schemes, my
favorite is Kuler. It allows you to play with the colour wheel and
choose the color schemes discussed here with one click.
4. *updated* Black, white and grey can be used in all of these color
schemes. You could think of them as neutrals that can be used with any
color scheme.
All colors are influenced by the colors placed around them. The symbol
below is the same shade of red on the left and right, but the
background color dramatically changes the look. The color scheme on
the left is extremely hard on the eye, while on the right the colors
work well together and have an uplifting feel.

Inspiration from Nature
If you’re looking for some inspiration and guidance for picking
colours, turn off the computer and go outside. Mother Nature provides
the best color combinations. Look at animals, plants, birds and take
note of the amazing color schemes. Take photographs of them and keep
them in your morgue file. Color Lovers has an excellent article on
butterfly color schemes and I’ve written in the past about how to
create color palettes from photographs in Photoshop and color schemes
from paintings in Kuler.
Things to think about when using color in your designs:
1. Are the colors in your design working well together or are they
hard on the eye? Is it difficult to read the text on the background?
2. Is your design too cool or too warm for what you want to convey?
You can cool down overheated designs with small hints of cool colors
(and vice versa).
3. Does your design work in black and white? If it does then a bit of
color experimentation can really bring your design to its full
potential.
Color theory is a huge, huge topic and we’ll be back to visit it
plenty more times. For now I hope this has been a helpful overview and
that you’ve found the series on principles of design useful. Thanks
for reading.
Do you have a natural flair for picking colors? What tools or methods
do you use to help with picking colors?


Related posts:For the Color-Palette-ImpairedRemove Color Casts Using
Photoshop Lab ColorQuick ‘n’ Dirty Color Correction with
LAB Color]]>
			http://www.sitepoint.com/blogs/2009/12/17/principles-of-design-colour/feed/
		7
		
		
		PANTONE 15-5519 (Turquoise) Is The New Black
		http://www.sitepoint.com/blogs/2009/12/15/pantone-15-5519-turquoise-is-the-new-black/
		http://www.sitepoint.com/blogs/2009/12/15/pantone-15-5519-turquoise-is-the-new-black/#comments
		Tue, 15 Dec 2009 06:00:10 +0000
		Jennifer Farley
				
		
		
		
colordesigngraphic designpantone
		http://www.sitepoint.com/blogs/?p=16490
		Colorize Black and White PhotosMen in Black Security GuidesFor the
Color-Palette-Impaired]]>
			
Pantone recently announced that PANTONE 15-5519 Turquoise is their
color of the year for 2010. Pantone are the company who created a
system for identifying, matching and communicating colors. Pantone
books of colors are used by graphic designers, fashion designers,
interior designers and just about any one who uses color in their
profession. They are heavy hitters in the world of color and their
choices are influential.
Leatrice Eiseman, executive director of the Pantone Color Institute
says of 15-5519,
In many cultures, Turquoise occupies a very special position in the
world of color, It is believed to be a protective talisman, a color of
deep compassion and healing, and a color of faith and truth, inspired
by water and sky.
Through years of color word-association studies, we also find that
Turquoise represents an escape to many – taking them to a
tropical paradise that is pleasant and inviting, even if only a
fantasy.
Color experts at Pantone say that the turquoise color can be used as a
colorful yet calming influence in home decor and as an accent in
clothing. If you’re getting married and want to be trendy with your
color choices, the experts are pointing out how well it offsets white.
If you’re thinking about using turquoise on your website, the RGB
value is 64, 224, 208. This is not an exact match for Pantone 15-5519,
but it is a nice calming blue-green.
And in case you were wondering, Pantone’s 2009 color of the year was
the “warm and engaging” Mimosa Yellow – Pantone 14-0848. To read
more about Pantone’s choice, check out the statement on their site.
Will you be using Turquoise on your web site in 2010? What will your
color for 2010 be?


Related posts:Colorize Black and White PhotosMen in Black Security
GuidesFor the Color-Palette-Impaired]]>
			http://www.sitepoint.com/blogs/2009/12/15/pantone-15-5519-turquoise-is-the-new-black/feed/
		5
		
		
		Create The Effect Of A Multiple Photo Collage In Photoshop
		http://www.sitepoint.com/blogs/2009/12/14/create-the-effect-of-a-multiple-photo-collage-in-photoshop/
		http://www.sitepoint.com/blogs/2009/12/14/create-the-effect-of-a-multiple-photo-collage-in-photoshop/#comments
		Mon, 14 Dec 2009 13:32:42 +0000
		Jennifer Farley
				
		
		
		
layer effectslayersPhotoshopshape layers
		http://www.sitepoint.com/blogs/?p=16482
		Making silhouettes in PhotoshopMake A Big, Beautiful Call-To-Action
Button In PhotoshopMaking A Clipping Mask With Text In Photoshop]]>
			Using shape layers and a giant pattern, we’re going to make a
single image that looks like it has been made from several
photographs. It’s fairly quick and easy to do, so let’s get
started.
1. Open the image that you want to create the effect on.

2. Make the whole image a pattern by choosing Edit > Define Pattern
and give the pattern a name. 
 
3. Create a new layer and then press Shift + Backspace (PC) or Shift +
Delete (Mac). This opens the Fill dialog. Choose Black from the Use
menu and click OK to fill the new layer with black.

4. On the toolbar, select the Rectangle tool. Then on the Options bar
at the top of the screen make sure the Shape Layers icon is selected.

5. Draw out a rectangle shape on top of the black layer. It doesn’t
matter what colour the rectangle is because we’ll be putting a
pattern over it.

6. Add a Layer Style to the rectangle layer by clicking on the FX
button on the bottom of the Layers palette and choosing Stroke. I set
the size to 10 pixels, position to Inside and Fill Type Color to
white. Don’t click OK yet.

7. Click on the words Pattern Overlay on the left hand side of the
Layer Effects dialog box. Select the pattern that you made in step 2.
Press the Snap To Origin button and uncheck “Link with Layer.”

Click OK and the image should look something like this:

8. If you move the rectangle around the image you’ll see how the
pattern stays in position, this is due to the fact we pressed “Snap
To Origin” in the last step. Now you can just make duplicates of the
first rectangle and scatter them throughout the image. To duplicate
the rectangle, make sure the rectangle layer is selected and hit Ctrl
+ J (PC) or Cmd + J (Mac). 
 9. Drag the new rectangle to a different part of the image. Rotate
the rectangle by choosing Ctrl + T or Cmd + T to free transform the
object. After rotation, add a Drop Shadow effect by clicking on the FX
button on the Layers palette and choosing Drop Shadow.

The image should look a little bit like this:

10. Continue duplicating and rotating the rectangles. Add as many
rectangles as you want. You won’t need to add the Drop Shadow effect
again. It will be duplicated with the layer.

To complete the image you can play around with the stacking order of
the rectangles which will change how one “photo” sits on top of
another.
And there you have it.


Related posts:Making silhouettes in PhotoshopMake A Big, Beautiful
Call-To-Action Button In PhotoshopMaking A Clipping Mask With Text In
Photoshop]]>
			http://www.sitepoint.com/blogs/2009/12/14/create-the-effect-of-a-multiple-photo-collage-in-photoshop/feed/
		4
		
		
		Web Typography Bar Raised As New Foundries Join Typekit
		http://www.sitepoint.com/blogs/2009/12/11/web-typography-bar-raised-as-new-foundries-join-typekit/
		http://www.sitepoint.com/blogs/2009/12/11/web-typography-bar-raised-as-new-foundries-join-typekit/#comments
		Fri, 11 Dec 2009 01:00:39 +0000
		Jennifer Farley
				
		
		
		
		
designfontstypekittypography
		http://www.sitepoint.com/blogs/?p=16359
		Web Fonts Get Real with TypekitTypography: Concordant, Contrasting
& Conflicting!Surprising: Web Shows Growing US Interest in
Football (Soccer)]]>
			Lots of good news from Typekit as this week they announced several
new type foundries have signed up, allowing use of their fonts on the
web. New typefaces have been added at every level of service.
Suitcase Type Foundry is a Czech type foundry. Typekit subscribers can
start using fonts like Purista, Kulturista, and RePublic.

Purista Medium

Kultrista Light Italic
 

Republic Regular

League of Movable Type is the first free and open-source type foundry.
All the fonts from the League of Movable Type are available in the
Trial library, so anyone can use them.

League Gothic

Blackout Midnight

psType is an independent digital type lab based in California.  Their
font Ratio is now included in the Typekit library.

Ratio Heavy
Rui Abreu is a Portuguese type and graphic designer. He is adding
Gesta to the Typekit library.

Gesta Light
Last month FontFont also joined Typekit making over 20 new typefaces
available. FontFont is a large type foundry with over 20 years in the
business, so it’s great to see bigger companies like that getting
involved.

FF Market Web
It’s great to see the variety of fonts that are now becoming
available to use on websites. It will be interesting to see how web
typography develops over the next few years and how we’ll look back
at the time when you were restricted to designing websites using only
a handful of typefaces.
Typekit has a number of different prices plans:

Free (costing nada) and allowing 5GB of bandwidth per month and use of
the trial library.
Personal $24.99 per year allowing use of the personal library
Portfolio $49.99 per year allowing use of the full library
Performance $249.99 per year allowing use of the full library.

Find out more from Typekit.
Are you a Typekit user? How do you find the service?


Related posts:Web Fonts Get Real with TypekitTypography: Concordant,
Contrasting & Conflicting!Surprising: Web Shows Growing US
Interest in Football (Soccer)]]>
			http://www.sitepoint.com/blogs/2009/12/11/web-typography-bar-raised-as-new-foundries-join-typekit/feed/
		4
		
		
		Ten Fat Footers: How to Make Good Use of that Space at the End of
the Page
		http://www.sitepoint.com/blogs/2009/12/10/ten-fat-footers-web-design/
		http://www.sitepoint.com/blogs/2009/12/10/ten-fat-footers-web-design/#comments
		Thu, 10 Dec 2009 01:00:03 +0000
		Jennifer Farley
				
		
		
		
designfooterfootersweb design
		http://www.sitepoint.com/blogs/?p=16348
		Sketch Style: Ten Fonts and Ten Design ElementsTen Web Sites, Ten
Years AgoTen Examples Of Unconventional Site Navigation]]>
			Not so long ago, there was a concern that everything of importance
on your web site should appear “above the fold.” Crossing over
from the world of newspaper and graphic design, the “above the
fold” concept is that an important article or photograph should
always appear on the upper half of the front page of a newspaper or in
the case of a web site, on the part of the page you can see without
scrolling. By extension, this meant that you should only put the less
important (or less interesting) stuff at the bottom of the page, to
the area where scrolling is required. So that’s why on lots of web
sites you see have teeny-tiny text links to things like privacy
policies, terms and conditions and disclaimers.
However, many experts now consider “above the fold” to be
irrelevant in web design as so many web users are used to scrolling
without even thinking about it. It still makes sense to put your
important story or article at the top of the page, but as users often
scroll down to the bottom, why not put something cool, useful and
interesting down there, too?
Many blog themes offer widgetized footer sections and this has pushed
the boat out in terms of what people are putting in their web site
footers. Some of the most popular items to be found include:

Sitemaps
Twitter tweets
Flickr thumbnails
Recent News/Blog posts
Advertising
RSS feeds
Contact Forms
Search
About Me
Author’s Photograph

It seems like pretty much anything goes, so maybe it’s time to
re-evaluate that space at the bottom of your page. So for your design
inspiration, here are ten web sites making good use of their footers
with eye-catching design and useful functionality.
Noded’s footer gives plenty of information about the founders as
well as some nice photography.

CSS Tricks shows a little bit about the author Chris Coyier and his
projects, and his latest tweet.

Colorful and textured, ipremidieci has a huge fat footer.

Tickerville lets you know you’ve reached the end of the line.

Hutchhouse’s footer is clean and full of site-related information.
They’ve also included speech bubbles linking to their blog, twitter
and last fm.

Ectomachine’s somewhat grungy look continues into the footer which
looks like it’s been held together by safety pins.

NGen Works footer is big and bold with links to their fun stuff whilst
showing off some of their clients..

The SquareFactor site is built on one page and when you hit the bottom
you can see the full navigation, their contact details and importantly
a contact form with a monster face drawn into it.

With a beautiful background illustration and a clear, clean footer
layout, Fresh Coloring is easy on the eye.

David Hellman’s got a little living room at the bottom of his site.

Do you use the footer area on your web site for more than copyright
information? What other sites have you liked with big footers? 


Related posts:Sketch Style: Ten Fonts and Ten Design ElementsTen Web
Sites, Ten Years AgoTen Examples Of Unconventional Site Navigation]]>
			http://www.sitepoint.com/blogs/2009/12/10/ten-fat-footers-web-design/feed/
		12
		
		
		Principles of Design: Value
		http://www.sitepoint.com/blogs/2009/12/09/principles-of-design-value/
		http://www.sitepoint.com/blogs/2009/12/09/principles-of-design-value/#comments
		Wed, 09 Dec 2009 08:57:30 +0000
		Jennifer Farley
				
		
		
		
		
contrastdesigndesign principlesdesign theoryvalue
		http://www.sitepoint.com/blogs/?p=16335
		New Series: Principles Of DesignPrinciples Of Design:
ContrastPrinciples Of Design: Color]]>
			So far in this series we’ve looked at Balance, Proximity and
Contrast as principles of design. You’ve seen how applying these
concepts can help you organize your information and make it eye
catching. Today we’re looking at Value. Value and color as design
principles are related to each other but not every design will have
color, but every design will have value. So what is value?     
Value, also sometimes referred to as tone, is the relative lightness
and darkness of an object.  It has nothing to do with the price
of the design! As soon as you place an object on your blank canvas
(whether for print or web) that element has value. In the image below,
the value of each of the silhouetted dogs gives a different impression
about the dog. Does the dog on the left have blonde hair? Is he in
fog?    
     
Value is relative
Every element in your design has a value from 1% black to 100% black.
You’re not always going to be working with a white or grey
background though. If you’re working on a black background the value
will be 1% white to 100% white. This suggests another quality of
value. Value is relative.   
     
As you can see in the example above, the value of each dog is relative
to the other dogs and also to the background they’re placed on. The
greater the difference in value between the object and it’s
background, the greater the Contrast. Value is a very powerful tool
when creating the look and feel of a design.    
Value and color
Although color is incredibly important in design (and we’ll be
looking at color next week), the best designs do not rely solely on
color to make an impact. A successful design should work well in black
and white to begin with, and this is where value comes into play.
Let’s take the example of a couple of logos. I’ve taken two logos
from Logopond and desaturated them. The first logo looks good in color
but the effect partially disappears in black and white and the logo
looks weak.     
  
This second logo, while maybe not looking quite as vibrant in
grayscale as in color still holds up well.    
  
You could argue that perhaps the first logo was designed to only be
used on a website, and if that’s the case, fine. But you should
always think (and experiment with) how your design might look in just
one color. Does the design fall apart if it appears in a newspaper or
a fax?     
Value can be used for emphasis. The poster for Jungle Fever shows two
hands clasped together with the value of light and dark skinned
fingers providing contrast. I’ve mentioned in the previous design
principle posts, that these principles rarely work in isolation. This
poster also uses balance and repetition to create and eye-catching
design.
 
 
The Howard Wing website is simple and elegant and uses values very
effectively. The large dark-valued photographic backgrounds used
throughout the site work well with the light text.    
  
As we’ve seen in the examples so far, value is most often used to
create contrast. However, if you want to create a completely different
mood, use values to create a lack of contrast. The White Album by The
Beatles uses white embossed text on a white background. You can’t
really get more subtle than that. The value comes from the hint of
shadow cast by the embossed letters. 
     Image Credit: Beatles Bible
So to sum up, things to think about when using value in your designs. 
  
1. Value occurs in every design. Just by placing an element on a page,
value is created. Have you chosen the values or is it an accident?
2. If you want to achieve contrast, are the values of each element
different enough?
3. Are the values you’re choosing eye-catching? Do they help move
the viewer’s eye through the design. 
4. Have you created the right mood with the values you’ve picked.
Should the design be subtle or in your face?
 
Next week I’ll finish this series by looking at color. I hope you
can join me.


Related posts:New Series: Principles Of DesignPrinciples Of Design:
ContrastPrinciples Of Design: Color]]>
			http://www.sitepoint.com/blogs/2009/12/09/principles-of-design-value/feed/
		6
		
		
		New Branding Revealed For Winter Olympics 2014
		http://www.sitepoint.com/blogs/2009/12/08/new-branding-revealed-for-winter-olympics-2014/
		http://www.sitepoint.com/blogs/2009/12/08/new-branding-revealed-for-winter-olympics-2014/#comments
		Tue, 08 Dec 2009 13:38:35 +0000
		Jennifer Farley
				
		
		
		
		
designlogologo designlogostypography
		http://www.sitepoint.com/blogs/?p=16307
		Geek Olympics: 24 hours, 2 teams, 1 trophy…Microsoft to
Support IE6 Until 2014Winter in the Google-verse]]>
			The official logo for the Sochi 2014 Winter Olympics was revealed
last week. This is the first winter games to be held in Russia and it
is the first Olympic logo to include an internet URL.    
 
According to the official blurb on the brand,
The Sochi 2014 emblem maintains a dialogue between the past and the
future. Fusing various dimensions of Russian culture, the brand can
promote several images of our vibrant country: 

A country rich in history, embarking on a successful future 
A country open to opportunities and the passion to make dreams a
reality 
A country that is committed to equality and celebrates diversity.     
  


 During the initial bidding process, every city provides a logo which
is sometimes changed by the winning city. You can see the original bid
logo below. Should they have stuck with this one rather than replace
it with the new official logo?   

The new official typographic logo has been designed to appear as a
reflection of the word Sochi on top with the year underneath. The city
of Sochi sits at the meeting point of the sea and the mountains and
this was part of the reasoning behind the design. The sea acting as a
mirror to reflect the mountains. The logo was designed by Interbrand
and an Expert Brand Council established by the Sochi 2014 Organizing
Committee.     
  
I’m not sure if the new official logo almost seems like a relief
after the London 2012 logo which got a universal kicking when it was
revealed a few years ago. I like the reflected typography on the left
hand side but it seems a bit busy on the right hand side.
Brand Republic have an excellent in-depth article on the new logo as
well as reviews and discussion of the logo by a number of London
design agencies. 
What do you think about the official logo? Is there a need to have a
url in the logo?


Related posts:Geek Olympics: 24 hours, 2 teams, 1
trophy…Microsoft to Support IE6 Until 2014Winter in the
Google-verse]]>
			http://www.sitepoint.com/blogs/2009/12/08/new-branding-revealed-for-winter-olympics-2014/feed/
		9
		
		
		Spaced Out (Part 2): Kerning In Typography
		http://www.sitepoint.com/blogs/2009/12/04/spaced-out-part-2-kerning-in-typography/
		http://www.sitepoint.com/blogs/2009/12/04/spaced-out-part-2-kerning-in-typography/#comments
		Fri, 04 Dec 2009 04:16:30 +0000
		Jennifer Farley
				
		
		
		
		
		
		
designfontstypography
		http://www.sitepoint.com/blogs/?p=16059
		Spaced Out: Tracking In TypographyFocus On Typography, Part 4:
SpaceTwo Quick Illustrator Text Effects]]>
			Last week, we took a look at tracking, which is the amount of space
between letters, and how it is an important part of designing with
type. Today, we’re looking at a close mate of tracking called
Kerning. While tracking is the overall letter spacing, kerning is
selective letter spacing between pairs of letters.
Certain letters, when placed beside each other create an awkward
space. We use kerning to increase or reduce that space to make text
more readable and more visually appealing. Here’s a few examples of
letters which don’t always sit well together.

There are large gaps left between these letters. By kerning the
letters in pairs, we can reduce just the space between those letters.

Kerning in Photoshop and Illustrator
Both Photoshop and Illustrator allow you to kern using Metrics (also
known as Auto Kerning) or Optical Kerning. To apply Kerning;
1. Open the Character palette in Photoshop or Illustrator.
2. Select the Type tool and click in between the letters you want to
Kern.
3. Choose either Metrics, Optical or a numerical value in the Kerning
field on the drop down menu. You can type in your own values in this
field if you want to.


Auto Kerning in the Illustrator Character palette 
Optical Kerning adjusts the spacing between adjacent characters based
on their shapes.
Metrics Kerning uses kern pairs. Kerning information for many commonly
kerned character pairs, such as LA, P., To, Tr, Ta, Tu, Te, Ty, Wa,
WA, We, Wo, Ya, and Yo, is built in to quality fonts. Some high
quality fonts may define up to 1000 different kerning pairs, and
automatic kerning occurs without having to intervene.
Kerning is most frequently required when text is set in all caps. Take
a look at the example below. The text on the top is default text with
no kerning. Optical Kerning has been applied on the text underneath,
between the letters W and A, and between A and T. The text on the
bottom clearly looks better.

Most of the time, you’re trying to even out the appearance of the
space between letters, however there are times when extreme kerning or
deliberately over-kerning creates special effects with tightly spaced
or overlapping characters. Typographic logos depend heavily on good
tracking and kerning. Here’s some example of logos using extreme
kerning:



Have you seen any others?


Related posts:Spaced Out: Tracking In TypographyFocus On Typography,
Part 4: SpaceTwo Quick Illustrator Text Effects]]>
			http://www.sitepoint.com/blogs/2009/12/04/spaced-out-part-2-kerning-in-typography/feed/
		1
		
		
		Enter The Annual Design Awards and Get Noticed!
		http://www.sitepoint.com/blogs/2009/12/04/enter-the-annual-design-awards-and-get-noticed/
		http://www.sitepoint.com/blogs/2009/12/04/enter-the-annual-design-awards-and-get-noticed/#comments
		Fri, 04 Dec 2009 03:37:38 +0000
		Andrew Gardner
				
awarddesign
		http://www.sitepoint.com/blogs/?p=16182
		Aussie Web Design Awards Roundup2006 Create: Awards for Excellence
in Australian Design99designs Voted Best Web Site At SmartCompany
Awards]]>
			
SitePoint is proud to be sponsoring the first ever Annual Design
Awards.  
In a refreshing change of tack, these awards won’t offer hundreds of
categories, or set exorbitant entry fees so that only the big guys can
afford to enter. These awards set the simple goal of discovering and
celebrating outstanding talents in the design world.  It’s open to
everyone around the world, from large corporate professionals to
work-from-home freelancers.  And just to give you that warm fuzzy
feeling, The Annual Design Awards are being held in aid of Cancer
Research UK.
The team behind this promising new global event is aiming to increase
awareness and recognition of outstanding visual communication – and
that’s where you come in.  Entries close on April 22, 2010 and
nominees are announced one month later (May 22, 2010), so you’ve got
plenty of time to find your muse.  Use the promotional code SITEP22ADA
during the entry process and you’ll receive a 25% discount.  Please
note, to take advantage of this special ‘friends of SitePoint’
discount rate you will need to enter before December 25, 2009.  Just
think of it as a Christmas present!
Need some motivation? 
How about the fact that all award winners will be featured in numerous
magazines and blogs, reach over 1 million designers, and have their
work judged by some of the best in the business?  Every entrant in the
Annual Design Awards will feature in the new Designers Directory, have
the chance to feature in the yearly book that will be published to
showcase the best designs, and have access to a designers’
notice board on the design awards site (where designers can promote
their business, special offers, job vacancies and much more).  Go here
for even more motivation, and a full list of the benefits of entering.
Don’t forget, you can keep up with all the latest news by following
the Annual Design Awards on twitter.
For further information on categories, judging, and more, visit the
web site.


Related posts:Aussie Web Design Awards Roundup2006 Create: Awards for
Excellence in Australian Design99designs Voted Best Web Site At
SmartCompany Awards]]>
			http://www.sitepoint.com/blogs/2009/12/04/enter-the-annual-design-awards-and-get-noticed/feed/
		0
		
	



The Best Equipment Deals | Best Music Deals
Midi Mime Types SiteMap Contact Subscribe © 2014 JimmyLandStudios