Geoff Matheson

Designer & Developer

Geoff Matheson Digital & UX/UI Designer

Pixels & Print

Web & Graphic Design

Front-end Web

UX | UI

Brand Identity

Portfolio

Front-end web dev & UX/UI design for WordPress sites

Commonwealth Trust, HS Design & Casarino Law websites

  • Design
  • Interactive
  • Responsive
  • UX/UI
  • Heavy front-end
  • Minor back-end
  • HTML/CSS/JS
  • WordPress

These sites were designed digitally in HTML/CSS/JS & integrated into WordPress. Back-end work was involved, including hosting consultation, setup & maintenance. Google Analytics, tracking tools & an SEO campaign were created. The sites feature SVG graphics & animations. Lots of jQuery was written to create transitions, animations & interactivity.

View Commonwealth Trust View HS Design View Casarino
  • Commonwealth Trust mobile responsive website design

    Instragram post featuring mobile, responsive website design

  • Commonwealth Trust website design

    Website design & development for Commonwealth Trust

  • HS Design website design & development by Geoff Matheson

    Website design & development for medical industrial design firm

  • HS Design website by Geoff Matheson in Instagram post

    Instagram post showcasing HS Design website

  • Casarino Law Firm website by Geoff Matheson

    Website design & development for Casarino Law Firm

  • Casarino Law Firm website by Geoff Matheson

    Website design & development for Casarino Law Firm

Design for an intuitive, easy user experience & optimize for the technology being used

Ultrachem Inc. — responsive, mobile-first WordPress website

  • Design
  • Interactive
  • Responsive
  • UX/UI
  • Front-end
  • HTML/CSS/JS
  • WordPress

This major freelance project, designed / developed from digital mockups & integrated into WordPress — using Custom Post Types & Taxonomies, which manages their entire inventory. The Cross Reference page uses AJAX technoloy to cross reference many data variables. Because this page was used by their customers, in the field using their smart phones, this table had to be fully mobile friendly. Using CSS3, the table changes in mobile sizes, so each product no longer has a row and column orientation as seen on larger screens — rather, each product becomes its’ own cell, making the user experience much better on a mobile device.

View Ultrachem Cross Reference Page
  • Ultrachem Inc. mobile chart on iPhone

    Ultrachem Inc. mobile website cross reference chart

  • Ultrachem Inc. chart on full size browser window

    Ultrachem Inc. desktop website cross reference chart

  • Ultrachem Inc. website home page on full size browser window

    Ultrachem Inc. website home page

  • Ultrachem Inc. home page on mobile and tablet

    Ultrachem Inc. website in mobile and tablet responsive layouts

Rebranding: modernizing the identity of this civil contracting firm

Creating a new logo & identity; maintaining attributes & noticeability of the preceding logo

  • Branding
  • Logo
  • Style Guide

This rebranding project was compelling due to some seemingly restrictive requirements. The new logo had to live in the world with the old logo — as vehicles & signage, among everything else, would not be updated all at once. Furthermore, they were adamant about the specific red. The client had this red, as a vinyl color they have always used. We reverse engineered the color from the limited vinyl options; found the accurate Pantone, RGB, CMYK, HEX, et cetera. We created a style guide covering usage of the brand, brand attributes, charts, marketing materials, digital interface UI design & more.

  • New Pearce & Moretto logo design in large size color, minimum size black & vector outline

    New logo design in color, minimum / black & flawless vector outline

  • Pearce & Moretto new logo on vehicles

    New brand identity system as seen their cards. Several dozen sets of cards weree typeset, went through production / pre-press & were printed by one of our vendors

  • Old, dated, before Pearce & Moretto logo design in previous inconsistent red

    Old, dated, "before" logo design in previous inconsistent red

  • Vehicle / door graphic guidelines taken from new branding style guide

    Vehicle / door graphic guidelines taken from new branding style guide

  • Pearce & Moretto new logo on vehicles

    New logo installed on new fleet of vehicles

Web design & development, UX/UI strategy & design

Landing & application pages for Apple, the NFL, Williams-Sonoma, Wyndham

  • Design
  • Wireframe
  • Interactive
  • Responsive
  • UX/UI
  • Heavy front-end
  • HTML/CSS/JS

These pages were designed in Adobe CS/CC, developed as digital mockups, & after significant production iteration, these pages were used by these major partners. As a contractor at Barclaycard, I designed & developed all types of traditional & new media for our partners — designing within a very specific aesthetic / style & fitting in cohesively with their existing branded materials. Each partner's Branding, Marketing, Print & Digital / UI Style Guideswere crucial tools to achieving this goal.

American Airlines Aviator

Dimensional Slider Marketing Mailer

  • Art Direction
  • Graphic Designer
  • Production Artist
  • Presentation

Working with our team's Creative Director, & alongside the A.A. Brand team — we pitched ideas for dimensional mailers that would "put the viewer in the scene" ... while also expressing "30% more." This favorite was designed, to provide intrigue through imagery of an Italian coast-line, ask the viewer a question — then putting the viewer in this new world.

Choice Privileges Credit Card

Credit Card Design & Production

  • Design
  • Project Managing
  • Presentation
  • Liaising between multiple parties

Overall credit card re-design / re-fresh for Choice's new Brand Identity. It is created using an orange core, with a pearescellent white top, featuring spot gloss varnish. The brand logos are screened back white, as a subtle grouping of the brand family. The bottom of the card features Metallic coating with a matte finish.

View the application site

Brand Identity Design

Logos, Identity, Naming & Website

Brand identity design including logo, style guides, websites & marketing collateral.

  • Branding
  • Logo
  • Design
  • Development
  • HTML5 & CSS3
  • jQuery
  • WordPress
  • Responsive
  • Mobile

Print graphic & package design, with the Creative Media Group at Barclaycard

Print materials with a specific aesthetic

These printed marketing materials & unique business proposal responses were the result of the 7 people within CMG at Barclaycard. As a partner based business — every partner needed their own brand reflected & the Barclaycard take on it was to remain transparent, but open minded & not afraid to be bold. Working on these projects, we gained in-depth & thorough knowledge of most major brands & their comprehensive cocorporate style guides.

  • Branding
  • Design
  • Adobe CS/CC
  • pre-press
  • production
  • post-print

Baiada Photography

Award-winning Brand Identity & Website Redesign

Baiada was rebranded to communicate to clients having higher end weddings & events, who care about having beautiful documentation photography. The modern icon juxtaposed with the traditional logotype & filigree provides a contemporary identity with all the classicism of a wedding. The website is a custom Flash site, utilizing SlideShowPro Director, allowing them to easily make updates. The front-end is an ActionScript 3.0 built interface, which interacts with Director. The mobile version uses HTML5 slideshows from Director. The Baiada Photography website was the winner of SlideShowPro's Website of the Month in March 2010.

  • Branding
  • Logo
  • Design
  • Development
  • HTML & CSS
  • Flash
  • SlideShow Pro
  • WordPress
  • Mobile
  • Stationery
  • Signage

IMS

Brand Identity & Website Redesign

IMS approached us to brand their business, with the objective of presenting the business primarily as a landscape lighting contractor, while secondarily maintaining the company as a landscape irrigation contractor, which was their primary revenue source. We developed an iconic identity, using shapes, colors & textures to communicate light & water. These brand attributes are featured throughout all materials.

  • Branding
  • Logo
  • Design
  • Development
  • HTML & CSS
  • jQuery
  • WordPress
  • Stationery
  • Signage
View the site

Lightwork Photography

Brand Identity & Website Design

Lightwork Photography's objective was to target female clientele, specifically brides & moms. Because Lightwork's owner is also a woman, it made sense to develop a feminine logo & identity. An iconic shape was used to hold the vintage style typography in a cohesive enclosure, while providing an icon & texture to be used throughout all pieces.

  • Branding
  • Logo
  • Design
  • Development
  • HTML & CSS
  • jQuery
  • WordPress
  • Stationery
View the site

First State Elevator

Brand Identity & Website Design

The rebranding of First State Elevator involved creating unique graphics to represent this company within this service industry. The identity features an iconic logomark which incorporates the "1" within an emblematic container & suggests the three-dimensional shape of a building & upward momentum of an elevator.

  • Branding
  • Logo
  • Design
  • Development
  • HTML & CSS
  • jQuery
  • WordPress
  • Stationery
View the site

Website Design

Design / Development / UX & UI

Various additional website designs are featured within this section. All websites were custom designed & developed — although most within an existing brand.

  • Design
  • Development
  • HTML(5)
  • CSS(3)
  • jQuery
  • PHP
  • WordPress
  • Flash / ActionScript 3

Graphic Design

Branding, Collateral, Books, Brochures & more ...

A variety of print graphic designs are featured within this section.

  • Branding
  • Logo
  • Stationery
  • Brochure
  • Book Design
  • Typesetting
  • Adobe Creative Suite

Package / Dimensional Design

Interactive Print Design for World-class Clients

A variety of package & dimensional paper design are featured in this section. Most pieces were created while a Production Artist / Paper Engineer / Designer for Structural Graphics.

  • Design
  • Production
  • Mock-ups
  • Dielines
  • Dies
  • AutoCad

Process: an inside look at my sketchbook

Wireframes, notations, time tracking

  • Process
  • Sketchbook
  • Wireframes
  • Design
  • Problem Solving

Contact Me

Please get in touch