On Design

In my last post, Getting Started on WordPress.com, Tumblr, or Squarespace, I briefly touched on an important design principle towards the end of the article, where I cautioned against choosing a theme that did not showcase your work to the fullest extent possible. I did not, however, explain my reasons for this caution. In the beginning I considered design to be of paramount importance. Even more so, in fact, than the content itself. As the years went by and my experience grew though, that opinion did an about-face, and quite some time passed during which I considered the design to be tertiary to the content in a system containing but two players. Today, however, I have finally come to a compromise, where I believe that a site’s design and the content that fills it are equally important and thus should complement each other, not vie for the attention of the viewer.

The notion of a content-centric design — that is, a layout built with the intention of showcasing content first — came as news to me when I first heard of such a school of thought on an episode of the Big Web Show, one of the many excellent podcasts on the 5by5 network. At the time I did not pay much attention to the discussion though as I had no plans to design my own website, in any sort of capacity, in the near future. However, a few months later, after learning of Marco Arment’s plans to build his own content management system, I began to seriously consider website design once again as I started coding my own CMS.

I began this journey without knowing where or even how to start, so I began by looking at different website designs in an attempt to discover a workable theme. I experimented with numerous layouts and color schemes, devoured articles on basic design principles, absorbed discussions on usability, and sought hints and pointers from bloggers I strive to emulate, all in an attempt at finding that one layout that just clicks. Although I did not end up using any of the designs created during this time period, the experience and knowledge I gained have proved invaluable. For example, I crafted a design based on the Hacker News homepage shortly after I began looking to the site as my main source of tech news. Impressed with the simplicity of the resulting design and the focus it placed on the content, this experiment resulted in the definition of my two most important design principles: the first, that a design should be as minimalistic as possible, and second, that showcasing the creator’s content is the most important job for the design to accomplish. These two principles stuck with me throughout the next few months as I continued to develop First Crack and, after a while, craft a redesign of the site.

Following my Hacker News-esq design, I spent some more time experimenting with different layouts, one of which closely resembled Shawn Blanc’s current design. As its predecessors though, I eventually replaced this design with yet another in my never-ending quest to find a suitable theme. After some more searching, I stumbled upon a neat template consisting simply of a menu bar positioned roughly a quarter of the way down the page. With the exception of the menu bar — a snazzy gradient sporting neat expandable menu items — -the page was blank. Fitting my first design principle, that the design should be as minimalistic as possible, I started tweaking the design. As time passed and I spent more and more time working with the template, I eventually decided to move the most recent blog post above the menu bar. This decision came only after much consideration, and brought with it a new problem: posts consisting of a single paragraph required a relatively small amount of space to display. For much longer posts, however, changing the most recent article’s location proved problematic, as doing so moved the navigation bar out of the window and, in some cases, quite far down the screen. This also brought another usability issue to a head: scrolling through a list of lengthy posts proved time consuming and served to provide a poor user experience. The solution I eventually came up with used a dash of jQuery to dynamically shorten the amount of text displayed on the home page to the first paragraph of each article, replacing the rest of the text with a “Read More...” link that would expand upon activation. Later I would change the “Read More...” link’s functionality by causing it to redirect to a unique article page, an action which I eventually incorporated in to First Crack in order to eliminate the need for a jQuery function to parse an entire article.

Satisfied with the site’s structure, I began to work on more esoteric facets of the design such as colors, textures, and fonts. Initially I intended to use Courier New as the font for the entire website given that Sublime Text, my editor of choice, shipped with it by default; however, as time passed I gradually realized that it was not created to be an especially readable font, and therefore began my search for a suitable replacement. This experience served to introduce me to the world of web fonts, prompted me to take a particular interest in a recurring discussion on Build & Analyze at the time as Marco Arment discussed several of the new fonts he had shipped with the latest version of Instapaper, and eventually led me to Google Web Fonts in an attempt to perfect my design. Impressed with the extensive library Google Web Fonts offered, I quickly implemented a different font for article titles, sub-titles, and the article content itself. Once the initial excitement wore off though, I took a more sobered look at my choice in fonts, and considered the implications of relying on a third party to host such an important resource.

First, and I did not particularly notice this until after learning more about the science behind fonts, none of the Google fonts looked particularly great, especially at the larger sizes I use for my article titles and sub-titles. In addition to mediocre display, relying on an external source for such an important facet of my site’s design made my uncomfortable, as I had no control whatsoever over these resources. Finally, the implementation of these three fonts would also introduce some additional load time that, regardless of how little, I would prefer to avoid if possible. Having considered these implications, I removed the custom fonts from my site and began to search for a font that was both universal and well hinted. By “universal” I mean a font that would be universal to all computing platforms and therefore would not be necessary to load from an external source as was required for any of the Google Web Fonts. Font hinting, in the most basic sense, is a process in which mathematical “hints” are embedded within a font in order to adjust its display for the clearest presentation possible. In a world no longer dominated simply by computers but instead by increasingly large numbers of mobile devices, ensuring that the font I eventually chose met both these criteria was extremely important to me. After some digging, I discovered that Verdana is both a universal font and also contains an unusually large amount of hinting data, virtually ensuring clear presentation cross-platform and on retina screens such as the iPad.

Having chose a suitable font for my site, I began developing a color scheme. During this process, I used websites such as Color Scheme Designer to assist in choosing suitable color combinations. After numerous unsatisfactory experiments though, I began to take a different approach: rather than choosing a color at random, testing it on my site, and then rejecting it, I began paying special attention to the various color schemes, background images, and textures employed by the various websites I visited throughout the day, hoping to derive a suitable solution to my problem. Shortly after coming to this conclusion, I did just that by finally settling on a page and menu bar background using a texture from the 5by5 website. I was particularly pleased with the result of this combination, as the light background image made the dark gray font easily readable, and the slightly darker background texture for the menu bar served to separate the latest post, located above the menu bar, from the rest of the page below it. More importantly though, the site just looked good: the colors were easy on the eyes and the textures gave the page a nice feel.

I have taken you on the journey I underwent in order to create this design; however, I still have not explained the importance of a content-centric design. Before I do that though, I would like to explain my reasons for taking you through that journey rather than simply giving you the answer you seek. I plan to delve deeper into this topic sometime soon, but I will cover it briefly now. First and foremost, I chose to chronicle this design process in painful detail as a way to show the level of involvement creating a website requires. Designing a website not only entails creating the necessary HTML structure, but it also requires serious consideration of every other facet related to the presentation of that structure, from the background color to the font for the header and, quite literally, everything in between.

Second to that first reason, I also wanted to show how long this process can become. I did not explicitly state this earlier in the article, but I spent more than a year working with various designs in order to finally come to the current one. Granted your experience might be much faster than mine, but, by the same token, it could take you quite a while longer to craft your design as well. Regardless of whether it takes you one month, twelve, or some number between the two, keep at it. Design is not an easy skill to develop; for those of us that are not naturally-gifted designers, the only way to get better at design — much like writing, programming, and virtually everything else — is to design, make mistakes, and be okay with that.

My third and final reason for creating that long, drawn out monologue was to show that more likely than not, you will not create a suitable design the first time around, nor the second, nor the third — nor should you. Much like writing, design is an iterative process. Further, as in writing where a given piece should never really be considered finished, you will never finish a design, it will simply escape one day and you will be forced to be done with it.

To close this article, I will finally explain the importance of a content-centric design: when a user navigates to your website for the first time, his or her attention will naturally travel down the page from top to bottom. However, flashy banner ads, loud colors, and poor placement of design elements such as menus, for example, all serve to take away from the attention that would otherwise by placed on your content. When crafting your website design, you must ask yourself this question with the addition of each page element, picture, ad banner, or anything else that is not actual content: is the attention my content will lose to this worth the trade off?