This set of 12 flat SEO icons is perfect for adding a light-hearted and playful tone to sites.

The flat aesthetic is set off beautifully by the modern color palette and the addition of the long shadow technique is a sophisticated touch.

Playful and approachable, the icons are useful for a number of different industries: the support services life-preserver applies to any help system; the mobile marketing icon could apply to any mobile device; and the analytics, events & targeting icons are equally flexible.

A personal favorite is the link building services icon, which features the traditional ‘link’ icon being hoisted into position by a crane. It could grace the cover of many publications.

The icons were designed by Vladislav Karpov, are delivered as vector shapes in a .psd and are good for personal and commercial use, have fun!

Pay with a Tweet

Download now

Please enter your email address below and click the download button. The download link will be sent to you by email, or if you have already subscribed, the download will begin immediately.

I agree to receive exclusive deals from MightyDeals.com and monthly/weekly newsletters from WebdesignerDepot.com. Unsubscribe at any time. Your email will not be sold/rented.

Easily Make Your Own Promotional Videos – only $17!

Combinators describe the relationship between CSS selectors, and they’re commonly used to combine two or more selectors into a more specific selector. Examples of combinators are the greater-than sign (>), plus sign (+), and tilde symbol (~). If you’ve ever worked with descendant selectors, then you’ve already used combinators because the whitespace between the selectors is also considered a combinator.

There are three other types of selectors that use combinators: child selectors, adjacent sibling selectors, and general sibling selectors. When combined with one of the UI element states pseudo-classes, we can trigger events that would otherwise require jQuery, with simple CSS.

In this article, we’ll learn how to trigger CSS animations using the two sibling selectors.

Getting Started

I created a fun “Tortoise and the Hare” CSS animation using the following elements:

<input class="go" type="checkbox">
    <img class="tortoise" src="images/tortoise.png" alt="The irate tortoise">
    <img class="hare" src="images/hare.png" alt="The boastful hare">
    <div class="road"></div>

I’ve already defined the keyframe animation sequences and attached them to their respective selectors: .tortoise, .hare, and .road. To view and learn more about the CSS used to create these animations, take a look at the style sheet.

Currently, the animations are immediately triggered by the browser because by default, CSS animations run as soon as the page loads. We want the animations to play only when triggered by a user action––like clicking a button.

Next, we’ll focus on the element states and sibling selectors needed to trigger our animations. But before we begin, let’s quickly go over how sibling selectors work.

Adjacent Sibling Selector

The adjacent sibling selector uses the plus sign (+) combinator to target an element’s immediate sibling.

The following will target only those paragraphs immediately following an h2:

h2 + p {
      color: red;
      font-weight: bold;
    }

General Sibling Selector

The general sibling selector uses the tilde symbol (~) as its combinator to target every specified sibling that follows an element. It’s very similar to the adjacent sibling selector. The difference is that the elements can appear anywhere after the first sibling.

For example, this will target every sibling paragraph that follows an h2:

h2 ~ p {
      color: red;
      font-weight: bold;
    }

What will Trigger the Animations?

Since we’re not using any jQuery, we’ll need a state (or event) similar to jQuery’s .click() event to trigger our animations.

For this purpose, the :checked pseudo-class is useful because the :checked state of a checkbox can be altered by user action––it can be toggled on and off, and we’re able to target sibling elements based on whether or not the box is checked. Perfect!

I carefully styled the checkbox element to look and work like a button that toggles its text and background colors when clicked.

The button’s text and background gradients were added and styled as generated content using the :after pseudo-element. Check out how it was done.

Using the Adjacent Sibling Selector

We’ll need each animation to play on the :checked state––or when the button is clicked, so let’s create the selector to make this happen.

The checkbox has the class name “go”, so we’ll need to add the :checked pseudo-class to the .go selector:

.go:checked + .tortoise {
      -webkit-animation: go-tortoise 6s 1 1.3s ease-in-out forwards;
    }

This selector binds the go-tortoise animation sequence to the adjacent tortoise image on :checked. View it in CodePen.

Since the hare and road elements are not immediate siblings of the checkbox, the browser is unable to target them with an adjacent sibling selector.

Using the General Sibling Selector

To target the hare image we’ll need to use a general sibling selector.

.go:checked ~ .hare {
      -webkit-animation: go-hare 6.4s 1  1.3s linear forwards,
                         hare-hop .6s 11 1.3s ease-in-out;
    }

This selector binds the go-hare and hare-hop animation sequences to any sibling with the class hare. View it in CodePen.

With the general sibling selector we’re able to trigger animations for any siblings that follow the checkbox, so we’ll create another selector that binds the move-road and rotate-road animations to the .road selector.

This will animate the background image and add a 3D perspective to the page.

.go:checked ~ .road {
      -webkit-animation: move-road 6s 1  1.3s ease-in-out forwards,
                         rotate-road 1s forwards;
    }

We can even target pseudo-elements in the latest browsers. The following selector will trigger a delayed animation that tells us who the winner is.

.go:checked ~ .road:after {
      -webkit-animation: winner 1s 7s forwards;
    }

View the final animation in CodePen

Conclusion

Support for sibling selectors looks good, as all majors browsers support them. The general sibling selector is also supported––although buggy––in IE7+ and the adjacent sibling selector works in IE8+. The :checked pseudo-class, however, lacks support in IE8 and below.

To learn more about CSS animations, check out my CSS Animations Deep Dive on Treehouse.

The post Triggering CSS Animations with Sibling Selectors appeared first on Treehouse Blog.

It’s easy to get overwhelmed by the staggering array of resources and options available to designers. In this article, we’ll explore the idea of consciously restricting yourself to a set of core tools that you know, love and trust.

Take a traditional craftsman — let’s say a carpenter. While they may have access to a wide range of tools in their workshop, they will take a bag with just a few carefully chosen tools when working away. Similarly, an artist may have a wide range of paints, brushes and accessories in their studio, but will carefully select a limited palette and a few choice brushes when painting in the field.

In the same way, as a digital designer, you should know what your most precious tools are, and keep a portable set close at hand.

Recently I’ve been doing some oil paintings outside, away from the studio (a technique called en plein air). To facilitate this, I put together a pochade box to hold paints, brushes, palette and canvas panels. This needed to be small enough to fit in a backpack to be easily portable so that I can cycle around the countryside with it. The factors of space and weight force me to select a limited palette and a few choice brushes, and the size of the box determines the size of paintings I can make.

Working outside also forces me to work quickly — there’s no time to dally and over-think things. But, rather than being restrictions, these factors become the parameters for the work, directing me to work in a certain way, and helping me to develop a personal style and approach.

Working outdoors forces you to set limits.

Working With A Limited Palette

The benefits of working with a restricted range of tools and options are that you really get to know and understand your core set and can continually refine it over time. This is the path to mastery in your chosen discipline, as opposed to being a jack-of-all-trades but the master of none.

By mastering a limited number of tools and techniques, you will develop your own personal, identifiable style and workflow. It enables you to hit the ground running with each new project, to draw on your previous experience and to get something down quickly, which you can then refine, rather than face the blank screen and not know where to start.

A Lean, Portable Toolkit

What should be in your toolkit? This will obviously depend on your particular area of expertise, whether you are a designer or a developer, and the software applications you use. Each person will have their own software preferences, so I am not going to talk much about particular applications in this article. Instead, the focus will be on areas where you can consciously refine your choice of tools and assets within applications. I’ll also look at how, once you have created this limited palette, you can access your carefully selected toolkit wherever you are.

Keeping It All Together

Keep this lean, mean toolkit in a place you can access from anywhere. My preference is Dropbox, although any cloud-based hosting service, such as Google Drive or Microsoft Skydrive, would be great. Create a folder named Design Playbook, or whatever, and add subfolders for all of the assets you want to store in there. Sync it to the cloud and you’re good to go. For text and notes, I use Evernote — again, allowing me to access it from anywhere.

A sample folder structure of the toolkit

Graphic Resources

Grabbing every free resource you come across on the Web is tempting, whether it is vector art, Photoshop brushes and actions, bitmap textures and backgrounds, fonts, etc. But the downside of amassing such a huge collection is that it can become overwhelming and can lead to a lot of wasted time looking for just the right resource. If you are a download junkie, like me, then be prepared to pare down your collection, and put the ones you love and trust into a separate folder from all of the others, which you can review from time to time. Think of this separate folder as a special place where only the best assets and resources go.

Fonts are a prime cause of bloat. Over 300 fonts are in my font library, which I manage using Font Agent Pro (available for both Mac and Windows), but I find myself using the same 10 or so for most commercial work, and many of the 300 I’ll probably never use. Sifting through all of them is a real time sink, so I have a couple of sets with all of my go-to typefaces, which I have copied in Dropbox. The same applies to Web-based type management, such as Typekit. Find great type combinations that work for you, and use them repeatedly. It’s a part of how you establish your own recognizable style. Add new typefaces to your core collection sparingly.

Brushes (which are customizable plugins to apply paint effects in applications such as Photoshop, CorelDraw and Painter) are another resource for which too wide a choice would be overwhelming and inefficient — you’d find yourself scrolling through a huge list trying to find the one you’ve used before. Don’t be afraid to trim down the brush sets that you download, deleting the ones you have no use for. Save a consolidated set of brushes as a new set to your mobile toolkit and you’ll be good to go. The same approach can be applied to symbol libraries for Illustrator and Photoshop.

Illustration is one area in which your personal style can really shine through, so build a resource of vector elements. Having a collection of killer elements on hand is a great way to dive into a project and get inspiration. I’ve been slowly adding elements to my vector doodads Illustrator file for a couple of years now, inspired by the efforts of DesignBum, who has made a number of his project files available for downloading.

Great design explorations by Issara Willenskomer (aka DesignBum)

You’ll find yourself reusing certain background elements and textures; so, again, carefully select a few ones, and add them to your toolkit. Don’t worry about overusing these images — use them in comps and mockups, and then, once you have finalized the design, if you feel that you need a fresh image, go and find one. This will save you time from hunting for new images for every mockup.

Build your own elements file.

You may find an online repository such as LayerVault or Pixelapse to be useful for storing image and vector assets, especially if you collaborate with other designers and want to share your toolkit with them.

LayerVault is version-control software for designers.

Code Resources

As with graphics, you’ll inevitably find yourself wanting to use the same bits of code from one project to the next. Rather than constantly reinvent the wheel, reuse classes and functions and keep refining them.

If you work with a language such as Java or ActionScript, which support classes, then you’ll find yourself returning to the same third-party classes and libraries time and again, so keep them handy in your toolkit, and take the time to really understand them.

For other languages, such as JavaScript, group together functions that you commonly use in a self-contained .js library file. You can then keep this as part of your toolkit, or use a content delivery network such as CDN.net, so that you can directly reference it from your project.

Add to this, of course, essential third-party libraries, such as Modernizr and Require.js — I’m sure you have your own favorites — and any add-ons, such as small JavaScript libraries. Keep them somewhere handy, to be able to quickly drop them into a project.

Another place to put code libraries and classes is on a hosted version-control website, such as GitHub, Beanstalk or, my personal choice, Bitbucket. This is especially useful if you like to tinker and refine code or if you want to share your toolkit with other developers. If you want to open-source your code and make it publicly accessible, then GitHub or Google Code is ideal.

Another place to store code is Snipplr. As the name suggests, it’s great for storing little snippets of code — for example, code to retrieve the current date — that you’ll need time and again. You can make your snippets public or keep them to yourself. Snipplr is ideal for storing those little code hacks that you keep forgetting.

Snipplr is great for storing and sharing useful code snippets.

Template Resources

Using Web templates and frameworks will help you create prototypes more quickly and will also ensure that those prototypes bear a close resemblance to your comps and mockups. Whether you develop your own framework from scratch or use a popular one, such as Foundation or Bootstrap, get to know it inside out, and keep refining it to suit your needs.

Also, build your own “boilerplate” HTML5 file, which is a minimal basic file that serves as the starting point for any Web page you create. HTML5 Boilerplate is a good place to start. You’ll also find it worthwhile to create a skeleton website, set up with a file structure for images, CSS and JavaScript. Build yourself a basic CSS file that you can drop into any project. Add it all to the toolkit.

Mastering Your Tools

It might sound like I am suggesting that you keep reusing the same look and techniques across all of your work, but that is not the case. I am suggesting that you consciously limit your toolset, and then absolutely master those tools. You can then refine them according to project briefs, client feedback and your own inclination.

Kevin Dart’s Colouroids are a great example of self-set limitations.

Keep experimenting with your favorite tools. This year, inspired by Kevin Dart’s Colouroids, I set myself a challenge to create one vector image a day, to really master Illustrator. In these self-set projects, go outside of your comfort zone and try a new approach, process or technique.

Create A Playbook

“Design today has reached the stage where sheer inventiveness can no longer sustain it.”

– Christopher Alexander, 1963

Seek to master not just your tools but also your techniques. Understanding and refining your design process is critical, and the way you work will determine the work you produce. I call this your “playbook,” the guide to your design process. Each technique is a “play,” a set of instructions to follow.

The playbook can exist purely in your head, or be as formal as you like. My playbook is a series of notes and sketches on an iPad, using Evernote and Paper. Some are simple aphorisms — “Work from light to dark,” “Remove one element” — to make me think about the way I work, a kind of personal set of Oblique Strategies, but used less to break a creative block than to reinforce a working method I trust.

Other “plays” are more practical guides, such as step-by-step instructions on how to set up event listeners, or how to optimize images, or how to change copy on a live website. Developing conscious design patterns is the key to understanding the way you work, whether in visual design, interaction design or programming.

Formalizing your creative processes, tools and techniques is a critical step in becoming a better designer or developer. Just as football teams practice their plays, practice your techniques on self-set work, ready to be deployed in client work once you have mastered them.

The playbook is also the place to refine your workflows. How do you get from a paper sketch to a working website? How do you wireframe your code? Analyzing your process is all part of the playbook.

Evolving The Playbook And The Toolkit

In addition to refining your playbook, you will also need to update it and evolve it gradually over time, adding some elements while removing others. Obviously, the world of Web design is changing rapidly, both aesthetically and technically, so make sure to update your playbook, too. And by using elements you know and trust, you are still bringing your own style, rather than slavishly following fashion.

The Path Towards Mastery

If you look at the portfolios of designers you admire, you will see common elements and ideas that unite each person’s work. This applies not only to Web designers but to graphic designers, architects, industrial designers and visual artists. While the work evolves over time, a common thread — and a conscious decision to set self-imposed limits of exploration — runs through it all. Each creator has developed and refined their own design process, which defines the resulting work, the designer’s style. Poor designers will leap from one style to another, from one way of working to another. Lacking conviction, they will follow trends and the latest fancy technique, rather than develop their own style.

Learn to limit your choices and set parameters. These are not constraints, but rather guidelines to lead you to better work. Building a toolkit and developing a playbook is a way to help you define your own style and to master the tools you need to make your work unique, personal and memorable.

(al)

© Martin Gittins for Smashing Magazine, 2013.

User experience is greatly important in the development of a website these days. A great user experience makes sure someone visit your site and enjoy every portion of it. User experience also makes sure you can maneuver around a site and find everything you’re looking for. Think about how you like the experience you partake in at a Starbucks or a Barnes and Noble bookstore. These places were made with the customer experience in mind.

UX (user experience) for web design is a combination of such skills as user interface design and interaction design. It’s about making things that make sense. Some of our favorite developments in UX include the ability for more information to appear as you scroll down a page, rather than having to click the next or “load more” buttons. Another is the ability to hit left and right navigation keys on your keyboard rather than having to click through pagination. This is effective because it makes web browsing easier and more intuitive.

Today we’ve found 15 great sites that really understand and take the time out to create a wonderful user experience. They’ve used great design, development, navigation and much more to create sites with almost perfect UX. Let’s jump right in.

Andrew Jackson

Andrew is a freelance designer based out of London. His portfolio site is absolutely wonderful. Its navigation is almost based solely off the navigational keys on the keyboard and is set up so that every time you move in a direction, there’s something there. You can move from project to project or within different parts of a specific project. In addition, the site isn’t cluttered and you know exactly where you should be.

Bakken & Baeck

Bakken & Baeck is a small agency based in Norway that claims to turn good ideas into great products. They help back up this claim by showing you some of their work. Again, you can scroll through the pages and portfolio work by using the navigational keys on the keyboard. They also focus you in on what you’re to see, which helps you maneuver and know where you’re going on this website.

David Bastian

David is a designer from Chile. Right off that bat, we have to notice David’s use of a grid and a flat color user interface for his portfolio design. It’s so clean and easy to navigate it almost feels like something’s missing. There seems to be no page to page navigation, however, David was extremely smart by creating out a fly out menu to the left of the site. It’s unobtrusive and easy to distinguish and even easier to use.

Defringe

Defringe is a site that puts together a bunch of different creative things. There seems to be a pretty free sense of what’s being covered as they offer posts on things such as architecture, photography, design and more. Defringe is a responsive web design that has the capability of being viewed with a left menu. I like this left menu because it uses motifs from music playing software to allow you to get around the site. this makes sense because, again, there’s no main focus other than to be inspired by various works.

Design Embraced

Design Embraced is the home of Art and Creative Director Anthony Goodwin. For his navigational method, he uses the left and right navigational buttons as well as the scrolling wheel available on most computer mice. This web design is a bit more exciting thanks to the use of color and large headlines. The work is still easily seen in an extremely clean environment that focuses on the work.

Eskimo

Eskimo Creative is an award winning agency based in Manchester. As a creative agency, they have to be just that in every experience they offer. Online, they do a great job of creatively presenting their work without going overboard. Viewers know exactly how to get around the site. Of importance is the transition between pages and how it’s smooth rather than a hiccup in the loading process. That makes a huge difference when you are trying to appeal to someone’s creative side.

FS Emeric

This is a website dedicated to the launching of a brand new font from Fontsmith. The font is said to be based off the future needs of different disciplines in design. Because of this, you have a creative typeface with some standard basics in fonts. This website is extremely creative and somewhat futuristic in it’s approach. The navigation is easy, it’s interesting and offers many wonderful insights into the creation of this font.

Grow Interactive

Grow is an award winning digital agency rooted in Norfolk that has a passion for big ideas and little details. The user experience over at Grow is amazing because everything feels so connected. There’s a consistent feel from the colors and photography used, to the transitions and development used for this website plus the navigation is easy and always there. This is a perfect example of a well thought out website.

Harry’s

The people over at Harry’s make high quality razors at affordable prices. They have a wonderfully clean website that focuses on the quality and ease with which one can use a razor. What caught my eye was the products drop down menu. Instead of providing me a menu with just words on it, Harry’s allows us to see the products and pricing right there. We don’t have to go to an e-commerce page to get to where we want to go, it’s available right there. 

Herrlich Media

I’ve heard many people echo the sentiment that art and design easily transcend the boundaries created by different languages. Herrlich Media’s website is a wonderful example of this. As you may try to translate the page into broken English, you can still tell very easily what the purpose of the site is, where you need to go and you get a good idea of what happens at this small agency. The user experience is fun and fulfilling as well.

Moorgate Exchange

It’s no secret that I believe video is the future of web design, and this is a great example of why. The video on this home page creates an atmosphere and experience for any one person who comes to visit this site.  Also, when you get to the site, there’s no confusion about what the Moorgate Exchange is; we’re immediately are told what it is and where it’s located. Continuing with the site is as simple as pushing the up and down keys and all the information is easy to see.

The One Club

The One Club is a website and organization that caters to young professionals in the advertising and creative arenas. They employ some really unorthodox versions of navigation, mainly with the implementation of horizontal scrolling from page to page. This helps create an experience that says the One Club is all about innovation and what’s next, rather than what’s hot for now.

Ony Agency

Ony is a Russian agency that combines high expertise in branding with digital experience. It’s hard not to believe this when they have such a wonderful experience for their own website. The transitions are smooth, the navigation is easy and understandable and the design work is clean and simple. Everything makes sense and is detailed and well planned.

Venables Bell & Partners

To simply put it, this website is lots of fun to interact with. There are lots of fun hover effects, scrolling effects and visual graphics that really make this site a pleasure to look at and share. Venables Bell & Partners has created  a site with a wonderful user experience that makes users want to share it and get others involved.

Conclusion

UX is as simple as making an online, digital world as human friendly as possible. Think about your favorite websites and even apps and think about what makes them easy to use and what could make them easier. Try to apply these things to your next project. The design and the development will come along easily when you really plan on creating a beautiful experience first and foremost. 

Which of these sites is your favorite? Do you have a favorite UX-rich site that we missed? Let us know in the comments.

Oops! An Error Occurred

The server returned a “500 Internal Server Error”.

Something is broken

Please e-mail us at [email] and let us know what you were doing when this error occurred. We will fix it as soon as possible.
Sorry for any inconvenience caused.

What’s next

• Back to previous page
• Go to Homepage