Web Design

Browser site design and user experience.

  1. Muir Data

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

  2. 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
  3. TenderTree

    Proposed branding and design for San Francisco health tech startup.

  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. SodaPop Records

    Proposed web design for Los Angeles music label SodaPop Records.

    Developed: 2010
  14. 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
  15. Heroic

    • HTML/CSS
    • JavaScript/jQuery
    • php

    Prototype of landing page transitions and registration forms.

  16. HSOCA

    • Static HTML/CSS
    • Custom php mail form

    Student group website.

    Developed: 2008
  17. 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
  18. AAFACD

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

    Clean design for non-profit organization.

    Developed: 2008
  19. 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
  20. 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.

  21. 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
  22. Manufacturing Co

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

  23. 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
  24. 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
  25. 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
  26. 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