Hi. I'm Frederick.
I ♥ design, music & art.
This website is my resume. You're looking at my website.
Frederick Brummer CV
Graphic design, web design, typography, sketching, wireframing, storyboarding, Adobe Suite, Sketch, Figma, HTML/CSS, and more!
Web / graphic / product design experience
Sep 2015 - Apr 2023
Designer / Product manager / Associate Director of Design
In 2015 I'd been working freelance for nearly a decade when my first child was born. I'd just started wondering about finding a more regular gig when Yellow Pencil recruited me out of the blue. I loved freelance but the timing was perfect so I dove right in. I loved Yellow Pencil, and wound up working there for many years. During my time there, I moved through a number of various roles: designer, design lead, podcast producer, product manager, product designer, and eventually associate director of design. I knew from my time as a freelancer that I enjoyed wearing many hats, and YP turned out to be a great fit.
One of the things I really enjoyed in my role as associate director was the opportunity to review and critique the work of my team – turns out communicating about design is a great way to learn about it. I learned a lot in this role.
2010 - Present
40 Listings is a website I started with my friends at Realty Ninja. At the time, we felt that most MLS real estate listings were overly complicated, requiring users to create accounts or subscribe to services before they could even see a listing. 40 Listings was conceived as a very simple and accessible alternative to the MLS searches of the time. For over 10 years now, the site has continuously garnered hundreds of thousands of pages views per month. While it's not a huge earner, I'm proud of the fact that we built it to address a particular problem, and it appears to be solving that problem for the people who use it. A modest success.
Oct 2008 - Sep 2010
LiFT studios was a small "boutique" design shop run by Haig Armen, who now teaches at ECUAD. I learned a lot from Haig during this time, as we worked on projects for local and world-reknowned brands such as Sid Dickens, Namaste Publishing, and the Emily Carr University of Art and Design.
2007 - 2015
Overmind was the freelance design company I operated from 2007 to 2015. I really enjoyed the variety of work, and the freedom to take on weird projects. During this time I worked on numerous web and product design projects, while also taking part in some rare opportunities, like sound art installations and architectural work.
2012 - 2014
Front-end Interface Development
Dec 2005 - Oct 2012
I started working for Jenesys doing design work on a freelance basis. Over time my role became broader, and I became involved in all areas of the business. I designed all branding, print, digital, and trade show materials, and also assisted with product and business development. I even helped design and build some buildings.
Director of In-house Web Design Team
As director of in-house web design at Apple Tokyo, I managed a small team of web designers and developers as we implemented localization for new products and services, as well as developed original promotional content for the Apple stores in Japan.
Web design approach
I aspire to make web designs that are as beautiful as print design. Print media tends to have a higher quality than web: print design has a longer history, higher stakes, and doesn't require the design work to be reinterpreted in code.
Print design has another thing going for it that web does not: in print you typically know both the content and the format of the thing you're designing. In web design, both content and format are undefined at the time of design: content is typically produced later, when the site is built, and format is defined by end users and the devices they use.
This means web design is more akin to systems design than graphic design – you're almost never producing a single, static "graphic". Instead, you need to create a system that produces good outcomes for an unknown range of content across a very wide range of formats.
Luckily, Graphic Design comes with a toolkit for just this purpose. It's called typography. More than just fonts, typography can be extremely useful in defining the fundamental components of responsive design systems.
Crucially, typography developed as a system of both specifying and producing design artifacts of consistent form and varying content. Look at the pages of a book, each with the same layout, same baseline, same margins. Figures, tables, and other elements are also dealt with in consistent ways. And all of this centred around production: the outputs of typographic system design are the inputs to the machines that build them, and instructions for the people who operate them.
Another aspiration I have is to build really robustly responsive websites. If we want to make web design that's as mature and competent as print design, we need to take command of the available space in the viewport – we need to know what a responsive format means, and know how best to respond to it. Current approaches are sadly lacking.
Few websites today are responsive to viewport sizes above about 1200px in width, meanwhile, the most common viewport on the market is now 1920px wide. Approaches to responsive design simply haven't kept up with the changing landscape of devices.
I endeavour to build sites that look great from the smallest hand-held device to the largest desktop monitor, and beyond.
As part of my design process, I often prototype and build typographic systems in html and css and test them rigourously in the browser.
To see how the responsive, typographic layout system works on this website, hit the "z" key on your keyboard.
Yellow Pencil website
Role(s): Design: w/ Creative Director Ahmed Khalil
Highlights: Content first, typography forward
Minimal navigation pattern
Collaborative, iterative, in-browser design/build
Robust responsive design system
Background: I worked at Yellow Pencil (YP) for nearly 8 years, from September 2015 to April 2023. When I started, YP was a completely flat organization, and my role was simply "Designer", like all the other designers.
Over time the organization grew, and I grew with it. I took on product manager, product designer, and eventually Associate Director of Design roles. One of the things I did in this role was to pick up design tasks that weren't related directly to client work. One of those tasks was to remake our company's own website.
Approach: We'd been struggling to find the time and resources to get our site updated, and it occurred to me that we might be taking the wrong approach. At the time, then Creative Director Ahmed Khalil had been working on designs for the new site, which were beautiful and elegant, but we were having a hard time getting the project to move forward. We'd been following a "waterfall" kind of process, where Ahmed had to finish all the designs which were then to be implemented by a contractor.
The process meant Ahmed had to design every page and pattern at every size to give the developer enough information to build the site well. A gargantuan task to complete on top of a busy schedule.
The developer would then be overwhelmed with design details, making it difficult to build the site at the same fidelity as the mockups.
The process involved a kind of rework. First Ahmed had to define a design system and implement it graphically. Then the developer had to re-interpret that design system as code and implement it again – accurately.
The distance between design and the front-end development work was making the whole process more difficult. They needed to be closer together if we wanted to get quick results.
So I proposed that Ahmed and I work on a new design together, take a simpler approach, and design it in the browser as much as possible. The idea was that if we could design it in-browser, by the time the design was done, the development would also be done. This meant we'd be able to deliver a product much more quickly.
This approach turned out to be a success. We started by launching a "Minimum Viable Product" of the site and then iterated on it from there.
Content first: Yellow Pencil's work is based on a strong content design practice. The content for the new site was developed before the design work began, then further refined throughout the process. The content was also the primary focus in our approach to the visual design of the site. We did this by basing our design approach on typography. Typography is very useful for the clear presentation of content.
It's also useful for achieving other design goals such as usability and accessibility. Good typography brings an aesthetic value to text that is often lacking on the web. And much of the web is text. We wanted our site to look great without relying on flashy banner images. We did away with any unnecessary UI elements. We went type-centric, instead of UI-centric.
Minimal navigation: It's rare to have license to experiment with navigation patterns. Both client- and service-side teams have a strong expectation for the conventional approach. I have an opinion about the ubiquitous global navigation UI pattern seen on every site ever :
it doesn't need to be at the top of every page. We easily package it all up under a "hamburger" icon on mobile devices, and no one seems to mind. And when we're on desktop we have even more places to put it. I like to put navigation at the bottom of the page. My assumption being that people may want to read the page they're on before going somewhere else. They may even need to read it before knowing where to go next. Main navigation can comfortably sit in the footer on desktop sites. You can put a "menu" anchor link in the header to send users there when they need it.
I know, I know, it's backwards, at least from the conventional perspective. Here are some counter points:
- Books have a table of contents in the front of the book, not on every page. It doesn't really have to be on every page if there's an easy way to get to it.
- Complex headers consume a large amount of energy and resources. They are costly. First, designing and implementing them takes a lot of effort. They are over-crowded with functionality, branding, drop downs, megamenus, log ins and alerts. So that's one kind of cost: design / development.
- But it costs you something even more dear than design and development time: attention. The more things you put in your readers' eyes, the less they'll see any one of them.
- Complex header navigation systems can also be fragile. Often adding one more navigation element causes the whole layout to break.
Good design requires managing complexity : visual complexity and interactive complexity. No one can actually navigate your complex header and read the page at the same time. There's no reason to show them both at once. Make it modal. Do one or the other. Go into nav mode. Put the nav somewhere else, like maybe a full sitemap on the homepage (kinda like craigslist?). There are so many ways you could go that don't involve putting a hundred elements in the top inch of the screen. It is nice to have easy access to navigation from that top bar, but we don't need to show it all at once.
See? That's how I get about this stuff. I rant. I wax philosophical. I care.
But I had a point I was getting to: because it was our own site we had license to make decisions. So we were able to innovate in our approach to the navigation.
We did three things here. First, we kept our main navigation items very limited. Just four. This allowed us to keep those four elements in a more-or-less conventional location at the top right of the page where they're easy to find. We did not extend this system with any kind of sub-navigation, flyouts, etc. We kept it simple: Work, Solutions, Team, and Careers.
To navigate deeper into the website, a user landing on the home page would first have to enter one of those four areas. Content on the home page also directs users to each section of the site, introducing each in turn. Each of these four areas has its own landing page. These pages contain relevant content and a menu of links that take the reader deeper into the site.
For example, from the Work page, the reader can choose from a menu of case studies about past work. This same menu is then displayed again at the bottom of each of the case studies. This approach merges content and navigation into a single system. It encourages people to engage with the content, and it puts navigation in a place where it makes sense.
We also implemented our very own OnPoint Search, which further addresses the perceived need for a big nav bar. If people are looking for something specific, they can search for it. If not, the site will lead them to it.
Responsive design: The Yellow Pencil site design works from the smallest device sizes up to the largest desktop monitors, that's a range of 320px to 2560px, and beyond.
Responsive design is a technology that allows us to optimize design systems for different viewport formats. It was popularized around 2012, when the biggest screens on the market were 1280px wide.
Today, over ten years later, the landscape of devices has changed, but our approaches to responsive design have not. The most common viewport in use today is 1920px wide. Most "responsive" sites still don't respond above 1280px.
The screen I'm looking at right now as I write this is 2560px. That's exactly double the width most "responsive" sites cap out at. Double!
As a designer, I can't imagine ignoring half the space in any other medium.
I think this situation is no good. I'm on a personal mission to find ways to think about, design and build more responsive systems. And I feel I made significant progress on this mission with Yellow Pencil's site.
Responsive hero images: Another place we were able to innovate in the design of the Yellow Pencil website was with the hero images. One of the puzzles of responsive design is that text and images scale differently. Text flows, and can be "reflowed" into different shaped containers – narrow or wide – and still function reasonably well. Images are more restrained. Generally speaking, you can't change the shape of an image. If you pinch or stretch them they look weird, and cropping them can result in loss of important parts of the image.
The approach we took was to build a kind of "reflowable" system for the hero images. The main illustration conforms to a template with a "safe zone". This safe zone lets us crop the image in the front-end with confidence, because we know exactly where the important subject matter in the image will be. Imagery within the safe zone is always shown. When there's enough room , we show more of the illustration. Shapes and layers can be added or removed to balance the composition of the image with the layout of the page.
Petit Design Studio Architecture
Role(s): Design and front-end development: Figma, HTML, CSS
Highlights: Extremely simple project allowed for a beatiful minimal result.
Background: I met Charlie Petit, Architect AIBC, at our shared workspace in Gastown, Vancouver. We'd had a few good chats about design, so when Charlie told me he could use some help with his site I was optimistic. It seemed like a nice opportunity to make something both simple and beautiful.
Approach: Charlie's brand had two essential components, a "PDSA" logo, and a blue-green colour. His new business cards displayed both, with the logo and text displayed in white on a field of aquamarine. The website was to be an extension of his growing brand system, so naturally we wanted to include these two essential elements.
This left the question of typeface. Charlie's business cards used Century Gothic, a classic modern face with clean geometric lines and contrasting weights. We decided to find a web-friendly typeface with these same characteristics. We landed on Montserrat, a free typeface available via Google Fonts.
Dynamic colour: Charlie had expressed some curiosity about how to dynamically change the colour of the site. He liked the aquamarine, but was also drawn to darker backgrounds closer to black. The blue, – which was now bluer upon revision – was vibrant and drew your eye, but it was also very bold. Using a black background reduced the visual impact of the page, but had a more professional tone.
Charlie was a bit torn which way to go, so I suggested a simple mechanism: we would change the background colour based on the user's mouse position. As soon as someone hovers their mouse on the page, the background slowly fades to black. This transition means that even if a user's mouse is already hovering on the page when it loads, the colour transition is still seen. On first load, the user's eyes feast upon a field of bright blue, a colour called "sax". Then, when the user interacts with the page, the moment they bring their mouse within the viewport their eyes are again treated with a grand gesture. The darkening of the background brings the text even more to the fore.
Responsive design: The layout of the PDSA site works on just about any viewport on any device. Most web sites scroll. This one doesn't. It's such a simple site, we were able to make sure all the information is always visible on screen.
Carsten Jensen, Architect
Role(s): Design and front-end development: HTML, CSS
Highlights: A rare opportunity to revisit an old project.
Background: I met Carsten in 2007 while on a strole in the woods. At the time I was quite interested in green architecture, and was very excited to hear that Carsten was starting a company to do just that. We worked first on this website for his own practice, then later on brand, print and web materials for his green architecture company, Jenesys Buildings.
Approach: The goal of this project was to redesign the website we'd made in 2007. It's now 2023, and a lot has changed in web design in the intervening years. My own approach to design has changed as well. I was excited to return to the site with new tools and new skills.
The original site had several issues that I wanted to improve, just to get it aligned with the times. There were also changes Carsten needed to make to the content.
Another consideration with this redesign is that the project had a very limited budget. Carsten needed the site as a formality, necessary when filling forms and applying for projects, but it was not a major source of leads or other income for him. He probably would have been happy to just change the content and not alter the design at all.
But I'd already been musing about how much I'd like to redo this site, so I wanted to take the opportunity to update more than just the content. The catch was, I had to be able to re-design and re-build the entire project for about as much money as it would cost to just update it.
So, I started with what we already had. I copied the markup from the existing site into a new document and removed all extraneous details.
I then started laying it out directly in the browser using CSS
Once I was happy with the layout, I adjusted some of the typographic details and it was ready.
The entire process took me under two hours.
Success: I believe the difference between the old and new sites to be night and day. The old site was not only out of date technically, it was also over-designed. The site structure and navigation were needlessly complex. The colour palette heavy handed. And the site missed the opportunity to express the Danish and mid-century modern aesthetics that come across in Carsten's work. His buildings are simple and surprising and beautiful. I wanted the site to have those qualities too.
Responsive design: The original design, produced in 2007, was small and non-responsive. The new design displays well from mobile phone up to the largest viewports on the market today.