GENTLEMAN DESIGNER

Craigslist UI refresh concept

This is my concept for a Craigslist.org refresh. Simplify the home page, and put the emphasis on the search feature by making it easier to find you want.

Craigslist Home Page Concept

Each Category would expand to show sub-categories, making it easier to digest all your options. "Most Popular" and "Trending Searches" sections would also be dynamic based on users location and/or city chosen.

Concept for a travel app

Currently a work in progress, this is a concept for a travel app that matches travellers with 'locals' who can show them their peronal version of a city. We like to call it the 'Uber' for travellers. More than a tourist app, the purpose of this is to connect people with people, and with destinations by letting them experience it through a local lens.

early wireframe of a profile page

sign up page

Local profile page

reviews page

Social App Concept

This is a concept for a social app that uses peer pressure to curb texting and driving amongst young people. The concept is to leverage negative peer pressure by use of audio alerts to keep young people from picking up their phones. There is also a gaming aspect to the app that makes users want to use the app so they can compete with friends.

Created with: Photoshop Illustrator

Like any social app, this revolves around you and your friends who use the app. You can keep track of your friends, leave audio alerts for them, and see how you rank among your list and globally.

friends list

friend profile view

friend profile view with recorded message

add friends view

The scoreboard shows your user score as well as two columns below it - one for your friends list and the other for global users. You can also view global users profiles and add them to your network.

scoreboard page with friends and global lists.

global user profile view

When in driving mode, the app will play a randomly pulled audio message to alert you when you touch your phone. The goal is to have the user hear a friend or relative's voice telling them to pay attention to the road so they will learn to not drive with distractions.

recording an audio message

when a message is received during a trip

the alert sounds when the driver touches the phone

Chevy Website Digital Styleguide

For the new chevrolet.com we needed an interactive styleguide for our designers to use when designing the new site. I was tasked with the development of the styleguide. Some of the key features are that it was built to the same specs as the chevrolet site and is fully responsive so the designers can resize and see what the layout should look like at any size.

Created with: HTML5 CSS3 Foundation HandlebarsJS NPM

The site's functionality is soley to guide the designer on how to lay out the pages for the chevrolet website. The designer can look at all the different components and see a responsive demo of that component.

page displaying the features of a component

Once the designer clicks to launch the demo, a separate page pops up with a pixel counter in the corner so that they can resize the browser and view the different ways the component breaks down.

responsive component demo at full width

responsive component demo at 480 pixel width

Manage Bladder Leaks Microsite

Our client wanted to create a microsite showcasing two of their most popular brands, Depend® and Poise®. The goal of the site was to drive prospective customers to get a sample or coupon of either one of the brands products, based on the users needs, and to educate them on managing bladder leakage. The site is very clean and spacious. It has a calm and relaxing color palette and uses a brighter blue for the cta buttons, to get the users attention.

Technology used: Bootstrap HTML5 CSS3 PostCSS Jquery Mustache.js .NET MVC NPM

The main component for this site is a product selector. The user is asked two questions, and based on the answers the site populates what product is recommended for the user. Each product has a link to request either a sample pack or coupon for said product.

product selector progression

The client also wanted lots of videos on the page, and the design called for a monocromatic image theme. All the videos are hosted on YouTube so I had to come up with a way to get a custom poster image on the video, without digging into the YouTube code. The solution was to create a div that was absolute positioned over the video player with the custom image in it. Using Jquery I was able to "click through" the top div to play the video, and when the video triggered, the top image css changed to hide the image. I created a codepen to demonstrate.

YouTube player with custom image overlay

Bruce Andrews Design

Bruce Andrews Design is a bespoke furniture manufacturer that is high end quality and needed a site to reflect their heritage and craftsmenship. A muted color palette with black and white large photography throughout is offset by vivid full color images of their flagship piece on the product page. This juxtoposition adds to the dramatic presentation of this one of a kind furniture.

created with:
Photoshop

Black and White images used for dramatic effect.

I also created a single page brochure that was used in marketing at high end design shows across the country.

Salt & Sea

Personal artwork exploring texture, tone, layers, opacity, and typography.

Software: Photoshop

Patterns In Nature

Personal artwork exploring color, patterns, and perspective.

Software: Photoshop

Darkness, Then Light

Personal artwork exploring darkness and light, opposites, silouettes.

Software: Photoshop

I WORK BY
THE 3 D's


DESIGN

I love everything about design. Typography, color, composition - I want it all, and I want the best. Most importantly I want my clients to have it all, because after all, isn't that what it's all about?


DEVELOP

Breathing life into design, that's what development is. Taking something beautiful and making it functional, making it come alive. I develop with the user in mind, because a web experience is useless if no one wants to use it!


DRINK

Without question, this is the most important part of my work process. To create beautiful, functional digital experiences, one must be inspired - and nothing inspires me more than great coffee! I think I'll go get some right now …

My Process

Conceptualize Wireframe Design Build Test Refine

example of wireframing process

Let's Work Together

Please enter your name, I hope your Mother gave you a name!
It's kind of hard to get back with you if you don't fill this in
If you aren't part of a company, org., team, club, cult, etc... then just type in "myself"
This part is a bit important, If you don't fill this in then our first conversation is going to be awkward!