Design + UX
FIX CS4 Crash on Launch – Error 150:30
November 08, 2009 - Jesse Korzan
CS4 Crashing on Launch?
Slowly starting to migrate to CS4, started with Flash and then Photoshop ended the party.
Every attempt to fire up a CS4 product after installing Photoshop, I got this dreaded licensing issue... ERROR 150:30
Double take on user experience
October 23, 2009 - Lorraine Chisholm
A few weeks back I was casually visiting my brother, and we got to talking about email. He'd just finished off his Master's Degree in Leadership, a program he completed about 80% online in a distance learning program. Alex's thesis on leadership in community gardening involved a lot of interchange with his adviser over the internet. He's a very social guy, and reasonably technically savvy. He has a problem. Turns out that with his email completed he was going to need another email account because the university account would eventually expire. He does have email for his day job, but he needs a personal one. I offer a simple solution... why don't you sign up for a gmail account? This is when he says, "I NEVER sign up for anything online".
Tools for Engagement: User Experience Offerings at Work at Play
September 22, 2009 - Lorraine Chisholm
At Work at Play we offer services that may not be top of mind when you think about designing or redesigning your site, but are key to maximizing your investment. We know that all great web sites offer both something valuable to users and a solid return on investment to your business. To achieve this value, our design team applies a well-honed skill set to craft experiences that motivate and involve your customers, fans, and site visitors. This approach supports your success through focused and productive online engagement for your customers.
Friday Link Bomb
August 07, 2009 - Jesse Korzan
The end of my Friday is usually sorting through open browser tabs, bookmarks, Twitter favorites and scribbled URLs in my notebooks. Thought I'd drop a Friday afternoon link bomb for our Work at Play fans of a few things that grabbed my attention this week.
Thoughts on Design and Fly Fishing
July 31, 2009 - Jesse Korzan
Lately I've been spending more time in the rivers near my house. As I endeavour to get my line out, trying not to hook myself, there have been moments when I feel like I am finally "getting it".
Konigi : Tools and content curator for UX designers
July 09, 2009 - Jesse Korzan
Konigi is a great website for UX professionals and those involved in the design of websites.
We love the Konigi OmniGraffle tools at our office; they are an indispensable tool in my bag of tricks.
Not your ordinary design gallery
I am a big fan of the showcase and blog. They find unique and compelling aspects that deal with all sorts of design problems. It's fast become a daily stop and a resource I'll flag for almost any new project.
Since we use Drupal a lot (like this blog), we noticed it's a fine Drupal install. I appreciate the subtle details, especially enjoying how the tagging is done, nice big images in the postings, and the home page design.
And it's very encouraging to see our own work in the showcase.
Our website is being "flattered": Should we open source it?
June 30, 2009 - Jordan Willms
Lately, the Work at Play website has been getting plenty of kudos and "inspiring" plenty of interesting imitation, including a couple of sites from India and Turkey. We believe imitation is the purest form of flattery, so actually everyone in the office is quite flattered.
WorkAtPlay.com How It Was Made: The Flip and Scale Effect
May 29, 2009 - James Andres
There has been great reception to the Work at Play website design and effects. We have received several emails from intrepid geeks wondering how we pulled off all that cool jQuery eye-candy. After writing a few of these "how it was made" emails I think a blog post is in order. Without further delay, here is the behind the scenes story on WorkAtPlay.com!
The Flip and Scale Effect
On the WorkAtPlay.com homepage we use the jQuery Flip! plug-in in combination with some custom animations to give the "Flip & Scale" effect. This is a little more complicated than one might think, and deserves some explanation:
- User clicks on a work sample tile image.
- The click is caught using a standard jQuery
$(elem).click()handler. - Due to how the Flip! plug-in works it isn't possible to just flip the work sample tile directly. Instead we replace the tile with an empty div of the same colour and perform the flip on that new div. We call the new empty div the "flip_side" because it will actually become the flip-side of the work sample tile.
- The flip_side div is placed using absolute positioning directly on top of the work sample tile. The work sample tile is then hidden with CSS to keep it out of the way.
- Now, finally, the Flip! plug-in is triggered on the flip_side div.
- When the flip_side div is finished flipping the Flip!
onEndcall-back is triggered. We use theonEndcall-back to insert the content for the work sample's "flipped side". This content is cleverly ready and waiting inside a hidden part of the original work sample tile (view source on the WorkAtPlay.com home-page to see for yourself). Oh, we insert the content with a basic$(flip_side).html(flip_content.html()) - Ok, so far we've got a div called flip_side that contains the right content. But it's still really small and the content is all scrunched up. How do we make it bigger? The scale effect is solved by the jQuery
$(elem).animate()method plus some handy CSS positioning - The tricky part of the scale effect is figuring out how big it should scale and to what X and Y pixel co-ordinates it should move to. This is accomplished by the following formulas:
- flipped_side.top =
$('#work-page .wrapper').offset().top - flipped_side.left =
$('#work-page .wrapper').offset().left - flipped_side.width =
$('#work-page .wrapper').width() + 1 - flipped_side.height =
Math.ceil($('.work-sample').length / NUM_WORK_SAMPLE_COLS) * $('.work-sample:first').height()
- flipped_side.top =
16 things to check before launching a CMS based website (e.g. Drupal)
May 20, 2009 - Jordan Willms
It is always smart to sanity check a website before deploying it into a production environment. Whether this is a brand new website, or a upgrade to an existing website, there are a laundry list of things to check before proceeding. Humans are forgetful people. Checklists are not. That is why Work at Play created a "Before Launch Checklist" are part of our Process Library (which we'll slowly be publishing out over this blog as time goes by) Here is the checklist (which can also be downloaded in PDF above). This is by no means an exhaustive list.
Design
- If this is a website, does it have a custom favicon?
- Has the entire site been proof read? Who did it?
- Have you checked all the standard browsers? FF/IE/Safari/Chrome?
- Does the site still work with Javascript off? Who tested this?
- Are all pages W3C standards compliant? Who checked?
- Have all design assets been packaged for delivery to the client? (e.g. PSDs, FLAs, etc)
SEO Basics
- Are titles SEO friendly? Are meta title & description added?
- Does the client have an analytics package? Has the code been integrated?
- If the is an XML Sitemap, has the XML sitemap been submitted?
- Is the page's title in an H1 tag? (Not the site name!)
Drupal/CMS (if applicable)
- Make sure automated tasks are setup (i.e. cron or cron.php)
- Have development modules been deactivated removed from the production website?
- Is this an upgrade? Has the maintenance page been styled? Has the client been notified about the outage?
- Are on-screen error messages disabled?
- Are performance settings turned on? Caching? Compression?
- Is there a backup strategy for files & database?
This checklist is living document -- please let us know anything you believe we are missing and we'll improve the list. 
Marketing Needs Design
May 04, 2009 - Jesse Korzan
I recently posted on Twitter something to the effect that "MarketingProfs.com makes me angry". Specifically, Matthew Grantʼs post “Design Needs Marketing, But Does Marketing NEED Design?” was the most recent pain point for me.