Creative
Nat's Portfolio

The goal of this project is to design a personal portfolio for Natalie using the brand assets she has already provided. The design process covered everything from the content architecture to the user interface, and the creative direction included the use of specific colors, typography, and front-end interactions/animations.

View Website

The client felt that her portfolio wasn't a reflection of who she truly was and WordPress didn't provide enough flexibility for her vision. As a brand strategist, she knew that her portfolio needed a distinct creative direction to stand out from the competition.

Design Process

Uncovering Client Goals: A Journey through Web Audits and Discovery Consultations.

At the start of this project, the primary focus was on understanding the needs and current situation of the client. This involved a thorough examination of her existing portfolio and identifying areas for improvement. By asking her several targeted questions, we were able to gain a deeper insight into her goals and aspirations, which helped us to identify the underlying problem. From there, clear objectives and success metrics were established to guide our efforts and ensure that we remained focused on achieving the desired outcome.

Web Audit and Objectives

Uncovering the Creative Direction: A Story

Once the underlying problems and objectives were identified, research was carried out to understand how various creative portfolio were designed in the market. By categorising them based on their unique creative direction, a few concepts were selectively compiled to not only draw inspirations from but also analyse how they communicate with their clients. This was crucial in helping me understand the key elements that contribute to a successful portfolio and how I could apply these principles to create a unique and impactful portfolio for my client.

Most Beautiful Websites Built On WebFlow


Crafting a Compelling Portfolio Design: A Narrative-Driven Design Approach

Once the portfolio narrative was agreed upon with the client, the next step was to create simple wireframes and a UI styling guide to begin the UI design process. In order to gather web assets and content, Figma was used as a platform. High fidelity UI was then designed with interactive element notes to explain the look and feel of the front-end development on WebFlow.

Styling guide based on existing client's assets
Layout structure and hi fidelity UI on Figma

Bringing Designs to Life: From Static to Interactive with WebFlow

A global style guide was set up on WebFlow before building the website to develop the designs. The development process started with the laptop dimensions of 1440px and extended to the mobile screen of 390px, ensuring its responsiveness and accuracy to the designs.

Development with WebFlow
Challenges
The primary obstacle faced during this project was aligning the client's creative direction with current market trends. To accomplish this, I had to justify certain design choices with a narrative and ensure that the client could envision the final product.

Daily Digest

If you share my belief in constantly striving to improve and be 1% better than yesterday, I would appreciate that you subscribe to my newsletter. I promise to only send relevant and valuable information and not to spam your inbox.

Let's Collaborate!

If you have a specific project or career opportunity in mind, let me know more about it and I'll see if I could be a good match.

Get In Touch