Archives for category: Ideas

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.

 

Advertisements

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

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.

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

After stumbling upon a Viktor Hertz pictogram poster, I decided to make one of my own. It’s a bit reflective of my mood as of late, but nothing cheers you up like design, right?

No Sunshine

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 🙂

—Will

Follow me on Twitter & Dribbble!

Time Magazine’s UX needs a serious overhaul. I received a push notification on my 3rd gen iPad from Time prompting me to check out their latest issue. Intrigued by the headlines, I swiped the notification, and was greeted with this alert:

alert-large-close

After hitting OK, I landed on the following page, where Time expected me to buy the issue for $4.99. The only alternative was to ‘preview’ an issue, which merely displayed the table of contents.

Time Magazine for $4.99


Worst of all... no retina images.But worst of all, none of their images were set up for the retina display. I had to shuffle through pages of blurry photos and icons to see that the information I came for wasn’t there. The entire experience was frustrating and ultimately a letdown. Time interrupted my evening. The least they could have done was let me read the article for free. Teasing and “Buy now for $4.99” is no way to win my business.

Deleting Time Magazine