Random

March 6th 2010 // Random // Permalink

Oodles of Doodles Art Show

Ryan and Peter put together another great art show featuring  some really fun characters they developed for the show. Held at Screen Ink, visitors could pick from three different t-shirt designs and screen print them right there. I used my HF20 to take couple of shots. Here is the video. Enjoy!

 

February 12th 2010 // Random // Permalink

Planning for Successful Web Site Redesign

Web site redesign takes a lot of time—designer and client time—and as such should be undertaken with a great deal of preparation and planning. Well prepared and planned for redesign will reduce anxiety about budgets, time-lines and make it easier for designers/developers to execute it.

Planning	Execution
Why do a redesign? Who is involved? Technical requirements Design requirements Take inventory of the current site ROI metrics Competitor analysis Site map Wireframe Usability testing	Graphic design Content development Front-end development Back-end development Testing Launch

 

1. Why do a redesign?

The very first thing you want to do is ask your client why redesign. Simply because the web site is "old and out of date", or  "we got new branding so we need a redesign" is not enough unless updating, and new branding will result in increased number of prospects and conversions.

So the two main goals for business web site redesign should always be:

1. To get more prospects
2. To increase conversion rates

Getting more prospects involves:	Increasing conversion rates involves:
Creating unique content Optimizing pages for Search Engines Promoting web site on social media (blogs, facebook, youtube, twitter etc.)	Design that evokes appropriate emotional response  and makes the user stay on the site Use of copy and graphics to motivate the user to take next steps Making sure the UI is intuitive enough for the user to take next steps

Have a discussion with your client about these goals and make sure the creative brief is written around them.

2. Who is involved?

Having the creative brief and knowing who is involved in the project will make budgeting, time-line and project management smooth and predictable process.

On the client side you may have:	The provider team may involve:
Multiple stake holders Board members In-house or freelance designers IT Legal	Account Managers Art Directors Copywriters Graphic Designers Web Designer Back-end Developers UI specialist SEO Specialists

As a freelancer you may wear many hats, but in an agency world the list of team members may be greater, so it is important to determine single point of contact on both the client's and the provider's side.

To provide your client with an estimates that will not come back and bite you, make sure everyone on the team is consulted about the time needed to execute the project. Even a simple spread-sheet like this can help you get started.

3. Technical requirements

To minimize cost, invest as much time as possible in gathering technical info and requirements. If you are not sure what question to ask, try to involve a developer in the discussion.

Questions to ask:

• Who is site/domain name owner?
• Where will the site be hosted?
• Who is the content owner?
• Are there needs for a CMS, and what are CMS functions?
• Who will work with the client to gather a detailed list of web site requirements? 
• Is there a need for a separate mobile version of the site?
• What are the database requirements, if any?
• Will there be any down time? For how long?
• Is the content pulled from other sources?

4. Design Requirements

Design plays a big role in increasing conversion rates. Users react to the design before they read a single word, and if the design is poorly executed, they will question the credibility of the business and leave.

The execution will depend on wireframes, but before you get to that point, you'll need to answer some basic questions:

• Who is the audience?
• Are we using existing or new branding?
• Is Flash welcomed?
• Can stock photography be used or is photoshoot needed?

5. Take inventory of the current site

Don't remove valuable content, loose links, keywords or change good conversion tools without consulting an SEO and UI specialist. Take a snapshot of what's working on the site and make sure to include it in the new website. 

1. What is the most visited content?
2. Where are the links coming from?
3. What are the popular keywords that get current prospects?
4. How are your conversion forms performing?
5. Study current analytics to figure out how users are using your site right now.

6. ROI measures

Without measurable ROI your redesign efforts will be useless. A snapshot from the previous step can help in creating metrics.

Here are the right metrics to track:

• Online lead volume
• Organic search referral
• PPC volume
• Conversion rates on non-campaign traffic
• Conversion rates on campaign traffic
• Cost/conversion for campaign traffic

7. Conduct Competitor Analysis

It is important to know how your current site compares to others in the industry. Find out who those competitors are and how they manage information on their sites. But keep in mind that just because they are doing something a certain way, doesn't mean it is the right thing to do.

8. Create a site map

Based on the site's purpose, it's visitors and what the users are going to do on it, start working on how the information is going to be provided, accessed and presented. Using sticky notes and a whiteboard works really well when working on site maps in teams. You can also use a free service WriteMaps.com to create, collaborate and share site maps with clients.

9. Build the wireframes

When working on wireframes keep in mind that one of the main reasons the website is being redesigned is  to increase conversion rates. Make sure the wireframe depicts a UI that is intuitive enough for a prospect to become a customer.

Create wireframes for each section of the site:

• Home page
• Category page
• Detail page
• Conversion Tools/Page

• Home page wireframes
• Category page wireframes
• Detail page wireframes
• Conversion tools/page wireframes

Some great free tools for wirefaming:

• FireFox Pencil Extension
• MockingBird

10. Usability Testing

Remember that you are not an average web site user. You design for and use web very differently compared to your web site's audience. Having that in mind, arrange and conduct some basic wireframe testing to ensure the UI is understood by the intended audiance.

You can conduct some basic testing by arranging wireframes on a desk and asking participants to interact with them. Have them speak out loud what they are thinking as they are interacting with the UI.

You can find participants through friends, family or social media. I've done some basic testing by taking prototypes to local coffee house and asking people to help me out. It's amazing what kind of info you can gather for a cup of espresso.

Resources

For more details on web site redesign I highly recommend following books:

• Don't Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition
• Web Design for ROI: Turning Browsers into Buyers & Prospects into Leads
• The Design of Everyday Things
• Web ReDesign 2.0: Workflow that Works (2nd Edition)

Do you like this or find it useful? Drop me a note or treat me to a double-espresso from my favorite coffee shop.

 

January 1st 2010 // Random // Permalink

You can never have enough helpers

Here is a peak at my home office and my loyal helper Merki showing me what keys to press.

Photo is courtesy of my wife Khara.

December 17th 2009 // Random // Permalink

Google Browser Size App: a new tool added to my toolbox

"Google Browser Size is a visualization of browser window sizes for people who visit Google. For example, the "90%" contour means that 90% of people visiting Google have their browser window open to at least this size or larger." Read full description here.

I am excited to use this tool as a part of design presentation. I just wish it had a heat-map option similar to 3M's Visual Attention Service, so my clients can not only see what's "above the fold", but also a heat map of what elements draw get most attention.

December 8th 2009 // Random // Permalink

Saab Change Perspective: Amazing Integration of Flash, Video and Photography

I just love the high-quality execution of this Flash website. It shows amazing integration of animation, video, photography and a really cool soundtrack. Kudos to  Lowe Brindfors & ACNE Digital for the design and development.

Here are some screen shots. Visit: http://changeperspective.saab.com/global/en/

Visit website: http://changeperspective.saab.com/global/en/

December 2nd 2009 // Random // Permalink

Wireframing with Pencil: a FireFox add-on review

My preferred way of creating web site wireframes is with a 0.7mm mechanical pencil and sketch template from 960.gs. But just recently I had to quickly create a wireframe that I can more efficiently update and share with the client.

I did some googling and found "Pencil" a free/open-source FireFox add-on for quick GUI prototyping. "Pencil" was not tested on Mac OS X, but it looked so simple and easy to use that I decided to give it a try.

Pencil's GUI is pretty intuitive and easy to figure out.

There is a nice set of shapes and objects to choose from

To add objects to the page you just drag and drop them from the "Shape Collection"

To change objects' properties (background color, border, text etc.) you can use contextual menus or toolbars

There is an extra sat of handles that control the rounded corners. I really liked how this worked.

Problem areas: at least on Mac OS X

Selecting multiple objects on the page for repositioning didn't work as expected. You can't just loop around a group of objects to select them. I had to ctrl+click each object I wanted to select.

This was a problem, because ctrl+click on a Mac = right-click on a PC.

Another problem was the PNG export. Heading 1 or Heading 2 formatted text was getting cut off, and the links did not have expected formatting.

I don't know if there are any other problems with "Pencil" on Mac OS X. Finding those two was enough for me to switch to Adobe Fireworks to complete the project I was working on. 

I'll keep watching "The Pencil Project" for improvements and support for Mac, as this lightweight, free and easy to use solution could save me lot of time developing web site prototypes and wireframes.

November 29th 2009 // Random // Permalink

FireFox 3.6 beta 4 introduces support for HTML 5 local file handeling

On November 26th, Mozilla released forth beta version of FireFox 3.6. One of the new features intoduced in this beta is support for the HTML5 local file handeling. This feature is made possible by File API added to the DOM in HTML5. It gives web apps the ability to access, select and handle local files.

File selection using HTML

HTML code to  select a single file is simple

To select multiple files, simply use the multiple  attribute on the input element:

When the user selects a file, the handleFiles() function gets called with a FileList object containing the File object representing the file selected by the user. In case of multi file select File object for each file the user selected.

File selection by drag and drop

The first step is to establish a drop zone.

var dropbox;

dropbox = document.getElementById("dropbox");
dropbox.addEventListener("dragenter", dragenter, false);
dropbox.addEventListener("dragover", dragover, false);
dropbox.addEventListener("drop", drop, false);

In most cases the dragenter and dragover code is pretty simple. They just stop propagation of the event and prevent the default action from occurring:

function dragenter(e) {
  e.stopPropagation();
  e.preventDefault();
}

function dragover(e) {
  e.stopPropagation();
  e.preventDefault();
}

The drop event does all the work.

function drop(e) {
  var dt = e.dataTransfer;
  var files = dt.files;

  handleFiles(files);
  e.stopPropagation();
  e.preventDefault();
}

Here, we retrieve the dataTransfer field from the event, then pull the file list out of it, passing that to handleFiles(). From this point on, handling the files is the same whether the user used the input element or drag and drop.

Getting information about selected files

Use simple for loop to retrieve individual file objects

function handleFiles(files) {
     for (var i = 0; i < files.length; i++) {
         var file = files[i];
          ..
     }
 ...
}

Attributes provided by the File object:

name

The file's name as a read-only string. This is just the file name, and does not include any path information.

size

The size of the file in bytes as a read-only 64-bit integer.

type

The MIME type of the file as a read-only string, or "" if the type couldn't be determined.

Visit mozilla developer center for more details on using files from web applications and to see an example of how to display thumbnail previews of images before uploading to the server.

November 13th 2009 // Random // Permalink

ActionScript 3 Personal Cheat Sheet

Every once in a while I get asked to do Flash animations, and I love it, as this adds veriaty to my workload. However, I always forget some basic ActionScript 3 code and have to turn to google to figure it out. So I am going to use this blog post as my personal cheet-sheet and add stuff to it as I figure it out.

ActionScript 3 click event

//Register click event on an object (movie, button etc)
mc_clip.addEventListener(MouseEvent.CLICK, clickHandler);
//Execute code
function clickHandler(evt:Object):void{
    //do something
}

ActionScript 3 pausing the main timeline

//stop the playhead from moving forward
this.stop();
//create Timer object
var timelinePause:Timer = new Timer(2000, 1);
//tell flash what to do after two seconds are up
timelinePause.addEventListener(TimerEvent.TIMER, timerHandler);
timelinePause.start();

//execute "what to do"/continue playing
function timerHandler(evt:Object):void{
   this.play();
}

ActionScript 3 load and read XML file

//load XML file
var xml:XML = new XML();
var loader:URLLoader = new URLLoader();
loader.load(new URLRequest("some_xml_file.xml"));
loader.addEventListener(Event.COMPLETE, function(evt:Event):void{
   xml = XML(evt.target.data);
}

To load specific elements of the XML file

//use array access operator []
xml.element_name[0];

To laod a specific attribute

//precede an attribute's name with @ symbol
xml.element_name[0].@attribute_name

To find out number of specific elements

//use XMLList method length()
xml.element_name.length();