select projects in design, code, print, photo, & branding
 

overstock.com

September 2008 - present

aerial perspective

August 2007 - present
Aerial Perspective | UX, Web & Print Design, Branding in Utah

what i did

In 2007 in between jobs I killed my previous company and came up with Aerial Perspective: graphic and web design. I have operated under this entity handling freelance projects aside from my full time job ever since.

what is it

An aerial perspective is akin to, a view from above. In the case of web design I look at different angles to create the ideal user experience from an outside vantage point.

keys to success

  • clean easy to navigate design
  • HTML 4.01 strict validated
  • well formed semantic HTML
  • 1 sprite to rule them all
  • compacted and clean jQuery

logo

I have used the dragonfly from my very first design, because this insect sees everything with huge eyes, and from above.

Technology Used:
Adobe CS5

portfolio

Built using jQuery with a carousel, tabs, and colorbox to create a sleek interface laid out on a 960gs 12 column grid.

Technology Used:
Adobe CS5, PHP, HTML, CSS, & JS

footer

I love big footers and this one includes a twitter and photo feed, as well as a great quote that pertains to design.

Technology Used:
Adobe CS5, PHP, HTML, CSS, & JS

timaverybirding.com

March 2004 - present
Tim Avery Birding.com: Bird Photography and Identification, Utah Birds and Birding!

what it is

This was my first website outside of school projects. I have had 8 or 9 versions since the get go--being my personal website it has grown with me as a web designer over the years

I built the first version to host photos, and have since expanded to include videos, a blog, and other random pieces of information.

This is the site I usually test new technology on before using on other websites.

keys to success

  • clean 960gs layout
  • rustic/organic design
  • organized PHP photo gallery
  • HTML 4.01 strict code
  • the site fits the users

logo

This site has had an ever-changing logo. The eagle has stuck through the past 4 years and has become so it may last.

Technology Used:
Adobe CS4

navigation

A jQuery based nav that slides sub-navigation into view on hover. A space saver and useful to hide low traffic pages.

Technology Used:
Adobe CS4, PHP, HTML, CSS, & JS

footer

Another big footer, this one combines a photo feed from my gallery, along with a "simplified sitemap" for SEO goodness.

Technology Used:
Adobe CS4, PHP, HTML, CSS, & JS

utah birders blog

December 2010 - present
Utah Birders | Birding Blog, Utah Birds, Utah Birding, Utah Bird ID

what i did

I designed and coded this site in an afternoon to start up a pet project myself and a couple of friends had been talking about for some time. Hosted on Blogger, this simple and clean design make for an easy read with the focus on the content.

what it is

It is a multi-user blog to talk about birds and birding in Utah.

From expert to beginner this blog offers something for all birders.

keys to success

  • oh so very clean design
  • simple user interface
  • jQuery for some interaction
  • connected to the social network
  • meaningful content to fill the space

logo

One of my favorite logos I have designed. Clean and simple--but powerful. The font and icon interact to make it memorable.

Technology Used:
Adobe CS5

contact

Built with jQuery, powered by Google. The image behind the form is a flock of birds, as if the bloggers are the flock being contacted.

Technology Used:
Adobe CS5, HTML, CSS, and JS

about

Simply laid out and pulled in via jQuery, these mini biographies match the site in their cleanliness, style, and readability.

Technology Used:
Adobe CS5, HTML, CSS, and JS

every mutt matters

completed: December 2009
Every Mutt Matters

what i did

I designed and built this site, including a blog, photo gallery and a CMC to update information without the need for a web designer.

The color palette of pinks was used to be easy on the eyes and present a need for help.

what it is

This start up not for profit was created to help save dogs by supporting no-kill animal shelters--primarily in Utah.

keys to success

  • modified 960gs layout
  • clean and welcoming design
  • powerful imagery where needed
  • PHP powered gallery
  • a noble cause outweighs the design

logo

The silhouette of a puppy set against the pink background presented a strong image to go along with the cause.

Technology Used:
Adobe CS3

layout

Very clean and simple--I modified the 960gs 6-column grid to allow for more space in the gutters and around content.

Technology Used:
Adobe CS3, PHP, HTML, CSS, & JS

business card

Mimicking the layout of the site, the business cards matched the site in every aspect--helping with promoting the brand.

Technology Used:
Adobe CS3

sam-and-tim.com

September 2010 - present
Sam-and-Tim.com: Our Wedding, Our Pictures, Our Blogs

what i did

This personal site was designed to be clean, elegant, and easy to navigate. The layout is based on a 12 column 960gs layout and a swiss style, relying on the whitespace to focus on the content.

The logo is both representative of me and my fiance.

what it is

A website to use for our wedding and life after. The focus of the site being on us--the content--not the design.

keys to success

  • whitespace, whitespace, whitespace
  • very elegant and clean layout
  • Tubmlr blog for easy updates
  • the content is the focus-not the design
  • love defeats all evil

logo

Two love birds represent my fiance and I. Pink her color, orange mine, atop fonts that show our style and strength.

Technology Used:
Adobe CS5

blog

This simple Tumblr blog is easy to use, and allows us to keep those around us updated on what is going on in our lives.

Technology Used:
Adobe CS5, HTML, CSS, JS, & Tumblr

print

Keeping the theme going these save the date cards are the first piece of print for our wedding--and they tie into our site.

Technology Used:
Adobe CS5

timberlywhitfield.com

completed: December 2010
Timberly Whitfield | TV Personality

what i did

I designed this site with the actress it features in mind. The purple is a powerful color that represents her as a person. The homepage features a glamour shot--the focus of the site.

This new and improved site helps drive the users attention where it needs to go.

what it is

A personal website meant to work as a resume, press kit, and information piece on an actress.

keys to success

  • powerful color and layout
  • high res photography up front
  • HTML 4.01 strict code
  • focus on the content--no the design
  • a brand for a name

logo

Although not the logo I would have picked to use, this updated design played off the previous logo of a television set.

Technology Used:
Adobe CS5

branding

What is a name without a brand? The design, colors, and content all help create a presence, and a feeling to go with the name.

Technology Used:
Adobe CS3

press

The press page highlights Timberly's work and is laid out in a clean and orderly fashion. This repository put all her work in one place.

Technology Used:
Adobe CS5, HTML, CSS, and JS

western field ornithologists

completed: October 2007
Welcome to Western Field Ornithologists

what i did

I haven't worked on this site in over 3 years. At the time I provided an updated look and feel to an outdated and content-less website.

The design is still in use, but updates are handled by others.

what it is

A website to publicize and share information about the western field ornithologists and their endeavors.

keys to success

  • new updated logo
  • organized interface
  • PHP photo gallery
  • secure to accept donations
  • information packed site

logo

The Sabine's Gull has long been the logo of the WFO. I gave it a face lift--bringing the illustrated version into the 21st century.

Technology Used:
Adobe CS3

layout

The simple and organized layout makes for an easy to read site, that focuses on organization within the organization.

Technology Used:
Adobe CS3, PHP, HTML, CSS, & JS

modules

I designed and coded easy to reproduce heading modules that could be changed or updated at any time and fairly easily.

Technology Used:
Adobe CS3, HTML, and CSS

mountain west birding company

completed: June 2008
Mountain West Birding Company. Utah Bird Tours

what i did

I created this site the week before a major birding convention being held in Utah to offer bird guiding services to those in attendance. The site was designed to be bold and memorable.

The code was simple and one of very few sites I designed that included flash.

what it is

A personal website created to promote guiding service that myself and others provided for birders visiting Utah.

keys to success

  • bright and bold colors
  • unique layout and design
  • clean and concise information
  • high res imagery
  • PHP photo gallery

logo

I like the initial design, but later changed my branding goals on print literature, focusing on a more recognizable icon.

Technology Used:
Adobe CS3

layout

The layout was bright and inviting. The goal was to make birding seem exciting and get people interested with the sleek look.

Technology Used:
Adobe CS3, PHP, HTML, CSS, & JS

business card

This version shows an updated logo with a hawk as a the icon to be more in line with birds of the "mountain west".

Technology Used:
Adobe CS3

citizen blues

completed: December 2008
CitizenBlues | Cheap Brand Name Jeans, Designer Jeans, Discount Jeans

what i did

Working with a developer I designed the user interface and front end code to be attached to a one deal at a time (ODAT) back end that he had built.

This was my first project working with an outside developer 1 on 1.

what it is

This ODAT sold jeans at hugely discounted prices while providing fashion information through an attached blog.

keys to success

  • clean and sleek design
  • easy to use photo switcher
  • Blogger hosted blog
  • the ODAT functionality
  • user friendly interface

logo

Taking sketches provided by the owners, I created this version of the logo which represented the company very well.

Technology Used:
Adobe CS3

layout

The layout combined the best features of a number of online retailers and ODATs into a simple easy to use format.

Technology Used:
Adobe CS3, PHP, HTML, CSS, & JS

image viewer

The easy roll-over image switcher made showing multiple views with close up pictures easy and user friendly.

Technology Used:
Adobe CS3, HTML, CSS, and JS

wasatch ski valet

completed: November 2009
Wasatch Ski Valet - Ski more. Stand in line less.

what i did

I was hired at first for a few simple updates to the site; later being asked to come back and make more changes and update more content the following years.

I created a CMC for the owner to update his partner information, and gave the homepage a face lift in 2009.

what it is

This company provides a "to your door" service for ordering skis out of Salt Lake City or Park City in Utah.

keys to success

  • updated homepage for ease of use
  • jQuery for added interaction
  • easy CMC for updates on the fly
  • organized information
  • as easy as 1.2.3...

marketing

Updating the homepage messaging to explain how easy it is panned out great and has been used for more than 2 years.

Technology Used:
Adobe CS3, HTML, and CSS

homepage

The original homepage had a lot of text information, but wasn't graphically interesting. The new version makes it simple.

Technology Used:
Adobe CS3, HTML, CSS, and JS

jquery cmc

To help save the owner money, I used a jQuery CMC to update content as often as they needed without my help.

Technology Used:
Adobe CS5, HTML, CSS, and JS

linking communities

completed: November 2009
Linking Communities - Wetlands and Migratory Birds

what i did

An unfinished project that I need to get to finishing. I designed and coded this simple site using 960gs--the first site I used this framework to build.

The work included adding a blog, a photo gallery, and interactive maps with Google Maps.

what it is

This site is supposed to be the online link between 3 shorebird migration points between Canada and Mexico.

keys to success

  • clean and organized design
  • very peaceful color palette
  • PHP photo gallery
  • will feature easy CMC
  • easy to use interface

logo

Although not the logo I recommended, I took their past logo and flattened it out, along with a cleaner font for legibility.

Technology Used:
Adobe CS3

homepage

Very simple homepage design to keep the user focused on the content and not the design--while ensuring easy navigation.

Technology Used:
Adobe CS3, PHP, HTML, CSS, & JS

content

The simple blog style layout of the pages on the site keeps the focus on the information being presented, and not the design.

Technology Used:
Adobe CS3, PHP, HTML, CSS, & JS