Web Portfolio
Brief:
For this project I have been tasked to create my own portfolio website using HTML and CSS. To create an online platform that is visually engaging and easy to navigate, showcasing my work and design approach.
My focus is to design a portfolio that presents my personality, style and easy to navigate. Making it simple for viewer’s exploring my work - Focusing on layout, colours, and fonts to have a clean professional look.
Exploring Wireframe & Content:
During Mark’s wireframe and content workshop, in pairs we looked into creative industry’s websites to explore how they present themselves as a company and the skeletal framework of their websites.
This has allowed me to understand the standard wireframe structures within websites, and how content is organised to showcase work.
Layout of Website:
The layout of my portfolio website is designed to be clean, structured and user-friendly. I used a clear navigation system to help viewers explore my projects, with a grid and spacing to maintain visual balance. Each section is organised to showcase my design process, combining typography and imagery, creating an engaging experience that reflects my design style.
Chosen Font:
I’ve chosen to go for the Fraunces font from Google Fonts as it combines a classic and stylish look with a modern touch.
This will give my portfolio a personality while keeping it professional – Fraunces is flexible and unique, helping my work stand out while keeping the overall design clean.
Colour Schemes:
For the colour schemes of my website, I wanted to go for a sophisticated and warm aesthetic. This combination creates a balanced contrast between neutral and playfulness, creating a modern look to my portfolio.
User Testing:
For the final crit, I was able to get some feedback from my website through user-testing. Feedback such as changing header names and sizes, relinking some images that were lost, making contact page into links and completing the rest of the content on my portfolio.
Having the chance to do this allowed me to also have a look at how everyone else is doing for their portfolio websites.
Learning to Code:
Being introduced to FreeCodeCamp to understand the basics of HTML & CSS coding through lessons that make complex concepts easier.
Codepen.io has been a helpful tool for experimenting with code, grids and being able to see changes in real time.
Mark’s coding workshops have been very beneficial to me, offering hands-on support and feedback to connect design with coding. Building more knowledge and understanding of basic coding.
Web Portfolio
Reflection:
The web portfolio project has been challenging, although I gained somewhat of an understanding of both design and coding. Allowing me to create a website that showcases my work, ensuring my portfolio is user-friendly and structured.
Having an understanding on how wireframing works with organising content, influencing my approach to layout, navigation and content placement. This has helped me create a clean design that represents my style.
Font and colour choices played a role in my portfolio’s aesthetic, Fraunces as my typeface creates a modern look, while my colour scheme creates a warm aesthetic welcoming feel to my portfolio and help my work stand out.
User testing was important in refining my website, leading to receiving feedback on improvements needed for my portfolio. This process shows the importance of testing your website development especially from a different perspective.
Learning to code has been a struggle, but using resources like FreeCodeCamp and Codepen.io has been helpful making coding concepts understandable. Even support from the coding workshops from Mark have been beneficial in the making of my portfolio, as I was able to explore the different ways of coding and using grids.
Overall, this project helped me strengthen my knowledge on creating a portfolio through coding, refining my web design and branding skills. It is something I will take in and serves as a stepping stone to move forward in my creative career.
If I had an extra few days to work on this project; I would refine my pages, adding more personal work to showcase, and experiment with different code elements to boost my user-engagement.