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.
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.
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.
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.
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.
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.
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.
Site design refresh for well known brand. We built a clean and modern community section that included forums, a video gallery, and a FAQ page all with the intent to get the visitor engaged.
HTML5 CSS3 Jquery .NET
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.
I also created a single page brochure that was used in marketing at high end design shows across the country.
Personal artwork exploring texture, tone, layers, opacity, and typography.
The client was launching a new campaign for roofing in areas of the U.S. that are affected by severe storms. They asked for a responsive, one page site that showcased their partnership with roofing experts and provided many educational resources for repairing roof damage. Of course they were very focused on branding throughout the page as you can see from all the Pink Panthers.
Technology used: Foundation HTML5 CSS3 LESS Jquery
One of the tasks was to create an interactive diagram of the various parts of a roof. Using Jquery, I created rollover hotspots that revealed descriptions of the numbered parts. The challenge here was using absolute positioning on the numbers and + signs to make them hover over the roof image in the right spots on different size screens. As the image shrinks, the hovering hotspots had to be adjusted. For mobile we used a single image with a corresponding list outlined below.
Another item the client wanted was an image carousel with corresponding thumbnail gallery. The challenge was that the thumbnails were laid out next to the carousel. A typical Jquery plugin would not fulfill the needs of the design so I had to create one. I used a Jquery plugin for the actual carousel, but created an image grid for the thumbnails. Using data variables I was able to make the thumbnails highlight when the user scrolled through the images, as well as when a thumbnail was clicked, the corresponding large image would appear in the carousel. I also had to create an item description for every slide, again, I used data variables to populate the description area with color, product name, and type of shingle.
Personal artwork exploring color, patterns, and perspective.
Personal artwork exploring darkness and light, opposites, silouettes.
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?
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!
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 …