The Awesome Screenshot Extension is truly an awesome screenshot extension!

Being a UI/UX/ Designer/Developer I find myself making a ton of screenshots everyday… mainly for grabbing a current UI and popping it into photoshop for creating super quick, realistic mocks without having to recreate the entire page from scratch… what I do is take the screen shot, mask out the part of the site that needs the new UI and mock up my versions… this is important because it gives the clients… in my case the product managers, a realistic look at what the site will look like with the new changes without them having to use their imaginations… makes it so much easier to come to a design solution everyone is on board with…

I remember way back in the day when OSX first came out there was this screen capture dashboard widget that allowed you to capture the entire page instead of what was just visible. I loved it… it was perfect because web pages rarely fit in the viewable portion of the screen… so without this tool I had to take a screenshot, scroll down, take another, and so on and then stitch them together in photoshop… Everything was gravy until I got a new machine because my old one died and to my horror I could not find this dashboard widget anymore… it is like it fell off the face of the earth… which sucked because I have been using the ol’ screen shot, scroll, repeat, stitch method since then…  well until now…

Enter Awesome Screenshot Extension!

This guy is truly that… it is an extension for chrome or safari and allows you to take a screenshot of the entire page! Boom, you are done. Plus it also allows you to take a screenshot and annotate it… so if you want to propose some changes to the companies corporate site, you can do your screen shot, mark up the page and then fire it off to your PM for some feedback… plus you can upload your screenshot to their servers for sharing… how cool is that?

Check it out!

Creating a Zooltool feed widget in less than 20 lines of javascript…

So you use Zootool to catalog your design inspiration but it would be cool to place them on your site, right?

Well you’re in luck. Zootool has nice little JSON api which allows you to query your account and pull your feed in JSON (you can do a ton of other things too) and in less than 20 lines of code I can show you how to do it.

Here is an example:

This code requires jQuery, mainly because I like how jQuery makes it easy to create elements and iterate through JSON but if you know javascript, you can totally do this without it… and you need to sign up for a developer account on zootool.com.

Once you have a dev account and your apikey, you are ready to go.

Here is the code:

<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>

<!-- This is where your feed images will go -->
<div class="zooToolList"></div>

<!-- Create JSON request and attach to the top of the document -->
<script>
var script = document.createElement('script');
script.src = 'http://zootool.com/api/users/items/?apikey=yourApiKey& amp;username=yourUserNam&limit=10&callback=zooRsp';
script.type = 'text/javascript';
var head = document.getElementsByTagName('head').item(0);
head.appendChild(script);

<!-- Callback function -->
function zooRsp (data) {
$.each(data, function(item) {
$("<a/>").attr({
href : this.permalink,
target : '_blank'
}).append(
$("<img/>").attr({
src : this.thumbnail,
'class' : 'zooThumb'
})
).appendTo(".zooToolList");
});
}
</script>

just replace yourApiKey with your api key and yourUserName with your username.

Here is a stand alone version that you can copy and paste the code out of…

How it works:
Basically this code appends your API request to the top of your HTML file, which fires the query, and the returned object is a JSON object with all of your data with a callback function attached to it called zooRsp. The zooRsp function takes the JSON object and just loops through it and creates the elements based on the data and plunks them in the zooToolList div…

all you have to do is style up the resulting links and images to your liking and you are done…

Zooltool is a really cool way of saving and cataloging all of the design resources you come across everyday while browsing the web.

There is a lot of “design resource” sites out there from design blogs like smashingmagazine.com, webdesignledger.com and alistapart.com to cool tools like ajaxload.info and css-tricks.com/examples/ButtonMaker but zootool has to be one of my favorites.

Basically you can break the site into 3 parts.

1. This really cool script that you bookmark in your browser that injects javascript into the page and allows you to capture a webpage or individual image or video resources from that page and then save them to your Zooltool collections.

2. Your collection of images and resources that you can come back to and browse for inspiration

3. A cool public feed of other users inspirational images that you can see what you are missing in your everyday browsing of the web

(actually there is a fourth… their developer api so you can plug your feed into your site or whatever)

This site is awesome. The usability of the site is superb which makes it really easy to leverage this site in my everyday design life.

Looking for a great example of a gradual engagement sign-up flow? look no further…

The other day I saw an article on Techcrunch about Groupon selling a butt load of Gap Groupon’s… basically the deal was getting $50 worth of merch. for $25… it sounded kind of enticing so I decided to check them out… This was my first experience with Groupon and their gradual engagement sign up flow was so nice, I had to write about.

I am normally grumpy when I go through so called gradual engagement flows because normally they are, uh, how you say?… NOT, gradual engagement flows… They end up being more of a bate and switch trick where you are drawn in with the promise of a quick and easy sign up process but are bombarded with page after page of long crappy forms asking for way too much info with no positive feedback and no way of escaping… basically because they have no faith in capturing that user to get a full registration out of them later and are greedy with how much user data they want to collect… but not with Groupon.

Groupon’s flow is an actual gradual engagement flow…. You are only asked for the info they need to get you in fast and rolling -location and email… and then you have the choice to complete your registration or cancel and start shopping for Groupon’s…

What I really like about their flow from an interaction standpoint is they do an awesome job enticing users to complete their registration up front without souring the easy sign-up flow, which I find is the toughest part of creating a gradual engagement flow -creating a flow that is all about ease of use for on-boarding new users without sacrificing your business objectives-  How Groupon does this is after the location and email panes you are taken to the landing page and are presented with a modal that says you are subscribed, which is genius because now the user feels an emotional attachment to the site because they are now a member and relieved that the process was so easy… So when they see the rest of the form they feel obligated to continue filling it out because, hey, I am already signed up and a part of the site so might as well continue…I have no data to prove this, but I can only assume that they have a really high conversion rate on that form… hell, someone like me who hates giving out his info filled out this form without even thinking which is what spurred me to write this…

Ever wish you had more font options for your web designs?

Well your wish has been answered… well, kind of… A couple months ago I came across the Google Font Directory and the Google Font API. A collection of free open source fonts that Google hosts and an API that easily allows you to include these fonts in your sites… So what does that mean?… well it means you can use these fonts (See the egregious use of the font called Lobster on this site) on your sites by easily adding a link to the font API and then just including the font in your CSS files.

Check out how easy it is to include the font Lobster…

Linking to the Google Font API asking for the Lobster font family:

<link href="//fonts.googleapis.com/css?family=Lobster:regular" rel="stylesheet" type="text/css" >

Now in your CSS you can just do:

.coolLobsterBlock { font-family:'Lobster'; }

Cool, eh?

Currently the list is pretty small but I can see this set becoming an awesome resource for web designer/developers everywhere. They also have a pretty cool tool for viewing the fonts and variants…

Here is the current list of available fonts:

Cantarell, Cardo, Crimson Text, Droid Sans, Droid Sans Mono, Droid Serif, IM Fell, Iconsolata, Josefin Sans Std Light, Lobster, Molengo, Neuton, Nobile, OFL Sorts Mill Goudy TT, Old Standard TT, Reenie Beanie, Tangerine, Volkorn, Yanone Kaffeesatz

So it happened… some f*ck face hacked into my sites and injected a redirect script into my database causing my sites to redirect to a malware site…

The good news is that I was able to track down the malicious db entries and clean them out so that my sites no longer redirect… When this happened I scoured the web looking for a solution and I didn’t find any help so I thought I would post the link to the mediatemple wiki page with the solution.

http://wiki.mediatemple.net/w/WordPress_Redirect_Exploit

This page goes over a MediaTemple specific solution, but if you read it you will see that you can actually use this same fix on your server, either by using phpMyAdmin and searching for the script links in your db or by doing a manual sql query.

Sorry to anyone who got annoyed by my sites redirecting.

So I am feeling a little behind in the trends when it comes to Javascript toolkits right now.

In the last few days I have been asked like 5 times if I am familiar with jQuery and I had to say no. I’m not sure why I haven’t taken some time out to check out the likes of JQuery, MooTools, etc….Probably because I have used a small handfull of toolkits over the last few years and I have come to realize that even though most frameworks have good and bad parts, their general approach to creating nice convenient cross browser coding solutions are pretty similar.

But not to be out of touch, I took it upon myself to read up on jQuery over the weekend. It took me a couple minutes to digest what jQuery was doing, but once it sunk in, it hit me like a ton of bricks. No wonder everyone is using jQuery!

What makes it so different is they take a query approach to writing JS. They have one utility function that does all the heavy lifting of finding and objects in the dom, and then wrapping them in functionality. They call it the jQuery function. With this one function, you can specify dom elements, element id’s, classes, even css type selection, to be wrapped in functionality.

For example. If you want to grab every p element on the page and change it’s font size, you can do:

$("p").css("font-size", "160%");

The $() by the way is the jQuery function.

Now compare that to the regular JS way of doing it:


var pHolder = document.getElementsByTagName("p");
for (var i=0; i<pHolder.length; i++) {
pHolder[i].style.fontSize = "120%";
}


Yea, id rather write that tiny piece of jQuery code too.

So not only does jQuery reduce the amount of coding needed, it has a tiny footprint and it’s UI widget ad-ons are pretty slick and all modular, so you can include only the pieces of functionality you want.

I guess it is good I looked into jQuery, because I am sure it will quickly become my toolkit of choice.

Here is an example of what 6 lines or so of code can do in jQuery… use the slider to change the font size in the p elements…
Font Slider Demo

One of my favorite books is Flow: The Psychology of Optimal Experience by Mihaly Csikszentmihalyi.

I stumbled across this book a few years ago, and when I started reading it I couldn’t put it down. It was like stumbling across the Holy Grail of interaction/UI design. I must have read this book 10 or more times. Even though it is not written as a interaction/UI/UX design book, it has proven to be one of my most valuable resources. Why? Because it is the only book I have found that breaks down the actual psychology behind achieving optimal experience. In the book Csikszentmihalyi explains how we as humans strive to achieve a state of flow in whatever we do, be it working, playing a video game, filling out a form, whatever, and once we do achieve this state of optimal experience, we get this intrinsic feeling of happiness and contentment….pure joy…. The problem with achieving this state of flow is that it doesn’t always happen in every day life, so he breaks down exactly what factors go into achieving this optimal state of flow, in an attempt to teach his readers how to attain it more easily. As a UI designer, being aware of these factors for achieving optimal experience allows me to design my flows and interactions with optimal experience in mind.

If you do not have this book in your design library, you need to go out right now and buy it. The insights you will learn from this book are invaluable.

My sites are currently having some major connection and performance issues. I have a support ticket into Mediatemple to resolve the issue.

UPDATE: Mediatemple has just contacted me to let me know that they are having a wider problem with their servers, with many customers experiencing the same issues. They insured me that they are working on resolving the server issues…

Ever wonder how designers create those cool vector looking abstract designs or get really cool grungy textures in photoshop?

example:

They don’t create custom patterns and they don’t create custom shapes. They use brushes. The above example is using a couple of free brushes found at qbrushes.com and a couple of transparent effects. You can find hundreds of free brushes that give you as little as primitive vector shapes all the way to fully developed images that you can use at variety of sizes. Brushes are cool because you can use a handful of them to create really cool original artwork or abstract patterns. You can also create your own brushes very easily. A lot of brushes are original black and white artwork that is scanned into Photoshop and then converted into a brush.

If you are interested in using Photoshop brushes, I would recommend checking out qbrushes.com to get a jump start. They have a pretty big directory of really cool brushes.