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.

Magic.

 

Today I made some fun error pages for Crossfader.fm 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;
 }
 body,
 input,
 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; }
</style>
 </head>
 <body>
<div>
<!-- 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>
 </div>
<!-- Logo image that links to home page could go here -->
 <a href="">
 <img alt="Crossfader.fm" height="135" width="320" src="data:image/jpeg;base64,**image string goes here" style="margin:20px auto;" />
 </a>
</div>
</body></html>

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.

404-img

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

Walter Luthorberg

Just my showing my excitement on the epic news of Bryan Cranston (hopefully) being cast as Lex Luthor in the next Man of Steel

‘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.

Almost-Flat-PS

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!

Image

Well, they’ve finally done it.

Adobe has gone about making the change from being able to purchase software upgrades at one’s convenience to having to pay a monthly subscription to be able to use the programs. Development of the next iteration of the Creative Suite has been cancelled in lieu of this new cloud-based subscription model, which is sure to upset many.

Allow me to explain.

The common equivalent would be owning a house and the bank saying, “Well, we know you’ve already bought it, but how would you like to rent your house instead?” It’s outrageous.

Adobe claims that this will allow them to more easily implement updates to the software and prevent piracy. But it also makes those of us who didn’t feel the need to purchase every new iteration of the product (unlike certain smartphone enthusiasts) forced to do so.

The move wouldn’t be as heinous if there were another real alternative to the Creative Suite. There are other text editors to replace Dreamweaver (Aptana, Sublime Text), but what of Photoshop? And Illustrator? Sure, there are programs such as GIMP or Krita, but, honestly, I hadn’t heard of them before a cursory Google search.

Even though the monthly fee isn’t that steep (yet), what’s to keep Adobe from raising the price whenever they were so inclined? The change also allows them to decrease their efforts on each of the following updates/iterations. Gone are the days where they would have to make significant improvements to the software as a purchase point.

It also means that access to your ACS files is always dependent on your payment for that month. If you miss one month’s dues, all of your files exclusive to those programs (PSD,EPS,INDD, etc) will be rendered useless until payment has been resumed (most likely with an additional late-payment fee).

It’s not too late!

This subscription-based access hasn’t been enacted yet, but it appears that the event horizon is fast approaching. CS6 will be the last purchase-to-own version of the Adobe Creative Suite before switching over to their new business model.

A difference can be made! Sign the petition linked below and we can influence the change!

Adobe Anti-Subscription Petition

Thanks to Stephanie Cunningham for posting the rant that I shamelessly regurgitated for this blog post.

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>
<html>
  Hey there!
</html>

4. Every great extension needs an icon.png!

icon

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!

The most fun a designer can have in their early careers is working at a bootstrapped tech startup.

It’s really a blast building a product from the ground up. As the company’s sole designer, it’s your responsibility to make sure what you ship is beautiful and intuitive. But when you’re the only artsy kid in the room, things can get tough. Here’s some hard-learned tips that have kept me going through the ups and downs.

Can’t Stop, Won’t Stop, Don’t Stop.

If you work at a startup, don’t let me catch you at the coffee shop without your moleskine. A doodle a day keeps creative block at bay. Keep pushing, iterating, and thinking of how to do it better.

Stuck? Ask for feedback from your coworkers. Hit print, make four copies: one for yourself, two for sharing with coworkers to take notes on, and one for the final decisions after you’ve synthesized the results.

Once you’re done with paper, pencil, and photoshop mock-ups, it’s time to prototype, get feedback, iterate, and repeat. Don’t ever stop. If your product is still under development, everything can change completely at any moment. Being able to throw your designs away and start over is essential to your success.

Go Outside Your Comfort Zone.

Learn a new thing or two, balance your visual design with interaction design. Codecademy and Code School are great places to learn some javascript and jQuery. If that’s over your head, Jessica Hiche’s Don’t Fear the Internet is an amazing resource to learn some HTML and CSS basics. Need a text editor? Go with Sublime Text. If your pixel polishing is lacking spend some time on Dribbble and Behance. Whatever you do, don’t get trapped in your own little design bubble—push your own limits and you’ll be amazed at how quickly your skills improve! Which leads us to…

Challenge Yourself When Others Don’t.

The hardest part is that your decisions will never be challenged enough. There’s no senior designer or creative director who will throw away your designs and tell you to start from scratch.

Sometimes, the team will be enamored with your very first version of a design. Don’t let it go to your head—you’re not done just yet. The only person who is able to really keep refining the design is you. And you need to. If you don’t, mediocrity will result. Great design doesn’t happen on accident. It doesn’t happen on the first try, either.

iterate

When you’re pushing a design, wherever you stop—that’s what the product will look like. Sometimes feedback from your non-designer coworkers is not enough. This is why user feedback is so important. There’s no better way to tell if your designs work or not then to test them on real people.

Some days, the juices are flowing, the team is mind-melding, and everything falls into place. Engineers are executing perfectly, and you feel a sense of wonder at how much your team can accomplish in just one day.

Some days, there’s simply no wind in the sails. Go for a walk, pour yourself a cup of coffee, and draw it up again from scratch.

Startup Life isn’t easy, but it’s definitely worth it.

—Will

Don’t forget to follow me on Twitter, and on Dribbble too!

What do you think? How do you go about being the sole designer at your company?

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

Pros:

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

Cons:

  • 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

Pros:

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

Cons:

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

—Use placeit by breezi (recommended!)

Pros:

Cons:

  • 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;
 color:#333;
 max-width:580px;
 line-height:72px;
 letter-spacing:-2px;
 font-weight:bold;
 font-size:80px;
 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;
 margin-right:34px;
 margin-top:10px;
 height:79px;
 background:#FF7D2D;
 background-position: center top;
 background-size:100% 100%;
 background-repeat: no-repeat;
 display:inline-block;
 position:relative;
 border-radius:10px;
}

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 subtlepatterns.com 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 william@coolkidsdesign.com

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!

PlaceIt by Breezi allows you to drag and drop screenshots into their photographic templates and instantly create beautiful product photographs of your app, website, or design. Ever wanted to make images like this:

—or like this?

sign-in-old

With PlaceIt, you can. Just take your pixel-perfect mock-up screenshots and drop them into the template of your choice. It’s so simple. Give it a try today.

Share your mock up designs!

Also, don’t forget to follow me on Twitter and Dribbble!

—Will

Follow

Get every new post delivered to your Inbox.

Join 156 other followers