Hello.
I'm Nate. I'm a Web Designer.
Front-End Developer.
Site Speed Specialist.

Skills

Featured Works

Camelback Volkswagen: HomePage

Camelback Volkswagen is the #1 Volkswagen Dealership in the Phoenix, AZ area. The Camelback Volkswagen Redesign Project was a complete redesign of their existing site. As the Lead Designer and Developer, I was tasked with coming up with new design ideas while incorporating the dealership's requests.

I wanted to present a brand-new look homepage for Camelback Volkswagen. Their homepage was in need of a refresh and instead of a few small tweaks, I thought bold designs and new ideas were the way to go. I used their primary color, Camelback Blue, and their secondary color, Camelback Orange, throughout the homepage. Large images, splashes of vibrant color, elements that extend beyond the page and new techniques with CSS3 cover this page. The text-based pattern above the footer, that lists all VW models, is just that--text. Most designers/developers would simply use an image, but I chose to use actual text so that it improves SEO. Each model name is rotated and clipped to a container, so as not to overflow. Each model name is also a link that, when clicked, adds a new style, with transition, and takes the user to all available models in inventory. Upgrades like this were added to improve the appearance of the site, but also the function and performance.

  • Lead Designer, Lead Developer
  • Web Design, Web Development, Logos, Images, Icons
  • January, 2013 - April, 2013

Camelback Volkswagen: The Camelback Difference

Camelback Volkswagen is the #1 Volkswagen Dealership in the Phoenix, AZ area. The Camelback Volkswagen Redesign Project was a complete redesign of their existing site. As the Lead Designer and Developer, I was tasked with coming up with new design ideas while incorporating the dealership's requests.

This page was also in dire need of a redesign. As you can see from the original page, it was extremely text heavy, uninspired and the use of the tired old stock photos in a grid were simply boring. I liked the idea of the "happy customers" in the "14," which is for the fact that Camelback VW has been voted the "#1 Auto Dealer 14 Years in a Row." But the "14" on the original page didn't really work. It stuck out, but for the wrong reason. It just came out of no where.

So, in the redesign, I made sure to really make it stand out, in the right way. In fact, I made it come right off the page. I added some glow behind it, because it's in the limelight, and a large cast shadow, to show how Camelback towers over the competition and leaves a big shadow over them. In addition to the idea of the shadow and what it means, it also creates interesting angles for the text next to it.

Being the BEST for 14 straight years is an amazing accomplishment, so I wanted to make sure to highlight this. As such, I placed it right at the top. And since this page talks about the benefits, perks and accomplishments of the dealership and their customers, I thought it made since to surround the entire page in a banner. And finally, The Camelback Difference badge that I created adds another element of intrigue to the page, which grabs the eye of the potential customer and invites them to learn more.

  • Lead Designer, Lead Developer
  • Web Design, Web Development, Logos, Images, Icons
  • January, 2013 - April, 2013

Zeigler Chevrolet Schaumburg

Zeigler Chevrolet of Schaumburg, IL needed help organizing their content. They had unused space, dated images and no clear message. It felt like there was no greeting when you arrived at their site. You were simply thrown right into it. I worked with the dealer to make things right.

I designed a set of hero images to use in the rotator at the top of the screen, which showcased vehicles they wanted to highlight, for one reason or another. We then eased the visitor in with some high traffic CTAs.

After that, we introduced the visitor to the vehicles that Zeigler carries. I decided to do this in a space saving way to minimize the footprint of the widget. Next to all of the vehicles, I placed a specials rotator in order to attract those looking for a good deal. You may notice that this section is slightly larger than the rest of the main container. I did that intentionally, as it adds an interesting line to the shape of the page, while pulling the user towards it.

The next three items were important to the dealer. They wanted to increase traffic to their finance form, bring in more trade-ins, and inform visitors of the current GM-specific deals.

Their fuel efficient vehicles were bringing many people to the dealership, so they insisted on leaving that banner up. And finally, after the homepage text, I wanted to bring awareness to their social media accounts, so I added simple icons to the footer for Facebook, Twitter and their blog.

  • Lead Designer, Lead Developer
  • Web Design, Web Development, Images

Lexus Tires

The Tire Marketing Campaign for Lexus of Cherry Hill consists of a landing page, banner/leaderboard, wide skyscraper, medium rectangle and coupon. In this campaign, I designed a new look for the main headings, which I call "cut text." You'll also notice that I minimized the amount of text and maximized the size of that text and the imagery to create an engaging piece.

  • Lead Designer, Lead Developer
  • Web Design, Web Development, Images

Car Customization Campaign

This hero image for the Car Customization Campaign illustrates the idea of turning a dream (sketch) into reality.

  • Lead Designer
  • Web Design, Images

Impala and Silverado

The Chevrolet Impala and Silverado 2500HD marketing campaign focuses on the specs of each vehicle. I designed this campaign exclusively for Tom Kelley Chevrolet Buick. The 3-piece campaign consists of a banner/leaderboard, wide skyscraper and medium rectangle for each vehicle. The idea is to understand the specifications of each vehicle through the driving process, hence the specs being written in 3 dimensional space.

  • Lead Designer
  • Web Design, Images

Subaru WRX STI

The Subaru WRX STI marketing campaign, consisting of the hero, banner and medium rectangle, highlights the car's aggressive stance and decorated racing history.

  • Lead Designer
  • Web Design, Images

Blemish Removal

This image was sent to me as a small hardcopy photo with a landscape aspect ratio. The request was to crop the image into a portrait aspect ratio, enlarge it to 8"x10", and prepare it for print. In addition, they wanted acne spots and facial lines removed from the girl, and noise reduced and dust removed from the image.

  • Acne Removal, Line Removal, Dust Removal, Noise Reduction, Enlarging, Cropping
  • Photo Editing, Ready for Print
  • January, 2012
Cindy, Before Photo Cindy, After Photo
Twins, Before Photo Twins, After Photo

Tear Removal

This image was sent to me as a hardcopy photo. The photo had been torn in two places, with the larger tear across more than 50% of the photo. The photo also had a few smaller issues, including dust and noise to be removed, and some hair to be moved out of the face of one of the girls.

  • Tear Removal, Hair Removal, Dust Removal, Noise Reduction
  • Photo Editing, Ready for Print

Cobalt: Content Division

The Content Division at Cobalt, referred to as the "Content Team", was looking for a new logo for their brand. As a member of the team, I created the following.

Design Goal: To create a simple, yet memorable logo that encapsulates the role of the content team. The logo should also be designed in a way that remains attractive in both vertical and horizontal configurations, as well as in full and abbreviated variations, i.e. text only, logo only and combined.

Design Concepts: The heart of the logo is the design at the top, which not only represents coding--by the use of the square brackets and plus sign, which are used in css to denote attribute selectors and adjacent selectors, respectively--but it also symbolizes assistance by the use of the cross, as used by the American Red Cross. In addition, as you can see from the stylized text below it, the brackets and plus sign also represent the "C," "T" and "T" of the "CONTENT" name. The use of coding in the logo continues with a stylized css comment, which reads "a cobalt team." This plays on the standard naming convention of "Cobalt, an ADP Company." The use of cobalt blue is intentional, in homage to our company name, as well.

Implementation Techniques: I wanted to keep the logo simple and classic by using flat design. The only exception is the subtle gradient.

  • Lead Designer
  • Web Design, Logos, Images

Shot in the Dark

This logo was designed for the a cappella group, Shot in the Dark, in Seattle, WA.

  • Lead Designer
  • Web Design, Logos, Images

Birthday Girl Poster

This movie-style poster was designed for a friend, who wanted to pursue a career in film.

  • Lead Designer
  • Print, Images

Right Here

This poster was designed as a gift for a friend who was moving across the country. I wanted the message to be clear, yet artistic. The quote is an original.

  • Lead Designer
  • Print, Images

Camelback Difference Badges

Camelback Volkswagen is the #1 Volkswagen Dealership in the Phoenix, AZ area. The Camelback Volkswagen Redesign Project was a complete redesign of their existing site. As the Lead Designer and Developer, I was tasked with coming up with new design ideas while incorporating the dealership's requests.

While talking with the General Manager of Camelback Volkswagen, he mentioned that he would like an image created for The Camelback Difference. I decided that a badge would be the best type of image to create, as it would allow me to use it throughout the site, at both large and small sizes. I designed these badges with a duality in mind: familiarity and awareness. For those who know of The Camelback Difference, I want this badge to serve as a quick reminder. For those who are unaware, I want this badge to be a learning jump-off point.

  • Lead Designer
  • Web Design, Images, Icons, Vector

Let's Work Together.

contact@nathanepierce.com