item
item

CASE STUDY

Portfolio Website Project
Frontend Development

I completed this project as part of the Frontend Development for Designers Specialisation course for CareerFoundry. The course provides the foundation to understanding HTML, CSS and JavaScript over a period of 6 weeks.

View on GitHub

Objective

In order to broaden my skillset as a UX/UI Designer and be able to communicate my ideas to web developers in a comprehensive way, it was important for me to understand the basics of HTML, CSS and JavaScript.

Requirements

A portfolio website comprising of a Home page, an About page with access to a CV file, project pages, a responsive menu, and a contact section.

Process > Insights

With no prior experience of coding, it was important for me to approach this course methodically.

I started the project with the preparation of the files and content for the portfolio, making sure an adequate naming convention was applied. To this effect, I put together a style guide and compiled the text and images I would need for the project. Naming all my files appropriately is a method I apply in my work as a designer, so it made perfect sense to me to be just as meticulous when working on this project.

Style guide


Filing system


With the framework, style and content set up, I created a HTML file to start setting up the foundations of the website. I structured my HTML document to ensure particular elements could be styled at a later stage. Learning about Classes and ID’s was crucial in helping me understand the idea behind styling and manipulating elements within HTML. I also included images and created links between pages and sections.

I created a repository on GitHub and learnt how to write and name commits so I gained an understanding of how to take control over changes.

Following the style guide I had set up earlier on in the process, I created a CSS file and gradually gave the site its visual identity. I included media queries to ensure the website would be fully responsive and then added a JavaScript file so I could make the menu interactive.


Media queries

JavaScript file

User Testing > Iterations

With the portfolio site now built, I conducted a user test with 5 participants. The main goals here were to identify any pain points in the overall flow and navigation of the site and get an overview of the user experience in terms of aesthetics, accessibility, functionality and intuitivity.

I targeted participants aged between 25-55 with experience of the hiring process in their line of work so I could base my research on a tangible scenario the participants could relate to.

These testing sessions revealed the flow was intuitive and no major issues were raised as far as the navigation was concerned. However some smaller suggestions were made that I felt were worth considering as they would significantly enhance the accessibility credentials of the website:

I tweaked the HTML code to implement the CV in the menu


I also tweaked the CSS code to add more space between the social media icons in the footer


Illustration > SVG Animation

As I am currently working on developing my visual thinking skills, I’ve been focusing on illustration and saw this website project as a good opportunity to experiment on that a little. I decided to put my basic CSS skills into practice to try and animate a playful illustration I created.

This exercise allowed me to experiment with various keyframe animations, demonstrating how powerful and freeing CSS animation can be.
I settled for a simple blink and sink animation to inject a little personality to the page.

Keyframe code for animation


'Blink & Sink' animation


Code Quality >
Cross-Browser Testing

In order to standardise my code and ensure it was presented in the most readable way, I installed linter plugins and ran them to identify any misspellings, ambivalent syntax or lack of consistency in the code style. This helped me rectify some erroneous syntax and remove some superfluous

tags that had been left behind as I progressed through the exercises.

In addition to this, I ran the Beautify plugin to ensure the presentation was neat and guaranteed a comfortable read for any other individuals who may wish to familiarise themselves with my code.

Finally, I tested every page manually on different browsers to ensure everything ran smoothly. Testing on Firefox, Safari and Chrome highlighted no issues.

Publishing the Project

As I’ve already created my own portfolio website and would like to carry on experimenting with this particular project, I decided to publish it on GitHub Pages instead of my own domain. This way, I can continue to work on the project as I expand my frontend skills and try things out for practice. I see this project as a learning tool to allow me to experiment with my new skills.

Conclusion

As a new UX/UI Designer, it’s important to me to understand what goes on behind the scenes so this knowledge can instruct my work in the best possible way.

This project was a steep learning curve as I’m still getting to grips with the intricacies of the world of frontend development. JavaScript was particularly challenging for me as I believe more time and practice would be needed to grasp its full potential.

With this project, I gained a better understanding of the possibilities and limitations of frontend development. Knowledge of website structure, styling and interactivity now gives me a different perspective on digital products, which in turn will help me deliver robust design solutions and work better in a team.

Thank you for reading

GET IN TOUCH!

hello@gaellemonin.com

© 2021 Gaelle Monin
Made with Pixpa