Overview

Throughout 2020, I have bought a new camera, been to three cities and have begun taking pictures everywhere I go. However I didn't have a place to store all my photographs besides Instagram.

During my final semester of third year, I have learnt how to code up a website using HTML, CSS and Javascript. Thus, I have decided to design my own portfolio to store all my best photographs in, as a starting project to learning web coding.

Role

UI and developer

Deliverables

- Fully interactive website
- HTML, CSS and Javascript code

Tools

- Figma (Design)
- Brackets (Code)

Click here to jump to final product

Sitemap

A sitemap was first created.

Rather than displaying all images in one page, I wanted to twist it up a bit and categorise them by countries I have travelled to. The aim for the website would be like a 'travel diary', a collection I plan on expanding as I explore more countries in the near future.

Colors were decided based on the general tone of the images on each page.

SItemap

Desktop wireframes

mobile wireframes

Style guide

To keep colours and fonts consistent, a style guide was created. Since the images are already busy with color, I wanted to keep everything else as minimal as possible, with colours applied only for tabs and highlighting additional information.

Final website

Click here to view website live