TARATSANG.COM

The trials and tribulations of creating an online identity.

Background

In 2014, I noticed that a handful of my peers were popping up with websites. I had previously played with HTML (no CSS, hello that 2000s web design aesthetic) in elementary school, but hadn't touched any code at all since then. I decided to refresh my memory in the language, and felt that the best way to challenge myself was to apply my knowledge to create a website.

Over time, for the next few years, I’ve been revamping and adding projects accordingly. The front-end architecture has changed, the mood and colour palettes have taken nosedives. It’s become a borderline obsession, but I wouldn’t have it any other way.

Version 1

v.1.10

v.1.10 of my website was born in the summer of 2014. As an introduction to web development, I chose to work with a Bootstrap template—the "Greyscale" theme in particular.

I struggled with the notion of pagination vs. one-page, and my indecisiveness ultimately blew up in my face and turned everything into a mess.

v.1.15

Alongside v.1.10, I heavily edited an existing Tumblr theme - notably the sidebar - so I could have a portfolio-style website to showcase some artwork.

I initially intended v.1.15 to work alongside v.1.10 (as a sort of "portfolio piece" to showcase my "coding abilities") but it seemed repetitive and arbitrary, yet almost paradoxically empty.

v.1.2

V.1.20 was born after my first stint at a hackathon. I participated in Hack the North in September 2014; one of my teammates had already created a note-taking application, complete with a marketing website.

I heavily modified his template (quite shoddily, might I add), to create something I could use.

Version 2

Click here to view this version of my site.

Instead of using a Bootstrap template, I was fed up and decided to challenge myself to code a simple website all by myself. I didn’t have much UX experience, so most of my work was in the visual arts realm (i.e. paintings, some slight graphic design). This version of my site does not run on the framework, and was when I started to play around with jQuery.

It was also around then that I started paying much more attention to details, such as footers, favicons, navigation, content, and photography.

I also decided to create business cards to go along with my website. The ‘a’ is red because I was told it looked like my name was “taratsang”, so to break up the two names, I coloured the end of the first word.

Version 3

v.3.0

Click here to view this version of my site.

I worked as a front-end developer in 2015, where I experimented and became familiar with AngularJS. I specifically redesigned my website at this point because I wanted to implement AngularJS and I felt that my previous website was becoming convoluted and messy (content and coding practices). I also wanted to incorporate things like a tagline and include an audio element (my first name is constantly pronounced differently).

v.3.5

Click here to view this version of my site.

I was chasing the minimalist aesthetic and was torn between contrasting ideas. I had seen super minimal websites featuring only text, and I was somehow drawn to them. I briefly created v.3.5 of my site to experiment with a radical redesign (while knowingly sacrificing functionality), and decided to conduct some user testing and gather feedback.

There were elements that I had hoped to keep from v.3.0, such as the personal brand (“hi, i’m tara tsang”), the audio elements, the colour palette, and AngularJS. I wanted to cut out the tagline as well as shorten the description; almost creating internet distance between any viewers and me.

I did not end up keeping some of the things I had hoped to keep, and I received very different feedback from what I expected.

I surveyed a handful of my friends from different parts of my life. Some were designers, some were not, some were my closest friends and some were just acquaintances. Generally, the feedback I received stated that v.3.0 was better in some ways (and lacking in some other), but was more preferred because it seemed more personal and was easy to navigate.

Version 4

v.4.0

Click here to view this version of my site.

Instead of going back to v.3.0, I decided to redesign a site featuring navigation, pagination and a profile card feature.

However, I quickly became disenchanted because I couldn’t code the card feature to work properly, and I felt that this foray into slight skeumorphism was not a good move. I looked for ways to keep the concept the same, but to improve the interface and impression of my site.

v.4.5

Click here to view this version of my site.

After redesigning the logic and flow of my site, my next move was to design for transparency. Or to let my identity shine through. I brainstormed for what I wanted to convey to viewers, and decided to change details such as adding a photo (make it personal), rounding corners (make it friendly), and turning to flat graphics (make it modern).

Reflection

I’ve deigned to include the process of this current iteration of my site, but when I do decide to change it up, I’ll discuss it in my reflection then.

It’s interesting to see how my personal identity has changed over the course of a few years. I’ve only been online for 3 years, yet multiple changes and iterations have occurred. Some were vastly different from the previous ones, others were simply built on top of each other. Seeing the progression of my coding abilities and my design work is also incredibly fascinating; it’s almost like a photo journal of things I didn’t realize I did before.

One big thing I notice is the change in colour scheme, which is a direct reflection of my personality as well. I was rigidly set into minimalism; black, white, and red, for the largest amount of time, and I feel like by deciding to not let it rule my life and choosing softer colours (my favourite colour is actually orange), I’m achieving what I set out to initially do, but in a way I never expected. In short, increasingly so, I’m opening up to more ideas and more styles and it feels good to experiment and expand my scope.