Articles Archive

Animating Personal Skill Bars With CSS3 Keyframes

Animating Personal Skill Bars With CSS3 Keyframes

tutorial screenshot css3 keyframes animated skill bars

This design technique is commonly found on personal portfolios or design studio websites. Skill bars represent a level of knowledge related to certain tasks – web design, illustration, branding, character design, you name it! Adding some fancy animations to these skill bars will provide a quicker connection to the viewer.

In this tutorial I want to demonstrate how you can build CSS3 skill bars using keyframe animation. This is also completely possible to run using JavaScript, which would hold up stronger in older legacy web browsers. However CSS3 keyframes are growing in popularity with much wider support these days. Take a peek at my live demo to see the final product.

January 2nd, 2014 Posted in CSS
ds.contract

Design Dilemma: A Client That Wants a Contract?

ds.contract

Has the apocalypse come upon us? A client wants a contract and isn’t relying on the line, “you can trust me” … mostly because it’s a case of them not trusting you. Still, a contract is a contract.

Margaret A. writes: Hello, I have recently decided to start my own company. I had a whole load of ideas, but not the skills to put them to paper, so I am hiring an lllustrator. I am a very small business with no name and don’t know how copyright works. I was hoping that I could write out a contract stating that she cannot claim the designs are hers, how does this work?

Join us as we delve into another Design Dilemma, helping to answer your questions, queries and concerns about the murky world of design…

December 30th, 2013 Posted in Design Dilemma
ux-lede

Why Does User Experience Matter?

ux

User experience – notably poor user experience – has been a hot topic in recent months with the much-publicized launch of HealthCare.gov and its subsequent issues. User experience is a part of the design process that you don’t hear about unless something goes wrong. But it is something that should be an integral part of the design process, from early concepts to the final product.

So with this renewed – and very public – discussion about user experience, why does it matter to designers?

December 30th, 2013 Posted in Articles
inconsistentdesign-00

6 Famous Logos That Leverage Inconsistent Design

screenshot

One of the most powerful tools that you can use to improve any design is repetition. Repeating colors, shapes and other visual elements throughout a design increases consistency and familiarity so that the design feels more attractive.

But what about the flip side of this idea? Is it possible to wield inconsistency in such a way that it improves the quality of a design? It turns out that lots of well known logos use this very tactic. Read on to see what they are.

December 29th, 2013 Posted in Graphics
orchid-lede

Radiant Orchid Named Pantone Color of the Year: Now What?

radiant orchid

Unless you have been hiding from the design community for the last few weeks, you know that Pantone released its annual color of the year: Radiant Orchid.

The reviews are mixed. But there really are a lot of ways to incorporate this color into design projects if you want to be on-trend, and enjoy the challenge of crafting a design around a specific color!

December 19th, 2013 Posted in Inspiration
animated-page-elements-preview

How to Design Animated Sliding Page Elements With CSS

tutorial screenshot css3 transition animated page elements

There’s a recurring trend of using animated page elements in web design at the moment — as you scroll down the page, items will naturally animate into view. These animations only happen one time, and they only begin once the element is within the browser viewport.

I’ve explored this concept a bit using jQuery, along with CSS3 transitions. In a nutshell, this script checks for special classes on the page and uses jQuery to append a new class for transition effects. Those elements which have already animated are then removed from the event handler. And once there are no more elements to animate, the event handler is completely removed until you refresh the page. Take a look at my demo example to see exactly what we’re creating, and follow along!

December 16th, 2013 Posted in CSS
ds.crimescene

Design Dilemma: What Is Too Rough When It Comes to Getting Paid?

ds.crimescene

No one truly knows the exact reason people don’t want to pay for design work. Is there just some inner hatred for creatives? Were most clients the kids in school who told on us to the teacher because we were drawing in our notebooks, instead of taking notes on Algebra, which as we now know, is useful every waking moment of our lives?

Atara P. writes: ”My dilemma is more of a question about a method that I used recently to get an unresponsive client to pay up, and if it’s a tactic that’s ok to use?” Sounds delicious and evil! Let’s all take a look, so join us as we delve into another Design Dilemma, helping to answer your questions, queries and concerns about the murky world of design…

December 13th, 2013 Posted in Design Dilemma
2013-gift-guide

Gift Guide for Designers – The 2013 Edition

gift guide

What do you get for the designer who has it all this holiday season? The options are almost limitless with so many cool items out there for work and play.

From items under $10 to some rather pricey toys, Design Shack has the perfect gift ideas for every creative on your list this year. There are also plenty of digital options that are great if you have waited until the last minute to start shopping. (The hardest part will be not buying everything for yourself.) Happy holidays… and happy shopping!

December 11th, 2013 Posted in Inspiration
breakingtherules-0

Breaking Design Principles on Purpose

screenshot

Rules. They keep our designs clean, consistent, aligned, and focused. The core principles upon which good design is built are absolutely essential to the education of any designer.

The great thing about design rules though is that they can and should be broken, granted that you know what you’re doing. Read on to see some examples of effectively breaking design principles in order to improve a project.

December 6th, 2013 Posted in Graphics
featured-hover-details-panel

Building a Hover Detail Panel With CSS3 & jQuery

tutorial hover details product jquery css3 howto preview screenshot

Many online shops and e-commerce websites use a small details panel to offer more information about a product. I remember this from the early days of browsing Template Monster, and it has grown into a common trend for modern web designers.

In this tutorial I’d like to explain how we can duplicate this effect using some very basic code. I’ve provided two different versions, one built on jQuery and another built using CSS3. There are benefits to each one and you can download a copy of my tutorial code to see which you would prefer.

December 5th, 2013 Posted in CSS
Subscribe
Membership