Web Industry
"Web Industry" bundle created by dryan
- A List Apart
- Smashing Magazine
 |
In the previous two parts of this series on color theory, we talked mostly about the meanings behind colors and color terminology. While this information is important, I’m sure a lot of people were wondering when we were going to get into the nitty-gritty of actually creating some color schemes.
Well, that’s where Part 3 comes in. Here we’ll be talking about methods for creating your own color schemes, from scratch. We’ll cover the traditional color scheme patterns (monochrome, analogous, complementary, etc.) as well as how to create custom schemes that aren’t based strictly on any one pattern. By the end of this article, you’ll have the tools and skills to start creating beautiful color palettes for your own design projects. The best way to improve your skills is to practice, so why not set yourself a goal of creating a new color scheme every day.
[Offtopic: by the way, have you already visited Smashing Magazine's Facebook fan page? Join the community for a stream of useful resources, updates and giveaways!]
A Quick Review
Let’s start with a quick review of what was covered in parts 1 and 2. In part 1, we talked about how all colors have inherent meanings, which can vary depending on the country or culture. These meanings have a direct impact on the way your visitors perceive your site, even if it’s just subconsciously. The colors you choose can either work for or against the brand identity you’re trying to create.
In part 2, we covered color terminology: hue (what color something is, like blue or red); chroma (how pure a color is, the lack of white, black or gray added to it); saturation (the strength or weakness of a color); value (how light or dark a color is); tone (created by adding gray to a pure hue); shade (created by adding black to a pure hue); and tint (created by adding white to a hue). These are important terms to know as we move forward and create our own color schemes.
Traditional Color Scheme Types
There are a number of predefined color scheme standards that make creating new schemes easier, especially for beginners. Below are the traditional schemes, with a few examples for each.
The basic, twelve-spoke color wheel is an important tool in creating color schemes.
Monochromatic
Monochromatic color schemes are made up of different tones, shades and tints within a specific hue. These are the simplest color schemes to create, as they’re all taken from the same hue, making it harder to create a jarring or ugly scheme (though both are still possible).
Examples:
Here are three examples of monochrome color schemes. For the most part with these schemes, the first color (if we look at this from left to right) would likely be used for headlines. The second color would be used for body text or possibly the background. The third color would likely be used for the background (or body text if color #2 was used as the background). And the last two colors would be used as accents or within graphics.
Analogous
Analogous color schemes are the next easiest to create. Analogous schemes are created by using three colors that are next to each other on the 12-spoke color wheel. Generally, analogous color schemes all have the same chroma level, but by using tones, shades and tints we can add interest to these schemes and adapt them to our needs for designing websites.
Examples:
This is a traditional analogous color scheme, and while it’s visually appealing, there isn’t enough contrast between the colors for an effective website design.
Here’s a color scheme with the same hues as the one above, but with the chroma adjusted to give more variety. It’s now much more suitable for use in a website.
Another example of a traditional analogous scheme.
And the above theme modified for use in a website design.
Complementary
Complementary schemes are created by combining colors from opposite sides of the color wheel. In their most basic form, these schemes consist of only two colors, but can easily be expanded using tones, tints, and shades. A word of warning, though: using colors that are exact opposites with the same chroma and/or value right next to each other can be very jarring visually (they’ll appear to actually vibrate along their border in the most severe uses). This is best avoided (either by leaving white space between them or by adding another, transitional color between them).
Examples:
A wide range of tints, shades, and tones makes this a very versatile color scheme.
Another complementary color scheme with a wide range of chromas.
Don’t forget that beige and brown are really tints and shades of orange.
Split Complementary
Split complementary schemes are almost as easy as the complementary scheme. In this scheme, instead of using colors that are opposites, you use colors on either side of the hue opposite your base hue.
Examples:
A scheme where yellow-green is the base hue. It’s important to have enough difference in chroma and value between the colors you select for this type of scheme.
Another palette with a wide range of chromas.
Triadic
Triadic schemes are made up of hues equally spaced around the 12-spoke color wheel. This is one of the more diverse color schemes.
Examples:
Using a very pale or dark version of one color in the triad, along with two shades/tones/tints of the other two colors makes the single color almost work as a neutral within the scheme.
Alternately, using one very bright hue with paired muted hues makes the single bright hue stand out more.
Double-Complementary (Tetradic)
Tetradic color schemes are probably the most difficult schemes to pull off effectively.
Examples:
A rather unimpressive tetradic color scheme. The best way to use a scheme like this is to use one color as the primary color in a design and the others just as accents.
Tetradic color schemes can work well for creating color schemes with similar chromas and values. Just add a neutral (such as dark gray or black) for text and accents.
It works just as well for darker color schemes.
Custom
Custom color schemes are the hardest to create. Instead of following the predefined color schemes discussed above, a custom scheme isn’t based on any formal rules. Keep in mind things like chroma, value, and saturation when creating these kinds of color schemes.
Examples:
The colors here all have similar chroma and saturation levels.
Again, using colors with similar chroma and saturation is effective and creates a sense of cohesion across a color scheme.
Using one color with a high chroma among other colors with lower chromas is another effective method (the higher chroma color can act as an accent).
Creating a Color Scheme
Creating your own color schemes can be a bit intimidating. But it’s not as complicated as many people think. And there are quite a few tricks you can employ to create great color palettes right from the start.
We’ve been over the different types of color schemes above. Now, let’s try creating a few of our own. There are plenty of tools online that will help you create a color scheme, but let’s forget about those for now and just use Photoshop.
Lets try breaking away from the color scheme types already mentioned, and create some custom schemes. While it’s important to know the ways that different colors interact and how traditional schemes are created, for most design projects you’ll likely create custom schemes that don’t strictly adhere to any predefined patterns.
So, for the purposes of our project here, we’ll create three color schemes each for two different websites. Our hypothetical clients are a modern architecture design blog and a high-end women’s clothing retailer who specializes in Victorian-influenced apparel.
We’ll start with a basic monochromatic scheme, just to get a feel for each. While I mentioned that traditional color scheme patterns aren’t used as often in design, monochomatic color schemes are the exception to that rule. You’ll likely find yourself using monochromatic schemes on a fairly regular basis.
For our apparel store, here’s a traditional monochromatic scheme, with white added in as a neutral.
For our design blog, we’ve gone with a color scheme made up of shades and tints of gray.
This is almost an analogous color scheme, but we’ve left out one color. It’s made up of shades of purple and reddish-purple. These two colors fall next to each other on the color wheel, and work well together, especially when they’re used in different values and saturation levels.
Adding a couple shades of red to the gray color scheme adds a lot of visual interest and the potential for creating extra emphasis on certain parts within your designs.
Here, we’ve gotten rid of the purple hues and switched over to a burgundy. Again this is next to the reddish-purple on the color wheel. We’ve also added in a very pale yellow tone, which sits opposite purple on the color wheel. This serves as our neutral, and looks more like an off-white color when compared to our other hues.
While this color scheme at first glance looks like another standard gray and red palette, if you look more closely you’ll see that the grays are actually tones of blue. Blue and red make up two thirds of a tetradic color scheme, but work just fine together without yellow, especially when the red is kept pure but the blue is toned down to the point of almost being gray.
Why Shades, Tones, and Tints Are Important
As you can see from the color schemes above, using tints, tones, and shades in your color schemes is vital. Pure hues all have similar values and saturation levels. This leads to a color scheme that is both overwhelming and boring at the same time.
When you mix in tones, shades, and tints, you expand the basic 12-spoke color wheel into an infinite number of colors for use in your designs. One of the simplest ways to create a professional looking color scheme is to take a few tones, tints, and shades of a given color (avoiding the pure hue), and then add in another pure hue (or close to pure) that’s at least three spaces away on the color wheel (part of a tetradic, triatic, or split-complementary color scheme) as an accent color. This adds visual interest to your color scheme while still retaining a sense of balance.
Adding in Some Neutrals
Neutrals are another important part of creating a color scheme. Gray, black, white, brown, tan, and off-white are generally considered neutral colors. Browns, tans, and off-whites tend to make color schemes feel warmer (as they’re really all just tones, shades, and tints of orange and yellow). Gray will take on a warm or cool impression depending on surrounding colors. Black and white can also look either warm or cool depending on the surrounding colors.
Black and white are the easiest neutrals to add into just about any color scheme. To add a bit more visual interest, though, considering using a very light or very dark shade of gray in place of white or black.
Adding browns, tans, and off-white hues are a bit trickier, but with some practice you’ll find adding them gets easier. For browns, consider using a very dark, chocolate brown in place of black. A pale off-white can be used in place of white or light gray in many cases. And tan can be used in place of gray, as well (create a tone by adding some gray to make it even easier).
Using Photos for Color Schemes
One of my personal favorite ways to create a color scheme is to use a photograph. There are automated tools online that can do this automatically for you (Adobe Kuler is one of them, and my personal favorite), or you can do it in Photoshop yourself.
Using Adobe Kuler, you can either browse or search for photos on Flickr, or you can upload your own image. If you’re stumped for what colors you want to use in a website design, try searching for related words on Flickr. Sometimes this can result in finding color schemes that you might not have thought of on your own.
Let’s try this method out, both ways (using Kuler and Photoshop). Find a photo you like on Flickr, one that you think evokes the feeling of the design you want to create. I chose this one:
Here’s the original color scheme that Kuler gives us when using this image:
One of the coolest features Kuler has for creating color schemes from images is their “Select a Mood” option. Included here are Colorful, Bright, Muted, Deep, and Dark. These are the schemes we get when using each of those moods with the same photo:
Colorful
Bright
Muted
Deep
Dark
Now, let’s create a color scheme in Photoshop using the same image. This is a bit less scientific than the way Kuler does it. I usually just pick a color with the eyedropper tool, and then keep clicking on different spots in the image until I find other colors that go with it. Here are the results (this took less than five minutes to do in Photoshop, so it’s not as time-intensive as it sounds):
Creating color schemes from images in Photoshop is easiest with images that are relatively monochromatic to begin with. With more colorful images, it gets trickier.
Let’s try another one, something more colorful this time. Here’s the original image we’ll work with:
And here are the five color schemes that Kuler gives us from this image:
Colorful
Bright
Muted
Deep
Dark
And here’s what I came up with in Photoshop using the same image:
As you can see, the Photoshop version I came up with is completely different than what Kuler came up with, but all of the schemes above are visually appealing. The Photoshop version here took a bit longer than the one above, partly because of the diversity of colors present in the image.
The Easiest Color Schemes
We’ve touched on this a bit before, but adding a bright accent color into an otherwise-neutral palette is one of the easiest color schemes to create. It’s also one of the most striking, visually. If you’re unsure of your skills in regard to creating custom schemes, try starting out with these types of palettes.
Here are a few examples to give you an idea of what I’m talking about:
You can see here how using browns instead of grays makes the entire scheme look warmer, even with the blue accent color.
You can use tones of any color instead of gray or brown in this type of scheme, just keep it very close to the gray end of the spectrum for the most fool-proof results. As a general rule, cool grays and pure grays are best for more modern designs. For traditional designs, warmer grays and browns often work better.
How Many Colors?
You’ll notice that throughout this post we’ve used color schemes with five separate colors. Five is a good number that gives plenty of options for illustrating the concepts here, and it’s a workable number in a design. But feel free to have more or fewer colors in your own schemes.
A lot of websites might only use three colors in their designs. Others use only two. And some might use eight or ten (which is a lot trickier than using fewer colors). Experiment and use as many or as few colors as you need to for your design. But you may want to start with a palette of five colors, and then add or subtract as you see fit and as you progress through the design process.
The easiest way to add a color is to start with one of the predefined, traditional color schemes and then work out from there. That at least gives you a bit of direction as far as which other colors to consider.
10 Sites With Great Color Schemes
To give you more inspiration, here are ten websites that have excellent color schemes. Some of the schemes below might look a bit odd at first glance but seeing how they’re actually used shows the wide range of possibilities color schemes can present.
Wentings Cycle & Mountain Shop
Scheme:
Trivuong.com
Scheme:
Oscar Barber
Scheme:
North East Peace III Partnership
Scheme:
mbA Architects
Scheme:
Studio 13
Scheme:
Joy Project
Scheme:
Morphix Blog
Scheme:
El Designo
Scheme:
LemonStand
Scheme:
Conclusion
We’ve really only just touched on color theory in this series. There are specialists out there who have literally spent years refining their ability to choose colors that are appropriate to any situation.
The best way to learn to create beautiful color schemes is to practice. Create a scheme on a daily basis. You can use automated tools to do this at first (like Kuler’s tool for creating schemes from images), or just open up Photoshop and start. If you see a particularly beautiful or striking color in your daily life, try creating a scheme around it. And take advantage of all the sites out there that let you upload your color schemes and organize them for later reference. This makes all those color schemes more practical and easier to use in the future.
Further Resources
Here are some additional resources that should help you in creating your own color schemes, as well as some links with more information about traditional color schemes.
- 10 Super Useful Tools for Choosing the Right Color Palette
A round-up from Web Design Ledger that covers ten great tools for finding and creating color palettes. - 100 Random Colors 2.0
This page will load 100 random colors, with hex codes. It’s a great place to check if you’re looking for color inspiration. - Classic Color Schemes
This article from Color Wheel Pro covers all the traditional color schemes in detail, with examples. - ColorMunki
Another color scheming tool. Their library colors tab is particularly useful for finding and creating monochromatic color schemes. - ColorSchemer
A color scheme gallery and tool with a free online version. - ColourLovers
A community for color and design that includes a huge gallery of color palettes, search functionality as well as tools to create your own color palettes.
© Cameron Chapman for Smashing Magazine, 2010. | Permalink | 24 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: colors
|
Today we are glad to release a beautiful, simple and clean portfolio WordPress theme — SimpleFolio, designed by Omar E. Corrales and released for Smashing Magazine and its readers. SimpleFolio is a portfolio theme that includes a blog and a very extensive option page that allows you to exclude all your portfolio items from the blog page. It also includes a front page slider.
It has 2 different widget areas and threaded comments, and also supports paged comments and has 2 different page templates for advanced usage. The control of images is done from the post page.
Download the theme for free!
The theme is released under GPL. You can use it for all your projects for free and without any restrictions. You may modify the theme as you wish. Please link to this article if you want to spread the word.
- live demo
- large preview (main page)
- large preview (portfolio page)
- large preview (single post page)
- large preview (back-end options page)
- download the .zip-package (.zip, 0.93 Mb, including installation guidelines, updated)
- official support forum
- release post on designer’s site
Features
Here are some of the features of the theme:
- CSS-based layout,
- 2 columns of fixed width,
- widget-ready,
- XHTML 1.0 Transitional valid,
- multi-browser compatibility: tested on Firefox, Safari , IE7, IE8, Chrome,
- easy to setup, theme options page.
Front page
Portfolio
Portfolio
Options page in back-end
Single post, main area
Single post, threaded comments
Single post, sidebar
Behind the design
As always, here are some insights from the designer:
I created this theme after getting tired of all the fancy design themes that are very popular now a days, this is a design for people that just need the job done without complicating them selfs. The best use can be either for just someone thats starting to blog or some artist that needs to expose there art.
Thank you, Omar. We appreciate your work and your good intentions!
© Elja Friedman for Smashing Magazine, 2010. | Permalink | 77 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: wordpress
|
When you hear the word “creative”, what type of profession comes to mind? Maybe a graphic designer, painter, sculptor, illustrator, or writer? It’s unlikely that you would consider a “programmer” when thinking of creative fields of work. But programmers have the potential to be creative and come up with ideas or concepts that will impact others in positive ways.
We often turn to programmers to solve mathematical-related problems, but the concept of mathematics in programming is what powers programmers to innovate. When you think of mathematics you imagine numbers, expressions, and equations. But what about art, music, or even beautiful visuals? Those numbers and equations that we often view as mundane and overly-formulaic can generate beautiful visuals and music. This article will present dozens of examples of motion graphics and interactive visuals created with computational code, along with some useful references and resources.
[Offtopic: by the way, have you already visited Smashing Magazine's Facebook fan page? Join the community for a stream of useful resources, updates and giveaways!]
Beautiful Motion Graphics Created with Programming
First we’ll look at some examples of beautiful and inspiring motion graphics created by programmers. Some of these are audio-reactive whereas others are data visualization.
Metamorphosis by Glenn Marshall
Swan Lake – Zeno Music Visualiser by Glenn Marshall
Flightpattern by Gwen Vanhee
These beautiful motion graphics were created using ActionScript.
Disco Maths 1 by Stefan Goodchild
Audio Reactive Bubbles by Matthias Dörfelt.
Visualization in 7/4 by Eamae Mirkin
Music Is Math by Glenn Marshall
Audio-generated landscape by flight404
okdeluxe XMAS card 2008 by okdeluxe
Solar, with lyrics. by flight404
Bubbletrouble_2 by Leander Herzog
House of Cards by Radiohead
In Radiohead’s video for “House of Cards”, no cameras or lights were used. Instead, 3D plotting technologies collected information about the shapes and relative distances of objects. The video (directed by James Frost) was created entirely with visualizations of that data.
Shifty by Pedro Mari
Advanced Beauty 13 of 18 by Universal Everything
I Am David Sparkle – Jaded Afghan by Eduardo Omine
Relentless, The REV by flight404
Aphex Twin – Rhubarb by Simon Geilfus
Magnetosphere Revisited by flight404
The Nest That Sailed The Sky by Glenn Marshall
Interpol – Rest My Chemistry Video by Aaron Koblin
Free Applications for Creating Visuals with Computational Code
Processing
Processing is a popular and powerful application for generating visuals using programming. It’s free and open source and uses Java as its coding language. It’s been used in professional, educational, and scientific environments and is available for GNU/Linux, Mac OS X, and Windows. It can also be used for web by embedding as Java applets or through the use of Processing.js, which uses JavaScript to draw shapes and manipulate images using the HTML5 Canvas element. Processing is also available for Java-based mobiles (Mobile Processing).
- Open Processing
Share your sketches online. - Useful Processing Applet Source Codes
A collection of free Java applet source codes. - Processing with Eclipse
If you are an avid Java programmer and have been using Eclipse for your daily routine this would be best way to use Processing, making your workspace comfortable and familiar. Another benefit that Eclipse adds is that you can harness the power of the latest Java IDE.
Quartz Composer
Popular among Mac developers and VJs, Quartz Composer is the simplest application for creating still as well interactive motion graphics. It uses a node-based sequencing visual programming language that takes advantage of the Open GL, JavaScript, Core Image and Core Video devices and other technologies built into Mac OS X. It’s intended for non-programmers and is used by developers to construct user interfaces in conjunction with Cocao and other developer tools bundled in Xcode. It’s also used to create iTunes Music Visualizers.
Using third-party tools like Effect Builder AE and QC Integration FX you can turn your Quartz compositions into plug-ins for professional video editing / motion graphics applications such as Apple Final Cut, Adobe After Effects, Apple Motion, etc., without writing a single line of code. Many professional applications like Pixelmator use Quartz Composer on Mac to generate graphics and this is one of the reasons why some graphics processing application are available only for Mac OS X. As you probably guessed, Quartz Composer is only available for Mac OS X. Users of Mac OS X 10.6 or later can utilize OpenCL in Quartz Composers.
- Quartz Composer Programming Guide
Guide for Quartz Composer. - Quartz Composer Release Notes for Mac OS X v10.6
Highlights major changes to Quartz Composer in Snow Leopard. - Quartz Compositions
Forum dedicated to Quartz Composer users. - Quartz Composer Tutorials
Collection of some of the best Quartz Composer tutorials. - Installing 3rd Party Plug-Ins for Quartz Composer
- Kineme
Kineme offers plug-ins for Quartz Composer, including audio analysis, particle effects, and Kineme3D which can import 3D Models. - Futurismo Zugakousaku
A great collection of Quartz Composer examples. - Sam Kass Blog
Quartz Composer examples that use iSight as an input source for creating real-time effects. - Free Webcam Audio Visualizer
OpenFrameworks
OpenFrameworks is a tool for creating interactive visuals, and is widely used among creative programmers. The user interface is simple and similar to that of Processing. Similar to Processing, it uses libraries, but it’s difficult to find third-party libraries and requires knowledge of C++ programming.
NodeBox
NodeBox is similar to Processing and OpenFrameworks with the only major difference being the programming language used, which is Python. Although NodeBox has a small number of libraries in comparison with Processing, they are of good quality. NodeBox supports PDF, QuickTime movies, fonts and uses the Mac OS X Core Image library for image manipulations (blend modes, color changes, filters etc). NodeBox is available only for Mac OS X.
- NodeBox Library
A collection of libraries, add-ons, and extensions.
VVVV
VVVV is usually used in large media environments like concerts and art installations for real-time motion graphics, video and audio processing and interactive motion graphics. Unlike Quartz Composer, VVVV comes with audio synthesis, 3D Mesh manipulation, and real-time video synthesis built in. It is a powerful application for generating visuals in real-time, even at very high resolution and high frame-rates.
Another important feature of VVVV is that it can make use of multiple computers behaving in sync. All programming and editing can be done on one server computer, while all client computers execute their respective tasks. You can easily use the CPU and GPU power of each computer to do some amazing effects at a cheaper cost. Since VVVV uses DirectX, it’s only available for Windows.
- Strukt
Strukt has done many projects using VVVV, including this beautiful letter universe installation.
eMotion
eMotion is a new free application which can generate real-time as well as offset graphics. It has an awesome text and particle engine which is driven by real-world physics. It is available only for Mac OS X.
Creating Interactive Visuals with Computational Code
Here are some examples demonstrating adding interactivity into visuals.
Graffiti Analysis 2.0 by Evan Roth
Amoeba Dance is built using Quartz Composer. Its not a pre-rendered visual but works totally in real-time mode, controlled using VDMX and is reactive to the audio input.
The Beauty of Fluid Dynamics by Jens Heinen
Beautiful live interactive visual performances. Also watch Lichtfaktor vs Optix and Reincarnation.
Interactive Projection at GAGA Gallery | Laser tag
This project uses powerful lasers to virtually in-script graffiti on tall buildings. The laser is tracked and the graphics are projected in real time. Also check out the Eyewriter project which uses the same technology for helping physically disabled graffiti artists to once again bring their talent back to life. You can take a look at how-to and source code, too.
Digital Graffiti Wall + Stencils by Alex Beim
Another similar version, also built with OpenFrameworks.
Digital Wallpaper by Gregor Hofbauer
Uses VVVV to generate graphics which are then projected and mapped to the wall.
Body Navigation by Ole Kristensen
Amazing example where interactive visuals are projected on to a wall. To add interactivity, everything is tracked using infrared light and cameras.
Hand from Above by Chris O’Shea
An amazing installation built with openFrameworks and openCV. Pedestrians are tickled, stretched, flicked or removed virtually in real-time.
Quadrature by Griduo
The walls of the building are virtually stretched, broken and reconstructed. A similar installation:
Castel Dell’Ovo by Quy & N1ente
A stunning audio-visual performance created by mapping an entire building in a virtual world.
Body Paint by Memo Akten
Beautiful interactive installation which allows performers to paint on a virtual canvas with their body, interpreting gestures and dance into evolving compositions.
Lights on by thesystemis
Created for the Ars Electronica museum, which has a facade that contains 1085 LED controllable windows. The window colors are changed in real time with music that is broadcast on speakers surrounding the building. Visuals are created using openFrameworks.
Vinyl Workout by Theo Watson
A giant record is projected on the floor and it can be played by running around its surface in the direction you want it to go. The speed of playing music is in sync with the speed of the moving person.
Funky Forest – Interactive Ecosystem by Theo Watson
Funky Forest is an interactive installation for children. They can play with the water on floor, grow trees and water it and interact with various creatures. Built using openFrameworks. Also see these other amazing installations: Interactive Mural, Interactive Projection at GAGA Gallery, Guten Touch, Jellyfishes and Interactive Dancers System.
Reverse Shadow Theatre by Gabor Papp
Amazing example in which the code powers the real-time puppet animation. Uses multiple software – Processing, Eyesweb and Animata. Both Eyesweb and Animata are open source, as is Processing. Here Eyesweb handles the motion tracking while Animata takes in the input data from Eyesweb and does the real-time animation. Also watch Jazz Pub.
Tutorials
DIY 3D Scanner by Kyle McDonald
Another great application of computational code.
DaVinci by Razorfish – Emerging Experiences
Apart from producing amazing visual and real-time animations, computational code can give new meaning to human-computer interaction. If you like Microsoft Touch Screen Table then you are sure to like DaVinci. You can interact with a virtual world through a user interface that uses object recognition, real-world physics simulation, and gestural interface design.
London Digital Week by seeper
Multi-touch music sequencer.
Books for Reference
Programming Interactivity: A Designer’s Guide to Processing, Arduino, and Openframeworks by Joshua Noble and Noble Joshua
Learning Processing: A Beginner’s Guide to Programming Images, Animation, and Interaction by Daniel Shiffman
Processing: Creative Coding and Computational Art by Ira Greenberg
Real-Time Motion Graphics with Quartz Composer: A Hands-On Guide to Learning Quartz Composer by Graham Robinson and Surya Buchwald
Processing: A Programming Handbook for Visual Designers and Artists by Casey Reas and Ben Fry
Algorithms for Visual Design Using the Processing Language by Kostas Terzidis
Visualizing Data by Ben Fry
Resources
- OpenCV
OpenCV is a library of programming functions for real-time computer vision. You can use it for human-computer interaction, object identification, segmentation and recognition, face recognition, gesture recognition, camera and motion tracking, ego motion, motion understanding, stereo and multi-camera calibration and depth computation, and mobile robotics. - Arduino
Open-source software to send signals to the i/o board. - 10 Best Software for Visual Performance Artists
Some of the best professional software for live audio-visual performance - Flickr Group: Processing.org
Collection of graphics created using Processing - Flickr Group: Algorithmic Abstracts
Abstract art created by writing code. - Flickr Group: VVVV
Collection of images created with VVVV. - Flickr Group: Generative Visuals
(ll)
© vailrodrigues for Smashing Magazine, 2010. | Permalink | 31 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: cg, motion graphics
|
Planning and communication are two key elements in the development of any successful website or application. And that is exactly what the wireframing process offers: a quick and simple method to plan the layout and a cost-effective, time-saving tool to easily communicate your ideas to others. A wireframe typically has the basic elements of a Web page: header, footer, sidebar, maybe even some generated content, which gives you, your clients and colleagues a simple visually oriented layout that illustrates what the structure of the website will be by the end of the project and that serves as the foundation for any future alterations.
This article focuses on actual wireframing tools and standalone applications, as well as resources that you’ll need to build your own wireframe: wireframing kits, browser windows, form elements, grids, Mac OS X elements, mobile elements, which you’ll use in any typical graphics editor such as Photoshop or Illustrator. …Or you could use pen and paper.
[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]
Complete Wireframing Toolkits
Quommunnication Stencil Kit
A PSD file with common design elements for sketching and wireframing: form elements, RSS feed icons, colors, Advertising units, browser windows and grids.
Mac OS X Interface Stencil Kit
Leopardy interface stencil kit. This one makes extensive use of tables, for maximum flexibility while maintaining pixel precision.
Facebook Applications Stencil Kit
A pretty sizable collection of Facebook related elements to use in creating wireframes for Facebook applications.
Flex Stencil Kit
Includes all Flex components from Flex 3 Style Guide: panels, data grid, buttons, fields, links, toggle, menu, scrolls, accordion, tabs, list, data picker, tool tip, errors.
Eclipse Stencil Kit
This stencil enables you to easily prototype Eclipse (wizard) dialogs with OmniGraffle(TM).
Massive Web UI & Button Set
This set contains UI elements in three distinct styles: glossy, satin/light gradient, and one-color. The satin/light gradient set is available in 7 different colors (which you’ll find all of in the PSD file). Available are control buttons including arrows and basic symbols, info and text boxes, breadcrubs, buttons, and other navigation elements, drop-down and collapsible box styles, speech bubbles, search forms and loading elements.
Yahoo! Design Stencils – Design Pattern Library
You would be hard pressed to find a better wireframing resource than this one. The Yahoo! Design Stencil Kit is available for almost every application: OmniGraffle, Visio (XML), Adobe Illustrator (PDF and SVG) and Adobe Photoshop. This huge library covers the following elements (basically, everything): ad units, calendars, carousels, charts and tables, UI controls, form elements, grids, menus and buttons, mobile (general), mobile (iPhone), navigation and pagination, OS elements, placeholder text, screen resolutions, tabs, windows and containers.
Free Sketching & Wireframing Kit
The Sketching & Wireframing Kit is a free set of elements for sketching and wireframing. It consists of form elements, icons, indicators, feedback messages, tool tips, navigation elements, image placeholders, embedded videos, sliders and common ad banners. The Kit comes in two vector formats, one for Adobe Illustrator and the other in SVG, which can be easily modified. It can also be downloaded in PDF and EPS formats.
EightShapes Unify
EightShapes Unify is a collection of templates, libraries and other assets that enable user experience designers to create more consistent and effective deliverables faster. The system uses the Adobe Creative Suite of products; Adobe InDesign is the primary authoring tool.
Wireframe Symbols
This download contains a wireframe symbol library and a full Adobe Illustrator file with all of the elements spread out on a board. To install the library just drag and drop the file named Wireframe Symbols.ai into your Adobe Illustrator “Symbols” directory. Once you open Illustrator, go to your Symbols Palette and load the library.
OmniGraffle Wireframe Stencils
This is a set of shapes for making wireframes in OmniGraffle version 5.x (Mac OS X).
OmniGraffle UX Template
This is an OmniGraffle Pro template for interface design that includes shared layers for basic UX document needs; e.g. title page, wireframes, storyboards.
Web Page Elements
Using the open-source “Bitstream Vera” font set and free icons from FamFamFam, you should have most of your common web page elements covered, including headings, form elements, content management function, image placeholders, etc.
Web Browser Templates
Photoshop Browser Templates – Web Designer Toolkit
These Photoshop browser templates come in 1024×768 and 800×600 pixel sizes and cover nearly all browsers (Firefox, IE, Safari, Camino, even Netscape). For both sizes, the safe viewing area is clearly marked in a separate layer.
Browser Templates for the Website
These Photoshop browser templates for Internet Explorer, Firefox for Mac and Firefox for Windows have been mocked up in the following sizes: 800×600, 1024×768 and 1280×1024 pixels.
Photoshop Browser Templates
This layered PSD file contains three different browser resolutions; all with easily editable titles, address bars, scroll bars and favicons. Just open the PSD and place the layers on top of the design that you are working on, and voila!
Browser Screens and Website Elements
A useful set of vector website assets.
Web-Safe Area Templates for Photoshop
All of the Web-safe area browser PSD templates listed below can be individually downloaded by choosing from the following resolutions: 640×480, 800×600, 1024×768, 1280×960 and 1600×1200 pixels.
Windows Vista IE Web-Safe Area
Windows Vista Firefox Web-Safe Area
Mac OS X Firefox Web-Safe Area
Web Form Elements
Best Practice UX Forms Stencil
This is a comprehensive release of the stencil kit which follows best practices in UX form design. It provides three different ways of laying forms out, each with their own benefits. This version also provides different button layouts, a progress indicator, captcha code input field, labels and more.
Photoshop Form Element Templates
These Photoshop files include screenshots of all the common form elements as displayed in your selected operating system (Mac Classic, Mac OS X, Win XP and Win Classic). The form elements are separated into individual layers so that you can easily select, adjust or switch them as you please.
Browser Form Elements PSD
Included in this PSD file are form elements for Mac Firefox 3 and another for Vista IE7.
Web Form Elements Volume 1
Volume 1 contains a selection of Web user interace elements for forms in Photoshop format.
Web Form Elements Vol.2
This is Volume 2 of the Web Form UI Elements mentioned above and has been designed in a different style.
Photoshop Button Templates
These Photoshop button templates have been separated into individual layers to be easily selectable. You can choose from the following colors: dark blue, light blue, dark green, light green, yellow, orange, red and purple.
Web Browser Elements
You can select the element you need from whichever operating system and browser you use, and download them individually.
Windows Vista IE Form Elements
Windows Vista Firefox Form Elements
Windows XP Firefox Form Elements
Mac OS X Firefox Form Elements
Grid Templates
960px Photoshop Grid Template
This template has a guide for a three-column 20-pixel gutter design, with layers of washed-out colors to visualize both columns for the purpose of the rule of thirds. Additionally, it is broken down into six columns of 20-pixel gutters.
960 Grid Template for OmniGraffle
Illustrator Template for Blueprint CSS Comps
This Adobe Illustrator document features a 24-column grid for CSS frameworks such as Blueprint. It consists of guides that comply with Blueprint’s grid of 24 columns of 30 pixels, 10-pixel-wide gutters and a horizontal width of 950 pixels. Horizontal guides are provided at 18 pixels or a 1.5 em line-height for a 12-pixel base font.
Photoshop Template for Blueprint CSS Comps
This Photoshop document features a 24-column grid for CSS frameworks such as Blueprint. It consists of guides that comply with Blueprint’s grid of 24 columns of 30 pixels, 10-pixel-wide gutters and a horizontal width of 950 pixels. Horizontal guides are provided at 18 pixels or a 1.5 em line-height for a 12-pixel base font.
Mobile App Development Resources
iPad GUI PSD
The PSD was constructed using vectors, so it’s fully editable and scalable. You’ll notice there are a few new UI elements as compared to the iPhone interface. The workable screen design is formatted to 768×1024 so anything you design in the Photoshop file can easily be brought over to the SDK.
Ultimate iPhone Stencil – Graffletopia
This Omnigraffe iPhone stencil kit contains backgrounds, title bars, buttons, selectors and all other iPhone UI elements. It can be easily resized horizontally by ungrouping, resizing the middle element and then regrouping the elements back into a single button.
iPhone 3G Stencil
Includes standard interface components for the iPhone 3G: buttons, fields, map elements, keyboards, icons. All components are on a transparent background and should re-size nicely.
iPhone GUI PSD 3.0
With Apple’s official release of the new iPhone 3.0 came a number of new GUI elements. Some of the changes and additions have been include in this GUI: map and map elements including curl, copy and paste elements; timeline bar editor; and horizontal iPhone and horizontal panel bars and keyboards.
iPhone PSD Vector Kit
This iPhone starter kit comes with several button elements as well as six different iPhone interface options.
iPhone GUI Elements
Free iPhone elements available as layered Photoshop (PSD) files.
iPhone GUI as Rich Symbols for Fireworks
This iPhone kit has been designed using Adobe Fireworks. It has several combinations, buttons, backgrounds, etc. It also has some lines of code to transform the simple vector symbols into rich symbols, with some variables.
Google Android GUI Application Mockup PSD
This Photoshop file contains all of the basic elements of Android 1.5, Google’s mobile operating system.
Palm Pre GUI PSD
This Palm Pre GUI PSD has been built with vectors for easy editing and scaling, and it contains most of the Pre’s GUI elements.
RIM Blackberry PSD
This download package contains 135 detailed layers for Blackberry app development.
Optional Wireframe Extras
Interactive Sketch Notation
The general idea behind this notation is the desire to visualize user interface states as well as user actions in a clear and rapid manner.
Storyboard Characters (via Google Chrome)
Standard Web Banners
You can download these standard Web banners or ads individually (468×60 pixels, 768×60, 125×125, etc.). There are also templates for common but non-standard banner sizes (120×30, 230×33, 728×210, etc.).
Wireframe Icons, Royalty-Free EPS and PNG
The icon set includes EPS and PNG versions of the original Konigi Wireframe Icon Set and are suitable for use in vector drawing applications such as Adobe Illustrator as well as in Microsoft Visio.
WEB UI Treasure Chest
This PSD layered file, most of whose files are fully editable, contains more than 100 elements for website design.
Webdesigner kit
This Photoshop download contains registration fields, menus, checkboxes, radio buttons and cursors.
Printable Sketching Paper
A4 and A3 Sketching Grid Paper
This downloadable and printable 960-pixel-wide grid makes it easy to create a three-column (320 pixel), four-column (240 pixel), five-0column (192 pixel) or six-column (160 pixel) grid on a single sheet of paper. You have two sizes to choose from, A4 and A3.
Print and Sketch Wireframe Template
iPhone Application Sketch Template
The grid squares for this sketching paper are equal to 10 pixels. The tick marks indicate the height of the status bar, nav bar, keyboard, tab bar and toolbar. For best results, print on A4 borderless paper.
iPhone Wireframe Templates for Sketching
Two layouts are available, both in PDF and Visio (VSD) formats for quick iPhone mockups.
iPhone App Wireframe Template
Two versions are available, one in landscape and the other in portrait. Each version includes three pages: page 1 has a vertical screen and notes column; page 2 has a horizontal screen and notes column; page 3 has a three-screen layout that is great for drafting designs.
Printable Wireframe and Notes
The below 8.5 x 11-inch graph paper is made for visual designers, interaction designers and information architects. You’ll find styles for wireframing user interfaces, storyboarding interaction and plotting values on a 2×2 grid. Plus, you’ll get a basic grid for drafting site maps or anything else that comes up. Choose from the following:
Wireframe with Notes
This wireframe grid is divided into 24 columns, with gutters between each column. The grid is especially useful for designers who work within a CSS framework such as Blueprint.
Storyboard
This is a storyboard with four cells. Each cell contains a simple grid.
Storyboard with Notes
This is a storyboard with four cells. Each cell contains a simple grid. The area beneath each cell is ruled for notes.
Basic Paper
This is a basic grid box. Use it for concept diagrams, site maps, spectrums, tables and whatever else you sketch.
Wireframe Magnets (DIY Kit)
These DIY magnet template are based on the Konigi wireframe stencils and includes three sheets of elements that would be useful for whiteboard prototyping. Simply download and print the PDFs onto magnet sheets, and cut them out.
Further Resources And Some Wireframing Inspiration
web.without.words
A visual playground where designers take popular sites and reconstruct them in a wireframe.
Graffletopia
Graffletopia is a huge resource of free stencils for OmniGraffle (Mac-only, sadly). With OmniGraffle, you can quickly create high-quality wireframes, flowcharts and other diagrams.
Mockups To Go
Mockups To Go is a user-contributed collection of ready-to-use UI components and design patterns that were built using Balsamiq Mockups. You can download all of the components and design patterns to use in your mockups.
Wireframes Magazine
Wireframes Magazine is dedicated to all things wireframing and prototyping. It has a huge library of downloadable templates, samples and UI tools, and even a section for inspiration.
I {heart} wireframes
I {heart} wireframes is a great source of wireframing inspiration and resources. And yes, we all love wireframes!
Further Related Articles
- 35 Excellent Wireframing Resources
More than 35 resources for creating better wireframes, including tutorials on different methods and a variety of tools available. - Sketchy Wireframes: When you can’t (or shouldn’t) draw a straight line
A nice article about computer-based sketchy wireframes that allow wireframes to look more like quick, hand-drawn sketches while retaining the reusability and polish that we expect from digital artitfacts. - 16 Design Tools for Prototyping and Wireframing
About the Author
Paul Andrew is a freelance Web designer. He is chief admin for Speckyboy – Design Magazine, a Web design, Web development and graphic-design resource blog. Follow him on Twitter here: twitter.com/speckyboy.
(al)
© Paul Andrew for Smashing Magazine, 2010. | Permalink | 102 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: applications, wireframing
|
Email signatures are so easy to do well, that it’s really a shame how often they’re done poorly. Many people want their signature to reflect their personality, provide pertinent information and more, but they can easily go overboard. Why are email signatures important? They may be boring and the last item on your list of things to get right, but they affect the tone of every email you write.
Email signatures contain alternative contact details, pertinent job titles and company names, which help the recipient get in touch when emails are not responded to. Sometimes, they give the recipient an idea of who wrote the email in case it has been a while since they have been in touch. They are also professional: like a letterhead, they show that you run a business (in some countries, you’re required to do so). Here are some tips on how to create a tasteful signature that works.
[By the way, did you know there is a brand new Smashing Wordpress Book? Push WordPress past its limits and take the basic blog into an entirely new blogosphere.]
Be Concise
First and foremost, the sender’s header (the “From” field) should have a name, and you should use a company email address if you can. If someone sees stevies747@hotmail.com, they’ll suspect it’s spam. If the sender’s header reads, “Steve Stevenson – Mister Stevenson Design Company” <steve@misterstevenson.com>, they’ll know it’s a professional email from Steve, their trusted designer.
Start by making your website a link. Many email clients convert email addresses and websites into links automatically, but not always. When you’re creating the HTML for an email, make sure the link will appear by adding writing it in HTML. And instead of linking text like “My website,” type out the URL, which will be useful for those who want to copy and paste the address.
An email signature shouldn’t double the email’s length, so make it as short as possible (three lines is usually enough). Don’t get into your life story here. The purpose of a signature is to let them see who you are and how to get in touch with you.
Make Sure to Include…
- Your name,
- Your company and position,
- How to get in touch with you.
No need to include 10 different ways to get in touch with you. As in website design, less is more; and then they’ll know which way you prefer to be contacted. Go to two or three lines, with a maximum of 72 character per line (many email applications have a maximum width of 80 characters, so limit the length to avoid unsightly wrapping). An optional fourth line could be your company address, but use caution if you work from home.
-- Steve Stevenson, Web Designer www.misterstevenson.com | steve@misterstevenson.com
Short and Concise, but Check the Rules
In some European countries, laws dictate what items you must put in your email signature if you are a registered company. For example, UK law requires private and public limited companies to include the following:
- Company number,
- Address of registration,
- VAT number, if there is one.
You can be fined for not including this information on all electronic correspondence and on your website and stationary. Many freelancers and small businesses have ignored these rules since their inception, risking a fine. For more information on UK rules, go here. Do some research to find out what rules apply in your country.
-- Steve Stevenson, Web Designer www.misterstevenson.com | steve@misterstevenson.com 55 Main Street, London, UK, EC2A 1RE Company number: 12345678
Don’t Include…
- Personal Twitter, IM or Skype details;
- Your home phone number or address (unless you want to be called by international clients early in the morning);
- The URL of your personal website;
- Random quotes at the bottom;
- Your entire skill set, CV and lifetime achievements in point form.
Random quotes are fun for friends, but you risk offending business associates with whom you don’t have a personal relationship. Unless you want clients contacting you while you’re watching Lost, don’t share your home details far and wide. Also, don’t share your personal contact information with your corporate partners. They certainly won’t be interested in it, and you may not want them to know certain details about you. However, mentioning your corporate Twitter account or alternative means of contact in your signature might be useful, in case your correspondent is not able to get in touch with you by regular email.
 | Steve Stevenson, Web Designer web: www.misterstevenson.com blog: blogspot.celebritiesneedhelp.com email: steve@misterstevenson.com | |
| home: 613.555.2654 home (wife): 613.555.3369 work: 613.555.9876 cell: 613.555.1234 55 Drury Lane |
Don’t do this.
Images And Logos
Let’s get this out of the way now: your entire signature shouldn’t be an image. Sure, it will look exactly how you want, but it is completely impractical. Not only does an image increase the email’s file size, but it will likely be blocked before being opened. And how does someone copy information from an image?
- This signature is too big at 20 KB and impossible to copy.
Any images should be used with care and attention. If you do use one, make it small in both dimensions and size, and make it fit in aesthetically with the rest of the signature. 50 x 50 pixels should be plenty big for any logo. If you want to be taken seriously as a business person, do not make it an animated picture, dancing dog or shooting rainbow!
Most email clients store images as attachments or block them by default. So, if you present your signature as an image, your correspondents will have a hard time guessing when you’ve sent a genuine attachment.
The best way to include an image is to host it on a server somewhere and then use the absolute URL to insert the logo. For example, upload the logo to http://www.example.com/uploads/logo.gif. And then, in your email signature’s HTML, insert the image like so:
<img src="http://www.example.com/uploads/logo.gif" width="300" height="250" alt="example's logo" />
Don’t Be A Fancy Pants
Use vCards With Caution
While vCards are a great, convenient way to share contact information, in emails they add bytes and appear as attachments. It is often said that you shouldn’t use a vCard for your email signature, because as helpful as it might be the first time you correspond with someone, receiving it every time after that gets annoying. Besides, the average email user won’t know what it is. Look at the example below. Would an average user know what that is?
--- Steve Stevenson, Web Designer www.misterstevenson.com | steve@misterstevenson.com
If you do want to provide a vCard, just include a link to a remote copy.
What About Confidentiality Clauses?
If your emails include confidential information, you may need to include a non-disclosure agreement to prevent information leaks. However, good practice is never to send sensitive information as plain text in emails because the information could be extracted by third parties or forwarded by recipients to other people. Thus, including a non-disclosure agreement doesn’t make much sense if you do not send sensitive information anyway.
Keep in mind, too, that the longer a confidentiality clause is, the more unlikely someone will actually read it. Again, check your country’s privacy laws. Some big companies require a disclosure with every email, but if you’re at a small company or are a freelancer and don’t really require it, then don’t put it in. The length of such clauses can be annoying, especially in short emails.
--- Warm Regards & Stay Creative! Aidan Huang (Editor) ------------------------------------------- Onextrapixel Showcasing Web Treats Without Hitch web . http://www.onextrapixel.com twi . http://twitter.com/onextrapixel --------------------------------------------------------------------------------- This email and any files transmitted with it are confidential and intended solely for the use of the individual or entity to whom they are addressed. If you have received this email in error please notify the sender. This message contains confidential information and is intended only for the individual named. If you are not the named addressee you should not disseminate, distribute or copy this email. Please notify the sender immediately by email if you have received this email by mistake and delete this email from your system. If you are not the intended recipient you are notified that disclosing, copying, distributing or taking any action in reliance on the contents of this information is strictly prohibited.
-- This email and any files transmitted with it are confidential. If you have received this email in error please notify the sender and then delete it immediately. Please note that any views or opinions presented in this email are solely those of the author and do not necessarily represent those of Company. The recipient should check this email and any attachments for the presence of viruses. Company accepts no liability for any damage caused by any virus transmitted by this email. Company may regularly and randomly monitor outgoing and incoming emails (including the content of them) and other telecommunications on its email and telecommunications systems. By replying to this email you give your consent to such monitoring. ***** Save resources: think before you print.
Don’t Be Afraid to Show Some Personality
Although your email signature should be concise and memorable, it doesn’t have to be boring. Feel free to make your email signature stand out by polishing it with your creative design ideas or your personal touch. Using a warm greeting, adding a cheeky key as Dan Rubin does or encouraging people to “stalk” you as Paddy Donnelly does, all show personality behind simple text.
The key to a simple, memorable and beautiful email signature lies in balancing personal data and your contact details. In fact, some designers have quite original email signatures; most of the time, simple ASCII is enough.
-- h: http://danielrubin.org w: http://sidebarcreative.com b: http://superfluousbanter.org m: +1 234 567 8901 i: superfluouschat k: h = home, w = work, b = blog, m = mobile, i = aim, k = key
Paddy -- The Site: http://iampaddy.com Stalk Me: http://twitter.com/paddydonnelly
-- With optimism, Dmitry Belitsky http://belitsky.info
/////////////////////////////////////////////////////////////////// /// Matthias Kretschmann /// krema@xxxxxxxx.xx /// /// freelance designer & /// www.kremalicious.com /// /// photographer /// www.matthiaskretschmann.com /// /////////////////////////////////////////////////////////////////// /// media studies / communication science & art history /// /// MLU Halle-Wittenberg /// ///////////////////////////////////////////////////////////////////
-- With greetings from Freiburg, Germany, Vitaly Friedman (editor-in-chief) ------------------------------------------------- Smashing Magazine http://www.smashingmagazine.com - http://www.twitter.com/smashingmag online magazine for designers and developers
HTML?
If you can, stay away from HTML formatting. Every Web designer knows the pain of HTML newsletters, and while HTML is supported for email signatures, you’ll likely have problems with images and divider lines in different email clients. Some nice ASCII formatting may work in some cases.
-- carole guevin . editor //// design + digital culture magazine //// http://netdiver.net
-- Min, Tran Dinh Chief Creative Designer - Frexy Studio Website: http://frexy.com | Blog: http://min.frexy.com | Email: info@frexy.com Cellphone: (84) 012 345 678
- -- Rene Schmidt -- Berater für Web-Entwicklung & eCommerce, Linux-Webserver-Systemadministration & Web-Programmierung Vordamm 46, 21640 Horneburg; http://www.reneschmidt.de/ Tel: 0123.456.7.890; Skype: reneATreneschmidt.de Steuernummer 43/141/09180; USt-IdNr 219014862 -----BEGIN PGP SIGNATURE----- Version: GnuPG v1.4.9 (MingW32) Comment: Using GnuPG with Mozilla - http://enigmail.mozdev.org/ iEYEARECAAYFAktit8sACgkQucSanG9drm2ZYACggIeQST/C226LIsd/czEmrnrR TjUAniVPXI2lkA68fy3n+nUawdAE1nJ/ =+vZR -----END PGP SIGNATURE-----
--- Geoff Teehan Teehan+Lax Web Platforms | Digital Campaigns | Mobile Applications | Strategic Consulting T: 416 123 4567 x 890 | teehanlax.com | twitter.com/@teehanlax
---------------------------------------- Dmitry Dragilev ZURB | Marketing Lead getstarted@zurb.com http://www.zurb.com ------------------------------------------ Follow our blog at: http://www.zurb.com/blog Follow us on Twitter: @zurb http://twitter.com/zurb Check out Notable - Easiest way for teams to provide feedback on websites. http://www.notableapp.com ------------------------------------------
______________________________________________ Website: www.webdesignerdepot.com Twitter: www.twitter.com/DesignerDepot
Regards, Matt Ward Echo Enduring Media Web - http://www.echoenduring.com Blog - http://blog.echoenduring.com Twitter - @echoenduring - Follow me!
--
Dan Rubin
Sidebar Creative { Director of Training & User Experience }
mobile: +1 234 567 8901
http://sidebarcreative.com-- David Leggett Tutorial9 Founder 555.012.34567 @theleggett Tutorial9.net
Gareth Hardy Graphic Designer | Down With Design www.downwithdesign.com gareth@downwithdesign.com +44 (0) 0123 456 789
Grant Friedman www.colorburned.com Follow me on Twitter! http://twitter.com/colorburned ----------------------------------------
Many thanks, Yaili. yaili.com | webdesignernotebook.com | londonchronicles.com +44 (0) 1234 567890 skype: inayaili
Thanks! Jonathan Cutrell, Editor FuelYourInterface.com | @FuelInterface | @jCutrell
-- All the best, Rob Bowen Copywriter | Designer | Creative Consultant Co-Founder/Editor @ Arbenting & Dead Wings Designs http://arbent.net/blog http://deadwingsdesigns.com
Arseny -- Please consider the environment before printing this email. --- Arseny Vesnin http://designcollector.net Calendar: http://2010.designcollector.net Profile: http://designhub.ru Twitter: http://twitter.com/designcollector Flickr: http://www.flickr.com/groups/designcollector-6 Vimeo: http://vimeo.com/channels/designcollector Facebook: http://www.facebook.com/designcollector
Warm regards,
Dipti Kankaliya
{ dipti.kankaliya@studiomarch.com }
Studio March Private Limited
12 Moledina Road Camp Pune 1 India
Phone: +91-20-26334002
{ http://www.studiomarch.com }
MarchCast – The Studio March blog
{ http://www.studiomarch.com/mc }
--
This is an official email from Studio March Private Limited and is protected
by a disclaimer. If you are not the intended recipient of this email, please
visit: http://www.studiomarch.com/legal/email.Of course, if you’re really keen to use HTML, keep it simple:
- Make sure it still looks good in plain text.
- Use black and standard-sized fonts, and stay away from big, tiny and rainbow-colored fonts.
- Don’t use CSS. Inline HTML formatting is universally accepted.
- Use common Web fonts.
- Including a logo? Make sure the signature looks nice even when the logo doesn’t load or is blocked.
- Check how it looks when forwarded. Do all the lines wrap correctly?
- You may want to load your company image as your gravatar from Gravatar.com as Joost de Valk does.
- Feel free to experiemnt with your e-mail signature: Jan Diblík uses a signature with dynamicaly changed promo image.
–
 | Steve Stevenson, Web Designer www.misterstevenson.com | steve@misterstevenson.com |
Separate Signature From Content
Your signature should clearly be a separate entity. Wikipedia explains the correct way to separate the signature:
“The formatting of the sig block is prescribed somewhat more firmly: it should be displayed as plain text in a fixed-width font (no HTML, images, or other rich text), and must be delimited from the body of the message by a single line consisting of exactly two hyphens, followed by a space, followed by the end of line (i.e., “– \n”). This … allows software to automatically mark or remove the sig block as the receiver desires.”
There are other less standard ways to separate your signature. While not automatic formatting, a line of —–, ======, or _______ or even just a few spaces will visually separate your signature from your email.
-- ---------------------------------- Dan Oliver (editor) .net magazine (www.netmag.co.uk) ---------------------------------- Twitter: danoliver Email: dan.oliver@futurenet.com Phone: 01234 56789 ---------------------------------- Address for deliveries: .net, Units 1 & 2 Cottrell Court, Monmouth Place, Bath, BA1 2NP ----------------------------------
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Elliot Jay Stocks Elliot Jay Stocks Design Ltd. Registered in England & Wales #1234567 http://elliotjaystocks.com - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
### Cheers, -Dan
Vennlig hilsen Lars Bæk Byråleder & Tekstforfatter ................................................... JØSS! Storgata 15, 2408 Elverum Mob (+47) 01 23 45 67 xxxx@joss.as | www.joss.as
---------------------------------------------- Information Architects Inc. Tokyo Zurich Oliver Reichenstein, Founder http://informationarchitects.jp http://webtrendmap.com http://twitter.com/iA ----------------------------------------------
Wrestling With Your Email Client
Offering general advice on signatures is easy, sure. But anyone who has tried to implement automatic signatures in Outlook, Gmail or Yahoo knows it’s not always that simple. Here are some resources to help you get yours right every time.
Outlook
Changing Outlook’s signature is a real pain, but here’s a guide that teaches you a few things. If you use Outlook 2003, here’s another tutorial on custom signatures.
Entourage
Microsoft’s mail for mac works differently. Here’s a tutorial on how to set it up.
Gmail
Want just one basic signature? Here’s how to change the text. You’d think Google would allow you multiple signatures, links and a bit of formatting. If you’re looking for something a little more designed or wish to choose between multiple signatures, here are five ways to do it in Firefox.
Hotmail
Tips on custom images and more for Hotmail (Oh my!) can be found here. If you use Windows Live, here is a tutorial on adding images and HTML. The detail is helpful, even if the images are awful.
Yahoo
After a bit of research, I found that Yahoo used to support HTML signatures, but no longer. Here’s how to change your signature using rich text.
Apple Mail
Here is a pretty decent tutorial, with some inline HTML for formatting. It then explains how to implement it in the application. You even get some hints on how it will look on the iPhone.
Palm Pre
Learn how to customize your message on your Palm Pre here.
iPhone
Customize your “Sent from my iPhone” message here.
BlackBerry
Some information on how to change your message on BlackBerry smartphones here.
Resources
- The 4 Personalities of Poor Email Signatures
- 20 Tips for Creating an Effective Email Signature
- About the Signature Block on Wikipedia
- Email Signature Etiquette
Related Posts
You may be interested in the following related posts:
- How To Create A Great Web Design CV and Résumé?
- Business Card Design: Better Than A Plain Ol’ Business Card
- Invoice Like A Pro: Examples and Best Practices
(al)
© Kat Neville for Smashing Magazine, 2010. | Permalink | 79 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: email, signatures
|
Each year, the battle for television ratings begins. Networks unveil their latest creations, jockeying for position in the ratings race, doing everything and anything within their means to gain and keep as many viewers as possible. Months, sometimes years of planning, preparation, marketing, shooting, and editing are laid bare on the “tube” for all to see. Some shows fail miserably and are cancelled after a few months. Others thrive, and become the next big thing. They all hope to become the next American Idol.
Television broadcasts continue to have a major impact on society — both in positive and negative ways. Whether you have a long-standing love affair with your television set, or you just use it to kill the monotony when you’re taking a break from the internet, I’m sure you’ll agree that, due to the overwhelming impact TV has had on modern society (and on television producers’ pocketbooks), techniques and principles unique to television broadcast production and marketing are worth examining.
Let’s see if there are lessons to be learned from the television broadcasting medium that can be applied to web development, design, and related fields.
[Offtopic: by the way, do you know the Smashing Network has its own Smashing Network RSS Feed? Only excerpts are displayed in the feed.]
Pre-Production
Before a television show is actually produced (that is, filmed and edited), a large amount of pre-production work is done to ensure that the entire process will run smoothly and achieve a desired result. Pre-production work for television might include storyboarding, script writing, budget planning, preparing special effects, casting guest stars, arranging for stunts, as well as creating sets, props, and costumes. Only after such preparation can a polished and interesting product be realized.
Don’t Start Shooting Before You Prepare the Script
How can you apply pre-production methods in web development and design? If you’re designing a site from scratch, you might be tempted to jump into Photoshop without giving any forethought to the design. Have you researched the competition? Have you sketched some ideas on paper? Have you identified the target audience? Have you thought beforehand about particular design principles that would work in the context of the product or service being offered? Preparing answers to such questions can significantly impact the direction the design will ultimately take and the success it achieves.
What if the project is a simple blog post or article? Have you thoroughly researched the topic? Have you ensured that the same topic has not been covered ad nauseam throughout the blogosphere? Have you chosen your main points? In most cases, to create a solid, polished piece, many of those tasks should be completed before opening up your word processor.
Whatever project you’re working on, following the example of television broadcasts by integrating pre-production into your work strategy will likely have a large impact on your project’s final result.
On-Screen Branding
Over the years, television producers have recognized the importance of branding and have taken advantage of opportunities to promote their brand with digital on-screen graphics, while being careful that these don’t interfere with the viewing experience.
The methods of use for on-screen graphics vary from country to country and weren’t used as often prior to the late 1990s. Take a look at the two screen captures below, both from the popular American hospital drama ER.
This 1994 episode of ER has no on-screen branding
In 1994, on-screen branding of logos and other graphics was virtually non-existent. Nowadays, it’s virtually impossible to watch a television station without some kind of on-screen graphical overlay. The screen capture below shows the semi-transparent NBC logo in the bottom-right corner. In North America, this is the customary place for an on-screen logo, whereas in the UK a station logo is commonly found in the top left.
This 2005 episode of ER includes on-screen branding by means of a graphic logo
Television stations have used this technique to increase brand recognition, assert ownership of a video signal, and in some cases attempt to prevent or discourage piracy. Although the use of such technology was not fully utilized until recent years, its benefits were eventually recognized. Networks and television stations have repeatedly tried to innovate in this area in a way that does not greatly affect the viewing experience.
Non-Obtrusive Branding That Makes an Impression
Web developers have many opportunities to establish their brand using elegant, non-obtrusive methods. This might be by means of custom bullets on an unordered list, the subtle color and graphics on a PDF document, or even something as simple as a customized <blockquote> that harmonizes visually with the overall website theme.
Chris Coyier of CSS-Tricks has recently redesigned his site, however, in the previous version of his design, he beautifully accomplished a type of “on-screen branding” by means of a simple enlarged asterisk character that found its way into every nook and cranny of his site — in a non-obtrusive manner. (Although his new design is much nicer overall, the asterisk is not as prevalent.)
The branding on Soh Tanaka’s website can’t be missed. He beautifully incorporates various subtly-rounded blue elements that give his site character, doing so throughout the site in a non-obtrusive manner.
Similarly, Nettuts+ uses a plus symbol that is a primary part of that site’s branding.
Maximizing Screen Real Estate
With technological advances, television broadcasters have realized the advertising potential of screen space during popular programming. Besides the on-screen logo branding mentioned in the previous section, TV producers have for years regularly displayed on-screen advertisements for upcoming shows, usually at the bottom of the viewing area.
This technique in television broadcasting has been widely used during sporting events and especially on 24-hour sports channels that display scores and news updates in “ticker” format. But similar to the logo branding trend, this was not used regularly until the late 1990s and beyond.
Today, every major live sporting event will display the current score, game time, or other informational graphics at the top of the screen. Hockey and basketball broadcasts will commonly display this information even during action, while baseball will usually remove the graphics during action, except when the pitcher-batter view is being shown.
Take a look at the two screen captures below from Major League Baseball’s World Series, depicting the final moments of the 1993 and 2009 World Series, respectively.
Screenshot from the 1993 World Series with no informational graphics
Screenshot from the 2009 World Series with informational graphics
The 2009 World Series image shows the score of the game, the current inning, the number of outs, the current batter’s count, a network logo, and the current score in the series — displayed while action is in progress, without obstructing the view of the game. By contrast, the screenshot from the 1993 World Series has no on-screen graphics during the action.
Television broadcasts have utilized space on the screen that they believe can be sacrificed. During a televised sporting event, much of the broadcast consists of trivial in-between-the-action moments, so the use of informational graphics has proved to be extremely useful and is rarely obtrusive to the viewing experience. In fact, in today’s market, sports fans would be appalled to watch a game for more than two minutes without an on-screen graphical update of the score or current game time.
Don’t Make Them Hunt for Common Functions
Web site users, in certain contexts, will also expect a company’s site to provide information in certain areas. The top right corner of a website’s layout is traditionally reserved for shopping cart functions, search forms, and login/register buttons. The header often holds a horizontal navigation bar that begins and ends with “Home” and “Contact”, respectively. The footer will customarily hold contact info, copyright info, and terms/policy links. On blogs, footers have expanded greatly and might include bio info, twitter feeds, social media links, and more.
Of course, none of these are to be considered hard-and-fast rules, but under certain circumstances (sometimes on information-heavy layouts), users expect certain things. Taking advantage of space in this manner will follow the example of TV industry professionals who have obviously seen great value in displaying all sorts of informative and brand-oriented graphics in a convenient manner in their broadcasts.
Closed Captioning for the Hearing Impaired
Closed Captioning, or “subtitles” (as it’s often called outside of North America) is a system that displays a text transcription of the audio portion of a television broadcast. This system, shown in the photo below, is available on many television sets, DVDs, and even video games. For prerecorded television broadcasts, transcriptions are prepared beforehand, whereas live broadcasts are transcribed by a human operator in real time.
Recognizing the need to provide hearing impaired viewers with a comfortable experience, for more than 30 years television broadcasts have included closed captioning as an option in their programming.
Not Just Screen Readers
Web accessibility is the obvious lesson learned from this television broadcast standard. Making content accessible to a wide range of users, however, is not limited to just focusing on visually impaired users.
Some users may be voluntarily browsing with certain functionality disabled. This might include disabling scripting, images, or animations. In some rare instances, users may be limited to older browsers because of company restrictions on software updates. Content can be made accessible to virtually all users by coding clean semantic markup, implementing progressive enhancement, and performing regular testing on IE6 as well as browsers designed for visually impaired users.
Segues That Keep Viewers Locked In
Over the years, television producers have realized the power of the “clicker”. When a TV ad appears, many viewers will reach for the remote control and see if there isn’t something better to watch. This is inevitably going to occur, and is worsened when you consider that television now competes with the internet for viewing time. To combat the channel-surfing habit, TV stations will often provide virtually seamless segues from one show to the next, without commercial interruption.
In years past, it was customary that a TV program would end about five minutes before the next scheduled show. Then, after two or three minutes of ads, the closing theme and credits would play, sometimes followed by more ads, finally leading into the next show.
Television producers have evidently realized that the old method leaves a window of opportunity for “channel surfers” to escape. Nowadays, it’s common for the final scene of a TV program to run simultaneously with the closing credits, as shown in the screen capture below from the popular American series The Office.
Screenshot from The Office, rolling credits during the final scene
This technique virtually ensures that the viewer will see the introduction of the program that immediately follows. Likewise, the subsequent program will not start with opening credits and theme song, but instead will begin “cold” with the opening scene — a perfect segue to keep the viewer locked in.
There’s No Such Thing as “The End”
This principle can be applied when planning and storyboarding call-to-action processes in web architecture. A simple thank you page after a form submission can be transformed into a smooth gateway to related parts of the website. The completion of an online purchase can close with a “related products” screen. The end of a blog entry can include related links. The expiration of a software trial can promote the purchase of the full version. With the principle of smooth segues in mind, the possibilities are endless.
Web mail providers like Yahoo! Mail and Hotmail have recognized the importance of such a segue — indicated by the fact that, upon logout, the user is quickly redirected to the Yahoo! or MSN home page where there is always plenty to do.
Nielsen Ratings
The Nielsen ratings audience measurement system began with brand advertising and radio market analyses in the 1920s and 1930s, and later moved to television. It eventually became the standard for audience measurement information for television broadcasts around the world.
Nielsen Ratings on Broadcast TV in the U.S.
Television professionals that don’t pay close attention to trends and patterns in the weekly Nielsen ratings system, will likely not be able to compete with other regularly scheduled programs. Although the Nielsen system has been criticized, it is generally a trusted source of audience measurement and continues to be the standard for TV viewing statistics.
The Jakob Nielsen Ratings
Today, web professionals have access to site analytics, browser- and platform-use statistics, usability trends, A/B testing potential, job skills trends, and other technology-related statistics that could impact how they design, how much time they spend on browser and usability testing, how they plan site architecture, and even what projects they’ll build next. Some of the software and online applications used in obtaining the aforementioned data have become standards that, similar to the Nielsen ratings system, cannot be overlooked.
Regularly Scheduled Programming
In the TV world, in most cases, viewers know exactly when to expect a new episode of their favourite program, and this has served to solidify viewership for many broadcasts. Certain timeslots have come to be known as “prime time” because they fit into the recreational habits of most families — prior to bedtime and shortly after dinner.
It would be counter-productive if television networks decided to air new episodes, at random, whenever they fancied, without a regular schedule. It would be unlikely in such circumstances that a solid user-base would be established.
Maybe We’ll Publish Something, or Maybe We Won’t
Is it any wonder that A List Apart has established one of the most loyal readerships in the web design writing industry? They publish exactly four high-quality articles per month, two at a time, on two separate Tuesdays — now that’s regularly scheduled programming that readers can depend on!
Of course, there’s no need for other bloggers and authors to follow that exact pattern, but it has become generally understood that mid-week releases for articles tend to get higher traffic. This mid-week “time slot” has become recognized as “prime time” in the blogging world.
It should be noted, however, that this method may not work for every type of content. Also, if you decide to regularly schedule a specific kind of blog post on one day of the week or month, you’ll be restricting site content for that day, without the flexibility to change. If you’re prepared for such a commitment, then it may be worth a try. Also, if you ever decide to stop publishing a regularly scheduled topic, you may disappoint readers who subscribed because of that particular type of content. So, while the principle of regularly scheduled programming may have some benefits, it could be a risky endeavor if you’re not prepared for the commitment and it could create potential for reader backlash.
Post-Production
Post-production on television broadcasts occurs after all shooting and recording of the footage has completed, and may include video editing, adding a soundtrack, and integrating computer-generated visual effects. If any of the post-production work is overlooked or neglected, the final product will be affected.
Refine Your Product
Developers, designers, and site architects can follow this example by polishing, fine tuning, and ensuring that the finished product (whether it’s a large-scale application, a brochure site, or a simple blog post) meets the standards and requirements that were set during the planning and wireframing stages.
Spell checking, grammar checking, code quality assurance, usability testing, speed optimization, and dozens more website maintenance tasks may fall under the web development equivalent of “post-production” — and often such tasks go beyond even the launch of the project.
Conclusion
If a medium has existed for a significant amount of time, numerous practices associated with marketing in that medium will become solidly established and refined.
The web is still relatively young, and as designers and developers we have the opportunity to shape and create methods of marketing and production that will define this medium for years to come. The television industry has certainly established methods that can influence us to create a better and more intuitive user experience.
Related Resources
© Louis Lazaris for Smashing Magazine, 2010. | Permalink | 39 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags:
|
If you’re going to use color effectively in your designs, you’ll need to know some color concepts and color theory terminology. A thorough working knowledge of concepts like chroma, value and saturation is key to creating your own awesome color schemes. In Part 1: The Meaning of Color of our color theory series, we covered the meanings of different colors. Here, we’ll go over the basics of what affects a given color, such as adding gray, white or black to the pure hue, and its effect on a design, with examples of course.
[Offtopic: by the way, did you know that Smashing Magazine has one of the most influential and popular Twitter accounts? Join our discussions and get updates about useful tools and resources — follow us on Twitter.]
Hue
Hue is the most basic of color terms and basically denotes an object’s color. When we say “blue,” “green” or “red,” we’re talking about hue. The hues you use in your designs convey important messages to your website’s visitors. Read part 1 of this article for the meanings conveyed by various hues.
Examples
The primary hue of the background and some of the typography on the Happy Twitmas website is bright red.
Using a lot of pure hues together can add a fun and playful look to a design, as done in the header and elsewhere on this website.
Pure red is a very popular hue in Web design.
Mix uses a number of pure hues in its header and logo.
Green in its purer forms is seen less often and so stands out more than some other colors.
Chroma
Chroma refers to the purity of a color. A hue with high chroma has no black, white or gray in it. Adding white, black or gray reduces its chroma. It’s similar to saturation but not quite the same. Chroma can be thought of as the brightness of a color in comparison to white.
In design, avoid using hues that have a very similar chroma. Opt instead for hues with chromas that are the same or a few steps away from each other.
Examples
Cyan has a high chroma and so really stands out against black and white.
Another website with a high chroma blue, though it includes some tints and shades with somewhat lower chromas.
Combining high and low saturation in the same hue can make for a sophisticated and elegant design.
Colors with very high chroma are best used in moderation, as done here.
Differences in chroma can make for a visually pleasing gradient.
Saturation
Saturation refers to how a hue appears under particular lighting conditions. Think of saturation in terms of weak vs. strong or pale vs. pure hues.
In design, colors with similar saturation levels make for more cohesive-looking designs. As with chroma, colors with similar but not identical saturations can have a jarring effect on visitors.
Examples
The saturation levels of many of the different hues used here are similar, adding a sense of unity to the overall design.
Combining colors with similar muted saturation levels creates a soft design, which is emphasized by the watercolor effects.
Hues with lower saturation levels aren’t necessarily lighter, as shown here.
An excellent example of how using a hue with a high saturation against a background with low saturation can make the former really stand out.
Aother example of how low saturation colors make nearby high saturation colors really stand out.
Value
Value could also be called “lightness.” It refers to how light or dark a color is. Ligher colors have higher values. For example, orange has a higher value than navy blue or dark purple. Black has the lowest value of any hue, and white the highest.
When applying color values to your designs, favor colors with different values, especially ones with high chroma. High contrast values generally result in more aesthetically pleasing designs.
Examples
The high value of the yellow used here really stands out against the lower-value black and gray.
This website combines blue hues with two different values. Because the different values have enough contrast, the overall look is visually appealing.
Combining colors with similar values makes for an energetic and lively background (which is enhanced by the design itself).
The red here has a lower value than the light blue, which itself has a lower value than the white.
The human eye can pick up differences in value even among such similar hues.
Tones
Tones are created when gray is added to a hue. Tones are generally duller or softer-looking than pure hues.
Tones are sometimes easier to use in designs. Tones with more gray can lend a certain vintage feel to websites. Depending on the hues, they can also add a sophisticated or elegant look.
Examples
Tones can give websites a sophisticated look while adding some vintage and antique flair.
This website combines blues in a variety of tones, shades and tints.
Tones can be intensified by adding gray around them, as done here.
The tones used in the navigation and background design here give this website a vintage, hand-made feel.
A great example of how a pure hue can really stand out against a background of tones.
Some colors that we might consider gray are actually tones of other colors. In this case, the background is a blue tone but with a lot of gray added.
Shades
A shade is created when black is added to a hue, making it darker. The word is often incorrectly used to describe tint or tone, but shade only applies to hues made darker by the addition of black.
In design, very dark shades are sometimes used instead of black and can serve as neutrals. Combining shades with tints is best to avoid too dark and heavy a look.
Examples
Jonathan Moore’s website has a variety of different shades of purple in the background (and a couple of tints in other parts).
Using different shades together works well, as long as sufficient contrast between them is maintained.
An effective combination of shades and tints, particularly in the header.
Another background design that has shades (and a few tints) in a textured gradient.
Combining shades within textures adds interest to this website.
Tints
A tint is formed when white is added to a hue, lightening it. Very light tints are sometimes called pastels, but any pure hue with white added to it is a tint.
Tints are often used to create feminine or lighter designs. Pastel tints are especially used to make designs more feminine. They also work well in vintage designs and are popular on websites targeted at parents of babies and toddlers.
Examples
Caio Cardoso’s website has a variety of green tints in the background and in other elements.
The blue tint on Fernando Silanes’s website creates a soft and sophisticated look.
Blue tints are popular for sky and nature motifs.
Tints are also popular in watercolor-based designs.
Tints combined together make for a sophisticated gradient.
Conclusion
While you don’t necessarily have to remember all of these technical terms, you should be familiar with the actual concepts, especially if you want to master part 3 of this series (in which we create our own color schemes). To that end, here’s a cheat sheet to jog your memory:
- Hue is color (blue, green, red, etc.).
- Chroma is the purity of a color (a high chroma has no added black, white or gray).
- Saturation refers to how strong or weak a color is (high saturation being strong).
- Value refers to how light or dark a color is (light having a high value).
- Tones are created by adding gray to a color, making it duller than the original.
- Shades are created by adding black to a color, making it darker than the original.
- Tints are created by adding white to a color, making it lighter than the original.
Further Resources
- Glossary of Color Terms
An excellent reference from Color Cube. - Design Tip: Saturate Your Colors
An older article, but still has some valuable information. - Elements of Design: Value and Color
An excellent lesson in color from the University of Saskatchewan. - Color
An article from Design Notes about color and how we perceive it.
(al)
© Cameron Chapman for Smashing Magazine, 2010. | Permalink | 46 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: colors
|
CSS3 is coming. Although the browser support of CSS 3 is still very limited, many designers across the globe experiment with new powerful features of the language, using graceful degradation for users with older browsers and using the new possibilites of CSS3 for users with modern browsers. That’s a reasonable solution — after all it doesn’t make sense to avoid learning CSS3 (that will be heavily used in the future) only because these features are not supported yet. The point of this article is to give you a glimpse of what will be possible soon and what you will be using soon and provide you with an opportunity to learn about new CSS3 techniques and features.
In this post we present 50 useful and powerful CSS3/jQuery-techniques that can strongly improve user experience, improve designer’s workflow and replace dirty old workarounds that we used in Internet Explorer 6 & Co. Please notice that most techniques presented below are experimental, and many of them are not pure CSS3-techniques as they use jQuery or other JavaScript-library.
[Offtopic: by the way, did you already get your copy of the brand new Smashing Book?]
Visual Effects and Layout Techniques With CSS3
CSS3 Analogue Clock
Analogue clock created using webkit transition and transform CSS. JavaScript is only used to pull in the current time.
Use CSS3 to Create a Dynamic Stack of Index Cards
We will create a dynamic stack of index cards solely with HTML and CSS3 and use such CSS3 features as transform and transition (for the dynamic effects) and @font-face, box-shadow and border-radius (for the styling).
dynamic PNG shadow position & opacity
When the light is turned on, the position and opacity of the logo shadow will change dynamically, depending on the position and distance of the light bulb. Don’t forget to drag the logo and/or the light bulb around!
How To Create A Sexy Vertical Sliding Panel Using jQuery And CSS3
So, what about a vertical sliding panel that would act as some sort of drawer instead of the usual top horizontal sliding panel that pushes everything else down when it opens? While thinking of alternatives to the usual horizontal panels, I thought it would be nice to create something that works in a similar way, but that is a bit more flexible.
Awesome Overlays with CSS3
The trick with these overlays is the gradient border, going form a lighter to darker orange as you go from top to bottom. To create that effect we used to the border-image property, which is a tricky little addition to CSS.
CSS3 & Flexible UI: Avoid Recutting UI Graphics for Mobile
What if we could replace almost all of the graphical UI elements within Fennec with CSS created equivalents? As a designer, am I comfortable bypassing Photoshop and letting CSS run the pixel rodeo? After a few initial tests, the answer to both of those questions was a very solid “yes”. A solid “friggin’ right” if in Cape Breton.
How To Create Depth And Nice 3D Ribbons Only Using CSS3
We will use box-shadow to create a drop-shadow with RGBa, a color model that allows an optimized contrast with any kind of backgrounds. RGBa is the standard RGB model (0,0,0 – 255,255,255) and it adds the last option (a) for the opacity. We can use this model also for other properties and it works with the new browser.
Create a Beautiful Looking Custom Dialog Box With jQuery and CSS3
This custom dialog box is one of the scripts in that website and I think it will be quite useful for all of us. The reason I have this custom dialog box is to overcome the inconsistencies across different browsers. And, of course, it uses CSS3 to style everything.
Drop-In Modals with CSS3
For those using WebKit based browsers (Safari and Chrome), CSS3 effects and properties can help you create fast, simple modals by using transforms, animation, and some subtle design cues.
Newspaper Layouts with Columns and Image Masks
The faux-newspaper look goes in and out of style online pretty frequently, but these tricks can be used for quite a few cool applications. What we’ll talk about here is using -webkit-mask-image and -webkit-column-count.
Navigation Menus With CSS 3
Sweet AJAX Tabs With jQuery 1.4 & CSS3
This post is a tutorial of making an AJAX-powered tab page with CSS3 and the newly released jQuery 1.4.
Sweet tabbed navigation bar using CSS3
Although I don’t understand why animations have been added in CSS3, this upcoming standard does have a couple of very neat features added to the CSS we’re using today. I wanted to take a couple of these new things, and create a Sweet tabbed navigation using CSS3.
Halftone Navigation Menu With jQuery & CSS3
Today we are making a CSS3 & jQuery halftone-style navigation menu, which will allow you to display animated halftone-style shapes in accordance with the navigation links, and will provide a simple editor for creating additional shapes as well.
Building Coverflow With CSS Transforms
I was able to create a coverflow effect that actually flows and animates in real-time, without using canvas or prerendered graphics.
CSS3 Hover Tabs without JavaScript
With the new techniques in CSS3 and clever applications of existing CSS it is increasingly stepping on the toes of JavaScript. Which to be honest isn’t necessarily a bad thing. I thought I’d try my hand at something so here is a basic CSS tabbed content section that changes on hover.
CSS 3 Transitions and Animations
Going Nuts with CSS Transitions
I’m going to show you how CSS 3 transforms and WebKit transitions can add zing to the way you present images on your site.
Sliding Vinyl with CSS3
We take a standard album cover, a little HTML, and some CSS3 transitions and transforms to create a sliding vinyl effect for showing off the music you love.
Fun with CSS3 and Mootols
These examples came about when experimenting with the extend property in MooTools. By extending the styles class I could add CSS3 properties into the Core MooTools framework and do CSS3 animations.
Star Wars HTML and CSS: A NEW HOPE
There are a lot of CSS transitions experiments going on right now. Yesterday I discovered another HTML and CSS experiment which went “far far away”, compared with my simple CSS gallery.
Guillermo Esteves presented a piece of history translated for tomorrows browsers: the Star Wars Episode IV opening crawl in HTML and CSS.
Fun with 3D CSS and video
Zach Johnson has been having fun with 3D effects via CSS such as his isocube above, which is brought to you with simple HTML (including a video tag for a playing video on the surface!) and some CSS.
CSS3 animations and their jQuery equivalents
This tutorial/these examples will show the use of the same HTML, with different classes for CSS3 and jQuery. You can compare both the codes and see which one you like more. Don’t forget to check the demo/download the source code to view how everything is working under the hood.
CSS Animations
No matter how fast internet tubes or servers are, we’ll always need spinners to indicate something’s happening behind the scenes.
Snowy CSS3 Animation
It’s cold and snowy down here in Brighton, so to celebrate the falling white stuff (and of course the various festivities at this time of year) Clearleft’s very own Natbat has made a snowy CSS3 animation surprise for all you Safari and Chrome users out there.
What You Need To Know About Behavioral CSS
In this article, we will take those properties a step further and explore transformations, transitions, and animations. We’ll go over the code itself, available support and some examples to show exactly how these new properties improve not only your designs but the overall user experience.
3D Cube using new CSS transformations
The impression of a three dimensional cube can be created using modern CSS techniques, without the need for JavaScript, imagery, canvas or SVG. Using the proprietary transform property to skew and rotate shaded rectangles, individual cube faces can combine to form a 3D object.
Playing around with WebKit Animations
I’ve been playing around doing a KeyNote like animation done with CSS and some JS to hook up the necessary events. The animation is kind of like a deck of cards. When you go to the next one the current one zooms in and fades out, symbolizing getting closer to the viewer. The next card then zooms and fades in from the back and to give a fancy effect-
More on 3D CSS Transforms
Various 3D CSS Transforms in an overview.
Gradients, RGBA and HSL with CSS 3
Working With RGBA Colour
CSS3 introduces a couple of new ways to specify colours, and one of those is RGBA. The A stands for Alpha, which refers to the level of opacity of the colour, or to put it another way, the amount of transparency. This means that we can set not only the red, green and blue values, but also control how much of what’s behind the colour shows through. Like with layers in Photoshop.
CSS3 Gradients: No Image Aqua Button
I played around with WebKit CSS3 gradient and created a useless but fun stuff – an Aqua button with no images! Back in the time when Mac OS X was first announced, there’re a plenty of web tutorials that describe how to create the sexy aqua button with Photoshop, and now I can show how to create one with CSS!
CSS3 HSL & HSLA
A tutorial on using the HSL & HSLA declarations along with the quick + / – guide to which browsers currently support the herein effect.
Super Awesome Buttons with CSS3 and RGBA
One of our favorite things about CSS3 is the addition of RGBA, a color mode that adds alpha-blending to your favorite CSS properties. We’ve kicked the tires on it a bit with our own projects and have found that it helps streamline our CSS and makes scaling things like buttons very easy. To show you how, we’ve cooked up an example with some super awesome, scalable buttons.
Using the Shadow-Property in CSS3
Create a Letterpress Effect with CSS Text-Shadow
The letterpress effect is becoming hugely popular in web design, and with a couple of modern browsers now showing support for the text-shadow CSS3 property it’s now simple and easy to create the effect with pure CSS. No Photoshop trickery here!
Shadows and CSS3
I’m currently working on a design that uses text-shadow and box-shadow, with RGBA in place to create the shadow color. I wanted to tweet about this technique because it’s simple and awesome, but to my surprise I couldn’t find a good, quick tutorial that covered the use of both text and box-shadow, along with RGBA. So I decided to create one.
I learned this technique from Dan Cederholm’s Handcrafted CSS book, so if you’re able I’d recommend just going out and grabbing that, as he explains it much more elegantly and thoroughly than I ever could.
Learning New CSS3 Selectors
CSS3 + Progressive Enhancement = Smart Design
Progressive enhancement is a good thing, and CSS3 is even better. Combined, they enable designers to create lighter, cleaner websites faster and easier than ever before.
A Look at Some of the New Selectors Introduced in CSS3
Here is a run-down of just some of the things that is possible with CSS3 selectors. Of course CSS3 isn’t supported at all by any IE browsers including IE8 but all latest versions of Safari, Firefox and Opera support most, if not all of them.
Cleaner Code with CSS3 Selectors
In this article I’m going to take a look at some of the ways our front and back-end code will be simplified by CSS3, by looking at the ways we achieve certain visual effects now in comparison to how we will achieve them in a glorious, CSS3-supported future. I’m also going to demonstrate how we can use these selectors now with a little help from JavaScript – which can work out very useful if you find yourself in a situation where you can’t change markup that is being output by some server-side code.
The CSS3 :target Pseudo-class And CSS Animations
It’s no secret that I’m always looking for an easy way out using CSS instead of trying to replicate things with convoluted code — there are so many underused techniques that we could be applying to our designs as an enhancement layer! In this experience, I take a brief look into the :target pseudo-class and a very simple CSS animation.
The CSS3 :not() selector
There isn’t a lot of information to be found about the :not() selector. The specifications only offer 3 lines of text and a couple of examples. So lets see what it can do!
IE CSS3 pseudo selectors
ie-css3.js allows Internet Explorer to identify CSS3 pseudo-class selectors and render any style rules defined with them. Simply include the script in your pages and start using these selectors in your style sheets — they’ll work in IE… Honest…!
CSS3 Galleries
How To Create a Pure CSS Polaroid Photo Gallery
Magical things can be done by combining various CSS properties, especially when some of the new CSS3 tricks are thrown into the mix. Let’s take a look at building a cool looking stack of Polaroid photos with pure CSS styling.
An Awesome CSS3 Lightbox Gallery With jQuery
In this tutorial we are going to create an awesome image gallery which leverages the latest CSS3 and jQuery techniques. The script will be able to scan a folder of images on your web server and build a complete drag and drop lighbox gallery around it.
If That Is An Awesome CSS3 Gallery, How Would You Call Mine?
Editable CSS3 Image Gallery
We build a pretty typical image gallery design pattern, a grid of images that pop up larger when clicked. But this image gallery page makes use of hot semantic HTML5 markup, loads of visual treats with CSS3 and jQuery, and made editable through the CMS PageLime. Quick reminder, the demo is awesome-est in a WebKit browser (Safari or Chrome).
Replacing CSS Hacks with CSS 3
Rounded corner HTML elements using CSS3 in all browsers
This is a behavior htc file for Internet explorer to make CSS property ” border-radius ” work on all browsers. At present, all major browsers other than IE shows curved corner by adding 4 lines of css.
Using Rounded Corners with CSS3
As CSS3 gets closer to becoming the new standard for mainstream design, the days of rounded corners through elaborate background images is fading. This means less headache and time spent working out alternatives for each browser.
Better Image Preloading with CSS3
Using CSS3’s new support for multiple background images, we can use a single, existing element to preload all of the required images.
Saying Goodbye to the overflow: hidden Clearing Hack
I’m now saying goodbye to overflow: hidden and the deciding factor for me is CSS3. Specifically box-shadow. At least in the sense that box-shadow was the first property I noticed being negatively impacted by the use of overflow: hidden. Like the positioned child elements mentioned above, box-shadow can get clipped when the parent (or other ancestor) element has overflow applied. And there are several other things to consider as we move forward using more CSS3. Text-shadow and transform can also potentially be clipped by overflow: hidden.
General articles about CSS 3
How to bring CSS3 features into your design
Top web browser (such as Firefox 3.5 and Safari 4) have introduce some cool features you can already use. Now, with just a few lines of css you can do things you used to do with images and javascript.
Practical Uses of CSS3
In this article I’ll show you some practical uses for CSS3.
11 Classic CSS Techniques Made Simple with CSS3
We’ve all had to achieve some effect that required an extra handful of divs or PNGs. We shouldn’t be limited to these old techniques when there’s a new age coming. This new age includes the use of CSS3. In today’s tutorial, I’ll show you eleven different time-consuming effects that can be achieved quite easily with CSS3.
Mobile optimised websites using CSS3 Media Queries
A while ago I wrote about using CSS3 Media Queries on my website redesign to provide mobile visitors with an optimised view designed for smaller screens. I thought it might be useful if I went into a bit more detail on how I’m doing this.
Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3
HTML5 is the future of web development but believe it or not you can start using it today. HTML5 is much more considerate to semantics and accessibility as we don’t have to throw meaningless div’s everywhere. It introduces meaningful tags for common elements such as navigations and footers which makes much more sense and are more natural. This is a run through of the basics of HTML5 and CSS3 while still paying attention to older browsers. Before we start, make note of the answer to this question. Do websites need to look exactly the same in every browser?
Get the best out of CSS3
Craig Grannell turns into a cross between Jeffrey Zeldman and Russell Grant, taking a peek at what the future of CSS has to offer – with a little help from Opera, Safari and Firefox
Practical Uses of CSS3
“One big item for me is how much we use CSS3. Yes I know, it is not fully supported across all browsers. If you still want everything to look exactly the same across all browsers, you should probably just close this article and not read about CSS for another 10 years. A user is not going to pull up your site in two different browsers to compare the experience, so they won’t even know what they are missing. Just because something is not fully supported, that does not mean that we can’t use it to an extent. In this article I’ll show you some practical uses for CSS3.”
A Crash-Course in Advanced CSS3 Effects
This video tutorial reviews a bunch of different neat effects that can be used in Safari 4, Chrome, and for all iPhone development.
33 Must Read CSS3 Tips, Tricks, Tutorial Sites and Articles
An extensive overview of CSS3-techniques, tools, articles and resources.
© Smashing Editorial for Smashing Magazine, 2010. | Permalink | 53 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: CSS, css3
|
Stories have defined our world. They have been with us since the dawn of communication, from cave walls to the tall tales recounted around fires. They have continued to evolve with their purpose remaining the same; To entertain, to share common experiences, to teach, and to pass on traditions.
Today we communicate a bit differently. Our information is fragmented across various mass-media channels and delivered through ever-changing technology. It has become watered down, cloned, and is churned out quickly in 140-character blurbs. We’ve lost that personal touch where we find an emotional connection that makes us care.
Using storytelling, however, we can pull these fragments together into a common thread. We can connect as real people, not just computers. In this article we’ll explore how user experience professionals and designers are using storytelling to create compelling experiences that build human connections.
[Offtopic: by the way, do you know the Smashing Network has its own Smashing Network RSS Feed? Only excerpts are displayed in the feed.]
It Begins with a Story
In 1977, a simple story set the film industry on its side. The special effects technology used to create this story had not been created or used in filmmaking at the time of its writing. The author disregarded what was popular and marketable at the time (apocalyptic and disaster movies) to create his own vision. The film starred unknown actors and the genre had mainly been seen in 1930s serial movies. It was turned down by many film studios and at one point was almost shelved.
Image credit: Wired (Courtesy of Ballantine Books)
The movie, if you haven’t guessed, was Star Wars. The author was George Lucas. Star Wars went on to become one of the most successful films of all time and turned into a pop culture phenomenon. It gave birth to the blockbuster and the trilogy, and completely changed the way movies with special effects were made. Many of today’s most influential film companies were spawned from the success of these movies: LucasFilm, THX, Industrial Light & Magic (ILM), and Pixar.
Star Wars wasn’t a new story though. It drew from mythic archetypes of stories told over thousands of years.
Revealing the Design in Stories
The creation of a story is often viewed as an almost magical or random process. The author sits in front of their canvas, the blank word processor, and begins to type whatever inspires them at the moment. Great stories, though, don’t just happen randomly; they are designed. There is a pattern at work here. In order to be entertaining, have the right dramatic cues, and tap deep into our collective psyche, a specific method is used to build the story. A story that fails to pull the audience emotionally and keep their attention may not have used enough of these patterns as a guide, as shown in the typical story arc below.
The story arc is widely used in screenwriting and novels.
The structure of the story has been around since long before screenwriting was taught. There was a point that it remained simply an unnoticed rhythm in the background of every story. Some aspects of this structure — like the hero’s journey and comparative mythology — were first popularized by Joseph Campbell. He wrote about his discovery in the book The Hero with a Thousand Faces. Campbell was a student of Swiss Psychiatrist Carl Jung, who believed that we are all born with a subconscious idea of what a “hero”, a “mentor”, and a “quest” should be.
Campbell studied the structure of religion and myths across many cultures. What he discovered is that, consciously or not, every story (or myth) told had been created with the same basic formula. This is why great stories transcend even language barriers. It was this conclusion made by Campbell through his research that created large ripples in the waters of myth and religion.
We find the blueprint for “The Hero’s Journey” in films like Star Wars and The Matrix (via Star Wars Origins, Unofficial Site)
The stories we have seen on the silver screen or read about in novels have been able to captivate us by continuing to use these patterns. We talk about dialogue and certain scenes at the water cooler as if they had happened to a mutual friend, rather than some fictional character. All because we became emotionally invested in the characters and the story.
This type of emotional investment is something that brands strive for every day. Starbucks doesn’t want to just sell us a cup of coffee; they want customers to become invested in their story — the ambience, the aromas, the community. The goal is to become the “third place” for people (work, home, and Starbucks). They say, for them, “It’s really about human connection.”
The Power of Emotion
When speaking about stories, we describe the experience in a certain way. It tends to be more of an emotional experience, sometimes affecting us more on a personal level in how we relate to the story. This is much different from the way we traditionally describe the experience with products like websites or applications. Those are seen as more utilitarian and task-oriented.
If we are able to accomplish what we came to do, say transfer some money in a banking application, then it has been a good user experience. In order to achieve our goals, the interface should be usable and function the way we expect. This view is preached by many usability experts including Donald Norman, a professor of cognitive science and usability consultant for the Nielsen Norman Group.
After hearing that if people followed his rules “everything would be ugly,” Norman decided to explore people’s relationship to design. The result was the book Emotional Design. Through his research, Norman found that design affects how people experience products, which happens at three different levels, and translates into three types of design:
- Visceral Design This design is from a subconscious and biologically pre-wired programmed level of thinking. We might automatically dislike certain things (spiders, rotten smells, etc.) and automatically like others (”attractive” people, symmetrical objects, etc). This is our initial reaction to the appearance.
- Behavioral Design This is how the product/application functions, the look and feel, the usability, our total experience with using the product/application.
- Reflective Design This is how it makes us feel after the initial impact and interacting with the product/application, where we associate products with our broader life experience and associate meaning and value to them.
Image credit: D. Alan Harris Photography
There is a lot more to emotion than can be covered here, but understanding those basic levels of processing gives us some insight into why storytelling is so powerful. Consider how the levels of thinking play off each other in an amusement park: People pay to be scared. At the Visceral Level we have a fear of heights and danger. At the Reflective Level we trust that it is safe to go on the ride, and we seek that emotionally charged rush and sense of accomplishment (overcoming that fear of heights) after the ride is finished. Knowing that emotion is so vital to how we think makes it more important to create not just a functional and usable experience, but to seek and make a meaningful connection.
The Basics of Storytelling for User Experience
At a basic level, storytelling and user experience have common elements — like planning, research, and content creation — that can be utilized for effectively developing an experience. Storytelling offers a way for the team to really understand what they are building and the audience that they are creating it for. Stories allow for the most complex of ideas to be effectively conveyed to a variety of people. This designed product/experience can then offer meaning and emotion for its users. The professionals that are currently using the power of narrative in their projects are doing it in vastly different ways. The following sections attempt to outline some of the current usage and benefits of modern storytelling.
Bring Teams Together
User experience professionals typically have to work with people from many different backgrounds. Depending on the type of experience, it might require the effort of everyone from an engineer to a user interface designer. Also, in many cases, the approach in creating websites or applications is to consider the technology, or limitations of that technology, first. Finally, to make matters more complex, larger teams tend be split with concerns regarding their domain. For example, the marketing person is going to focus on their directives and motivations based on their initiatives. This is not always in the end-user’s best interest and results in a diluted and poor experience.
The Disciplines of User Experience by Dan Saffer
The infographic above depicts the many different fields that make up the disciplines of user experience. The user experience team selected to create an iPhone application for the masses would be quite different from one that is developing a medical device used by doctors. As described earlier, the individuals that have been involved in crafting stories have been successful in tapping into a way of communicating that has been around for thousands of years. Utilizing storytelling, user experience teams can also inject emotion and value into the end product for users.
User-Centered Goal
In reading through the storytelling approach, it might seem that the story is just another way of saying “strategy.” With storytelling, though, tied to the story the interactions should communicate is a more user-centered goal. Companies like Apple have used similar methods in their design process to really define what they are building.
Cindy Chastain refers to it as an Experience Theme. She says this theme is “the core value of the experience” being created. Christian Saylor refers to it as finding the Lead Character. Without this user-centered goal, he states, we are just “designing for the sake of designing.”
By centering around a specific theme, or character, the uncoordinated elements of an experience all have a clear goal and purpose. With storytelling, a diverse team creating a website or application can collectively link together the tangible elements and create something that is a meaningful experience and is more than just bits and bytes.
Defining the User
There is a lot of discussion and articles about usability and functionality of websites and applications. Functionality, of course, is important. For example, what good is an airplane if the engine isn’t powerful enough to get it off the ground? If you take a step back though, the more important question should be: How far does the user need to go? If it’s only a few miles down the road, then it really doesn’t matter if the plane is functional, it’s the wrong solution altogether. So, discovering what we really need to build is a key in the initial phase of building the user experience.
Image source: Mishka
When research is finished, we typically move on to create personas as a way of understanding the user and can be looked at as part of creating the story. By building a fictional representation of the user that is based on real research and observation, we are able to empathize with them and really understand their needs. Using the created personas and then creating stories about them, we are able to cast a more meaningful vision of the project.
Persona Sample by Fuzzy Math
The storytelling approach allows us to transfer this research in an anecdotal way. This has shown to have a better recall rate of information. In addition, being able to empathize with users through stories allows for better understanding of the emotional side of the experience. Films and video games deliver successful experiences that impact people on an emotional level. This is something people will begin to expect more from websites and applications that they use everyday. We can evolve the focus of creating a simple task-driven and functional website/application into a valuable human connection. We are, after all, a “global campfire” as Curt Cloninger refers to it. He goes on to say, “But the web is not a global network of connected computers. The web is a global network of connected people. And story-telling is still the most effective way to emotionally impact people.”
The Benefits
Most projects have a lot of documentation outlining their goal and strategy. These come in a set of business requirements, functional documentation, and any other pieces of supporting research/information. Using storytelling can help improve the overall product/experience:
- Puts a human face on dry data
- Can simplify complex ideas for a team
- More efficient team collaboration and purpose
- Insight into the key users
- Setting a project direction faster
- Better communication within large agencies/organizations
- Experience delivers meaning and value to users
Storytelling can help teams focus their efforts on everything from the content on the website to understanding the business problem in a new way. For example, you can define the scope of a project quickly without designing or wireframing screens. Dorelle Rabinowitz shows how The UX team for Yahoo Personals created a story around how a fictional dating couple would go through some specific scenarios. Using this, the team was able to come to a better understanding of what the website should do and the type of experience the users go through. It opened it up from very task- and strategy-based steps to the more real and emotional experience of dating. It is a powerful way to really get the team talking directly to the experience rather than creating documentation that only talks around it.
Happily Ever After: The Reality
Image source: Fallen Princesses by Dina Goldstein
There are many different opinions on what the ideal user experience process should be. Many of them stem from the fundamental approaches developed by Alan Cooper, a pioneer in building software with user-driven experiences. But as technology evolves, so do the approaches and processes to create solutions that meet users’ needs. The variety of approaches in UX are akin to the number of frameworks available for developing software. Much of the time it comes down to what is best for the type of projects a team typically works on.
Your ability to adhere to a process is dependent on many things, like timeline, budget, and business goals. In reality, it’s not always possible to do everything as specifically outlined. Storytelling is a way to connect teams quickly, and gain insight and understanding. The experiences we create communicate with those elements through the design, content, and user interaction. Storytellers have successfully been communicating for much longer than websites have been around — which makes it a valuable tool from the business side of design.
To Be Continued…
In the next part of “Better User Experience Using Storytelling” we will hear from creative professionals leading the way in this relatively new world of combining the craft of storytelling with user experience. We’ll also look at how storytelling can be applied to more than just interactive experiences — we find it in everything from packaging to architecture.
Resources
- Star Wars Origins
- Emotional Design by Donald Norman
- A Practical Guide to The Hero with a Thousand Faces by Joseph Campbell
- “Experience Themes” by Cindy Chastain
- “Storytelling – A Compelling Design Tool” by Dorelle Rabinowitz
- “The Art of Storytelling” by Christian Saylor
- “A Case for Web Storytelling” by Curt Cloninger
- Personas and How to Increase the Quality of Solutions
(ll)
© Francisco Inchauste for Smashing Magazine, 2010. | Permalink | 53 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: usability, user experience, ux
|
Color in design is very subjective. What evokes one reaction in one person may evoke a very different reaction in somone else. Sometimes this is due to personal preference, and other times due to cultural background. Color theory is a science in itself. Studying how colors affect different people, either individually or as a group, is something some people build their careers on. And there’s a lot to it. Something as simple as changing the exact hue or saturation of a color can evoke a completely different feeling. Cultural differences mean that something that’s happy and uplifting in one country can be depressing in another.
This is the first in a three-part series on color theory. Here we’ll discuss the meanings behind the different color families, and give some examples of how these colors are used (with a bit of analysis for each). In Part 2 we’ll talk about how hue, chroma, value, saturation, tones, tints and shades affect the way we perceive colors. And in Part 3 we’ll discuss how to create effective color palettes for your own designs.
[Offtopic: by the way, do you know the Smashing Network has its own Smashing Network RSS Feed? Only excerpts are displayed in the feed.]
Warm Colors
Warm colors include red, orange, and yellow, and variations of those three colors. These are the colors of fire, of fall leaves, and of sunsets and sunrises, and are generally energizing, passionate, and positive.
Red and yellow are both primary colors, with orange falling in the middle, which means warm colors are all truly warm and aren’t created by combining a warm color with a cool color. Use warm colors in your designs to reflect passion, happiness, enthusiasm, and energy.
Red (Primary Color)
Red is a very hot color. It’s associated with fire, violence, and warfare. It’s also associated with love and passion. In history, it’s been associated with both the Devil and Cupid. Red can actually have a physical effect on people, raising blood pressure and respiration rates. It’s been shown to enhance human metabolism, too.
Red can be associated with anger, but is also associated with importance (think of the red carpet at awards shows and celebrity events). Red also indicates danger (the reason stop lights and signs are red, and that most warning labels are red).
Outside the western world, red has different associations. For example, in China, red is the color of prosperity and happiness. It can also be used to attract good luck. In other eastern cultures, red is worn by brides on their wedding days. In South Africa, however, red is the color of mourning. Red is also associated with communism. Red has become the color associated with AIDS awareness in Africa due to the popularity of the [RED] campaign.
In design, red can be a powerful accent color. It can have an overwhelming effect if it’s used too much in designs, especially in its purest form. It’s a great color to use when power or passion want to be portrayed in the design. Red can be very versatile, though, with brighter versions being more energetic and darker shades being more powerful and elegant.
Examples
The dark shades of red in this design give a powerful and elegant feel to the site.
The true red accents stand out against the dark black background, and give a powerful and high-end feeling to the site.
The very bright red accents on this site give a sense of energy and movement.
The dark red on this site, because it’s combined with grunge elements, seems more like the color of blood.
Dark red, when combined with white and gray, gives a very elegant and professional impression.
Orange (Secondary Color)
Orange is a very vibrant and energetic color. In its muted forms, it can be associated with the earth and with autumn. Because of its association with the changing seasons, orange can represent change and movement in general.
Because orange is associated with the fruit of the same name, it can be associated with health and vitality. In designs, orange commands attention without being as overpowering as red. It’s often considered more friendly and inviting, and less in-your-face.
Examples
The bright orange box draws attention to its contents, even with the other bright red elements on the page.
Orange is used here in its most obvious incarnation, to represent fire.
The dark orange, when set against the lime green, almost acts as a neutral and grounding color here.
Orange is used here to give a friendly and inviting impression.
The orange accents here add a lot of visual interest and bring attention to the call to action.
Yellow (Primary Color)
Yellow is often considered the brightest and most energizing of the warm colors. It’s associated with happiness and sunshine. Yellow can also be associated with deceit and cowardice, though (calling someone yellow is calling them a coward).
Yellow is also associated with hope, as can be seen in some countries when yellow ribbons are displayed by families who have loved ones at war. Yellow is also associated with danger, though not as strongly as red.
In some countries, yellow has very different connotations. In Egypt, for example, yellow is for mourning. In Japan, it represents courage, and in India it’s a color for merchants.
In your designs, bright yellow can lend a sense of happiness and cheerfulness. Softer yellows are commonly used as a gender-neutral color for babies (rather than blue or pink) and young children. Light yellows also give a more calm feeling of happiness than bright yellows. Dark yellows and gold-hued yellows can sometimes look antique and be used in designs where a sense of permanence is desired.
Examples
The bright yellow header and graphics used throughout this site give a sense of energy and positivity.
The light yellow is used almost as a neutral in the header here, and combined with the hand-drawn illustrations gives a very cheerful impresison.
The bright yellow accents bring attention to the most important parts of this site.
The bright yellow sunflower reminds visitors of summer on this site, and combined with the antique-yellow background, it gives a homey and established feeling.
The bright yellow header here adds a bit of extra energy to this design.
Cool Colors
Cool colors include green, blue, and purple, are often more subdued than warm colors. They are the colors of night, of water, of nature, and are usually calming, relaxing, and somewhat reserved.
Blue is the only primary color within the cool spectrum, which means the other colors are created by combining blue with a warm color (yellow for green and red for purple). Greens take on some of the attributes of yellow, and purple takes on some of the attributes of red. Use cool colors in your designs to give a sense of calm or professionalism.
Green (Secondary Color)
Green is a very down-to-earth color. It can represent new beginnings and growth. It also signifies renewal and abundance. Alternatively, green can also represent envy or jealousy, and a lack of experience.
Green has many of the same calming attributes that blue has, but it also incorporates some of the energy of yellow. In design, green can have a balancing and harmonizing effect, and is very stable. It’s appropriate for designs related to wealth, stability, renewal, and nature. Brighter greens are more energizing and vibrant, while olive greens are more representative of the natural world. Dark greens are the most stable and representative of affluence.
Examples
The extremely muted greens of this site give it a very down-to-earth and natural feeling.
The bright green header of this site mixed with the leaf motif gives it a very natural and vibrant feeling.
The more olive-toned green of this site gives it a natural feeling, which is very appropriate for the content.
The brighter, more retro-looking greens of this site give it a very fresh, energized feeling.
Another olive green site with a very natural feeling.
Blue (Primary Color)
Blue is often associated with sadness in the English language. Blue is also used extensively to represent calmness and responsibility. Light blues can be refreshing and friendly. Dark blues are more strong and reliable. Blue is also associated with peace, and has spiritual and religious connotations in many cultures and traditions (for example, the Virgin Mary is generally depicted wearing blue robes).
The meaning of blue is widely affected depending on the exact shade and hue. In design, the exact shade of blue you select will have a huge impact on how your designs are perceived. Light blues are often relaxed and calming. Bright blues can be energizing and refreshing. Dark blues are excellent for corporate sites or designs where strength and reliability are important.
Examples
The dark blues give this a feeling of reliability, while the brighter and lighter blues keep it from feeling staid.
The dark blue gives this a site a professional feeling, especially when combined with the white background. But the lighter blue accents add a bit more interest.
The bright, sky blue of this site gives it a young and hip feeling, which is emphasized by the reddish accents.
This site combines a range of blues, which gives it a refreshing feeling overall.
The light, muted blue of this site gives a very relaxed and calm impression.
Purple (Secondary Color)
Purple was long associated with royalty. It’s a combination of red and blue, and takes on some attributes of both. It’s associated with creativity and imagination, too.
In Thailand, purple is the color of mourning for widows. Dark purples are traditionally associated with wealth and royalty, while lighter purples (like lavendar) are considered more romantic.
In design, dark purples can give a sense wealth and luxury. Light purples are softer and are associated with spring and romance.
The dark shade used here evokes the royal heritage of purple, which is very appropriate for the Asprey luxury goods brand.
The light and medium purples here work well to convey a sense of creativity.
The brighter, more reddish purple of this site gives it both a rich and energetic look.
The dark purple background here adds to the creative feeling of the overall site.
The dark purple accents on this site give a sense of luxury and refinement.
Neutrals
Neutral colors often serve as the backdrop in design. They’re commonly combined with brighter accent colors. But they can also be used on their own in designs, and can create very sophisticated layouts. The meanings and impressions of neutral colors are much more affected by the colors that surround them than are warm and cool colors.
Black
Black is the strongest of the neutral colors. On the positive side, it’s commonly associated with power, elegance, and formality. On the negative side, it can be associated with evil, death, and mystery. Black is the traditional color of mourning in many Western countries. It’s also associated with rebellion in some cultures, and is associated with Halloween and the occult.
Black is commonly used in edgier designs, as well as in very elegant designs. It can be either conservative or modern, traditional or unconventional, depending on the colors it’s combined with. In design, black is commonly used for typography and other functional parts, because of it’s neutrality. Black can make it easier to convey a sense of sophistication and mystery in a design.
Examples
The black accents, mixed with the brighter colors and very dark brown background add an edgier look to the overall design.
Black, when mixed with icy blues, looks colder.
The black here, mixed with dark grays and lime green, and an overall grungy theme, adds to the edginess of the design.
The black accents here add an extra layer of sophistication and modernity to the site.
The strong black accents on this site add to the overall sophistication of the design.
White
White is at the opposite end of the spectrum from black, but like black, it can work well with just about any other color. White is often associated with purity, cleanliness, and virtue. In the West, white is commonly worn by brides on their wedding day. It’s also associated with the health care industry, especially with doctors, nurses and dentists. White is associated with goodness, and angels are often depicted in white.
In design, white is generally considered a neutral backdrop that lets other colors in a design have a larger voice. It can help to convey cleanliness and simplicity, though, and is popular in minimalist designs. White in designs can also portray either winter or summer, depending on the other design motifs and colors that surround it.
Examples
The white on the Fuelhaus site is used to contrast against the electric blue.
White backgrounds are very popular on minimalistic sites, and provide great contrast to black typography.
Here, white is used as an accent color, which lightens the overall effect of the site.
White combined with gray gives a soft and clean feeling to this design.
Again, white used as a background lightens the whole design.
Gray
Gray is a neutral color, generally considered on the cool end of the color spectrum. It can sometimes be considered moody or depressing. Light grays can be used in place of white in some designs, and dark grays can be used in place of black.
Gray is generally conservative and formal, but can also be modern. It is sometimes considered a color of mourning. It’s commonly used in corporate designs, where formality and professionalism are key. It can be a very sophisticated color. Pure grays are shades of black, though other grays may have blue or brown hues mixed in. In design, gray backgrounds are very common, as is gray typography.
Examples
Light gray gives a very subdued and quiet feeling to this design.
The light gray background here adds to the modern feeling created by the typography.
The cooler gray on this site gives a modern, sophisticated feel to the site.
The dark gray backround and lighter gray typography lend a decidedly modern look to this design.
The wide spectrum of gray shades used in this design combine to give a sophisticated and professional look to the site.
Brown
Brown is associated with the earth, wood, and stone. It’s a completely natural color and a warm neutral. Brown can be associated with dependability and reliability, with steadfastness, and with earthiness. It can also be considered dull.
In design, brown is commonly used as a background color. It’s also seen in wood textures and sometimes in stone textures. It helps bring a feeling of warmth and wholesomeness to designs. It’s sometimes used in it’s darkest forms as a replacement for black, either in backgrounds or typography.
Examples
The grayish-brown here lends a sense of responsibility and dependability.
The orangish-brown here gives a very earthy and dependable feeling.
The dark brown used in the background here lends an earthy and steadfast look to the overall layout, and lets the brigher colors in the design really get to stand out.
Woodgrain is a popular use of brown, and in this case the warm brown adds some friendliness to an otherwise minimalist site.
The grayish-brown background here lends a feeling of stability and down-to-earthness.
Beige and Tan
Beige is somewhat unique in the color spectrum, as it can take on cool or warm tones depending on the colors surrounding it. It has the warmth of brown and the coolness of white, and, like brown, is sometimes seen as dull. It’s a conservative color in most instances, and is usually reserved for backgrounds. It can also symbolize piety.
Beige in design is generally used in backgrounds, and is commonly seen in backgrounds with a paper texture. It will take on the characteristics of colors around it, meaning it has little effect in itself on the final impression a design gives when used with other colors.
Examples
The light tan background here feels young and fresh because of the bright colors around it.
The light tan background here lends a more conservative and elegant feeling to the overall design.
The yellowish tan background is made even warmer by the orange and brown accents throughout this site’s design.
Tan is popularly used as a paper-bag texture, and in its more grayish form as a concrete or stone texture.
The beige header background and other accents on the site lend a refined and traditional feeling to the overall design.
Cream and Ivory
Ivory and cream are sophisticated colors, with some of the warmth of brown and a lot of the coolness of white. They’re generally quiet, and can often evoke a sense of history. Ivory is a calm color, with some of the pureness associated with white, though it’s a bit warmer.
In design, ivory can lend a sense of elegance and calm to a site. When combined with earthy colors like peach or brown, it can take on an earthy quality. It can also be used to lighten darker colors, without the stark contrast of using white.
Examples
The ivory background here has a warm quality that’s tempered by some of the cooler colors on the site.
The grayish-cream background here is made warmer by the orangish-brown accents.
The cream background adds a sense of understated elegance this site would otherwise be lacking.
The cream background here reinforces the antique theme that runs throughout the design’s graphics.
The ivory combined with other light colors and jewely tones makes this site have a very elegant overall appearance.
In Brief…
While the information contained here might seem just a bit overwhelming, color theory is as much about the feeling a particular shade evokes than anything else. But here’s a quick reference guide for the common meanings of the colors discussed above:
- Red: Passion, Love, Anger
- Orange: Energy, Happiness, Vitality
- Yellow: Happiness, Hope, Deceit
- Green: New Beginnings, Abundance, Nature
- Blue: Calm, Responsible, Sadness
- Purple: Creativity, Royalty, Wealth
- Black: Mystery, Elegance, Evil
- Gray: Moody, Conservative, Formality
- White: Purity, Cleanliness, Virtue
- Brown: Nature, Wholesomeness, Dependability
- Tan or Beige: Conservative, Piety, Dull
- Cream or Ivory: Calm, Elegant, Purity
Further Resources
- Color Meanings
A very thorough guide from About.com on color meanings. - Color Wheel Pro: Color Meaning
Another excellent guide to color meanings. - Color
Wikipedia’s entry on color.
© Cameron Chapman for Smashing Magazine, 2010. | Permalink | 141 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags:
|
Have you gotten your copy of The Smashing Book yet? If not, it may still be worth spending $29.90 for this printed book. The book shares technical tips and best practices on typography, usability, UI design, marketing and color usage. It contains interviews with high profile designers and developers. And you will also get a peek behind the curtains of Smashing Magazine. You can buy the book now, it is available and can be shipped right away! And you can also check more details about the book.
Also, in this post we are giving away 35 exclusive Smashing Book Posters (folded, limited edition), and if you want to win one, just leave a comment on this post and tell us what you would do with it! So, let’s find out who are Smashing Magazine’s biggest fans?
[Offtopic: by the way, do you know the Smashing Network has its own Smashing Network RSS Feed? Only excerpts are displayed in the feed.]
Bonus: New Free Chapter Of The Book
Need an appetizer? Here are two free chapters of the Smashing Book (Chapter 1 was released a couple of months ago). You can download them as a PDF:
- Chapter 1: User Interface Design in Modern Web Applications
- Chapter 7: Design To Sell — Increasing Conversion Rates
Smashing Book Around The World
Many things have been happening with and around The Smashing Book in recent weeks. You must have read or heard that it would fall apart immediately upon being opened (okay, that’s a bit of an exaggeration). In fact, the pages loosened quickly, and the reading experience was anything but ideal (the adhesive binding was the culprit). The verdict from many users was thus: brilliant content, very poor binding. And yes, let’s face facts: we indeed did a poor job in our first attempt at offline publishing, but we are willing to learn from our experience and do it better the next time. In fact, the next time has already come.
We have thoroughly monitored the feedback and heard your complaints, which is why we have produced a Corrected Edition of the book, with stable, high-quality stitched binding. Nothing will fall apart here… guaranteed. And the price remains the same.
The release of the Smashing Book has been very exciting. We’ve seen many photos, videos and even unboxing galleries. We have even seen the books being explored by cats, pancakes, cactuses and babies!
Photo by Remworks
Photo by Eddie Ebeling.
Photo by Julien Bob (the cat’s name is Monsieurbleu).
Photo by Danielle Wu.
A Word On The Shipping
We are of course not a postal service, and because we are located in Germany, we had to rely on the German postal service (Deutsche Post) to deliver the books to you. This usually works fairly well, but the first weeks in December certainly weren’t our preferred shipping time. Logistics companies were already busy with the Christmas season, and so delivery of our books went very slowly. And because we have been shipping the books worldwide, delivery times have varied significantly. No wonder it took as long as a couple of weeks for the books to be delivered, slowed down as they were by the holidays.
It’s truly astonishing what can happen to books when you ship a large number of them. There are hundreds of stories: the labels got messed up, damaged, loosened or stuck together; the book was delivered but is sitting in the apartment of a neighbor who has gone on vacation; the mail carrier delivered the book to the wrong house or misread the label; the label has a printing error; my address has changed; the book was left sitting in a delivery container; the postal service sent the book to the wrong state and is in the process of rerouting it; the book is being held up in customs. The list goes on and on. Every day we learn of a number of such cases. If you purchased your book a long while ago but still haven’t received it, please send your order details to our support team at orders@smashingmagazine.com. We’ll be in touch right away and will investigate.
Was It Worth The Wait?
Well, we can’t answer that question because we are obviously biased. But our readers and book reviewers can answer that question for us. Many book reviews are out there, sharing both positive and negative impressions. In our forum, murphyslaw has published a long, very detailed review of every chapter of the book. What do other readers say? Here are a few snippets:
“The advice is pitched at what I would call intermediate-to-advanced level. It’s aimed at web designers, doesn’t include any coding details, and focuses on notions of good practice. Elegant solutions for common problems are offered on almost every page. The book has also been written by a group of professional designers – so they know what they’re talking about.” — Roy Johnson
“The Smashing Book is a great, really great book for everybody who is interested in design and web-development. Especially the typography and learning from the experts chapters where inspirational resources to me. The content is great but I believe the layout of the pages should be as a book. Support the Smashing Magazine Book by ordering your copy and I hope SM will continue the concept of bringing the content by book.” — Sander Baumann, Designworkplan
“The book is basically all of SM’s best articles condensed into a book. This is what you’d expect, as it would be hard to top what they have on the website already. The content is very detailed, perhaps even too much in some cases, but it is like a ‘bible of web design’ covering all the things you should know.” — Lee Munroe
“I think the Smashing Book is a perfect book for web designers and developers of all levels, and I am excited that it lives up to the hype. It provides very comprehensive information that is both useful and essential for designers and developers who want to make the quailty of their websites improve.” — admixweb
“I think the book is a great buy for the price. For all you people still waiting for it to be delivered, it’s worth it!” — ThatDeadPixel
“Overall, this is a great effort from the Smashing Team and all the authors. The book features good web design theory and many practical techniques backed up by real world examples in the form of colourful screenshots. This book will not become obsolete in the short term, and should be placed in everyone’s library. Overall score: 8.5/10 – A Smashing Book!” — Hixdesign
Please note that all errors and inaccuracies are being collected in the Errata, which can be found through our Smashing List of Links (only a few errors have been found so far).
Buy The Book Now!
The Smashing Book is a printed book about best practices in modern Web design. The book shares technical tips and best practices on coding, usability and optimization and explores how to create successful user interfaces and apply marketing principles to increase conversion rates. It also shows how to get the most out of typography, color and branding so that you end up with intuitive and effective Web designs. And lastly, you will also get a peek behind the curtains of Smashing Magazine.
It’s a paperback: 313 pages, full-color images on coated paper, available worldwide. Free shipping to the US and Germany, and reduced shipping costs to other countries. 30-day 100% money-back guarantee. You can find more details about the book in the post Smashing Book: It’s Out Now!
(al)
© Smashing Editorial for Smashing Magazine, 2010. | Permalink | 382 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags:
|
Germany, which is situated in the heart of Europe and neighbors nine other countries, is not only the motherland of eminent philosophers, poets, composers, world-famous automobiles and great beer, but also a place where some of the most talented and highly ranked Web designers live.
German design is certainly worthy of respect and a delight to the eye of anyone who takes the time to observe it. For years, we have accumulated knowledge, upheld eternal principles of style, simplicity and accessibility, adopted best practices and kept up with the latest global trends. I’m proud to present here a showcase and discussion of world-class German Web design.
German Web Design: jung von matt
[Offtopic: by the way, did you already get your copy of the brand new Smashing Book?]
State Of Things
The creative industry in Germany is extremely competitive and consists of thousands of freelancers, studios and agencies. We have the pleasure here of presenting a brief interview with several German design gurus to lend some insight into the local design scene. As talented creative professionals, blog and book authors and freelancers, they are passionate about sharing their knowledge with others. Our participants are:
- Prof. Fons Matthias Hickmann, graphic designer, typographer, Professor of communication design at the University of the Arts Berlin, Director of Fons Hickmann m23 design studio, author of “Beyond Graphic Design” and “Touch Me There” books;
- Mike John Otto, founder and Creative Director of blackbeltmonkey design studio;
- Kai Becker, Creative Director at Elephant Seven agency;
- Christian Bartsch, Associate Creative Director at Neue Digitale / Razorfish agency;
- Dirk Ollmann, freelance Creative Director;
- Markus Angermeier, design freelancer;
- Björn Seibert, Web designer, information architect, founder of the Webzeugkoffer blog, and author of the book “Professionelles Webdesign mit (X)HTML und CSS”;
- Dirk Behlau, graphic designer and photographer.
Question: Could you please describe the current state of the German design market. What is the life of a freelancer, developer or designer in Germany like? How much do designers earn?
Prof. Fons Matthias Hickmann: Working with interesting and open-minded people is not something you can take for granted. And earning money by doing what you love involves luck.
Mike John Otto: The current situation for good designers, developers and especially freelancers is surprisingly good. That strange year 2009 wasn’t as bad as many thought it would be, and there was a big demand for good creatives with experience to help realize projects at agencies. As many bigger agencies reduced their team sizes, freelancers were highly welcome, and I honestly think that shrinking in such a “crisis” always benefits the quality of creative projects, because people try harder to prove themselves with good work instead of just doing their job.
Kai Becker: I think 2009 has been a hard year for designers. Although we had a lot of work (compared to conventional advertising agencies), many clients cut their budgets, which often meant less time for the design process. I also missed jobs in which the design or idea played a leading role. Briefings were very conservative or half-hearted and often came with a very reduced budget. A screen designer earns around €2000 to 2800; from there on you’d be an Art Director. Most of them earn €2900 to 4000, but a few earn a bit higher. Freelance screen designers earn in the range of €150 to 250 per day, Freelance art directors get from €300 to 500. Because conventional agencies had to sack quite a few designers, a lot more freelancers have been available in 2009, and as far as I know they have had a hard time.
Christian Bartsch: I think we have the perfect market right now for small studios and freelancers. All the big agencies tried to build up knowledge of digital services in the past five years to be more integrated. Those that failed now have to to work with specialists and independent freelance networks to be competitive. Clients want their 360° communication, and you need professionals for that. A lot of these professionals, including myself, can be found on Design made in Germany, a platform for German designers. Money-wise, I would say it is the same as everywhere else. If you are good, you’ll be booked.
Dirk Ollmann: The financial crisis had a strong impact on the freelance market. I know a lot of them were starving and sleeping under the bridges in Hamburg. Just joking. Life is not that bad, but agencies tried to manage all of their work with their own staff, and so hiring freelancers was a no-go for the last two years. Now the market is rising again, and the fact that agencies were very cautious and kept their staff counts low will now help freelancers. An art director can earn between €300 and 500 a day, depending on his skills, quality and speed.
Björn Seibert: Web designers and developers are working — surprise, surprise — as freelancers and employees. Freelancers work more on interdisciplinary projects and teams. The employees work in small specialized agencies, in bigger full-service agencies and large industry enterprises. I would guess the majority work for small to mid-sized businesses. But overall, I don’t think that this is particular to the German market.
Working as a Web designer or developer is rarely a 9:00 to 5:00 job. Your income depends of whether you work as a freelancer or employee. Secondly, it depends on whether you work for a small agency or large enterprise. It may also depend on education. Employees can earn from €35,000 up to 50,000 or even more. As a freelancer, it depends on your market, target groups and customers. As a freelancer, you can and should ask for an hourly rate of at least €50 and up.
Dirk Behlau: Hmm… I have been working as a freelance graphic designer and photographer for ten years now, and I have been lucky enough to develop Pixeleye Interactive (my business) from year to year. I mainly work for international lifestyle, car and custom-bike magazines and top brands. For example, I was in Mexico with the Finnish rock band Leningrad Cowboys in the fall of 2009; we will produce a photo book and DVD documentary together. All I mean to say with this example is that I am not sitting in my office every day from 9:00 to 5:00. I travel a lot, meet cool people and a lot of new things happen. So no day is like another, which keeps me motivated. How much do designers earn? That depends on how “established” you are in the business… I have all I want and can make a good living out of it.
Question: Are there any patterns of usability or rules of thumb that are typical of German design? Are the standards of Web design in Germany changing?
Prof. Fons Matthias Hickmann: Although the Web is completely different from print or anything else we thought we knew, you can still apply your principles and tastes to Web design. At the moment, almost anything is possible, and that makes it exciting.
Mike John Otto: Well historically, German design has always been really clear and straightforward. On the one hand, everything produced in Germany, including the design, is usually very precise and content-driven. On the other hand, I see a new trend of more experimental designs that try to break out of grids and usability patterns. As globalization hits every one of us, and with one click anyone can see what is highly rated in other countries, German designers are trying to develop something new, a new German design language, as happened on the German music scene before.
A new German aesthetic language that still hasn’t quite developed but will hopefully soon be as strong as the German music and art scene is today. The most creative areas in Germany currently are Berlin, Hamburg and the Frankfurt am Main area. A lot of smaller German design and digital studios pop up and do remarkable work far away from daily advertising work, even if the big networks still play a bigger role in the German creative scene than they do in, for example, the UK or Sweden.
Kai Becker: I wouldn’t say so. This is a difficult point, but I can’t see anything explicitly “German” in Web design from here. Standards are always changing, but I think that affects Web designers and developers worldwide.
Christian Bartsch: The design culture in Germany is still very young. With the rise of Berlin as one of the hot spots in Europe, German design has taken a big step. We had and still have a lot of influence from Spain and France. If we speak of Web design, Germany always has been competitive in the global market. You will find a lot of German projects on The FWA.
Dirk Ollmann: For me, as a creative director who has worked on a lot on big brands in the car and consumer goods industries, the financial crisis has had a huge effect on marketing strategy and the process and technology of the Web designer. It turns out that the short-term “return on investment” is more important than long-term brand building.
Today, analytics is the driving force in Germany. But what effect has this had on Web design? The trend is “back from Flash to HTML.” This is the technology that works best with Google’s search engine. Actually, the new BMW website design is based on HTML. Last year’s Web designers were expected to have a lot of skill in Flash and inventing new navigation concepts and visualizations. Now, we’re going back to the roots of Internet, keeping it very simple, do everything that Google wants and trying to sell the product with a few clicks. That’s it.
Björn Seibert: First of all, I don’t think there should be a special rule set for a specific national market. We and others are working hard for a common understanding of Web standards, usability and accessibility around the world. There could be derivative or special requirements for special markets or target groups. But there is foremost a strong demand for international and widespread standards by which every designer and developer can build websites and applications of high quality and a high level of user experience.
Spurred by the Web standards movement in the US, and led by “General” Zeldman and his combatants, the Web standards movement accelerated very quickly in Germany as well. Many of us in Germany started thinking about those standards and proposed best practices. In 2005, Jens Grochtdreis founded the Webkrauts. The Webkrauts are working hard on doing awareness training for Web standards and best practices in Web design and development. Their publications help to educate others and point to obstacles.
colibri – contactlinse & brille
Question: How important is professional education in the design industry, and do you feel that the education available in Germany is adequate to develop world-class designers?
Prof. Fons Matthias Hickmann: Professional education is very important, and more open-minded and sensible young talents are out there than ever before. I am anxious for them to take over soon.
Mike John Otto: I truly believe that all world-class designers have an innate feel for design but have also learned and shaped their skills at art school and by working in agencies. So yes, a professional education is not only important but essential, and a few very good ones not only teach students creative and software techniques but open their eyes to art, design history, common trends and design rules as well as things like film, theater and marketing. Nowadays, design students who are looking for jobs have to know much more than they did a couple of years ago: about film, conceptual thinking, advertising rules, digital trends such as social media and online campaigns, to name just a few.
These so-called “digital natives” have a much wider range of techniques and hardware to mix into their daily work than I had when starting out in the business in 2000. This is a big opportunity and a big pain at the same time. Every good school has to prepare to students to meet this wide new range of market needs.
figurenschneider puppenbau norman schneider, bielefeld
Kai Becker: For advertising agencies, your portfolio matters the most. I judge designers by the work they have done already, not if they have studied the right thing. And yet Burg Giebichenstein in Halle, Germany, is the place that develops world-class online designers. If you can make it there, you’ll make it anywhere.
Christian Bartsch: I think professional education shapes your style and keeps you focused. I experienced big differences in quality at German design schools. After four years, I transferred because I was unsatisfied with the conditions at my school. Design is evolving. Multi-touch and augmented reality offer new ways to approach content. Interfaces are becoming more and more complex. Some schools still think in paper.
Dirk Ollmann: Of course, a professional education is essential. It speeds up your talent. But learning your craft is only one aspect. You should also use your university or design school to meet people and network. World-class designers? Of course there is enough room for them in Germany. Have a look at the biggest multi-touch wall made by Sensory Minds!
Björn Seibert: This topic was the subject of my latest article for the German “Webstandards Magazin” (Issue 4/2009). And yes, I think there is a need for more professionalism in terms of education and orientation for job starters in the field of Web design and development. Indeed, we are seeing a bit of action with apprenticeship; people who study digital media and design have the opportunity to do some specialization. But so far, there is no special degree course or job training that fully concentrates on educating Web designers and developers. In my opinion, there is still a lot of work to do in offering more professional education and better safeguards to hopeful professionals — safeguard that would keep people from thinking that any Web design job could easily be done by their neighbor’s son.
Dirk Behlau: Nowadays, getting a good education is becoming more and more important for someone to be successful in the design field. There are a lot of good people out there. I started 15 years ago as a full auto-didact, developing my own style and look. Designers coming from university are often very impractical in normal “office life.” They may have learned how to use programs like Photoshop, but they don’t have the experience to be successful in their business. Self-marketing and self-promotion are very important, and these are not taught very well in universities.
Question: Where do you get inspiration from? How do you stay informed about the latest design trends? What books and magazines do you read?
Prof. Fons Matthias Hickmann: Like almost everybody I speak to about inspiration, I feel overwhelmed by the amount of information we process every day from the Web. A few websites are clever and thoughtful, giving insight into the creation and process of design, rather than just showing random pictures. Where do I get my inspiration from? From every form of culture. And from daily life. The Web now plays a part in both.
Mike John Otto: I get my inspiration from a mixture of influences: Hamburg and Berlin’s night scenes, youth culture and their dress and music codes, travelling, music magazines and my daily work with colleagues and students from my class. Of course, I check out design websites such as The FWA, High Floater and Digital Arts, as well as magazines such as PAGE and IdN, but I don’t get inspired by checking out other design work. True inspiration comes from fields such as music, theatre and story-telling. Sometimes new ideas are born of these influences, and sometimes one kind of recycles all of this stuff and creates something new from it.
Dirk Ollmann: Before you design, you need an idea. I think this is the most difficult thing. A lot of designers use the Internet to try to come up with a unique idea, but that’s the last place to find it. I try to keep my eyes open for things that happen in real life… keep my eyes open and record. After a while, you have a database of ideas waiting for implementation. Stop working, get inspired! Ideas will come by doing something completely different. Try something! I use to pet my cat, kite-surf, play bass, etc. Nevertheless, there are some websites I check regularly: Behance for random searching (those are some cool guys from Eastern Europe); for style, The Cool Hunter is one of my favourite websites; and The FWA for state-of-the-art Flash design.
Björn Seibert: A normal day starts with Google Reader and the Twitter timeline. These are my main sources of information for keeping up to date on Web design trends and issues. Actually, I’m subscribed to about 230 feeds, mostly covering design, Web design and development, usability and user experience topics. Further, I’m subscribed to some Posterous blogs. I love to discover small new unknown blogs with good and relevant copywriting. For me, inspiration is nothing you go out looking for. It starts with good content, smart insight into Web design issues and smart solutions to common problems. I read a lot of Web design-related books. Lately: Sexy Web Design, Designing with Web Standards, Integrierte Informationsarchitektur. At the moment, there is only one magazine I’m willing to pay for, the quarterly Webstandards Magazin.
Dirk Behlau: I travel a lot, meet new artists and exchange ideas with them. And I do read a lot of magazines and check websites, blogs, social network websites, etc. So, I do look everywhere, and I’m interested in a wide range of themes from movies, music, video games, travel, lifestyle, hot-rodding, custom culture, skateboarding, custom bikes, graffiti, tattoos, to name just a few. I do get a lot of magazines from around the world every month, covering everything from cars to tattoos to music. I love the Juxtapoz and IdN magazines.
Question: Are there any other issues unique to German Web design? Do you see any remarkable differences in comparing it to creative industries worldwide?
Prof. Fons Matthias Hickmann: One obvious difference is the language. English is omnipresent on the Web, German is big as well. How should we deal with that? Is translation a good method, or an alternative? How will our culture change? What can we do as designers?
Mike John Otto: Not really. British, US and Swedish influences are big in Germany, and so the product is becoming more and more similar. A German design and Web design language is being formulated more and more but is still not strong enough. Most of the German work seen at award shows and in magazines is still mainstream from a handful of very well-known German agencies. Although German ads and design are winning more and more at award shows: Germany was in the top five in quite a few rankings this year. I hope a remarkable difference will show itself in German design sometime soon.
Kai Becker: There may be slight differences between European, Asian and American Web design, but I would not say they are remarkable. Perhaps German Web design is typically straight, clean, simple and tidy. Kind of what you would expect from a German, wouldn’t you? :)
Christian Bartsch: Right now, Flash development is particularly good in Germany. Small studios such as blackbeltmonkeys, Less Rain and Artificial Duck are pushing the limits.
Dirk Ollmann: Germans are often seen as “number crunchers” — that’s absolutely true. The big brands always want to know what the results will be before we do anything, and we try to avoid any mistakes. The result is that we miss a lot of opportunities that the Internet provides. But maybe this is a worldwide problem as well. Styles and trends? I hope German Web designers will kill glossy 3-D buttons, wet-floor shadows and those ’80s trend next year. Website design will evolve into big clear typography, short copy, only a few themes per page, big easy buttons and a lot of video content.
Making videos will become increasingly easy, and we’ll turn away from the high-end glossy advertising grease. Even big brands will host their videos on YouTube or Google Video to allow users to embed. “Sharing” will be the driving force of content and Web design in the coming years. The biggest task of brands will be to conquer social networks like Facebook, MySpace, etc. But most brands have no idea how to achieve this. For me, this is one of the most interesting fields in advertising today.
das leben ist wie eine schachtel pralinen
Björn Seibert: I generally have a more global point of view. But what must be emphasized is that a line of German Web design has emerged. There are a bunch of very talented Web designers, and the Web standards movement is upon us, in no small part thanks to the Webkrauts initiative. There is also a highly recommended Web-standards podcast Technikwürze that covers the latest Web design trends and features the best from the Web in Germany. But I think that sometimes we should be more self-confident and share with each other our thoughts about modern Web design and current issues.
Dirk Behlau: That’s difficult to answer because I work for international clients that demand my particular style. Sometimes I think European and American clients are more experimental.
What’s Going On In Germany?
Events
A number of design and tech-related events happen in Germany on regular basis. Some worth mentioning are Forum Mediendesign; Designers’ Open; webinale ; WebTech, DesignCamp (January 24-25, 2009 in Cologne). A famous international arts festival, “Illustrative,” was held this year in Berlin.
- Forum Mediendesign
- Designers’ Open
- Webinale
- webtech conference
- designcamp
- Illustrative
- Volkssport Design
- Design Zoom
Awards
Among the most prestigious awards in the German design industry are the red dot design award, iF communication design award, Designpreis, Gute Gestaltung, Deutscher Multimedia Award (DMMA), BIENE-Award and LeadAward.
- DDC
- red dot award
- International Forum Design
- Designpreis Deutschland
- Deutscher Multimedia Award
- Biene Award
- LeadAwards
Showcase Of Web Design In Germany
In this showcase, we bring you a selection of the most inspiring and well-designed websites in Germany, either personal experimental or corporate.
friseur hamburg – rolf & bernd
pisto – magazin über web und die welt
erfolgreiche webseiten und marketing-kampagnen aus hamburg
oliver twardowski, addicted to coffee
dinge geregelt kriegen – ohne einen funken selbstdisziplin
kinderspiele, malvorlagen, kindergeburtstag
stefan velthuys – web & frontend-designer
stilvolles webdesign, printdesign, illustration und animation
noel nieto – strassenfussballer
high quality writing instruments
Julius Brink & Jonas Reckermann
photocase – kreative stockfotos
wm team – showtime for your brand
xplicit ffm / grafik – und webdesign aus frankfurt
Showcase Of Design Agencies
The design sector in Germany is dominated by a number of highly professional creative agencies that have earned international public attention and many prestigious awards: among them the red dot design award, iF communication design award and Designpreis.
Scholz & Volkmer
Clients: Mercedes-Benz, Adidas, Samsung, Coca-Cola
recom
Clients: Adidas, American Express, Audi, BASF, BMW, Bosch, Braun, Canon, Chevrolet, Citroen,Douglas, Ehrmann, Fiat, Ford, Gerry Weber
Mutabor
Clients: Adidas, Audi, BMW, Breuninger, L’Oreal, Nivea, T-Mobile, Volkswagen
Tilt Design Studio
Clients: Audi, Belmondo
Saint Elmo’s
Clients: BWM, Lufthansa, AxelSpringer
GNC Design
Clients: HTC Deutschland, Ford Deutschland, Renault Nissan Deutschland
Toca Me
Clients: Amway, BMW, Burda, Compaq, Fujitsu Siemens, Henkel, L’Oreal, Mc Donalds, Microsoft, MINI, Müller Milch, Novartis, Red Bull, RitterSport, Sony BMG, Vodafone, Xbox
hauser lacour
Clients: Bayer, Berlin Chemie, Commerzbank, Lufthansa
urbn;
Clients: McDonalds, Adidas, Sarotti, Hasseröder, hohes-C, L’Oreal
blackbeltmonkey
Clients: Mitsubishi, Edeka, FC Bayern, Chelsea FC
Taobot
Clients: Beck’s, Coca-Cola, Commerzbank, Deutsche Bank, GfK Group, Jay-Z, Leica Camera, Mercedes Benz, Metro Group, o2 Deutschland, Smirnoff, Swarovski, ThyssenKrupp, Toblerone
Moccu
Clients: L’Oreal, Garnier, Volkswagen, Deutsche Telekom, Vodafone, Dior, Maybelline, WWF, Canon
Goldener Westen
Clients: Axel Springer, Coca-Cola, Edeka, ZKM Karlsruhe
MetaDesign
Clients: Volkswagen, OTTO, Conrad, Audi, Klett Verlag, Lufthansa, Nici, eBay
Aperto
Clients: Audi, Bayer, BenQ, Coca-Cola, F.A.Z., Siemens, Sony, Triumph, Volkswagen
Loved
Clients: Adidas, Audi, Comdirect, Görtz, s.Oliver
Antwerpes
Clients: Aral, Bayer
Are We Designer
Clients: BASF, Burda, Deutsche Telecom, Vodafone
Marctropolis
Clients: ARD, Beate Uhse, Bild, BMG, Burger King, Chupa Chups, Procter & Gamble, Red Bull, RTL, Siemens, Skoda, Universal Music, ZDF
Parasol Island
Clients: MTV, IKEA, Sony Ericsson
Fiftyeight
Clients: DHL, Mazda, Milka, Lacoste, Jaguar, RTL, Nintendo Deutschland, Disney, Procter & Gamble, Ferrero Deutschland, Karlsberg, Nike, Renault Germany, Warner Music Germany, Sparkasse, Opel, MTV
Showcase Of Web Design Freelancers
Besides the professional creative agencies, we find a lot of freelancers working in the industry.
United States of Design
Clients: Adidas, Audi, Bacardi, Berliner Sparkasse, Bertelsmann, Coca-Cola, Deutsche Bank, Mini, MTV, Mozilla, Plazes, Sprite, Siemens, Sony, Sony Ericsson, TDK, Volkswagen
Martin Anderle
Clients: Adidas, BMW, Sony Ericcson, Volvo, ZDF
kosmar
Clients: Stiftung Warentest, Daimler, SPD Berlin, Plazes
Dirk Schütze
Clients: Leibniz, Konica Minolta, Deutsche Post
Radekal
Clients: Gillette, IKEA
mediziehm
Clients: Peugeot, Ford, Jaguar
Round-Up Of German Design Resources
To stay competitive and successful on the creative scene, we have to know what’s happening in the fields of Web design, Web development, graphic design and typography and know what trends are set to become the next big things in the design world.
The round-up below of over 70 design-related resources should give you an overview of German blogs, Web design galleries (both CSS and Flash), communities, social networks and magazines (both online offline). You would be well advised to read or at least occasionally look through these to catch up on the latest design trends and get a daily dose of inspiration and encouragement. I invite you to discover some of these unique and enjoyable resources!
Blogs
- Das Web Design Blog
- Design Tagebuch
- Pixelgangster
- Pixelgraphix
- Colurz.de
- Webzeugkoffer
- Dr. Web
- Farbwolke
- Zwiebeltisch: Magazin für Gestaltung
- Create Or Die
- Webstandard
- Designpicks
- Designer In Action
- Peter Unruh
- Stilpirat
- Chukki.de
- Volderette
- Pixeleye Daily Design Blog
- Kulturbanause
- Pixey.de
- Designjournal
- Visualblog
- Webdesigner Blog
- Mediengestalter Blog
- Jung v. Matt
- BerlinDesignBlog
- StyleSpion
- Slanted
- Fontblog
- MyFonts
- Spatium
Web Design Galleries (CSS and Flash)
- CSSArena
- CSS Hamster
- Netzfrühling
- Distinct Styles
- Design Award
- Visueller Orgasmus
- Visual Safe
- Piepmatzel
- Spyline
- CSS Info
- PixelEyeGermany
- Quandtnet
Magazines
- art: Das Kunstmagazin
- PAGE
- weave
- Design made in Germany
- novum
- design report
- Destructed
- Castle: Illustrative Magazine
- form
- beef
- encore
Your Opinion Is Welcome!
What is your opinion of the German Web design scene? In case we’ve missed any exceptional websites, please share them, and your thoughts, in the comments section. We always look forward to your feedback and support!
Related Posts
You may be interested in the following related posts from our new series on global Web design:
Stay Tuned And Get In Touch!
This article is the fourth in our new Global Web Design series. Over the next months, we’ll be covering various continents, featuring Web developers and designs from different countries and looking closely at what is happening on the Web design scene worldwide.
If you”d like to prepare an article for this series, please contact us, and we’ll discuss details.
(al)
© Aygul Zagidullina for Smashing Magazine, 2010. | Permalink | 108 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: germany, showcases
|
Previously in this series on CSS3, we talked not only about how to create scalable and compelling buttons but about how to effectively use new CSS3 properties to speed up development and quickly create rich page elements. In this final article of the series, we’ll really get into it and use CSS3 visual effects to push the envelope.
Not everything in this article is practical, or even bug-free, but it’s a fun primer on what’s in the pipeline for Web design. To get the most from these examples, you’ll have to use Safari 4 or Chrome. (Firefox 3.5 can handle most of it, but not everything: WebKit is further along than Gecko in its tentative CSS support.) We’ll show you how to create impressive image galleries, build animated music players and overlay images like a pro. All set? Let’s rock.
[Offtopic: by the way, have you already visited Smashing Magazine's Facebook fan page? Join the community for a stream of useful resources, updates and giveaways!]
Create A Polaroid Image Gallery
We always try to stay pretty active with our Flickr feed; our chief instigator Bryan does a great job of capturing the day-to-day and special events and even some of our old work. We wanted a great way to show off these photos, so we turned to CSS3 to create a compelling, fun image gallery. The Polaroid style is pretty common, but we wanted not only to make it dead-simple to create the gallery in the markup but also to add styles that would have required Javascript just a year or two ago.
The Polaroid Gallery Markup
First off, we created very simple markup for the gallery, something that would be easy to generate automatically using the Flickr API. The markup for the entire gallery looks like this:
<ul class="polaroids"> <li> <a href="http://www.flickr.com/photos/zurbinc/3971679981/" title="Roeland!"> <img src="image-01.jpg" width="250" height="200" alt="Roeland!" /> </a> </li> <li> <a href="http://www.flickr.com/photos/zurbinc/3985295842/" title="Discussion"> <img src="image-02.jpg" width="250" height="200" alt="Discussion" /> </a> </li> </ul>
We’ll be using the title element in a minute.
The Base Style and Labels
Our next step was to create the simple Polaroid look. We placed our image inside an anchor with a white background and scaled the image container. This gave us space for the image labels, which we created using little-known CSS tricks: :after and content: attr.
ul.polaroids a:after {
content: attr(title);
}
What we’re doing here is telling the browser that after it renders the given anchor content, add another piece of content. We then generate that piece of content with the content: attr(title) element, which pulls a specific attribute from the element, in this case the title attribute. Using alt would make more sense, but neither Safari nor Firefox has implemented it for the content element.
The snippet above tells the browser to take the title attribute and render it immediately after the content. Note that the title attribute will be rendered within the anchor, which is exactly what we want. We would have liked to have used the alt attribute, but Safari and Firefox do not support the use of content with it.
Our styling of the anchor element takes care of the formatting of the title attribute as well, and we’ve now placed the image title attribute below it so that we don’t have to replicate that content in the markup.
Scattering the Pictures
A handful of Polaroids would never be in a perfect grid; they’d be scattered over the table. We compromised by messing up the grid a little bit for each image: a little rotation here, some displacement there. However, we did not want to have to manage that scattering on a per-image basis, so we used another new pseudo-class: nth-child.
/* By default, we tilt all images by -2 degrees */
ul.polaroids a {
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
}
/* Rotate all even images 2 degrees */
ul.polaroids li:nth-child(even) a {
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
}
/* Don't rotate every third image, but offset its position */
ul.polaroids li:nth-child(3n) a {
-webkit-transform: none;
-moz-transform: none;
position: relative;
top: -5px;
}
These are only a few of the declarations we used; we actually added them for everything up to 11n, but you get the idea. As you can see, nth-child supports a few different arguments, including even, odd and Xn (where X can be any integer). The even and odd declarations are self-explanatory. Xn takes every Xth element and applies a particular style; in this example, every 3rd. Combining this with odd, even and some more Xn declarations means that even though the style won’t really be random, it will appear random enough to the average user. You can see the entire set of styles on our demo page.
We’re using a new CSS3 property here as well: the CSS transform (shown as -webkit- and -moz-transform). The transform property can take a number of arguments for different kinds of transformations; in this example, we’ll be using rotate and scale. You can see the complete (tentative) list in the Safari Visual Effects Guide.
Some Final Animation
Our last touch was to give the image focus on hover; in this case, to enlarge and straighten out. We accomplish this using a -webkit-transition that is activated by the :hover pseudo-class. Check it out:
ul.polaroids a:hover {
-webkit-transform: scale(1.25);
-moz-transform: scale(1.25);
-webkit-transition: -webkit-transform .15s linear;
position: relative;
z-index: 5;
}
What’s happening here is that we’re overriding the existing -webkit-transform to simply scale the image (this eliminates the rotation). The -webkit-transition tells Webkit-based browsers to animate the transform so that the move from one to another is smooth. -webkit-transition is actually extremely versatile, because it can just as easily support color, position (top, right, etc.) and most any other property.
That’s how we created our Polaroid gallery. Once you know these new tricks, putting them together is actually pretty easy, and the markup is dead simple.
See the Live Demo »
We’ve created a live demo page for this gallery in our Playground, a place for us ZURBians to create small side projects and samples of cool toys. We’ll be linking to the Playground examples throughout this article.
Sliding Vinyl Albums With CSS Gradients
This example began as a simple experiment with CSS gradients and grew into a pretty detailed investigation not just of gradients but of new background properties and animation. We’ll show you how to create advanced gradients with no images and use layered backgrounds for some cool effects.
Writing the Markup
What we’ve created here is a simple unordered list of albums with slide-out album controls. You could use something like this to present your band’s albums or to showcase a series of podcasts or any other kind of audio (or potentially video) media. Each item in the list is an album, with some fairly simple markup:
<div class="album"> <a href=""><img src="/playground/sliding-vinyl/muse-the-resistance.jpg" width="500" height="375" alt="Muse: The Resistance" /></a> <span class="vinyl"> <div></div> </span> <ul class="actions"> <li class="play-pause"><a href=""></a></li> <li class="info"><a href=""></a></li> </ul> <div> <h5>Muse</h5> <small>The Resistance</small> </div> <span class="gloss"></span> </div>
It might look like a few extraneous elements are in there, but we’ll be using all of them to render our slide-out record and controller buttons.
Creating the Record
The real trick here was the album. We challenged ourselves to create the album without using any images at all (we ended up cheating a bit, but we’ll get to that). When it slides out, the album looks like the figure on the left: standard black vinyl with a slight shine to it and a couple of control buttons.
You’ll notice that the inside edge of the album is a little jagged, and that’s because the album isn’t an image but rather two layered gradients generated by the browser and set as the background of the same object. This required not only a bit of messing around with the new gradient objects in CSS3 but also another CSS3 trick: multiple backgrounds. Check out the CSS for the record:
ul.tunes li div.album span.vinyl div {
display: block;
border: solid 1px black;
width: 112px;
height: 112px;
-webkit-border-radius: 59px;
-moz-border-radius: 59px;
-webkit-box-shadow: 0 0 6px rgba(0,0,0,.5);
-webkit-transition: all .25s linear;
background:
-webkit-gradient(
linear, left top, left bottom,
from(transparent),
color-stop(0.1, transparent),
color-stop(0.5, rgba(255,255,255,0.25)),
color-stop(0.9, transparent),
to(transparent)),
-webkit-gradient(
radial, 56 56, 10, 56 56, 112,
from(transparent),
color-stop(0.01, transparent),
color-stop(0.021, rgba(0,0,0,1)),
color-stop(0.09, rgba(0,0,0,1)),
color-stop(0.1, rgba(28,28,28,1)),
to(rgba(28,28,28,1)));
border-top: 1px solid rgba(255,255,255,.25);
}
We’ve omitted some of the positioning and other boring CSS pieces (check out the live demo for the complete markup). We want to focus here on the pieces that are critical to creating the album visually: border-radius and -webkit-gradient.
The simplest part was creating a round object: by setting the border radius to exactly half of the height and width of the object, the browser masks the object to a perfect circle. Watch out, though: unlike in Photoshop, if the border radius is higher than half the object’s height or width, the browser might simply ignore the declaration. That said, rounding the object is the easy part; the tricky part is controlling the gradients.
Two gradients are at work on the object: one creates the album itself (complete with the hole in the middle), and the other casts a light across it. We’ll start with the shine:
ul.tunes li div.album span.vinyl div {
...
background:
-webkit-gradient(
linear, left top, left bottom,
from(transparent),
color-stop(0.1, transparent),
color-stop(0.5, rgba(255,255,255,0.25)),
color-stop(0.9, transparent),
to(transparent)),
...
}
The shine gradient is a linear gradient from the top-left to bottom-left. We start with transparent so that the gradient fades in, then we shift the gradient to white at the 50% mark (halfway across the album), with 25% opacity. We’re using RGBa colors because they allow us to control both the color and opacity in the same declaration.
The album itself is more complicated, and it suffers a bit from early implementation of the radial gradient.
ul.tunes li div.album span.vinyl div {
...
background:
...,
-webkit-gradient(
radial, 56 56, 10, 56 56, 112,
from(transparent),
color-stop(0.01, transparent),
color-stop(0.021, rgba(0,0,0,1)),
color-stop(0.09, rgba(0,0,0,1)),
color-stop(0.1, rgba(28,28,28,1)),
to(rgba(28,28,28,1)));
...
}
Radial gradients are just as they sound, and just what you’d expect from gradients in Photoshop. They begin at the center of the object and track across the object in concentric circles. In our case, we wanted to start with transparency, then switch to a solid black, and end up with a very dark gray.
Perhaps the most difficult part of the gradient is declaring its size and position: radial, 56 56, 10, 56 56, 112. We have five pieces of data here: type, starting center, starting diameter, ending center and ending diameter. Here’s how they work:
- Radial is, of course, where we define this as a circular gradient rather than straight (linear) gradient.
- We begin at 56 56, which is exactly half the height and width of our 112-pixel-tall object. We want the gradient to end with the same center, so we repeat 56 56.
- The gradient begins with a diameter of 10 pixel.
- The ending center (56 56) ensures that this is a concentric gradient.
- 112 is our final diameter, the same width as the object.
The radial implementation was still a bit rough around the edges, so we played around with these values and the color-stop elements to get the effect we wanted. In the future, a more polished implementation won’t be quite so trial and error.
From there, similar to the linear gradient, we created a series of color-stops to go from transparent to black to dark gray. The result of these two backgrounds (separated by a comma—thanks, CSS3) is our shiny record. Again, you’ll notice the center is a bit rough, but we’re sure future implementations of this new element will be cleaner.
The button controls are simply rounded anchors (using border-radius), with a couple of image glyphs (we told you we cheated a bit). The final touch was to add the animation so that the album would roll out of the sleeve on hover.
Adding in the Final Animation
To achieve the rolling effect, we paired up a position shift and a rotation effect so that, as the object moves to the right, it rotates just the right amount to appear as if it’s rolling. Here’s what we did:
ul.tunes li div.album span.vinyl {
-webkit-transition: all .25s linear;
}
ul.tunes li div.album:hover span.vinyl {
-webkit-transform: translateX(60px);
}
ul.tunes li div.album:hover span.vinyl div {
-webkit-transform: rotate(120deg);
}
We’re using two transforms, translateX and rotate, on two objects. We use the translate instead of standard positioning because transforms don’t impact the DOM—from a layout perspective, the object never really moves, and so we don’t have to worry about floats going awry or objects pushing each other around. Transitions also work better on translation transforms than on actual position (left: 20px, etc.) changes.
Gradients have a ways to go, but there are already some cool uses for generated gradients. You can even control them at runtime using transitions or JavaScript, which opens up yet more possibilities.
See the Live Demo »
We’ve created a live demo page for this gallery in our Playground, so you can see it in action and delve deeper into the source code. Enjoy!
Sweet Overlays With Border-Image
This last part is perhaps the most practical. We use it in our feedback tool Notable every day. The border-image property is new but has some really interesting applications. We’ll explain how it works and how we’re using it in our flagship application.
The Overlay Markup
Overlays in Notable have two parts: the frame and the actual glass overlay. The markup for the overlay is pretty simple, consisting of two sibling DIVs:
<div class="note" id="note1"> <div class="border"></div> <div class="overlay"></div> <span class="black circle note">1<span class="wrap"></span></span> </div>
When we created these overlays, we had a few goals:
- They shouldn’t overly obscure the content beneath them.
- They shouldn’t affect the hue of the content beneath them.
- They must look awesome.
To that end, we devised an overlay that would appear as a glass overlay, with a slight shine and a nice, fairly bold frame. For the purposes of this article, we’ll focus on the frame, which we created using the new border-image property.
Using Border-Image
The new border-image property is a strange beast: very versatile, but takes a little getting used to. Here’s what the border-image declaration for our frame looks like in the CSS:
div.note div.border {
border: 5px solid #feb515;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-image:
url(/playground/awesome-overlays/border-image.png) 5 5 5 5 stretch;
-moz-border-image:
url(/playground/awesome-overlays/border-image.png) 5 5 5 5 stretch;
}
Let’s get the easy stuff out of the way. The border element is both required and a fallback: older browsers will still render a usable border for the overlay, but border-image requires a defined border width. While we’ve been fairly unconcerned with backwards-compatibility in our articles, in this case we needed it (Notable has to work in more than just cutting-edge browsers). This is one of many examples of progressive enhancement (or graceful degradation, if you prefer): older browsers render something usable, just less pretty. The first progressive piece in here is the border-radius, which we’ve already discussed at length.
The border-image is what we’re interested in. Check out the figure to the right; notice the gradient on the frame that goes from top to bottom? It’s a simple touch, but adding it to an object that has to scale to many different sizes required that we use this new property. And we’re glad we did; learning how to use it opened up new possibilities in our coding repertoire. Let’s look at just the border-image code again:
url(/playground/awesome-overlays/border-image.png) 5 5 5 5 stretch;
The syntax is the same for WebKit and Gecko(Mox) browsers. The actual declaration is simple. What takes some effort is understanding how to create the image file itself.
Border image takes a single image and slices it into nine pieces, which it then stretches over the object. We’ve sketched a diagram to explain how this works, and we’ve blown up the actual border image file for you to compare. Check it out:
The browser takes the top-left corner and uses it for the top-left border, and then it stretches the top-middle to cover the entire top of the object, and so on around the image.
We created an image with transparent center, because border-image will stretch the center quadrant across the entire object (which seems counterintuitive for a “border” image, but it does make the style a bit more versatile). You’ll notice that the actual gradient is present only in quadrants 4 and 6, because those are the only pieces that will be stretched enough for us to see a gradient. The browser actually does a good job of stretching the image as long as it’s not too complex, so artifacts aren’t really an issue.
The last pieces of the border-image declaration are the size and style: 5 5 5 5 stretch. The repeated 5s determine the size on each side of the object; because we wanted a 5-pixel border, we created an image that was 15 x 15. If we had used a smaller image, the browser would have had to scale the corners as well, and no doubt it would have looked messier. The last property, stretch, dictates how the browser actually handles the pieces of the image. A great (and amusing) intro to the different styles can be found at lrbabe.
Putting It Together
Combining the frame with the glass overlay center (which is a semi-transparent PNG) gives us our frame. Using different border images, we actually created classes for our different colors (red, blue, etc.), while older browsers still get a usable frame without the gradient-edged niceties. This isn’t an incredibly complex example, but you can see how useful border-image can be, especially using an alpha-mapped image format such as PNG.
See the Live Demo »
We’ve created a live demo page for this gallery in our Playground so that you can see it in action and delve deeper into the source code. You can also read up on why we created this overlay in our two-part Notable Behind the Scenes blog post: part 1 and part 2.
CSS 3 Is Totally Bad Ass
Right? We hope you’ve enjoyed this primer on what we can look forward to in the final CSS3 specification. Familiarize yourself with the properties and start using them—just be sure to account for browsers that, sadly, will never support all of these fun new tricks. You can see how we use CSS3 in our work for clients as well as in our own product, Notable. Found a super-awesome way to use these new properties? We’d love to hear about it in the comments!
References and Resources
- Pushing Your Buttons with Practical CSS3
- Stronger, Better, Faster Design with CSS3
- Introduction to CSS Animation at Surfin’ Safari
- Introduction to CSS Transitions at CSS3.info
- Safari Visual Effects Documentation
(al)
© ZURB for Smashing Magazine, 2010. | Permalink | 106 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: CSS, css3
|
Whether a designer, developer, blogger, or freelancer, you surely have a to-do list on which certain items slowly inch their way down. These forgotten items add up fast! Think of all the items that you’ve discarded from your to-do list to save time. Even more frightening, what items might you have overlooked to meet a deadline? What have you left on the proverbial cutting-room floor yet again?
What better time than the new year, or new decade for that matter, to tackle your neglected checklist? In this article, we’ll look at some commonly overlooked items on a typical checklist (in no particular order). Some are new, some are commonsense and some are not so minor and ought never to be forgotten. So, let’s get started in this young year by striking off some items from your to-do list!
[Offtopic: by the way, do you know the Smashing Network has its own Smashing Network RSS Feed? Only excerpts are displayed in the feed.]
Update The Copyright Date
2009 2010
That’s right, it’s time to update the copyright year on your websites from <old date> – 2009 to <old date> – 2010. If you come across websites that show copyright dates as far back as 2003, the first word that pops to mind is “outdated.” Perhaps these websites have been kept up to date and only the copyright year has been neglected? Or perhaps the website really hasn’t been updated since 2003. Uh oh. This is not the first impression you want to give potential clients. After all, clients want to hire people who notice these things. What message does your footer send from below?
Here are just a few of the places you might need to change the copyright date:
- Website (all pages);
- Watermark (if you use the year);
- Footer (such as on your blog);
- Templates (blog, wireframing, frameworks, email templates, etc.);
- Readme files.
Résumé Refresh
Double-Check Everything
If you haven’t looked at your résumé (or curriculum vitae) in a while, now might be the time to do so. Even if you’ve been working steadily, you never know when you’ll need to submit your CV for that dream job that comes along.
This is a good time to make sure your listing of work experience is current. What new projects and clients have you taken on in the last year? Make sure your contact information is up to date, too. Has your area code changed? Have you switched cell phone numbers or moved? Double-check your zip code because some zip codes change occasionally.
Double-check every detail on your resume or CV. Employers frown on inaccurate contact info. Also, check the references that you’ve provided. Are the emails and contact info still valid? Would current employers be willing to act as references? Now is the time to make those changes so that you stay prepared in the market.
Double-check the following items on your résumé or CV:
- Home address,
- Zip code,
- Telephone number,
- Area code,
- Degrees earned,
- Certificates,
- Awards,
- Recent jobs,
- Recent projects,
- New contracts,
- Contact info for references.
Further Reading
- How to Create a Great Web Design CV and Résumé?
- Ten Tips for Writing a Remarkable Resume in Today’s Creative World
- 6 Words That Make Your Resume Suck
- Give Your Resume a Facelift
Spell-Check
Spelling Kounts Counts
Sometimes you’re in such a rush that spell-checking is the last thing on your mind. Then again, most word-processing programs, email applications and website editors have automatic spell-checkers built right in. Most everyone relies on these programs to catch spelling mistakes. However, occasional slip-ups occur. You’ll often find “there” when “their” is correct, or “weather” when “whether” is intended.
Programs don’t pick up on such discrepancies. But people do. What kind of people? Potential clients and your peers. First impressions count, and poor spelling irks many people. You don’t want to irk someone because you left an “l” out of the word “professionally” on the front page of your website. (Guess who did that?)
A good way to manually spell check a website is to read the content in reverse and out loud to yourself. Start from the footer. Then spell check the actual website code. Don’t skip a sub-page that you think is irrelevant. Every little mistake you find is one less mistake that someone else will.
Further Reading
Spell-Check Your Website
Outstanding Invoices
Get Paid
If you haven’t already done so, look at your invoices. Have you not yet sent some invoices? You deserve to be paid for your services. You’re not being pushy, just professional. So, don’t put off sending an invoice.
If you’re lucky, your client will remind you to send one. But this is the exception, and you’d be wise to hold on dearly to such clients. Most clients won’t bend over backwards to pay you in a timely fashion. Take the initiative. Be assertive. Often the client simply forgot about the invoice once the project was completed and would be more than happy to pay in full right away.
What if you’ve already sent an invoice but haven’t been paid? Perhaps you forgot about an outstanding invoice from last year. No problem. Resend the invoice now. The client would most likely be happy to clear their books. Either way, you’ll hear an update on the situation.
Monitor Social Networks
Pay Attention to What You Type
Social networking is all the rage, and you’ve jumped in head first. You’ve signed up with Facebook, MySpace and Twitter, to name a few. However, have you really examined your online presence? Take a moment to review your last 10 comments or posts on each social networking website that you are active on:
Do you see any comments that a potential client might find offensive? Clients aren’t likely to peruse your history of Twitter comments, but what if they did? The Delete key is your friend. However, deleting doesn’t erase the search engine cache of your updates. What seems funny and off-hand could turn clients away.
For instance, were you ever unhappy with a client and decided in the wee hours that 140 nasty profanity-laden characters were in store? Have you ever trash-talked a current or past client? Now, imagine a potential client reading that and how they would feel about working with you. Sure, being judged by your online comments isn’t always fair, but it happens.
Freedom of speech is great, but if your social networking accounts are linked to your business website, take heed. The comments you make on websites such as YouTube, Facebook and MySpace could come back to haunt your and your business’ reputation. Just as social networks are a great way to stay connected and to network, they are also an easy way to gather personal and professional information about you. Stay informed and be aware that even an off-hand Facebook Wall comment can have a big impact.
Avatars and Photos
Take a moment to review your avatar or Gravatar on social networking websites. Perhaps it’s time to update your photo to reflect your current hairstyle or image. If you want to project a professional image, a wacky avatar might not be the right choice. Then again, you would get noticed, in which case your comments would stand out even more to potential clients.
Social Profiles and Bios
Your bio on social networks might need updating, too. Check for any changes in your job title, interests or availability are reflected. Keep your profiles and bios current to reflect your business activity. That little extra detail makes you shine.
Don’t Forget to Talk to People
Don’t rely solely on Twitter and your blog. Monitor the original social networking tool: the telephone. Have you kept in contact with past clients? Now would be a good time to reach out and speak with them. Maintaining your social contacts is essential to keeping the door open to future projects.
Further Reading
- Twitter Gets You Fired in 140 Characters or Less
- Twitter Can Be a Legal Minefield: Watch What You Say
- Warning: Social Networking Can Be Hazardous to Your Job Search
- Social Media Minute: Twitter Opens Up, Watch What You Say on Facebook
Back Up Your Work
Stop, Drop and Back Up Now!
Stop. Drop what you’re doing. Back up your work right now. Data loss can happen at any moment. Did you put 40 hours into a website last week and didn’t back up any of that hard work? Perhaps you have thousands of photographs stored on your computer? Those raw images, along with potential profits, are toast if anything goes wrong.
When was the last time you backed up your hard drive? Last week? Last month? Can’t remember? Uh oh. Time to back up now. Use a pen drive, CDs, DVDs, external hard drive or online storage website—just back up regularly. Your work changes daily: you send and receive email, add bookmarks, upload photographs and scan images. You have a lot to lose.
Backing up is only part of it. You also need to be able to restore your computer in the event of complete data loss. Look into bootable backups for peace of mind, and avoid devastation by backing up your work. Make it a top priority and not an afterthought.
Also, check your surge protector. Silly as it sounds, many people forget about their surge protectors. Like smoke detectors, this is a safety concern. The time of year when we turn our clocks back for daylight savings in the US also serves as a reminder to replace our smoke detector batteries. Perhaps the new year should be a reminder to check our surge protectors.
Have you checked your surge protector? Or better yet, do you own one? A surge protector protects your computer from voltage spikes in the electrical system. Not all power strips are surge protectors, so make sure yours will protect your electronics. Make sure the components are in good working order and functioning properly. If your drive is fried in a storm, what good is the data backed up on the external drive?
Further Reading
- DR. MAC: Make a Resolution to Protect Your Data
- Review: 4 Online Back-Up Services to Protect Your Data
Update Your Portfolio
You probably have a portfolio of your work online. But is it up to date? Have you added current projects to the queue? The new year is a great time to add recent samples of your work to your portfolio. If you haven’t done any recent work or can’t show certain projects because of a non-disclosure agreement, then just showcase some of your personal projects to show off your current skills. Your online presence is defined partly by the work you present.
Visit your portfolio in the mindset of a prospective client. Are your images large, high quality and clear? Do the images reflect your current set of skills? Would you hire yourself based on what you see? If you haven’t done so already, check the spelling of project titles, client names and companies.
Be honest: are you one of those people who go a little overboard with their portfolio? Do clients have to click through 15 pages to see the scope of your work? Do visitors have to wait for 100 images to load to view your graphic design portfolio? Now might be the time to trim your portfolio. Sometimes having a few high-quality examples is better than having many of inferior quality. Let the portfolio shine without the clutter.
Further Reading
- 10 Steps to the Perfect Portfolio Website
- 7 Tips for Improving Graphic Design Portfolios
- 10 Expert Tips for Designing a One-Page Portfolio
Test Your Contact Form
Can Visitors Reach You Online?
When was the last time you checked the contact form on your website? Once the contact form is implemented, it is often neglected. Perhaps you have been losing potential clients because they have been unable to get in touch with you. Take action now by double-checking how visitors can reach you online.
First of all, is it easy to find your contact form? Could a visitor find the contact form from the “About us,” “Services” and even “Contact us” pages. Surprisingly, many people forget to include a working link or contact form on their own contact page. Try sending yourself a message. Did it work? If not, the problem could be the email address, the code, the CAPTCHA code or the “Send” button itself.
Further Reading
Catch Up On Email
Open, Read and Reply. Repeat.
Don’t let those unread emails pile up again this year. Attack your emails in a timely fashion, and develop a habit that pay dividends over the course of the year. Clients will see that you’re on top of things and that projects are running more smoothly, and you’ll be happier knowing you don’t have over 60 emails waiting to be addressed. Procrastinating doesn’t help. Open, read and reply to your emails.
Update Your Signature
This is also the perfect time to update your email signature. Check the address, phone number and links listed in your signature. Are they current? Make sure the links are active, working and relevant. Perhaps freshen up your signature with a new quote or proverb.
Check the Spam Filter and Junk Mail Folder
As time passes, we can easily forget to check the settings in our email program. See whether the reason you’ve been receiving a ton of spam is because your spam filter has been turned off. Also, sometimes email is dumped into the junk mail folder by accident. Check to see if any important emails have ended up there.
Clean-Up Time
What Dirty Little Secrets Is Your Keyboard Hiding?
Like to drink coffee? You could very well have spilled some on your keyboard, and because it was miniscule, you just forgot about it after a quick swipe with a cloth. A drop or two doesn’t hurt, right? What about that morning bagel? Or those pesky granola crumbs? Yes, you may not see the mess, but the grunge is there, hiding in the nooks of your keyboard. Sure, a few crumbs won’t hurt, but the build-up will. But a silicone cover catches everything, you say? Wrong. Lift the cover off the keyboard and witness the fluff that has crawled in there.
How long ago did you clean your keyboard? That’s the question. It’s never too soon to clean it. If it’s sticky, it’s been way too long. Not only can grime build up, but so can germs. Bacteria. Cross-contamination can occur. Just a few minutes cleaning those keys could prevent a common cold or worse. While you’re at it, you might want to give that mouse a good cleaning, too.
What’s Cluttering Your Desktop?
Do you have too many files on your desktop? This visual clutter might be distracting you, causing you frustration and, in the long run, costing you time and money. The time it takes to find a file on your hard drive or your desk is time taken away from a project.
Here are a few ideas to de-clutter your virtual and real spaces:
- Organize your desktop files;
- Put away the files on your actual desk (no loose papers);
- Change your desktop wallpaper;
- Remove accessories from your desk (keep it minimal);
- Hide or bundle electrical cords;
- Add keywords to files and photos;
- Label files and folders;
- Fix those broken items to make them usable (or throw them out).
Accomplishing just a few of these things will make your workspace more inviting and save you time later on.
Further Reading
- Dirty Little Secrets of the Keyboard Revealed
- The Best Way to Clean Your Keyboard
- Cleaning Apple Aluminum Keyboard… Or Any Other Soft-Touch Keyboard
- Step-By-Step: Keep a Clean Keyboard
- Cures for a Crusty Keyboard
Save
Be Safe: Save
Finally, learn to save as you go. Whether writing, blogging, coding or designing, saving as you go is always safer. You never think of it until it’s too late. You don’t want to find yourself scouring forums looking for a thread titled “Is there any way to recover six hours spent on my Adobe Photoshop file.”
The answer is to save as you go. Make saving a habit. Learn the “Save” shortcut for the programs you use. In Adobe Illustrator, Command + S saves a file. Do this after every layer, paragraph and so on and you’ll save yourself time and heartache.
Resolutions
Have you got new year’s resolutions? Perhaps you want to start keeping your desk uncluttered or backing up your work every other day. Now is the time to integrate these tasks into your routine. By doing so, you’ll cultivate good habits over the year. Start slowly, one little goal at a time. Tackling too many resolutions will overwhelm you. Accomplishing one little resolution over the course of the year is wiser. As they say, the little things add up!
In Conclusion
There you go. We surely could have added more things to this list. Did an item here jog your memory? What little things do you put on the back-burner and then forget about? Feel free to share some of your to-do’s to help the rest of us out. This way, by next year, everyone’s list will be a lot shorter!
Further Reading
- A Designer’s List of New Year’s Resolutions
- 10 Things to Do Before the New Year
- 10 Things You Can Do Right Now for Your Photography Business
- 45 Incredibly Useful Web Design Checklists and Questionnaires
- 10 Point Website Maintenance Checklist and Annual Website Review
(al)
© Melissa Scroggins for Smashing Magazine, 2010. | Permalink | 60 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: freelancing, productivity, work
|
Despite any financial recession and economic stress, online purchasing continues to grow. Expansion of the market and evolving technology that simplifies our daily lives help to set the pace of e-commerce design. Customers want the shopping process to be quick and easy, and merchants want to increase sales by making their stores attractive and popular. Thus, e-commerce design tends to combine a look and usability that is at once unique and eye-catching. In this post, we showcase 35 attractive online store designs.
One of the trends we observed from this collection is a minimalist design style. Small details and accents (e.g. unobtrusive background patterns, icons, pictograms and typography) reflect a brand’s spirit and match the character of its products. Some websites, though, are unconventional, rich in visual effects. Please note that the selection of stores featured in this showcase was based more on design aesthetics than usability. But we made sure that the websites included here provide at least an easy shopping experience, even for foreign visitors.
[Offtopic: by the way, have you already visited Smashing Magazine's Facebook fan page? Join the community for a stream of useful resources, updates and giveaways!]
Showcase of Beautiful Online Store Designs
Blik
Blik manufactures whimsical removable graphics to spice up the walls of your home. Even though the “About” info gets a bit lost in the large product preview in the center, getting an idea of what Blik is all about doesn’t take longer than a couple of seconds. Aside from the stylish look, the easy shopping experience is what makes this design exquisite: all products are categorized by tags, the thumbnails are big, product descriptions are detailed and supported by decal outlines, and quick tips are placed here and there for maximum assurance. Vintage-looking faded colors and rotating logo add considerably to the elegance.
Fred Perry
Fred Perry’s e-commerce store has a contemporary and elegant look, conveying key features of the brand very well. The stylish grayscale color scheme, along with sparse text in Helvetica font, make an impact. The design naturally combines Flash and JavaScript. The mini-cart window, the readable layout of the shopping cart and checkout pages, the usable navigation and informative product descriptions all up to a slick and friendly shopping experience.
Nectar
The website for clothing and accessories boutique Nectar was designed by Sunrise Design studio. The website’s structure allows you to browse goods and make purchases with ease. A muted palette and slipshod watercolor strokes in the background give the layout a positive feel. By the way, if you visit the designers’ portfolio page, you’ll see that painted styles must be their passion.
Tommy Hilfiger
Another giant brand: Tommy Hilfiger. This design relies on simplicity, a comfortable shopping experience and its corporate identity.
Seibei
Now, that’s a design you will not forget! The site has a very simple, even minimal navigation combined with a striking “cartoonish” design. Product pages are clean and straightforward. Nice and unique design solution.
Bellyshades
The design of German club-wear and accessories store Bellyshades stands out for sure. The vibrant acid colors, insane typography and animals that stand in for shopping carts will leave you anything but cold.
Ten Little Monkeys
This design has a very strong visual appeal; vibrant colors work well on the dark background, the navigation is colorful yet intuitive (notice how the section for girls and boys are distinguished). Also, the choice of typography is appropriate for the shop’s main objective: selling branded children’s fashion and gifts.
DogCollars.ca
Here’s another beautiful e-commerce website: DogCollars.ca. It’s a simple HTML website with a neat grid-based layout, a warm chocolate color and big high-quality thumbnails. The design is minimalist but not plain, and it delivers a satisfying shopping experience.
’47
Premium sports apparel brand ’47 has an interesting history: “This is a classic story. It’s the American dream come to life…” Thus, the company emphasizes the individuality of its brand in its store design and associates that brand with a community. The website combines jQuery and Flash, which slows the loading speed, but given its objective, this is not critical. Creative visualization and a well-implemented shopping mechanism make for a wonderful e-commerce design.
Storyville Coffee Company
Creating an e-commerce Flash platform, let alone a good one, is challenging. In addition to the Converse store profiled above, our showcase includes another fully Flash-based online store: Storyville Coffee Company. This one sports a pleasant coffee theme (appropriately enough), an original table-like product viewing area and an easy shopping process.
Narwhal Co.
Accessories made from recycled ties? Yes! Narwhal Co. produces original jazzy merchandise from recycled ties, including wallets, wrist wear, covers and cases. The tie theme in the website’s header and footer, the stylish icons and the inventive product slideshow on the main page give this design a special flavor.
The Famous 4th Street Cookie
Beautiful typography and high-quality images make this a tasty design.
Via Snella
The website of Swedish male fashion brand Via Snella is clean both in design and usability. The store itself is not very big, so the product gallery is not cluttered with the superfluous navigation bars, announcements and slideshows that are typical of large comprehensive online stores. Instead, the background of the fancy product thumbnail grid is made up of a classic black and white scheme, along with austere typography and plenty of white space.
Twelve South
Twelve South creates accessories exclusively for Apple computers. No wonder Apple’s style can be felt both visually and in the functionality, which is a compliment enough to Twelve South’s store design.
Godiva
High-quality food photography against a light minimalist background is quite effective for Godiva Chocolatier’s store design. Seeing those yummies on the main page is all it takes to hook you. Tons of products are available here, but the sophisticated navigation system and clean layout make shopping a comfortable experience. The shopping cart and checkout pages adhere to principal usability standards.
Marc Hansen’s Comic Book
An original, striking and beautiful design that perfectly sets the atmosphere and communicate the style of the designer and his main product – a comic book.
Vanilla Vanity
Now, that’s a weird web design. The products offered in the shop are just as weird, by the way. An original, unique design which deserves a spot in this showcase.
Atom Bicycles
A very simple, clean and stylish design with unusual navigation and good-looking product pages.
Converse
One would expect a great design from top-class brand Converse. Our expectations are met. Despite being entirely Flash-based, Converse’s online store is quick to load and easy to navigate. We see no heavy graphics or fancy Flash transitions here. Converse’s brand is communicated well by means of simple effects, including concrete and jeans textures, hand-drawn product selection frames and grungy graphics. The buying process is similar to the famous sneakers themselves: comfortable and painless.
Steve & Co.
Aside from its refined and clean appearance, the website for leather accessories store Steve & Co. is remarkably usable. For instance, the whole shopping process requires little jumping around: you can browse and preview products, add them to the cart and review purchases without reloading the page.
iWorkwear.nl
This design has plenty of white space, making the black and yellow scheme especially appealing. There is no visual appeal, but the site works very nicely and it is very user-friendly. Even if you don’t speak Dutch, getting your bearings on iWorkwear.nl is easy because of the intuitive placement and highlighting of elements. A transparent table of brands sold in the right sidebar helps us easily find clothing without having to use the main navigation panel, which is in Dutch.
Sony Style USA
Sony Style USA is a pearl in our collection. It would be hard to find a more comprehensive, sophisticated and seamlessly designed e-commerce website. If you are looking to buy a laptop, you can read exhaustive product overviews, compare and browse reviews of similar products and even configure the computer you’ve selected, all without leaving the website. Even with the variety of products, the store is well organized and easy to navigate. The dark and light colors, along with the Flash and jQuery, perfectly fit this online store.
Abel & Cole
The spirit of a small, environmentally friendly neighborhood grocery store is well reflected in this design by means of charming sketches and hand-drawn typography.
Hollister Co.
Hollister Co. sells Southern California-inspired casual wear. The store has a cool vintage style. Products are displayed horizontally; hover over an item to see its price and available colors without leaving the page. How usable! Warm sand colors and sepia-toned beach photos reflect the “SoCal” spirit of the brand. And we sure like those “Dudes” and “Bettys” categories!
Gargyle
Gargyle online warehouse website is simple yet cute. Blue dotted lines and lovely icons wonderfully reflect the old country-club lifestyle that Gargyle that aspires to.
Giraffe
A colorful design for young families and children. The design perfectly sets the atmosphere for the shopping experience. Notice how well PayPal-payment is communicated.
farfetch.com
Well-known fashion boutique farfetch.com has an elegant black-and-white design. Nothing gets in the way of a pleasing shopping experience here. The auto-detection of your location and currency are stylish features.
Winestore
Everything here is about elegance, style and creativity. Vibrant pink against a white background makes for a vivid yet clean website. Beautiful typography and the “bar code” header complement the company’s image well. Pictograms with information about the wines’ color, body and flavor are a smart addition.
Ork Posters!
This one will interest all those who love typography, print design and data visualization. Ork Posters is the brainchild of Jenny Beorkrem, whose original typographic neighborhood posters quickly became a success. The online store is nothing short of a manifesto of typography love.
laPatate
Belgian t-shirt store laPatate has a creative and funny design (the men’s tee samples enjoy the lion’s share of laughs). The website is available in French only, but clear cart icons and a standard check-out page make for an intuitive shopping environment.
Snupped
Snupped is a nice dark-themed store that sells laptop sleeves. You can buy pre-made sleeves or build your own design, configuring the size and choosing from a number of funky patterns. The products are not tagged or grouped into categories, but this is hardly an oversight given the store’s small size.
Cellarthief
Cellarthief is a beautiful online wine store that sells only three wines at a time. The Apple.com-inspired content blocks against the real-looking wood background shows how the classic spirit of the wine industry is fused with modern design values.
Harry Winston
A lot of glamour, shine and luxury is in this one. Harry Winston’s jewelry store features an amazing design with images that mix typography and jewelry.
Olive & Myrtle
Olive & Myrtle produces beautiful sustainably developed goodies. A clear layout, soft natural colors and subtle typography make this website look modern and eco-friendly.
CuCuu
CuCuu is a charming little store that sells bags and accessories made from recycled materials. The design is minimalist and the shopping experience simple.
Teez
Rules and standards are made to be broken from time to time. You don’t have to speak Russian to tell that the design of Ukrainian t-shirt store Teez is far from ordinary. A chaotic mash of text and images is obviously a new trend in Web design. Despite all of this, the shop looks and feels pretty darn awesome. Take a minute to explore the website and you’ll see how easy it is to shop there. Off-the-chart creativity!
Kinki Micks
This small store sells exclusive car wheels and vintage riding accessories. The design has a simple retro style that perfectly fits the company’s profile.
Red Is White
Red Is White’s design is bright, and the shopping process is pretty solid (the power of inspirational Web design in practice!). A carefully arranged grid, unobtrusive colors and a smooth corduroy-looking texture make the website visually eye-catching, yet they do not eclipse the products. The way the t-shirt thumbnails are displayed is quite handy: just roll over an image of a print to see how it looks on a model.
Related posts
You may be interested in the following related posts:
- Showcase Of Modern Navigation Design Trends
- 69 Sexy Portfolio Designs To Inspire You
- The Big Showcase Of Online T-Shirt Stores
- 50 Beautiful and Creative Blog Designs
(al)
© Julia May for Smashing Magazine, 2010. | Permalink | 62 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: showcases
|
As Web developers and designers, we are spoilt for choice right now. To build a complex Web application or even just spice up a website with some highly interactive interface element, we have hundreds of pre-built solutions to choose from. Every library comes with widgets and solutions, and every developer tries to make a name for him or herself by releasing a funky JavaScript solution to a certain interface problem. We can pick from dozens of menus, image carousels, tabs, form validators and “lightboxes.”
Having this much choice makes it easy for us to pick and choose, which is where things go wrong. In most cases, we measure the quality of a solution by its convenience to us. Our main reasons for picking one solution over another are:
- Does it do what I need it to do?
- Does it look cool?
- Does it sound easy to use?
- Would I want to use it?
- Does it use the framework I’m committed to?
The things you should really look for are different, though:
- How stable is the solution?
Is a good alternative available if this one doesn’t work? - How easy is it to customize?
Do you need to be a JavaScript expert to modify the widget? - How usable and accessible is it?
Are users who don’t have a mouse or are on a mobile browser blocked? - Do you understand what’s going on?
Would you be able to fix a problem and explain it to others? - Is it a contained solution?
Will other scripts be able to interfere with it, or would it contaminate the document? - How dedicated is the developer?
Will the solution be maintained in the future? - What is supported, and how can you extend functionality?
A new browser and client request is always around the corner?
In this article, we’ll show some ways to find out more about these issues. First of all, though, understanding what it means to develop for the Web is important.
[Offtopic: by the way, have you already visited Smashing Magazine's Facebook fan page? Join the community for a stream of useful resources, updates and giveaways!]
It’s Not About You
Most of the reasons why we choose a particular solution right away are very much about us, and this is where we tread on thin ice. We don’t consume what we put on the Web; rather, people we don’t know do, and we can’t make assumptions about their ability, set-up, technical understanding or taste. We won’t make our product a success; we only build it, and thus we are the worst testers of it possible.
I’ve been developing for the Web professionally for over 10 years now, working on everything from personal blogs to multi-language enterprise CMS solutions to complex Web applications, and I’ve learnt one thing on the journey: never build for yourself or the client. Instead, build for the people who will use the product and the poor person who has to take over the project when you leave.
Much as we have to act now to minimize our massive carbon footprint, we need to leave a cleaner Web behind. To keep the Web a thriving market and sustainable work environment, we have to change the way we work in it and leave behind unmaintainable, bloated and semi-workable, albeit pretty, solutions. We have to make it easier for people to use Web applications and save other developers from wasting hours trying to understand what we did when they are asked to change or extend it at a later stage.
Introducing The 7-Step Test For JavaScript Widgets
To this end, I’ve put together a seven-step test to apply to any out-of-the-box widget you find. All of the recommendations have a rationale, so please ponder it before dismissing the arguments as “elitist” or “not really suitable to our environment.”
Let’s not forget that even when something is free, its developer will try to sell it to you for the fame, and many a solution is defended tooth and nail on mailing lists instead of being changed or updated. The reason is that, as developers we are always on the move. Maintaining and extending an old solution is not as sexy as creating a cool new one. This leads to ruins that once enjoyed love when they were state of the art but now rust away on the Internet.
To kick the tires of any out-of-the box solution, I mostly use one tool: the Firefox Web developer toolbar. It is available on the Firefox Add-On website and gives you an easy way to test what’s happening in your widget of choice.
Okay, here goes: seven things to test when deciding on a JavaScript solution.
1. What Happens If JavaScript Is Turned Off?
The first test I do with any widget is turn off JavaScript… not after the document has loaded but before. Turning off JavaScript with the Web developer toolbar is very easy. Simply select “Disable All JavaScript” from the “Disable” menu and reload the page:
The rationale is that there are a lot of reasons why JavaScript may not be used: company proxies or personal firewalls could filter it out, other scripts could create errors and mess with yours, or the system in use could simply not have JavaScript enabled. Think of mobile environments, for example.
You don’t need full functionality when JavaScript is not available, just a working interface that doesn’t overload users and interactive elements that work. If a button does nothing when users activate it, those users will stop trusting you; after all, you haven’t kept your promises.
Overloading is another issue. A lot of widgets use CSS and JavaScript to squeeze a lot of content into a very small space: think tabbed content elements and image carousels. What should be their fallback? If you turn off JavaScript and have 50 pictures where you planned for 2, then that would be a good user experience. A better fallback would be a server-side solution for the same functionality or to show the first 2 and then offer a link to a gallery page with the remaining pictures.
Sometimes the JavaScript for a particular widget is actually very good but the demo websites have been done badly. Hiding elements with CSS and then revealing them with JavaScript, for example, is very common. But if JavaScript is turned off, the solution will break. Good demos and solutions use JavaScript to add a class to the body of the document and make all of the CSS dependent on that class.
The trick that any good JavaScript widget should do is to make any functionality depend on JavaScript by using JavaScript; that way, you never have any functionality that won’t work. This technique is called “unobtrusive JavaScript,” and I have written a course on it and set a few rules for it a while back.
2. How To Change The Look, Feel And Content?
A widget whose look and feel are hard-coded is a pain to maintain. You cannot expect future designers to know how to change a certain color by hunting through your JavaScript files. This is how we end up with bloated CSS files, because people add random IDs and classes to enhance the specificity of their CSS selectors.
Good widgets have their look and feel contained in a CSS file and give you handles (i.e. dynamically applied classes) to apply your own styling. If you find yourself having to change JavaScript to change the look and feel, alarm bells should go off in your head.
This gets worse if you have content such as text labels in the JavaScript or if only a fixed number of elements can be displayed (as in the case of navigation menus). Labels and number of elements are what change the most in any Web product. For starters, you will probably roll out your product across different markets and will have to translate the buttons and menus.
Good gadgets have configuration objects that allow you to change the number of elements and define the text labels without having to change the main JavaScript. The reason for this is that the functional part of the widget should be separated from the maintainer. If the widget has a security or performance problem, you should be able to replace it without losing your configuration and localization work. Otherwise people would be very likely to keep insecure code on the Web, which is one of the reasons why our inboxes are full of spam.
3. How Usable And Semantic Is The Final Product?
A lot of widget creators are very happy to announce that their products are “Web-standards compliant” and accessible because of it. While Web-standards compliance is important, it does not indicate the quality or usefulness of the product. One cannot really validate semantics with an automated tool. For example, the following examples are both valid HTML:
<div class="menu">
<div class="section">
<span class="label">Animals</span>
<div class="subsection">
<div class="item">Giraffe</div>
<div class="item">Donkey</div>
<div class="item">Cheetah</div>
<div class="item">Hippo</div>
</div>
</div>
<div class="section">
<span class="label">Stones</span>
<div class="subsection">
<div class="item">Diamond</div>
<div class="item">Ruby</div>
<div class="item">Onyx</div>
</div>
</div>
</div>
<ul class="menu">
<li><button>Animals</button>
<ul>
<li><a href="giraffe.html">Giraffe</a></li>
<li><a href="donkey.html">Donkey</a></li>
<li><a href="cheetah.html">Cheetah</a></li>
<li><a href="hippo.html">Hippo</a></li>
</ul>
</li>
<li><button>Stones</button>
<ul>
<li><a href="diamond.html">Diamond</a></li>
<li><a href="ruby.html">Ruby</a></li>
<li><a href="onyx.html">Onyx</a></li>
</ul>
</li>
</ul>
The second example works without JavaScript and uses much less HTML. It also requires much less CSS for styling because you would simply take advantage of the cascade.
Furthermore, the HTML on which the widget is based is only half the story. What the JavaScript generates also needs to be valid, usable and accessible, and you can check this when you check the generated source in the Web developer toolbar.
To do this, right-click anywhere in the document and select Web Developer → View Source → View Generated Source:
Usability and accessibility (accessibility being, in essence, merely a more comprehensive understanding of usability) are harder to test. But one very good test is to check how keyboard-accessible a widget it. Keyboard-only users are on the rise, and widgets that work only with mouse-over events would not usable on a touchscreen mobile, for instance. Many widgets provide basic keyboard access (e.g. using the Tab key to jump from one link to another, and the Enter key to activate each), but this is not proper accessibility.
A menu, for example, should not be navigated by tabbing through each of the items because this would require far too many keystrokes. Instead, the user should be able to tab to the main menu bar and from there use the cursor keys to navigate.
A modal pop-up (commonly called a lightbox) should be able to be closed with a keyboard by hitting the Escape key or by tabbing to the “Close” button. If it is a multi-item lightbox, you should also be able to navigate the items with the cursor keys.
The W3C’s WAI websites have some