Bookmarks Hub

user interface design & web development sketch, vue.js February, 2019 bookmarkshub.co

Project Background

Bookmarks Hub is simply a site where valuable resource links (bookmarks) are kept. These resource links range from design tools, to dev tools, articles, books, site inspos and many more.

The idea for this site started off while I was trying to clean up my browser's bookmarks bar. I had numerous nexted folders that contained links to resources or posts that I either archived to check later, or saved for constant revisiting.

The concern for me was that I had a lot of these links that I considered valuable and I wanted them properly categorized and saved in a place where I could access them from anywhere with/without my personal browser or computer.

bookmarks showcase

The process

First thing I thought about and did was to create a GitHub repository and keep these links in the README file. The plan was to constantly update this file and have the repository url bookmarked somewhere.

Setting up this repository however birthed the idea of the site. In just a few days of setting it up, I saw limitations and I started to want more from it. I wanted a search feature to enable faster and easier access to links.

I also wanted a more deliberate user interface that provided a better experience, and I wanted to be able to share with people. At this point, I decided I was going to do a simple design and develop it into a site.

tosin's bookmarks
Initial design (Tosin's Bookmarks)

First design

The design above was what I initially pulled off on Sketch. I opted for a simple, minimal and modern feel. I wanted it to be personal, hence the name "Tosin's Bookmarks". The bookmark icon was from Font Awesome while the illustration is courtesy of Undraw.

Development

I went ahead to translate the design into a funtional and mobile-responsive site. I opted for the Vue.js framework, hosted the source code on GitHub and deployed it on Netlify. The resource links are fed into the site from a locally stored json file that is constantly being updated.

bookmarks hub
Final design (Bookmarks Hub)

Final changes

After deploying live, I got a number of positive feedbacks with several people regarding the resources as valuable to them also. I decided to make it less personal by changing the name to "Bookmarks Hub".

Another obvious change is the illustration in the Hero section. Katerina Limpitsoun, creator of Undraw, was happy with the implementation of her illustration and decided to create a custom bookmarks illustration for the platform.