Isobel Graham-Potts
Web & Digital Designer

I create beautiful websites and engaging advertising campaigns.

WORK EXPERIENCE

My Career

I manage the design, creation and deployment of digital advertising units, graphical assets, newsletters and websites for a portfolio of clients spanning the world’s leading brands.

Currently I work as a web designer for the Globe and Mail’s internal advertising agency. There I combine best practices in user interface design with IAB standards and data insights to create first class online experiences.

I'm a dedicated team player who teems with enthusiasm and it's my delight to have been nominated by my colleagues for multiple company awards.

Read my CV

Tools and Software

  • HTML, CSS & JS
  • Adobe Creative Suite
  • Figma
  • Various CMS
  • Digital Advertising Platforms

Skills and Processes

  • Responsive Web Design
  • Web Accessibility Standards
  • Content Strategy
  • Branding & Marketing
  • Wireframing & Prototyping
Digital CAMPAIGNS

My Favourite Digital Advertising Units

I create best in class responsive advertising units with functionality ranging from video and carousel integration to shoppable experiences and bespoke in-unit games. The below samples have been created using the Celtra and Flexitive advertising platforms.

A screenshot of a CHANEL Hearst Superhero live on Elle.com

CHANEL

Project Arrow Link
A screenshot of a Viktor & Rolf Hearst Superhero live on Elle.com

Viktor & Rolf

Project Arrow Link
Tiffany & Co Globe hero unit

Tiffany & Co.

Project Arrow Link
A screenshot of a Aston Martin Globe Superhero live on the Globe and Mail website.

Aston Martin

Project Arrow Link
A screenshot of an Ericsson Wallpaper and hero unit live on the Globe and Mail website.

Ericsson

Project Arrow Link
A screenshot of a Johnnie Walker Globe Superhero live on the Globe and Mail website.

Johnnie Walker

Project Arrow Link
Destination Canada Hearst Superhero

Destination Canada

Project Arrow Link
A screenshot of a BMW canvas unit.

BMW

Project Arrow Link
A screenshot of a Mini canvas unit.

Mini

Project Arrow Link
A screenshot of a QUO Beauty canvas unit.

Quo Beauty

Project Arrow Link
A screenshot of a VIA Rail Canada canvas unit live on the Globe and Mail website.

VIA Rail Canada

Project Arrow Link
A screenshot of a Mailchimp canvas unit.

Mailchimp

Project Arrow Link
A screenshot of a Emirates canvas unit.

Emirates

Project Arrow Link
A screenshot of a Louis Vuitton interscroller unit.

Louis Vuitton

Project Arrow Link
A screenshot of a Durex miniscroller unit.

Durex

Project Arrow Link
A screenshot of a Pantene miniscroller unit.

Pantene

Project Arrow Link
A screenshot of a Hannah 300x250 unit.

Hannah

Project Arrow Link
Personal Projects

My Favourite Project

Over the last few years I've been exploring the fascinating world of UI & UX design. Early on I decided to get to grips with a the design tool, Figma. As my first experiment I mapped the user flow of setting up a host property on Airbnb. Walking through the process each step at a time allowed me to analyze its strengths and weaknesses, design inconsistencies and evaluate the various pros and cons of each design decision. I then transferred my findings into Figma for layout and presentation.

Insights Gained

My greatest learning from this project was that the needs of the business and the needs of the user were not one and the same, and how delicate balancing the two can be.

See it in Figma

My Recent Reads

Web design trends and technologies are always changing and evolving which can make it difficult to keep an up to date skill set. Since I completed my masters degree in Web Design and Content Planning in 2016 I’ve seen the rise and fall of Flat Design, the fleeting trend of the Lobster font and the implementation of the game-changing CSS Flexbox. To keep up-to-date, I like to dip into the blogs and books of other designers and developers.

Webpage layout image from Conditional CSS by Ahmad Shadeed
CSS & Styling
Conditional CSS by Ahmad Shadeed
This article discusses the use of CSS not only as a design language, but also as programming language that’s able to achieve functionality that previously required Javascript or JQuery. While CSS doesn’t support any if or else statements the article explores conditional statements that can be made to achieve the same effects and provides some use cases.
Insights Gained
The article gives the examples of media queries and hover styling as widely used web design practices that are in fact if statements. I’d never thought of them in this way before. As a designer who’s always been more comfortable with CSS than Javascript the idea of using CSS for functionality I’d previously have implemented a JQuery plugin for is intriguing and the design challenges that can potentially be solved with conditional CSS as outlined in the article is really eye-opening.
Read the article
Illustration from Atomic Design by Brad Frost
UI & UX Design
Atomic Design by Brad Frost
In this book Brad Frost proposes a methodology to create interface design systems in a more deliberate and hierarchical manner.
Insights Gained
The core idea is wonderfully simple - taking a small, essential HTML element like a button (or 'atom' in this case) and systematically adding other elements to slowly but surely built it into a complex and cohesive design component. The idea is basic and very well explained, making it easy to digest and understand.
Read the book
Screen shot of a written passage from With :focus-visible, you can have focus styles when it makes sense by Hidde de Vries
Accessibility
With :focus-visible, you can have focus styles when it makes sense by Hidde de Vries
The article discusses the advantages of the new :focus-visible class. While the original :focus class applies outlines on <a> links indiscriminately and can confuse non-visually impaired web users, focus-visible will learn from user data when it’s sensible to apply focus styling, and when it’s not.
Insights Gained
In my early days as a web designer I’m guilty of judging the :focus class to be an annoyance for disrupting the styling of my <a> links and had even gone so far as to override it with CSS on a few occasions. For accessibility reasons that was a misstep as the :focus class is a huge boon to web users with low vision and other cognitive disabilities. To be able to apply the :focus class in a more empathetic and aesthetically sensible way based on user behaviour is a brilliant advancement that I’m eager to implement in future projects.
Read the article

Get in touch

I'm just an email away and when I'm not tinkering with websites, lurking on Reddit or playing computer games, you'll find me doodling in my trusty sketch book.

An illustration of a red haired woman sat on a chair checking her phone for new emails.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.