Inspired by Micheal Beirut’s 100 day project, I did my first 100 day project typedetail.com last year, whose goal was to annotate a web font everyday, pointing out the beautiful details of these typefaces, and provide a resource to help designers choose good web type. With much regret of how that project didn’t go as well as I planned, I want to redeem my self this year, with a new 100 day project, entitled “100 Days of Research”, hosted under the domain: designresearch.space.

The idea behind 100 Days of Research is to document my research on various topic, mostly focused on typeface or design at large, via connected links that I found in my research. Each day I will pick a topic or a starting point, and start digging deeper and deeper and document my path through those links I found along the way. And map them out on my website, entitled “100 Days of Research”.

The idea came from a realization of how shallow my research could be in the past: I read a lot of articles, but most of the time, I didn’t spend time digging in. I skim read one article and move on to the next topic fast. Those knowledge didn’t get internalized. There are times I just read it for the sake of reading it. That frustrates me further when I couldn’t recall these references when I need them. The 100 day project is trying to cultivate a new habit of thorough research.

The website has many features to make this research archive easy to navigate:

When you are navigating the site, you may notice the number system being used, such as 1.3.2 (see screenshot below). When you hover over 1.3.2, the hover state is noting how I got here, by first landing on the 1 (A Note on The Type), and then it has reference to 1.3 (Working on My Letters and Problems With the S), and then finally 1.3 points me to 1.3.2(Computer Modern). It will also show all the following research that I went after landing on 1.3.2. It is a quick and fun way to see the relationship between these seemingly unorganized links. Hover over any research block to reveal the research path associated

search is instant, the result comes out as you are typing

Even though it is not very fancy, the website does have an instant search on the top bar of the website. Just start typing and the result will show as you are typing letters. It is not as much of a search function, as it doesn’t do blurry search and smart auto-complete, but it is a quick way to index through archives. If you remember something that you saw before in the archive, this feature will help you find it fast. You can search through everything on the homepage, or search through the day archive when you are on a day detail page.

The homepage can be overwhelming, with such a long page with so many entries. If you prefer, you can go into the day view by clicking on the day title or going to the menu “DAYS” and choose a day link.

When you are on a day view, as mentioned before, you have the search bar on the top to search through just this day’s archive. You can use arrow key( ←→) or the pagination links on the page to go to the previous day or next day. It is quite fun to hold down the arrow key and see days flying through on the page, try it 😃 !

As you may have noticed, on the top bar, there are a zoom slider and a color swatches. You can drag the zoom slider to zoom in and out to see the website in different sizes. Sometimes it is easier to navigate when you zoom out and have a bird eye view.

zoom slider and color swatches

A hidden shortcut: you can double-click anywhere blank on the page to jump back and forth between the default zoom level (0.8) and last zoom level of your choice.

You can also click on one of the color swatch to change the color theme of the website to reach a better reading experience.

Both your choices on the zoom and color swatch is persistent even when you refresh the page, or come back a month later. You always goes back to where you left it at.

This project has helped my personal development greatly, and I encourage every friend to start a research archive of your own. This website can serve as your archive and all you need to do is to edit and maintain your json file on http://www.jsoneditoronline.org/. Detailed instruction is documented is this post. You can find the link CREATE YOUR OWN on the nav bar of the website too.

Admittedly still buggy, I used (and hacked) typeset.js to achieve nice typography details on my website, such as hangout quotes, small caps, proper quotation marks, dashes and spaces. If you see any bugs, please report them on my Github repo.

Not gonna lie, it got challenging really soon to come up with topics to research on every day, as I only have a very narrow range of interests (lol!). I welcome any suggestions of topics, tweet to me @DesignJokes or comment below. I am considering these options too when I find it almost impossible to find new topics to continue the current format of the 100 day endeavor:

1. go back to some highlights of the research archive and dive even deeper, sum up my findings and opinions on this topic with an article.
2. typeset the articles and publish them on my website when I run out of article ideas.

My name is Wenting Zhang, call me wentin if you are my interest friends, Wenting if real life friends. I am a UX designer and front end developer who is interested in web typography and algorithmic design. I created underline.js, responsify.js, typedetail.com , designresearch.space

• Twitter: @DesignJokes
• GitHub: https://github.com/wentin
• Email: wtzdesign at gmail dot com
• CodePen: http://codepen.io/wentin/
• Newsletter: Subscribe to 100 days of research newsletter

Star the Github repo if you like :) or Tweet it, or Share on facebook! Thank you very very much.