Joshua Johnson

Equal parts editor, writer, designer, & photographer. Hit me up on Twitter, read my Mac tutorials or check out my photos.





Inspiration / 12 Sep 2012

53 Outstanding Works of Art Made With Paper by FiftyThree

Paper by FiftyThree has become the reason that I reach for my iPad lately. It’s simply an amazing outlet for creativity that strikes an unrivaled balance between artistic freedom and simplicity. If you haven’t gotten your hands on it yet, you’re missing out.

Designers, painters and even wannabe artists like myself are flocking to Paper and churning out truly outstanding works of art. Today we’re going to take a look at fifty-three of the best Paper sketches and paintings that I’ve seen.

HTML / 11 Sep 2012

Transform Your Designs Into Coded HTML Emails With Mailrox

Coding HTML emails sucks. In a time where we’ve become so ingrained with web standards and CSS-based layout, jumping back in time and coding up table-based layouts with inline styling feels downright icky. In fact, there are tons of web designers who haven’t even been around long enough to be familiar with how to code this way.

Today we’re going to take a look at a new tool that promises to make life much easier for HTML email designers. With Mailrox, you upload your design, slice it up and easily transform it into a working HTML email.

Software / 10 Sep 2012

The Master Guide to the Photoshop Layers Panel

The Layers Panel in Photoshop is one of the single most important aspects of the software’s UI. Odds are, you’ve spent a good chunk of your life staring at and interacting with the Layers Panel, but how well do you really know it?

Today we’re going to take a deep dive into what the Layers Panel has to offer and how to make the most of it in your workflow. We’ll learn about everything from keyboard shortcuts to obscure customization features. Whether you’re a beginner or a pro, you’re bound to learn a few new tricks!

Critique / 7 Sep 2012

Web Design Critique #87: Pacarama Peru

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 Pacarama, a website specialized in reservations for hotels in Peru and other South American countries. Let’s jump in and see what we think!

CSS / 6 Sep 2012

Toggle a Page’s Color and Content With Pure CSS

Today’s project is going to be a fun one. We’re going to build a basic HTML/CSS demo page, then add in a button that allows the user to toggle the page’s color scheme between to states: day and night. As the colors switch, so will various other elements on the page.

The really awesome part is that we can pull all of this off using only CSS. Along the way we’ll learn how to create a CSS-powered click event as well as how to wield pseudo elements to manipulate page content.

CSS / 5 Sep 2012

Build a Fun Photo Swap Animation With CSS Keyframes

CSS keyframe animations open up a vast range of possibilities for what can be accomplished with CSS. Much more than simple, one-step transitions, keyframes can be used to achieve complex, multi-step animations that are quite impressive.

In today’s project, we’re going to start from scratch and build a stack of two photos that spread out and swap their stacking order when you hover over them. Along the way we’ll learn all about how to wield keyframes like a pro and juggle all of those head-spinning prefixes!

CSS / 4 Sep 2012

A Beginner’s Guide to Leaner CSS

Don’t repeat yourself (DRY). It’s a simple concept with the ability to completely change the way you write code. If I look back to my early days with CSS though, I don’t think the concept meant much to me. Sure, all right, don’t repeat myself, thanks for the advice. How does that translate to applicable advice though?

Today we’re going to look at the very core concepts for how to rethink the CSS you’ve been writing by trimming the fat and reducing the redundancy. The result will be leaner CSS that’s easier to author and maintain.

CSS / 3 Sep 2012

Code a Mountain Lion Style Notification Window With CSS

This one is for my fellow Mac nerds. Apple’s newest desktop operating system, OS X Mountain Lion, has a built-in notification system similar to what we’ve had on iOS for years. Today we’re going to build one of the notification windows using CSS.

To pull this off, we’ll use some basic HTML and a little bit of fancy CSS3. To finish it off, we’ll add a touch of jQuery magic to allow the user to drag the window around. It’ll be tons of fun, so boot up your favorite coding app and follow along!

CSS / 28 Aug 2012

Semantic Grid Class Naming With Placeholder Selectors in Sass 3.2

CSS frameworks are known for taking a club to the idea of semantic HTML. This is such a problem that developers everywhere have entirely sworn off the idea of grid-based frameworks solely on the principle that it leads to non-semantic class names.

With Sass, it becomes quite easy to work around this problem and use a predefined grid without resorting to wonky class names. In fact, the latest version of Sass (3.2) has a new feature that makes this task easier than ever. Read on to see what it is and how it works.

Inspiration / 27 Aug 2012

25+ Awesome Responsive Blog Designs

One of the very first steps that you should take in any major redesign is to get a feel for the state of the industry by taking a look around at what others are doing. When used properly, good inspiration drives you to your own unique ideas.

This is especially helpful when embarking on your first responsive design project. Today we’re going to hone in specifically on blogs and take a look at how some of the early adopters in responsive blog design have approached the challenge. If you’re thinking about taking your blog responsive, you won’t want to miss these 25 sites!

Critique / 24 Aug 2012

Web Design Critique #86: WPMU

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 WPMU.org, a site for WordPress enthusiasts. Let’s jump in and see what we think!

Graphics / 23 Aug 2012

The Greatest Print Campaigns of All Time: Volkswagen Think Small

You’re a web designer living large in the 21st century. Your job is defined by screens and software. What in the world could you possibly learn about design from a bunch of old dusty print ads? The answer of course, is “a ton.”

Today we’re kicking off a new series that examines some of the most famous print ad campaigns of all time. First up is my personal favorite, the Volkswagen “Think Small” campaign. How did a funny looking car that was named after a bug, known for being slow and manufactured in factories built by Nazis ever become iconic to a generation of post-war Americans? Great design and fantastic marketing.