Skip to content

Documenting Design

Starting from scratch

Our first lesson in documenting design started with an introduction to storytelling. Our teacher, Pablo (a former MDEF student himself and creative lead at an advertising agency in a past life) introduced us to the importance of storytelling, even when it’s just documenting what we’ve been doing in our day-to-day classes. To write for an audience, making for an engaging story that readers would want to carry on reading and come back for more each week. A real hero’s journey.

It was inspiring stuff, let me tell you.

He broke down how our documentation sites need to be set up, the structure they should follow, and how we should try to structure our reflections and articles. This was really helpful, as it helped to give me a clearer picture as to how I was going to try and build this site and write the articles within them that you are reading right now (so I hope you are enjoying it, feedback is always appreciated 😃)

I’m looking forward to putting it all together to look just how I want it to.

Though the task after that has proven to remain the most challenging, actually building the site itself…

An introduction to coding websites

A day or so before this class, we’d received an intro from one of our teachers, Josep Marti; he taught us how to set up our basic website skeleton through Git, hosted on the open source platform Github, and created with the MKdocs framework and Material theme written in the markdown language with a sprinkle of HTML and CSS.

If those all sounded like big words that meant a bunch of nonsense, don’t worry, I was (and in some cases still am) in the same situation.

Essentially we were given a very quick crash course into the world of web development, which was both exciting and at times rage-inducing. Nevertheless, we are still here, and I’m excited to learn a bit about this field of digital creation.

I’m starting to get the hang of this stuff now, I think, especially with the help of my new best friend, ChatGPT. That tool has probably supercharged my learning around how to code this website from scratch 100x, and for something like this, where it’s learning by doing on the fly, it’s one of the most useful companions you could have.

I’ve also started to document some of the little fixed snippets of code I’ve written or discovered that perform certain functions or aesthetic changes so that my classmates can use it as a resource when creating their own sites should they need to because there is absolutely no sense in everyone having to go through the exact same struggle all over again.

Making it make sense

Now I’m down to trying to keep the site updated as frequently as possible, which has become more accessible and easier each time; I’m discovering little hacks or lines of HTML and CSS that can perform even better functions than just what markdown can handle on its own.

I’m glad I stuck to trying to learn how to build this documentation site from scratch instead of relying on a template builder like Mobirise; while a tool like that gives you access to far more features, both aesthetically and functionally, I’m happy to try and push myself to learn this now, as honestly I don’t think I’d find the time to do it at any other point in the near future.

Every day, I get distracted by another little tweak I could make here or an image styling update there to get the site to look exactly as I want, something I feel is going to continue throughout the entire year (hopefully, it doesn’t distract me too much from the actual work we are doing but oh well…that means that you are starting to have fun with it 😃)

For now I think I’m happy with how it looks, just a few more image tweaks to try and solve….


If you’ve found this article interesting in any way, or think there is anything else I should add, please leave a comment down below! 👇 Feedback is always appreciated! 😃