Initial Progress

The primary purpose of my personal website is to showcase my programming projects and photography. To achieve this, I began the website design by splitting my navigation into several subsections, namely Home, About, Projects, Photography, Blog and Contact. After browsing an article on Canva about website color schemes, I decided to incorporate the No.11 Elegant and Sophisticated colour scheme from the article for my website, as seen on the right. I used the colors for the text on the website, as well as for some backgrounds behind the text.

I then proceeded to design the navigation bar to make it responsive for mobile and desktop. I learnt about how use media queries and how to set the appropriate metadata for mobile viewing. I also resized different elements through CSS and Javascript to maneuver them into aesthetically pleasing layouts. The process involved a lot of using the latest CSS3 technologies including flex and grid display, as well as dynamic resizing based on viewport size using Javascript.

Current Design Inspiration

After seeking out constructive criticism of my first rough layout from close friends (credits to Loukos Scheffer), I decided to change the look and colors of the website from my colorful tabs format to a cleaner, more modern style. I looked around at the current design language for personal websites using this article from The Muse, and took inspiration from various personal websites from the article, including Rhiannon Navin's site, Dr. Orestis Georgiou's site, and Nathaniel Koloc's site. Drawing inspiration from these websites, I eventually settled on minmalistic aesthetic for the colors and navigation bar.

Lessons Learnt

Through coding this website, I have learned that seeking constructive criticism is very important in order to generate new ideas and inspiration. Before receiving my friend's opinion, I had the feeling that something was wrong with the layout but I was not able to pinpoint it and determine what exactly was off. After discussing with my close friend, he was able to provide valuable input on the problems with the previous design, helping me form a broader view of the shortcomings of my website.

I have also gained the understanding that front-end development requires a good eye for visuals and design. I will seek to improve my artistic ability by understanding current industry practices, reading popular design blogs and most importantly, making my own projects to practice applying the knowledge I have gained from others.