Category: Articles

Categories

activetut-f
CSS / 11 Jan 2012

Build a Fun Trivia Game With the CSS Active Selector

We’ve done a ton of fun stuff recently with the :hover selector. From button hover effects for beginners to more advanced hover tutorials and even onto using hovers with multiple backgrounds. Today we’re moving on and learning about a related but equally awesome selector that often gets overlooked.

With :active, we can control the state of an object while it’s being clicked. Typically, this takes the simple form of changing a link’s color while the mouse is pressed down, but we’re going to do something much more interesting. Follow along as we build a super cool, pure CSS presidential trivia game.

digicard
Articles / 10 Jan 2012

Is It Time for Your Business Cards to Go Digital?

Are traditional paper business cards becoming obsolete? Have you considered a digital option? The type of card you use and how it looks can say a lot about you and your work. The style of card – from simple embossed text on a white card to ornate colors and fonts – can be a client’s first impression of your work.

You want to use a card that represents your style and works with the kind of clients you work with. When looking for a business card, consider both digital and paper options and integrate your digital self into paper cards. A business card does more than provide your contact information, it is a gateway to your portfolio as well.

photoshopdonts-f
Graphics / 9 Jan 2012

5 Former Design Trends That Aren’t Cool Anymore (So Stop Using Them)

If you’re like me, looking at your own design work from a few years ago can often result in some laughable or even cringe-worthy moments. Design styles have been steadily evolving and most of us can’t help but be affected by these changes. Who among us hasn’t piled on the cheesy Photoshop layer effects, all the while thinking the result was downright awesome?

However, some of us are a little slower to evolve than others. Today we’ll be taking a walk down memory lane and looking at five design trends that used to be super cool, but now simply tend to make your design look outdated and even ugly. If you’re currently still stuck on these trends, it might be time to move along! We’ll help you out with some modern alternative practices that you can use to bring your design skills into 2012 in a hurry.

DSCRT-74-f
Critique / 7 Jan 2012

Web Design Critique #74: Pergola Farmhouses

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 Pergola Farmhouses. Let’s jump in and see what we think!

wf-sprites-f
Freebies / 6 Jan 2012

Weekly Freebies: 12 Free CSS Sprite Generators

CSS image sprites allow you to dramatically reduce the number of HTTP requests on a site by combining many or all of the images on your site into a single file. This file can then be used in conjunction with CSS background positioning to implement individual images.

The downside of this technique is that it’s a painstaking, involved process that requires you to manually combine your images and fiddle with the CSS to get each image to display properly. Fortunately, there are a number of free online tools that completely automate this process. Today we have an awesome collection of twelve of these tools, each with its own unique take on the sprite generation process. Whether you’re looking to create a sprite from a folder of images or convert an existing site, we’ve got the tools to help you get the job done in seconds flat.

smallvlarge-f
Business / 5 Jan 2012

Know Your Weaknesses: How to Improve Your Creative Review Process

Every designer has to answer to someone. Freelancers turn their work in to a client, company guys hand theirs over to a team or supervisor, there’s always someone next in the chain of command that gets to take a look and offer an opinion. It’s at this point that the initial draft ends and the creative review begins.

This critical point can have a dramatic effect on the future of the project. Sometimes this is a good process that takes the piece to new heights that it could’ve never reached without some fresh insight. Other times the creative review process kills the genius of the initial draft and results in a misguided final product. One factor that plays a key role in this is the size of the review team. How many people should review a design and offer ideas? Should it be a small team? What are the pros and cons of each? Let’s discuss.

typeperspective-f
Typography / 4 Jan 2012

Typography With Perspective: Learn to Wield Illustrator’s Perspective Grid Tool

Today we’re going to take a look at how to use the Perspective Grid in Adobe Illustrator. This awesome and fairly new tool allows you to automatically flow vector elements onto a prebuilt three dimensional grid.

You might think that you need to be an artist to use this tool but there are in fact all kinds of practical uses for it in every day design. We’ll use it to lay out some type like in the example above.

responsivegallery-f
CSS / 3 Jan 2012

How to Build a Responsive Thumbnail Gallery

Recently I set out to build a responsive thumbnail gallery. I expected it to take me a few minutes, but in reality it took me a few hours to work through. We’ll walk through a similar process today to help you get your mind wrapped around how it works.

One major component of mastering responsive design is to figure out how to approach specific tasks and adjust to problems as they arise within the context of larger projects. One day you’ll be working on a project and will need a responsive gallery and you’ll remember this post on that very topic.

mouseinout-f
CSS / 2 Jan 2012

Mastering Mouse Enter and Exit Events With CSS Transitions

While working on a recent post that utilized CSS transitions, I stumbled upon some interesting revelations completely by accident. Switching up where you place the transition syntax can have a dramatic effect on how the transition is carried out.

Today we’re going to go over the various options for CSS transition syntax and how each affects the animation given whether your mouse is entering or exiting a hover.

DSCRT-73-f
Critique / 31 Dec 2011

Web Design Critique #73: Prezzybox

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 Prezzybox, an online retailer. Let’s jump in and see what we think!

wf-paint-f
Freebies / 30 Dec 2011

Weekly Freebies: 50 Prime Paint Textures

2011 is drawing to a close and we have time for one more freebies post. Here are fifty awesome cracked and peeling paint textures to help make your designs a little more interesting.

All of the images in this post are Creative Commons-licensed content for commercial use, adaptation, modification or building upon. Just be sure to provide a link back to the original image author and you should be able to use them however you want!

behancetype-f
Typography / 30 Dec 2011

60 Absolutely Stunning Typography Projects

One of the best ways to get pure, unadulterated design inspiration is to look at a great collection of typographical art. The techniques, craftsmanship and gamut of visual styles is always enough to kick in the creative side of your brain and lead you to some incredible new ideas.

Today we’ve got sixty mind-blowing examples typographical art handpicked from Behance. In this post you’ll find branding concepts, free fonts, handcrafted goods and more.