From Concept to Code: Developing An Interactive Design Portfolio
PROJECT OVERVIEW
My portfolio project goals include showcasing my skills, to demonstrate design thinking, and ensuring a seamless user experience through coding. This combination will create a polished and professional portfolio that aims to leave a lasting impression.
PROBLEM:
As a UX/UI Designer, Graphic Designer, and Frontend Developer, I need to create an impressive portfolio that showcases my diverse skills and expertise to both hiring managers and prospective clients. I must address accessibility, responsive design, and storytelling to stand out from other designers.
SOLUTION:
To overcome these challenges, I will come up with a design and code a one-page portfolio webpage using HTML, CSS, and JavaScript. I will prioritise accessibility, responsiveness, and strategic content placement to capture the stakeholders’ attention. By incorporating storytelling techniques and implementing Google Analytics, I will be able to effectively present my work and measure portfolio success.
MY ROLE:
User Research, Interaction Design, Sketching, Wireframing, Prototyping, and Coding
TOOLS:
I utilised: Figma, Visual Studio Code, GitHub, InVision, Zoom, Google Drive, HTML, CSS, Bootstrap, JavaScript and WordPress
PROJECT DURATION:
July 01, 2024 – July 31, 2024
4 weeks
RESEARCH
During the research phase, I started by listing down a few key objectives:
- Planning a 120-Day Action Plan and Career Prep: I started off by creating a detailed 120-day plan to make myself ready for the market. This involved researching industry trends, understanding the requirements of the job, and finding out ways to develop my portfolio to ensure it’s presented in the best way possible. You can view my career goals below in more detail.
- Moodboard and Evaluating UX/UI Portfolios: To get inspiration, I put together a moodboard where I collected a variety of different visuals, colours and layouts that inspired me. I also observed the portfolios of experienced designers to see what works well. I found some that gave me ideas on how I wanted to build my portfolio website. This helped me come up with an exact idea of how I wanted to present my portfolio.
- Content Inventory for the Online Portfolio: I took inventory of all the content I wanted to include in my online portfolio. This included case studies, project descriptions, an About Me section, my past experience and contact details. It was important to have everything organised, cohesive, and visually appealing.
By completing these objectives during my initial research, I set a strong foundation for building the very portfolio you’re seeing on my website. It allowed me to showcase my skills, experiences, and design capabilities in a comprehensive and impressive way.
WIREFRAMING
LOW-FIDELITY WIREFRAMES
When designing my low-fidelity wireframes, I gathered inspiration from the layouts I really liked in the example portfolios I researched. I also wanted to ensure that my wireframes corresponded with those visually appealing designs. By incorporating elements such as clean typography, content sections that are organised well, and intuitive navigation, I aimed to create a strong visual impact on my target users.
It was important for me to consider the balance between showcasing my unique style and branding whilst also adhering to the best practices observed in the design portfolios I studied. This approach ensured that my wireframes not only conveyed a professional and polished look but also aligned with my personal aesthetic vision for a visually captivating portfolio.
Mobile Wireframes
Desktop Wireframes
STYLE GUIDE
I developed a style guide for my website and portfolio before constructing the high-fidelity prototype.
HIGH FIDELITY WIREFRAMES
To further build on my low-fidelity wireframes and make them high-fidelity, I added my style guide elements to create a more professional look. I made sure to use consistent colours and apply a colour palette, typography, and other visual elements consistently throughout the wireframes. By doing this, I created a cohesive design that reflects my personal brand and design style that I want to convey. The style guide elements helped improve my wireframes and bring the webpage to life, giving it a more refined and visually appealing but professional appearance.
DEVELOPING THE CODE
Annotations for the code
I annotated my high fidelity wireframes with coding annotations, keeping in mind the future development of my website. By adding the coding annotations, I was prepared for the implementation phase. I identified and labelled different elements and functionalities within the wireframes, making notes on the specific coding techniques and technologies that would be required to bring my vision to life. This process helped me visualise the development process, ensuring a smooth transition from the design phase to the implementation phase for the construction of the website.
WEBSITE DEVELOPMENT
Learning HTML, CSS, JavaScript, jQuery and Bootstrap was a transformative experience for my web development learning. With HTML, I learned how to structure and organise the content of my webpages with code. CSS allowed me to work with the creative aspects by adding in styles to the design. JavaScript helped with the implementation of interactive features and dynamic functionality. Utilising the bootstrap framework streamlined the process of creating a responsive layout, ensuring that the portfolio looks good on the mobile device as well as the desktop. Mastering the technologies allowed me to create a visually appealing and engaging webpage that effectively showcased my portfolio and captivated visitors.
You can see some of the code for my portfolio page.
Using Visual Studio code, HTML allowed me to build a solid foundation for the website and CSS allowed me to create a visually appealing version of the contents. I used JavaScript to enhance the visual aspects and make the webpage more interactive by introducing a ‘return to top’ button that is fixed on the webpage and hovers above, giving the user the option to quickly scroll back to the top. With Bootstrap, I was able to optimise spacing, accessibility and create a hamburger menu for the mobile version of the webpage. Therefore, creating a seamless layout across different device sizes and enhancing the overall user experience.
By combining JavaScript, HTML, CSS, jQuery and Bootstrap, I successfully managed to transform my webpage into an interactive and visually appealing portfolio that effectively showcases all of my skills and experiences with design.
FINAL CODED PORTFOLIO WEBPAGE
Below you can find the link to the final coded website and the GitHub repo link to see the full code.
REFLECTION
Lessons Learned
Learning website development for my portfolio was a challenging experience but rewarding. It was crucial to stay organised and plan carefully for the coding aspects. The key for tackling this challenge was to break the tasks down into smaller manageable tasks that allowed me to focus and solve the problems more effectively. I also learnt the importance of balancing aesthetics and functionality in my portfolio and the importance of making a webpage visually appealing while also ensuring usability and accessibility. Navigating intuitively and adapting to different devices were key considerations for the website. A growth mindset was key here and it was important to view mistakes and challenges as learning opportunities for overcoming obstacles in the process. Exploring new technologies and coding practices sparked a desire to improve and expand my skillsets beyond graphic design. I also learnt the importance of using a style guide for website development and ensuring consistency across all platforms.
In summary, my coding and design experience with building this portfolio webpage taught me the importance of planning, balancing aesthetics and functionality, iterative improvement, attention to detail, collaboration, and maintaining a growth mindset. The lessons I’ve learnt from this journey will guide my future endeavours and foster continuous improvement as a Designer.
What’s Next?
Developing a portfolio through code showed me the value of iteration and continuous improvement. I had to accept that my initial attempts and first few iterations of the website were not perfect. I embraced feedback from peers and senior Designers. I also tested and made changes based on user feedback which helped me to refine and strengthen my portfolio.
I aim to continue to improve my portfolio by focusing on building up my case studies along with my skills in Design and Animation. For the Case Studies, I aim to enhance the layout, imagery, and typography to create a captivating storytelling experience. For my skills, I’ll use visual elements like progress bars to make it visually engaging and easy to understand. These adjustments will enhance the overall visual appearance and accessibility of my portfolio website, impressing prospective clients and potential employers.