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.
Development (3 of 29)
Where the rubber meets the road
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)
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
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.
https://woodworkscabinetry.com
Ajax content loader (6 of 29)
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
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
Design
Logo design for premium cabinet company.
Icon pack (9 of 29)
Glass pack icons
Design
A personal design exercise.
Radial menu (10 of 29)
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
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
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.
https://www.anniethebaker.com
Yahoo Mail (13 of 29)
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
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.
Inflatafun site
Productivity app (15 of 29)
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 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)
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
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
Content, development
This is a fairly straightforward marketing site, clean and simple. I also wrote all of the copy and developed the imagery.
https://www.grafffinancial.com
Design concept (21 of 29)
Level 2
Design
Another design concept, more of a game feel on this one.
Event website (22 of 29)
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.
Logo (23 of 29)
Authentica
Design
Logo design for sporting goods company.
Logo (24 of 29)
Team Johnson
Design
Logo design for personal project.
Logo (25 of 29)
Cargonize
Design
Logo for automotive accessory company.
Logo (26 of 29)
RockCreek
Design
Logo for financial services company.
Logo (27 of 29)
BabyBelly
Design
Logo concept for maternity products company.
Logo (28 of 29)
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.
