Joshua Johnson

I'm a freelance graphic designer and avid Mac evangelist. I live in Phoenix, AZ where I recently graduated from Arizona State University with a degree in global business/marketing. Check out my portfolio and follow me on Twitter.

Recent Posts

Effortlessly Showcase Your Mockups to Clients With QwikVu

February 9th, 2012    6 Comments

qwikvu-f
screenshot

If you’re a front end designer, presenting clients with mockups can be tricky. Emailing files can be cumbersome and lead to unwanted questions about how to view the image properly, and many image sharing services aren’t ideal for viewing full-size website mockups in their proper context.

Today we’re going to take a look at QwikVu, a web app that’s specifically built for designers who want to share web design mockups with clients. Is it the tool you’ve been looking for to make client presentations easier? Read on to find out.

Read More

Three Super Easy Ways to Pull Off a Masonry Layout

February 8th, 2012    8 Comments

masonry-layout-f
screenshot

Masonry style layouts push the boundaries of creative layout techniques. I personally love how capable they prove to be at maximizing the efficiency of galleries containing items with varying heights. Every bit of screen space is used and the result can be downright mesmerizing.

Today we’re going to dive into the concept, ideas and popular techniques that are currently prevalent in masonry style layouts. We’ll learn three different methods for pulling off a masonry layout, discuss the ins and outs of each and make sure that the result is beautifully responsive and reflows based on browser width.

Read More

Convert a Pricing Table PSD to HTML and CSS

February 7th, 2012    8 Comments

css-pricingtables-f
screenshot

Today we’re going to grab some PSD pricing tables from Design Curate and try to convert them to pure CSS so you can easily drop them into your site.

It’ll be a super basic but fun exercise in bringing a static design to the web and you’ll learn plenty of fun stuff along the way such as how to style hr tags a create a superscript effect.

Read More

Code a Useful Expanding Vertical Navigation Menu

February 6th, 2012    7 Comments

cssvertmenu-f
screenshot

Today we have yet another awesome step-by-step CSS project for you! This time around we’re going to build a super useful expanding vertical navigation menu. It’s a great way to hide a lot of links in a fairly small space and the animations will add a nice touch to your site.

Even if you’re a complete beginner, you should be able to pull this off. I’ll guide you along every step of the way and explain how each chunk of code works so you can implement these same techniques in future projects and deepen your understanding of CSS. Let’s get started!

Read More

Weekly Freebies: 30 Amazing Free Fonts From Behance

February 4th, 2012    5 Comments

wf-behancefonts-f

Welcome to another installment of our weekly collection of awesome design freebies from around the web. This time we have a real treat: thirty gorgeous free fonts from Behance. There’s a ton of great work on that site and if you know where to look you can score some spectacular finds.

Peruse the options below and download your favorites, then feel free to leave a comment to let us know what you think.

Read More

5 Online Playgrounds for HTML, CSS and JavaScript Compared

February 3rd, 2012    6 Comments

fiddlers-f
screenshot

Local coding environments are great, but it’s often the case that I don’t want to crack open Espresso and spend a few minutes setting up to code when all I really want is to test out an idea or work on a bug. Also, sharing options for most local coding apps are limited and typically require integrating an outside app like Dropbox.

Online playgrounds or sandboxes such as jsFiddle solve this problem by providing you with an instantly ready coding environment for you to begin experimenting in as soon as the page loads. These tools let you combine CSS, HTML and often even JavaScript to create and share coding examples. I’m completely addicted to these things and have extensively tested every one I can get my hands on. Today I’ll go over my five favorites and discuss not only why what I like about each option, but also where they fall short.

Read More

How to Create a Facebook Timeline Cover Photo: Examples and Best Practices

February 2nd, 2012    10 Comments

fb-coverimage
screenshot

Facebook announced Jan. 24 that it will be moving all users to the timeline format in the next few weeks. Although the change will be mandatory soon, you can make it early as some users have been doing since it was launched in September. Timeline is the new Facebook “wall” and highlights your personal information based on when it happened.

The biggest visual change included in Facebook timeline is creation of a cover photo. When someone lands on your page they not only see a small square profile image but also a large photo that you have selected for the top of your page. The shape can a little intimidating and includes a hole where the profile image rests. But you can crop or create your own timeline cover photo in just a few minutes. Follow along as we take a look at some great examples and advice for creating the perfect cover photo.

Read More