Project Overview
I designed and created a videography / content creation portfolio that reflected the client’s creative
style and would
effectively
reflect their work to potential employers. Since the client's budget was extremely limited and they didn't
need a website that
would be indexed in search engines, we decided to use a free Wix website to design and host their
professional portfolio.
Sections
- Color & Typography →
- Wix CMS Design →
- Content Writing →
This portfolio was built from scratch within one month, with all but the home page being created within 3
days. Its intuitive design allows viewers to easily navigate through the portfolio, finding the
videographer's top work within seconds.
Date
July 2024 (Full-Time)
Color & Typography.
Purple and pink stand out against the neutral tones of black and white backgrounds. Using these colors as
accents draws attention to important elements, making key details and sections easily noticeable and more
engaging. Additionally, these colors reflect creativity, sophistication, and approachability – traits necessary
for a videographer/content creator. This combination adds depth to create a contemporary, harmonious portfolio.
Similarly, Epilgoue is a clean, modern sans-serif font that is easy to read and provides a sleek, contemporary
look. Even at small sizes – like on a mobile device, Epilogue is clear due to its balanced letterforms. This
font includes a wide range of weights and styles, perfect for headings and paragraphs. Its simple but unique
characters add a touch of uniqueness to the modern design. Finally, the font is open-source, meaning it is free
for commercial use, which fits with the client’s budget.
Wix CMS Design.
Tap or click the image above to view it full size in a new tab.
As suggested by The Futur, I
created a stylescape for the client’s portfolio. I drew a significant amount of
inspiration from contemporary interior design to get a feeling for the mood and style that reflects the client's
vision. I researched similar portfolio styles to aid my design process, and I compiled all of my research,
inspiration, and brand identity components into one document.
Landing Page.
I initially designed the landing page on Figma.
However, the limitations of Wix features,
the evolution of my creative style, and my client’s opinion caused minor changes along the way. The final
design still
reflects the initial Figma design, but I believe that it became even better after implimenting it
on Wix.
To maintain the contemporary look, I used thin, straight lines to divide sections and border buttons. I left
a significant amount of white space to help the portfolio feel straightforward and clean, an important
characteristic for a working professional. As mentioned before, I also kept the color palette and typography
simple by only using black, white, an accent color, and one versatile font.
Microinteractions.
One of my favorite aspects of this portfolio was adding microinteractions. These additions elevated the
portfolio past “basic” and into the realm of “simple” design. The microinteractions add elegance and clarity
to the design while maintaining its uncluttered and clear style.
Microinteractions were added in the form of arrows, button hover interactions, and an image slideshow. For
example, when the text to the left of the arrow or the arrow itself was hovered over, the arrow would spin in
a circle and point up, letting the user know their mouse movement was perceived and a click would take them
elsewhere.
Content-Writing.
Tap or click the image above to view it full size in a new tab.
As a portfolio, this project included 50% designing and developing and 50% researching and writing. During
frequent meetings with the client, I got a deeper understanding of how their portfolio would look. I helped the
client narrow down her project choices to 11 short-form videos and 1 long-form video that would effectively
demonstrate her professional, in-demand skills.
Additionally, I inquired about information for each individual project, including date, role, and metrics. With
this information in mind, the client and I utilized ChatGPT for inspiration and as a thesaurus as we wrote the
project summaries for each project, ensuring her skills were highlighted and the project outcome was clear.
Custom Portfolio Pages.
One major challenge I faced was designing the portfolio pages. Initially, I planned to use the premade Wix
portfolio template to save time; however, the premade design did not allow any customizations for clarity like
adding bullet points or bold text. To solve this problem, I created a Wix page (instead of Wix project) for
each project. This allowed me to customize the design to add clarity and visual appeal.
While this solution took more time than I initially expected, I found it straightforward and time-effective
to create a template and copy it repeatedly, quickly producing new pages. This method meant I needed to
manually add “Previous” and “Next” buttons to navigate to other projects, requiring me to link to each
individual project over and over again and opening up more chances for error. In the end, I felt it was
beneficial for the client and user if I took the time to carefully link to each page on my customized
portfolio page, leading to a better user experience.
Project Results.
The end result was successful! In terms of usability, all links worked perfectly to navigate around the
portfolio with smooth performance. In terms of design, the contemporary, straightforward approach elevated the
portfolio style and
navigation, as well as my client’s professional image. I performed a user test with 4 users. Each user was able
to easily complete their tasks (e.g. go to the video linked in the project, find the contact page, etc.),
reflecting the success of the portfolio. I was later told the hiring manager personally complimented the
portfolio and its stellar user experience.✨
