Colophon

col·o·phon

noun: colophon; plural noun: colophons

  1. a publisher's or printer's distinctive emblem, used as an identifying device on its books and other works.
  2. an inscription at the end of a book or manuscript, used especially in the 15th and 16th centuries, giving the title or subject of the work, its author, the name of the printer or publisher, and the date and place of publication.

definition from Dictionary.com

Why a Colophon?

When I first saw a colophon on a portfolio website, I knew I had to have one on mine. I love how it gives me a place to geek out a bit and explain some of my thoughts and process.

Design

Color Palette

— a dark site with light typography, must feature purple

My initial design had very bright and bold colors. When I found this, I knew I needed to make like an artist and steal the more muted colors. Further adjustments were made for sufficient contrast.

Typography

— a solid sans-serif font, with a decorative site title

I am convinced that finding good typography is black magic. I eventually choose Chivo for my main font. I like its legibility in paragraphs but it also has enough interest in larger font sizes and heavier weights.

I liked the idea of a brush script for my name as a contrast to the square look of the rest of the site. I looked at so many fonts that my name stopped looking like my name. I settled on Alex Brush mainly for the capital L.

Images

— minimal use of images

I wanted to rely on my copy and design to tell my story, not overloaded with images. So I have just the three photos.

I hadn’t intended to use any other graphics, but due to contrast issues I didn’t have enough purple on the site. I made modifications to this paw print for the decorative element and bullet points. Additional icons from IcoMoon.

Accessibility

— must be accessible to as many folks as possible

  • The site's layout is responsive utilizing css grid, flexbox and media queries.
  • My site was designed for any modern browser that supports css grid, including IE11’s older implementation. Pre-grid browsers will get a visually degraded experience.
  • All text meets AA of WCAG’s contrast minimum.
  • Best efforts were made to use semantic HTML tags. ARIA landmarks were added to aid screen reader usability.

Tools

Hardware

  • Sketched with traditional pencil/paper and whiteboard
  • Developed on a self-built PC (her name is Senua) running Windows 10
  • Cat photos taken on a Samsung Galaxy S7 by myself

Software

  • Research finds stored in Trello
  • One round of mocks in Figma
  • Content written in Google Docs
  • Hand coded in Atom
  • Stylesheets compiled from SASS
  • Simple templating via Jekyll
  • SVGs edited with Inkscape
  • Code maintained and hosted on GitHub
    Last updated 2018/11/24

Thanks

Personal Thanks

Kasey Labelle — for being my design consultant.

Eric Greer — for your web hosting services.

Internet Thanks

Everyday I am grateful for the internet and all the folks that write articles and tutorials for both code and design. Here are just a few resources I leveraged during this process.

Guiding my way:

Sources of inspiration: