I wanted to build my portfolio as an example of a sustainably designed website that can serve as a
resource hub for others looking to learn more about this topic, as well as showcase my work. As I
don’t code myself, there were sacrifices I had to make to ensure I could grow the portfolio over time,
but not sacrifice the weight of the website.
The Outcome
A website built exactly according to my designs, that serves as a jumping off point to learn more
about the importance of sustainable design, as well as showcases a variety of my work.
Most of the research for the website came from my own unstructured browsing and searching the
internet for examples of sustainable websites and learning from best practices. I was inspired by the
principles of humane and positive design, which led me to feature the carbon tag in the footer and
create the site as a resource hub. Beyond inspiration gathering and traditional UX research, this was
a labour of love that came from my genuine energy and desire to produce something representative
of my interests.
Wireframing
After thinking about the elements my site needed to have, I identified the key templates that would
need to be created to support this site.
I started by creating a moodboard based on the core descriptors of myself and my work that I wanted
the site to communicate:
Professional/Minimalist
Creative/Different
Warm/Sustainable
The purpose is to identify elements that speak to each descriptor to get an idea of how to incorporate
those into the final design. This also served as a base for the UI kit, pulling colors, and fonts for the
final design.
In order to ensure the design was implemented correctly I created a design system page that held all
the navigation elements, button/link/card states and colors to use. Additionally I created mobile
versions of the main navigation and footer menu to ensure they translated properly to different screen
sizes.
