Articles Archive
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!
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.
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.
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.
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.
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.
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!
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!
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.
Journey Into Mordor With CSS
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.
Categories
- Accessibility
- Business
- Competitions
- Critique
- CSS
- Deals
- Design Shack
- Freebies
- Graphics
- HTML
- Inspiration
- Interviews
- JavaScript
- Layouts
- Navigation
- PHP
- Reviews
- Shots of the Week
- Software
- Typography
- Web Standards
Or view our extensive archive of community news and links.
