Back to all projects

Curiosity-Colored Glasses

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)

Opportunities

Process

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.

The inner back cover of one of my recent notebooks features a list of future investigations.
Note to self: look into what part of plant bananas are. And coconuts. These things scurry through my brain at any given moment, making their way onto the nearest scrap of paper and eventually into my compilation of questions.

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.

What at first seems to be a paper covered in ink scribbles is in fact a decision tree walking through questions and answers to determine whether a hyphen is needed in any given situation.
This monstrosity is the self-serving output of a hyphenation-related question. I was, in fact, wondering if my blog title needed a dash to be grammatically correct, and my research sort of spiraled out of control from there. But who hasn’t needed to know when to use a hyphen at one point or another? Others could benefit from my madness, as long as I committed to sharing it in a slightly more refined way.

“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.

Early sketches explore the potential of pulling in a visual metaphor as part of my blog's wordmark, turning the two "O"s in "color" into a pair of spectacles with the "L" between them as a nose.
I explored illustrative ways to play up the title, but ultimately settled on a simple, blocky, black and white framework for my blog as a whole. This would allow me to explain concepts through potentially complex diagrams and varying illustration styles, without the blog’s brand adding clutter.

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.

Two notebook pages filled with eyeglasses sketches in various states of blinking, winking, and roving function as storyboards for my loader animation concept.
Storyboarding helped me document ideas for a custom loading animation. My initial thought had been to use two typical loading wheels side-by-side, suggesting spectacles. After continuing to iterate, I landed on a more imaginative idea: a pair of glasses’ arms would open, only to be occupied by curious, roving eyes that blinked expectantly.
An animated .GIF demos the concept of the loader animation.
I mocked up a rough .GIF in Photoshop too get a better sense of whether my idea for a loading animation would communicate properly.
An animated .GIF demonstrates the zoom effect of a blog post's eyeglasses icon when hovered.
A stylized pair of glasses to represents each post, filled with photos and diagrams alluding to its content. Hovering triggers a zoom effect on the background images, implying the notion of looking closer.
Three example comments from example commenters without their own image, thereby assigned an avatar: a yellow square with stylized cat eyes glasses, a green square with circle rims, and a blue background with square rims.
Comment avatars featuring cat-eye, circle, and square frame options round out the eyeglasses motif.

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.

"HTML & CSS" and "Javascript & JQuery" by Jon Duckett; "Learning Responsive Web Design" by Clarissa Peterson, published by O'Reilly; "Designing Interface Interaction" by Val Head.
Learning by book is my preferred method for intaking this kind of information: HTML & CSS and Javascript & JQuery by Jon Duckett; Learning Responsive Web Design by Clarissa Peterson, published by O’Reilly; and Designing Interface Interaction by Val Head.

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.

I drew colored boxes around planned HTML elements on a printout of Curiosity-Colored Glasses' home page design.
My tried and true method for mapping out a site’s HTML structure involves a brief hiatus from the computer. I draw and label boxes representing HTML elements atop printouts of the design, applying color-coding to better keep track of layers.
A decision tree maps out a Javascript function, making ample use of variously colored highlighters to encode reusable methods.
Colors helped me identify reusable functions when I drew out this decision-filled Javascript flow. Ultimately, my investment in sketching before going to the keyboard resulted in much more performant code.
I printed a list of all interactions and subsequent behaviors my gallery and lightbox modules would need to accommodate. Then I took colored ballpoint pens and encoded those list items that accomplished the same effect, and could thereby use the same Javascript function.
The interactions within my designs for galleries and lightboxes resulted in the most complex script I’ve ever written. I could have used any of the plethora of pre-existing libraries, but I was stubbornly determined to figure out how to do this all on my own!) Once again, my 10-colored ballpoint came to my rescue, assisting me in identifying which common interactions could reference the same chunks of code, and ultimately saving me several lines of redundant characters.

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.

Diagrams of my grid designs for four major breakpoints.
Merging columns and rows as needed, I used the table functionality of a Google Doc as a medium with which to diagram the grid-structure that held my design together at each breakpoint.
Table with 5 columns, one for each breakpoint, hold lists of components that change with various media queries. Cells merge across columns when the component does not change for a media query.
I created another Google Doc to track individual components’ behaviors across breakpoints, helping me ensure I’d accounted for every detail in my design.
Notebook pages with wireframe sketches explore possible permutations of image and caption layouts.
My ever-present quiver of colorful writing utensils helped me chart out possible layouts at each breakpoint. Here I explored how to render images of differing aspect ratios on vertically and horizontally oriented screens.

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.

I listed out a plan to test what was causing the issue. I sketched out my findings of three overlapping variables as a Venn diagram.
These pages log my plan of attack against—and eventual vanquishing of—a particularly nasty bug of the Safari-only strain. In an attempt to discern what was causing my content to render invisibly small at just 1 pixel tall, I systematically manipulated my CSS, HTML, and mediaqueries. Once I’d narrowed down the combination of variables causing the issue, it was just a matter of reconfiguring part of my code, thereby restoring my content to its proper height.

Outcomes

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.

An animated .GIF demonstrates the zoom effect of a blog post’s eyeglasses icon when hovered in context of the entire home page.

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

Curiosity-Colored Glasses' responsivity is shown in an animated .GIF of the browser being dragged from the full width of a desktop to the narrower width of a mobile device, while onscreen elements shift accordingly.

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.

An animated .GIF shows how the definition feature of Curiosity-Colored Glasses' posts works: the user simply clicks a terms (stylized to indicate it has a definition attached), and its pronunciation (both written and as as an audioclip), definition, and illustration pop out as a sidebar.
The pop-up definitions include space for written and audio pronunciations, as well as an illustration.

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 library page of Curiosity-Colored Glasses contains an array of small illustrations. When selected, they expand to include a title and description of my appreciation.

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

Live + learn