Portfolio Web Design

Portfolio Web Design

I hand-coded this portfolio website using HTML and CSS. I will use this site to showcase my work, build my online presence, grow my skills, and create opportunities for internships, work experience, and future employment.




The Brief

To design and build an online identity that showcases your portfolio while considering your target audience, including potential employers. The site should reflect your creative identity, feature accessible navigation and interactive elements, and provide a curated user experience.



What was my starting point?

I started this project by looking at portfolio websites from past students, industry designers and design agencies to get a grasp of how graphic designers tend to present themselves and their work.

I took into consideration what Alice said about not over-branding and instead presenting yourself as a “brand”, so looking at students' websites, such as Nayanika Sengupta's and Ciara Seviour’s, was extremely helpful.

I also analysed their structure, layer, and content, as both of their websites were the ones I found the most visually engaging and easy to navigate.

Furthermore, I took into account all the useful advice and guidance we received from Abigail Medd and Charnah Bradley from Battenhall about how to create a website.

Presentation by Battenhall on web design



Who is my target audience?

Establishing my target audience was key to designing a portfolio that meets industry standards. Insights from Luke Bonner and Stephen Flagg at Eleven Miles, Dan Bacon, and Tim Varlow highlighted the importance of showcasing both personality and process, as agencies value the journey behind each project.

With this in mind, I aimed to present myself professionally while ensuring my portfolio feels engaging and authentic, allowing agencies to envision me as part of their team.

Eleven Miles
Studio visit to Eleven Miles, Bournemouth



Userflow and structure

I took the perspective of my target audience and created a user flow to anticipate how they would navigate my website, ensuring the experience is both intuitive and engaging. I wanted to ensure that everything flows seamlessly and follows a natural progression.

Before I started planning how my website would look, I decided to plan its structure to make sure it could be easily navigated. I created a simple structure on Miro; this was the base of my entire website.

Planning website structure on Miro



Wireframing and layouts

After creating a basic structure for my website, I drew some rough wireframes of different pages on my site and did a few different versions of each one.

This was an very important step, as Charnah Bardley explained that wireframing gives you “the opportunity to bring your developed sketches to life” and “outline key components for your prototypes.”

Building on these initial ideas, I experimented with various layouts and developed prototypes for each page. I used Adobe Illustrator and Figma to create the designs, then gathered feedback from peers to refine the layouts based on their insights and opinions.

Project layouts
Wireframe planning on Illustrator

Main Page Layouts
Rough Wireframe Main Pages
Rough wireframes of main pages
Rough Wireframe
Rough wireframes of project pages



Personal branding

Deciding how to present myself was a challenge, as my style, interests, and aspirations have evolved throughout the course. However, my passion for design has remained constant, and I wanted my branding to reflect both this and my interests.

Reading Renee Fleck’s “The Graphic Designer's Guide to a Strong Personal Brand” helped me define what makes me unique as a designer.

Inspired by my Spanish heritage, I incorporated design elements and a complementary color palette that reflect my cultural admiration while maintaining a balanced, cohesive look.

Moodboards for branding



Logo and assets

I incorporated Andalusian tiles, a flamenco fan, and an olive branch to reflect my Spanish heritage (and the common dream of every Spanish girl to become a flamenco dancer). I also included a teacup representing my British background and love for tea, alongside a tulip, symbolising rebirth, capturing my journey into graphic design.

These elements are arranged within a crest, inspired by my passion for football, creating a unique and personal representation of my identity.

My Logo



Colour palette

I selected a warm-toned palette that reflects my calm personality and is also inspired by the tropical climate of the place I grew up.

The palette was designed to allow the other elements of the design to stand out and shine.




Typography

For my headings, I chose “Chulapa,” a font created by Joan Carles Casasín and Pablo Gámez, which draws inspiration from the typography on Madrid’s street signs designed by Ruiz de Luna.

For body text, I selected “Montserrat,” a clean and easy-to-read san-serif font that ensures clarity and legibility.

“Chulapa” captures attention while paying homage to my Spanish heritage, while “Montserrat” offers a balance of readability and accessibility.




Accessibility

“It's reported that between 18-50% of the creative industry are neurodivergent, for context, in the general population, it's only around 15-20%” (Grant, 2024).

Understanding my target audience and recognising that a significant portion of it may be neurodivergent is essential for designing an engaging and accessible website. This highlights the importance of ensuring that my website is easy to read and navigate for all users.

I selected a colour-blind and neurodivergent-friendly colour palette.

Later in the process, when I began coding, I made sure to include alternate text to improve accessibility for screen reader users.

Testing contrast in Adobe Colours



Sustainability

Throughout this project, I made a conscious effort to ensure my website was as sustainable as possible by minimising file sizes, optimising images and videos to improve page load times.

My website still has a lot of room for improvement to become more sustainable. As I continue refining it, I will further research sustainable web practices, improve my coding to be as clean and efficient as possible, and reduce my page weight.




Learning to code

To support my learning, I followed Mark's suggestion to complete exercises from FreeCodeCamp. Additionally, I started the 5-Day Coding Challenge by the Code Institute to better understand coding.

These resources helped me strengthen my understanding of HTML, but I still struggled with CSS. Attending the workshops with Mark was essential in developing the skills needed to successfully create this website.

During this project, I used VS Code for my coding and used Prettier, as suggested by Nayanika Sengupta, to check for any errors, as well as FireFox Developer.

Practising coding on freeCodeCamp



Rough Wireframe Main Pages
Coding using VS Code
idk
Checking code using Fire Fox Developer



Using grids

To structure my website as planned in my wireframe sketches and prototypes, I used CodePen to learn and experiment with grid layouts.

While initially challenging, continuous practice and trial and error helped me better understand the concept and use them effectively.





User testing

During the user testing session, I received feedback about my layout for my “about me” page, as the image was quite big and taking over the page.

The feedback on my layouts, navigation, visuals, and branding were very positive.

Using this feedback, I made sure to make the improvements, as well as experimenting with navigation tools and adding in bibliographies.

User testing



Main Page Layouts

Critical Reflection

Designing and developing my portfolio website was an experience that not only allowed me to develop technical skills in HTML and CSS, but also deepened my understanding of user experience, accessibility, and personal branding. This project challenged me to create a platform that effectively showcases my work while reflecting my creative identity and professional aspirations.

Defining the target audience for my website was crucial and insights from professionals like Luke Bonner, Stephen Flagg, Dan Bacon, and Tim Varlow highlighted the importance of showcasing personality and process. This influenced my approach, ensuring my portfolio was not just a collection of work but a narrative of my journey as a designer.

Structuring and wireframing played a key role in shaping the user experience. Mapping out user flows on Miro and sketching wireframes helped me anticipate navigation patterns and create a seamless flow. Charnah Bardley’s insights on wireframing reinforced its importance in refining layouts, while feedback from peers helped improve my designs.

Inspired by Renee Fleck’s guide on personal branding, I combined elements of my Spanish heritage with my interests and hobbies. These, alongside a warm color palette and carefully chosen typography, helped me design a cohesive identity that balances professionalism and personality.

Furthermore, accessibility was a priority throughout this process. Understanding the high prevalence of neurodivergence in the creative industry, I made conscious design choices, including a neurodivergent-friendly colour palette, legible typography, and alt text for screen readers.

Learning to code was challenging, especially when it came to CSS and grids. Practicing with FreeCodeCamp, the 5-Day Coding Challenge, and workshops with Mark helped me build confidence, while experimenting with grids on CodePen improved my understanding of layouts, allowing me to execute my wireframe plans to the best of my abilities.

User testing was crucial to refining my website. Feedback from peers on my “about me” page led to adjustments that improved the balance of text and visuals, resulting in a more structured and visually engaging layout.

Overall, this project pushed me out of my comfort zone, but with the support of tutors and several online resources, I was able to merge newly developed technical skills with creative expression. Beyond building a functional website, I gained valuable insights into user-centered design, accessibility, and branding. Moving forward, I will continue refining my portfolio, ensuring it evolves alongside my skills and career aspirations.


Bibliography

  1. Chulapa (2019) Diario Madrid [Online]. Available at: https://diario.madrid.es/chulapa/ [Accessed: 25th February 2025].
  2. Color Psychology in Branding: The Persuasive Power of Color (n.d.) Ignyte [Online]. Available at: https://www.ignytebrands.com/the-psychology-of-color-in-branding/ [Accessed: 23rd February 2025].
  3. Colour Psychology in Marketing: Choosing the Right Palette (2024) Adobe [Online]. Available at: https://www.adobe.com/uk/express/learn/blog/colour-psychology-in-marketing#how-to-use-colour-psychology-in-your-branding-and-marketing [Accessed: 23rd February 2025].
  4. Colour theory and its impact on web design (2024) The Ad Firm [Online]. Available at: https://www.theadfirm.net/color-theory-and-its-impact-on-web-design/ [Accessed: 23rd February 2025].
  5. Creating a dyslexia friendly workplace (n.d.) British Dyslexia Association [Online]. Available at: https://www.bdadyslexia.org.uk/advice/employers/creating-a-dyslexia-friendly-workplace/dyslexia-friendly-style-guide [Accessed: 23rd February 2025].
  6. Designing for Neurodivergent Audiences (2022) Nightingale [Online]. Available at: https://nightingaledvs.com/designing-for-neurodivergent-audiences/ [Accessed: 23rd February 2025].
  7. Freeman C. & Morris B. (n.d.) Written evidence submitted by Charles Freeman and Becki Morris. UK Parliament [Online]. Available at: https://committees.parliament.uk/writtenevidence/6613/pdf/ [Accessed: 23rd February 2025].
  8. How To Strategically Use Colour In Website Design (n.d.) Flux Academy [Online]. Available at: https://www.flux-academy.com/blog/how-to-strategically-use-color-in-website-design [Accessed: 23rd February 2025].
  9. How to optimise your images for the web (n.d.) Adobe [Online]. Available at: https://www.adobe.com/uk/creativecloud/photography/discover/image-optimisation.html [Accessed: 29th February 2025].
  10. Neurodivergent creatives need more than a mentor (2024) LinkedIn [Online]. Available at: https://www.linkedin.com/pulse/neurodivergent-creatives-need-more-than-mentor-tyla-grant-gagye/ [Accessed: 23rd February 2025].
  11. The Graphic Designer’s Guide to a Strong Personal Brand (2021) Dribble [Online]. Available at: https://dribbble.com/resources/career/personal-branding-guide-graphic-designers [Accessed: 25th February 2025].
  12. The Power of Color Psychology in Web Design (2024) Medium [Online]. Available at: https://cosmicostudios.medium.com/the-power-of-color-psychology-in-web-design-b798e956797a [Accessed: 23rd February 2025].
  13. What is sustainable web design? (n.d.) Sustainable Web Design [Online]. Available at: https://sustainablewebdesign.org [Accessed: 3rd March 2025].




More projects:


meaningful description of image here
meaningful description of image here
meaningful description of image here