Category: Articles

Categories

Inspiration / 28 Jun 2012

The 30 Best Web Design Gallery Picks of 2012

We’re well past the half way point of 2012, and it’s been an absolutely amazing year for web design. CSS3 and HTML5 are at the height of their game, responsive design is the poster child of modern web practices and we’re beginning to wrap our minds around new concepts such as serving up retina quality images to high resolution devices.

With all of this great stuff happening in the industry, the Design Shack Web Design Gallery is positively bursting with awesome new inspiration and I think it’s a great time to highlight the best sites that we’ve seen in 2012 so far. Read on to see our hand-picked selection of the thirty best sites submitted this year.

Software / 27 Jun 2012

Brackets: Adobe’s Innovative Text Editor Project

Unlike Apple, Adobe seems to love sharing its product ideas when they’re in their infancy. This is both a good and a bad thing. As a user, it’s fun to see what Adobe has up its sleeve. Admittedly though, it’s frustrating to spend time working with a project only to see it vanish completely, never to come to full fruition. There’s also the frustration involved with using any sort of early beta project. Allowing users to check out the barely functioning version of your product might dissuade them from ever trying the finished one.

For better or worse, Adobe often shows its burgeoning products to the public, and the latest app in this trend is a text editor called Brackets. Adobe claims this new text editor will be innovative, open, focused and extensible. Will brackets live up to these lofty promises? Read on to find out.

CSS / 26 Jun 2012

Pull Off Awesome Scroll Effects With Stroll.js

Scrolling effects are all the rage these days. As the user moves down the page, content does more than move up the screen, it comes alive and becomes more interesting. Unfortunately, there’s no easy way to pull these effects off with pure CSS. If you don’t know JavaScript, you’re out of luck.

That’s where Stroll.js comes in. It’s a super easy to implement library that makes applying mind-boggling scroll effects a breeze. All you have to do is paste in a couple of brief lines of JavaScript, the rest is all handled with HTML and CSS. Keep reading and I’ll show you how it works.

CSS / 25 Jun 2012

Build an Awesome CSS Slider With Four Overlays

Today’s project is a fun one. We’re going to build a standard CSS image slider with a twist: the visible image area will be divided into four distinct sections, each with a hidden message that is revealed when the user hovers over it.

The ultimate effect is pretty awesome and I think you’re going to like it a lot. Along the way we’ll play with some animations, transitions, positioning contexts and a lot more. Let’s dive in and get started!

CSS / 20 Jun 2012

Meet CodePen: Dribbble for Coders

If you follow Chris Coyier on Twitter, then you have no doubt seen quite a few mentions go by in recent months of a not so secret project called CodePen. Chris promised us that this new tool would join the ranks of jsFiddle and Tinkerbin, serving as a sort of online playground to experiment with and share CSS, HTML and JavaScript demos.

Like a kid in December anxiously awaiting Christmas day, I’ve been dying to see what Chris and his team would come up with. Fortunately, Christmas has arrived. CodePen is a live project and I can’t wait to tell you all about it.

Software / 19 Jun 2012

Adobe Creative Cloud: Is Subscribing to Software a Good Idea?

Fresh off the heels of purchasing my new MacBook Pro, I decided that it was time to make the jump to CS6. This of course brought up a critical choice: how should I purchase the software? These days Adobe provides you with a plethora of options for getting your hands on their apps and choosing the best method for you isn’t always easy.

The newest method of obtaining the Creative Suite caught my interest right away: Adobe Creative Cloud. Under this model, you’re really leasing the applications instead of buying them. Is this a good idea? Is Adobe Creative Cloud worth it or is it a short term convenience that turns into a long term nightmare? Let’s explore.

Critique / 16 Jun 2012

Web Design Critique #81: Amilova

Every week we take a look at a new website and analyze the design. We’ll point out both the areas that are done well in addition to those that could use some work. Finally, we’ll finish by asking you to provide your own feedback.

Today’s site is Amilova. Let’s jump in and see what we think!

JavaScript / 15 Jun 2012

Developing a Mind-Blowing Personal Portfolio in 3 Weeks

So you decided you are going to design and develop yourself a personal portfolio. That’s great! You are well ahead of half of the web design and development community. But what about the remaining 50%? You have to show exclusive skills in a tiny space in order to shine in this fast growing industry.

In the past 3 weeks – since I made that decision, I learned a lot about developing a unique portfolio. Now I feel it is time to share this newly acquired knowledge with you.

What I came up after those 3 weeks is a cool game-inspired portfolio.

Reviews / 14 Jun 2012

Use the Print Handbook and Never Screw Up a Print Job Again

Print design is an entirely different beast than web design and it comes with its own set of unique challenges. You might think it sounds simple, but the knowledge required to pull off print jobs with a high degree of success is staggering. You have to understand how different inks will be affected by various types of paper, whether or not small type will be readable in the color that you’ve set it, how to set up your file properly for commercial printers, and a lot more.

Whether you’re a seasoned print pro or a complete beginner, it’s actually pretty easy to screw up a print job, and unlike digital design, there’s no undo or simple updates. Today we’re going to check out an awesome tool that will help you get it all right the first time around: The Print Handbook.

CSS / 13 Jun 2012

CSS Hat: A Magic Button That Turns Photoshop Styles Into CSS

Taking a design from Photoshop to the web in a click is not even a remotely new idea. For as long as there have been “web designers” there has been the dream of such a workflow. Today we’re going to look at yet another tool that makes this promise: CSS Hat.

CSS Hat is different than other apps that you’ve seen though. It’s not a full blown WYSIWYG aimed at allowing you to build an entire site without writing code, rather it’s a way to bust out a few quick CSS3 styles on a single element using the process that you’ve used for the past decade or more, right in Photoshop. Spoiler alert: it’s good. Really good. Read on to see why.

Business / 12 Jun 2012

You’re a Designer and Don’t Have a Website? Get Started Now

It is still hard for me to imagine that there are print and even web designers who don’t have their own websites. It is imperative in today’s business climate that everyone has a digital portfolio and that it is up-to-date. The hard part is just getting started.

What you don’t need is a world-class website filled with animations and color and gimmicks. What you do need to have is a clean, easy to navigate site that showcases your work. You can go all out and design a site from scratch or for a quick fix, use one of the many (and often free) host sites available to create get your portfolio and be online by the end of the week.