Archives for category: Resources

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

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

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

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!

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. 

Twitter.

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!

–Will

Most of the time I dislike the idea of crowd-sourcing design projects. However, the exception to my rule is cool indie rock bands! One such band is Cold War Kids. They’re releasing a new album in January and are using Creative Allies to get a poster.

Check out my design, vote/comment, and submit your own!