This is the third and final article in the series The Making of a Simple Frame (see Part 1 and Part 2) in which I explore the creative process of designing this site. In this article, I will share the thinking behind some of the decisions that inform the site’s visual design and layout.
Designed to Be Memorable
Paramount in building any brand is choosing a name upon which to build it. I decided early on not to use my own name. Previously, I had been using markdschafer.com (as markschafer.com was already taken), but it was clunky, unmemorable, and hard to spell. Thus, after jotting down idea after idea, I arrived at the name A Simple Frame.1 Once the name was settled, I began exploring how to represent it visually.
Brand = Type + Color
The fundamental elements of brands (especially online) are typography and color. Designers from Edenspiekermann pinpoint the importance of typography online in a video produced by Typecast:
Typography is really, really important because oftentimes it’s the only way to really convey the brand in the interface.
In the same way, color can also be used to convey a brand in an interface. Additionally, in a world of responsive design and ever-changing screen sizes, typography is the primary way to speak with a unique voice:
Type adds character to a message. It’s a very good means to express something that goes like [sic] between the lines and it shows so much about personality – about where you’re coming from when you say something.
Type is a way to communicate under the surface. Even if you are unaware of its presence, type subtly adds character to a text. In a similar fashion, color can induce mood and add personality. As I explored the branding A Simple Frame, I thought primarily in terms of type and color.
A Typographic Journey
The typeface I chose to bring personality and character to the brand of A Simple Frame is Alright Sans from Okay Type. The path to finding it, however, was a bit roundabout. To make a long story short, I became infatuated with Okay Type’s Harriet during my early design explorations. After realizing Harriet, though gorgeous, was not the right voice for A Simple Frame, I discovered Alright Sans while researching other fonts created by Jackson Cavanaugh, Harriet’s designer.
Upon finding Alright Sans, I knew I had found my voice. Alright Sans is an elegant sans-serif that isn’t too stiff or uptight. It has a large x-height which lends itself to on-screen display. As the officially description notes, “it has just the right amount of warmth to convey a serious-yet-friendly tone.” It also includes a very complete character set and wide range of weights. This gave me confidence that it would be able to grow with the brand and handle more complex type needs in the future.
At the end of the day, I chose Alright Sans because its character and personality just felt right to me. It has the right combination of elegance and warmth. It’s modern without being too cold. It’s simple in all the right ways without being too bland. It typifies my design taste, making it the perfect voice for a A Simple Frame.
Color Me Hot Pink
The other main component of brand and interface online is color. This decision was much easier and more straightforward than the type, as I already had a color in use from my previous site that I wanted to carry forward.
The color is hot pink, and the explanation is quite simple. I like it, and it’s memorable. In fact, it was my favorite color as a kid. Not only do I have a history with hot pink, I especially love it today for its memorable and fun qualities. Paired with more understated typographic design, it adds just the right amount of personality and unexpected excitement.
Designed to Get Out of the Way
As Dieter Rams famously stated in his “ten commandments” of good design: “Good design is as little design as possible.” There is so much visual clutter in today’s world, simple and unobtrusive design stands out. In designing this site, I strove to add only what was necessary and remove all else.
Content is King (Really)
This is a phrase heard often in the web design world, and it is quite true. A person will endure a poorly-designed website if it contains the content they are seeking. The inverse is not true. A person will not use a site, no matter how well-designed it may be, if it does not contain the content they are after.2 In practice, unfortunately the content of a site is too often treated as an afterthought – both in its creation and presentation. For A Simple Frame, I spent significant amounts of time writing things like the about page. I also focused my visual design efforts on making each page a pleasure to read.
Focus on the Reading Experience
In his Web Design Manifesto 2012, Jeffery Zeldman keyed in on one of the big problems in web design – how the design of many websites obscures the content by offering terrible reading experiences:
… how pathetic much of our web design is when our visitors increasingly turn to third party applications simply to read our sites’ content.
I couldn’t agree more. A primary goal for this site was to create a layout conducive to reading. I carefully considered all the small typographic choices like font size, line length, and line spacing that contribute to a pleasing reading experience.3 Ideally, this site facilitates reading in such a way that the layout recedes into the background and becomes invisible as you engage with the content.
Minimizing Clutter
One additional aspect of optimizing the reading experience was to reduce any extraneous clutter. This meant no sidebar, no social sharing buttons, etc. It also meant considering how to deal with the necessary clutter, if you will, of the site’s navigation interface. My first explorations set the navigation at the top in close proximity to the site’s name, as is standard practice. However, I liked the page better when it wasn’t there. It felt like too much clutter before getting to the content of the page itself.
My final solution was to move the navigation menu to the bottom of the page in a persistent bar. It is not as intuitive as having navigation at the top, but I was willing to make this trade off in favor of less clutter on the page. The site title, which links to the home page, remains as the only persistent element at the top.
Designed to Change
There’s nothing like living with a design for a while and using it in the real world to understand the implications of decisions made during the design process. As I now use the site and update its content, I’m continuing to evaluate and evolve it.
Experimentation as a Goal
This site is a great place to try new things. I’m not beholden to a client or any outside stakeholders – allowing me to experiment quickly and freely. For example, I’m continuing to evaluate the navigation at the bottom of the page. How could it change to be even less intrusive but more useful and intuitive? Design decisions are always calculated tradeoffs. By using the design in the real world, I am able to test my decisions, experiment, and grow to be a better designer.
Granting Permission to Iterate and Evolve
In order to try new things, one has to have the ability to fail, learn from the experience, and create a new solution based on lessons learned. I believe the best design process involves iteration and evolution. The iPhone’s hardware, for example, has continually been refined and improved with each new release, but remains true to its original form. I will evolve this site over time, as I continue to experiment, learn, and refine.
The Advantage of Being Small
The idea of overnight success can be enticing, but it often brings more harm than good. As Jason Fried notes in Don’t Exaggerate Your Size, being small is a good thing:
Being small is nothing to be insecure or ashamed about. Small is great. Small is independence. Small is opportunity. Celebrate it.
Operating on a small scale, as this site is now, is very freeing. I can make changes and mistakes without the pressure of a large number of people watching. I can write without the pressure of a large readership, as I develop my style and improve my skills. Our culture says bigger is always better. Quite simply, it’s not.
Conclusion
This post brings an end to The Making of A Simple Frame series. It has provided a good opportunity for me to reflect on my own process and share some of the lessons I’ve learned. At the very least, it should provide an interesting reference point to revisit in the future as the site grows and evolves over the coming months. Stay tuned.
-
See “The Name” in Part 1 for the quote that inspired the name. ↩
-
I would actually argue that in order for a site to be “well-designed,” it must contain quality content. The design of a website hinges around its content. ↩
-
Of these, font size is by far the trickiest to get right on the web. For good reads on the subject, see Oliver Reichenstein’s The 100% Easy-2-Read Standard and Nick Sherman’s Responsive Typography is a Physical Discipline, But Your Computer Doesn’t Know It (Yet). ↩