Web Media: The Story of My First Website

A few months ago I signed up for a web media class with the vague hope that my technologically-challenged brain wouldn’t let me down. Over the past few weeks I’ve discovered building a website isn’t nearly as hard as I thought, and actually a little bit fun. Here’s how it went.

Phase One: Planning

In our first few lessons we were introduced to programmes like InVision and Balsamiq. These were really helpful for visualising what I wanted the site to look like before I thought about how to make it.

One of my first drafts on Balsamiq

Then I had a look at some other people’s portfolio websites and got slightly-overambitious about what I would be able to achieve. Here are some inspiring websites I drooled over:

Next, I went onto Trello and planned exactly what I wanted on my website. This included thinking about who would be viewing it, what they wanted and prioritising what was most important. Here’s my first plan:

Green=must have, yellow=should have, orange=could have

Next, I went onto Canva, a design app that has saved my life a million times, and put everything I wanted onto separate pages on there. Once I was happy with how that looked, I uploaded the pages onto InVision so I could play around with it. Here’s a link to a demo of the website:

Phase Two: Learning to Build a Website

This next phase involved lots and lots watching tutorials, playing around, moments of super-frustration and moments of mega-satisfaction and fantasies of being a super-genius coder who could hack into the CIA (not that I actually did any coding, but you get the drift). This was probably the most-lengthy phase, as it took sometime to get my head around how to shift things, what the difference was between a section/container/div box and so on. The layout of WebFlow looks kind of similar to Photoshop, but I soon discovered the two work VEEERRRRY differently.

In class, we made a few practice websites, which I tried to adapt into my assignment, but quickly abandoned. Here’s what one of those looked like:

My first home page
The first contact page

Phase Three: Building a Rough Website

Once I had what I thought was a basic understanding of WebFlow, I started building my website. I started with making each of the four pages, and then adding details to each one. I planned out sections and simplified my original plan by using sliders instead of multiple pages. First I added headings, then text, then fiddled with colours, fonts and sizes until I was happy. I found tools like Colorzilla and Page Ruler especially useful for lining everything up and matching the colours across pages.

I found sourcing images was suprisingly difficult, and spent a decent chunk of time editing them on PhotoShop or Canva before putting them into the website.

Early home page
Early “Portfolio”, which later changed to “Skills and Projects”

Phase Four: Final Touches and Interactions

The last thing I did was go through each page and make sure the links led to the rights places, more twiddling with sizes and finally adding interactions. This was harder than expected, thus I settled with just having interactions on the home page and not the other ones. The interactions on the home page took almost two hours, despite following tutorials and reading comments from others.

Final Home Page
Final Work Experience Page
Final Skills and Projects Page
Final Get In Touch Page

You can view the website here.