Colin Johnston - Product Design, Visual Design, UX Strategy, Brand Development - San Francisco Web Design

Designer based in San Francisco, California, working across interaction, visual, and brand design.

Paul Saffo Website Desktop and Mobile Screens

Paul Saffo Website

Website and identity design for forecaster Paul Saffo.

Project Overview


Paul Saffo is a forecaster and futurist. He explores the dynamics of large-scale, long-term change; he teaches forecasting at Stanford University, chairs the Future Studies and Forecasting track at Singularity University, and serves on the board of the Long Now Foundation.


Paul has a rich collection of content—journal entries, essays, and interviews—and is a well-known brand in Silicon Valley and internationally. - before: While the old site had a certain 1990s-era visual appeal, it was hard to use and was practically inaccessible on mobile.

Paul’s existing website was no longer providing his current or potential clients with an experience that would enable him to sustain and grow his business.


A refreshed visual and brand design that expresses the rational, intellectual clarity of Paul’s forecasting work and the inventiveness of Paul himself.

The new site delivers an improved user experience and makes Paul’s large collection of content accessible across a wide variety of devices; it has impressed many key clients and prospects, and helped him book a considerable number of new speaking engagements.



I created numerous sketches to find ways of simplifying a potentially complex interface down to its essentials.

For this project, I was also particularly focused on setting the stage for a more integrated identity and prominent iconography.

An essential requirement of the design was to optimize all layout and navigation for mobile users
Desktop sketches
Mobile sketches

Visual Design

Branding & Aesthetics

My visual design strategy was to frame the entire site in the updated brand, which is anchored by the new logo (which I previously redesigned) and supported by the icons and updated color scheme.

I framed the content in each section with a large header image that signals what is within it. Some of these headers are very literal; others are ‘stories’ that become clearer once you acquire more knowledge of Paul’s content.

Style Boards: I explored a variety of aesthetic choices to best communicate Paul’s brand identity. Typography and color choices are central to the new design.
Photography: I worked with Paul to produce original photography for certain sections. I experimented with treatments that would harmonize with the brand aesthetics.



Custom Icon System

Paul is known for his love of maps. I designed a set of icons that evokes navigation and wayfinding.

The icons serve functionally in the site navigation component, but also serve as a bridge to Paul’s brand identity—in the final desktop site I feature them prominently.

Hand-crafted symbols: I drew each symbol in pencil to get a feel for its qualities before bringing the work in to my digital drawing tool.
Icon Design: constructing the About Icon.
Final icon designs: Scalable vector graphics—SVGs—are crisp and clear on any device at any size.

Final Design

Multi-device Mock-ups

I design the desktop and mobile views side-by-side to ensure visual consistency.

Mock-ups - designing the desktop and mobile views side-by-side.

Delivery – after An accessible experience integrating enhanced branding, a strong aesthetic, and improved multi-device accessibility.