Portfolio

 

Samples of Web, Graphic and User Interface Designs

 As a developer and user interface designer, I wear a lot of hats. The following categories highlight my skills in several areas.

 

  • Page designweb page design
  • Graphic designiconography, artwork, etc.
  • UI designreworking of interfaces and design of new interfaces
  • Graph and chart designrevisions and new charts-information display



 


Page design

These are pages that I’ve designed for both development teams and small businesses


Radical redesign
Clinic website
Booking website
Backup viewer
Charity website
Whimsical prototype
These two comprehensives represent redesigns for a product that analyzes database performance. They are graphically stunning, and present information in a way that’s easily and quickly graspable. These are hosted within a standard framework.


This is a production website for a small clinic. They’re in an historic house, with an intimate feel. This drove the design, as did the need for simplicity and maintainability.

This is an implemented site for a small entertainment booking and production firm. It’s an adaptation of a Flash-based website. It has simpler navigation and a clearer layout, but isn’t as graphically intense. Sidebar navigation is handled using AJAX.

This is a working prototype of a web-based backup viewer. It shows multiple sections as openable and closable areas, using ASP and cookies. The content is served using XML/XSL inside ASP, and CSS for the layout. There is some AJAX used for the report spec.

This is an implemented site for a small charity. Simple, direct navigation, a small Flash photo banner and uncluttered layout on this design.

Here is an older webpage prototype for a small boutique. Navigation is simple and whimsical, with clear identification at the top and bottom of the page.

 

Graphic design

Another facet of my work is to create the artwork and icons that get placed on a finished design. This can vary wildly from project to project.


Icon samples
Banner ads
Internal splash
Logo designs
Themed functions
Basic icons
Background art
UI facelift
These are a variety of icons for development teams.

Here are two banner ads used for online advertising. My goal was a simple, uncluttered layout.

This is a splash screen for an internal product. This utilized several common elements with a dynamic and casual feel.

Here are several logo designs for an internal website. My intent was to present a variety of different moods within a common layout.

This is a set of icons centering around a common theme with different functions contained within each box.

Another set of icons-mostly basic functions. This is for a web based reference utility.

This is the top background of a web service.

Here are a large set of icons for a dev team doing a UI facelift. My goal was a modern feel without a lot of clutter.

UI Design

I work on revising development teams’ interfaces as well, and I’ve done a lot of UI programming in the past. I have also done prototypes for information architects.


Report redesign
Mobile UI
Security dialog
Connection dialog
Database list
Performance layout
Prototype
Selector/Parameters
File generator
This form was done primarily in Visio, with polish and the framework added in Photoshop. The original was just a grid, and the filtering mechanism was overly cluttered and removed from the data display.

Here is a comparison of a redesign of a database connection dialog. This design was done in Delphi. The goal was to simplify and show more information on the grid, and to differentiate parameter entry from the dialog’s main function.

This is a dialog to organize database connections. This had a layout directive, and some navigation issues in the original.

A revision to a database performance product. My goal was to make the main area simpler and easier to see the relevant information. Also to centralize the next steps and give a more balanced textual presentation.

Here is a prototype in Delphi, compared with the block diagram designed by the architect.

This is a page from a wizard that sets up physical inventory processing. This page enables location choice and run parameters for each choice.

This is a program that generates member files based on their proximity to the store.

This redesign consolidated several different reporting modules. Report selection and creation was simplified and modularized. This 3 top pane, bottom pane layout was subsequently applied to redesigning the rest of the application.


This is a design for a messaging app, targeted at a mobile device. My intent was to simplify the data entry so that users would be motivated to fill out the entire form. I also wanted a clean, spare, flat look, so all the borders and extra stuff is gone.

 

Graph and Chart Design

Making and revising data presentations is also something I do as a UI designer. This process is overlooked, and risky-it’s easy to add a lot of effects to charts that can actively detract from the information being displayed.


Inspector
DB stats
Chart effects
Activity chart
DB freespace
Cutoffs
TS failure
SQL compare
Here is a revision, removing the 3-d effects, lightening the bright colors and simplifying the grid and axes.

This is a main landing page set of charts that benefited greatly from removal of 3-d, lightening colors and axes.

The dev team wanted some “snap” to their charts, so I added some effects and tried to retain the clarity and clean up the grid and axes.

In addition to changing colors, I also scaled the bottom axis and cleaned up the bottom list of options.

Again, removing 3-d, lightening up the colors, moving the legend and compressing the vertical space makes this chart much more descriptive.

I lightened the colors and made the bottom axis logarithmic. This chart was very hard to extract the relevant information before the revisions. Small changes like removing contractions also help with readability.

Many of the same changes are made to this chart. This one includes slice labels, but clarifies them.

This is an early example of a chart revision. I used many of the same techniques here.

Return to resume