Icons can be considered one of the universalities of web design; almost any website benefits from the addition of at least a few of them. So it’s tempting to assume that if you sprinkle in a handful of these little pictures, your job is done. But there’s a lot more to it than that: good icons should feel like they’re visually integrated into the group of images that they’re in, as well as into the site design as a whole. They need to have a conceptual clarity and purpose that goes beyond being mere eye candy. Any icon that doesn’t serve a stated purpose, or doesn’t convey the right concept in its imagery, is one that needs to be reconsidered.

Of course, there’s room for interpretation and generalization with any kind of imagery, but icons are not mere illustrations that are used purely to break up space and add interest: they’re visual metaphors that can invest meaning into a subject at a single glance; and as such, they’re a powerful tool for improving user experiences.

How Should You Use Icons?

Iconography can be a slippery subject, because it encompasses so many types of imagery, and can fulfill so many roles. Icons can be used for many purposes, but the two most common and important tend to be:

• Visual breaks in content: making it more appealing and readable. This application is often used in the body of the website, in lists (as seen above) or other text-heavy elements.

• Quick visual reference for a concept: This usage most often shows up in navigational elements (as seen above), and some—such as the magnifying glass icon that signifies a search—are so common that they don’t even need a text identifier.

It’s obvious that even just these two categories make for a myriad of ways and reasons to use icons, so you’re likely to see them in almost every element of web design: headers, footers, navigation bars, lists; practically any part of a design can be improved by the addition of well-chosen icons.

What Makes a Good Icon?

While it’s not difficult to see how icons are an essential component to almost any good website design, it can sometimes be hard to recognize when they’re not performing as well as they could be. Even a poorly-designed set of icons is usually preferable to a wall of text, but a beautiful set of meaningful icons, like the ones above, can do so much more.

Even though icon design is a complicated topic that changes with every new situation, there are still a few essential rules that apply to effective icon design across all applications: the two critical things to consider in any icon system are how to make icons both visually and conceptually effective.

How Do You Make Icons Visually Effective?

Icons do a better job of grouping related content and leading the eye to important information if they have consistent and considered relationships to the other icons in the set and to the site design around them.

Icon Sets Should Have Visual Unification

A group of icons that doesn’t have enough cohesion looks wrong, no matter how great they might be when considered individually. There are a lot of tricks that can create a sense of unity, including:

• Using the same color or color scheme, as seen above.

• Fitting all your icons into the same shape, as seen above.

• Styling your icons with or without lines or other border attributes, as seen above.

• Adding effects, such as gradients, transparencies, or drop shadows, as seen above.

To this end, it’s important to consider how you’ll adapt the style of your illustrations to fit the subjects. For example, you might want to represent your icons with a 3D effect, on an angle. But what if one of the icons in the example above needed to represent a gift card? An icon representing a card would almost certainly need to be two dimensional and so would ruin the effect that you’re going for.

The Larger the Set and Scope of Icons, the More Diversity They Should Have

Although icons within one set should have a close conformity, you can bend and even break the rules when it comes to large sets of images. This website, seen above, is an excellent example that deals with the same-dimensionality issue, as they decided to embrace the different dimensionalities of its icons. The differences aren’t jarring because the two types are separated, making them into related icon systems that work well together without looking exactly alike.

On top of these small changes, the site diverges even more in the other icons you encounter, with some that have larger and more intricate shapes, and others that replicate the 3D effect, but in an entirely different style. However, these all still work well together because they preserve a few common elements, and they’re presented in instances that are separated enough to not overwhelm the viewer.

Icons Should Harmonize With the Rest of Your Site Design

Of course, there is an endless number of methods you can use to make your icons work with your other design elements. But on a basic level, the two most effective ways to go about it are:

• Icons as a point of contrast against the rest of the site: This approach is particularly effective if the icons are navigational, like these social media links (seen above), because the contrast calls a lot of attention to them.

• Styling icons so they’re integrated with and similar to other design elements: This is a good option for images that are more about providing visual respite and clarity, and don’t need the extra emphasis that navigation elements might, as seen above.

How Do You Make Icons Conceptually Effective?

It’s important that icons play the right role in directing attention and adding to the aesthetic of a design, but it’s equally important that they are also logical and consistent in terms of the concepts that they communicate.

Icons Need to Be Easily Understood

On the one hand, imagery can be difficult because interpretations are never absolute. But on the other, they’re far more manageable than words, because if they’re clear enough they can transcend language. The simple directives in which web design abounds are the perfect vehicle for universal communication, as seen above.

But sometimes designers try to put more complicated concepts into iconography, and the effect is confusing rather than clarifying, as seen above. In these circumstances, it’s good to take a step back and really try to distill the content down to its basic essence. If you can’t, that means an icon isn’t the right solution for that content. One of the best resources for finding clever iconography that pushes the boundaries of pictorial communication is infographic design, where the goal is often to make an icon out of every piece of information possible.

As web design grows and matures exponentially, so does icon design. Concepts that were once impossible to depict through iconography are rapidly becoming standardized, and being added to the web designer’s communication tools. With this push towards universality, it’s a safe prediction that icons will become an even more important part of design than they are already. And keeping these essential methods of use in mind, you’ll be able to take them on with all the artistry and clarity that’s needed to create beautiful, functional, and effective designs for any project.

Colors, pictures, creativity; designers are quite obviously a group of people that tend to gravitate towards using the right sides of their brains… right? Or is this simply a stereotype that doesn’t necessarily ring true?

Is design exclusively artistic talent put to productive use or is it possible that the industry is equally full of analytical problem solvers? Let’s take a look at how designers think, whether you’re a right brainer or a left brainer, and how I’ve struggled through being a left brainer in an industry of right brainers.

Fact or Fiction?

As you no doubt have heard countless times, there’s an old half myth, half truth theory that a person can either be left or right brain dominant based on the characteristics of their personality.

Left brain dominant individuals, it is said, prefer analytical thought, logic and reasoning while the right brain folks are creative and focus on the finer things in life such as art and music.

source: jvleis

Often, the importance and literal nature of this theory is taken much too far by wannabe psychologists, which I am not. However, this concept of a person possessing a tendency to lean towards one of these two modes rings true for a great number of people, including myself, so we’ll run with it for this article.

Just know that the whole right/left brain thing is a useful construct for discussion, and is not necessarily backed scientifically (cognitive scientists say it’s bunk). So if you’re into neuroscience, forgive my indiscretions.

I’m Right-Brained, Right?

You don’t know me, so I’ll tell you about myself. I’m a designer, musician and photographer. A strong sense of aesthetics is one of the things that I consider a core element of my personality and character. It’s who I am.

Now, I ask you, am I a left brainer or right brainer? The answer here is an obvious one. We look up at the chart in the previous section and immediately assume that I’m a right-brained individual. All of the things that I love and pursue in my professional life are seated neatly into that category.

Left of Creative

You would think that, you lucky right-brained bastard. Unfortunately, and trust because me because I’ve struggled with this identity crisis for the better part of my life, it’s not true.

source: Richard Eriksson

To be honest, I’d love to be a right brainer. I’d kill for the chance to be one of those individuals who secrete artistic talent from some special, hidden Van Gogh gland. The truth is though, I’m simply not.

Designing With the Left Side of My Brain

So why in the world would I claim to be a left brainer when I’ve structured my life around right brain activities? Maybe I’m a poser, or maybe designers don’t fit into the little box that you try to keep them in.

I ❤ Problem Solving

At heart, I’m an analytical thinker. Problem solving, language, puzzles, logic; these are the things that really interest me. Beyond that, they’re the things that I’m actually good at.

Interestingly enough, these are the skills that I bring to a design project. Every design is a problem to be worked out, a puzzle to solve. Just read through my articles on this site and you can clearly see that this is how I think.

An analytical look at how to solve some common design problems.

I talk about design theory, I communicate simple and practical principles that you can use to improve your work, I analytically critique designs and suggest how to make them better. What I rarely or never do is start with a blank piece of paper and let you watch me create some amazing work of art right out of my head.

As much as I love it when people call me “creative” and as wrapped up I am in that as a part of what makes me who I am, I’m not sure that’s it’s an entirely true statement.

Layout, CSS, & Sass

This idea makes more and more sense when I think about the specific areas of design that tend to interest me. I love discussing page layout, mathematical grids and common design patterns. Sounds pretty left-brained doesn’t it?

One of my many, many articles focusing on layout and/or CSS.

Further, my favorite part of web design is CSS. I love the ridiculous nature of making pretty pictures through writing code. True right-brainers might shutter at the thought. Even better, I love using tools like Sass to turn CSS into a sort of faux programming language that’s even more mathematical and logical.

Photography Too

This same argument can be applied to all of my creative ventures. Take photography for example. For me, photography is all about tinkering with my camera. I love the challenge of juggling shutter speed, aperture and ISO to create the perfect exposure and using ideas like the rule of thirds to crop an image in a well-balanced manner.

Dirty, Ugly Jealousy

I’ve come to realize that this is the true nature of my love for creative ventures. Do I find identity and comfort in this realization? Sure. Now, do I envy and hate all you truly creative people? Absolutely.

I often feel like I’m a left-brained spy, hidden in an industry full of right brainers, hoping he doesn’t get found out. Some of you crack open Photoshop or pick up a pencil and absolutely amazing things fall out.

Guys like Fabio Sasso from Abduzeedo piss me off to no end with all of their talent and creativity. I see all you jerks on Dribbble who can sketch the craziest things and I curse your names, coveting your skills and shunning my own.

In reality, this is a classic “grass is always greener on the other side” scenario. I think (hope) my situation of being constantly jealous of the talent of my peers is pretty typical for all types of designers.

Which is Better?

So when it comes down to it, which mode of thinking is better for designers? If could choose to be left or right-brained, which would you be?

Here’s the catch: This is the wrong question. What you should be asking is, which are you? The truth is that the design industry needs both.

Some clients want you to think outside of the box. They want a truly creative, original product that catapults them to fame and fortune. Others, are simply looking for an attractive way to display some information. They don’t want or need someone who’s going to reinvent the wheel and attempt to launch some major paradigm shift. They just want a dang website.

Creativity can be chaos, analytical problem solving can be boring, it’s when they come together that great design truly takes place. The mixture of how these forces work together is different of each individual.

Your challenge then isn’t to attempt to be something that you’re not, but to identify how you work best and leverage those skills to be a successful designer.

So What?

Is this all a pointless intellectual exercise or is there a point here? Don’t worry, here’s where it gets practical and applicable.

Given the knowledge that I’m primarily a left-brained designer in my thoughts, actions and interests, I can construct a basic pattern or process that tends to lead to success (in itself a very left-brained thing to do). Here’s what I came up with:

Observe, Absorb, Remix. We left-brained designers constantly observe everything around us from a design perspective. What works, what doesn’t and why. We notice trends, follow what’s popular and think about how things are built (fonts, CSS effects, etc.).

All of this takes place, nearly without our intention. It just happens. We take it all in, absorb it and file it away deep in our brains under the “design inspiration” category. Then, when it comes time to design something, we pull from that file, remixing and reworking all of those ideas we’ve been absorbing to create something that’s original and useful.

The Other Side

Compare this with how right-brainers work. Right-brainers require less input per output (or perhaps their input is just more varied, it can be anything). They have this natural, innate ability to create something amazing and truly unique using only the tools available to them and the head on their shoulders.

source: Ian Norman

A sample right brainer process might be to shut out all distractions, silence their web connection, crank up some music and crack open an empty sketchbook. That’s not as concise as “Observe, Absorb and Remix” but by this point in an article my cleverness is waning, so cut me a break.

How Do You Work Best?

Right brainer, left brainer, it doesn’t matter. If you’re a designer, odds are you’ve struggled a time or two with the creative process. You get stuck, used up, the Van Gogh gland has shut down and you’re not sure how to get it working again.

In those instances, think about how it is that you work best. To do this, consider whether you’re the fantastically creative type of designer or the analytical problem solver, then approach your project with this information in mind, constructing a workflow that caters to your specific needs.

Now that I’ve got you thinking, leave a comment below and let us know which description fits you best. Are you a gifted problem solver or a creative genius? I want to know!

Awesome cover photo provided by Bigstock.

Diane L. Writes: I can’t help but feel jealous of other designers. I feel like they’re better designers, they have better clients, they’ll become famous and I’ll be a nobody forever. Is that wrong?

Yes, Diane, it’s wrong, but human. It’s not a feeling that is limited to just designers but it’s something you really need to overcome. Maybe some real truths about the design industry will help you see that jealousy is not only unwarranted but is getting in the way of your own success. Hmmmm, where do I start? Join us as we delve into another Design Dilemma, helping to answer your questions, queries and concerns about the murky world of design…

What is “Fame?”

I wrote two articles about dealing with this problem. One, entitled “Do You REALLY Want to be a Design Rock Star?” was a look at why designers crave recognition as part of their work in the industry and “Who Are You Trying to Impress?” which was a personal look at why I fell into the same trap and how I healed myself from such a time-wasting, psychological problem.

I highly suggest you read both as I’m told they have changed people’s lives and how they look at the design industry.

Just to outline some important points, to ease your mind before you find the time to read the articles, here’s why you may feel the way you do:

• Every human wants to be recognized as a part of society. We adore athletes, musicians and actors and wonder why, as those who create the posters, T-shirts and other materials, why we don’t share a certain amount of notoriety along with those “stars.” The simple answer is that while people remember the products we create, our names are not listed on them. Our names are not important… it’s just the objects we design that people respect and remember. It’s a quiet pride we must take in our work.
• I used the term “design rock star” in the first article to poke fun at the ridiculous label being given by someone tweeting speakers for an AIGA conference. Each tweet promoted another speaker. “Join design rock star, Joe Blow, at the AIG conference next week!” We’re not rock stars and will never be. Get used to it!
• If you ask the average person who Paul Rand was, they will answer he’s a politician. They don’t know about the great designer Paul Rand because while his designs were inspirational to future designers, it is designers who elevated his name in our industry and not general society. Sure, your work may be viewed as great by other designers but what does it mean in life? We design because we love creating. Is fame the reason we enter the field?

Time to Get Back to Earth!

As with you, and me, and every other designer, there is an ego we have that drives us to crave recognition from peers and that becomes a dangerous obsession. Here’s an excerpt from one of the articles:

• Think about how you run your day, as you would plan a design project. There’s no time to waste.
• How much time do you spend commenting on other designer’s work? How much time would that add if you used it for your own promotion?
• Do you blog about other designer’s work or your own? Shouldn’t your social media efforts be aimed at getting clients?
• Do you look at other’s designs and think, “I wish I had done that!” and feel jealous or do you take a lesson from the creative thought and apply it to your own work?
• Do you attend design events and skip business-networking events? How are you going to network with the RIGHT people?
• Can you not care what other designers think about your work?
• Can you be happy for what you have?

I’ve held some very high-profile positions in the design industry. I’m happy to say I had learned my lesson about false pride before gaining any of those positions.

A designer once told me, referring to my experience, that she couldn’t believe I was speaking to her like I was a friend. The fact is, we became good friends. My experience was more being in the right place at the right time. My friends lovingly call me the Forrest Gump of the design world. As I tell students who show the same starry-eyed admiration for my experience (which is not my actual design abilities), “you will have my experience as you grow, so don’t look at me with admiration. Look at me as your own future.”

In Conclusion

There is a peace you’ll find once you no longer care about fame and admiration. You will no longer care about other designers nor will you care what they think about you.

There are only two parties that should care about your abilities as a designer; your clients and you. If you can make that your primary concern, and use the time you would spend worrying about other designers and put it into improving your own business, you will start increasing your income and that sure as hell makes anybody feel better about themselves!

Send Us Your Dilemma!

Do you have a design dilemma? Speider Schneider will personally answer your questions — just send your dilemma to dilemma@designshack.net!

Speider has created designs for Disney/Pixar, Warner Bros., Harley-Davidson and Viacom among other notable companies and is a former member of the board for the Graphic Artists Guild and co-chair of the GAG Professional Practices Committee. He writes for global blogs on design ethics and business practices and has contributed to several books on the subject of business for designers.

Image © GL Stock Images

Every brand, from the smallest website or startup, to corporate giants such as Nike or McDonald’s, need a set of branding guidelines and rules to maintain their identity. This document, which can range from a couple of pages, to several hundred, is the thread that holds together what the public sees from a company.

A brand bible establishes the voice and personality of a company, as well as who the public will see, and it governs every aspect of communication from the company. The brand bible is the basis for all interactions on behalf of a company – personal communications, social media, advertising and design. While a brand bible focuses on many things, we are really going to look at how it affects design.

What Is a Brand Bible?

A brand bible or book is a document that establishes distinct guidelines on how all aspects of a company’s brand will be handled. It should establish rules for creating a unified and identifiable presence for your brand. This includes everything from the design of a logo and how it can be used, to letterhead, the look of a website, personal communications and how it all looks.

The brand bible is meant to help employees properly use and communicate the message of a brand. It outlines brand goals and the company philosophy. Further it answers a few key questions: What is the correct spelling and use of the brand (and afflicted) names? What images are associated with the brand and product lines? In what ways can/should the company logo be used? What are people allowed to say about the brand? What marketing tactics are preferred or encouraged versus what marketing tactics should not be used?

It also serves as a guide for designers. A good brand bible outlines all of the basic design tools that are needed to create and disseminate company communications – from allowable typefaces and styles, to a color palette, to image use, text and tone, and the emotion portrayed by the brand.

Logo Usage

Once you have the perfect logo, it is important to maintain the integrity of it across platforms. This includes how the logo is to be used, from placement to acceptable alterations.

Adobe’s 2010 Brand Guidelines do a great job of defining exactly how the logo can be used, outlining placement, size and surrounding white space. Remember, your logo is the simplest thing people have to identify your brand, make sure you maintain a consistent use of that image.

Fonts and Typography

There should be a defined style for every bit of type used for a brand, for both print and digital applications. Rules for how to use typography should be clear and distinct, from what typefaces are acceptable, how each is used, and guidelines for additional styling, size and use of color.

Select a few typefaces that will be used in design projects. This may include one set of rules for print projects and another for digital applications. But make sure the typefaces have some common links. For example, many web designers prefer sans serif typefaces for body text whereas you may prefer a serif style for print. Find a commonality between the two. Consider a headline or “big type” style that you can use for both types of design projects.

Most brands use one of two primary typefaces. The example above from the North Carolina State University Brand Book uses the Univers family, both regular and condensed styles. Then select a complimentary typeface and substitute typefaces. Ideally, the brand should include no more than five typefaces and their usage.

Colors

A defined color palette can be one of the most important aspects of the brand bible. Consider the Golden Arches and color the represent McDonald’s, for example. Would you as clearly recognize this company if the giant M was another color?

The brand bible should outline each color and how it should be used. This includes colors that appear only in a logo to colors that are used for backgrounds, text and other design elements. The numbers of colors in a palette should be kept to a minimum and can include fully saturated versions and tints.

Further the document should clearly define each color by name and color value for a variety of projects. Choose primary, secondary and alternate colors for the palette. Define each color with values for print (CMYK) and digital projects (RGB, HEX). Also note Pantone colors as such with their assigned values.

Images

Guidelines for images are about more than just whether you will rely on photography or illustrations or other types of graphics. The brand bible should detail how images will be gathered, edited and used.

Nike, for example, relies on large, tight, high-contrast images to draw you in. The I Love NY campaign above uses location-based images from photos that are restyled as drawings to capture attention and create a feel.

Image guidelines should also define when and how certain types of images are used. Will you use photography or illustrations or both? Is clip art use acceptable? How will images be edited? Will they be black and white or color? All of these questions should be answered in your image guidelines.

Text and Tone

Finally, you want to make sure the things you say fall in line with the brand image. This applies to everything from the headlines in an ad, to the tone of a press release, to the way blog posts are structured.

Outline the type of acceptable language that will be used. Is the context wordy, or simple and compact? Should the tone be formal, or more conversational? Who is the audience you plan to target? Write for them.

Easy.com defined its brand lingo in simple terms and used a style that mirrors the tone of actual communications. For the brand, simplicity is the key. Skype follows a similar philosophy, going as far to showcase words the company likes and does not like.

Using a consistent and distinct tone can help clients and customers identify with a brand, and creates an association with what the brand stands for. When creating guidelines for text and tone, think about words you want to be connected to – cool, trustworthy, hip, beautiful, efficient, top-notch. Use those as the outline for your rules.

Brand Bible Checklist

Here’s a list things your brand bible should include:

• Overview of brand, including history, vision and personality
• Logo specifications and examples of usage
• Typography palette
• Color palette
• Image use specifications, including photography style
• Letterhead and business card design
• Design layouts and grids for print and web-based projects
• Brochure guidelines
• Specifications for signage and outdoor advertising
• Writing style and voice
• Social media guidelines
• Visual examples to support each rule (provide examples of proper and improper use for clarity)

10 Brand Bibles for Inspiration

Look through some of these brand bibles – some current, some old – to help you get started building your own. It can be a tough project, but the end result is really worth it.

• Nike Football
• I Love NY
• Adobe
• Skype
• Easy.com
• Heineken
• Good Technology
• University of Cambridge
• Burma + Shave
• Intel

Conclusion

In the creation of your brand bible, think of how it will be used. This document is a reference material and guide for how the company should be portrayed to the public.

Include examples and specifics. Keep the guidelines direct and simple but also think about how restricting they can be. Guidelines that are too strict can limit creativity and new designs; guidelines that are too loose may result in multiple or disjointed brand identities.

Use your brand bible as starting point and establish a culture around it that allows designers room for creative thought while maintaining the aura of the brand in a variety of projects. Remember the ultimate goal of the book is to create a distinct and unified presence for your brand.

The jQuery developer community has to be one of the most generous and hardworking group of people on the web. They’re constantly churning out amazingly useful and completely free tools that they share with anyone and everyone who wants to use them.

The quantity and quality of free jQuery plugins simply never ceases to amaze me. I’ve been keeping a list of some great ones that I’ve found lately and I thought I’d share it with you. Here are 40 awesome and free jQuery plugins that just about every web developer should check out.

Scrolling

jQuery Waypoints

Waypoints allows you to easily trigger JavaScript events at specific scroll points. Ever wonder how people build those amazing scrolling effects? This could be your answer.

skrollr

Parallax scrolling for the masses. Skrollr helps you with all kinds of different scrolling effects including transforms, color shifts and more.

Charts, Animations & Tables

Handsontable

A minimalistic approach to an Excel-like table editor in HTML & jQuery. The result is quite impressive, you should definitely give it a shot if you’re looking to build an interactive spreadsheet.

jQuery Sparklines

jQuery Sparklines helps you build little inline charts that are supplied with information via HTML or JavaScript.

Teamwork Gantt

Build incredible Gantt charts with jQuery. Seriously impressive for a free tool.

DataTables

A jQuery plugin for creating impressive, highly functional data tables. Multi-column sorting with data type detection, smart handling of column widths and more.

arbor.js

Build crazy looking, futuristic, animated and modular graphs. Really cool stuff.

Layout

Wookmark jQuery Plugin

Easily build a Msonry-like layout like the one seen on Wookmark. We featured this on Design Shack here.

jQuery Masonry

The original jQuery Masonry. Masonry arranges elements vertically, positioning each element in the next open spot in the grid.

Isotope

An amazing layout plugin that allows for intelligent and dynamic grids of items that can be easily sorted and filtered.

FitVids.JS

A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

gridster.js

Gridster is a really amazing plugin that allows you to create flexible grid layouts that can be rearranged via drag and drop. You should definitely try this one.

Freetile.js

Another plugin for masonry-style layout. It allows for any size of elements to be packed without using a fixed-size column grid, so you don’t have to worry about specifying a column width appropriate to the size of your elements.

Text

jQuery TextExt Plugin

TextExt is a plugin for jQuery designed to provide functionality such as tag input and autocomplete. According to the developer, it was built on two main values: modularity and extensibility.

Jeditable

Jeditable allows you to set certain HTML elements to be editable by the user. You can even set up different types of events to trigger editing capabilities: hover, click, double click, etc.

FitText

A plugin for inflating web type. It actually makes it possible to have text that resizes with the viewport. Extremely useful for responsive web design.

Cool UI

jQuery Knob demo

This plugin allows you to create really cool circular knobs that spin or fill up as you scroll.

noty – A jQuery Notification Plugin

Noty is a jQuery plugin that makes it easy to create alert, success, error, warning, information and confirmation messages as an alternative the standard alert dialog. Each notification is added to a queue.

PageSlide

This plugin helps you build a hidden, slide-in sidebar that contains pretty much anything you want it to.

jQuery Collapse

“This plugin provides you an accessible and lightweight solution to a widely adopted interface pattern known as progressive disclosure.” That’s fancy-speak for a plugin that allows you to make content collapsable.

Avgrund

Awesome and simple modal boxes with a really cool page animation effect.

jQuery One Page Navigation

Smooth scrolling navigation and animation for single page sites. Super simple, incredibly handy.

jqPagination

A great little pagination plugin. Instead of displaying a list of page numbers like traditional pagination methods, jqPagination uses an interactive ‘Page 1 of 5′ input that, when selected, allows the user to enter their desired page number.

jQuery Joyride Feature Tour Plugin

This plugin is from ZURB, which is really all the info I need to know that it’s great. It helps you build little callouts that walk users through the features on your site one step at a time.

Tooltips

jQuery PowerTip

A fairly robust and powerful jQuery tooltip plugin with plenty of options.

tipsy

Another great tooltip plugin. This one is loosely based on giving you the ability to create Facebook-style tooltips.

Slideshows, Images & Sliders

jQuery Slider Shock

A notably complete responsive jQuery / WordPress slider, with a wealth of options, settings, styles and functionality. Very well documented too!

Backstretch

Backstretch creates dynamically-resized, slideshow-capable background images for any page or element.

jQuery Anystretch

Anystretch is a jQuery plugin that allows you to add a dynamically-resized background image to any page or block level element. The image will stretch to fit the page/element, and will automatically resize as the window size changes.

jQuery Lightbox

A simple lightbox based on prototype and scriptaculous.

FlexSlider 2

FlexSlider is a responsive image slider from WooThemes with awesome features like multi-directional slide animations, semantic markup, touch support and the ability to include any HTML as a slide.

ColorBox

Another simple lightbox plugin. Supports photos, grouping, slideshow, ajax, inline, and iframed content.

WOW Slider

Literally one of the best, most powerful and fully featured sliders on the web. It’s responsive, has lots of different transitions and is packed with everything you could need. Go get it.

Miscellaneous

Timeago

Quick, easy and auto-updating timestamps for jQuery. Example: About one day ago.

jQuery Validation

The jQuery Validation Plugin provides drop-in validation for your existing forms, while making all kinds of customizations to fit your application really easy.

jQuery File Upload Demo

A pretty robust file upload plugin for jQuery. Multiple file selection, drag&drop support, progress bars and preview images for jQuery.

jQuery Instagram

Want to show an Instagram feed on your web page? With this little tool, you can.

jQuery Shadow Plugin

Easily add all kinds of different shadows to your HTML elements. Each shadow takes very little code to implement.

Naked Password

This one is ridiculous and potentially offensive, and a little hilarious. To encourage users to implement strong passwords, there’s a little, cartoony and non-detailed illustration (think NES) of a man or woman who gradually undresses as your password strength increases.

MotionCAPTCHA

I hate mangled-word CAPTCHAs so much that I wrote an article about why we should kill them. This plugin provides a unique alternative that allows the user to bypass security by drawing shapes.

jQuery Transit

Super-smooth CSS3 transformations and transitions for jQuery. Rotate, perspective, skew, scale and more.

What Did I Miss?

There you have it, 40 outstanding jQuery plugins for everything from scrolling effects to charts and beyond. Leave me a comment below and tell me about the great plugins you’ve discovered, or better yet, built, lately. Be sure to leave a link so everyone can take a look.

Emerald is picking up plenty of buzz this year. The green-blue hue works well in design projects, from backgrounds, to the base color in a palette, to serving as an accent. The color is gaining even more popularity in 2013 because of its designation as Pantone Color of the Year.

Not only are web and print designers jumping on the trend but so are designers in the fashion, beauty and home décor industries. Why? Because Emerald has an almost universal appeal. Here are some ways to make it work for you.

Defining Emerald

The color and term emerald comes from a gemstone of the same name and hue. (The gemstone is a variety of beryl, a mineral, and contains trace amounts of chromium to make it green.)

The basis for emerald — despite the hue, saturation or tone — is green. The name even originates from the Greek “smaragdos” and Latin “smaragdus,” which mean green. The range of emerald as a color can vary widely from a yellow-green hue to a more blue-green one. The blue-green color is the most popular and the basis for Pantone’s color of the year.

As Pantone’s color of the year, the hue of emerald is much more specific – Emerald 17-5641. This color is of the more bluish-green variety and has a rich, lush color. This shade works well in a variety of applications and easily pairs with other colors.

“The most abundant hue in nature, the human eye sees more green than any other color in the spectrum,” said Leatrice Eiseman, executive director of the Pantone Color Institute, when the color of the year was announced. “Symbolically, Emerald brings a sense of clarity, renewal and rejuvenation, which is so important in today’s complex world. This powerful and universally-appealing tone translates easily to both fashion and home interiors.”

Color Meanings and Associations

Green is one of those colors that it seems that everyone likes. It is a favorite color among both men and women, second only to blue. But why is it so popular? The likely answer is because greens are common. Greens are a dominant color in nature and we are used to seeing it.

On a world scale, green has overwhelmingly favorable associations, making it a color that is less likely to offend clients in other countries. Associations include youth (Japan), fertility (China), luck (Western cultures) and paradise (Islam). The caveat is in South America, where green is the color of death.

Greens, including emerald, have a variety of emotional associations: soothing, relaxing, harmony, calmness and natural. Green is also represents stability, tranquility, healing, balance and affluence.

Add in some of the color meaning linked to blue hues – trust, peace, conservative, loyal – and you get a color that is almost universally-appealing.

All of these attributes make green a good choice for design projects. Use greens with neutrals as a burst of color to contrast with the lack thereof; pair it with other adjacent and bold, hues on the color wheel (yellows and blues) to create a fun, colorful palette; or use emerald with muted tones, such as reds, blues or grays, to create a sense of calm and serenity.

Emerald as a Dominant Color

As a dominant hue, emerald is most often used in a few very distinct ways – to represent nature or money. Unsurprisingly, the color is a popular choice for environmental marketing and branding (think of all the “green” initiatives out there).

But it can also be used in other ways as well. Green is a popular choice to use as the background of a website – and it works both in more- and less-saturated applications because the color does pair so well with other colors.

Emerald, in the bluish-green hue, as showcased by Pantone, is super-striking when it stands alone. The color, even without flair or flourish, is enough to make you stop and look. The simple Foundora and Henderickson-Maler designs are a perfect look at the color without flashiness.

Green on green design schemes are also quite trendy. By using a dark green background with lighter, brighter accents (or vice versa), designers can create a visually appealing concept monotonally.

Emerald as an Accent Color

Green can be a great color to use for calls to action. “Green means go.” Think of how the color is used as a symbol of progress – from getting the green light at a traffic stop to the arrows in the symbol to recycle.

Use it in the same way when it comes to design. As an accent color, emerald is a great choice for a button that needs to be clicked, from a place to subscribe to making a purchase.

Some emerald hues can also work well for text because of their deep and defined color. The peacock business card design above is an example of a great pairing of emerald as an accent color in the image and for text. The Superbe design also does the same thing but with even more impact, using emerald as an accent color for text and in the background.

Green is also a great choice when it comes to both dark and light color schemes. Pairing green accents with a light background can create a sense of energy and hopefulness; pairing with a dark scheme can feel natural and creative.

Famously Emerald

Emerald was a color used by some highly recognizable companies and as a pop culture reference long before it earned color of the year status:

• “The Wizard of Oz:” Dorothy makes her trek to the Emerald City in hopes of returning home.
• Emerald Nuts: The maker of canned nuts is famous for its colored container.
• The Daily Emerald: Not only is Emerald in the name of the student newspaper at the University of Oregon, but the color is used for headlines on the website.
• The Emerald Isle: The phrase is a common reference to Ireland, which is often symbolized by the color.
• Starbucks: Likely the most well-known coffee logo in the world features a green-emerald hue.
• Groupon: The popular daily deal website uses green as a way to connect with money.

Conclusion

Emerald was a beautiful selection as Pantone’s color of the year. The choice is significant because it highlights a shade that is commonly used, encouraging designers to learn more about it.

When it comes to design, greens are a great choice because of their universal appeal and positive associations. Consider adding a touch of green to your next project and make sure to look through the Design Shack gallery for inspiration (we’ve already grouped the emerald ideas together for you).

Image Sources: Handdy, Goodworksmedia, Easily Amused, Octwelve and Postscript5.

A common user interface style for Apple and WordPress has been the expanding search field. Whenever a user clicks to focus, the field will expand wider, then contracts when the user de-focuses. This technique has become popular because it saves room on your page when the search isn’t being used. But it also highlights the search field when it is in use, which catches the user’s attention and lets them know the website is responding.

In this tutorial I want to demonstrate two different methods for building an expanding search field. The first is using basic CSS3 transitions which are only supported in newer web browsers. This works great for simple designs, but there is no way to check if the user has entered data strictly via CSS. In the second field we will use JavaScript to expand, and then only shrink back if the user hasn’t entered any text. It is a small yet fascinating piece of UI which can blend nicely into any website project.

Live Demo – Download Source Code

Building a Simple Form

I do not want to have the demo forms actually submit anything, so I am using JavaScript for stopping the submit event. But the plain HTML of the document is still normal and fairly straightforward. Feel free to download a copy of my demo if you want to work on a local copy of the tutorial.

<!doctype html>
<html lang="en-US">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <title>Expanding Search Input Field</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="shortcut icon" href="http://designshack.net/favicon.ico">
  <link rel="icon" href="http://designshack.net/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="styles.css">
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script type="text/javascript" src="jsinput.js"></script>
</head>

This snippet contains all the header codes we need in the HTML page. I have included a copy of the jQuery library for quicker scripting. My custom-written JavaScript is saved into an external file named jsinput.js. It doesn’t contain anything too complex, but it will be worth understanding how we complete the different effects via CSS and JS. Here are the two form input areas with their exact HTML codes:

    <form id="searchform" name="searchform" method="get" action="index.html">
      <div class="fieldcontainer">
        <input type="text" name="s" id="s" class="searchfield" placeholder="Keywords..." tabindex="1">
        <input type="submit" name="searchbtn" id="searchbtn" value=""> 
      </div><!-- @end .fieldcontainer -->
    </form>



    <form id="searchform2" name="searchform2" method="get" action="index.html">
      <div class="fieldcontainer">
        <input type="text" name="s2" id="s2" class="searchfieldjs" placeholder="Keywords..." tabindex="2">
        <input type="submit" name="search2btn" id="search2btn" value="">
      </div>
    </form>

The search fields are named #s and #s2 respectively. I kept to a similar naming convention with the form elements and submit buttons. Reading through the CSS document should be a lot easier since we have the fields split by unique ID names. But first we can look at the CSS transitions and then move onto the dynamic JavaScript field.

Expanding with CSS Transitions

My demo CSS file contains a series of resets along with basic styles for creating the layout structure. There is nothing out of the ordinary if you are familiar with CSS. However one block I think is worth mentioning actually targets the placeholder text for various input elements. These selectors are not supported in all browsers, but we can get a majority of the newer engines with these codes:

::-webkit-input-placeholder { /* WebKit browsers */
  color: #ccc;
  font-style: italic;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: #ccc;
  font-style: italic;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #ccc;
  font-style: italic;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
  color: #ccc !important;
  font-style: italic;  
}

It looks a lot nicer to blend typical input text with the rest of your design. The CSS properties for each search field mimics a similar tone. I have an outer wrapper class named .fieldcontainer which encapsulates the form at 100% width. This means the form will never expand beyond the page container, so we can use 100% as max and anything else will be relative.

/** search input **/
#searchform, #searchform2 {
  display: block;
  margin-bottom: 15px;
}

.fieldcontainer {
  display: block;
  position: relative;
  width: 90%;
  margin: 0 auto;
}

.searchfield {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  width: 45%;
  padding: 11px 7px;
  padding-right: 43px;
  background-color: #fff;
  font-size: 1.6em;
  color: #ccc;
  border: 1px solid #c8c8c8;
  border-bottom-color: #d2e2e7;
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1), 0 0 0 6px #f0f0f0;
  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1), 0 0 0 6px #f0f0f0;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1), 0 0 0 6px #f0f0f0;  
  -webkit-transition: all 0.4s linear;
  -moz-transition: all 0.4s linear;
  transition: all 0.4s linear;
}

.searchfield:focus {
  width: 100%;
  color: #666;
  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.2), 0 0 0 6px #e0e0e0;
  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.2), 0 0 0 6px #e0e0e0;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.2), 0 0 0 6px #e0e0e0;
}

The transition properties can be found at the very bottom of the .searchfield class. The common CSS3 property and vendor prefixes should cover a majority of web browsers. But if you need support for backwards-compatibility then using a strict JavaScript method would yield greater results. Although admittedly this code is much cleaner and easier to organize.

#searchbtn {
  position: absolute;
  right: 360px;
  top: 5px;
  height: 32px;
  width: 32px;
  border: 0;
  cursor: pointer;
  zoom: 1;
  filter: alpha(opacity=65);
  opacity: 0.65;
  background: transparent url('images/search.png') top left no-repeat;
  /* Icon credits to Brightmix http://www.iconfinder.com/icondetails/43272/128/find_loop_magnify_monotone_search_zoom_icon */
  -webkit-transition: all 0.4s linear;
  -moz-transition: all 0.4s linear;
  transition: all 0.4s linear;
}
#searchbtn:hover, #searchbtn:focus, #search2btn:hover, #search2btn:focus {
	filter: alpha(opacity=90);
	opacity: 0.9;  
}
.searchfield:focus + #searchbtn {
  right: 10px; /* adjust btn position as the field expands */
}

One last bit for the search input area will fix placement for our search icon. This needs to be positioned at the very end of the input field which also includes a bit of padding on the right side. This way the user can never enter text which writes over the search button icon. The original source of this graphic is from Icon Finder designed by Brightmix. The flat icon set is perfect for such a basic search field input.

The biggest problem with CSS-only animation is handling dynamic user selections. When a visitor enters text in the expanded field they may hit enter, or they may go to click on the magnifying glass. If they click to search this will remove focus from the input and it will shrink back to 45%, which also messes with the click event. You may choose to edit the transition properties and fix them onto the :focus state. But then there won’t be any animation when resizing back down, so the effect is even worse.

Handling Dynamic Input via jQuery

In my sample demo the second input field is the only one targeted by jQuery. At the top of jsinput.js I have created two variables which select the second input field and search button. It is possible to change these positions if you would rather target the first field. But then it may also be worth removing the CSS3 transitions and only using these as a fallback method when JS is disabled in the browser.

$(function(){
  var search2 = $('#s2');
  var icon2   = $('#search2btn');
  
  // handling the focus event on input2
  $(search2).on('focus', function(){
    $(this).animate({
      width: '100%'
    }, 400, function(){
      // callback function
    });
    $(icon2).animate({
      right: '10px'
    }, 400, function(){
      // callback function
    });
  });

I have broken up the file into two large chunks of code. This first half contains the initial variables along with the focus event handler. Whenever the user focuses on the second input field we need to expand the width out 100%. Also we need to move the search icon from its default position all the way over to the right side. The two jQuery.animate() methods should run at the exact same time, producing a very similar animation effect as with CSS3 transitions.

  // handling the blur event on input2
  $(search2).on('blur', function(){
    if(search2.val() == '') {
      $(search2).animate({
        width: '45%'
      }, 400, function(){ });
      
      $(icon2).animate({
        right: '360px'
      }, 400, function(){ });
    }
  });
  
  // handling both form submissions
  $('#searchform, #searchform2').submit(function(e) {
    e.preventDefault();
  });
});

Then this last chunk has two more events for binding. The first happens after the user blurs off the second input field. The script will test against search2.val() and determine if the user has entered any data. If the field is empty then we animate back down to 45% width, and the icon gets repositioned as well. Otherwise the user has entered some search terms and we leave it at full 100% width.

The second small block of codes will trigger once you try to submit data for either of the forms. It will automatically catch the submission and stop it from happening with event.preventDefault(). Overall it should not be a complex script, but developers who are unfamiliar with jQuery may need to research a couple functions. The codes are exceptionally small and should work in all JS-enabled web browsers.

Live Demo – Download Source Code

Conclusion

This interface doesn’t require a whole lot of planning or extra code in your design. And even if you keep the same design style for your website input fields, this technique can be done using a few CSS3 transitions along with an outer container.

It would also be possible to include this on any number of similar forms like contact fields or profile settings pages. Download a copy of my demo source code, and feel free to implement this feature into any number of projects!

QR codes are all the rage… aren’t they? Their presence certainly seems to have increased in recent years, indicating an impressive adoption rate among marketers. But does that mean that you should be using them? If a client asks you whether or not using QR codes is a good idea, what will you say?

Join us as we take an honest and critical look at both sides of the QR debate so you can decide for yourself whether or not you should be designing with QR codes.

What Is A QR Code?

The core concept behind a QR Code (Quick Response Code) is absolutely nothing new: it’s basically a barcode. If you were born any time in the last three or four decades, you’ve see barcodes nearly every day of your life. Just like any barcode, a QR Code can be used to store encoded pieces of information that can then be decoded by a special reader.

One big difference is that standard barcodes are made to be read with a beam of light while QR Codes are meant to be seen as an image. The scanner essentially takes a picture of the QR Code, then aligns the picture using specific identifiable patterns and finally uses the rest of the pattern as a binary code.

They might look random, but if you look close you’ll notice that all QR Codes share four very specific squares. These are used to give the scanner information on the alignment, rotation and skew of the code so that it can be sure to interpret the information correctly.

The benefit here is that QR Codes can be scanned very quickly at multiple orientations and angles. They can also store quite a bit of information in a really small area.

The real potential for QR codes was realized when someone had the revelation that just about everyone carries a potential scanner in their pocket. Any cell phone with a camera and basic web capabilities can easily read and respond to QR Codes.

The Promise

The promise of QR Codes, as presented to potential clients, is nearly irresistible. In print, your space is always limited. Whether we’re talking about a company brochure or a bus stop ad, there’s a pre-defined amount of space to communicate your message.

Beyond this, your message is typically 100% static and has little to no actual interaction with the customer. It’s just a passive pile of ink and you can’t do much with it.

With the web though, everything changes. Space is virtually unlimited, interaction capabilities are limited only by your imagination and the holy grail of marketing becomes possible with technologies like social media: sustained, continual customer contact.

A Gateway Drug

The question of course is how to use limited printed media as a gateway to the unlimited and magical world of the Internet. QR Codes are one potential answer. “They’re easy to use and fun!” At least, that’s the sales pitch.

When you add a QR code to your boring old bus stop ad, suddenly it becomes an interactive advertising piece. A bored public transportation user will see it, point their phone at it and instantly be taken to a web page or even a video with more information.

To make sure all of the right buzzwords are used, QR Codes are pushed as social media friendly. You can use them to gather Likes on Facebook, Follows on Twitter, Pins on Pinterest; the list goes on and on.

Liftoff

QR Codes have this strange sort of cult following. Designers and marketers everywhere jumped on board and brought lots of creativity to an idea that originally began as a way for Toyota to track vehicles through the manufacturing process.

Today you’ll find QR codes in the strangest places. As the centerpiece for guerrilla marketing campaigns the world over, QR codes have been spotted on brick walls, shirts, telephone poles, belt buckles, produce, baked goods, tombstones and just about everything else you can imagine.

There’s even a Tumblr blog called “WTF QR Codes” which is dedicated to showcasing the ridiculous nature of QR Code advertising. Stop by and scroll through the results for a few minutes and you’ll instantly see how bizarre this form of marketing has become.

Good or Evil?

Some people see QR Codes as a modern advertising marvel on the verge of ubiquity. Others see them as a hopeless gimmick that future generations will no doubt laugh at us for even attempting.

As a designer, you should have a stance on the subject. This should of course be an educated, intelligent stance, not an off the cuff judgment. When a client comes to you with a question about QR codes, you’ll either come off as snide and derogatory or an informed expert. To make sure it’s the latter, let’s go over a few common questions.

Are They Easy To Implement?

Back when I was a full time designer for retail store brands, creating a barcode was sort of a pain. I had to purchase specialized and often expensive software, type in a very specific sequence of numbers, find a way to make sure it actually worked; it certainly wasn’t the most difficult part of my job but is wasn’t the highlight of my day either.

With a QR Code, the process is entirely different. There’s really almost no work on your part. Just Google “free QR Code generator” and you’ll find a bunch of websites that allow you to instantly create a QR code. Just type in a URL, choose a size and you’re good to go. If you want to test it, pull out your smartphone and any number of free QR scanning apps.

The bottom line is that QR codes couldn’t be easier to create. They size is also pretty flexible and since they’re squares they’re quite easy to integrate into a design.

Are They Easy To Use?

It’s hard to argue that QR Codes aren’t easy to use from the perspective of the person creating them, but what about from a user’s perspective? This is a matter that’s highly up for debate.

If you talk to someone in favor of QR Codes, the process sounds simple: just pull out your phone and zap the code. That’s all there is to it! It couldn’t be any easier right?

However, if you talk to someone who isn’t a fan of QR Codes, you might hear something drastically different. According to this crowd, the process is much more complex:

• Pull out your phone.
• Search for your phone’s built-in QR Code reader (oh wait, there isn’t one).
• Search for that QR code app that you downloaded one time, the name of which escapes you.
• Realize that you deleted that app ages ago because you never used it. Go to app store, search for and download a new free QR Code reader.
• Take a nap because you’re exhausted at this point.
• Launch app and wait for the camera to initiate.
• Hold phone up to QR Code.
• Wait for browser to launch and page to load.
• Tadaah, a web page! Wasn’t that easier than typing an a URL?

Obviously, this process is overflowing with hyperbole, but it makes an interesting point about how the typical QR Code user experience could possibly be perceived as anything but quick and convenient.

The simple truth is that if you ask ten people what they think of QR Codes, you’ll likely get a few that think they’re an overhyped waste of ink.

Do People Actually Scan Them?

According to Zimbio.com, QR Codes were present in 1% of print advertising in January of 2011, a number which shot up to 6% by December of the same year. Once again, this tells us that advertisers like them, but what about the general public?

Data is scattered and hard to find, but we can gleam a lot from a report titled “9 Things to Know About Consumer Behavior and QR Codes“, which was released in January of 2012.

According to this report, 79% of respondents had never heard of a QR Code. However, when shown a picture of a QR Code, 81% of respondents claimed to have seen one before. This lends credence to the idea that marketers love QR Codes a lot more than your average Joe!

</ br>

Does this spell doom for QR Codes? Not so fast. The same report also claimed that half of all smartphone owners have scanned a QR Code and 70% of those respondents claimed that it was an easy process. Further, 41% of respondents said QR Codes were useful, 42% had mixed feelings and 18% said they weren’t useful.

These numbers aren’t off the charts in the positive direction, but they’re actually much better than many naysayers claim. The blanket statement “nobody uses QR Codes” seems to be far from true. As long as your target market is smartphone owners, there’s a good chance that they both know what QR Codes are and are familiar with how to use them.

Are QR Codes a Fad?

In the 1990s, the world was ready for a replacement for cassette tapes. CDs were the obvious choice if you were purchasing music but they didn’t fully replace cassettes in at least one important way: recording.

Any kid with a Walkman or simple audio cassette recorder could make his/her own tapes. This was a great way to have fun, record music and quickly save information for later review. As great as CDs were for listening to your favorite tunes, they didn’t share the quick record feature.

That’s where MiniDiscs came in, or at least were supposed to. I thought MiniDisc players were amazing. They were better than cassettes in a million different ways. They used random access memory, so you could easily split your recordings into tracks and browse through them individually later. No more fast forwarding to find what you wanted! The players were stylish, small and had digital controls, which were very cool at the time.

I was completely convinced that these were the devices of the future. Fast forward to 2012 though and four out of five people that I ask have never even heard of MiniDisc players and those that do have some recollection don’t recall why they were cool or even what they really were. So what the heck happened?

MiniDiscs failed for a number of reasons. They were initially too expensive to replace cheap CDs for music and late in the game the arrival of the MP3 provided the final nail in the coffin. The digital revolution hit with force and we stopped thinking of audio as something to be carried around on a series of plastic objects that had to be inserted into something. Instead, devices recorded, played and transferred audio all on their own with no pile of physical storage necessary.

The Point of That Long Metaphor

Why is there a history of MiniDisc players in an article about QR Codes? Because when I see a QR Code, my mind instantly jumps to the lesson of the MiniDisc. I feel like QR Codes are a temporary and flawed solution to a problem that either doesn’t exist or will be solved by something else very soon.

If a QR Code just takes me to a web page, then a short URL seems just as easy or even more so. Further, new technology such as NFC threatens to take away a healthy chunk of the cell phone information gateway in the future.

The same report that I referred to earlier noted that 46% of respondents that had scanned a QR Code were simply curious about what it would do. This is a high number that indicates that lots of QR traffic is the result of it being a new technology that people want to understand. Eventually, when most people have tried it, these curious first timers will vanish.

We’re in a pretty serious state of flux at the moment with mobile technology advancing at breakneck speeds. It’s impossible to say for certain whether or not QR Codes will be an integral part of mobile-targeted advertising for years to come, but overzealous adopters need to prepare for the very real possibility that these things will be a fuzzy memory in a few years.

Tips For Designing With QR Codes

With all this in mind, we can see that QR Codes are currently at worst a fad that will fade quickly and at best a great way to grab the interest of a healthy chunk of smartphone owners. As long as we proceed with this information in check, we can come up with some common sense guidelines for designing with QR Codes.

Give Users an Alternative

Unless you want to dramatically limit the number of people who can access the information trapped inside of the QR Code, make sure that you have an alternative. This often takes the form of a simple URL under or beside QR Code.

Use Mobile Friendly Content

Always consider that virtually all of the people scanning your QR Code will be doing so with a mobile phone. If the code leads to a website that is optimized to work on desktops, you’ve failed. Make sure the content on the other end is usable at a small size and doesn’t use Flash or other non-mobile technologies.

Creativity Pays Off

That curiosity factor that we mentioned earlier is obviously a huge hook for QR Code users. As QR Codes become more ubiquitous, they become easier to ignore, just like sidebar ads on the Internet they’ll quickly become almost invisible to many people. Make sure you put some serious thought into presentation. How can you catch your audience’s attention and leverage their curiosity to score a scan?

Have Clear Goals In Mind

Getting people to scan your QR Code is an impressive feat, but if you don’t use that opportunity wisely then it’s a big fat waste of time. If you get a million scans but don’t successfully educate or encourage people towards further action, you haven’t really accomplished anything. Scoring social media love is an obvious goal that could pay off in the long term.

Don’t Be Stupid

As the site WTF QR Codes clearly demonstrates, this technology is overused, abused and often poorly understood. QR Codes on a billboard next to a highway with an average speed of 75mph probably aren’t the best use of your client’s advertising dollars.

What Do You Think?

Now that you’ve seen the statistics, read my rants and considered my advice, it’s time for you to chime in using the comments below.

Do you think QR Codes are the savior of printed marketing or are they another overhyped marketer’s fantasy that normal people simply don’t care about? If clients ask you whether or not they should use QR codes, what will you say?

After a long period of researching mobile responsive layouts, I’m spent quite a bit of time experimenting with various UI designs. One major hotspot on the page is often the website’s main navigation. Users want quick access to your content pages — and this will always be the case, either on a full monitor or a smaller mobile responsive screen.

For this tutorial I want to demonstrate how we can use a combination of CSS3 media queries along with some jQuery to manage a sliding navigation menu. The links will appear as normal on the frontend but drop into a hidden menu after resizing below 600px. Instead we see a little menu pull-down icon which will toggle open and closed on command.

Live Demo – Download Source Code

Setting the Document

The top heading area contains a small selection of files we need to create this effect. I am including a custom stylesheet along with a copy of the latest jQuery library hosted by Google. All of the custom JS functions are stored in an external file named menu.js.

<!doctype html>
<html lang="en-US">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <title>Responsive Sliding Navigation Demo</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="shortcut icon" href="http://designshack.net/favicon.ico">
  <link rel="icon" href="http://designshack.net/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="styles.css">
  <link rel="stylesheet" type="text/css" media="all" href="http://fonts.googleapis.com/css?family=Boogaloo">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script type="text/javascript" language="javascript" charset="utf-8" src="menu.js"></script>
</head>

Most of the page markup is fairly unimportant aside from the header area. I have attempted to keep everything at a fixed height, but the header cannot use a fixed CSS property or else the page won’t expand when sliding the menu open and closed. So the heading and navigation links are setup by line-height values in CSS.

  <header id="topnav">
    <nav>
      <ul>
	<li><a href="#" class="sel">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Projects</a></li>
	<li><a href="#">Blog</a></li>
	<li><a href="#">Get in Touch</a></li>
     </ul>
    </nav>
    <a href="#" id="navbtn">Nav Menu</a>        
    <h1><a href="#">Designee</a></h1>
  </header><!-- @end #topnav -->

The page h1 title fits best as the last element so the header will always keep its constant height. Right next to the headline is an anchor link with the ID #navbtn and this contains the sliding menu link icon. It will only display using CSS after the width drops below a certain threshold.

Markup Positions in CSS

Typically I do not consider even requiring jQuery whenever it is possible. The only problem with toggling menus is that we cannot do this efficiently in CSS. And the jQuery methods will apply inline CSS styles which overrule the default stylesheet. So it comes down to positioning the elements using CSS and helping them animate properly with JavaScript.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
  -ms-text-size-adjust: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html { height: 101%; }
body { 
  background: #f8f8f8 url('images/bg.png'); /* BG Neutral http://subtlepatterns.com/ps-neutral/ */
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 62.5%; 
  line-height: 1; 
  color: #343434;
  padding-bottom: 55px;
}

::selection { background: #b9e9b9; color: #555; }
::-moz-selection { background: #b9e9b9; color: #555; }
::-webkit-selection { background: #b9e9b9; color: #555; }

a { color: #6992c0; }
a:hover { color: #77a4dc; }

h2 { font-size: 2.9em; line-height: 1.4em; color: #626262; margin-bottom: 22px; }

p { font-size: 1.6em; line-height: 1.7em; color: #777; margin-bottom: 15px; }

#w {
  display: block;
  max-width: 900px;
  min-width: 300px;
  margin: 0 auto;
}

#content {
  margin: 0 1em;
  background: #fff;
  padding: 0 10px;
}

#pagebody {
  padding: 15px 25px;
}

My default CSS browser resets include a set of custom codes for the page typography. Also our body background tile is PS Neutral saved from Subtle Patterns. I had to split up the wrapper container and the body container into 2 divs because we are using side padding on the left and right to keep the page from growing to 100% width. Adding margin values onto the margin: 0 auto; property will result in losing the centered positioning.

/* navigation bar */
#topnav {
  display: block;
  width: 100%;
  position: relative;
}

#topnav #navbtn {
  display: none;
  float: right;
  top: 0;
  width: 20px;
  height: 70px;
  background: url('images/menu.png') center no-repeat;
  text-indent: -99999px;
  overflow: hidden;
}

#topnav nav {
  position: absolute;
  top: 0; 
  right: -10px;
}

#topnav nav ul {
  list-style: none;
}
#topnav nav ul li {
  display: block;
  float: left;
  font-size: 1.4em;
  margin-right: 4px;
}

#topnav nav ul li a {
  display: block;
  text-decoration: none;
  line-height: 70px;
  color: #8ea188;
  font-weight: bold;
  padding: 0 10px;
  border-bottom: 2px solid #fff;

}
#topnav nav ul li a:hover {
  color: #6f8767;
  background: #ddecd9;
  border-bottom-color: #bdd8b5;
}

By styling the inner <nav> element we retain control over the header bar. And by setting the position to absolute we control how far the nav links will follow after the title headline. Notice how the #navbtn will display hidden until resized lower than 560px using media queries. Everything else is setup including the height, width, and positioning.

Responsive Styles

There are just a small number of changes I have made when the browser window resizes smaller than 560px. I do not think this is a magical number, it just happens to be a nice area when the default navigation will start to bump up against the logo text. This is when we need to hide the nav menu and display the toggle icon.

/* responsive styles */
@media screen and (max-width: 560px) {
  h2 { font-size: 2.2em; }
  p { font-size: 1.45em; line-height: 1.55em; }
  #topnav { height: auto; }
  #topnav nav { 
    display: none; 
    position: static;
    width: 100%;
    top: auto;
    right: auto;
  }
  #topnav nav ul li { float: none; margin: 0; }
  #topnav nav ul li a {
    display: block;
    width: 100%;
    line-height: 1.4em;
    border: 0;
    padding: 6px 9px;
    background: #dcf4dc;
  }
  #topnav nav ul li a:hover {
    background: #cbdcc5;
  }
  #topnav nav ul li a.sel {
    color: #6f8767;
    background: #cbdcc5;
  }
  
  #topnav #navbtn {
    display: block;
  }
}

It also means removing the absolute positioning from the nav element so that it will render as a static block. The nav anchor links will display as full 100% width rows for quicker accessibility when tapping on a mobile screen. Also the inner page headers+paragraphs will be resized a bit smaller, coupled with adjusted line-height values.

Interactions with JavaScript

The final bit of code in menu.js could also be included directly into the HTML document. But since we need to handle more than a single toggle method, it is cleaner and more efficient to separate the markup from dynamic effects. I’ll break down this file into sections so that it is easier to read.

$(function(){
  var nb = $('#navbtn');
  var n = $('#topnav nav');
  
  $(window).on('resize', function(){
    

    if(nb.is(':hidden') && n.is(':hidden') && $(window).width() > 569) {
      // if the navigation menu and nav button are both hidden,
      // then the responsive nav is closed and the nav menu is still hidden.
      // just display the nav menu which will auto-hide at <560px width and remove class.
      $('#topnav nav').show().addClass('keep-nav-closed');
    }
  }); 

The first large chunk is arguably the most confusing. It deals with minor bugs when resizing browsers from responsive to non-responsive and shouldn’t affect smartphones at all. We attach an event handler to the window checking .on() resize. The two distinct logic statements are checking against the variable which target the header nav element, along with the nav menu toggle link.

When the browser goes responsive and the user toggles the menu open/closed it will append an inline style attribute. This will have precedence over anything written in the stylesheet and it is a problem after the menu has been opened & closed. The nav will have a permanent style of display: none; even after being resized larger than 560px.

This is what the 2nd if{} statement is checking for. When the nav and menu button are both hidden then the layout was responsive, the user opened/closed the menu, and then resized back to regular view. So we just need to display the nav again but there is a problem. jQuery’s show() method will also attach styles inline which means when resizing back to responsive the nav menu stays open permanently. To fix this I will be adding a class .keep-nav-closed. This will only get added if the nav is closed and then resized bigger – if it is left open when responsive it’ll stay open when resized larger and back down again.

    if($(this).width() < 570 && n.hasClass('keep-nav-closed')) {
      // if the nav menu and nav button are both visible,
      // then the responsive nav transitioned from open to non-responsive, then back again.
      // re-hide the nav menu and remove the hidden class
      $('#topnav nav').hide().removeAttr('class');
    }

Now the other if{} statement should make sense as to why we are checking for this class. It will only appear after the 2nd time of resizing and opening the nav, so we know to instead take off the class that way it stays closed when resizing back to a responsive width. It is a weird bug and I have yet to find a smaller or quicker solution for handling the inline jQuery styles, other than removing the attribute altogether(which still causes issues). So now let’s move on and take a look at the final segment of JavaScript.

  $('#topnav nav a,#topnav h1 a,#btmnav nav a').on('click', function(e){
    e.preventDefault(); // stop all hash(#) anchor links from loading
  });
  
  $('#navbtn').on('click', function(e){
    e.preventDefault();
    $("#topnav nav").slideToggle(350);
  });

Both event handlers are checking for click events on different targets. The first is locked onto all the different anchor links in the header navigation and footer sections. The href values are hash symbols (#) that do not go anywhere so I just set them to not load anything. This is similar when clicking the nav toggle because we do not want to load a hash into the page URL. Instead the responsive hidden nav menu will toggle open and closed at 350 milliseconds completely ignoring the href value.

Live Demo – Download Source Code

Almost every business has an email newsletter these days. From retailers promoting sales, to organizations showcasing information and events, the email newsletter is one of the most popular marketing tools out there. And for it to really be effective, it must look good.

An almost unlimited number of free email templates can make it easy to just download something and send out an email, but you should really take the time to create a custom template for communications that represents your business and who you are. Your newsletter represents your work just as much as a website or printed product. Although getting started can be intimidating, it’s fairly easy to create a newsletter template, choose software for distribution and send your first group email. It is important to keep in mind that most people get a lot of email every day, so you must work to make your newsletter stand out.

Getting Started

The first step in the design process is to actually figure out what your newsletter should do. Is it designed to sell products? Or maybe provide information that drives traffic back to a specific website? What action do you want newsletter subscribers to take when they see the email?

After you make this decision, it is a little easier to get started. You’ll want to consider overall branding in the design as well. Your newsletter should match your website, printed materials and brand in look and tone. You want subscribers to know who the email is from as soon as they open it. This can help encourage people to open and read it as well as establish a link back to your company.

Consider the tone and frequency of your newsletter messages. The number of words (and catchiness of the subject line) are as important as the visuals when it comes to sending out something people will look at. Invest some time into crafting the message and writing before each individual newsletter is sent.

What you don’t want is to send a newsletter that looks exactly like something else in a client’s inbox.

Think about the overall feel of the newsletter as well. You should try to avoid the “newsletter template look”. There are a lot of templates and packaged options out there. Some of them are good; many of them are not. What you don’t want is to send a newsletter that looks exactly like something else in a client’s inbox. Take the time to develop a custom template using your color and type palettes as well as overall voice.

Remember that a newsletter does not have to be text heavy and long. Sometimes the most effective newsletters are a simple coupon or promo asking the user to take another step.

Go Big with Images

It is hard to overlook a great image. Use a striking visual at the top of each email newsletter as a way to draw people in.

Try to place images — including photos, illustrations or infographics — in the top half of the newsletter so that the key part of the visual is above the scroll. Go for images that are sharp and in-sync with your message. (You would not send a photo of a snowy mountain to people when you are trying to sell a sailboat.)

Mix it up when it comes to shape, colors and the size of images. Use photos that are different so that each edition of the newsletter feels unique and new. You don’t want subscribers to see the email and think they have already seen the message.

Consider experimenting with color as well — from the use of full color images to black and white to even something more artistic. Also remember that just because your newsletter is 800 pixels wide, you don’t have to use a full width photo. Create visual interest by using different shapes and changing the aspect ratios of photos.

Use Great Color

In addition to great images, color can create a distinct visual interest. Use color to both establish your brand – make sure to use the same RGB or HEX color mixes in the newsletter as in other brand materials. Don’t just go for a close match from a newsletter software color picker. The color palette should match that of complementary components, such as a website, or other printed materials.

If you don’t have a distinct brand color palette, look to your logo for inspiration. Use colors from the logo to help draw attention from the company name to other parts of the newsletter. Consider using color to highlight certain types of text to add emphasis. Words like “sale,” “free” and “new” might be great as bold and colored words to help establish calls to action.

Develop styles for those colors throughout the newsletter. Use one of your brand’s primary hues for headlines in the newsletter or for links. If you use very little color for your overall brand, consider adding an accent color for the newsletter, but you should establish a consistent palette and stick to it.

Create a Style Palette

As with other types of design projects, there should be a hierarchy to the newsletter so that the visuals help guide readers through it. Use several different type styles — headlines, subheads or other larger text, body copy, links and captions. Those styles should vary in size and weight, with the most important items being the largest and having the boldest color (if you opt for colored text).

The best way to create a consistent hierarchy is through a style palette. After creating a custom template using your brand’s color and great text and images, most email newsletter providers (such as Emma, MailChimp and Constant Contact) will upload your template and create text styles for you to use. Many of these clients also allow you to upload your own HTML if that is more of your style.

By creating a style sheet, you can change attributes with a single click and don’t have to worry about remembering color mixes, font specifications or image border styles. This is highly recommended if multiple people will be working on the newsletter.

Don’t Forget

Email newsletters should include some basic information that allows users to identify you as the sender and opt out (or in) to newsletters. Make sure to check the legal issues surrounding where you live because some information, such as opt-out links or a postal address and identifying company information, is required in certain countries. Here’s the basic checklist:

• Company information, including who you are and how to contact you
• Unsubscribe link
• Link to view email as plain text or in a web browser
• Link to website
• Social and sharing links
• Call to action – tell subscribers what to do with the newsletter
• Opt-in reminder – remind subscribers how they got on your list

A Few Things to Keep in Mind

When you are creating the template, think about how people read emails in the design process.

Consider the preview pane. A large number of people look at email without actually opening it. Ideally the body of the email should be less than 600 pixels wide, so that it is viewable as a preview without losing information.

Make it compatible with mobile devices. A significant percentage of readers will view the email on a phone or tablet, so make sure your email works in these environments.

Stay away from busy backgrounds and background images. Some email clients, such as the popular Microsoft Outlook, don’t render them at all and others will not render them properly. Keep the message as clean and neat as possible.

Resize your images. Stick to 72 dpi for images and size them to fit the email. Smaller images will load faster; you don’t want to lose users because of long download times.

Test, test, test. Different email programs will render emails newsletters in different ways. Test the template in a variety of common email clients – Microsoft Outlook, Google Mail and Yahoo Mail, for starters. Also make sure to send yourself a test edition of every message before you send it to the entire subscriber list to ensure that the email looks (and reads) as you intended.

Conclusion

When designing your email newsletter, really think about ways to make it stand out from the pack. Focus on branding as well as the use of great images and color. Finally, test it to ensure that your newsletter is compatible on a variety of devices and across multiple email clients.

Image Sources: Missy Higgins, Serious EatsThreadless, Urban Outfitters, Charlie Pratt, Lole, Native News, Smithsonian, Entree and Anstob.

Today we’re delving into the most relevant facts on how infinite scrolling turned out to become such an acclaimed technique all over the web, and why, despite its popularity, it’s not yet all that widely adopted in web design.

This feature appeared at a point in the history of the Internet when the amount of information to be presented on web pages increased, and the speed of connections allowed the reader to access and transfer information at greater rates. The question of infinite scrolling on web pages is one of the aspects involved in the user experience design, and isn’t as cut-and-dry as you might think.

Beginnings and Popularisation

At Google, it’s called continuous scrolling and can be also be referred to as endless scrolling. Briefly, infinite scrolling is a technique to make the browser auto load new content when the user reaches the bottom of the page so that it is not necessary to look for pagination buttons to go to a next part; the whole thing will appear just by rolling the mouse wheel.

This technique is notably used in the news feed page on Facebook; the images search results page of Google and the Twitter timeline. An interesting up-to-date example published for reference purposes can be seen at the Isotope jQuery plugin demo page.

hexaedro.eu takes advantage of horizontal infinite scrolling to illustrate evolution of mankind

One of the first references to this kind of scrolling was made back in 2005 by Bill Scott (Director of User Interface Engineering at PayPal) in his article Death to Paging! – Rico LiveGrid Released.

It was developed to present a very large table of data in a single view to the user before he had to go to a following section, and it was first referred to as the scrolling live grid. The article included a pros and cons section, some design considerations and formulated the elements of the question in clear words: paging vs. infinite scroll.

The technique was refined and started to be very popular on the web, causing a sudden explosion of enthusiasm about it. One year after Scott’s article, announcing the scrolling live grid, it was possible to find online texts vilifying the page-chunking phenomenon and praising the new scroll with the motto “Don’t force the user to ask for more content: just give it to them.”

By mid 2008, the term infinite scroll already had its own life and a site with the same name devoted to explaining in detail how it works. The site offered also a handful of plugins to enable continuous scrolling on WordPress themes, pages via jQuery libraries and “autopagerize” add-ons for Safari and Chrome which could automatically add the scrolling function to normal sites.

Even in 2012 the technique is still presented as an innovation “to your heart’s delight” along with the implementation of responsive design. From a more analytical point of view, this was one step further on the separation between the initially printed existence of content and its electronic counterpart. After all, the notion of a web page comes precisely from the material world of newspapers, magazines, and books with real paper pages.

Thomas Baekdal explains the relationship between printed pages and texts displayed on digital screens in Dissolving that Print Mentality. Baekdal basically settles the issue with a kind of formula: format first or content first. In his analysis Baekdal states that the limitations of the printed media should not be transferred to the digital screen.

Apple also paid some tribute to the scrolling tendency. One of the major features of the new iBooks 3.0 was the possibility of scrolling the books vertically. Now the reader could forget about the page turning effect and read their bestsellers by finger flicking. That was precisely an implementation of the “get rid of the dancing bear” motto of Baekdal: to allow the reader to be freed from the old physical book paradigm. Fortunately, there was an option to decide between the traditional page turn theme or the continuous scrolling one at will, so the old-fashioned reader would still have the opportunity of mimicking true books within their device.

Why Avoid this UX Improvement?

One of the few exceptions to the rule of embracing infinite scrolling was the case of Dan McKinley at Etsy where a practical piece of research using the A/B testing methodology showed that the technique was not working as expected.

In fact, infinite scrolling was removed from the site after the number of clicks on favorites decreased and the search function was not used anymore. Notwithstanding a possible bias on the method used to evaluate the reactions of the users, it is clear that infinite scrolling was not maximizing activity by itself, or at least that the usual public of the site didn’t agree with the change.

Google is another example where endless scrolling did not succeed to be fully implemented. Only the image search has infinite scrolling, and even there, the scrolling is limited with the “show more results” button.

one of the most creative uses of infinite scrolling is depicted in the site distancetomars.com

The Benefits

More than being merely a fancy feature, infinite scrolling has various advantages that make it worthwhile in many cases:

• The uninterrupted attention a user maintains when more content is provided automatically is at the core of the attractiveness of the infinite scrolling. The reader will not have to stop to think where to find the next button or which number of pages should come, following an improved attention.
• In psychological terms, infinite scrolling seems to trigger automatic responses based on curiosity and the alleviation of the expectation produced while waiting for new information, which causes a kind of excitement and willingness to continue scrolling to see what comes up. This psychological mechanism deserves sufficient comprehension as the initial advantage can turn into a problem. For example, the findings of McKinley suggest that endlessly scrolling the search results page somehow shocked or confused the users, overloading them with more and more information to the point that using the search was avoided.
• Template designs can benefit with more cleanness, more room for content and less distracting elements like the list of numbers for paging.

The Downsides

Of course, there are also a number of issues with infinite scrolling that should be considered:

• Page loading time increased: It’s obvious that the extra content to be appended at the bottom of a page needs more time to be downloaded. Users with dial-up connections or poor mobile data plans will have a reduced ability to browse effectively that page.
• Memory usage: Browsers, both on desktop computers as well as on mobile devices and tablets can potentially run out of memory and crash, specially when the page loads tons of images.
• The increased loading time together with more system memory required and processor usage could inevitably result in choppy, jumpy unpleasant navigation.
• Browser compatibility: Since infinite scrolling belongs to the realm of responsive web design, it depends on libraries and plugins that may not be fully compatible on older devices or browser versions.
• Both seeing the footer disappear and being unable to reach can be a “traumatizing” experience for the user. Also, all the content of the footer, and therefore, the function of the footer itself will vanish.
• Lack of orientation and spatial reference: In a paginated scheme users can set a simple visual reference to orient themselves through the content of the page and mark the places where something of interest is found, so it’s possible to quickly return there later. There could be users who feel lost or confused not knowing where they really are or missing what they were looking for.
• Loss of the user’s last position in the stream of data, when the refresh or the back button is pushed. Since the infinite scrolling aims to show large amounts of entries, it should be implemented also a way to retrieve the actual position in the list, to avoid frustrating situations. Most of complaints against endless pages refer to these two last points as the users were losing control over the page they visit.
• Bookmarks tend to be useless since a point of interest won’t be marked on a discrete page but floating somewhere in the flow of entries.
• While it’s not necessarily a bad thing, rankings could vary greatly on search pages since those results confined after page number 2 will then appear on page number one just by scrolling down long enough.

That’s why, despite their high popularity, infinite pages are not always the best option for every site or even for the same site viewed in different devices.

A Few Workarounds

Developers constantly find workarounds for these inconveniences, making infinite scroll more effective. The well documented case of the new LinkedIn app for iPad provides a good case study about problems and solutions when implementing the infinite scroll.

The application had to have infinite scrolling in a central list to show news and big pictures; this created the need of a convenient way of handling all the elements without affecting the performance of the scroll. HTML5 and CSS tricks were combined to get the final result of an app that shows the content smoothly without crashing.

Undoubtedly this enhancement of the user experience still has a fair way to evolve, but users already enjoy a better browsing experience — particularly when it comes to navigating pages with lots of information, graphics and text.

Repository Zone

Infinite scrolling is here to stay, so it is advisable to know different methods to make it work:

Enhantsy: The handful of people who actually liked the implementation of infinite scrolling on Etsy.com can re-enable it on their page by installing this plugin from the page Enhantsy. The plugin offers several other functions in addition to restore continuous scrolling in all pages of Etsy.

WordPress Solutions: Blogs are perhaps the favorite candidates for infinite scrolling. Maybe a small proportion of users cannot still deal with the semi-transparent floating footer that WordPress places when infinite scrolling is enabled, but for the large majority who likes the technique, Infinite-Scroll is a plugin that will activate the endless scroll mode in most of WP themes and requires little expertise or coding skills. The Jetpack plugin also offers infinite scrolling as one more between dozens of functionalities. Tuts+ has posted a tutorial on how to achieve infinite scrolling using jQuery; this tutorial is directed to the courageous tinkerers willing to implement infinite scrolling by entering the code themselves.

Discussion and Recommendations: StackOverflow offers plenty of tutorials about any conceivable aspect related to infinite scrolling.

Mobile Alternatives: Infinite scrolling works well with mobile devices due to the nature of their touch screens. It is possible to get the effect on Android by using Android-Binding. Methods for image scrolling used in apps are also available, for instance, to work on iPhones.

There’s a general trend towards smaller “column listings” in homepage layouts. Specifically, tech startups and landing pages use this effect for promoting features in their products. But it’s a neat little design layout style for any purpose, and using icons in your design will break away from the normal template designs for an intriguing list display.

In this tutorial I want to demonstrate how we can use custom CSS3 webfonts as an icon inside the HTML. We will create a very basic startup website using the two-column list approach. All of the CSS is very straightforward, although you may need to do a bit of research on some of the properties. This effect is native to all standards-compliant browsers and renders perfectly on OS X or Windows.

Live Demo – Download Source Code

Downloading Fonts

I always recommend designers to check out the Entypo font set which is open source and free to download. The pack contains fonts of all the 4 major file types, and also has desktop versions for installing on Mac or PC. It also has a separate icon pack for social media buttons. We just need the Entypo web font family copied into a new directory named fonts. Here is the list of files I have included:

• entypo.eot
• entypo.svg
• entypo.ttf
• entypo.woff

I will demonstrate how to include this with CSS a bit later. Just be sure that everything is organized properly and ready to include on the page. Also my demo has a small images folder for the BG effects, but they are not pertinent to the whole layout. Simply download a copy of my demo if you want all the resources together.

First we should look at how the page is structured, and the plan for aligning everything perfectly.

Planning the HTML

We do not need to cover all the in-page HTML but just the important bits. First up is my header section which contains a link to the relative CSS file, plus some unique Google Webfonts. Note that our local CSS3 @font-face declaration will not affect these 3rd party fonts at all.

<!doctype html>
<html lang="en-US">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <title>Homepage Columns with Entypo Font Icons</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="shortcut icon" href="http://designshack.net/favicon.ico">
  <link rel="icon" href="http://designshack.net/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
  <link rel="stylesheet" type="text/css" media="all" href="http://fonts.googleapis.com/css?family=Galindo">
</head>

There is not too much out of the ordinary here, so we can move right into the body section. I am using an outer wrapper div with an internal #content container. This houses the entire inner page section along with the 2-column list items. The whole object is actually inside an unordered list using the ID #features.

<h2><span>Common Features</span></h2>
  <ul id="features" class="clearfix">
    <li class="feature">
      <span class="pictogram cloud">&amp;#59153;</span>
      <h4>Full Support for Cloud Data Storage with daily remote backups.</h4>
    </li>
	
    <li class="feature">
      <span class="pictogram cart">&amp;#59197;</span>
      <h4>Obtain vouchers and coupons for saving money with online purchases.</h4>
    </li>
	
    <!-- @end first row -->
    <li class="feature">
      <span class="pictogram phone">&amp;#128241;</span>
      <h4>After launch we will publish mobile apps for Android and iOS smartphones. Keep up with your profile when on-the-go.</h4>
    </li>
    <li class="feature">
      <span class="pictogram pin">&amp;#59172;</span>
      <h4>Geolocation features help you to pinpoint hotspots with local retailers. Search for products or vendors by keyword.</h4>
    </li>

    <!-- @end second row -->
    <li class="feature">
      <span class="pictogram shout">&amp;#128266;</span>
      <h4>Shout your posts to other major social networks including Facebook, Twitter, Tumblr, and Pinterest.</h4>
    </li>

    <li class="feature">
      <span class="pictogram cap">&amp;#127891;</span>
      <h4>Earn points for idling IRC, posting frequent updates, inviting friends, and other similar activities. With enough bonus points you'll also be awarded cool profile badges.</h4>
    </li>
  </ul>

I have added a .clearfix class onto the outer UL element so the container will push down the rest of the content on the page. Since all the internal list items are floating, we need some method of keeping the box model in check. Similarly each list item .feature contains both a span and a smaller headline.

The span uses our pictogram icons for displaying a specific design right next to the text. We have the ability to add more classes so that a list item may span the entirety of the page. Feature items are just the most basic container object where we have 2 listings per row. You will also notice the icon span has both a class for the special font-family, and a class for the type of icon we are displaying.

This secondary class is helpful if the icon is positioned in a strange location. If something is too big or too small, or awkwardly positioned then this direct class is easier to manipulate. And it also makes skimming through the HTML code a simple process. The final bit of codes are inside my styles.css file and it certainly isn’t too overly complicated.

Column Styles with CSS

The first interesting bit you will notice is at the very top of my file. Here we are using a new CSS3 font-face declaration to setup the icon fonts. By using a single family name we can import all 4 of the various file types at the same time.

@font-face {
    font-family: 'EntypoRegular';
    src: url('../fonts/entypo.eot');
    src: url('../fonts/entypo.eot?#iefix') format('embedded-opentype'),
         url('../fonts/entypo.woff') format('woff'),
         url('../fonts/entypo.ttf') format('truetype'),
         url('../fonts/entypo.svg#EntypoRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

The additional font-weight and font-style properties are not necessary – but definitely worth keeping. It doesn’t hurt to specify that our new font is not bold or italic by default. It is also a great template worth saving if you plan to use a lot of CSS3 web fonts.

.cols {
    -webkit-column-count: 2;  
    -moz-column-count: 2;  
    column-count: 2;  
}

This is another interesting bit of code which I did not show in the HTML. Basically I setup a paragraph of intro text which is broken into two columns using the newer CSS3 properties and the related vendor prefixes. Note this has nothing to do with the icons listing, but it is another method of generating columned content in your pages.

Now I have all the codes designated towards the main pictogram listing. Inside my pictogram class we are using the new family ‘EntypoRegular’ set to a default size of 8em. The icons are originally very small, so we need to ensure they are large enough to be placed right next to a block of sub-heading text.

/* homepage columns */
.pictogram {
  font-family: 'EntypoRegular';
  font-size: 8.0em;
  font-weight: normal;
  vertical-align: middle; 
  line-height: 0;
  margin-right: .1em;
}

#features { display: block; margin-bottom: 15px; }

#features .feature { display: block; float: left; width: 420px; padding: 8px 0; margin-right: 12px; margin-bottom: 22px; }
#features .feature h4 { 
  display: block; 
  font-weight: normal; 
  font-size: 1.7em; 
  line-height: 1.3em; 
  padding-left: 75px; 
}

#features .pictogram { display: block; float: left; position: relative; top: 20px; color: #363636; }

#features .cloud { font-size: 12em; }
#features .cart  { font-size: 12em; }
#features .phone { font-size: 12em; left: 12px; top: 30px; }
#features .pin   { font-size: 12em; left: 15px; top: 25px; }
#features .shout { font-size: 12em; }
#features .cap   { font-size: 12em; }

Each of the .feature items is limited to a width of 420px along with some internal padding. The spaces between each column provide a full 100% width to the unordered list. And inside the list items we have the pictograms floating left with relative positioning. You may be surprised how easy it is to keep each icon located at just the right place with a few minor additions.

The final block of code is a collection of all the different icon classes put together. I have individually sized each one at 12em because some icons do appear bigger or smaller than others. With this system you can pinpoint each individual set of icons to change how they appear. And since they are positioned relative to the container you may also use left/right/top/bottom properties for an easy alignment.

Live Demo – Download Source Code

Final Thoughts

Although this isn’t a particularly difficult tutorial, the various stages for building a column list can be time consuming. You need to determine the perfect icon font and plan your written text so it fits just right.

This demo should provide a nice starting point to get the ball rolling. Spend a bit of time brainstorming your own ideas and how you can apply this design into similar layouts. Additionally if you have any comments or questions feel free to share in the comments discussion area below!

Omar G. Writes: My boss is impossible to read and I feel like I have to be a mind reader to come up with a design he likes. He blames me for not being able to please him, and I feel ill every time I get a new project from him. Should I just look for a new job? I like my coworkers and the company but my boss is crazy!

Omar, this is a very common problem but one of the easiest to fix. Let me relate a story about one of my experiences then, after feeling a little unwell from the memories of how tense this situation can be, I’ll can explain how to please your boss!

The Horror

I was given a project by the president of a company at which I worked. She was known for being difficult as well as vindictive and I swear I almost fainted when her secretary called me into the president’s office. The assignment was simple: come up with new stationery for the company that would rebrand everything. She said, “I want something sophisticated!”

I looked up sophisticated in the dictionary and started by designing three choices for her. When I showed it to the president, she was a bit upset. “I said I want something sophisticated!” she scolded.

I designed three more, all corporate with a European fashion flair. When I showed them to her, she grew angrier and demanded to know why I couldn’t get something “sophisticated.”

I tried again and again with no luck. After the twelfth design attempt, I looked around her office, which was decorated with 1970′s kitsch, toys and retro furniture. The word “sophisticated” suddenly took on a different meaning to me. “Would you show me an example of some sophisticated designs that inspire you?” I asked her.

She pulled out a letterhead she had received and shoved it at me, probably trying to paper cut my throat. I looked at it and said, “Oh, you want something whimsical!”

The next design hit it on the head. It wasn’t that I couldn’t design “sophisticated” — she just couldn’t communicate the visual she wanted by using the right words and wasn’t pleased I embarrassed her by showing she was an illiterate moron. Why couldn’t she pick the correct words? Because non-creatives can’t put a visual in their mind together with the right descriptor. They’re not morons, mind you — they just can’t communicate a look with words. By the same token, they don’t understand creatives who describe a design direction and get the picture in their heads.

If you were talking to another designer and said “sophisticated,” chances are the other designer would picture the same look, feel and even fonts that would create a “sophisticated” design. Non-creatives don’t picture things in their head the way we do.

I took a big hit on my year-end review for not being able to finish the project in under twelve designs, which wasn’t fair, but I learned a valuable lesson that has helped me throughout my career. Design is seldom fair and although subjective, the designer is supposed to be a mind reader.

How Do You Prevent the Guessing Game?

The solution, when starting a project with a boss or client and you are discussing the design strategy or writing a creative brief, learn to read their mind or ask what designs inspire them.

They will be more than happy to show you examples of things they like. It makes them feel like they are an important part of the design process and will make your job so much easier.

Now, you might say you don’t want to copy someone else’s design. Well, you won’t. The design challenge for you is to take the inspiration and make it your own while keeping the feel the boss/client wants for their business. If they like retro design, then give them retro but make it your own. If they tweak it too much and it leans more to the designs they showed you, well, don’t put it in your portfolio. Design is a service industry and sometimes we have to shrug our shoulders, do the job and move on, but if it’s handled correctly, the client should be pleased if you get the layout, feel and colors of their desires.

When You Have to Read Minds

Sometimes the answer to your question of what the boss/client likes in design will be answered with the dreaded, “I know what I like when I see it!”

You have two choices: Run like crazy or look around their office at art, decorations and desk/shelf items and pick up on their personal style. It’s still a shot in the dark, but it’s a strong starting point and will put you closer than trying something out of your own mind, which is your personal style.

The logical step is to show him or her some inspiration you collect, rather than spending days designing in the dark. Some refer to this as creating “style boards.” You don’t have to get that involved. Just print out a few pages you feel solve the design solution and talk about them with the maniac for whom you are working.

In Conclusion

Yes, design is subjective and as a competent designer, you give the boss/client what they need, more than what they want but it’s not only about what is right. Sometimes it’s about pleasing the person with the money and walking away happy that you’ll pay some bills and live to design again, hopefully something you love, that will perk up your portfolio.

Send Us Your Dilemma!

Do you have a design dilemma? Speider Schneider will personally answer your questions — just send your dilemma to dilemma@designshack.net!

Speider has created designs for Disney/Pixar, Warner Bros., Harley-Davidson and Viacom among other notable companies and is a former member of the board for the Graphic Artists Guild and co-chair of the GAG Professional Practices Committee. He writes for global blogs on design ethics and business practices and has contributed to several books on the subject of business for designers.

Image © GL Stock Images

On Wikipedia, the definition of a keyboard is a “typewriter-style device, which uses an arrangement of buttons or keys, to act as mechanical levers or electronic switches”. In an age where technology is seemingly magical in its state of advancement, our beloved peripheral is starting to feel more like a relic than a modern input device.

As attached as I am to keyboards, I have clear vision to the light at the end of the tunnel. With the prevalence of pen inputs, touch screens, voice commands and other new ways of using technology, its time for us all to admit; The keyboard era is coming to an end.

Humble Beginnings

In the early 1900s, Charles & Howard Krum worked with an engineer named Frank Pearne to develop the earliest tele-type keyboards. People were using them to transmit stock market data around the country. These devices were derived directly from Typewriters of the 1860s.

I don’t know about you, but there’s no other peripheral that I’m using today with my computer from the 1800s. Even modern printers — which you could argue are on their way out as well — are fundamentally different from their printing ancestors.

The keyboard has, however, stood the test of time. Even the QWERTY layout in typewriters from 1874 by Sholes & Glidden that were challenged by the likes of the Dvorak layout to attempt to drive change and improve efficiency in typing have proven unfruitful.

Your keyboard keeps this picture of his mom in his wallet.

Feeling a Connection

My theory is this; humans, for better or worse, need to feel some connection to the things they use. In the same way Pareidolia makes us see smiling clouds or the man on the moon, or that creepy Mars face, keyboards have become for millions of people, an attachment object, or “security blanket” if you will.

Any time you go to use a computer, when you see a keyboard, you probably feel comfortable interacting with it in some way. Keyboards are our attachment objects to computers, a “security blanket” making us feel at home and sooth our worries. Attachment objects are just like Pareidolia, in it that they are part of a need to connect with something emotionally to help us deal with our environment.

In child psychology, Donald Winnicott championed the concept of transitional objects and transitional experience. These are parts of all of our development. The “transition” speaks of an object or experience that helps change our mental models and eventually overcome the crippling dependence of our attachment objects, like the way a child may use a blanket or stuffed animal to help them cope with sleeping in their own bed.

While keyboards aren’t quite like being attached to our parents, its not uncommon for us to become emotional over inanimate objects or fantasy worlds — Just look at the 2008 study, where Sony’s AIBO robotic pet was found to decrease loneliness in the elderly living in nursing homes, or this not-so scientific 2009 study about World of Warcraft accounts.

You Keep Me Happy, When Skies Are Grey

Now, I know this may all sound silly, but hear me out. Keyboards are our attachment objects. If you talk to most software designers or developers, who are generally early adopters and champions of change and new exciting technologies and experiences, they clam up at the idea of loosing their precious keyboards.

I’ve found in casual surveys that I’m part of a minority who is excited to see keyboards pass along into the nether realm, only to hang out with Scorpion and Shang Tsung. See, even though I depend on keyboards to do my job, I’ve never been one to settle on one solution to a complex problem, like how to interact with a computer.

It’s why I’ve never understood people bashing skeuomorphic design trends. They exist for a reason and provide people a visual “security blanket” that creates context for people to understand how to use something without needing an explanation or manual. Sorry for the mini rant, but I had to get that out there. I’d pay for therapy, but I can just vent at you guys, and have you scream at me in the comments section, it’s actually pretty therapeutic.

This is your keyboard intervention. We’re here because we love you.

The “Keyboarders” Argument

It always seems to be the same basic argument from people why they need precious keyboards so badly. They tell me things like “It’s the fastest way to get things done!”, or “You can’t write a program without a keyboard!”, and if the conversation goes on long enough, we may even end up with questions like “How will new languages be written?” and “How will you write the software so someone else doesn’t have to use keyboards?”.

When all of these fail to create a compelling story for why we need keyboards, an argument that is hard to make in my opinion, eventually the debate starts boiling down to attacks on the other popular inputs.

People say things like “Voice recognition just isn’t there yet.” and “Gesture control sucks!” as if they’re all quaffing from the same jug of home-row fruit punch. So here’s what I’ll do. I’ll break down each of these arguments for you and we’ll see where they take us.

The Fastest Way to Get Things Done?

First, “keyboards are the fastest way to get things done”. Let’s start with a basic fact, writer Barbara Blackburn, set a world record for typing in 2005 on an english keyboard. One of those fancy Dvorak ones at that (meaning she had the efficiency most could only hope to achieve with one of our standard QWERTY keyboards).

With a more efficient keyboard than the one used by most people, she averaged about 170 words per minute (wpm) over 50 minutes, and came as high as 212 wpm at top speed. While this is an absolute marvel to me that she could pump out an article like this one in about 10 minutes, it’s disappointingly slow in comparison to human speech.

John Moschitta, Jr., scored a world record of 586 wpm, and was later beaten out by Steve Woodmore, who achieved a rate of 637 wpm. Even the average adult reads at 250-300 words per minute. Meaning its safe to say that keyboards are holding us back in terms of our brain being able to process ideas. So, if you can picture me doing a Boston accent, “ya wicked wrong kid”.

The Software Argument?

Now, let’s tackle these next ones all in a big group: “You can’t write a program without a keyboard!”, “How will new languages be written?” and “How will you write the software so someone else doesn’t have to use keyboards?”.

The core of these arguments is based on something that is currently true — people are trained to use the input devices of their day. If it was the 1950s, we’d all be masters of rotary telephones, but today’s teenagers may not have ever used or seen one before. Software today is designed for the use of keyboards and mice.

Software developers are so authoritarian about using their keyboards that many of them consider programmers who reach for their mice as undedicated, undisciplined, and beneath them. This is an especially frustrating argument to have.

The truth for designers is that you can’t use Photoshop or Illustrator without a mouse unless you have some special peripheral, or other extreme circumstances. All Adobe software is a testament to software designed to be used with a mouse. Look at something like Photoshop Touch on the iPad. There are parts of it that feel familiar, and yet it’s fundamentally different.

When you look at apps like “Clear” for the iPhone, the entire interface would feel awkward if you asked it to be applied to a mouse and keyboard environment. The point is, software changes based on the way we interact with computers, so with prevalent new inputs, so will some redesigned, custom software.

Could Photoshop Touch be a blueprint for the future of Design software?

Other Solutions Aren’t There Yet?

Finally, we come to “Voice recognition just isn’t there yet.” and “Gesture control sucks!”. These arguments make me start to lose hope for the human race. Are we all so comfortable with our 100+ button boards that we lack the imagination to think about other possibilities?

During a keynote, Steve Jobs famously said that death would take care of people who didn’t know how to type. Later on, his company led the charge to make touch and voice inputs mainstream on mobile devices. The device that Apple was concerned not enough people knew, they’re now actively trying to replace.

So, I could rest on my laurels and simply say that death will eventually take care of the people who think that their keyboards are “all that and a bag of potato chips”. What I’d rather show you is the hundreds or even thousands of videos on the internet of children using smartphones and tablets. These kids won’t grow up with the same endearment for these clunky, wrist destroying input devices we known all of our lives. They may be making the argument “How will you use a computer if you can’t talk to it?” or “Why can’t I push anything on this screen?”.

Indeed you can see the trends of console video game systems by Nintendo, Sony and Microsoft all reaching out to embrace new and innovative ways of interacting with entertainment that simply didn’t exist when some of their target demographics were born.

The Future Is…

I should be clear about something. This isn’t an article talking about how voice control, gestures, touch or anything else is coming to destroy keyboards. It’s about the things we can’t even fathom that will create such compelling experiences, and create new efficiencies that people will be happy to rid themselves of keyboards.

The same way that mapping the genome led to medical advances, mapping the mind may give us similarly new technological insights and abilities. I know someone like me comes around every 6 months to tell you that we wont have keyboards in 30 years. I’m just saying that the irrefutable fact is, whether you believe it or not, it’s now more evocative of reality than ever before.

If you believe (like me) that the future will look more like Star Trek than it will Mad Max, then you have to believe that the people clinging to keyboards will more likely be museum curators than software developers.

I know which one I am, which one are you?

Web apps are becoming ever-more prevalent on the internet. Some may argue that they are simply more complicated websites. Regardless of their definition; what happens when you are designing for large amounts of constantly fluctuating data?

There are a few examples of data driven interfaces and they all have to handle a lot of varied data that is constantly changing. The most common are admin areas and analytic dashboards. The data can take many forms; graphs, charts, tables or text. Each can be displayed in a variety of different ways depending on the context and meaning you are trying to convey with the data. One thing to remember is that you can rarely be sure of the length or amount of data you need to cater for; so think simple to start…

Consistency and Predictability

One of the most important aspects of designing heavily data-driven interfaces is to make them consistent. Consistency allows users to familiarise themselves with one area of an interface and be able to use any other area simply by the schemas created with the previous area. This is how you make an interface predictable; play on existing mental models and learned behaviour.

In order to make areas consistent, you need to understand the broader context of the interface and see how well your initial interface ideas can hold up to the scrutiny of varied data.

For example: a table may not need to be filtered or sorted in one view — but what happens when you are presented with another table in a different area? Can you use the same interface you have just created if the second table needs to be filtered and has highlights that require a key or legend?

Consistency is about allowing the design to retrospectively adapt, based on your increasing knowledge of the complexity. This is why it’s best to start with lo-fi prototypes and test your ideas with edge cases (things that won’t occur very often but that might break the design).

Will the table pattern be used in any other areas that may have extra functions? If most tables need to be sorted, then design with that in mind. The aim is not to have to ‘bolt on’ anything to an existing component so that it feels out of place. It is easier to remove a button from a toolbar than it is to figure out how to incorporate it without a toolbar.

Resuable Patterns, States and Components

In order to make consistency a reality, you need to build smart. If not designing for each individual view, you can instead produce a set of rules that can be applied to any view. A paint-by-numbers if you will. This enables your client or other designers to quickly assemble new pages or layouts with minimum fuss.

Patterns

A pattern is a small set of elements that go together. This could be a section of a toolbar, or maybe a set of rating buttons, and are usually a way of organising connected information. A label and an input would also be a pattern within a form.

Below are some groups of patterns from Google products:

• Sort dropdown
• Left and right navigation
• Date range selector
• Checkbox Dropdown

The patterns are from different products but are consistent and so are predictable to users. Together they form the toolbar component.

States

Patterns may have various different visual looks depending on a specific set of circumstances. Maybe there is an error, a button is disabled or a graph has no data. Each need to be considered. Generally they fall into the following categories (some you will recognise from different CSS pseudo selectors):

• Default
• Hover
• Active
• Focus
• Error
• Disabled
• Empty

Components

A component is larger and can contain multiple patterns or even multiple components. When designing for heavily data driven sites, the aim is to provide a set of flexible components made up of reusable patterns. Below is one for http://phosho.co on small screens:

Working From an Existing Product

If you are working from an existing product and are limited by the existing user flows (and in some cases the layout) then you need to conduct a ‘template audit’. List out some key userflows and take a screenshot for each step.

• On a Mac just press Command-Shift-3 to save the current screen to the desktop.
• On PC you can use something called Problem Steps Recorder to record your steps into an .mht file. You can then save the images out of that file. There is an excellent tutorial here.

Once you have completed a userflow; add the screenshots to a folder that describes the userflow such as ‘add new record’. Then print them. All. There is something to be said for having every screen involved in a userflow in front of you. You can easily spot similarities and differences.

The idea of a template audit is to understand how many templates there are, how many patterns there are on each template (and what state they are in). The best way to do this is to pin them on the wall in a grid and assign a letter for the columns and a number for the rows (or whatever you are comfortable with). This acts as a reference when you write down each component.

For example you may have:

• Table Header (A2)
• Table Body (A2)
• Table Footer (A2)
• Side Menu – Closed (A1)
• Side Menu – Open (B1)
• Calendar (C3)
• Calendar – Disabled (C4)

This allows you to list out all the patterns that exist, but also reference them so you can quickly see what they look like. A way to test if you have listed all the patterns and components is to pick a template and see if you can recreate it from the list of patterns and components you have just made. If you come across something that is not on the list; add it.

Working From Scratch

When working from scratch you have the freedom to create any patterns you like but  it can also be a lot harder as you have nothing to go on at the start. As previously stated; when designing reusable components you should start lo-fi with sketches. They don’t have to be amazing but they are quick and allow you to easily explore different options without getting caught up in detail that so often happens in Illustrator or Photoshop.

1. Create a flow for a task that needs to be completed and list down the content that may be included on the page.
2. Sketch out some different directions and ideas. The more the better. Then you can start to see if there are any overlaps with the content and how it may be possible to lay it out.
3. Refine them into wireframes and assess if there are any areas which have similar functions but dissimilar solutions. Consider how they can be combined to make a more consistent interface. What are the patterns that you are using?
4. Break it. Deliberately play devil’s advocate and see what you have to do to break your interface. Decide whether the breaking action is likely to happen and whether it’s worth addressing.

Iconography

Iconography is a way of understanding the meaning of content by the use of an image. There are cases where text is better than an icon; usually when the concept is abstract and has a low affordance. Not every action needs an icon.

If you are concerned that users won’t be able to understand an icon. You are probably right. A quick way to test it is to isolate the icon and ask people what they think it does. If they have several guesses and none of them are remotely close then you may have an issue. Sit the icon in context and repeat the process. If the affordance of the context reinforces the correct use of the icon (i.e. people can guess what it does from its position on the interface) then it’s probably ok. If people still can’t guess then consider changing the icon or adding some accompanying text or microcopy.

Progressive Reduction

There is an interesting concept called progressive reduction that can be applied in circumstances where you want to train users that an unusual icon relates to a specific action. By starting with an icon accompanied by text (to make it obvious on first use) and gradually simplifying the interface the more it is used, users begin to associate the icon with an action that would be impossible to guess by just using the icon alone.

Deliverables

Now that you have created some refined wireframes expressing key userflows, encompassing a mass of reusable patterns and components; what do you show the client?

There are a number of caveats that can affect what you deliver, such as if you are doing the HTML / CSS / JS yourself, or whether that is being handled by a third party. In either case, to ensure the longevity of the design and more importantly the consistency as more features are rolled out, you need some sort of reference or guide that anyone can look and (and even update) that is the basis for all future decisions about the interface.

The Kitchen Sink

The Kitchen Sink is HTML / CSS and sometimes JS that shows all the different components and patterns on a single page ensuring that nothing breaks (design or code wise) when they are put in various orders. In it’s simplest form it is just native HTML elements ensuring that the basics are covered.

• HTML Kitchen Sink by Paul Randell
• Pattern Primer by Jeremy Keith

UI Kits

User Interface Kits are usually static PSDs and contain stylised versions of fundamental html elements. They usually include buttons, inputs, select boxes as well as sliders and datepickers. Some can be very comprehensive and are usually delivered when the build process will be undertaken by a third party. They prevent you from having to produce a mockup of every screen in every state.

• Dribbble UI Kits
• Transparent UI Kit by Victor Erixon
• Clean User Interface Kit by Matt Gentile
• Silky Light UI by Okidoci

Visual Style Guide

Visual style guides go much further than just visual references to a design. They are instructional and often include guidelines for when and where patterns and components should be displayed and in what state. They are best produced in code and can be updated as time goes on.

The key to consistency and keeping that consistency in an expanding, heavily data driven product is having a basis from which all design decisions stem. Having a ‘master copy’ and a set of easy to follow rules means anyone can build (nearly) anything and have it fit in with the existing design.

When you come across something that isn’t included in the style guide, you can create a solution to your problem and add additional elements, patterns or whole components to it with some instructions making it available to everyone.

Style guides are evolutionary and are never finished. Then do need to be maintained though. If not then gradually people will stop using it as it becomes out of date and that is when products begin to diverge.

• Twitter Bootstrap
• Google Styleguide
• Paul Robert Lloyd Styleguide
• BBC Global Experience Language
• Apple Human Interface Guidelines

Remember that you set your clients’ expectations. If you say you are going to deliver pixel perfect mockups then that is what they are going to expect.

Conclusion

Users are task focused and are often on the ‘shortest path to completion’ meaning you need to design for them to complete their task in the best way possible with minimum fuss. Resuable patterns speed this process up by allowing users to use what that have learned from one aspect of your interface and apply it to another. They become fast at completing new tasks because they are more confident of their actions.

A word of caution lest you get swept up in the look of the interface rather than the function; the way something looks is the last thing users care about. So before you rush off into Photoshop remember that first and foremost; users care about whether something works. Consistency and predictability have a huge part to play in this.

Additional Reading

Articles

• Front End Styleguides by Anna Debenham
• CSS Systems by Natalie Downe
• Designing for a hierarchy of needs by Steven Bradley

Resources

• Pattern Tap
• Empty States
• Patternry
• UI Patterns
• PTTRNS
• Elements of Design Gallery