Curiosity-Colored Glasses

• A blog, by definition, provides the ability to publish to a potentially limitless audience. If my readers were to walk away with comprehension at the very least—if not inspiration—I’d need to incorporate ways to welcome learners at all levels.
• Each post tells a different story, therefore requiring the freedom to be visually communicated in its own way as well. I had to design an interface that could accommodate varied illustration styles and detailed diagrams without coming across as busy or overwhelming.

This project started as a simple collection of questions, partly because I like asking questions, and partly because I like collecting things. Then one day, my friend and I were chatting about blogs: what would we blog about if we each had our own? My friend said she’d have a cooking blog. I loved everything about the idea—visually and verbally breaking down one’s process, adding anecdotes from the experience, and encouraging onlookers—except for the cooking part. I wondered if just maybe my question collection and its subsequent investigations could serve as fodder for a blog of my own.

A blog connected to the World Wide Web would mean I could share the fascinating findings my quandaries led to, rather than keep them all to myself. I thereby took on the challenge of communicating these explorations and results in a way that others could benefit from.

“Curiosity-Colored Glasses” summed up everything my blog stood for, from the lens through which it implicitly looked out at the world to the approachable optimism implied by the aphorism from which it was borrowed. I purchased the associated domain name and went to work exploring how to visually communicate my mission.

I sought out every opportunity to hijack the user’s experience with delight, adopting a simple eyeglasses motif and exploring how it could creatively recur throughout the UI in unexpected ways, with each occurrence reinforcing my blog’s mission to inspire curiosity.

I planned to code my whole site and its content management system (CMS) from scratch as an incentive to brush-up on my browser-based coding skills (but mostly so that I could have complete control over its every detail … muahahaha!). I selected a lightweight, file-based CMS called Kirby to provide the integrations between my blog’s coded structure and its content. This meant I’d have to learn new languages: PHP to make my site dynamic and link it to the content, YAML to create the CMS itself, and JavaScript to build out some of the behaviors my design called for.

Planning played a crucial role in my process. I routinely put pen to paper in an effort to make my code—and the time I spent writing it—more efficient and organized.

A CMS is advantageous for any blog because it separates the content production from the code, providing a more conducive environment within which to edit text and images. After I’d built the structure and style of my site, I set up its CMS using a configuration language called YAML. This would pass my content to the previously coded HTML structure and enable it to appear on my site.

My blog wouldn’t feel like a modern member of the World Wide Web if its design didn’t respond to various screen sizes. I planned to promote it across Instagram and Twitter, the users of which would likely end up accessing it through links on their mobile devices. Adding media queries into my CSS was easy; the tough part came with creating cohesive designs that felt fluid between breakpoints, and that changed from size to size in ways that accounted for the content.

If the launch of my site was dependent upon perfection, my blog would only ever live on my localhost. I’ll continue to improve its code over time, relying heavily upon the troubleshooting experience I’ve cultivated so far.

curiositycoloredglasses.com has launched and is now visitable! Alternatively, have a look at the screen captures below.

Curiosity-Colored Glasses is accessible on all screen sizes, from mobile devices to desktop monitors.

When I read books as a kid, every time I came across a word I didn’t know I’d write it down on the back of my bookmark so I could look it up in the dictionary later. This was only a partial solution, though—I still missed out on understanding my first encounter of the word in its context. I wanted to prevent this problem as much as possible for my own readers, so I built special functionality into my content management system that would allow me to add hidden definitions to particularly esoteric terms.

The Question Queue stores a list of my forthcoming investigations. In the future I’d like to add a voting system, so readers can up-vote the topics they’re most interested in.

I decided to pay homage to my most trusted and consulted resources by way of a “library” page. Readers can explore an array of illustrations each standing in for a book, video, podcast, person, or other resource.

The eyeglasses motif makes one more artistic appearance on the 404 page.

• I relished this project as an opportunity to bring my vision into the world without compromise—so unlike the convoluted inner workings inherent to my position within an enormous organization, where the possibility that my designs never make it to market always lingers due to any number of factors beyond my control. However, the self-assigned nature of this project allowed me to be quite perfectionisty, which in turn decelerated its journey to my audience. I could have started acting on my mission much sooner if I’d taken advantage of a platform with templates or just used pre-existing plug-ins for some of the more complex parts in my code. But I broadened my context of front-end development and learned so many valuable skills that I can’t quite say I regret my stubborn insistence to code every aspect of the site myself.