Archives for category: Tutorials

Today I learned that to give an element “ignore the cursor” status, drop this bad boy in your stylesheet:

pointer-events: none;

What a pleasant surprise, my hovering div became ‘invisible’ to the cursor, allowing me to click the image link below, THROUGH the div!

Pointer-events: none; is my new favorite line of CSS.

Pointer-events: none; is my new favorite line of CSS.




Today I made some fun error pages for in under an hour.  Here’s how.

My coworker pointed me to Github to check out their really solid guidelines for error pages.

The key is that they need to have 0 dependencies on anything else — meaning a fully, self-contained html document. This means using inline CSS and base-64-encoded images.

Luckily for us, we can just download GitHub’s example pages to use as a template. To do this, go to the page, then go to file, Save Page As, and then open it up in your text editor to take a look.

Once you’ve stripped out their core code, you should have something like this:

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 <title>Page Not Found</title>
 <style type="text/css" media="screen">
 body {
 background-color: #eee;
 margin: 0;
 button {
 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
.container { margin: 50px auto 40px auto; width: 600px; text-align: center; }
a { color: #222; text-decoration: none; }
 a:hover { text-decoration: underline; }
h1 { letter-spacing: -1px; line-height: 60px; font-size: 60px; font-weight: 100; margin: 0px; text-shadow: 0 1px 0 #fff; }
 p { color: #222; margin: 10px 0 10px; font-size: 18px; font-weight: 200; line-height: 1.6em;}
ul { list-style: none; margin: 25px 0; padding: 0; }
 li { display: table-cell; font-weight: bold; width: 1%; }
.logo { display: inline-block; margin-top: 35px; }
<!-- cool, fun 404 image goes here -->
 <img alt="404" height="" width="" src="data:image/jpeg;base64,*image string goes here*" style="margin:0px auto;" />
<!-- Error message of your choice -->
 <p><strong>There isn't a page here.</strong></p>
 <p>Go back, or try again later.</p>
<!-- links -->
 <div id="suggestions">
 <a href="">Contact Support</a> —
 <a href="">Home</a>
<!-- Logo image that links to home page could go here -->
 <a href="">
 <img alt="" height="135" width="320" src="data:image/jpeg;base64,**image string goes here" style="margin:20px auto;" />

Feel free to copy/paste that, or chop it out yourself to better understand what’s going on.

The fun part here is making a custom image for the page. Make a cool image of your app or page exploding in photoshop and throw a 404 on it.


Here’s mine, a picture of our app interface imploding.

Your own sweet exploding 404 graphic and upload it to Base64-image. These guys will encode it to base64 for you (Thanks, internet!)

Paste your base64 image into your template and: BOOM! You’ve got a sexy looking 404 page that will always look exactly the way you want it to.

Problems? Check out my example page here.

Thanks for reading!

Check meowt on twitter & dribbble

‘Almost Flat’ design is officially all the rage. But how close to flat do your UI elements have to stay to be considered ‘Almost Flat’?

About 2-8% away from flat.

I’m not going to go into the benefits of Almost Flat, but rather show my preferred method to creating almost flat assets.

Start with a flat shape of your desired color and create a duplicate shape on top. Set the duplicate shape color to white, the blend mode to multiply, and then add a gradient overlay in the blend options. Adjust the opacity to between 2 and 8 percent, and voila! Behold your gorgeous subtle gradient.


Another element that can be included is a subtle shadow. Shadows are used to reduce confusion when you have overlapping elements or want to create an ever-so-subtle ‘pop’ on a specific element.

Remember, it’s an ‘Almost’ shadow. Turn that opacity way down, try %20 to start. Check out the difference in shadow blur: with 2px offset, no blur produces a sharp look and a 6px blur adds subtle depth to your design.

Possible Shadows on Almost Flat Buttons

Boom shakalaka. That flat shape is now ‘Almost Flat’. Pat yourself on the back for joining the movement.

Download the PSD used in these screenshots here!

Don’t forget to follow me on Twitter, Dribbble & Hunie!

Chrome extensions are simpler than you think. They’re written with web languages and can be as simple as pure HTML, CSS, and a few lines of Javascript. Right now we’re going to make a ‘browser_action’ extension.

Download this .zip file and follow along! Extensions are fun and easy!

An extension is entirely based on one file called manifest.json. The manifest.json file contains your extension’s information and tells Chrome what the extension will do. The necessary elements for browser_action are default_icon, which links to the icon you see in the corner of your browser, and default_popup, which is the ‘page’ that opens when the icon is clicked. But enough babbling, let’s get started on your first extension!

1. Create a folder for your extension!

(Or download this .zip file and follow along!)

2. Create your manifest.json!

Create up a new text file in your extension’s folder and name it manifest.json, then add the following code:

 "manifest_version": 2,
 "name": "My First Chrome Extension",
 "description": "Description of your extension goes here.",
 "version": "1.0",
 "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"

3. Create your popup.html!

Next, create your popup.html file. In this file, put whatever you want to be in your pop up! Here’s what mine looks like:

<!doctype html>
  Hey there!

4. Every great extension needs an icon.png!


Finally you need an icon. Download this one for our demo! browser_action icons need to be 19×19 pixels, and should use alpha transparency so they look good on different themes.

Got your manifest.json, popup.html, and icon.png files? That’s it! You’re extension is ready to be installed!

Unpacked Extension Installation

Screen Shot 2013-05-12 at 4.27.55 PMGo to chrome://extensions, check that you’re in Developer Mode, and click Load Unpacked Extension. Select the directory containing your manifest.json, popup.html, and icon.png files and presto! Your extension lives! Wasn’t that easy?

Imagine the possibilities. Anything you can build on a website, you can build in a Chrome extension. We’ve barely scratched the surface of what’s possible with extensions. If you’re thirsty for more, check out this fun and informative post on Lifehacker, and the extremely helpful official Google Chrome Developer Documentation.

I hope you had as much fun making your first Chrome extension as I did writing this. Don’t be shy, let me know if you write any sweet extensions!

Don’t forget to follow me on Twitter & Dribbble, happy extensioning!

Here are some things I consider when building landing pages for my apps and products.

All you need is some Photoshop skills and basic HTML & CSS knowledge in order to copy/paste find/replace your way to a kickass landing page.

First let’s dissect the essentials of a landing page. Here’s one of mine.

Example Landing Page Annotated

1. Use a beautiful screenshot

One that shows the main mechanic of the app. What does the user see most of the time while using your app? Show off how great that looks! To show off your app, you have options:

—Use a stock photo


  • You can usually find *exactly* what you’re looking for
  • Allows for the most page customization


  • Cost can range between $10-$50 for the right photo, sometimes up to $100
  • May be difficult for a photoshop novice to convincingly place the screenshot into the phone

—Use this .png of an iPhone to create your own image in photoshop


  • Takes a much shorter amount of time, just drag & resize your app screenshot
  • Still allows for a large amount of page customization


  • Looks a little boring next to a person holding your app in their hand

—Use placeit by breezi (recommended!)



  • Large image size
  • Limited environments, only a several per phone type

2. Clear Description of Product

What is this thing? Why should I care? In this example, we are looking at the official app for an event. You may have heard the phrase, “You only have 8 seconds to get someone’s attention.” I believe it’s even less. Maximize your one shot for the user’s attention by directing what they look at first. Use big typography to capture attention. I used Helvetica Bold with -2 letter spacing and a slight drop shadow for an elegant letterpress effect. Protip— Here’s the CSS:

.calloutText {
 text-shadow:1px 0px 1px #fff;
 font-family: Helvetica, sans-serif;

Need to convince people your app is worthwhile? Write a snippet about the main benefit it gives the user. Don't ramble about features, just state plainly why using your app good for them.

3. Highly Visible Call to Action

So the visitor understands the product is beautiful and worth their time, but now what? We want them to download it! Purchase it! Sign up! We want them to do something. Don’t make them work to figure it out. Use a large, contrasting, clickable element to capture the user’s eye next.

I used the following CSS code for my orange buttons (with a nested image inside):

.downloadButton {
 width: 230px;
 background-position: center top;
 background-size:100% 100%;
 background-repeat: no-repeat;

Now that we know what we want to put in our landing page, let’s get into some design specifics.

Use a framework.

Nobody likes writing robust cross-browser responsive layouts from scratch. Bootstrap is always a good starting point. There’s also Skeleton. With these frameworks, you can copy the base example.html pages that fit the style you want and replace the content to get 80% of the way done.

Make it sexy.

Seriously. Begin with the screenshot(s) you use for the page, and pick your color elements from there. In my example I have pulled dark grey, beige, and orange from the screenshot. Make your buttons and text these colors— your page will have a unified and slick look.

Use instead of flat colors to make your page interesting to look at. Copy the pattern out of the .png and paste it into your own new file, then you can freely add color or lighten/darken the pattern file.

Use 1px box-shadow on buttons and div elements and a 1px text-shadow on your copy to make it pop. Yeah, I went there.

Short & Sweet

Hit them right in the face with why downloading your app is a great idea, and present them with a big shiny download button! That’s all you need to do. Practice makes perfect, so volunteer to whip up some basic landing pages for your friends! You’ll be surprised how fast you improve!

Check out land-book for some amazing landing page inspiration.

Thanks for reading! Good luck selling your product!

Follow me on dribbble and twitter!

Anything I left out? Email me at

Vine has been around for just under a week now, and it’s shaping up to be quite a big deal. Here’s why.

1. It’s the easiest app to use, possibly ever.

Any five-year old could figure out how to use Vine. By implementing the “touch the screen” mechanic as the primary action, Vine makes creating fun video loops as simple as possible. It literally could not get any simpler. Did I mention it’s fun, too? The instant gratification of creating something cool, interesting, beautiful, or just silly is enough to convert any skeptic to an evangelist in 5 minutes.

2. Make friends with people who share your passions

I’m an avid skateboarder. A quick #skateboarding search in vine reveals there are dozens of other techies who skateboard too! Anyone who takes the time and effort to create a cool video about a mutual interest is just a friend you haven’t met yet.

3. Insanely simple integration

The first place you saw Vine was probably on Twitter. That’s because they’re from the same vine. (hah!) Twitter acquired Vine, and made sure integration was as seamless as possible. It takes about 3 seconds to embed a vine on a web page.

From twitter, simply find the tweet the Vine is posted in, click the ‘…’ icon for more options, click ‘Embed Tweet’, and copy/paste the generated code into your web page or blog post and BOOM:

Instant Vine on your blog! Check out an example of embedded Vines on the official Vine blog.

4. Constraints result in creativity

There’s been a lot of criticism about the 6-second time limit. But when you hit a wall, creative people build ladders. And when there’s nothing to build with, they find a way to run up the wall anyway:

By forcing constraints, Vine gets users to think creatively and come up with lots of cool stuff. Don’t believe me? Watch Justvined (allows you to watch 20 vines at a time live as they are posted) for a few minutes and try not to have your mind blown. Want a one-at-a-time vine experience? Check out VinePeek.

In conclusion,

Vine is different, fresh, fun to use, and plays nice with the best communication platform in the world (Twitter). What’s not to love?

Follow me on Vine, @willdjthrill

And on twitter while you’re at it!

Happy Vining!

Ever have a grand idea for an app or navigation scheme but just couldn’t get the point across?

Say goodbye to the days of having to painstakingly explain your app to the visually/spatially challenged.

POP, or Prototype on Paper, is an amazing tool that you can download and use for free that allows you to link wireframes (or high fidelity mockups) together into a navigable ‘faux-app’.

Here I have mapped the tappable areas of my sketch to link to other views. You can literally mock up an entire navigation using this tool.

Here I have mapped the tappable areas of my sketch to link to other views. You can literally mock up an entire navigation using this tool.

POP stresses using photos of wireframes to create your mock apps — but what if you used high-fidelity mock ups created in photoshop instead? This takes making ideas visible to the next level.

Be sure to pick up your FREE version of POP from the App Store, and hurry— because they’re giving away 10 projects for free in exchange for a tweet while they develop their pricing model!

Happy prototyping 🙂


Follow me on Twitter & Dribbble!

So you wanna learn some web skills? Think you got what it takes? Good, because all it REALLY takes is patience, and practice. Let’s get started.

Be Social. Use Social Media or fall behind.

This is really step 0.5. If you aren’t following the experts in your field, start there. By following designers, developers, firms, and organizations, you can stay on the cutting edge of what’s happening, what’s hated, what’s hot… basically what the movers and shakers of the web world are up to.

Here’s a list to follow to get you started. (mostly resources, downloads, articles)

Here’s a list of Behance’s “creatives to watch.” (mostly designers’ personal twitters)

Use Resources. Don’t re-invent the wheel if you don’t have to.

There are hundreds of thousands of free, open-source resources available on the internet for you to download, learn from, and make your own. Google is a good first bet for any web-design question, but after a while you get the hang of where to look. For starters, bookmark the following tools/resources I use on the regular:

Keep Learning. Weather you’re gaining knowledge or practicing skills, keep leveling up. Resting on your laurels is a wicked bad mistake, yo.

Read blogs for breakfast, and image galleries for dessert. Knowledge is power. Keep your mind sharp and your subconscious swimming with beautiful and original work.

News & Opinions:

Typography & Art:

UI/Web/App Inspiration:

Stay Passionate. Believe in yourself & be a rockstar.

It can be intimidating, especially when you’re aware of the vast amount of knowledge and skill you don’t possess. But if you keep calm, utilize your resources, pay attention to trendsetters, keep your finger to the pulse of the scene, never stop learning, and don’t give up — I can guarantee you’ll be a pro in no-time.

Now that we’ve gone over that — let’s make some stuff. To start, open these tabs:

Thanks for following along, I hope this was as much fun for you as it was for me! ♥


Warning. This guide is not for internet newbies. If you don’t have a basic understanding of how to use keywords with Google or really have no idea what you’re doing on Twitter, start here instead:

If you’re literally new to Twitter.   / /   If you want to learn about Twitter etiquette. 


It allows you to directly connect to, well, anybody in the world.

What do you do with this power? The importance of this is NOT to see what Ashton Kutcher had for lunch, or how Tyler the Creator feels about Tim Tebow. Yes, these anecdotes can be entertaining, and I do follow people purely for comic relief, but the real meat of my Twitter stream is cutting-edge information-sharing about design, sustainability, technology, and business.

The key is that you can directly connect with the REAL industry trendsetters, and the people who are laying the foundations for the future. The 20-somethings that are working hard on the next big thing, the 30-somethings who publish open-source books on how to learn and master the most useful javascript patterns.

I’m going to explain to you how to find the types of people you care about following, en-masse, so that your Twitter feed becomes an endless source of knowledge. So, without further ado:

Step 1: Do a Google Search

Start off by using what’s already out there. “Designers to follow” “Engineers to follow” “Creative writers to follow” are all search entries that will yield plenty of results. You will find lists of Twitter users who are deemed ‘essential’ to follow by bloggers, industry organizations, and established industry professionals.

Step 2: Open Tabs & Prepare to Browse

Take these lists and bookmark them. Get a cup of coffee. Stretch your wrists.

Step 3: Dig, Dig, Dig

Do NOT go through these lists following everyone. But rather , spend a few minutes on each listed user, browsing their tweets looking for other users they engage with. This means digging a little bit and taking the time to see who’s talking about the latest and greatest things. Eventually you will find clusters of interconnected of professionals who operate within your niche, or a niche that is of importance to you.

Good Luck & Happy following! Check out the Infographic!


Hello, today I am going to walk you through how to make really cool architectural vector-based graphics in Adobe Illustrator.

Step 1: Get a Digital Image

You need a photograph, or other digital image, of the thing you want to stylize. Import this image into Illustrator and make it fill the artboard (Use the Select tool to drag the corner of the image & hold Shift to make sure it stays proportional).

Once you have your image ready, set it to 50% opacity, and lock the layer.

Step 2: On a New Layer, Trace the Image

Make a new layer. Using the line (for straight lines) or pen (for curved lines) tool, trace around the image, giving it form. Try to trace as many details as possible, and be sure to use Shift to make straight vertical and horizontal lines. When you have lines that need to be identical, a neat trick is to simply copy the line with the select tool. This can be done by holding Option (Control for PCs) and clicking and dragging on the line. Continue making lines until you have enough detail to bring your image to life. Feel free to bend the rules, or add your own touches; after all, that’s what being creative is all about!

When you think you are finished tracing, hide the image layer below and behold your creation!

Step 3: The Final Touches

You’re almost done. This last part is just for kicks, to add an extra element or two to complete your design. Incorporate your image into a poster, add text, add color, do whatever you want. As you can see below, I made a flyer with a stylized ‘map’ showing the location of a club that is a little tricky to find. Not anymore, thanks to my graphic!

My final graphic, incorporated into a promotional flyer.