Adam Shaylor

The Polymath Interviews

  • concept
  • wireframes
  • comps

The Design 101 course at Designlab culminates in a final project that combines everything its students learn about visual hierarchy, layout, typography and color theory into a series of deliverables leading up to a comp for a single page of web design. My final project was The Polymath Interviews, a collection of interviews I’m conducting with people who practice both design and development professionally.

Wireframe

The project started with a wireframe that I sketched out on paper. I like to start out with sketches like this because it makes it easier to evolve the layout as the project progresses.

Wireframes are often produced in great detail, pitched as a de facto scope of work, approved, and used as the basis for “final” comps. However, it’s impossible to know all of the requirements and constraints of a project up front and equally impossible to go back to stakeholders with revisions when they think the design is done. Rough sketches on physical media like paper or whiteboards emphasize the exploratory, speculative nature of wireframing.

Although the only stakeholders in this case were my mentor and me, I still found it faster and easier to ignore the details early on.

Early sketches from my notebook. The desktop layout is on the left, the mobile is on the right.

Choosing type

Font selection for the final project is based on three adjectives that describe the project’s “brand.” I chose the words informative, biographical, and modern. To exemplify those adjectives in the logotype and headings, I chose Baron Neue Black. It’s a low contrast, geometric sans serif. I used the alternate glyphs to set the logotype. The font is limited to upper case letters, which further limits its usefulness to display purposes. I chose Baron Neue because it’s unique but not so unique as to be obnoxiously illegible or be in danger of falling out of fashion tomorrow. In some ways it reminds me of TJ Evolette or Montserrat, but there are a lot of subtle touches like its mixed use of Futura-style overshoots and the playful but subtle design of the decorative alternates that make it its own creation.

Helvetica is, well, Helvetica. It’s hard for most people to watch the movie without having some feeling about it, but I can neither bring myself to love nor hate it. After what some might describe as overuse in the 80s and 90s, it has admittedly acquired a bit of a corporate or even dull reputation. It also has an extensive character set and is possibly the most legible sans serif aside from derivatives like San Francisco that have been designed specifically for the screen. Helvetica’s advantage over any web font is that it has some sort of equivalent already installed on almost all platforms, so it’s “web safe” and therefore extremely fast to load. I had hoped to find something more interesting to accompany Baron Neue so as not to appear lazy to my mentor. For better or worse, Helvetica was the best companion I could find.

Baron Neue and Helvetica specimen.

Color pallette

One of the first ideas I had for colors was to go back to an article Aegir Hallmundur posted a year back about IBM’s System/360 promotional materials from the 1960s. That signature IBM blue is very cool and mechanical, but everything around it, the yellows, oranges and browns feel like a cozy old library. My dad worked for IBM when the 360 came out and built a small business writing software for it. I confess this palette evokes a lot of nostalgia for the artifacts of an era of computing that was already bygone when I found them. For better or for worse, this palette also looks a lot like a Tycho’s 2011 “Dive” album cover as well as his blog, ISO50. It could potentially come off as an attempt at being trendy in a way I don’t mean it to be.

I tried other inspirations like #283 from Anne Jordan and Mitch Goldstein’s Walking series, one of Andrea Grützner’s stunningly lit Erbgericht photos, and the folded canvases of Tauba Auerbach’s Tetrachromat exhibit. These are all inspiring examples of warm colors counterbalancing cool ones. However, in practice, none of them really worked with the visual concept I was going for the way the IBM 360 palette did.

IBM System/360 promotional materials and color pallette.

Comps

Grids are unpopular with postmodernist designers who prefer more organic forms. However, the web is fundamentally made up of boxes containing flowing text. Grids are a necessary prerequisite for any reliable control over web typography.

When I first started learning about graphic design, I assumed that grid systems were for nerds like me with an uncool reverence for Massimo Vignelli. But then I bought a copy of Newwork and realized grids are not only functionally useful in digital, they can be aesthetically beautiful, even in contemporary print. I design both desktop and mobile comps with fairly strict grid systems and attempted to embrace their aesthetic rather than hide it.

Another gestalt of function and aesthetics I had kicking around in the back of my head was to convert portraits (in this case, placeholder pictures sourced from the Creative Commons) into bichromatic bitmaps. This process makes the portraits seem more digital and it also drastically reduces the sizes of the files, thereby making them faster to download and render over a variety of connections.

Polymath Interviews desktop comp and grid system. Note the detail of the placeholder bichromatic portrait. An ordinary 250x250 JPEG image weighs about 20KB. The same file exported as a bichromatic GIF is about 2KB or 1/10th the original size.

Challenges

The time constraint was the big challenge here. This course was designed to take about six hours per week over six weeks. If you subtract the time required for readings and exercises, that left about four hours per assignment. That’s twelve hours for the entire project, end to end. I did spend a few extra hours adding polish to get it ready for this portfolio, but not many. You can see the original version in my Designlab certificate for comparison.

I was used to working nights and weekends on design projects outside my day job, but never under such short time constraints. I had an appointment with my mentor the day after the project assignments were due. Left to my own devices with personal projects like this I’m tempted to ignore the clock, but in this case I had to have something to show him. It was hard, but I found the experience of working on a design project against a deadline liberating. It defined the level of quality and detail the project could afford and forced me to move on to the next phase before getting lost in the details.

Final mobile comp.

Credits