12 Designs That Inspire Me To Do Better

Posted: 24 May 2012 05:30 AM PDT

I come across a lot of different designs as I wander my way through the web. When a design inspires me in some way I take a moment or two longer than usual to enjoy it and then record the URL somewhere so I can go back again. I thought I’d share a few of these sites with some thoughts about why I like them.

I’ve grouped the designs into several categories, but these designs generally do more than one thing well. The organization is more for me to talk about them. You can click any of the screenshots in this post to be taken to the original page.

Grids and Organization

The designs below get more than grids right. However I think each uses a typographic grid particularly well and so have grouped them together here.

Pelican Fly

Pelican Fly does so many things right in the design. Sam Quayle’s site makes great use of space and the typography is beautiful throughout. On the home page below you see multiple columns that use justified text as well as a column that’s been right aligned. There’s a nice letterpress effect, drop caps, and a clear hierarchy.

All done with limited use of color and graphics I might add.

I think it’s a good example of how a grid can help organize information, while still offering variety for how and where to place content. Compare the screenshot above and the one below. Both pages are built on the same grid, but you can see how different the designs are as far as where content is located.

The site is also responsive and different grids are used at different breakpoints. From smallest width to largest, the grid moves from 3 to 6 to 9 to 13 columns.

Dowling Duncan

The home page of the Dowling Duncan website (not shown) offers a 4 column grid of images in it’s content ares. Below are two interior pages for the site; the profile page and the awards page. The grid here is a multiple of 5 columns, one for the navigation on the left and the other 4 for the main content.

Once again if you compare the image above with the one below you can see the flexibility for placing content within a single grid.

The positive and negative space differs on the two pages creating a unique flow and balance for each. Still common design elements like the navigation and the social media bits at the top are consistently located making them easy to find.

Shaping the Page

Shaping the Page (designed by Andy and Emily Johnson) is one of my more recent finds. While I’m only showing the home page here, I think you can again see how much flexibility there is in a typographic grid. Using a grid doesn’t mean a design has to be boxy. Content can be placed in a variety of ways to create different shapes on the page.

While I’m focusing on the grid there’s much more to this design. I’m a big fan of muted colors for one and the textures for two. The type makes use of a letterpress effect and a baseline grid. If you check the site you’ll also notice there’s a lot of attention paid to each detail of the design.

There’s even some fun stuff going on. Mouse over the elephant and creatures on the other pages to see what I mean.

Nadine Roßa

The site of Nadine Roßa is another newer find after I watched this presentation she gave about the German letter ß (please don’t ask me to pronounce it). Here the grid is based on 4 columns and while it might not offer as much variety as the designs above, I think you’d agree it creates a sense of order and simplicity.

And much like the designs above it has more going for it than a grid. The illustration is nicely done, space is used well, color is used effectively and there’s a clear hierarchy in place. And of course the design features great typography which you would expect from someone who’s written a book about a single letter.

Responsive Design

Once again don’t let the heading of this section fool you. The sites below inspire me for many more reasons than simply being responsive. The 3 sites below are all built on grids, do a great job working with type and color and on and on. Let’s focus though on how each adapts to different screen sizes.

Colly

Simon Collison’s site might be one of the poster children for responsive design. It was certainly one of the earlier examples to gain prominence. If you read Simon’s post on redesigning the site, you’ll see his theme was to create a modern version of an old-fashioned Edwardian gentleman’s journal. I’d say he succeeded.

Above is the home page as seen in a wide screen browser. Below is the top of the same page at around 800px. Based on the site’s css, the transition happens at 1024px. 4 columns have become 2 and if we continued reducing the browser width we’d find a single column.

Now let’s compare Simon’s bio page at full size and reduced to around 480px wide. I’ve removed the boilerplate from both images and captured only the top of the content on each page.

Above you see the content to the right and a sidebar to the left including some navigation, an image of Simon, and the start of a testimonial. All of this information is an aside. The links point to content further down on the page and neither the image nor the testimonial are of vital importance.

At lower width the aside is removed to allow the content to fill the screen. The image above shows the very top of this content. The general approach here is to put the content front and center and remove superfluous information for smaller widths.

Simple Bits

Dan Cederholm’s site Simple Bits is another of my favorites and also another potential responsive poster child. It’s one of the earlier responsive designs I remember coming across. One of the things I noticed that Dan has done is resize the font depending on the width of the device. It’s hard to show in the images here so I’ll let you visit the site to see.

The image above is Dan’s work page seen at widescreen. Let’s focus on the footer for a moment. There’s a left and right column of information and the left column is further split into 2 columns.

Below is the top half of the footer around 650px wide.

Notice how it starts with the about info from the left column and then includes all the content from the right column. Below is the remainder of the left column, the two columns with links to Dan’s books, his recent work, the site archives, etc.

As the browser width is further reduced these too move toward a single column of information. In Dan’s case with the footer he’s kept all the information across different widths and integrated the information from both columns into a single column. Another approach that like Simon’s site above continues to look great at different widths.

Jessica Hische

Jessica Hische’s site is another well done responsive design. I want to especially call out the type on the site. I often come back to Jessica’s site for the typography alone. Below is a recent blog post seen at widescreen.

Below is the top of the same post seen around 730px wide. Notice how most of the left column has been dropped. The logo is still present in slightly different form and the navigation is now below it.

Reducing the browser width further, a couple of links have been removed and Jessica’s name has been added to the branding. She’s taking a similar approach as Simon in offering different content to different devices.

To really see the difference compare the image above and below of Jessica’s contact page. Above it’s accessed through sub navigation under the About link. Below is the same page seen around 420px wide, which is the entire About section.

Different approaches to how to deal with content and layout at different breakpoints. All 3 sites look and work great regardless of device width and each has lessons to offer for how to design responsively, in addition to all the other things each design does well.

Color Scheme

While different colors and color schemes can communicate different things, color is also very subjective. We all have preferences. Mine are for muted colors, usually earth tones. Yours might be completely different. As someone who still has difficulty getting the colors I want in a design I marvel at the abilities of others who can.

Joshua Sortino

Given my fondness for muted colors it shouldn’t be a stretch to understand why I like the color scheme Josh Sortino uses on his site. Not quite the earth tones I prefer, but still a muted palette that works very well.

The cooler blue is used as background, which makes sense as cooler colors tend to recede. Warmer colors, which come forward are used to attract your attention to different parts of the page. None dominants to the extent that it overwhelms the other colors and everything clearly stands out.

Of course there’s more to like with this design than the color scheme. I’ll leave it to you to check the site, but when you do pay attention to all the different details in the design.

Capitol Couture

I was recently pointed to this site for The Hunger Games. I haven’t seen the movie or read the book, but I keep coming back to the site to look at the design, mainly for the way the design uses color. Again colors are muted, though this time there’s a darker mood to everything, which I’m guessing plays well into the story’s theme.

There are small splashes of color (the numbers in the navigation, the logo, and the buy tickets button) that draw your eye to important content. There’s a subtle use of texture and light that create interesting details drawing the eye as well. The colors here may not stand out as much as in the designs above and below, but the color scheme stands out to me for the mood it sets.

You Know Who

The colors of Sarah Parmenter’s website are more vibrant then the sites above, though still on the muted side. I think it’s the use of pink that adds to the vibrancy. Regardless the colors work very well together and are among the first things I noticed about this design.

While I’d be lying if I said pink was among my favorite colors, I’m finding myself more and more drawn to sites that use it as an accent color. It tends to attract the eye as much as red does, though in a less aggressive way.

Sarah’s site offers much beyond color. One of the things I particularly like is the 40s or 50s theme running through the images. They come across as both conservative and playful at the same time.

Heightened Creativity

All of the designs here are creative, but these last two take the creative up a notch, albeit in different ways. Both are fun sites to explore.

Hugs for Monsters

For some reason I’m usually not a huge fan of illustrated sites, but I really like the way Joe Lifrieri uses illustration on Hugs for Monsters. Joe is an illustrator so it makes sense to show off some of his skills in the design.

The illustration doesn’t feel overwhelming here like I’ve seen in other designs that use it. Everything seems to fit from the main header illustration to the logo to the hand drawn type used in the headings and navigation

Of course there’s still a grid in place, good use of texture, and the same muted colors you now know I prefer. One touch I enjoy about the colors is that the entire scheme is shown in the border just above the footer.

Mostly though if you click through and visit the site you’ll find it’s filled with creative touches and the design shows a great deal of personality. Take a look at Joe’s about page below with it’s not safe for work heading. More illustration, a unique layout, and even more interesting subheadings like “Cool Story Bro. Can I Just Get A Quick Bio?”

Do look at the site and check out the work in Joe’s portfolio.

Worry Dream

Worry Dream is the site of Bret Victor and it’s one of the more creative sites I’ve come across. I found it after watching this presentation which I highly recommend. I’m not sure the screenshots will really do the site justice. You’ll have to visit it to see some of what makes it so interesting and unique.

The site is clearly creative. The design wouldn’t work for all sites, but here it’s meant to show off some of the work Bret has done and that work is often very creative. The site is fun and there’s a great sense of whimsy as you click around.

The same things I’ve said above about other sites apply here as well. There are interesting textures and colors. The type works well and there are new and interesting details everywhere you look.

The site is very interactive. This isn’t your grandfather’s static content. As unique as the site is, it’s surprisingly easy to navigate. Ultimately the more I click the more I hear myself saying and thinking “Wow!”

Again, not necessarily a design you would emulate for an ecommerce site, but one with interesting things to see around every click.

Summary

These are far from the only sites that inspire me, but each of the designs here inspires me in one or more ways, usually more. They’re a few choice selections from all the different designs I’ve collected.

Some of the reasons for the inspiration is subjective. I happen to like muted colors so designs with muted colors are more likely to inspire me than sites with brighter palettes. Some of the reasons though are more objective, like the use of a typographic grid as the foundation for good design.

What I like most about all of the sites above is that they tend to follow solid design principles underneath and then then find a way to offer something unique on top. The stuff on top is what tends to wow, but it can only wow us if it’s gotten the foundation below right.

That’s a few of the designs that I draw inspiration from and wish I had the skills to emulate. How about you? What designs inspire you the most?