interaction design

Interaction design

Apps that work how you’d expect.

design

Graphic design

Responsive layouts, clean, clear UI.

development

Development

jQuery, HTML5, Javascript

responsive layout

Interaction, design, development

Responsive Layout

photo gallery

UI, development

Wood Works photo gallery

AJAX content loader

Development

Ajax-based content loader

Mobile design

Design

Ambient App

Logo

Design

Wood Works logo

Icon pack

Design

Glasss pack

Radial menu

Design

Orbits radial menu

Animation demo

Design, development

Orbits Demo

Ecommerce website

UI, design, development

Annie the Baker

Productivity App

UI design

Yahoo Mail

Branded interaction

UI, design, development

InflataFun

Productivity App

UI, design, development

PropelHire

Icon

Design

OneId Icon

Game

Mechanical design

OneID maze

Data model

Development

Data model

Productivity app

UI design

Flexi UI design

Financial website

Content, development

Graff Financial website

Design concept

Design

Level 2 design

Event website

Design, development

Tonka Rib Fest

Logo

Design

Authentica logo

Logo

Design

Team Johnson logo

Logo

Design

Cargonize logo

Logo

Design

RockCreek logo

Logo

Design

BabyBelly logo

Logo

Design

GlobalWatt logos

About me

Interaction Design (1 of 29)

It’s about people

The first step in building effective applications is understanding the consumer. Who are they, what are their needs, and how do they behave?

It’s about technology

How can technology, present and future, address user needs? What new capabilities does it offer?

It’s personal

Interaction design is about guiding emotional responses. You want people to feel a certain way when using your application.

It’s business

Interaction design is about creating intuitive functionality that addresses concrete challenges and satisfies key metrics.

My specialty

Creating intuitive interaction models and simple interfaces for complex applications.

Productivity App | Propelhire

Photo Gallery | Wood Works

Ecommerce | Annie the Baker

Graphic Design (2 of 29)

More than just another pretty face

Graphic design is far more than just making things look pretty. Presenting functionality and information in the right way makes it easier to understand and use.

Good graphic design is the lynch pin of the best applications. It enhances the effectiveness of your interaction design and drives home your brand.

My specialty

Creating clean, simple UIs and engaging, responsive page layouts.

Responsive | Annie the Baker

Engaging | Wood Works

Simple | InflataFun

Development (3 of 29)

Where the rubber meets the road

jQuery, HTML, CSS, javascript, GSAP

The best interaction and graphic design isn’t going anywhere without the development skills to implement them.

With 20 years of experience building software and web apps, I’ve managed and done hands on work on every aspect of product development.

My specialty

Front end web development, data models, complex business logic. Focused speedy development.

Ajax/PHP/db | PropelHire

jQuery/Ajax | Wood Works

jQuery/GSAP | Orbits animation demo

Responsive Layout (4 of 29)

Responsive layout

Articulation Design

Interaction, design, development

The same code is used to render both of these sites. A simple algorithm resizes images, fonts, and other elements, and pagination is dynamically generated based on the available space.

Test it yourself by resizing your browser or rotating your device.

Photo gallery (5 of 29)

Wood Works photo gallery

Wood Works

Interaction, design, development

Wood Works has an extensive portfolio that they use for both sales and design reference.

I designed and built an AJAX-based site that dynamically loads content in the background for fast, seamless browsing. The end result is a site that feels more like a native app.

http://woodworkscabinetry.com

Ajax content loader (6 of 29)

Logic for content loader

Wood Works photo gallery

Development

I designed and built an Ajax-based content loader that dynamically creates gallery pages/images based on the file structure on the server. Folders/images added to the server are automatically inserted in the DOM on page refresh.

see it in action

Mobile design (7 of 29)

Ambient App

Ambient App

Design

I reimagined the interface and created icons for Ambient, an Android app that uses phone sensors to provide basic ambient info: temp, humidity, pressure, and altitude.

Logo (8 of 29)

Wood Works logo

Wood Works logo

Design

Logo design for premium cabinet company.

Icon pack (9 of 29)

Glass pack icons

Glass pack icons

Design

A personal design exercise.

Radial menu (10 of 29)

Orbits radial menu

Orbits

Design

“Orbits” is a portfolio concept that includes radial site menu. Research shows that radial menus are faster for users under certain circumstances. Ask me when and where.

Animation demo (11 of 29)

Orbits Demo

Orbits demo

Design, development

This demo gives you an idea of what HTML/CSS and JS can do. I’ve implemented CSS animations and the GreenSock JS animation platform. There are pros and cons for each, and there can be a lot of variability between browsers.

view demo

Ecommerce website (12 of 29)

Annie the Baker

Annie the Baker

UI, design, copywriting, photography, development

This site is a customization of the popular ZenCart with a simplified, ajax-ified UI. Annie the Baker is “all about the cookies” so in place of product thumbnails you get lush full screen images of the selected flavor, creating an engaging branded experience.

http://www.anniethebaker.com

Yahoo Mail (13 of 29)

Yahoo Mail design

Yahoo Mail

UI design

I’ve been using Yahoo webmail for years, and always thought the design was too noisy and clunky, so I spent a couple hours reimagining. Show the essentials, hide everything else, and gain more ‘pop’ for your adspace.

The inset shows how hidden menus provide much more flexibility in terms of overall function and utility.

Branded interaction (14 of 29)

InflataFun

InflataFun

UI, design, development

Branding can and should be carried through interaction design (think FlipBoard). “Bouncing” page transitions drive brand into the interaction on this simple brochure site.

http://www.inflatafun.com

Productivity app (15 of 29)

PropelHire

PropelHire

UI, design, front-end development, back-end development

I designed and built this ajax/php application end-to-end, working closely with the subject matter expert to create UI and business logic. I based the graphic design for the UI on an existing marketing site (inset), for which I coded the front-end as well.

Icon (16 of 29)

OneID Icon

OneID app icon

Design

OneID had an existing logo, but they wanted to tweak it to give it more depth. I developed this for their iPhone app icon.

Game (17 of 29)

OneID Maze

Mechanical design, construction

OneID wanted a unique customer engagement piece that needed to match an existing animation (where the maze walls dropped into the floor). I designed and constructed this maze game in less than two weeks.

Data model (18 of 29)

Data model

PropelHire model

Development

This diagram shows the core tables in the PropelHire model (the app required about 50 tables for primary functionality), which tied every piece of data together across the entire interaction model. This enabled multiple context-sensitive views into the same dataset, providing robust yet simple user interactions.

Productivity App (19 of 29)

Flexi Device Monitor

Flexi

UI Design

Flexi is a device monitor that allows you to view all of your mobile/tablet activity in one place. A great tool for parents to keep track of their kids’ device usage.

This was a 2-3 hour exercise to re-envision the main portal of the site.

Financial website (20 of 29)

Graff Financial website

Graff Financial

Content, development

This is a fairly straightforward marketing site, clean and simple. I also wrote all of the copy and developed the imagery.

http://www.grafffinancial.com

Design concept (21 of 29)

Level 2 Design

Level 2

Design

Another design concept, more of a game feel on this one.

Event website (22 of 29)

Tonka Rib Fest

Tonka Rib Fest

Design, development

I designed and built this one-pager plus for an event promo. The registration form ties in to PayPal for payment processing.

http://www.tonkaribfest.com
http://www.delanoribfest.com
http://www.navarreribfest.com
http://www.rogersribfest.com

Logo (23 of 29)

Authentica logo

Authentica

Design

Logo design for sporting goods company.

Logo (24 of 29)

Team Johnson logo

Team Johnson

Design

Logo design for personal project.

Logo (25 of 29)

Cargonize logo

Cargonize

Design

Logo for automotive accessory company.

Logo (26 of 29)

RockCreek logo

RockCreek

Design

Logo for financial services company.

Logo (27 of 29)

BabyBelly logo

BabyBelly

Design

Logo concept for maternity products company.

Logo (28 of 29)

GlobalWatt logos

GlobalWatt logo concepts

Design

I was in discussions with GW about re-branding (before they went out of business). Here are a handful of logo concepts I developed.

About me (29 of 29)

I don’t do mediocre.

20 years UI design/development. My first software job was in 1993, working on multimedia products for Microsoft. I moved to the Bay Area in 1996 to work for Internet startup Headland Digital Media. Since 2001 I’ve been doing design, development and management consulting for Google, HP, and a variety of startup clients. Over the years I’ve done both hands on design/development and managed large cross-functional teams, and I enjoy all aspects of product development.

I am passionate about developing products that are a joy to use, and my experience has taught me how to quickly design, engineer, and deliver high quality applications.

Kevin Johnson

LinkedIn | full profile/background

Email | kevin@articulationdesign.com

Tel | 408.438.3838

details
thumb_bg_red thumb_bg_gray thumb_title_bg