Web Design

Browser site design and user experience.

Muir Data

Proposed branding and front-end designs for wind power data company.

TC Metro App

  • PHP
  • javascript/jQuery
  • AJAX methods
  • HTML5 doctype
  • CSS3 gradients, transitions
  • Media queries, all platforms

My personal project, a web-based real-time transit app using Metro Transit’s nextrip API.

View Live Site

TenderTree

Proposed branding and design for San Francisco health tech startup.

Community Broadband Networks Map

This map visualizes community broadband networks in the U.S. and overlays states which have restricting laws against municipal networks. The map draws from the client’s Fusion Tables spreadsheet to populate information. Custom markers were designed in Illustrator. jQuery creates toggle buttons for “network” markers, “state” polygons, and the enlarge map functions. Attention was given to polish the controls and maps with CSS to achieve a further customized look.

  • Role: Front-End Developer, UX Design
  • HTML/CSS3
  • js/jQuery, Google Maps API
View Live Site

Latch Lake Music

  • Role: Front-End Developer, UX Design
  • Static HTML/CSS
  • js/jQuery tooltips

Product and company website for a microphone stand industrial manufacturer. Experiential product pages allow visitors to hover and view particular product features.

Developed: 2010

Solar Parity Map

  • Role: Front-End Developer with Javascript emphasis, UX Design
  • js/jQuery
  • Google Maps API

The Institute for Local Self Reliance’s John Farrell wanted a map that conveyed when cities would achieve “grid parity” — the time at which solar energy is cheap enough to do it without subsidies. I utilized Google’s Fusion Tables as a client-manageable database to store hundreds of rows of data.  From there, a Google Maps API is intermingled with a custom written Javascript application that RESTfully pulls information from the table and inserts it visually onto the map.  There was extensive testing of different object-orientated methods (arrays, functions, etc) in order to appropriately implement the user interface controls.  CSS3 enhances the user experience and responsiveness.

 

View Live Site

Whittier Alliance

  • HTML/CSS3
  • PHP/MySQL

For a thriving Minneapolis neighborhood organization, I overlaid colors and textures onto a minimal usability-focused design resulting in a whimsical and functional site. The site is primarily conveys text information and the design allows the neighborhood to suggest its vibrancy and branding without obscuring.

Developed: 2012
View Live Site

New Economy Labs

  • Role: Front-End Developer
  • HTML5/CSS/jQuery
  • jQuery page slide movement
  • Media queries, mobile

Branding agency website that emphasizes its focus on visual messages with my own large-scaled photography. Client wanted to show some web tech prowess without using Flash and I suggested using jQuery fades to seamlessly transition between pages without reloading.

Developed: 2011

Marketing Food Trucks

Food trucks being mobile businesses require a web presence. A graphic template was translated into a fully functional WordPress theme. Custom Cufon font and pixel focused detail. Two-day photography shoot over hot lunch hours with post-editing. Integration with Twitter feed.

Role: Translate PSD to front-end WordPress theme, all photography and post-editing

Developed: 2010
View Live Site

Urban Bean Coffee

  • Role: Front-End Developer
  • HTML/CSS/PHP/js

Flexible width site that caters to a coffee shop owner’s preference for a photo experience with minimal layout.  Logo design by John Vogt.

Developed: 2010
View Live Site

RAW Design Build

  • Role: Front-End Developer
  • HTML/CSS/PHP
  • Media queries for screen size
  • Mobile version

Experiential site for a field architecture workshop. The client proposed a non-traditional absolute layout based on minimalism which required extensive CSS editing and cross-browser QA. Media queries adjust proportions and scale a featured background image.

Developed: 2010
View Live Site

MuniNetworks

  • Role: Front-End Developer
  • Drupal theme design build
  • HTML/CSS/PHP
  • Google Maps mash-ups

This non-profit needed a visual and functional improvement to their previous hand-made Drupal theme. A full redesign introduces a new logo and focuses the text orientated site. The overall theme works on a gradient with the heaviest blue denoting the header area and content resting on a central block that is elevated by a drop shadow. Given the site’s long page scrolls, all important site links and social media buttons are integrated into the header. The drop down nav bar is made interactive by CSS alone. The client preserved the serif font and in turn the text is lightened by grays and given generous spacing. Drupal Views and Blocks are organized in the sidebar, customizable to page-type. Internal pages were also redesigned. Several Google Map mash-ups were tied to this project.

Developed: 2011
View Live Site

SodaPop Records

Proposed web design for Los Angeles music label SodaPop Records.

Developed: 2010

Urbanware Store

  • Role: Front-End Developer, UX Design
  • Static HTML/CSS/js
  • PayPal js minicart

A simple e-commerce store for a local coffee shop. Clean and intuitive design, functional code with PayPal integration on a limited budget.

Developed: 2010

Heroic

  • HTML/CSS
  • JavaScript/jQuery
  • php

Prototype of landing page transitions and registration forms.

HSOCA

  • Static HTML/CSS
  • Custom php mail form

Student group website.

Developed: 2008

5R Research

  • Role: Front-End Developer
  • HTML5/CSS
  • Static

Clean and simple static website showcasing an industrial company’s technology through text and visual. Client wanted a focus on typography and layout without distracting movements. Extensive use of drop shadows, text shadows, gradients, and text over images keep the design from being too flat.

Developed: 2011

AAFACD

  • Role: Front-End Dev, UX Design
  • WordPress custom theme
  • HTML/CSS

Clean design for non-profit organization.

Developed: 2008

The Wake Magazine

  • HTML5/CSS/PHP/js
  • WordPress rebuild, design, db clean-up

Complete theme rebuild for a newspaper website. Extensive use of WordPress’ query function to call and order articles. Many lists such as current authors are dynamically generated. Layered else if statements to prioritize and present front page content. Site is optimized to be intuitively managed by regular staff, using WordPress widget and categorizing functions to change and alter site structure as well as general content.

Developed: 2012

Nicollet Media

Role: UX Design, Front-End Development, HTML/CSS

Design and development of Nicollet Media’s company website. As co-owner and director of development, I created a beautiful, sophisticated site that would invite new customers to our sense of style with straight-forward efficiency. Our focus was working with retail and entrepreneurial businesses that wanted an artistic edge to their websites.

Forecast Give to the Max

  • Role: Front-End Developer
  • HTML/CSS
  • PHP-MySQL
  • js/jQuery

Mini-site for Forecast Public Art during Give to the Max Day that allows donors to “give” by adding a piece of public artwork to an online mosaic. This interactive site lets donors share their favorite artwork on a Pinterest-esque wall. Users upload a full size image, scale/crop a thumbnail, move/rotate the thumbnail to a desired position, and save all this information with a caption. A final canvas page shows these “pinned” thumbnails and new visitors can click on them to reveal a larger version with caption. The client was extremely pleased with the final result and users were able to quickly play with the site via minimal and easy to recognize UI.

Developed: 2011

Manufacturing Co

Cross-site brand designs for a manufacturing company specializing in different market niches.

Lind Homes

Role: Branding / Logo Design
Tech: Illustrator, Photoshop

A luxury custom home builder in Minneapolis was interested in branding and better promoting her business during the real estate boom. The client wanted to emphasize the much sophisticated and artistic approach toward her home design than other mass production builders. I researched design themes from various spa and luxury service businesses to develop a central floral logo with calligraphic and accented fonts.

Developed: 2006

Bedford Music

  • Role: Front-End Dev, UX Design
  • WordPress custom theme
  • HTML/CSS

Established professional agencies sometimes just need a brochure to educate potential customers. This client was looking for simple and clean with some detail to refine their brand. Attention was focused on making sure all the copy looked just right on multiple browser platforms.

Developed: 2008
View Live Site

Grayline Clothing

Role: Translate design to front-end WordPress theme, all product photography and post-editing

This is a perfect example in helping a very talented creative client achieve their vision. The client had a design concept drawn out in Illustrator right down to the font. I translated everything to a WordPress theme that preserved every pixel of their design. I built upon their concept with a blog page template. This site fully utilizes the dual aspect of WordPress, displaying “static” informational pages and a blog section all in one interface.

Developed: 2009
View Live Site

Cafe Kem

  • Website
  • WordPress
  • Custom theme
  • Slideshow
  • Contact Form
  • Social Media
  • Facebook fan page setup
  • Twitter account setup
  • Auto-post to Facebook from Twitter
  • Print
  • Three panel menu board
  • Two-sided sandwich board
  • Business cards with drink stamps
  • Interior displays: horizontal toppings guide, frozen yogurt flavor magnetic signs, coming soon signs
  • Take-out brochure menu (3-fold)
  • Photography
  • Product staging, capture and editing
  • Photos of store exterior/interior, drinks, fruit toppings

Originally a website project, the client enjoyed the proposed theme and in-turn further contracted photography and graphic/print design which would feature in-store as well. The wire frame follows other frozen yogurt competitors except it is toned to warmer colors to reflect the interior design. Photography and bold typography give the site a slightly whimsy feel. The client preferred an in-page Facebook feed and Blogger widget as opposed to taking advantage of WordPress blog functions. Their audience demographic was certainly younger and their outreach followed social media channels. The graphic design portion involved duplicating online elements for print and vice versa. Many hours were spent swapping images in the visual menu and toppings display. Printing was done locally which involved selection of stock and coatings.

Developed: 2010