kind of cool

P1090377

This is a couple months old but still kind of cool. At CTIA this year VISA President John Partridge in his keynote talked about V.me and our mobile strategy and he totally used a screenshot of the mobile UX I designed. Very cool seeing something you worked on projected on a huge wall for thousands of people.

michaeltimbang.com & timbangphoto.com

Designed and built these twin wordpress backed sites for a local photographer Michael Timbang. This custom slideshow theme uses JQueryTools, JScrollpane, CSS and some of my own custom scripting for the interactions. The goal with the design was to make it visually powerful and super minimal for the end user and super simple for Mike to upload photos and maintain his site without really needing to know how to use wordpress.

foodiemob.com redesign

Spent last weekend restyling foodiemob to make it easier to find recipes. I also revamped the grid, logo, look, tone and feel… It is still a work in progress… should have a mobile version of the site available soon….

libertiphoto.com

A couple months back I designed and implemented a custom WordPress theme for a local photographer – Dan Liberti.

It is designed to leverage the CMS and category tagging aspects of WordPress to make it super easy for him to add photos and have the flexibility to display them wherever he needs them.

The front end queries the DB filtering by category tags which correspond to the different sections of his site. Adding a new category will create a new tab on the top linking to a slideshow which displays all the photo posts that have that category tag. This allows him to easily share photo collections across sections by giving photo posts multiple tags. This also allows him to still have a blog section by tagging the post with a blog category tag.

For the UI, I am using jQuery to create a light weight slideshow for users to either scroll through the images or if you look closely click on the little play button on the bottom right corner to run through the slideshow automatically (This feature was added specifically for Dan to show off his site to potential clients which is why it is more of a discoverable feature).

Blinklab.com is live…

Actually it went live a couple months ago… just haven’t had a chance to share…

Blinklab is a digital retouch studio based in San Francisco and they hired me last year to build their site. The site was built using resourcespace an opensource php digital asset management system. I extended the system to include a templateing system for the front end so that they can both use the system as a cloud based storage and cataloging system and a consumer facing website. Design was done by them and I did all coding – PHP/HTML/CSS. I also set up their in house server and deployed their site.

Fun with jQuery

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
screen-capture-62.png

Flow: A great design resource

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.

5182bhk90ml_ss500_.jpg

Having major server problems…

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…

The power of Photoshop brushes

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

example:

flower

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.