Back to all projects

Curiosity-Colored Glasses

Since middle school, I have kept a running list of all the seemingly inexplicable things I have personally come across within this world. I recorded the first quandary on the back cover of my spiral-bound notebook well before Googling it was even an option. And while consulting Google for a quick answer is certainly an option now, the questions on this list seem to deserve more. Each harbors not only an answer but also a story; each has the [power]/[potential] to not only satisfy my curiosity but to also spark someone else’s.

So I built a website* to log my investigations and their findings. But the intent is not simply to enlighten myself and others [as to/about] how helium is harvested or why the moon keeps the same face towards Earth or any of my other esoteric wonderings. The questions for each of us will be different; I simply want to provoke the capacity for a curiosity that not only leads us to seek answers, but also inspires us to examine these answers and how they were attained.

*Yes, ironically or not, my choice of website as the medium for this endeavor is hypothetically capable of intercepting [would-be Googlers] making queries similar to those on my list…

Opportunities

Process

Design

[Testing!!!]

When I had settled on a name for my blog, I started working on how to style it. I sketched some iterations attempting to incorporate the idea of glasses into the title, but eventually decided to keep the wordmark very simple along with the rest of the UI so that it would not compete with the illustrations and diagrams I’d be creating for the posts, and to allow them to have their own independent styles without feeling too busy.

I sketched wireframes for various screen sizes, from high-res desktop to vertical mobile, and then took my sketches into InDesign to iterate digitally.

There turned out to be several interactive components in my design, enabling the user to navigate or drill down for more information. I iterated on how to make the hover states for each of these components (the state that would most directly communicate to the user that it was interactive) clear, but also cohesive with other components’ hover states.

On the home page, hovering on one of the posts zooms in on the image within its glasses icon.

alt

I wanted to include the glasses motif in a fun way in case pages were taking a while to load, so I storyboarded various ways for them to animate, including the arms of the glasses opening and closing, and eyes appearing, blinking, and roving around.

I used Phototshop to mock-up a rough .GIF of the animation.

alt

Implementation

After looking at every web hosting platform I could find that offered pre-made templates, I began to realize that the design I had in mind could not be accommodated by them. I started to research platforms that would allow for complete control over the UI, and settled on Kirby, a lightweight, file-based CMS.

Kirby integrates into sites coded with HTML, CSS, and Javascript, which meant I’d have complete control over the structure, style, and behavior of my site. It also meant I’d have to brush up on my HTML and CSS skills, and learn Javascript and responsive styling from scratch. I read comprehensive books on each of the topics I needed to learn: this approach—combined with trying things out in code as I went and referencing the lessons along the way—worked well for me, as I could re-read and re-reference lessons as I needed.

I started by coding the structure first.

Outcomes

Live + learn