Since seventh grade, I have cultivated an ever-evolving collection of questions: How is helium harvested? Why does the moon perpetually keep the same face toward Earth? When preceding “glasses”, should I put a hyphen between “curiosity” and “colored”? I recorded the first quandary in my spiral-bound notebook well before Googling it was a feasible option. And while consulting Google for a quick answer is certainly a possibility now, the questions on this list seem to deserve more: each harbors not only an answer but also a story; beyond simply satisfying my own curiosity, they possess the power to spark someone else’s. So I built a website to log my investigations and their findings, with a secret agenda: to provoke the capacity for a curiosity within my readership that changes the way they view the world—from a birthday party balloon to the full moon, even to grammatically ambiguous blog titles.
Project pretext: Personal
Assignment: Design and code my own blog
Timeframe: 2 years off-and-on from conception to planned launch (not counting the question gathering lead-up that started back in middle school)
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 would tell a different story, therefore requiring the freedom to be visually communicated in its own way as well. I’d have 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.
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 will say “Hello, World!” a little later in 2018. Until then, screen captures from the version on my localhost can convey a sense of what to expect.
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.
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.