Advertisements are everywhere. Consumers have a need and advertisements direct the consumer to the company that has a solution for their need. For years, we have tried in vain to escape advertisements, but aggressive advertisement companies have stepped up their creativity. These days, instead of relying on the simple goodness of lemonade and children’s laughter, ads have taken a decidedly more provocative turn. Gone are the nostalgic days of skipping through wheat fields. These days, ads venture on the irreverent. They cater to your physical senses and bend your mind to what is possible. Here are some of the most insanely good advertisements of recent memory, broken down into ambient, billboards, commercials and print.

Ambient

1. Skin Cancer Towel

2. WINZIP Compressed House

3. WPPED Cream Elevator Award

4. Neglected/ Invisible Children

5. McDonald’s Pole

6. Piano Stairs

7. Human Meat

8. Life Is Too Short for the Wrong Job

9. Kleenex Soap Dispenser

10. Elm Grove Police Department: Slower is Better

11. Unicef Land Mine

12. 2012. We Were Warned

13. Nikon D700: Papparazzi

14. Pantene Anti-Breakage Shampoo: Rapunzel

15. Swiss Skydive Elevator

Billboards

1. Panasonic nose trimmer: Fatty

2. Nestle Billboard

3. Sign from God

4. Formula Toothcare Bite

5. Imodium AD Toliet Tissue

6. Allstate Auto Insurance

7. Zimbabwean Money Billboard

8. iPod and iTunes

9. Powerhouse Gym

10. Get Organized with Peter Walsh

Print

1. Findus FraichíFrites: Granny Fries without the Granny

2. International Vegetarian Union: Vegetables Are All Your Body Needs

3. Bose Noise Reduction Headphones

4. Clorets: Fishy Breath

5. Gun Central Alliance, South Africa

6. The Joy of Pepsi

7. Utopolis: Reality Sucks

8. Fortis Bank: Plastic Surgery Loans

9. Target Dri Bots Nappies: No One Likes a Bed Wetter

10. McDonald’s Baby Ronald

Commercials

1. Honda Cogs

2. Adidas/ FIFA Women’s World Cup 2003

3. Yellow Pages

4. Jack in the Box/ Meaty Cheesy Boys

5. BMW/ Theo Jensen

6. Apple Macintosh/ 1984

7. Dove/ Evolution

8. Heineken

9. Traveler’s Insurance/ Prized Posession

10. Vizzavi/ Pixar

Ah, the age old rivalries: Coke vs. Pepsi, Apple vs. Microsoft, WordPress.Org vs. WordPress.Com. If you’re new to the world of WordPress, you may be confused about the two versions of WordPress.

If you’re anything like me, you arrived at WordPress.com ready to set up your blog, and ended up confused. You’d heard so much about WordPress’ customization and flexibility, but WordPress.com seemed rather rigid. Then you heard there’s another version of WordPress, one that you can download, and now you’re even more confused.

Why are there two versions and which one do you need? Let’s look at the different versions of WordPress and why to choose one or the other.

Meet WordPress.Com

Although both versions of WordPress.com are free to use, WordPress.com is the hosted version. This means that there’s no need to secure a web host or purchase a domain name. All you need to do is sign up for a WordPress.com account, choose a name for your blog, and WordPress.com does the rest. Within about five minutes, you’ll be up and running with an established WordPress blog.

With WordPress.com, you will receive 3 GB of space to media files for your blog.

Why Choose WordPress.Com?

WordPress.com is get for the beginner. If you’re new to blogging, WordPress.com offers a great entry point. You’ll be able to create a professional looking blog without being a web designer. You can blog, build up a community of followers, and engage them with your WordPress.Com blog.

WordPress.Com Drawbacks

There’s no risk in trying it out because it’s free. However, there’s always a catch to free and, in this case, free means ad-supported. But not your ads. The basic version of WordPress.com does not allow you to sell your own ad space on your blog. You can, however, apply to WordAds. This allows WordPress to place ads on your site and share the ad revenue with you. There’s a lot of hoops to jump through to be accepted into the WordAds program, though.

Another drawback to WordPress.com is the lack of customization. You’re tethered to the meager options they present you for themes or functionality. Compared to WordPress.org, WordPress.com is toothless. You can only choose from a small pool of themes (website designs), and you have no way to add plugins or widgets to improve your site’s look or user experience.

Meet WordPress.Org

WordPress.Org is like WordPress.Com’s older sibling– more erudite, more sophisticated, simply more. WordPress.org is the self-hosted version of the same software, which means that you need to download the software and host your blog yourself. Although you can technically host your blog from your own computer, most choose to rent server space from a web host and host their blog from the web host’s computer, or server. You’ll also need to secure a domain name, such as www.yoursite.com. You can receive hosting for $3 to $15 dollars per month, and a domain name for around $10 per year.

Why Choose WordPress.Org?

WordPress.Org is infinitely more customizable than WordPress.Com. There’s an ever expanding library of WordPress themes, and there’s just as many widgets or plugins to improve how your site functions.

Another benefit to WordPress.Org is that you own your site. WordPress cannot arbitrarily take down your site one day, because it’s not hosted on their site. Owning your site means also that you can monetize it with ads– your own ads– and there’s no need to split revenue with WordPress.

WordPress.Org Drawbacks

The biggest drawback to WordPress.Org is its overwhelming flexibility. It’s so robust that it can take a while to learn it all. A lot of beginners especially feel frustrated with the learning curve involved in a self-hosted WordPress site. Installed unsupported themes can be a nightmare for a newbie. It can feel like getting thrown into the deep end.

Which Is Better?

The answer to this question is totally subjective and depends on your needs. If you only need your WordPress site for light blogging, and not much else, I’d suggest a WordPress.com site. On the other hand, if you need to create a stronger business presence, prefer increased design flexibility and user experience, or simply want more autonomy, go for WordPress.org. It may be more to learn, but that’s what we’re here for. Let us help you learn WordPress for free here on Web Design Ledger.

Do you have a WordPress topic you’d like for us to discuss? Let us know in the comments below.

Have you ever come across a landing page that wouldn’t let you leave? Not because of engaging content, but because it physically stopped you from closing the window. That’s one way to capture attention, but definitely not the best way. And that’s not the type of landing page we’re discussing here. Instead of relying on scammy pop-up windows and cheap gimmicks, you can create beautiful landing pages that convert visitors into followers or customers.

So, be honest– when you first read “landing page,” what came to mind?

A lot of us associate landing pages with affiliate marketing. We’ve all landed on a questionable marketing page. The ones that autoplay whiteboard explainer videos and wear you down with never ending, repetitive content.

Or maybe you associate landing pages with startups. It’s true that many startups rely on that faithful “coming soon” page to generate interest and collect emails for future beta launches.

But, even if you’re not an affiliate marketer or a startup, you can still use landing pages. You may want to advertise your design services through Google Adwords, and send potential clients to a distraction-free sales page. You may have a client who needs a landing page and doesn’t even know it. With these skills that you’re about to learn, you can upsell landing pages to your client and make more money.

Learning how to design a killer landing page will add value to your design offerings. Ready to give it a shot? Let’s start with the basics.

What is a Landing Page?

Technically, a landing page is any page where a visitor lands. But, this article refers to a specialized landing page, where you guide visitors to do a specific action. That action could be to sign up for your newsletter, buy your ebook, or hire you as a designer.

Unlike the rest of your website, a landing page operates like an island. It’s not connected to the rest of your website and it only has one focus: convince the visitor to do the one thing you want them to do.

On a regular website, you welcome visitors to roam wherever they want– about, contact, blog, etc. On a landing page, there is no where to go– either answer your call-to-action or quit.

Landing pages work much better when they’re straight-forward.

Why Do You Need a Landing Page?

The only purpose of a landing page is to sell. Either you’re selling your design services or you’re selling your information for their email address. Your information comes in the form of newsletters, downloadable books, design freebies, pay-what-you-can fonts, courses, etc. As you can see, it doesn’t always include a monetary transaction.

No matter how you use a landing page, the goal is to convert visitors into clients or community.

Every designer can benefit from a landing page. Why? Because a lot of designers suffer from the “this is just a hobby, but it would be cool if you paid me” disease. Some designers are also afraid of talking money or overcharging.

If this sounds like you, let your landing page do the talking for you. On a landing page, you can share your rate and talk about all of the reasons why you’re an awesome designer. And you can do it without coming off as conceited, because it’s expected in a landing page.

You can also suggest that clients include a landing page in their design package to generate more leads. Or maybe your client has come to you and asked for a landing page. Well, buddy, you’re in the right place. Let’s get started and learn some essential elements of a landing page.

Navigation

Say it with me: There is no navigation on a successful landing page.

Why? Because you don’t want visitors distracted by all the shiny options on your menu. Instead, you want them focused on one thing– your call-to-action.

If you provide your full menu on a landing page, a visitor will be tempted to read more about you on your About page, or look through your portfolio, or check out your blog. Before long, they’re on a rabbit trail and off of your website and onto somewhere else. They’ve completely forgotten about your offer.

Remove all distractions. Unless you’re also including a video, the only clickable option on your landing page should be your call-to-action.

2. Layout

Although there’s no set rule when it comes to layout, here’s a basic guide:

(Pardon the stock images. Only used for illustrative purposes.)

You greet the visitor with a powerful background image that conveys the mood of your offering. If you’re asking for donations, show an image of the kids who’ll be receiving a donation. If you’re selling a software or application, show a video still of your software at work.

Next, you position your unique selling proposition next to the image. Use bullet points to capitalize on the visitor’s need to consume information quickly.

Below your proposition, include a descriptive call-to-action. Make it obvious and unavoidable.

All of this information should be above the fold. Visitors shouldn’t need to scroll down to see your call to action. A recent study showed that visitors spend 80% of their time above the fold and only 20% below the fold.

That’s not to say you shouldn’t go below the fold. Many landing pages work better in long form, where you can explain the benefits of the product or service in detail. If you choose to do this, remember to add you call-to-action button on each “screen,” so that it’s always accessible as the user scrolls down the page.

3. A Color Story

Colors affect mood. Google knows this, that’s why they tested 41 shades of blue to see which one resonated most with their users. Coca Cola, Pizza Hut, Frito Lay, McDonald’s, and Nabisco know this, that’s why they use red and yellow to stimulate hunger and excitement.

So, let’s do an experiment. What do you feel when you see these colors:

If science is to be trusted, this is what you should feel:

Applying this to your landing page, red is a surefire way to grab attention and generate excitement. Blue is good for communicating sincerity. These two are the best color choices for a call-to-action button.

When it comes to the background color, it’s hard to go wrong with the authority of gray or the clean simplicity of white.

Avoid using too many colors on your landing page. Choose two or three harmonious colors to convey your message.

4. Images

Everyone loves a pretty picture. Even better? The brain processes images faster than text.

Use an image that captures that mood of your product or service. This is where you can really inject your personality.

We all know how difficult it is to convey tone through text. That’s why you should text needs imagery and a color story. I may not understand, or believe, that your product is geared toward business, but when you show me images of business people using your product, it clicks.

But, a very huge warning– please don’t do this:

There’s nothing more soul crushing than seeing a generic stock image of some guy who doesn’t use your product, doesn’t know about your product, doesn’t know that you exist, and probably doesn’t even exist himself.

Instead, go for authentic pictures of people who actually use your product. It doesn’t have to be a professional photograph, but it does need to be a true representation.

Why? Because you’re building trust with your audience. You want them to have confidence in you– and every element on your page needs to support that.

I do support stock images in some cases, but never on a landing page where you need to show realness.

If you don’t want to use a photograph, use an illustration, or a mock-up (but be careful of entering into the overly generic category).

5. Video

Video is a popular choice for landing pages, and there’s a reason for that. Using videos on landing pages can increase conversion by 86%. Choose this option if your product or service is complicated and conversion depends on the customer fully understanding the product.

Keep your video short, sweet, and to the point. Your video shouldn’t explain how to use it, but focus on how easy it is to use.

Visitors always look at your landing page from a “what’s in it for me” perspective. Every single word in text or video should answer that question over and over again.

6. Copy

Not sure what the difference is between copy and content? Content is meant to inform. Copy is meant to sell.

On your landing page, use copy.

I won’t lie to you and say that writing copy is easy, because it’s not. Effective copy pushes people into pushing your call-to-action. In order to trigger that, you must understand emotions and why people are interested in your services to begin with.

For example, why would a person want to buy your book, or retain your services? (Hint: it’s not about you, it’s about them.)

The short answer is that the potential customer wants to improve their knowledge or their website. Your copy should answer that deep quest, not drone on and on about how great your services are. Only indirectly can you do that.

Directly, you must focus on the clients needs and why they should care.

7. Call to Action

The call-to-action is the most important element on your landing page. It tells the visitor what they should do to get whatever it is that you’re offering.

Don’t settle for those pre-made “submit” buttons. No one wants to submit. That’s a horrible word!

Instead, use words that describe what is happening or will happen. Here’s some examples:

Join our community
I want my freebie
Get results now
Hire me
Thank you for your donation
Give me my free ebook
Download yours right now
I want a better website
I love discounts

The list goes on and on. The point here is to craft a call-to-action that reflects the tone of your landing page. It should be personable, and it can be fun or serious, depending on the topic.

8. Forms

Forms should be simple. In fact, I’m a big proponent of the one field form– email address only. If you ask for date of birth, daytime phone number, mailing address, and blood type, you’re turning away a lot of folks who would’ve easily given you their email address.

People do not want to give away all of that information to you when they don’t know if they can trust you. Respect that.

You can always ask for more information once you establish a relationship.

9. Social Proof

People like to know they’re not alone. A landing page is a great place to add testimonials or other forms of social proof.

Use names, photos, websites, Twitter handles along side the testimonials. Having those references validate the testimonials.

Another way to add social proof is by adding numbers of subscribers to your call-to-action. For example:

Join 15,702 others who’ve signed up for the newsletter!

It may seem simple, but the little things can positively persuade conversion.

10. Responsive Design

Your landing page must be responsive. Over 80% of Internet traffic comes from mobile devices. If your landing page looks skewed on mobile browsers, all of your hard work will be for nothing.

Make sure that your landing page can respond to every viewport.

Wrapping It Up

Hopefully, this primer on landing pages has inspired you to go out and create your own. There’s no time like the present! Have fun creating a landing page, and when you do, link to it in the comments so that we can check it out.

As web designers, are we diametrically opposed to search engine optimization? We know that, at its center, web design is about elevating bland information on a screen into something aesthetically delightful and intuitively recognizable. It’s also about communicating an idea with other humans. Cave men had cave paintings, Ancient Egyptians had hieroglyphs, modern man has web design. Yes, it’s just that important.

So, what happens when the message you’re trying to communicate to other humans must first pass through the unrelenting eye of an emotionally crippled robot? That robot cannot compute the value of aesthetics. On the contrary, it can only operate off of its limited algorithm.

This is precisely why many designers have given up trying to please the robot called SEO.

No matter what Hollywood tells us, robots aren’t the enemy. Just like us, robots are on a mission to contribute value to web users.

What is SEO?

SEO stands for Search Engine Optimization. It’s the strategy of developing and improving your website so that it ranks highly on search engine result pages, preferably on the first page of results. We know that at least 75% of searchers never scroll past page 1 on Google. This means that we must make it to the first page in order to be considered by the vast majority of searchers.

Why is SEO Important to Web Designers?

The quick answer? Because it’s important to your clients.
The longer answer? According to this research, over 571 websites are created every second. Every second. With all of those websites, your own website has the high probability of being lost forever in the abyss known as “Beyond Page 1 of Google”

Top 9 Best Practices

Let’s take a look at the top 9 best SEO practices for web designers.

1. Site Structure

When it comes to SEO, the structure of your website is one of the most important factors. Site structure is all about how your web pages link together. Search engine crawlers judge your site’s value based on the way it’s set up. File hierarchy and site maps play crucial roles in whether or not you get a high ranking page.

If you want to be found by the majority of visitors searching for your associated keyword, nothing will get you there and keep you there faster than a logical layout that’s easy to crawl. Remember, if the robots are happy, everyone’s happy.

As a basic practice, don’t allow radical, rebel, isolated pages on your site with no links in or out. As a healthy website, all of your pages should be connected and functional. It should also flow logically and efficiently.

2. Easy Navigation

Along with logical flow, navigation must be a top priority for any web designer who’s interested in search engine optimization.

For navigation, shallow is better. With a shallow architecture, users are able to access any page in as few links as possible. This also refers back to site architecture.

There’s good news for JavaScript aficionados: Googlebot can now process JavaScript. However, that’s not an invitation to go crazy with JavaScript menus, because the crawlers are still very limited, and may give up when they encounter complicated language.

When it comes to navigation, don’t try to reinvent the wheel. Make it simple, make it short (eight options or less), and make it usable.

3. Meta Description

Even if you’re unfamiliar with the term, you’re definitely aware of what it is. A meta description is the little snippet on the search page that provides an overview for what your page is about. Each page on your website will have a meta description. These descriptions are 160 characters or less.

The meta description is your perfect opportunity to entice visitors to click your link. It’s also a way to get noticed for your keyword, because Google scans and highlights user-searched keywords in your meta description.

Keep in mind that it’s not necessary to write a meta description for each page on your site — just the most important ones. Make sure that you don’t duplicate your meta descriptions for multiple pages. If you haven’t written your own meta description, Google writes one for you.

With Google’s recent announcement (https://plus.google.com/113006028898915385825/posts/PDkPdPtjL6j) of doing away with Authorship pictures, the meta description is more important than ever.

4. Content

I cannot bear to choke out that tired phrase about content being royalty, but we all know content is increasing in importance. Gone are the days of content stuffing and invisible text. These days, robots are smart enough to know what sounds right.

Search engines reward longer posts. If you have a blog (which I strongly recommend), it’s important to take the time to craft content that will bring value to your site. If you’re more of a designer than a writer, hire someone who can help you.

5. Optimized Images

Ever come across DCIM34292.jpg? Yeah, me too. When you don’t take the time to name your images, you’re losing valuable SEO. Think of how great it would be to rename that same image in accordance with what it is — for example smithers-web-design-mock-up.jpg. Not only are you clearly explaining what the image shows, you’re also maximizing your keywords.

Another important way to optimize your images is by including Alt Tags. These tags show up on the browser when an image can’t load. It can also appear when you hover over the image.

6. Optimized URL

Speaking of hyphens, make sure that you’re optimizing your URLs with hyphenated keywords. If your blog post is about white hat SEO, your URL should be www.yoursite.com/white-hat-seo.

Keep in mind what your target keywords are, and use that in the title of your blog post, as well as in your blog post URL. It’s another way to optimize your site for search engines.

Also, avoid joining all the words together. And, avoid underscores (_). Instead, separate the words with hyphens (-).

7. Absolute URLs for Internal Linking

This practice is simple but powerful. There are two types of links:

• Absolute, ex. <a href=”www.yoursite.com”>
• Relative, ex. <a href=”/home.html”>

If you’re using relative linking, consider this: absolute links cut down on confusion and reduces server response time.

8. Site Speed

Research shows that 40% of visitors will abandon a website that takes 3 seconds to load. That’s the time it took for you to read this sentence. I know that you want to impress users with your too-cool-for-school designs, but if almost half of new visitors don’t stick around to see it, does it even matter?

Slow speed also negatively impacts SEO. Since 2010, Google has explicitly admitted that loading speed is one of the top ways they determine your page ranking. Although we’re not exactly privy on what search engine robots classify as fast and slow, we do know that it’s important to optimize your backend with a logical site structure.

How do you quickly find out what could be dragging your site down?

Google PageSpeed Insights

You’re welcome.

If you’ve never taken a stroll through PageSpeed Insights, it can humbling to see how many things you’ve done wrong. This tool can help you identify speedbumps, but it also gives you suggestions on how to fix your problem areas.

In considering site speed, definitely look at compressing your images, caching static content, and compacting JavaScript code. The bottom line? Make your backend as simple and compact as possible.

9. Rich Snippets

Similar to meta descriptions, rich snippets are shown in the search results page, and generally provide additional about that particular result.

When searching for “samsung top load washer,” you’ll notice that some sites provide ratings, amount of reviewers, price, and indicate if the item is in stock. This information is provided to the search engine and will increase your organic search traffic because it draws attention and instantly provides value to the person searching for that keyword.

In addition to these snippets, an exciting option is including product images or videos as part of your marketing on search engine result pages. Google is doing away with author avatars but (for now, at least) you can still harness visual marketing by spicing up your meta descriptions with rich snippets.

Learn more about rich snippets and structured data by visiting Google’s discussion about it.

A Word About Parallax and SEO

A topic about SEO and Web Design wouldn’t be complete without mentioning the hottest trend in the industry right now — parallax. Yes, we all love parallax scrolling, it’s so fun to have a one page website. There’s so many fantastic benefits about parallax. It’s pretty. It’s perfect for guiding visitors through a chronological series of information. It’s storytelling at it’s finest.

However, the dark side of parallax websites is keyword dilution. Because everything’s on one page, you don’t have the opportunity to polish a keyword for each individual topic. Instead it all gets meshed together and search bots don’t know what’s most important.

Additionally, inbound links can only link to your main URL. You don’t really get a lot of link juice when you only have a one page website.

Of course, I wouldn’t leave you without a solution to this dilemma. Instead of relying on parallax only for your website, make sure you have multiple internal pages for secondary information. Keep your homepage parallax, but use traditional linking for pages like your About, Contact, and Portfolio pages.

Which of these best practices are you hoping to implement today? Let me know in the comments section below.

Cards. You may be unfamiliar with the term, but you’re no doubt familiar with the concept. Cards are ubiquitous in web design these days, and the trend seems to be catching on. In fact, the revered web trinity of Google, Twitter, and Facebook are all doing it, so it must be worth at least a cursory look. But, because we don’t like to do shallow here, let’s dive straight in.

What are Cards?

Simply answered, cards are packages of interactive information, usually presented in the shape of a rectangle. Just like credit cards or baseball cards, web cards provide quick and related information in a condensed format.

The hallmark of all cards is interactivity. Not only do they provide information, but they politely demand engagement. Cards commonly include like buttons or ways to post to social media.

What Cards Are Not

Because card based design is in its infancy, there’s a lot of haze and confusion about what is and isn’t a card. Adding to the trail of uncertainty is the fact that not everyone calls it a card. A card is also known as a tile, a module, or a portrait, just to name a few.

Sometimes, it’s easier to define something but ruling out what it is not. A card isn’t strictly a design. You can’t simply have a page, draw boxes on it, and call each box a card. Well, you could, but it wouldn’t fit the definition posited in this article. Instead, a card must have functionality, be self-contained, and possibly flippable.

Now’s an appropriate time to bring Dr. Phil into this. He famously said that no matter how flat you make a pancake, it still has two sides. That’s the way to view cards– they should have two sides. It may not be that the cards have an animated flip, but rather each card presents an overview of information and gives you the option for further involvement. A card is not just one piece of information, always embedded is the invitation to do more.

Following this definition, a card can’t just be pretty; it must be useful.

Why Should You Use Cards?

Cards can be used in a variety of ways to satisfy specific functions. Here are the main reasons to introduce cards into your design:

Cards grab attention. They’re an exciting alternative to overly gratuitous text.

Cards are responsive. Designing for mobile browsers is a necessity, and cards are great for responsive design.

Cards are digestible. Because of their limited space, cards can’t really say much. But that’s a good thing! Readers who want more can click to get it.

Cards are shareable. Cards enable users to quickly and easily share bursts of content across social, mobile, and email platforms.

How Should You Use Cards?

The main point of cards is to interact with the user and prompt that user to action.

The type of action will vary, depending on the relationship you’d like to foster with your site visitors. To answer this question for your own site, put on your UI/UX hat, and think of how you’d like to interact with your visitors and how they’d like to interact with you.

Let’s take a look at 4 major players who use cards. There’s some powerful takeaways from each.

Facebook

The feed on Facebook is card-based. Each card features content, a way to like, share, and add comments. It also adds in social proof. You can see how many others liked, shared, or commented, which may influence your engagement. Quietly tucked out of the way is a drop menu that gives you the options to hide, unfollow, and report spam.

The Takeaway: Clearly, Facebook is prompting users to positively engage and to stay connected. They don’t want you to think about unfollowing or hiding certain cards from your feed.

You can use cards in much the same way–set cards up to encourage positive interaction.

Google Now

We already know that Google is a champion of card-based design. Many apps in its infrastructure already feature cards, such as Gmail Promotions and Google Glass. Google Now takes it one step further by being completely card-based. This offering is a virtual personal assistant who reminds you of friends’ birthdays, checks local traffic and weather, tells you what to watch on tv.

The Takeaway: Most cards require action, such as snooze, view email, wish happy birthday. Implementing a call-to-action at the bottom of your card can improve visitor engagement because you’re guiding them down a path of action.

Pinterest

You knew it was coming! Pinterest features one of the most popular card-based designs ever. It’s spurred quite a few imitators. Pinterest is a visual pinboard that allows users to pin, or add, images onto virtual boards. Hovering over a card gives users the option to pin it, send it, like it, or edit it (if it’s already saved to your pin board). Clicking the pin gives you more options, including the ability to visit the website of the image.

The Takeaway: Hover options are great way to solicit action without obscuring the card’s image.

Twitter

Twitter cards are tweets with rich media attached to them. The media could be a photo, a collection of four photos, a video, or an audio, just to name a few. These visual cards attract attention in an endless sea of texts and #hashtags.

The Takeaway: Front and center, Twitter encourages replies, retweets, and favoriting but, similar to Facebook, it obscures the negative actions, such as mute and block. Similarly, in your card design, focus primarily on what you’d like people to do most.

6 Great Examples of Card-Based Design

Now that you’ve seen how titans of industry use cards in their designs, it’s time to look at how everyday designers like me and you incorporate cards into their work.

Roman Shkolny’s imagined mail client interface uses cards to visually catalog emails. In this example, emails can be stacked into conversations. Hovers allow color tagging, reply, forward, delete, and more options.

Move Product by Barthelemy Chalvet features highly animated cards that can be selected, deleted, or saved for later viewing. Pop-up cards provide further prompts for the user.

Coke’s Ahh.com campaign features a bevy of card, some rectangular, but most square, some animated but most stationary. As you click each card, it flips over to provide two calls-to-action: add to playlist or play this now.

Popular designer hangout, Dribble, features a card-based design. The cards provide insight on how many viewers clicked a card, how many liked it, and how many comments are listed. When users hover over the card, a brief summary of the image is shows, as well as the upload date.

Silktricky is one of my favorite card-based designs because it’s just plain fun. Interacting with the cards and watching them respond to your selections makes the whole design feel intuitive.

Vox gets into the card game with a what they refer to as card stacks. Akin to slide-shows, card stacks provide a comprehensive amount of information about a particular subject. Each individual card is dedicated to answer one particular aspect of the subject. Cards are shareable and, because of their truncated size, are also easily consumable.

Conclusion

Cards are the perfect way to make your design glanceable, user-friendly, and responsive. They definitely deserve your consideration.

Now that you’ve been acquainted with card-based design, will you be implementing it into your design?

How does this website make you feel?

On the surface, it may seem that reading an article on a website is an emotionless experience, but science tells us that we use emotions to inform our understanding. So, yes, you are experiencing an emotion right now, but what could it be? Let’s come back to that question at the end of the article, with enhanced understanding.

What is Emotion?

In his book, Your Brain: The Missing Manual, Matthew MacDonald describes emotion as the “brain’s auto-programmed response to certain stimuli.” He carefully distinguishes it from feeling. Feelings are the way we interpret emotion. Whereas, emotion is immediate, unconscious, and visceral, feeling, on the other hand, is processed and conscious.

Why is Emotion Important In Design?

“I’ve learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel.”
-Maya Angelou

Emotion has the power to foster a lasting relationship with your visitors. If you can elicit an emotional response from a visitor, he’ll remember the experience long after everything else has faded.

Take a look at these websites:

Mahe

You start out with a perfectly lovely view of Paris–but nothing we’ve haven’t all seen before. What makes you sit up and take notice is the animation effect. It’s simply beautiful and surprising. Although you may not remember everything about this site, you’ll certainly remember the feeling of surprise as you scrolled down for the first time.

Iugo

No music, just flight. Who doesn’t love travelling through clouds without leaving your seat? This almost seamless video evokes excitement and anticipation–you’re heading somewhere, you just don’t know where. I can’t tell you how long I’ve stared at this video (it would be embarrassing). The takeaway is that this site stirred my emotions, held my attention, and left a lasting impression.

Before They

I dare you to pull up this website and not scroll through. Stunning, high-resolution images and intuitive design tell a story that appeals to your emotions.

A recent study on patients affected by hippocampus damage, such as Alzheimer’s disease, shows that emotions linger even after memories fade. Although a visitor may not remember everything you’ve said, they’ll remember the feeling. That feeling will lead them to return again and again.
The point of all design is to engage viewers. Engendering positive emotions can lead to longer visits, higher engagement, and more excitement about your product.

Important Components of Emotional Design

Many people rely on text to form emotional bonds with their visitors, but text alone is not enough to create emotion.

Even on a site like Zen Habits, which is famously minimalist, it’s emotional appeal does not derive solely from text. As a reader, you feel at peace, or zen, on the site because it was designed in such a way as to evoke that emotion within you. There’s no sidebar. There’s no images. But, there is white space, and lots of it. It feels pure, authentic, and truthful.

As you can tell in Leo Babuata’s design, font type, size, and spacing can make an impact on your emotions. On Zen Habits, the design is intentionally breathable and open. Nothing is cluttered. His typography supports the design but also tells the same story.

What does your font say?

Fonts can be friendly, serious, smart, and unfortunate. Fonts can be separated into lots of different categories, but for the purpose of this article, we’ll discuss the four major categories: Serif (has embellishments on the ends of letters); Sans Serif (without serifs, or embellishments on the ends of letters); Script; and Decorative.

Serif fonts convey traditionalism and respect. Think  Times New Roman:

Sans serif fonts are decidedly more modern. Think Calibri:

Script is sophisticated and can be conservative. Think Pacifico:

Decorative is whimsical and creative. Think Impact Label:

(images courtesy of Wikipedia Images and FontSquirrel)

Which emotion are you hoping to elicit in your design? If you need respect from your visitors, go with fonts like New Times Roman or Garamond. If you want to them to view you as creative, try a font that pushes the envelope, like New Facebook or Base 05.

Fonts should echo your design intention. Fonts, like love interests, should never be randomly chosen based on looks. They should be able to further your emotional story.

What about colors?

Color is, undoubtedly, one of the best solutions for introducing and increasing emotional response to your web design. Science has proven over and over again that humans equate colors to emotions. Why do you think that McDonald’s logo yellow and red? It elicits hunger and optimism.
When a user first visitors your website, they get an impression of who you are, and create a way in which to relate to you. Colors, fonts, and other visual design choices automatically set the scene–they’re like the clothes of a website.

For example, when you go to Wikipedia, you can see by the blue and gray color scheme that it’s dependable and reliable. You can surmise by the font choice and size that it’s serious and smart. And you can also tell by the images that it doesn’t pay for stock. I’m joking, sometimes Wikipedia has great images, but imagery is not the focus point of Wikipedia. The heart of Wikipedia, and all websites, is the content. I personally wouldn’t want to sit next to Wikipedia at a party. Imagine how boring that would be. But, Wikipedia would be a good friend to text. (More about that, later.)

Another example is Yelp, which uses blue and red primarily. What do those colors say in combination with what we understand about Yelp? It’s seeking to be trustworthy and to grab your attention. Red definitely pulls the eye to the key feature of Yelp–the reviews. Although red can make you hungrier when you’re thinking about food, it can also grab your attention even when you’re not hungry.

Some websites are green and blue. One example is TripAdvisor, which uses these colors to convey a sense of relaxation (you are going on vacation, after all), and trust (you’re reading actual reviews from other users).
Have you noticed the trend? Blue is often used in web design to communicate trust and dependability.

Let’s take a look at how colors engage our emotions:

• Yellow: Happy, Optimistic, Clarity,
• Orange: Friendly, but love it or hate it
• Red: Exciting, Youthful, Urgent, Attention Grabbing
• Purple: Creative, Imaginative, Uplifting
• Blue: Trustworthy, Dependable, Secure
• Green: Peaceful, Growth, Relaxing
• Gray: Balance, Neutral, Reliable, Intelligent
• Black: Luxurious, Powerful, Authoritative

A lot of us choose colors because they compliment each other, or just because they’re pretty, but if you choose the wrong color, it can send out a mixed emotional message to your visitor. For example, most online e-commerce businesses, like PayPal, Stripe, and Authorize.Net prominently use blue in their designs, and avoid the color red– which is exciting but not necessarily secure. On the flipside, there are financial sites like Bank of America that uses red prominently. Bank of America uses red exclusively to sell products, but it does balance the sense of urgency created by red with healthy doses of blue (security) and gray (reliability).

Referring back to your color choices, can you see how your design is exciting those emotions?

What about content?

“If your website were a person, who would it be? Is it serious, buttoned-up, all business, yet trustworthy, and capable? Is it a wisecracking buddy that makes even mundane tasks fun?”
-Aarron Walter, Designing for Emotion

Earlier, I said that text is not enough, but make no mistake that it’s certainly a huge part of the emotional experience. In his groundbreaking book, Designing for Emotion, Aarron Walter shares a powerful visualization. What type of person would your website be?

Understanding the personality of your website will help you decide how to interact with your visitors. As I mentioned earlier about meeting Wikipedia at a party, think about how visitors relate to you. Do they come to you for a laugh, or inspiration, or authority? Not just what you say but also how you say it impacts how others respond. You can, and must, elicit emotion through content.

What about images?

When it comes to evoking emotion, what better tool than an image? A picture is worth a thousand words, indeed. Think of images that deeply move you. It doesn’t have to be a serious tear-jerker. It could be something so silly it had you laughing for days.

Whatever the emotion you’re seeking to provoke, there’s an image that will go along with it.

Images are tethered to content. Images support content and sometimes revive interest in what you’re saying. In much the same way that we communicate with more than just our words, by using tone, facial expressions, and body language to express ourselves and elicit specific emotional responses, images do the same thing for text.

Successful design uses images to relate to the audience. Images can pull any emotion.
One trend that I’m particularly excited about is the use of fullscreen videos. These videos are a little slice of life, not long enough to demand full engagement, but long enough to convey a message with visitors. Consider these sites:

PayPal

I love the use of videos (different ones load each time you visit). It softly reinforces social proof–others are using PayPal and so should you. Along with the color scheme, it elicits trust and dependability.

Vimeo

Vimeo is YouTube’s artsy step-brother. It’s certainly developed a reputation for stunning videos, and its homepage definitely carries this message. You just want to be a part of the community because of the inspirational videos on the sign up page alone.

Gifn

You may not have heard of Gifn, but it showcases a beautiful and energetic design that makes you want to join the fun. Take a look at the series of videos on the homepage. How does it make you feel? Happy! It’s hard not to smile, especially since everyone’s smiling at you.

Let’s Recap

If web design is a person:

• Fonts & color are the clothes
• Content is the voice
• Images are the face

Now that you’re acquainted with basics of emotions and web design, how does this website make you feel? How does your own web design feel?

Remember how wearing a calculator watch back in the day made you feel like George Jetson or his boy Elroy? Technology has come a long way from spelling out naughty words (upside down) on your calculator. These days, you can make calls, record videos, check your health, and buy coffee from your smartwatch–and that’s just the beginning. With the advent of Google Glass, Android Wear, and the distant promise of Apple iWatch, the world is slowly getting comfortable with the idea of wearing technology, instead of holding it. This idea of wearing a computer will undoubtedly shift the way users interact with the internet and its design. Is your web design future proof?

What Exactly is Wearable Technology?

Wearable technology can be clothing or accessory items. Most wearable technology comes in the form of wrist wear or eyeglasses. It’s normally light-weight and unassuming. The most popular and accessible uses for wearable tech exist in the realm of fitness gadgets, such as Fitbit, and smartwatches, like Pebble. Google Glass has gotten a lot of attention but, at $1500 a pop, it’s cost prohibitive from most folks. That said, so was the iPod when it was first introduced. Eventually, a competitive marketplace will drive the price to a reasonable cost, and you’ll need to be ready when it happens.

Motorola’s Moto 360 uses Google’s Android Wear to create an interactive experience with your watch. Moto360.motorola.com

Why Should You, Web Designer, Care?

A lot of naysayers are quick to write off wearable technology as a fad, but a recent report from Pew Research Center Internet Project indicates that 83% of industry experts believe that wearable technology will see huge growth within the next 10 years. By 2025, we’ll be fully immersed in the Internet of Things (IoT). This means that users will be accessing websites from various platforms, not just desktops and mobile devices.

As technology expands and more users embrace wearables, more of your clients will want to their sites to be accessible. If you’re unprepared for such requests, clients will search elsewhere to fit their needs.

Although wearable technology is in its infancy now, it’s rapidly growing. Expect it to develop like a kid in puberty– overnight. All of the primitive functions of wearable tech are already in place– browsing, social media, instant messaging, camera, and video. As a web designer, your job will be getting rid of the pimples and awkwardness that comes along with pubescent technology. Like now, your future in wearable tech will consist of creating a beautiful and functional space that allows users to effectively access the information they care about.

Full-blown web design for wearable tech may be a ways off, but it’s not too early to start thinking about how this type of technology will inform your design decisions.

How Will Wearable Tech Impact Your Design?

There’s no doubt that wearable tech will impact your web design, the question is how. We can look at how the introduction of mobile technology, such as smart phones and tablets, challenged the web design community to create responsive language. In much that same way, the advent of wearable tech will cause designers to streamline and ruthlessly edit the superfluous.

Here’s 7 considerations for wearable tech web design:

1. Designs are responsive.

This cannot be emphasized enough. When I browse over mobile devices, I encounter a huge number of websites that aren’t optimized for mobile viewing. In 2014. According to a recent study performed by Restive Labs, only 3% of Fortune 1000 websites are responsive and fast. If they can’t get it right, you can imagine how most fair.

Currently, browser-capable wearable technology uses mobile viewports. Don’t wait to implement this meta tag into your web design.

2. Information is instant.

Wear techies (a term I made up, affectionately) want information immediately. Instant access is the whole point of wearing technology as opposed to putting it in your pocket. This means that your web design shouldn’t get in the way and slow the user’s access to information.

Why is the visitor on your website? Figure it out and plan your design around the answer. Once you get away from designing for design’s sake, and understand what’s most important to the visitor, you’ll be able to strip away elements or flaws in your design that slow down your site, or clutter the user’s path to information.

3. Interactivity is everything.

Wearable tech is a soft introduction into augmented reality. Take a look at the Innovega iOptik platform that will provide users with a “virtual canvas” through the combination of contact lenses and micro-projector eyeglasses.

Use a combination of contact lens and enhanced eyeglasses to augment reality. Innovega-inc.com

Voice navigation is another interactive element in wearable tech. If you don’t want to talk, you can just move your head, hand, or possibly only your finger to navigate.

Wearable tech allows users to get inside of technology in a way that’s never been done before.
What does that mean for web design?
For one thing, it means your web design can’t be static and resting on pretty. It should be dynamic with a clear understanding of who your visitors are and how best to meet their needs.

4. Design is minimalist.

Minimalism has been on trend for the last few years in web design, but expect it to go even further. Minimalist design is more appealing for the wearable platform because it doesn’t overwhelm. Too often, web designers over-stylize in an attempt to impress. The harder work is in creating a quiet design that lets the content take center state. Your ability to edit is in direct proportion to your maturity as a designer.

Think about how you’d like your website to be perceived on a wearable device. Screen space is limited.

5. Text is larger.

When will the small text finally die? I’m a big believer in 12 pt or higher, but no where is this more important than with wearable technology.

Let’s take a look at Google Glass. Although limited in scope and navigation, users can still access web pages. If your website hasn’t been optimized for mobile browsing (see #1), visitors may not be able to read the text on the screen. In Google Glass, the display is akin to looking a 25” TV from 8 feet away. Imagine trying to read tiny text on that TV. No bueno.

6. Pop-ups are ostracized.

I’m not a big fan of pop-ups, no matter how sleek. It may be controversial, but pop-ups have absolutely no place in wearable technology, at least not yet. Try closing the “x” of a pop-up window in the aforementioned Google Glass.

If you must include a pop-up window, be gracious enough to include a huge “close” button.

7. Web design is intuitive.

Answer this question: Why is someone accessing your site from wearable technology? Is it to stay informed, to be entertained, to get directions, to find a coupon? Whatever the need, your web design must understand and guide your visitor to their natural conclusion.

Intuitive design is more important than ever when it comes to wearable tech. Users won’t have the flexibility (or patience) to browse your website. Instead, your website must intuitively anticipate the user experience.

Meta SpaceGlasses give you Ironman precision with a 3D Stereoscopic Display. SpaceGlasses.com

In Conclusion

Wearable technology is just beginning to take off. Be prepared with future-proof web designs that respond to this exciting new medium.

What’s your favorite wearable technology?