Freelancing is not easy. Designers out there are good and they are getting better every day, not to mention the up and coming talents who spring forth from the mist of anonymity daily. This leads me to believe that competition for jobs is more real than ever. What’s more, if you take a closer look at the css galleries, many designers portfolios are made up of the same work. Do not go that route. Create for yourself and promote yourself with your work.

It’s not easy to stand out of the crowd as it used to be just a few years ago, but these tips should help you get ahead.

1. Try and be really unique
2. Find your strengths (e.g. wordpress design)
3. Build a brand around you as it’s yourself whom you are selling
4. Create a one-off portfolio focusing on your strongest skill
5. Draft a carefully-wrought CV in PDF format
6. Send your portfolio’s address to all of the css galleries
7. Find job assignments on the most popular job boards
8. Answer all the incoming client emails
9. Write quality-posts in your blog
10. Set up a Twitter account and follow the best ones in the trade
11. Register at LinkedIn
12. Promote yourself at popular blogs and forums
13. Run targeted advertisements
14. Join one of the professional organizations of webdesigners
15. Don’t you ever give it up!

Conclusion

Not giving up is a big one. Like all good things it comes with time and experience. Not everyone can become a successful freelancer over night. If you have any other tips to put on the table leave them in the comments for us all.

I’ve seen the same list of famous design blogs to follow floating around the inter-web for at least a year now. Lets move on from the “WooHoo” Smashing Magazine and “Rock On” Web Designer Depot (these blogs rock by the way and you should follow them). Lets give the little guys a push and a shove into the lime light. Let’s give a hand to the small guy who is just trying to make a name in the design community. A lot of these so called “little guys” are publishing amazing articles almost daily and I see them being lost under the weight of the “Big Guys” news feeds. So I propose a challenge. Add these guys to your news reader for a month and then decide which blogs to keep and which to toss. Give the little guys a chance to shine. So with now further ado: The not so famous design blogs to follow list.

* Let’s get my site out of the way first…

Lucas Cobb Design

Check out Lucas Cobb Design or follow the RSS

(more…)

1. Use custom permalinks
This is an easy setting but one I’ve seen overlooked on many, many WordPress sites. The default setting is http://yourdomain.com/?p=123. How useful is that? If you leave your permalinks set this way, you lose all the value of those keywords that you used in the title of your post or page. Instead, select the custom option and set the format to /%postname%/ or /%category%/%postname%/. Add the category if you have been strategic with naming your categories using your main keywords. Otherwise, use just the post name and make sure you use keywords in their titles.

2. Create a sitemap in XML
With WordPress and plugins like Google XML Sitemaps it is a very easy task. Google has a variety of other useful tools, too, such as Website Optimizer and Webmaster Central.

3. Add tags to your posts
WordPress enables you to tag your post with focused keyword phrases so that the search engines can index them more effectively. Don’t confuse Tags with categories. Categories are your file cabinet draw where you file a document under one particular topic. Tags allow you to describe your post in more specific terms that help people find your information. By properly tagging your posts with relevant keywords, you help people find and cross reference your post with others. Stick to just a few tags, however, as too many tags will dilute their effect.

(more…)

Minimize HTTP Requests
80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages.

Use a Content Delivery Network
The user’s proximity to your web server has an impact on response times. Deploying your content across multiple, geographically dispersed servers will make your pages load faster from the user’s perspective. But where should you start?

As a first step to implementing geographically dispersed content, don’t attempt to redesign your web application to work in a distributed architecture. Depending on the application, changing the architecture could include daunting tasks such as synchronizing session state and replicating database transactions across server locations. Attempts to reduce the distance between users and your content could be delayed by, or never pass, this application architecture step.

Remember that 80-90% of the end-user response time is spent downloading all the components in the page: images, stylesheets, scripts, Flash, etc. This is the Performance Golden Rule. Rather than starting with the difficult task of redesigning your application architecture, it’s better to first disperse your static content. This not only achieves a bigger reduction in response times, but it’s easier thanks to content delivery networks.

A content delivery network (CDN) is a collection of web servers distributed across multiple locations to deliver content more efficiently to users. The server selected for delivering content to a specific user is typically based on a measure of network proximity. For example, the server with the fewest network hops or the server with the quickest response time is chosen.

Some large Internet companies own their own CDN, but it’s cost-effective to use a CDN service provider, such as Akamai Technologies, Mirror Image Internet, or Limelight Networks. For start-up companies and private web sites, the cost of a CDN service can be prohibitive, but as your target audience grows larger and becomes more global, a CDN is necessary to achieve fast response times. At Yahoo!, properties that moved static content off their application web servers to a CDN improved end-user response times by 20% or more. Switching to a CDN is a relatively easy code change that will dramatically improve the speed of your web site.

(more…)

What is color? Take a moment to consider this question before reading on.

The first true critical thinking about color occured during the Renaissance in Europe. A number of artists, chemists, and philosophers took it upon themselves to develop working theories about the nature of light and color.

In a previous article, I referred to color as an element of design, one of the basic tools that designers can use when building a composition. I defined color as “the response of the eye to differing wavelengths of radiation within the visible spectrum.” This is a valid definition, but it is only one of many different thoughts on what color is.

Over the course of my next few articles, we will explore the subject of color, including the historical underpinnings of contemporary color theory, key color theories, theorists who have been influential over the past few millennia, and the current state of color—including color in digital environments.

We will, in the end, keep the focus on the discipline of design. But, as in previous articles, we must deviate for a time to better explore the topic at hand. As with all of the principles and elements of design, much is inherited from other fields and we must initially expand the scope of our investigation.

(more…)

In the last three articles, we discussed the fundamental concepts of design. We started with the principles of logo design—the underlying tenets of the profession dealing with the arrangement of objects in a composition. Next, we looked at the elements of design—the objects used to create the composition itself. Finally we looked at the medium of the Web, and at some of the constraints inherent in such an environment that could alter the way we use the principles or elements of design. Taken together, the topics covered thus far form the basis of any design education. And they can help any designer, whether a novice or professional, advance in their profession.

Bridging the Gap
So far we have looked at the fundamentals of design in a rather abstract way, discussing and illustrating the concepts using simple shapes and forms. This is an excellent way to introduce the principles and elements of design, but does not bridge the gap between theory and practice. In this article we will be reviewing many of the topics previously covered, but we will be doing so using actual Web sites so that we can see how everything we have been talking about fits together.

I have reviewed eight designs. I will discuss each one in detail, highlighting the principles and/or elements of design that they make best use of. I’ve included a sample screen shot and a more abstract view of the design highlighting the relevant principle or element. In addition, you can click on the title image to go to the actual site in the Zen Garden for direct reference.

(more…)

In the last two articles we looked at the basic tenets of the design practice, the principles and elements of design. We stepped back a bit from any one medium to investigate the more universal concepts of design in general, and how these axioms are often derivative of other art forms. We tried to establish a solid foundation of design terms and techniques that were independent of any one implementation.

I often get asked what size I design at and whether or not I use fixed-width or percentage-based designs, and why. The best answer I can give is that it depends on the situation. I use both fixed-width and percentage-based designs, and determine which to use based on user research, intended audience and client expectations.

Now it is time to turn our attention to the Web. Within any given medium there are unique constraints that can affect the way designers make use of the principles and elements of design. These constraints can be based on a variety of different things including materials, technology, processes and standards in the industry. The Web is no different. Designing for a Web-based environment enacts a set of unique issues that need to be considered before implementation can be successful.

(more…)

The elements and principles of design are the building blocks used to create a work of art. The elements of design can be thought of as the things that make up logo design, a painting, drawing, design etc. Good or bad – all paintings will contain most of if not all, the seven elements of design. The Principles of design can be thought of as what we do to the elements of design. How we apply the Principles of design determines how successful we are in creating a work of art. Previously I wrote about ‘the Principles of Design‘ and now I will continue with the Elements of Design by discussing the components of the composition itself, and provide the designer with a basic set of tools to begin working with.

In The Principles of Design we looked at half of the basic tenets that underlie the field of design. The principles of design represent the basic assumptions of the world that guide the design practice, and deal with the arrangements of objects in any given composition. In this column we investigate the other half of the tenets, the elements of design, in an effort to bring together a solid foundation on which we can base all future investigations.

What are Elements of Design?

The elements of design are the basic components used as part of any composition. They are the objects to be arranged, the constituent parts used to create the composition itself. In most situations the elements of design build upon one another, the former element helping to create the latter, and the elements described in this column are arranged as such. We will be focusing on the elements of point, line, form (shape), texture and color.

Point
A point is an element that has position, but no extension. It is a single mark in space with a precise, but limited, location. Alone it can provide a powerful relation between negative and positive space, but when grouped with other points the Gestalt grouping principal of closure tends to kick in and the brain compulsively connects the points together. Line or form is a natural result of multiple points in space.

Line
A line is an element characterized by length and direction. Lines create contours and form, and are often used to convey a specific kind of feeling or point to an important feature in a design. Lines are also used to create perspective, and dominant directional lines are often adopted to create a sense of continuance in a composition. In addition, lines that are grouped together often create a sense of value, density or texture.

Form (Shape)
The simplest definition of shape is a closed contour, an element defined by its perimeter. The three basic shapes are: circle, rectangle (square) and triangle. Form is the shape and structure of a dimensional element within a given composition. Form can be both two-dimensional and three-dimensional and can be realistic, abstract or somewhere in between. The terms form and shape are often used synonymously, which is why they are both included here. In reality, form is derived from the combination of point, line and shape.

Texture

Texture is used to create surface appearance, and relates to the physical make-up of a given form. Texture often refers to the material that something is made of, and can be created using any of the elements previously discussed. Texture is both a visual and a tactile phenomenon.

Color
Color is the response of the eye to differing wavelengths of radiation within the visible spectrum. The visible spectrum is what we perceive as light. It is the part of the electromagnetic spectrum that we can see. The typical human eye will respond to wavelengths between 400-700 nanometers (nm), with red being at one end (700 nm), violet at the other (400 nm) and every other color in between these two.

There are many different kinds of color systems, and many different theories on color. We will get into that kind of detail in a later column. For now we will focus on the basics, using a color wheel for illustration purposes. There are three main components of color:

• Hue: Where the color is positioned on the color wheel. Terms such as red, blue-green, and mauve all define the hue of a given color.
• Value: The general lightness or darkness of a color. In general, how close to black or white a given color is.
• Saturation: The intensity, or level of chroma, of a color. The more gray a color has in it, the less chroma it has.

Color Harmonies
Color harmonies serve to describe the relationships certain colors have to one another, and how they can be combined to create a palette of color.

• Complementary: A complementary relationship is a harmony of two colors on the opposite side of the color wheel. When complementary colors are placed side-by-side they tend to enhance the intensity (chroma) of each other, and when they are blended together they tend to decrease the intensity of each other
• Analogous: An analogous relationship is a harmony of colors whose hues are adjacent to one another on the color wheel. Analogous colors tend to be families of colors such as blues (blue, blue-violet, blue-green) and yellows (yellow, yellow-orange, yellow-green).
• Triadic: A triadic relationship is a harmony of three colors equidistant from one another on the color wheel. Primary colors and secondary colors are examples of color triads.

Color spaces
Color is typically organized in a hierarchal fashion, based on how colors are mixed. A color space helps to define how the colors are mixed, based on the medium in which the colors are used. There are two different kinds of color spaces:

• Subtractive: A subtractive color space is the traditional color space that most people refer to when they talk about color. It is pigment-based color, as in the mixing of paint. In a subtractive color space, the pigments manipulate the wavelengths that our eyes see. The absence of any pigment produces white, and all pigments blended together produces black.
• Primary colors: Red, yellow, blue
• Secondary colors: Orange, green, violet
• Additive: An additive color space is an electronic color space. It is light-based color, as in the mixing of color on the computer. In an additive color space, light is added to the screen in differing amounts to produce color. The absence of any light is black, the presence of all light, or light at full intensity, is white.
• Primary colors: Red, green, blue<.li>
• Secondary colors: Yellow, magenta, cyan

Related Concepts
There are many additional concepts that are related to the elements of design. These can include specific terms and/or techniques that are in some way based on one or more of the above ideas. In they end, they add to the collection of compositional tools available for use by the designer.

Typography

Typography is the art of arranging typefaces, selecting style, line spacing, layout and design as a means of solidifying language. There are many facets to typography, and only a brief investigation will be started here based around some common terms.

• Baseline: The line on which all letters rest.
• Beardline: The line reached by the descenders of lowercase letters.
• Bowl: The round or elliptical parts of a letterform.
• Cap line: The line reached by the top of uppercase letters.
• Counter: The white space enclosed by a letterform, whether completely or partially.
• Extenders: Extenders are the parts of letters that extend either below the baseline (descenders) or above the midline (ascenders).
• Midline: The top of lowercase letters such as a, c, e and the top of the torso of lowercase letters such as b, d.
• Serif: A stroke added to either the beginning or end of one of the main strokes of a letter.
• Stem: The main stroke of a letter that is generally straight and not part of a bowl.
• Topline: The line reached by the ascenders of lowercase letters.
• X-height: The distance between the baseline and midline of an alphabet. The x-height is usually the height of the unextended lowercase letters.

Pattern
Pattern is the repetition of shape or form. It can also reflect the underlying structure of a design by organizing the surfaces or objects in the composition. There are many different kinds of patterns:

• Flowing: A flowing pattern is based on the repetition of an undulating line, and reflects a natural meandering through a composition.
• Branching: A branching pattern is the repetition of forking lines, or patterns of deviation. These kinds of patterns can be found in almost all plants, and in many other places in the natural world.
• Spiraling: A circular pattern, or a pattern that winds in and around itself.

Movement

Movement can be defined as motion of objects in space over time, and is often described in one of two ways:

• Literal: Literal movement is physical movement. Examples of literal movement include: Products such as the automobile, motion pictures and dance.
• Compositional: Compositional movement is the movement of the viewer’s eye through a given composition. Compositional movement can be either static or dynamic. Static movement jumps between isolated parts of a composition. Dynamic movement flows smoothly from one part of the composition to another.

Conclusion
We have thoroughly explored the fundamental concepts of the field of design. The principles of design give us a way of looking at the world. The overarching axioms of the profession affect the designer universally, and provide guidance for any composition. The elements of design discuss the components of the composition itself, and provide the designer with a basic set of tools to begin working with.

In order to explore the fundamentals of design, we needed to step back a bit away from any one medium. Now it is time to focus in on the Web. In the next column we will investigate the constraints of designing for the Web that can effect how we make use of the principles and elements of design. We will look at medium-specific concepts, such as screen resolution, graphics compression and color mixing in additive spaces.

Starting with the Basics

This column is about Web design—really, it is—though it may at times seem a bit distant and distracted. In my opinion, any good discussion about design begins with the fundamentals. Almost by definition, the primary tenets around which any field is based are universal: they can be applied to a variety of disciplines in a variety of ways. This can cause some confusion as principle is put into practice within the unique constraints of a particular medium.

We can group all of the basic tenets of design into two categories: principles and elements. For this article, the principles of design are the overarching truths of the profession. They represent the basic assumptions of the world that guide the design practice, and affect the arrangement of objects within a composition.

Web design is a relatively new profession compared to other forms of design, due to the youth of our medium. As with any design discipline, there are aspects of the Web design process that are unique to the medium, such as screen resolution, additive color spaces and image compression. But too often these more unique details override our sense of the bigger picture. We focus on the fact that it is Web design and push aside core design concepts—concepts that can that make any project stronger without interfering in the more technical considerations later on.

How Does Web Design Fit In?

I tend to define Web design as being one of many disciplines within the larger field of design (a peer to print design, industrial design, interior design, etc.). To step back even further, I see design as a discipline within the field of art (a peer to painting, illustration, sculpture, etc.) The point is that in order to start with a discussion about the fundamentals of design as they relate to Web design we need to understand that there is a good degree of inheritance that design has received over the years from other art forms. These art forms, such as lithography, typography, painting/illustration and industrial design, evolved over many centuries, and a number of basic ideas have emerged as providing universal guidance to any artistic endeavor. When talking about fundamental concepts we inevitably look outside our discipline and adopt a slightly larger perspective.

The Principles of Design

There are many basic concepts that underlay the field of design. They are often categorized differently depending on philosophy or teaching methodology. The first thing we need to do is organize them, so that we have a framework for this discussion.

We can group all of the basic tenets of design into two categories: principles and elements. For this article, the principles of design are the overarching truths of the profession. They represent the basic assumptions of the world that guide the design practice, and affect the arrangement of objects within a composition. By comparison, the elements of design are the components of design themselves, the objects to be arranged.

Let’s begin by focusing on the principles of design, the axioms of our profession. Specifically, we will be looking at the following principles:

• Balance
• Rhythm
• Proportion
• Dominance
• Unity

Balance

Balance is an equilibrium that results from looking at images and judging them against our ideas of physical structure (such as mass, gravity or the sides of a page). It is the arrangement of the objects in a given design as it relates to their visual weight within a composition. Balance usually comes in two forms: symmetrical and asymmetrical.

Symmetry

Symmetrical balance occurs when the weight of a composition is evenly distributed around a central vertical or horizontal axis. Under normal circumstances it assumes identical forms on both sides of the axis. When symmetry occurs with similar, but not identical, forms it is called approximate symmetry. In addition, it is possible to build a composition equally around a central point resulting in radial symmetry1. Symmetrical balance is also known as formal balance.

Asymmety

Asymmetrical balance occurs when the weight of a composition is not evenly distributed around a central axis. It involves the arranging of objects of differing size in a composition such that they balance one another with their respective visual weights. Often there is one dominant form that is offset by many smaller forms. In general, asymmetrical compositions tend to have a greater sense of visual tension. Asymmetrical balance is also known as informal balance.

Rhythm

Rhythm is the repetition or alternation of elements, often with defined intervals between them. Rhythm can create a sense of movement, and can establish pattern and texture. There are many different kinds of rhythm, often defined by the feeling it evokes when looking at it.

• Regular: A regular rhythm occurs when the intervals between the elements, and often the elements themselves, are similar in size or length.
• Flowing: A flowing rhythm gives a sense of movement, and is often more organic in nature.
• Progressive: A progressive rhythm shows a sequence of forms through a progression of steps.

Proportion

Proportion is the comparison of dimensions or distribution of forms. It is the relationship in scale between one element and another, or between a whole object and one of its parts. Differing proportions within a composition can relate to different kinds of balance or symmetry, and can help establish visual weight and depth. In the below examples, notice how the smaller elements seem to recede into the background while the larger elements come to the front.

Dominance

Dominance relates to varying degrees of emphasis in design. It determines the visual weight of a composition, establishes space and perspective, and often resolves where the eye goes first when looking at a design. There are three stages of dominance, each relating to the weight of a particular object within a composition.

• Dominant: The object given the most visual weight, the element of primary emphasis that advances to the foreground in the composition.
• Sub-dominant: The element of secondary emphasis, the elements in the middle ground of the composition.
• Subordinate: The object given the least visual weight, the element of tertiary emphasis that recedes to the background of the composition.

Unity

The concept of unity describes the relationship between the individual parts and the whole of a composition. It investigates the aspects of a given design that are necessary to tie the composition together, to give it a sense of wholeness, or to break it apart and give it a sense of variety. Unity in design is a concept that stems from some of the Gestalt theories of visual perception and psychology, specifically those dealing with how the human brain organizes visual information into categories, or groups.

Gestalt theory itself is rather lengthy and complex, dealing in various levels of abstraction and generalization, but some of the basic ideas that come out of this kind of thinking are more universal.

Closure

Closure is the idea that the brain tends to fill in missing information when it perceives an object is missing some of its pieces. Objects can be deconstructed into groups of smaller parts, and when some of these parts are missing the brain tends to add information about an object to achieve closure. In the below examples, we compulsively fill in the missing information to create shape.

Continuance

Continuance is the idea that once you begin looking in one direction, you will continue to do so until something more significant catches your attention. Perspective, or the use of dominant directional lines, tends to successfully direct the viewers eye in a given direction. In addition, the eye direction of any subjects in the design itself can cause a similar effect. In the below example, the eye immediately goes down the direction of the road ending up in the upper right corner of the frame of reference. There is no other dominant object to catch and redirect the attention.

Similarity, Proximity and Alignment

Items of similar size, shape and color tend to be grouped together by the brain, and a semantic relationship between the items is formed. In addition, items in close proximity to or aligned with one another tend to be grouped in a similar way. In the below example, notice how much easier it is to group and define the shape of the objects in the upper left than the lower right.

Related concepts

There are many additional concepts that are related to the principles of design. These can include specific terms and/or techniques that are in some way based on one or more of the above tenets. In they end, they add to the collection of compositional tools available for use by the designer.

Contrast or Opposition

Contrast addresses the notion of dynamic tension – the degree of conflict that exists within a given design between the visual elements in the composition.

Positive and Negative Space

Positive and negative space refers to the juxtaposition of figure and ground in a composition. The objects in the environment represent the positive space, and the environment itself is the negative space.

Rule of Thirds

The rule of thirds is a compositional tool that makes use of the notion that the most interesting compositions are those in which the primary element is off center. Basically, take any frame of reference and divide it into thirds placing the elements of the composition on the lines in between.

Visual Center

The visual center of any page is just slightly above and to the right of the actual (mathematical) center. This tends to be the natural placement of visual focus, and is also sometimes referred to as museum height.

Color and Typography

Many would place color and typography along side the five principals I have outlined above. I personally believe both to be elements of design, so I’ll give them some attention in my next column. In addition, both topics are so robust that I plan on writing an entire article about each of them in the future.

Conclusion

In Web design it is too easy to get engrossed in the many unique constraints of the medium and completely forget some of the underlying concepts that can strengthen any design. To better discuss such concepts, we need to step back from our specific discipline and look to the history of the field. It is here we find the axioms of our profession.

In this article we looked at half of those axioms, the principles of design. The principles of design are the guiding truths of our profession, the basic concepts of balance, rhythm, proportion, dominance and unity. Successful use of these core ideas insures a solid foundation upon which any design can thrive.

In the next column, I will discuss the elements of design—the basic components used as part of any composition including point, line, form (shape), texture, color and typography. Comments or suggestions are welcome and appreciated.

WHO WE ARE:
123Klan is a creative studio founded in France in 1992 by Mrs klor and Scien. We are currently based in Montréal, specializing in new strategies and tendencies.

WHAT WE DO:
We offer creative consulting, art direction, branding, illustration, toy design, character design, and conferences. We also do graffiti, drink alcohol, smoke ganja, sell drugs, knives, machine guns, uranium and kidneys, as well as many endangered pets, like koalas, seals and dolphins. (Dead or alive. Rare or “a la plancha”, depends how you like it…)

A WORD TO OUR FUTURE CLIENTS:
Do not worry. We are nice and talented people.

Having fun since 1992

Download their portfolio in .pdf here…

Check them out on flickr here…

Check them out on behance here…

Have fun with the 123klan (flash) here…

Some of 123klan’s work

Show some love for the 123klan on their website here or in the comments.