This was the first big project I ever tried to make. It was initially for a class hosted by DTI (a Cornell project team) called Trends in Web Development, but later I decided to finish it off on my own. Here’s the journey I went through to create and market this project!
What is a project that would make me think?
Frankly when I started brainstorming for this project I wanted to make something really simple. But after talking to my project manager Simon and seeing his awesome projects, that he made as a college freshman, I felt like I needed to make something cool too.
But what?
Of course I drew inspiration from my experience as an artist.
PureRef is an app I like to use when I need to find references for a new project. It provides a wide variety of image editing options through a very simplistic and easy to use interface.
The one thing I didn’t like, though, was the fact that my boards had to stay on my computer. I wanted a way to edit them on my ipad or phone. This want led to the idea of turning PureRef into a web based application. If it was just a website that let you create infinite boards, I didn’t see the difference from it and figma or google slides. I needed to combine it with something unique.
Que Notion!
I personally used Notion a lot. Not really for the aesthetics, but more for the convenience of nesting ideas easily. That’s when the idea of putting the two together came to me. I thought: being able to map out my ideas in a nested workplace visually instead of using a text-based interface, that’s gold!
More than creating an application that could be useful to me, I was excited about the learning I would undergo as I did the project.
I was excited about figuring out the database structure for the nested boards. How would I manage the complicated relationships between boards and the ripple effect of changing those relationships. I was excited about creating the infinite canvas interface. How would I sync the user’s movement with the database?
These lingering questions told me I had found a project interesting enough for me to create.
Design
I wanted to make the design simple, and leave the focus on the infinite canvas. So I made a conscious decision to treat the sidebar not as a collection of the user’s created boards, but their “open” boards. This way users only keep the boards relevant to them on screen. The bottom bar as well, I lowered its opacity when the user isn’t focused on it to reduce clutter.
The often forgotten part about creating an interactable infinite canvas is making it mobile friendly. The size of a phone screen can make it difficult to edit items, especially images, which often don’t fit on screen. To solve this I took inspiration from Figma and made the canvas view only when the screen size was too small.
Overall I made purposeful decisions to keep the site simple, while packing it with tons of features perfect for visual designers.
Development
Managing State (Syncing, Ctrl Z + Ctrl Y)
A simple board needs to constantly sync it’s state with the backend. In order to keep the board consistent with the database, I needed to develop a method that keeps user experience smooth and allow continuous updates.