Articles Archive


How to Code a Hover-to-Animate GIF Image Gallery

tutorial screenshot animated gif hover gallery with jquery

Animated GIF images are popular on the Internet because they can be easily shared and consumed rather quickly. Using basic HTML you can embed images into a page which feature animation, without relying on any other technologies. Granted – there are plugins for animating sprites or backgrounds – but GIFs are a totally different concept.

In this tutorial I want to demonstrate how we can build an image gallery which optimizes the display of animated images. You can see a very similar feature on Giphy which is also where I downloaded the images for my demo. I am coding my own method which doesn’t exactly follow the same process as Giphy – but the end result is practically identical and works great for all modern browsers.

October 16th, 2013 Posted in JavaScript

Design Dilemma: Entering the Creative Field Later in Life

Ellen T. Writes: I’ve been laid off from my job that I’ve had since I graduated high school, and decided to follow my heart, and pursue design as my new career. I’ve always loved design, and feel I have a real knack for being creative, deep down in my soul. My question is; where do I get started? I’m 49, so I realize I’ll be the oldest student in art school (which school should I attend?), and will I need to buy a big computer, or can I just draw things, and have people at the client’s business put it all together? I really want to be a designer! Can you help me?

Well, Ellen, it’s not going to be easy, and your age, and lack of experience will make it very difficult. But, there are those, throughout history, who have started successful careers later in life. I’m not going to sugarcoat the road ahead of you, so, for anyone who is considering starting a new career, whatever it may be, join us as we delve into another Design Dilemma, helping to answer your questions, queries and concerns about the murky world of design…

October 15th, 2013 Posted in Design Dilemma

How to Pull Off a Tilt Shift Effect With Webkit CSS Filters

css tilt shift

Thanks to mobile image editing apps like Instagram, the faux tilt shift fad seems to be at its height. But why should we let iPhones have all the fun? Let’s bust out a tilt shift effect using pure CSS.

In this tutorial, we’ll learn all about the new CSS filters in Webkit and how to implement an image mask in CSS. We’ll then use these techniques for our final tilt shift effect. We’re going to hit on all kinds of crazy stuff so read on and we’ll have some fun.

October 11th, 2013 Posted in CSS

Build a Guided Registration Form With jQuery and Progression.js

tutorial screenshot progressionjs guided registration form

Signup forms are all too common when building new web applications or social networks. Traction from user signups can really boost your own self-confidence about a project when it comes to launching a new website. But what can you do to help improve the signup experience and hopefully gain more interested users?

In this tutorial I want to demonstrate how we can build a guided registration form, offering tips to users as they fill out each field. I have included some of my own custom jQuery along with a plugin called Progression.js. This is a powerful tool which offers a step-by-step tooltip using hints to direct users along the way. Feel free to download a copy of my source code and check out the live sample demo below.

October 10th, 2013 Posted in JavaScript

E-Commerce Website Design: 10 Interesting Examples


E-commerce design is one of the most common – and sometimes most overlooked – types of design project. Just think of how often you click “buy now” on a website.

But what makes it work? Of utmost importance in e-commerce design is user experience and the purchase flow, but more and more sites are also beginning to develop awesome design schemes as well. Here, we’ll look at ten e-commerce sites that function well, and also look fantastic.

October 8th, 2013 Posted in Inspiration

Designing With Circles: Tips and Advice

circle design

Once shunned by designers, circles seem to be making a comeback. The perfectly round shape – and its oblong counterparts – can be difficult to work with. The shape does not stack as well as the more standard rectangle and creates a much different overall feel.

The circle is a perfect shape, meaning that it is the same no matter how you look at it. It is complete and in harmony with nature – consider how many natural elements are circle-based. So, as a designer, how can you make circles work for you?

October 3rd, 2013 Posted in Graphics, Layouts

5 Traits of Successful Minimalism


At first glance, minimalist websites might look like they’ve just been slapped together as quickly as possible. After all, they’re plain and simple, and most people tend to associate lots of detail with good craftsmanship. But the same rules just don’t apply to the online world.

It only takes a small amount of user interaction to quickly reveal the quality of a minimalist site. This is because the original idea that fueled the rise of minimalism was that functionality is inherently beautiful. A design that clarifies and reveals the structure of a website can be just as appealing as one that obscures its purposes behind fancy decorative additions. Furthermore, it often yields a much better user experience, because those unnecessary distractions are eliminated.

October 2nd, 2013 Posted in Graphics

Our Latest Membership Benefits on Creative VIP (and a 48 Hour Offer!)


In July, we introduced a new membership club for designers and creatives — Creative VIP. Since the launch, we’ve been working hard to increase the collection of exclusive discounts, benefits, and resources offered to members. MediaTemple, FontDeck, GatherContent, PixelKit — the list of benefits for our members keeps growing every week.

It’s been a pleasure getting to know some of our first members over the past few months, and we’ve been thrilled with the response so far. We’d like to give you a quick update on some of our new benefits and discounts today, as well as a one-off, 48 hour discount, if you’re thinking of joining.

September 30th, 2013 Posted in Design Shack

Build an HTML5 Form With on-Off Input Sliders Using jQuery

tutorial on off sliders input jquery plugin

Mobile app interfaces have been utilizing on/off sliding switches for a while. These are most commonly found on the settings page where users can update preferences for their account. But web designers have taken notice and have built many open platforms to generate your own on/off switch sliders.

In this tutorial I want to look specifically at the jQuery Toggles plugin developed by Simon Tabor. It comes with 5 pre-designed UI themes which you can easily update. Plus, you have the option of triggering click or slide events, which may also tie into a form checkbox on the page. Anyone running a modern JavaScript-enabled browser should be able to experience the full effect. Take a peek at my live demo to catch a glimpse of what we are building.

September 25th, 2013 Posted in JavaScript

Pros and Cons of Working With Design Kits

design kits

Design kits seem to be everywhere these days. From UI kits, to templates and grids, to complete design kits, what makes these tools so popular (and what are the disadvantages)?

Today we’re going to take a look at the pros and cons of using different types of design kits, and even show you a few kits in the examples that might be worth trying out for various purposes.

September 23rd, 2013 Posted in Graphics