design.bluebones.net
Can a die-hard programmer learn Graphic Design? (more)
posted by Thomas David Baker on Sunday, October 28, 2007
From Chicago 2016:
Labels: form example
0 Comments »
posted by Thomas David Baker on Sunday, September 16, 2007
I've been using the Blueprint CSS template that provides CSS reset, a grid, nice typography and a few optional plugins for fancy type, buttons, etc. It's very nice. Although it fails on the semantic markup and liquid layout fronts.
I've redesigned my Fantasy Football site with Blueprint as a base. Conspicuous use of the grid and nicer typography have made a big difference, I think.
Before:
After:
Click the images to see a whole page.
Labels: redesign grid
0 Comments »
posted by Thomas David Baker on Friday, May 25, 2007
The concept of unity describes the relationship between the individual parts and the whole of a composition.
Closure is the idea that the brain tends to fill in missing information when it perceives an object is missing some of its pieces.
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.
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.
When nothing distracts from the whole you have unity. Unity without variation can be uninteresting.
Labels: design prinicples, principles, unity
0 Comments »
posted by Thomas David Baker on Friday, May 25, 2007
Variety consists of the differences in objects that add interest to a visual image.
Variety can be achieved by using opposites or strong contrasts.
Changing the size, point of view, and angle of a single object can add variety and interest to a visual image.
Breaking a repeating pattern can enliven a visual image.
A way of accomplishing variety is to establish an approach which involves theme and variations-repeating the same image, but in different sizes, colors, values and shapes.
Labels: design prinicples, variety
0 Comments »
posted by Thomas David Baker on Tuesday, May 15, 2007
Designers who have worked in print tend to become quite worked up about use and abuse of ", ' and -. Here's what you should be using.
| For |
Use |
Not |
| Opening Double Quote |
“ (“) |
" |
| Closing Double Quote |
” (”) |
" |
| Opening Single Quote |
‘(‘) |
' |
| Closing Single Quote |
᾿ (᾿) |
' |
| En Dash* |
– (–) |
- |
| Em Dash** |
— (—) |
- |
| Minus |
− |
- |
| Times |
× (×) |
x |
| Elipsis |
… (…) |
... |
* = To show a range between numbers, to replace "to" when there is a connection between things (London–Brighton).
** = To show a break in thought, pause for thought, to show an open range like 1976—, or replace missing characters.
Labels: character entites, punctuation, typography
0 Comments »
posted by Thomas David Baker on Tuesday, May 15, 2007
Emphasis is making a specific element stand out or draw the eye. It is also known as dominance.
Emphasis can be achieved in graphic design by placing elements on the page in positions where the eye is naturally drawn or by size, visual weight, color, complexity, uniqueness and other features.
Emphasis determines the visual weight of a composition, establishes space and perspective, and often resolves where the eye goes first when looking at a design.
Elements of a design can be classed as dominant (primary emphasis, foreground), subdominant(secondary emphasis, middle ground) or subordinate (tertiary emphasis, background).
There are a variety of ways of achieving emphasis.
Placement - the direct center of a composition is the point at which users look first, and is always the strongest location for producing emphasis. The further from the center an element is, the less likely it is to be noticed first.
Continuance - The idea behind continuance is that when our eyes start moving in one direction, they tend to continue along that path until a more dominant feature comes along. A long arrow to a small feature will greatly increase the emphasis on the small feature.
Isolation - An item that stands out from its surroundings will tend to demand attention.
Contrast - The greater the difference between a graphic element and its surroundings, the more that element will stand out. Contrast can be created using differences in colour, size, and shape.
Proportion - If we place an object in an environment that's of larger or smaller scale than the object itself, that object will appear larger or smaller than it does in real life. This difference in proportion draws viewers' attention to the object, as it seems out of place in that context.
- For isolation of content consider the blockquote element. This element indents the left- and right-hand side of any text placed within it, purposely breaking the continuation lines of the page content and drawing attention to itself.
- For positioning, consider the position property in CSS. By absolutely positioning an object with CSS, you take it out of the flow of its containing block, so you can place it strategically to draw attention.
- Bold and italic type provides emphasis for text.
Labels: emphasis, focal point, principles
0 Comments »
posted by Thomas David Baker on Tuesday, May 15, 2007
Human beings are more comfortable with variation. Things that don't vary can become very boring. A design needs to be both regular AND varied. That's 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
A regular rhythm occurs when the intervals between the elements, and often the elements themselves, are similar in size or length.
A flowing rhythm gives a sense of movement, and is often more organic in nature.
A progressive rhythm shows a sequence of forms through a progression of steps.
- A design must have regular variation - rhythm.
- Rhythm can be regular (same intervals between elements), flowing (more ad hoc) or progressive (follows a sequence).
- By repetition of elements, a rhythm imparts a sense of organization that brings a design together while keeping it interesting.
Labels: movement, pattern, principles, rhythm
0 Comments »
