Creating My Own Website

January 2025 | HTML & CSS | University Project

Brief: Create A Hand Coded Portfolio Website

Role: Graphic Designer & Coder

Tools: Adobe Illustrator, Figma, Visual Studio Code, Netlify

This portfolio website shown is built with HTML and CSS, designed to represent my creative identity and professional aspirations. It showcases my work, the story behind each piece, and the design process that brings my ideas to life.

The goal is to create an engaging platform that not only reflects my personality but also attracts potential employers and clients. Through this project, I’ve deepened my understanding of UI and UX design while building a strong online presence to demonstrate my skills, creativity, and potential as a designer.

How Did I Prepare For The Design Process?

Before starting the design process, I built a strong foundation in coding through a Code Institute course on HTML, CSS, and JavaScript.

I also explored UI/UX principles by watching UX talks from 'Her UX Path, I Design Consulting' and studying how users interact with websites to create a user-friendly experience. To shape my portfolio, I analysed various designer websites, gaining insights into industry differences and best practices for the graphic design sector.

Portfolio reviews highlighted the importance of accessibility, engaging content, and balancing visuals with information. Additionally, Steve Krug’s book Don't Make Me Think reinforced key principles of usability and effective design.

Who Are My Target Audience?

My target audience includes potential clients and employers. I researched agency portfolios to understand common branding, collaboration methods, website structure, and presentation.

I noticed agencies often use minimalist black-and-white designs, while personal portfolios show more personality, which I aim to incorporate into my site. Watching YouTube portfolio reviews further revealed what captures attention, how portfolios are evaluated, and typical reviewer engagement.

How Did I Plan, Prototype, and Build?

To develop my website, I focused on planning and organisation, using Google Calendar, Excel, and Figma to manage my workload and keep all information in one place.

Workshops on website layout and multiple audits of design agency sites helped me understand structure, usability, and accessibility.

During wireframing and prototyping, I experimented with colour, illustrations, and layout in Illustrator and Figma, testing three style options and different ways to present content. This process allowed me to refine the narrative, visuals, and flow, creating a cohesive and engaging user experience that reflects my creative vision.

PLANNING MY WEBSITE

How Did I Balance Design and Accessibility?

focused on designing a website that balances what I could realistically code with accessibility. Feedback from peers and mentors guided choices in hierarchy, typography, colour palettes, and alt tags, ensuring the site is functional, visually appealing, and inclusive. My goal was to showcase the final product while telling the story of the design process.

Sustainability was also a priority. Using Website Carbon, I assessed energy use and optimized images and videos to reduce impact. By combining accessibility, sustainability, and thoughtful design, the website reflects my values as a designer.

Who Am I?

When creating my brand identity, my goal was to showcase both who I am and the designer I aspire to be. To guide me through this process, I referenced Creating a Successful Graphic Design Portfolio by Irina Lee.

Based on my research prior to this project, I understood many companies and studios prefer a more minimalist approach to portfolio design, so I aimed for a balance of creativity and simplicity, while still having my own personal touch.

BRAND IDENTITY

How Did I Use Colour and Type?

I designed my website to showcase my individuality, personal design interests, and work. The colour palette balances clean and vibrant tones to create a professional yet approachable feel, evoking fun, excitement, and energy while remaining user-friendly and inclusive.

Drawing on colour psychology and design principles from Colour Design Workbook by Sean Adams, I carefully selected colours for accessibility. I chose Comfortaa as the typeface for its clear letter spacing and high readability, offering a professional look while supporting dyslexic users and individuals with visual impairments.

How Did I Learn to Code My Website?

Although I had no prior coding experience, I was eager to explore website design and online presentation. I wrote code using Visual Studio Code, experimenting on CodePen and Netlify, and used Firefox Developer Tools to debug issues. CSS Grid, introduced in a workshop by Mark Osborne, helped with content layout, and I focused on accessibility by adding alt tags and screen reader text. I tested the site across browsers and devices, and conducted user testing to ensure a fully user-friendly experience.

MAKING THE WEBSITE

What Do Others Think?

User testing was invaluable for evaluating my website’s effectiveness. Feedback on flow, branding, and visuals helped me refine the site, while tutor suggestions guided future improvements, such as enhancing interaction and adding more movement.

Finally, I hosted the site on Netlify and tested it across devices and browsers to ensure consistency.

PROJECT REFLECTION

Reflecting on this coding unit has been a rewarding experience. Before starting, I had no coding experience and wasn’t sure I’d enjoy it, but I found myself engaged in experimenting, problem-solving, and applying what I learned. Coding taught me the importance of planning, as sketching layouts and using Figma beforehand made development smoother and ensured effective user flow. Personal branding was also key, balancing creativity and professionalism to create a polished, purposeful portfolio.

Looking ahead, my plan was to keep my website updated and evolving with my skills, exploring motion and 3D elements and experimenting with tools like p5.js and Flexbox. However, after deciding that coding isn’t the area I want to focus on most, and following feedback on my portfolio, I chose a more sustainable approach using Wix. This allows me to easily update content while maintaining a professional, accessible, and engaging portfolio.