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

Branded interaction

UI, design, development

InflataFun

Productivity App

UI, design, development

PropelHire

Data model

Development

Data model

Icon

Design

OneId Icon

Game

Mechanical design

OneID maze

Financial website

Content, development

Graff Financial website

Productivity app

UI design

Flexi UI design

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 28)

My specialty

Creating logical interaction models and simple interfaces for complex applications.

Productivity App | Propelhire

Photo Gallery | Wood Works

Ecommerce | Annie the Baker

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 personal

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

It’s about technology

What are the capabilities of existing technology and future possibilities? How can it address needs and enhance behaviors?

It’s business

Interaction design is about creating intuitive functionality that addresses concrete challenges.

Graphic Design (2 of 28)

My specialty

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

Responsive | Annie the Baker

Engaging | Wood Works

Simple | InflataFun

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.

Development (3 of 28)

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

Where the rubber meets the road

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

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 particular focus is front end development technologies:

jQuery, HTML, CSS, javascript, GSAP

I’m also experienced with PHP, mySQL, data models, and business logic development.

Responsive Layout (4 of 28)

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.

Responsive layout

Photo gallery (5 of 28)

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

Wood Works photo gallery

Ajax content loader (6 of 28)

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

Logic for content loader

Mobile design (7 of 28)

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.

Ambient App

Logo (8 of 28)

Wood Works logo

Design

Logo design for premium cabinet company.

Wood Works logo

Icon pack (9 of 28)

Glass pack icons

Design

A personal design exercise.

Glass pack icons

Radial menu (10 of 28)

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.

Orbits radial menu

Animation demo (11 of 28)

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. CSS generally beats JS, but JS has its advantages, and there’s a lot of variability between browsers.

view demo

Orbits Demo

Ecommerce website (12 of 28)

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

Annie the Baker

Branded interaction (13 of 28)

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

InflataFun

Productivity app (14 of 28)

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.

http://www.propelhire.com

PropelHire

Data model (15 of 28)

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.

Data model

Icon (16 of 28)

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.

OneID Icon

Game (17 of 28)

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.

Financial website (18 of 28)

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

Graff Financial website

Productivity App (19 of 28)

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.

Flexi Device Monitor

Design concept (20 of 28)

Level 2

Design

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

Level 2 Design

Event website (21 of 28)

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

Tonka Rib Fest

Logo (22 of 28)

Authentica

Design

Logo design for sporting goods company.

Authentica logo

Logo (23 of 28)

Team Johnson

Design

Logo design for personal project.

Team Johnson logo

Logo (24 of 28)

Cargonize

Design

Logo for automotive accessory company.

Cargonize logo

Logo (25 of 28)

RockCreek

Design

Logo for financial services company.

RockCreek logo

Logo (26 of 28)

BabyBelly

Design

Logo concept for maternity products company.

BabyBelly logo

Logo (27 of 28)

GlobalWatt logo concepts

Design

I was in discussions with GW about re-branding their website. Here are a handful of logo concepts I developed.

GlobalWatt logos

About me (28 of 28)

Kevin Johnson

LinkedIn | full profile/background

Email | kevjvek@yahoo.com

Tel | 408.438.3838

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 an Internet startup, Headland Digital Media. Since 2001 I’ve been doing design, development and program management consulting. 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.

thumb_bg_red thumb_bg_gray thumb_title_bg