Responsive Portfolio Site
Project Overview
In order to showcase and share my design capabilities with industry leaders, other creatives and potential employers/collaborators, I developed a portfolio site using HTML, CSS and JavaScript programming languages.
The site highlights all of my design projects, so that prospective clients can gain a sense of my design style and personality, to ensure it aligns with their design needs.
The Problem
I lacked an online presence/platform to showcase my design work, for future collaborations.
The Solution
To design a portfolio website, with all my design projects listed, where prospective employers, clients and colleagues could browse my work fluidly.
This project also allowed me to showcase my frontend design skills, utilising HTML, CSS and JavaScript programming languages, to ensure a clean design for my portfolio website was adhered to, at all times.
The Design Process
I followed four key design phases, in order to a develop a user-centric solution to my problem.
Discover
Research
During my research phase, I started off by looking at other portfolio sites to gain some inspiration and to gauge what worked well and what was essential for my portfolio site to succeed. Below are some of my favourite examples.
I then went on to learn about the basic coding skills that would be required to create the frontend of my portfolio site.
Define
User Goals
To define what was essential for the success of my site, I looked at user goals. I wanted easy navigation of my portfolio site and wanted users to be able to gain an understanding of my design style, experience and background, without too much discovery or effort.
I wanted the style of the site to be appealing, with bold imagery, a calming tone and a clean design to ensure a pleasant, user-focused experience. The colour palette and typography, in the image below, were what I chose for the site.
I also opted for a simple navigation that included a Projects, About and Contact section, to further enhance a simplified user experience.
Develop
Front-End Development
During the development phase, after learning how to code by way of HTML, CSS and JavaScript programming languages, I began bringing my portfolio design to life, in the virtual world.
With the emphasis on a mobile-first approach, I went on to use the VScode editor, paired with my understanding of HTML, to create a basic structure for my portfolio website. I was then able to add to each page progressively, by way of adding in content, via headings, paragraphs and images.
I then went on to use the stylings of CSS, to ensure that my design was responsive across mobile, tablet and desktop devices and that it created a calming and friendly feel for my site.
Finally, I employed the help of JavaScript to enhance my responsive design further, with the addition of a hamburger menu for mobile devices. Below is a snippet of my HTML code, using the VScode editor.
Test
Usability Testing and Results
Post development, I went on to perform usability testing with five users, across different browsers and devices, in order to test the responsive nature of my portfolio site. My target users were in the range of 39-50 years of age.
My users were given four tasks to complete. I then went on to analyse the results according to the Nielsen scale below:
- From my findings, I followed through to implement critical changes such as making my contact information more prominent, moving my resume to my skills section and making my text more concise for readers.
- I am yet to refine my design further to add links from my images.
Deliver
Code Validation and Cross-Browser Testing
Before my final site could be delivered, I went on to use code validation, via the W3C validator and linters, to ensure clean, good quality code was present. I then followed through with accessibility testing to ensure the guidelines were addressed. From this, I found that I had to darken my colour palette in order to meet the required contrast guidelines.
During my final stage of the design process, prior to delivery, I tested my site across all major modern browsers (Chrome, Edge, Safari and Firefox), using BrowserStack. I did this for mobile, tablet and desktop devices, to ensure a smooth user experience for all.
Launch of Responsive Design
Once all the design issues were resolved and my site was clear for launch, I transferred it to GitHub pages, as a temporary home, for potential employers to view my work on. I am still working on finding a more permanent solution for the site that aligns more closely with my portfolio needs.
Challenges and Solutions
The biggest challenge for me during the creation of my portfolio site, was learning how to code from scratch and then being able to apply that extensive volume of information, in order to create a minimalistic final product. I found myself having to go over the content a few times, in order to fully grasp the coding process practically and then be able to apply it to my portfolio site, correctly.
Another hard undertaking was pairing back the creative designs I had in my head and being able to balance that with the more simplistic variations that was achievable by a frontend coding novice. Luckily, I was able to find just the right balance of creativity (using bold imagery), to still keep the design fun, friendly and clean.
This project has reminded me of the essential nature of regular testing. In the coding world, if you do not test often, your mistakes get lost down a code wormhole. I have thus realised that testing (using Google Chrome inspect), after implementation of each new feature is paramount, as it saves you crucial time in the long run.
Future Iterations
I will continue working on my portfolio site to further refine the design and layout, especially as new projects are added. I will also incorporate my other project pages and a contact form to make it fully functional.
In the future, I also wish to add in more animation examples, on my home page, to further highlight my frontend coding skills.
Once I am fully satisfied with the functionality of my site, I will find a more permanent home for it to be hosted on. I am certain my portfolio site will continue to evolve in a positive direction, as my experience in the industry grows, further.