Equal parts editor, writer, designer, and photographer. Hit me up on Twitter, or check out my photos.
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!
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.
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.
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.
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.
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.
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!
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!
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.
Today’s project is silly and fun, but it does have a real point and educational purpose. In a recent article, I explored five ways to use multiple CSS background images to create cool hover effects. I had one idea in that article that I didn’t get to simply because its complexity merited a standalone explanation.
This article then is an extension of that previous discussion. We’ll be using multiple backgrounds to create a cool cinematic effect where someone traverses a map while the vantage point zooms out. The best and most nerd-tastic way to show this off is of course to use the familiar tale of Frodo crossing Middle Earth to arrive at Mount Doom in Mordor. Let’s get started.
In web design we often focus on using Photoshop to create pixel perfect designs that are meticulously shaped and layered until they’re absolutely pristine. Repeated patterns, tiny strokes, complex gradients and reflections are trademarks of this design style.
But what if you’re going for something more organic? How can we use Photoshop to create complex and random particle arrangements that don’t look cheesy and contrived? The answer of course is to utilize scatter brushes. This awesome tool seems fairly simple on the surface but there’s a ton functionality and limitless possibilities to explore so even if you’re a Photoshop pro, read on to see some great ideas for how to use scatter brushes in your work.
“Synergy” – In business this is a term that has been so often abused that it has become a meaningless buzzword. Some of you may cringe just at the sound of it.
However, in design synergy is a powerful weapon that, when wielded properly, can make your designs much more interesting and creative. What is synergy? Where can we find some solid examples of synergy in design? How can you use synergy in your work? Read on to find out.