Author: Lois Last

From Google Ventures: How To Hire The Best Designer For Your Team

THE KEY TO RECRUITING FOR A STARTUP IS TO CRAFT A REALISTIC JOB DESCRIPTION. AND STOP LOOKING FOR UNICORNS–THEY DON’T EXIST, WRITES GOOGLE VENTURES’ BRADEN KOWITZ.

What skills do you need?

The first step to hiring a designer is to list out all the skills necessary to build your product. Here’s my short list of the most critical product skills, and the questions that those skills help answer.

  • Research: What do customers want? Can they figure out how to use our product?
  • Product design: What are we building? What are we not building? What’s in this release?
  • Copywriting: How do we describe our product to customers in a way they understand?
  • Interaction design: How does the product behave? How is it organized?
  • Visual design: How does the product look and feel?
  • UI development: How do we build quality interfaces quickly and flexibly?

There are many other skills you might need: facilitation, content strategy, storytelling, game design, editing, iteration management, etc. You can find a longer list in Jared Spool’s excellent article on assessing your team’s UX skills.

If you’re hiring a designer, start with a skill list. From there, it’ll be easier to see which of those are already covered on your team. And it’ll be possible to prioritize skills based on the product you’re building. Some of these skills might be more or less important. For example, if you’re building an internal tool for IT departments, you probably need product design more than visual design. With this narrowed-down list, we now know what type of designer we’re looking to hire.

source

Creating Clickthrough Prototypes With Blueprint

iPad app that creates widget-based clickthrough prototypes

Blueprint, a $20 app by groosoft, enables you to create iPhone and iPad clickthrough prototypes on an iPad. The tool’s quality is best illustrated by building UIs with the ready-made widgets and the event model. The prototypes can be demoed in the application or via a free companion tool, Blueprint Viewer.

There is also Blueprint Lite, but it limits the user to two projects and no external projects. Blueprint requires no user account because prototypes are distributed as a .blueprint file, a PDF specification or a series of PNG images.

blueprint prototype example

source

VisuAlgo – Visualizing Algorithms

VisuAlgo was conceptualised in 2011 by Dr Steven Halim as a tool to help his students better understand data structures and algorithms, by allowing them to learn the basics on their own and at their own pace. VisuAlgo is like a 24/7 copy of himself. Together with some of his students from the National University of Singapore (see the “Team”), a series of visualisations were developed and consolidated, from simple sorting algorithms to complex graph data structures and algorithms, and also string+geometry algorithms.

visualgo

source

Chartist – Simple Responsive Charts

Chartist.js is a simple responsive charting library built with SVG. There are hundreds of nice charting libraries already out there, but they are either:

  • not responsive
  • use the wrong technologies for illustration (canvas)
  • are not flexible enough while keeping the configuration simple
  • are not friendly to your own code
  • are not friendly to designers
  • have unnecessary dependencies to monolithic libraries
  • more annoying things

That’s why we have started Chartist.js and our goal is to solve all of the above issues.

chartist charts

source

USING SVG TO SHRINK YOUR PNGS

SVG trick with .jpg and .png mask – make big .jpgs have transparent areas

First, I created two files. The first is a regular JPEG without any transparency. You can compress this one as much as you like. The second is an 8-bit PNG (alpha mask). This is just a black and white image that represents the transparent areas of the beer can. Notice how the PNG is only 11KB; that’s because it contains so few colors and no transparency.

svg png mask example

<svg preserveAspectRatio="xMinYMin" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 560 1388">
  <defs>
    <mask id="canTopMask">
      <image width="560" height="1388" xlink:href="img/can-top-alpha.png"></image>
    </mask>
  </defs>
  <image mask="url(#canTopMask)" id="canTop" width="560" height="1388" xlink:href="can-top.jpg"></image>
</svg>

source

Principles of Mobile Site Design

Principles of Mobile Site Design: Delight Users and Drive Conversions (link goes to pdf of study, source button goes to summary)

Google and AnswerLab undertook an intensive research study examining how a range of users interacted with a diverse set of mobile sites. The goal, to answer the question: what makes a good mobile site?

google-mobile-pinch-zoom

source