Design Update & Colophon

Here’s an update about the design and colophon of this website, and what I want to do next.

Currently, this website is made using HTML5, along with WordPress for the blog. I coded the static pages from scratch, and designed a consistent theme for WordPress using _s (you can read more about the tools I used at the end of this post.) For the static pages, I used a starter template for accessible websites that I developed last year, and designed on it using Sass, complied via Codekit.

Now, I’m thinking about how I want my portfolio to look.

On Sketch, I mocked up what I want my portfolio to look like. On desktops, I want a layout that has each portfolio item in a section divided into two columns. Alternate sections will have the image and text on either side, which will contain a title, an introductory paragraph about the portfolio item, and a call-to-action link for users to view the entire project.

On mobile, this two-column layout would switch to a single-column layout. Since Bootstrap is mobile-first, it makes responsive design very easy. This is what I want each portfolio item to look like:

Tools

For this project, I’ve used these great set of tools:

  • Sketch is a tool that lets you design user interfaces. It’s better than Photoshop for UI/UX design because it supports multiple artboards and pages, so you can easily take your design and make an interactive prototype. It also has a much smaller file size, and uses vector shapes, so it can export assets easily to SVGs or nx PNGs.
  • WordPress is a free and open-source CMS. This website is running WP v4.8.1 with the Gallery Lightbox Lite plugin.
  • VS Code is a source code editor by Microsoft that has an integrated terminal, built-in Git support, and intelligent code completion and snippets so it makes designing themes for WordPress very easily.
  • _s is a WordPress starter theme that makes theme development super easy. It writes all the complicated PHP for you and lets you build on top of weeks of development, instead of starting from scratch.
  • Bootstrap is a HTML5 framework known for its grid system and CSS components.
  • Sass is a scripting language that compiles to CSS. It lets you write more powerful CSS using variables, advanced selectors, and feature rich. It’s CSS with superpowers.
  • Codekit is a workflow automator that complies and minifies many languages. I used it to compile Sass, minify JavaScript, and optimize images.

Storytelling at GOGBOT

My favourite installation at the GOGBOT Festival this year was by Marcel Coufreur, who experimented with storytelling.

It’s very interesting to see how we perceive stories as a collection of notes, from the beginning to the end. When we read books like Harry Potter, we are used to learning about the environment, history, and the events occurring in great detail. This helps us paint a very distinct and colourful picture of what’s happening at the instance in the storyline.

Interestingly, Marcel wanted to change this perception of storytelling, and experimented with a different way. What if we could give the reader bits of interactive information, and leave it up to them to figure out what’s happening?

In his story, set in the year 2079, Marcel tells us about John Deringer, who saved the world from being oppressed by aliens. Even though the “save the earth from aliens” story is a cliche in sci-fi storytelling and movies, Marcel was about to radically change that by displaying an exhibition of the tools John used to save the earth — his personal diary with notes; DEEMP, a gun that emits electromagnet pulses; a vapourizer, etc.

This way, us, the readers, have a look at the tools, his diary, and his plan stuck on his board to actually build the rest of the story. It’s up to us to decide how it ended, what happened, and so each and every person’s story is truly unique to them, but they’re all simultaneously true. It truly makes storytelling interactive.

Hello, world!

Welcome to my blog! My name is Anand Chowdhary, and I’m a student of Creative Technology at the University of Twente. In the future, I’ll be posting my experiences, assignments, and other things I’ve learned on this blog. Thanks for visiting!