Conceptual references and information architecture

Starting point

My references from this project comes from my background in architecture. In CAD programs, a hatch fills an object and is used to identify between different textures and materials. Borrowing from this way of visually identifying objects, I wanted a visual map for the different projects, that will be filling up as the project grows in size and more posts are added.

This project was also made as a way to learn how to use Eleventy while also building a working website. Instead of learning through video lessons and abstract exercises, my approach is always to create useful things that can be seen. As a public facing project, I'm more aware of the details as well as the improvements that can be made for a future project.

Visual cues and initial website development

Execution

I wanted to create a system that worked with different types of content. I decided on three topics: visual, text, web; and left one visual cue open for any other type of project that can be used in the future.

Another aspect I had to keep in mind was how would this system can be flexible and easily replicable. I decided for a black, gray and off-white color palette, with simple lines. Following up with the architectural references, I chose a dotted background, to mimic the white pages of a notebook.

End results

This was a challenging project that served as a learning project to understand templates using nunjucks as well as a consolidation of my skills in web development in 2021.

It was an enriching experience to create a project with a group of people, always grateful that I got to be a part of an interesting group of designers and developers. Special thanks to our instructor, Jake Brussel Faria for the continuous support.

Home page