WEB

Portfolio Design

Coding our own portfolio website.

UI/UX | Coding

Brief

Design and code our own portfolio website that showcases our work and skills.

Timeline

17th January 2025 ---> 14th February 2025

Skills

Visual Studio Code - Photoshop - Illustrator

The Process

User Flow Session

During one of our initial sessions for the web project, we were tasked with researching various websites and analysing their user flow. We explored a wide range of sites, including Pentagram, Landor, and several others.

Creating my User Flow

Drawing inspiration from the websites we researched, I created a simplified version of the user flow that would be more effective for my website.

Moodboarding

During my research, I explored various design agency websites and personal pages, examining their formatting and identifying what they did well. One aspect I particularly liked across all of them was the layout of the navigation bars.

Physical and Digital Wireframing

Creating my Website

Index page

For my index page, I wanted to display all the key information on a single page, with the only reason to leave being to view my work.

Colour Scheme

Typography

Coding

Creating the website was both enjoyable and time-consuming. It was challenging to stay organised, but I kept myself on track with numerous post-it notes laid out on my monitor.

Peer Review

My website was reviewed by my peers Millie and Ed, and also viewed by Claudia, Phoebe, and AJ. The peer reviews were incredibly helpful, providing valuable insight into what was working and what wasn't.

Reflection

Reflection

Creating my portfolio website was a successful process, and I believe my final outcome reflects that. I achieved this through thorough preparation and planning. To ensure I was well-equipped for the project, I watched numerous coding tutorials and attended all the coding workshops, which helped me build a solid understanding of coding.

I feel I have developed a well-structured, visually appealing website with efficiency in mind. My focus was on creating an intuitive navigation system to enhance user experience. Along the way, I encountered some challenges, the most significant being organising my code. However, I overcame this by implementing clear labelling and breaking my code into structured sections, which improved readability and maintainability.

Looking ahead, I am eager to continue developing my website by adding more projects and refining its design to keep it modern and engaging. I plan to experiment with new coding techniques, including JavaScript, to enhance functionality and improve my current code.

Back to Top

Bibliography

Battenhall.comAvailable from: https://www.battenhall.com/ (2025). Battenhall - Home.

Behance.netAvailable from: https://www.behance.net/gallery/211886919/Niki-Studio?tracking_source=for_you_logged_in_feed_recommended (2022). Behance [online]. [Accessed 13 March 2025].

Design BridgeAvailable from: https://www.designbridge.com/ (n.d.). Design Bridge.

Imagination.comAvailable from: https://imagination.com/ (2019). Global Brand Experience Agency | Imagination.

Landor.comAvailable from: https://landor.com/en/ (n.d.). Landor: World-leading brand specialists.

Pentagram (2019). Pentagram — The world’s largest independent design consultancy [online]. Available from: https://www.pentagram.com/.

Studio GlobalAvailable from: https://studioglobal.co.uk/ (2024). Studio Global.

The Chase Creative ConsultantsAvailable from: https://www.thechase.co.uk/work/ (2024). The Chase — Work.