Google+, Hipster, Connect.me and Instagram! They all hit a gazillion users in no time at all — and you can even read all about it in everyday media today. This is every product creator’s dream. Ok, granted, Google already had their users well before the launch of its social extension. But how did the other ones succeed in building such a strong fellowship in a few months (or even days)?

Turns out that many of these services’ creators were very busy bees and made small details about their product’s launch addictive. It even turns out that many start-ups were indeed able to launch to a strong following (not much unlike Google+) through collecting interested users, email addresses, Twitter followers in any way they could well ahead of their public appearance using a combination of very common and old marketing strategies with clever launch pages.

In this article, we’ll outline some best practices and examples of successful viral launch pages. Let’s define a viral launch page not only as a “Coming soon” landing page, but also as a usable beta page or even in some cases a finished product page.

Fundamentals Of The Viral Launch Or Landing Page

The first rule of viral is of course that you must build something that other people would actually be interested in for one reason or another. Let’s emphasize this, using the words of Robert Scoble: “The best launch is if you have a product that other people like using so much that they tell other people about it.” The users you target need to know at least one bit of information in advance that will make them care. Then, only then, can you move on to the next step, which is to facilitate and encourage sharing.

Normally, you’ll want to (1) let visitors know what you’re doing, and then (2) spark some interest. Then you should (3) make use of that interest by giving them a chance to subscribe to your news updates, doing so with a bright call-to-action button. Lately, so-called stealth start-ups have become quite popular because of the interest they are able to generate. They typically won’t tell you what they’re doing, which means they’re ignoring step (1), but somehow they still manage to grab your attention.

Here are the basic elements a launch page should have:

1. A clear value proposition that interests people. (What problem will you be solving?)
2. If your strategy is stealth, then why should people care? (For example, are you Jack Dorsey?)
3. A notification form, with a bright call-to-action button.

Examples of Basic Launch Pages That Spark Interest

Even very basic launch pages can do a great job of advertising the product if they are memorable, viral in some way or desirable to visitors (or all of the above). You can read more about these characteristics in the recent Smashing Magazine article “Building An Effective ‘Coming Soon’ Page for Your Product.”

Stripe
Stripe has a simple landing page ready for visitors, with one concise sentence: “We’re making it easier to accept payments online.” This is followed by a simple call to action: “Get notified when you can use @stripe”. The app’s name is also the company’s Twitter handle, so you can opt to subscribe to updates through Twitter. This implementation is very minimalist and suggests that the service does one thing very well. Who wouldn’t want an easier way to accept payments online?

Elements: slogan; notification form; call to action; Twitter handle in copy.

Milk
Milk doesn’t tell you what exactly it’s building, but it makes sure the team can reach you once it has something to say. What makes this landing page so successful? It’s the new venture of Kevin Rose (Digg’s founder). Also note the subtle “pleasantly infrequent updates” for email, Facebook and Twitter, which puts us much more at ease with subscribing.

Elements: slogan; notification form; call to action; Facebook and Twitter handles.

VaultPress
You may need to give more information up front in order to get the message across. Here is how Automattic launched VaultPress, a back-up service to give WordPress bloggers peace of mind. The text does three things:

1. It sets your expectations of what VaultPress will do (which is to keep your blog and server safe).
2. It collects data from those who fill out the sign-up form (data that will validate their idea).
3. It creates a sense of exclusivity, because not everyone can join immediately.

Elements: copy that explains what VaultPress does; an integrated sign-up form.

Sumazi
Instead of focusing on the product itself, Sumazi tries to get you to follow it on its social profiles and to share the news with your contacts. Registration is done through Facebook. It’s a first attempt to add a small viral loop to the launch page.

Elements: simple copy; integration with social networks (for sharing).

Let’s see how other start-ups have used the viral loop, and how this effect has sparked real enthusiasm for start-up launch pages.

Additional Elements That Can Make A Launch Page Go Viral

In addition to the basic elements covered above, start-ups have recently been using some of the following elements to make their landing pages more enticing:

• Viral loop,
• Exclusivity and scarcity,
• Glimpses of the beta,
• Social proof,
• Viral content.

You will find all of these in the examples below. Many of the elements are often combined in meaningful ways.

Adding a Viral Loop

The viral loop is a kind of “sharing cycle” or “multiplier effect” that is built into the launch page. It’s an incentive for people to share news of the start-up and to share the sign-up form with their friends and followers. Forkly’s landing page was one of the first to successfully tap into this effect .

Forkly
Forkly is an innovator in this popular viral invitation system. If you want to be notified of Forkly’s launch, you can leave an email address in the form on the landing page. Once you hit the “Go” button, the page reloads and gives you a personalized link that you can share with friends and followers. If at least three of your friends join, then you will get early access to the service. And the more friends who join, the earlier your access will be (Update: they’ve just launched their app to the public) .

Top: a simple informative landing page. Bottom: a simple viral loop.

Add an Incentive to the Sign-Up Process

Forkly’s incentive to share is a strong one: you’ve signed up to use the service anyway, so why not share it with a few friends so that you can gain access even earlier. This was a smart move and has been copied repeatedly since. But there are countless other ways to incentivize sharing.

ResourceGuru
ResourceGuru is giving away an iPad 2 to one of the people who share its link. Who doesn’t want an iPad 2 these days? Think about it: would you subscribe to ResourceGuru if it had only used Forkly’s strategy? Would you subscribe if an iPad was (potentially) waiting for you? These incentives are most effective when the item has an aspect of exclusivity. That’s why you see so many give-aways close to the launch dates of Apple gear, when no one yet possesses the gadget.

ResourceGuru throws in the prospect of winning an iPad for sharing a personalized link.

Alternative Ways to Subscribe

In some cases, you might want to offer other ways to subscribe to your news, particularly if your users are mainly on Facebook, Twitter or Tumblr and like to consume news in ways other than through email.

RumpelDealSkin
RumpelDealSkin offers various ways to get the inside scoop: email, phone, text message, postcard. Additionally, there are links to its social profiles.

Stealth Start-Ups

Lately, the “stealth start-up” method has been quite popular, due to some spectacular successes (including Hipster, Connect.me and Kohort). It’s a way of making something publicly known without actually letting people in on what you’re doing. This could elicit another level of interest in your start-up, but let’s face it: it’s a tough ride. Are you able to leak as little info as possible but still make people genuinely excited?

Hipster
Hipster is a good example of a stealth start-up. Hipster managed to gather 10,000 addresses in just two days after its public marketing launch. And it happened before anyone knew what it does. The cool name and slogan (“Something cool is coming to San Francisco”) turned out to be the perfect marketing mix. The story was picked up widely and quickly by bloggers and media alike. People wanted to know what it is, and they left their email addresses in bulk and shared the links happily with their friends (Hipster used the Forkly approach) to be among the first to see the service.

Elements: intriguing name; fitting slogan; fitting background image; call to action.

Notice the value proposition that complements the name. Then there’s the simple call to action button, and the background that would appeal to San Francisco residents and others. (Wouldn’t you want to know what you’re missing out on?) This happened in January 2011; as of this writing, Hipster is still building its service which will be some kind of local Q&A. But take a moment to check out the hiring page to see how it’s still using its name to tell a story.

Supyo
Supyo has received a lot of attention as a result of its founders, long-time collaborators Shawn Fanning and Sean Parker. They have set up nothing but a splash page for now, which means they cannot collect addresses. (Update: they’ve just added an email notification form.) Shawn Fanning and Sean Parker will create buzz even if only for their Web celebrity status.

Elements: logo; social proof.

Amen
The same is true for Amen. Their landing page doesn’t sport anything but a cryptic (and interesting) message of what it is going to be: “The best place for having an opinion in the World”. Rumors of what the service will be and the fact that Ashton Kutcher and Madonna’s manager invested here keep the interest alive (also the first Twitter engineer Florian Weber is a co-founder).

Elements: explanation of what it does; Similarly to Hipster: an unconventional branding.

Allow People to Reserve User Names and Integrate With Social Networks

Connect.me
Connect.me is another stealth start-up with an incredibly viral sign-up page. Apart from its memorable domain and brand name, it communicated almost no information on what it’s about; an “About connect.me” link appeared in the bottom-right corner, but it didn’t really explain what the app would do.

Top: reserve your user name; get early access; register only through social networds. Bottom: revamped landing page with the same structure but with an explanation of the service.

Unlike the services mentioned above, Connect.me did not ask you to leave an email address. You could only register through Twitter or Facebook. Also, did you notice that instead of something like, “Invite friends to get early access,” the copy says, “Reserve your username to get early access”? This makes it clear that early adopters will have dibs on vanity URLs. This can be very effective with people like me, who have common names and want to register a good URL.

If you went through with the registration, the app would automatically tweet or post a simple message on Facebook: “Reserve your Connect.me username [link].”

This simple approach generated roughly 20,000 sign-ups in a short span of time and even provoked fears of a scam in the blogosphere shortly after. When you visit the website now, you’ll find a landing page (in green) telling you exactly what the service does. The “Reserve your username” is still there, but it has been turned into a central call-to-action button.

The success of strategies like those used by Forkly, Hipster and Connect.me have even led to the creation of a start-up that takes care of the sign-up process for you. LaunchRock does all the heavy lifting, leaving you to concentrate on building the actual software.

LaunchRock
Once you’ve submitted your email address, you’re immediately given the option to do a few things with your link: tweet it, share it on Facebook or email it to friends. The tweet is pre-written and contains a lot of important elements:

1. Your brand name, and an announcement that you will be launching soon;
2. Social proof: “Follow me! I’m first in line.”
3. Your personal link;
4. Your brand’s Twitter handle.

LaunchRock will take care of your viral launch page.

Even if you don’t use LaunchRock as a service to launch your product, it still has a lot to be inspired by. I would even argue that now with so many newly unveiled LaunchRock sites you would do your launch a disfavor for looking like another me-too.  LaunchRock’s blog provides a good analysis of the viral “Coming soon” page.

Especially Twitter Integration

Many services that succeed in generating some idea or product that people want to share on Twitter (and Facebook) experience a hell of a growth rate. This was the case with Threewords.me and Turntable.fm, which recently became the most shared music start-up on Twitter, because people love to announce what they’re doing at a given moment (check out the real-time search results of Turntable.fm’s hash tag). Let’s look at two examples:

Shuush
Shuush is a Twitter reader that scales back users who tweet too often and amplifies people who don’t tweet as much. As a byproduct, users are assigned Shuush levels that they can tweet out. Users like to share facts about themselves, which we’re seeing over and over again.

Elements: explanation of the service; sign in with Twitter only.

Instagram
Instagram has no conventional landing page (and didn’t have a conventional viral launch page when it launched). Rather, its viral circulation comes from people sharing their images on social channels, mainly Twitter. You can instantly recognize these images by the branded URLs, like of this image by Justin Bieber, http://instagr.am/p/IMhuj/, which made the service literally explode on July 21st.

Elements: landing page has a call-to-action “Download” button; the viral loop comes from people who share the service’s output (images) on Twitter and other services.

Sell a Half-Baked Product for Half the Price

Minecraft
Minecraft is an online gaming phenomenon, and its adoption has been mind-blowing, with 2,932,884 licenses sold in the beta phase. People are willing to sign up early, especially if a discount is offered because the product is not yet ready. When Minecraft is finished, it will sell for €20.00. Right now, at 25% off, you can get it for €14.95. Discounts for early adopters are a no-brainer.

Minecraft offers a discount during the beta stages. As the product advances, the discount shrinks.

Lifepath
Lifepath turns this approach on its head. The service is invite-only, and because people might very well want to use it, the company invites visitors to buy an “entrance ticket”. The closer the service gets to completion, the lower the entrance fee gets. Note that registrations fared better when the fee was than when it dropped to . This is an interesting insight that the creator Dustin Curtis shared on Twitter.

Elements: exclusivity; call to action.

Exclusivity

Exclusivity can be a powerful way to convince people to join. Facebook, which started out as private to one university, now has the biggest following of them all.

Sugarhigh
When you receive an invitation to this invite-only newsletter, you’re redirected to the landing page, where a counter displays the time you have left to register.

Elements: invitation only; sign up within 24 hours of being invited.

Turntable
Turntable is the red-hot music start-up that allows you to join rooms and DJ along with other people, mainly friends. The landing page says, “If you have a Facebook friend already on Turntable, you’re in!” This enables the company to grow the service organically, making sure that only like-minded people join and slowly adjusting and scaling up its servers. If you know no one on the service, you can leave your email address.

Elements: exclusivity; social proof.

Tell a Story, Add Personality

Telling a story is a powerful way to interact and tell people about your product (and has a clear psychological aspect). Stories can captivate an audience, which is exactly what you want for your launch page.

Evertale
Evertale is an Android app that automatically scrapbooks your life. The creators explain this very visually as you scroll down the page. Your path is marked on a map, and when you reach the bottom you’ll see a call to action, where you can leave your details.

Evertale gives its elevator pitch as you scroll down the page.

It turns out that scrolling is a useful technique for making information engaging and telling a story. Check out these other services with slightly alternative approaches:

• Ben the Bodyguard
  A Frenchman protecting your secrets is the theme of the viral launch page for this iPhone app.
• Nizo
  Another launch page for an iPhone app. Notice how the page elements move around.
• Kaleidoscope
  The landing page for a Mac OS app. Each major feature is given its own section.
• Ala
  The landing page for a Swiss illustration and interface design studio.

The Last Rocket
Telling a story has a lot to do with authenticity and staying true to one’s purpose. The Last Rocket is 8-bit at heart and conveys it well on its launch page.

Story told exclusively in 8-bit.

Social Proof

Social proof (one of six “weapons of influence,” according to Robert Cialdini) can be a powerful and compelling way to get people to sign up for your service (or at least for the launch news). In a nutshell, the concept states that people will do what they see other people doing. We have seen this demonstrated with the viral invitation system used by Forkly and the social network-only system used by Connect.me. A complementary feature would be to showcase your sign-ups or Likes front and center on the home page.

Gidsy
Gidsy is an online marketplace, and as such it needs the trust of the community. Therefore, the company shows the love it’s gotten from real users on its home page, along with two key elements: a few explanatory words, and a sign-up form with a call-to-action button. You’ll find a button labelled “Host an activity” in the header, although the service is not yet fully operational. By checking it out, however, a lot of people will be convinced to come back once it’s ready to go.

Elements: copy with slogan; subscription form; call to action in the header; social proof.

Fellody
Fellody has taken quite an interesting approach with social proof and exposure. If you’ve signed up and uploaded an image to your profile, the picture could be included in the background of the home page.

Fellody is a music social network with dating elements, so showing off its members to prospective users makes sense.

Elements: social proof.

Honestly.com
Right after you sign up (through Facebook), Honestly.com sends you an email showing your friends who have already signed up. It establishes trust in those few moments after sign-up, while helping you find people you know on the service.

Elements: confirmation email (social proof, instead of the usual gibberish).

Fab
We saw earlier with Justin Bieber on Instagram how social proof from celebrities can create an instant surge in traffic and sign-ups. Ashton Kutcher, who actively invests in start-ups, knows this well. Whichever start-ups he invests in get not only funding but an instant push in visibility. Fab is a start-up that recently pivoted from Fabulis and has gotten funding from Kutcher among others. TechCrunch even did a celebrity endorsement face-off between him and Kevin Rose.

Element: social proof from celebrities.

Sharable (i.e. Viral) Content

Another strategy for gaining traction ahead of launch is to create sharable or viral content. This could be anything that people want to consume and that solves a problem they have. (KISSmetrics covers the topic in depth on its blog.)

BestVendor
BestVendor shared a statistical document on its blog (“The Startup’s Toolkit”) that was picked up widely in the blogosphere and start-up world, which is exactly the market it is targeting. Its launch page, however, is a simple sign-up form for collecting email addresses.

BestVendor shared its document “The Startup’s Toolkit.”

Visual.ly
Visual.ly spread around its video explaining what its service is about, along with its “Coming soon” page. The video was well done and for that reason was shared by others.

A good video is enough to get attention.

Fake Readiness and Skip “Coming Soon” Altogether

Recently, doubt has been cast on the effectiveness of these viral launch strategies. Some of the criticism questions how much a sign-up is worth if people don’t really know what they’re signing up for. Turning someone who has signed up into a user after launch could prove very hard. So, you could skip the “Coming soon” approach entirely and make it look like you’re ready for users to sign up. Make the launch page look like an actual landing page for your product.

By skipping the “Coming soon” page, you can test your idea on visitors directly. The goal is still to get as many sign-ups as possible, but in the process you are gaining validated insights into your start-up. Is your page ready, but no one is giving you their address? That’s a good sign that you need to clarify your vision.

Joel Gascoigne, who launched his start-up Buffer that way, has this to say:

“Treat your idea as a hypothesis that needs rigorous testing, and treat the emails as people who are happy for you to get in touch to discuss your product idea further in order to validate that it would solve a real problem for them and that they might actually pay. I don’t think the idea of having a conversation with the people who give you their email comes into the minds of new start-up founders enough.”

EyeEm
EyeEm currently has an Android app out in the wild. And if you browse the company’s landing page, you might assume that the iPhone app is ready to download, too. But if you hover over the iTunes button, it lets you know that it’s “Coming soon,” and then you can leave your email address on the dedicated iPhone launch page. You sign up for an email notification by setting up an account, so once the app is out, you’re already registered and ready to use the product (you will no longer see this, since the launch has now been done).

EyeEm’s App Store button tricks you into thinking that the iPhone app is available.

The OpenFeint Bluff
The developers behind OpenFeint, the social gaming network for iPhone, started with a bluff. They sent a press release to TechCrunch and got the blog to cover the story, which claimed that they were almost done and would be releasing the product soon. Only after many people signed up did they decide that building out the concept was worthwhile; till then, they had not written a single line of code. So, they worked away at it for 45 days straight. The company later sold for 4 million.

Websites That Respond to Visitors

Thermo
Thermo, the landing page for an iPhone “pocket thermometer,” does a great job of telling you what the app does and being responsive to you. It tracks your location, fetches the temperature there and then displays it in a graphic on the left. Moreover, the developers allow you to tweet the results (not unlike what Shuush does), thus gaining even more exposure.

Thermo responds to your location and temperature.

Sign-Ups as a Qualifier

Joel Gascoine proposes taking the conversation with prospective users to the logical next step. Whenever someone signs up or tries to sign up, you could give them a few questions to answer. There’s a thin line, though, between annoying visitors (and thus driving them away) and making them feel valued.

Monotask
Monotask asks subscribers key questions that will immediately inform its product decisions before launch.

This looks like a normal, simple launch page.

After you sign up, Monotask asks why you subscribed and how it can build a great product for you.

Joshua Porter analyzes Monotask’s implementation more in depth in this article “Using Your Sign-Up Form as a Qualifier.”

Make It Easy for People to Love You

The last and simplest advice is this: make it easy for people to love you. This love could be for any number of things: your design, your ideas, your approach. Or perhaps they just love that you make their lives easier in some way. Visitors will always reward you for that.

Akismet
One detail on Akismet’s home page is a good example of making people’s lives easier. When you right-click its logo, a window opens that asks you, “Looking for the Akismet logo?,” followed by links to download it. How many bloggers and journalists try to copy logos into their articles? I don’t know how many, but everyone will love you for such attention to detail and for making their life a little easier.

When you right-click the logo, a pop-up lets you download files in different formats.

Conclusion

The strategies listed above provide a glimpse of how launch pages could be made more intriguing and shareable. Many of the start-ups we’ve analyzed have made use of various strategies to grow their numbers. Most importantly they built a service that people were interested in and they managed to share their vision among the right people making use of the viral loop.

But the list is by no means exhaustive and certainly the launch page was not the only reason the services took off. A well thought out placement in blogs, social media and among friends is often a necessary accompanying move. However: the launch page is always the first thing a potential user sees of a new idea and it would be wise to cater for the best possible conversion right there.

And Now It’s Your Turn…

Which launch pages have you recently given up your email address for? Are there other tools you use to launch your web projects that you have not seen in this article? Feel free to share your thoughts with the community in the comments section below!

Articles and Galleries

• Designing ‘Coming Soon’ Pages
  Tips on designing a good “Coming Soon” page.
• Beta List
  A list of websites in beta.
• StartupLi.st
  A list of early-stage start-ups.
• TheGodfounder
  Blog with many examples of viral mechanisms
• “Gallery of Launching Soon Pages,” LaunchSoon
• “I’ve Noticed a Major Flaw With Viral Coming Soon Pages,” Takara Swoopes
  With follow-up discussion on Hacker News: 1, 2, 3.
• “How I Grew a Waiting List of 20,000+ at Mint.com,” Noah Kagan
• “What’s the Best Launch Strategy for a Web Startup?,” Quora
• “What Are Some Good Ways to Drive Traffic to the Email Sign-up Landing Page Before Launch?,” Quora
• “Which Are the Best Startup Home Pages?,” Quora
• “Viral Marketing: This Always Works,” Andy Sernovitz
• “Why Social Proof Matters to Your Startup,” Dan Shipper

Tools

• Prefinery
  Outsource your beta and “Launching soon” process.
• LaunchSoon
  A “Launching soon” script that you can put on your server.
• “How to Implement a Launching Soon Page With PHP and jQuery,” Antonio Lupetti
  The source code can be downloaded.
• Launchlist
  Launchlist helps designers and developers check their work before exposing it to the world.
• LaunchPad (for “domain parking”), Placeholder, Holding Pattern, Apz (for mobile apps)
  WordPress themes for tweaking your launch page.
• Custom Coming Soon Pages
  A WordPress plug-in that serves the “Coming soon” page to the public and the fully operational website to administrators.

Disclaimer: I know two of the mentioned start-ups’ founders personally.

(al) (il)

© Simon Schmid for Smashing Magazine, 2011.

Smashing Magazine Feed

  

There are many elements that make up any visual design, whether it’s good or not. Becoming familiar with the parts of a design is necessary before you can start to apply the principles of good design to your own work, in the same way that a doctor needs to have an understanding of anatomy before he can learn to heal a patient.

There are seven basic elements of any design. Some are easier to grasp than others, but all are important. Once you can identify the elements of a design, whether it’s your own or someone else’s, you can learn how the principles of good design are best applied.

Line

Lines are generally present throughout a design. They can be thick or thin, straight or curved, solid or dashed or dotted. Lines can be any color and any style. Straight lines are often used as delineations between sections of a design, or they may be used to direct a viewer’s vision in one direction or another.

The width of a line has a direct effect on its visual impact. Thick lines are bold and strong; they draw attention to themselves. Thin lines tend to do the opposite. Color also effects the impact of a line, with brighter and darker colors drawing more attention than lighter and paler colors. The style of a line also has an effect: dotted or dashed lines are less imposing than solid lines.

Curved lines often give a more dynamic or fluid look to a design. They indicate movement and energy. They’re also more common in designs with an organic nature, as they’re more likely to be seen in nature. Straight lines are more formal and structured, and indicative of “civilized” culture.

Examples

RePrint

RePrint uses a number of curved lines to direct the eye of the visitor.

VideoDSLR

VideoDSLR uses straight lines of varying widths to delineate content sections.

Justdot

Justdot is another example of a site that uses a lot of curved and dashed lines to indicate movement and energy.

Form

Forms are three-dimensional objects within a design, like a sphere or cube. You can have forms that are actually three-dimensional in your designs (like with product packaging), or forms that are actually two-dimensional but are displayed in a way as to imply that they’re three-dimensional (like a line-drawing of a cube).

Forms are common in actual three-dimensional graphic design, of course, but are also seen in web and print design. Website designs that use 3D techniques are making use of forms. Another common place to see forms is in logo designs where a sphere or cube is present.

Examples

Print Mor NYC

Print Mor NYC uses a 3D effect behind their main content.

Arlo Vance

Another example of a 3D effect in website design.

Shape

Shapes are two-dimensional. Circles, squares, rectangles, triangles, and any other kind of polygon or abstract shape are included. Most designs include a variety of shapes, though deliberate use of specific shapes can give a design a certain mood or feeling.

For example, circles are often associated with movement, and also with organic and natural things. Squares are more often seen with orderly, structured designs. The color, style, and texture of a shape can make a huge difference in how it is perceived.

Examples

Method Design Lab

Method Design Lab uses ovals and other rounded shapes throughout their design.

Passion About Design

Circles are used throughout the design.

Cappen

The Cappen site uses triangles throughout their site.

Texture

Textures are an important part of just about any design. Even designs that, on the surface, don’t seem to use textures actually are (“smooth” and “flat” are textures, too). Textures can add to the feeling and mood of a design, or they can take away.

The most commonly seen textures, apart from flat or smooth, are things like paper, stone, concrete, brick, fabric, and natural elements. Textures can be subtle or pronounced, used liberally or sparingly, depending on the individual design. But texture is an important aspect of design, that can have a surprising effect on how a design comes across.

Examples

The Heads of State

The Heads of State site uses a few subtle textures.

Doublenaut

Doublenaut uses a more pronounced texture in their background.

Cuban Council

The Cuban Council website uses textures on virtually every element of their design.

Color

Color is often the most obvious thing about a design. We’re taught colors from an early age, and even go so far as to identify some things with color descriptors (“my green jacket” or “my red shoes”). Color is also capable of creating strong reactions among people, who consciously and subconsciously apply certain meanings or emotions to different colors (this is also influenced by culture, as many colors mean different things in different cultures).

Color theory is an important aspect of design, and something designers should at least have casual knowledge of. You should know the difference between a shade (when black is added to a pure color), tint (when white is added to a pure color) and tone (when gray is added to a pure color). You should also know terms like chroma, value, and hue. But more importantly, you should know how all these things work together to create a mood or feel in a design.

For a more complete overview of color theory, check out our archived series, Color Theory for Designers.

Examples

Go Live Button

The very bright colors used on the Go Live Button website have a definite impact on the perception of the visitor.

Camp David

The more muted colors here give a completely different feeling than the site above.

Old Putney Row to the Pole

The Old Putney Row to the Pole site uses darker but still muted colors, which gives yet another impression.

Value

Value is closely related to color, but it’s more general. It’s how light or dark a specific design is. Again, this relates directly to the mood a piece gives. Darker designs convey a different feeling than lighter designs, even with all other design elements being equal. This is one reason you’ll often see designers releasing both light and dark versions of their themes.

Not every piece has a clear-cut value. With very colorful pieces, you might not really be able to tell how high or low the value is. One trick is to convert the design to grayscale, to get a better sense of how light or dark it is. You can also look at the histogram of an image to get an idea of where the value is more heavily concentrated.

Examples

This After That

This After That is an example of a site with a relatively light value.

The Lounge

The Lounge has a relatively dark value.

Space

There are two kinds of space in design: positive space and negative space. Positive space is that which is occupied by design elements. Negative space (also called “white space”) is the area that’s left over. The relationship between positive and negative space has a strong influence on how the design is perceived. Lots of negative space can give a piece a light, open feeling. A lack of negative space can leave a design feeling cluttered and too busy, especially if the designer is careless.

Negative space can create its own shapes and forms, which impact the design. Understanding the effect of negative space and how to use it to your advantage in a design is one of the most important techniques a designer can learn, and can make the difference between a good design and a great design.

Examples

80/20 Studio

80/20 Studio has a lot of negative space in their design.

Dazed Digital

Dazed Digital, on the other hand, has very little white space in their design.

Poster Roast

Another example of a site without a whole lot of negative space.

Up Next…

In the next installment, I’ll be covering the principles that make up a good design, and how to apply them to the elements we covered here.

Further Resources

• Shape – Basic Elements of Design
  This article from About.com offers a brief rundown of how shapes are used in design, as well as links to more specific resources.
• Textures in Modern Web Design
  An article from our archives on using textures effectively in website designs.
• The Elements of Design
  An overview from Digital Web Magazine.
• Learn the Basic Elements of Visual Design, Go For the Right Composition
  Another overview of the basic elements, this time from DesignModo.

(rb)

Noupe Design Blog

  

Today, the market consists of countless synthetic materials that showcase the talent and hard research of man. However, at the core of these products are four elements that have existed since time can remember: earth, air, fire and water. The elements have long been thought of as the essential materials to sustain the human race.

However, in the modern age, these elements are starting to be an aesthetic source for man-made projects, such as exterior architecture, interior design and packaging. Now they have made their footprint on design in the technological age, serving as the inspiration and subject for countless web designers. Here, we show you a good number of examples of some of the best element-incorporating Web designs that are sure to blow you away.

Earth

Organic Grid
Organic Grid uses the element in a more abstract way, using the tones we typically associate with it. Rustic oranges and reds, marigold yellows and olive greens used on this site exemplify the colors found on the Earth and in its plant life.

Watermelon Industries
Watermelons grow at the source: the dirt. Then they grow, ripen and feed communities. Thus, it makes sense that a site that aims to serve communities use the earth and its bounty as inspiration for their design.

InfinVision
InfinVision exhibits a completely modern take on earth, with vectors serving as the trunk, limbs, buds and blossoms of a tree. This tech tree sits atop a spherical shape that represents land. Scrolling own to the footer, we get a black area that invokes an earthen existence, as flowers, grass and pebbles rest upon its surface.

Rocket Club
Rocket Club’s rich tones highlight the textured sky that makes up most of the background image. These moss and turquoise tones float in and out of each other, and serve as an almost neutral background for the stark clouds. Around and on the background are simple text areas shaded in black, which keep the emphasis on the background while providing information.

Chuan Production Film Studio
Chuan Production’s site features the beauty of dilapidated architectural buildings set upon arid land. With its abysmal black background, Chuan’s subject feels as if it is the past parapet in a deep, foreboding world. Adding to this feeling is the slight lighting effect that highlights the building and the rotating nagivation.

Gladeye
Stars float atop a stationary mountain scape in this mostly gray scale design. Popping off the abysmal blacks and shadowy grays are stark whites and muted earthen tones from the mountain.

Tapada Nacional de Mafra
Tapada Nacional de Mafra’s design doesn’t feature a land or a building once forgotten, but it does consist of a snapshot of rural life in the midst of contemporary architecture. With this photo, Tapada shows that ancient rituals and habits are ever-present in the modern age. Tapada keeps with the earthen them by using paper textures and brown tones.

Prism Girl
In this majestic world, a large tree builds its roots in a modern cityscape. Users can flow up and down the tree, experiencing her floral abundance, leafy green moss and her existence among the clouds. With the tree’s roots firmly embedded in the cityscape’s land, Prism Girl reminds users of an unarguable truism: No matter what man-made architecture demands precious ground, the ground will always take it back.

Vitamin G Studios
Immediately settling on this site, our eyes set their sights on a fly. This fly sits perched on top of a twig, with the branch and its mossy green leaves out of focus on the background. Here, for the fly and the design, Earth serves an important, ever-present function of foundation.

Cure
Green, brown and beige tones give this site its earthy appeal. Driving this inspiration home are the paper textures used throughout the site’s design.

2LK Design
Large number and letter blocks are placed in a pastoral scene, giving us the combination of old and new, of man-made and natural, of tradition and new age. We see the modern white tones echoed in the logo along the left side.

Viola’
Voila’ uses a gorgeous flat landscape to serve as the basis for its focal point. However, the strength of melon-toned oranges, fuchsias and yellows, along with the deserted land, lend to a mix of fantasy and post-apocalyptic vibes.

Air

Reduce Tu Huella
Reduce Tu Huella emphasizes its air influence by blackening out the surrounding landscape. This allows us to  focus on the layered clouds, the only colored items beside the cloud logo, in the background.  Next, the black pieces along the horizon and in the sky stand out, giving us the subject of the site. We’ll then flow (pun intended) down to the content area. With such structure, Reduce Tu Huella tells us what is of utmost concern: using our air in an efficient, but respectful, way.

Yipori
At Yipori, no one can experience sadness. That’s because on this floating world in the sky, the dwellers are exuberant, the land is always clean and flourishing and the skies are always peaceful. Soaking you deeper into this world is are the floating semi-transparent clouds that stay crisp and ever-present.

Rafael Vergani
Rafarl Vergani’s site showcases all the typical- yet beautiful- evidence of an air-inspired site: clouded background, soft blues and whites, semi-transparent additions and some sort of air-related focus.

Who Is Leon
Who Is Leon gives a beautiful air-inspired design that appears hand-drawn. It lends to the idea of a sketch artist who captures optimism and limitless thought in nature. Adhering to this vibe is the statement, “me + you = amazing results.” Keeping this bubbliness and confidence at bay are the soft modern tones and a simple structure that speaks to subtle professionalism.

Firefox Tweet Machine
Firefox Tweet Machine is just that: A machine that delivers tweets. These tweet updates are delivered via bubbles that emerge out of the top of the machine. These bubbles then spring up to the top of the page, where they bounce and linger before floating out of sight.

Novembro
Novembro features a large sky-traversing apparatus floating across a sky that looks withered and tattered with rough treatment. While the scene seems to speak of foreboding danger, it serves to remind us that we’re only one piece of a very, very large design- evolutionary or created. No-nonsense sans-serif fonts and black tones lend to the seriousness already seen in the atmosphere.

Altimea
Altimea’s gorgeous design is without a doubt influenced by this element, with airy blue and gray tones, a wisp-thin font on the links and a beautiful winged creature. The rich black bar on the bottom and the silver box anchor this airiness, creating a grounded design that reaches to the sky. This grounding effect is also used in the logo’s thicker font and the black bar on top.

Stephen Caver
Stephen Caver’s design operates much like Rocket Club’s. Heavy black tone present in the text provides easy legibility while allowing the sky’s tones to bounce off its neutrality.

Studio Kerozen
Studio Kerozen doesn’t utilize typical air elements. Rather, we see deep grays and blacks in a modern, structured design. However, Studio Kerozen’s index features smoke flowing through the blackness, highlighted in rick fuchsias, electric oranges and tinges of white. The smoke continues to ebb, flow and fall upon itself. With this, we get the subject that we can see, the smoke, and a reminder of the element we cannot see here: air.

Shining Karma
Studio Karma’s site features a sleek palette, with liquid rotation of information for easy userability. The ever-growing blast of smoke on the left hand side serves as the invocation of ‘air.’ However, Shining Karma can also be thought of as invoking fire, as this smoke results from an unseen explosion.

Fire

Hind Site Inc.
Lava shoots and flows from the intimidating volcano on Hind Site Inc.’s site. The red-hued sky and billowy clouds of the image are. These elements are mirrored throughout the site in orange toned links, text areas and CSS.

Creative Fire
Creative Fire uses their own logo as a background for a fire reference. Mimicking the influence is the strong red bar along the bottom of the design and the strong red header in the right content area. Cooling off this heat is the soft, semi-transparent box and cool gray-toned content.

Solace Beeswax Candles
Candles are a strong, readily-available source of the element of fire; thus, why should the site of a candle-selling company be any different? Lit candles sit in the forefront of a rich landscape toned in rich auburns, maroons, pumpkins, red-violets and melons. This landscape serves as a source of comfort for the viewer, with a bumbling brook, blossomed flowers and a clear view of a sunset. It’s understandable why Solace chose such imagery, as candles serve the same purpose as this landscape: warm and comforting.

TuiSpace
Let’s take a step outside the Earth for a moment. There is no air or no earth (Well there is an Earth, but not the lower-case kind.) However, because stars and quasars perform the same light-emitting function, they can be considered the fire of space. Tui takes this association and runs with it, with a large galaxy and surrounding stars, quasars and pulsars serving as the backdrop to the site’s content. You can change the theme; other looks include landscapes, a giraffe and a cloudy sky- all examples of the other elements.

InWare Powered Artillery
At InWare Powered Artillery, we get electric blues, purples, oranges and reds that flash as lightening across the focal point. Repeating these tones are the three glistening content areas below the focus. Enhancing the vibrancy of this palette is the black backdrop.

DS Design
DS Design may not be completed yet, but their ‘coming soon’ page speaks volumes to the design standard the site holds. On a ravished, barren, fire-ridden landscape sits a crisp, sleek robot. However, this robot isn’t all too different from its surroundings, with electric pulsating from its core. It’s not known whether the landscape was caused by the large-scale robot, or whether the juggernaut was sent to save the land. What is known, however, is that the image showcases raw, fire-inspired talent.

BBQ War
The site invokes fire via the orange and charred gray tones and the lightening bolt in the main image. This invocation is perfect for a Bar-B-Q site and perfect for any site referencing stiff, ‘war-like’ competition.

Water

26000 Vodka
26000 Vodka invokes this element with enlarged water molecules. These molecules rotate around the links for a design that you can sink into.

Brad Colbow
It’s hard not to see the influence water has on Brad Colbow’s portfolio site. In fact, nearly all of the website is under water, with the exception of the logo, links and design details at the top of the page.

Gazelle Touch
Gazelle Touch soaks its site in varying blue hues for the ultimate water-inspired layout. Underneath the blue-toned city lies a calm body of water with slight reflection. Upon clicking one of the semi-transparent links floating at the top of the page, we softly sink to below the water surface to indulge in the content.

Groovy Web Design
Water isn’t just known for its ability to calm. It’s also known as a deep abyss housing the known and unknown, a foreboding world all its own that houses creatures both fascinating and dangerous. Groovy Web Design invokes these aspects of water, adding the vibe of an action-packed movie with fun tilted sub-headers, vibrant tones and animalistic drama in action.

Pusulaweb
Pusulaweb also provides us with the multiple angles of water, with underwater, surface and shore views. Adding to this is the play on light, as it comes down from the sky, dances along the trees and water surface, and shines down into the deep sea where the content appears. And once users automatically float down to read, they subtly ‘bob,’ just as one would do if floating in water.

Tim Bjorn
The simple palette of Tim Bjorn’s portfolio is counterbalanced by the strong graphical detail in the water scene. Here, a small whale swims in a sea of circles, with countless water-drop shapes spewing out of his top.

Waterlife
Waterlife is the ultimate water-inspired site, with the background consistently moving to show light shooting into the sea. Beautiful development adds to the professionalism and dark hues contrasted with bright blues and bold whites keeps with the theme.

Piipe
Piipe uses a variety of detail to add to its layered feel, such a drop-shadows, large pixels with countless hues and transparency. Also adding to the layers is the play on perspective, with multiple waves sitting at a variety of distances and a far-away sun peering over the horizon. The detail on the mischievous-yet-lovable-looking fish is nothing to scoff at either.

Combinations of the Elements

Oh Zan
Oh Zan features a vibrantly colored landscape, which you can float across to reach your desired link. Within this land, we get a combination of elements: the earth on which the enchanted land sits, implied water underneath a sheath of fog, the put-put of smoke flowing out of a distant building and a boiling sun in the background. Keeping these hues calm is the neutral gray-green background. (The background’s visibility depends on resolution.)

Toucouleur
Toucouleur stuffs all four elements in its top image, with lava flowing on the barren earth, around the snow-capped mountains, into the dark ocean and underneath a busy, cloudy sky. Toucouleur reminds us that witnessing all the elements at play with one another doesn’t require effort; you can see it in most landscapes or cityscapes, manipulated or not.

Lowe
Lowe doesn’t use a landscape or realism to provide a combination of elements. Rather, its whole design consists of shapes shifting around each other in a psychedelic kaleidescope effect. Then, these  strip away, unsheathing an underlying layer, which invokes a separate theme. These themes include water, as seen here with fish floating amongst the shapes, and air, which features windmills on a red-toned layer and hot-air balloons on a green-toned layer.

Logoterapia
Logoterapia features a tree that’s gradually losing its leaves. These leaves gracefully flow to the land on which the tree sits. Next to this tree sits a giant cloud, softly resting along the reflecting surface of the water. Logoterapia includes water elements as well, with a small fish systematically springing out of and returning to the water.

Concept 007
Concept 007 shows various scenes, which you can flip through, invoking the elements. The opening scene, for instance, combines a ship that touches both sea and sky. Its maiden of the ship makes her appearance only to be nibbled by the large fish. Another scene features a carnival, complete with roaming elephant and balloons that command attention as they float into the atmosphere. You can also view a giant boy who towers above the clouds as he tries to catch a helicopter. Concept 007 goes to show us that even in our most outrageous fantasies we cannot discard the essential elements of the world in which we exist.

Element
Element is a company that sells energy drinks. These are said to provide consumers with a taste and feel that characterizes each of the four elements. Thus, it stands to reason that it’s site would play upon these elements. Each bottle that sits in the middle of the design emerges upon hover to showcase one of the four elements. With this emergence is element-specific hue that colors the bottle and the surrounding floating shapes. Upon clicking, the surrounding images change to more element-specific imagery and we are given a run-through of the product. The black tone serves to anchor the heavy development.

Grzegorz Kozak
At Grzegorz Kozak’s site, we follow the whimsically contoured lighthouse down through space, where we reach the Earth’s atmosphere, ridden with white floating clouds and a turquoise sky. A little lower and we reach the base of the lighthouse, which rests on a land with sparse resources: a few bushes and a telephone booth. Right next to the land is the vast ocean and right underneath it are remnants of technology buried in the earth. The humor is in the details; buried are items such as an old Nintendo controller, cassette tape and floppy disk reminiscent of the early 90s.

Imagine Boris
Boris Savitsky’s portfolio may be vary minimal, but it doesn’t skimp on the elements. Included are butterflies roaming in the sky, in addition to grass, trees, flowers and a lizard perched on a rock. Some telephone lines  and old-world street lights linger in the distance. In the blackness reside more butterflies, flowers and some twig-like figures.

The Spot INFERNO
The Spot INFERNO’s site is one that belongs in an ancient atlas filled with mythological lands that are governed by an unknown figure. Here, we sift down through one of the worlds, gliding through the detailed clouds, to tiny villages perched around a large body of water and mountains and caves. From here, we go past an ancient city sitting in the mountains to woodlands, only to reach the earth. The Spot INFERNO doesn’t stop here, though. We drift farther and farther into the core, eventually reaching a Satan.

Immersive Garden
Immersive Garden invites you to take a seat, where harmony awaits in the form of elemental balance. In this design, earth, air, fire and water float together in a dance where no one is leader. Beautiful fish and the tree sway in the same underwater motion, with small flower petals falling through the air. Billowy clouds and a pale palette make this atmosphere add to the coziness. Though the design changes with every page, one thing remains consistent: the use of the elements in tandem.

Summary

With foreboding seascapes and towering, sky-high views, Web design is nodding to mother nature by combining current development trends with the basic elements. This nod to the elements is indicative of the growing appreciation and inclusion of all things natural in our technological lives. We can see this trend in interior design, architecture and countless products on the market. So we ask you: What’s your favorite non-Web example of a nature-tech infusion? Or do you have a smashing Web example that you didn’t see here?

(ik)

Noupe Design Blog

  

In 2002, Mark Newhouse published the article "Taming Lists", a very interesting piece in which he explained how to create custom list markers using pseudo-elements. Almost a decade later, Nicolas Gallagher came up with the technique pseudo background-crop which uses pseudo-elements with a sprite.

Today, on the shoulders of giants, we’ll try to push the envelope. We’ll discuss how you can style elements with no extra markup and using a bidi-friendly high-contrast proof CSS sprite technique. The technique will work in Internet Explorer 6/7 as well.

Starting with special characters

There is a pletora of glyphs out there that we could use instead of images to create custom markers. This should improve:

• performance (there is no HTTP request)
• usability (these characters will grow or shrink according to user’s settings)
• maintenance (no sprite to create, no asset to deal with)
• accessibility (see further below).

Example:

The markers (♠, ♣, ♥, ♦) in the list above are created via the following rules:

HTML:

<ul class="glyphs">
	<li class="one">performance</li>
	<li class="two">usability</li>
	<li class="three red">maintenance </li>
	<li class="four red">accessibility</li>
</ul>

CSS:

.glyphs {
  list-style-type: none;
}

.glyphs li:before,
.glyphs b {
  display: inline-block;
  width: 1.5em;
  font-size: 1.5em;
  text-align: center;
}

.one,

.one:before {
  content: "60"; /* ♠ */
  background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '♠'+this.innerHTML);
}

.two,
.two:before {
  content: "63"; /* ♣ */
  background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '♣'+this.innerHTML);
}

.three,
.three:before {
  content: "65"; /* ♥ */
  background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '♥'+this.innerHTML);
}

.four,
.four:before {
  content: "66"; /* ♦ */
  background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '♦'+this.innerHTML);
}

.red b,
.red:before {
  color: red;
}

How does this work?

• The value of the content property must be an escaped reference to the hexadecimal Unicode character value (for IE, we use HTML entities).
• Internet Explorer 6/7 do not support ::before nor :before, so the characters are plugged via CSS expressions.
• IE8 does not support ::before, but does support the single colon notation
• Please notice that putting aside browser support, “there’s no difference between :before and ::before, or between :after and ::after. The single colon syntax (e.g. :before or :first-child) is the syntax used for both pseudo-classes and pseudo-selectors in all versions of CSS prior to CSS3. With the introduction of CSS3, in order to make a differentiation between pseudo-classes and pseudo-elements, in CSS3 all pseudo-elements must use the double-colon syntax, and all pseudo-classes must use the single-colon syntax.”
• In IE, characters are wrapped in <b> elements, so we have a means to target and style them (you may rather want to rely on a class name for that).

Note that the CSS expressions we use here are not as bad as the ones generally used to mimic min-width and the like. These are only evaluated once, which should result in a small performance hit.

Displaying Images Via Pseudo-Elements

The main advantage of using a pseudo-element for the sole purpose of displaying an image is that it allows designers to crop a sprite. Actually, this is nothing new, and many websites are already using extra (aka "junk") markup to achieve this. For example, Yahoo! Search uses empty <s> and Facebook uses empty <i> tags for this purpose. Going this route allows for the creation of compact CSS sprites, without empty space between the images within the sprite.

The two examples below do not use extra markup and they both share the same sprite:

The two images below — which are the second icon in the sprite — are generated using each technique, respectively.

Nicolas Gallagher’s method

Styling the pseudo-element with a background image:

#first:before {
    content: "";
    float: left;
    width: 15px;
    height: 15px;
    margin: 4px 5px 0 0;
    background: url(sprite.png) -15px 0;
}

The new url() / clip method

Using the content property to insert the sprite which is then cropped with clip:

#second {
  position: relative;
  padding-left: 20px;
  background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '<img alt="" src="sprite.png">'+this.innerHTML);
}

#second:before,
#second img {
  content: url(sprite.png);
  position: absolute;
  top: 3px;
  clip: rect(0 30px 15px 15px);
  left: -15px; /* to offset the clip value */
  _left: -35px; /* some massaging for IE 6 */
}

In case you wonder why I use position: absolute in the above rule, it is because the clip property only applies to absolutely positioned elements.

The New Technique: How Does It Work?

• Instead of styling the pseudo-element with a background, we use it to insert an image (via content).
• Using the clip property, we crop this image to only display the part we want to show. It means that there is no need to add empty space in the image to avoid other parts to show as well (usually used as background image of larger elements).
• We offset clip values by using the left and/or top properties.

With a non-cropping technique, images in sprites would have to start from the right hand side or left hand side to accommodate RTL/LTR contexts (background-position: [left]|[right] [vertical value]). Another limitation is creating sprites with images showing next to each other (because other images could be displayed as well). But when cropping sprites, these issues are not in play, so all images can be tucked together.

For an example, see figure below:

Advantages of this method over existing techniques

Styled to print
Unlike background images, these images are printed with the document (they are sent to the printer).

Styled to be accessible
Unlike background images, these images will not disappear in MS Windows’ high contrast mode or with high-contrast styles sheets.

Styled to work in IE lt 8
This method works in Internet Explorer 6 and 7 as well.

Note that data URI scheme could be used to avoid the HTTP request. IE6/7 do not support data URI scheme, but we can use MHTML for IE6/7 to make IE7 and older browsers understand it as well.

Styling links with pseudo-elements

Nicolas Gallager shows plenty of cool stuff one can do with pseudo-elements. The only thing I’d add here is the use of ::after to style links à la "read more" and the like, for example:

Read more

CSS:

.more,
.more:after {
  white-space: nowrap;
  content: " BB"; /* » */
  background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = this.innerHTML+' »');
}

A word about accessibility

You should assume that generated content is read by screen-readers, and since there is no mechanism to offer alternative text for images plugged via the content property, we should make sure those images are purely decorative because screen-reader users would not have access to that information.

Further reading

You might want to take a look at the following related resources:

• CSS3 module: Lists – The ::marker pseudo-element
• Generated content, automatic numbering, and lists
• The clip property
• Colour Contrast and CSS Sprite Maps
• High Contrast Proof CSS Sprites

Credits: Icons by FatCow Web Hosting [CC-BY-3.0-us], via Wikimedia Commons

© Thierry Koblentz for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: CSS, elements, lists, pseudo, sprites

Smashing Magazine Feed

Only 9.99 after US mail-in rebate. See terms.

Own a previous version of Adobe Photoshop Elements Plus?

Adobe Photoshop Elements 8 Plus
Get all the benefits of the award-winning Adobe? Photoshop? Elements software ? and much more. Not only does Photoshop Elements 8 Plus* give you a complete solution for organizing, editing, creating, and sharing your digital photos, but it also helps you do more with your photos:

• Protect your precious memories with 20GB of online storage ? enough for up to 15,000 photos or four hours of DVD-quality video.?
• Learn new tricks with ongoing delivery of easy-to-use tutorials.
• Keep the creative sparks flying with ongoing delivery of seasonal artwork, templates, and Online Albums.

When you buy Photoshop Elements 8 Plus (US9 value) you save vs. purchasing the software and Plus separately.

List Price: 139.99
Price: 139.99

Free Web Design Tutorials at Adobe-Masters.com
Welcome to Adobe-Masters.com, a website for free tips and tutorials about web design and programming. Visit Adobe-Masters.com for…

Photoshop CS4 for Photographers
Photoshop CS4 for Photographers is an essential course for any digital photographer who wants to master the software’s vast array …

Learn Adobe Photoshop CS4 Video Training Tutorials
In Learn Adobe Photoshop CS4, you’ll learn everything from the basics to the most advanced features of this unrivaled photo and im…

• Includes computer based training for Adobe Photo Elements 8
• Over 50 high-definition video tutorials, 6 full hours of training
• Compatible with both Windows (PC) and Mac computers
• High resolution training movies for picture-perfect viewing
• Pause, rewind and repeat as often as needed

Photoshop Elements 8 is a comprehensive image organization and photo enhancement application with editing tools that rival the full product, Photoshop. In Learn Adobe Photoshop Elements 8, your trainer will give you step-by-step instructions on everything on the full range of features from importing to managing, editing, sharing and storing photos.

Each Simon Sez IT DVD offers hours of expert quality training tutorials for every level of computer experience. Each training tutorial is recorded

List Price: $ 29.95

Price: $ 19.97

A+++! Learn Adobe PHOTOSHOP Training Tutorial for CS5 CS4 CS3 Dummies

US $17.99 (0 Bid) End Date: Wednesday Feb-08-2012 4:50:35 PST Buy It Now for only: US $24.94 Bid now | Buy it now | Add to watch list

Adobe Photoshop CS5 Video Tutorial

US $24.00 (0 Bid) End Date: Wednesday Feb-08-2012 8:30:14 PST Buy It Now for only: US $27.00 Bid now | Buy it now | Add to watch list

Related Adobe Photoshop Tutorials Products

Related Blogs

• Cheap Type To Learn 3
• How to Disable and Remove Shortlink Link Rel Hook in WordPress …
• AMERICAN BANG ANNOUCE NEW REL. DATE :: Afresh Entertainment …
• Karoshi Ethos » Smarty base href Modifier
• Photoshop Tutorials: 60+ Hot New Tips | designrfix.com
• Nature's Plus – Red Yeast Rice Extended Rel, 600 mg, 60 tablets …
• Weight Loss Diet Learn To Control Hunger | Health For Us All
• Typekit Teams Up With Adobe to Offer More Web Fonts | Webmonkey …
• 40 Best Resources for Get Photoshop Tutorials Updates | Tutorial …
• NoFollow Importance | The IT Chronicle
• <a href="http://www.thebaseballopinion.com/"><img src="http://www …
• Matt Cutts: NOFOLLOW Tags for YouTube and Internal Pages – SMX …
• Where To Get That That Bag: style file: daily fashion, party, and …
• Rocker Style Two Ways, Hot Teddies, And More…: style file: daily …
• Heel-Less Shoes: A Brief History: style file: daily fashion, party …
• Jewelry Fit For The Stage—And Elsewhere: style file: daily fashion …
• The Weather (And Fashion) Report From Copenhagen: style file …
• SiteProNews: Webmaster News & Resources » Blog Archive » NoFollow …
• paris-hotelfrance.com » Blog Archive » Flickr adds nofollow tags …
• The need to learn a language | Free Online Learning

Photoshop Tutorial CS3 Step-by-Step Video CD. FREE S/H

US $39.99 End Date: Monday Feb-06-2012 15:45:03 PST Buy It Now for only: US $39.99 Buy it now | Add to watch list

UPGRADED! DIGITAL BACKGROUNDS PHOTOSHOP TEMPLATES PHOTO BACKDROPS TUTORIALS MORE

US $89.90 (0 Bid) End Date: Monday Feb-06-2012 17:59:28 PST Bid now | Add to watch list

Photoshop.CS5.Essential.Training Tutorial -PC-DVD

US $16.99 End Date: Monday Feb-06-2012 18:37:11 PST Buy It Now for only: US $16.99 Buy it now | Add to watch list

Related Blogs

Only 9.99 after US mail-in rebate. See terms.

Own a previous version of Adobe Photoshop Elements Plus?

Adobe Photoshop Elements 8 Plus
Get all the benefits of the award-winning Adobe® Photoshop® Elements software — and much more. Not only does Photoshop Elements 8 Plus* give you a complete solution for organizing, editing, creating, and sharing your digital photos, but it also helps you do more with your photos:

• Protect your precious memories with 20GB of online storage — enough for up to 15,000 photos or four hours of DVD-quality video.†
• Learn new tricks with ongoing delivery of easy-to-use tutorials.
• Keep the creative sparks flying with ongoing delivery of seasonal artwork, templates, and Online Albums.

When you buy Photoshop Elements 8 Plus (US9 value) you save vs. purchasing the software and Plus separately.
List Price: 139.99
Price: 139.99

Related Blogs

• Awesome Platforms for Under $50, Plus Free Shipping at Zappos …
• (09/11) Defining Web Safe Font Family – UCLA Extension
• How To Add NoFollow To Intense Debate Comments
• Google Acquisition: Fast Facts About ITA Software; System Can …
• Hulu Plus Streams HD to TV, iPhone, iPad, iPod Touch, Xbox 360 and …
• Free Online Resources For Photoshop Tutorials
• How To: Creating Custom Google Translate Tools » Istanto Blogs
• RNRL Rel Power Merger News | RNRL, Rel Power Share Swap Deal – IndiFun
• <a rel="nofollow" target="_blank"… | Freebies | Digital Scrapbooking
• Watch the kardashians in beach bunny bikinis photoshop disaster …
• Nofollow Internal Links
• Matt Cutts on Adding rel=”nofollow” to internal links | New …
• Photoshop Actions For Photography | nenuno creative
• eBay Selling Begins with Auction Software | Car Auctions in …
• Online Internet Websites Market Dressy Sexy Womens Plus Size New …
• #Firefox 4 Beta 1 Silently Rel… » @arkarthick's TwitLog
• Ad me Up before you gogo » Blog Archive » HTML Font Tips (Michael …
• TiVo Premiere To Receive Software Update
• WATCH Paraguay vs Japan LIVE ONLINE STREAM in FIFA world cup 2010 …
• Forex Software System Trading | Win My Ex Back