Disclaimer
Client stopped responding upon template completion.
Linked site will contain placeholder and anonymised template data.
Details
Scope
Contract Work
Creator of design system
Full-site development from scratch
Client provided portfolio files
Role
Research
UX & UI design
Web Development
Tools
Figma
Figjam
VSCode
HTML
CSS
JS
Alpine
Research
Presentation as shown to Client
Note: presentation has been censored in places in order to protect the identity of the client.
Project Inspirations
The client's illustrative style was soft and nostalgic.
The goal was to highlight this style while retaining a degree of professionalism so that the site could be used in a variety of work applications.
The client also had created many narrative-based Twine (TODO: ADD LINK) games and wanted to highlight those.
With all this in mind, I looked towards visual novel games for UI inspiration.
Key Components
Highlighted Project Cards
These cards were designed to resemble a typical visual novel dialogue screen. Their unique look helps them to stand out.
Sticky Tabs
In the original CV, different works and their descriptions were listed in blue, graphic depictions of folders.
I decided to carry this idea through to the web portfolio, separating projects into their own "folders", with tabs that stuck to the top of the page as the user scrolled.
For longer works, like full articles and stories, this meant that the title and key actions such as "go back" remained visible at all times.
Icon Buttons
Buttons with large, round icons were added to resemble those from several handheld visual novel games.
These allow the user to determine what action will be performed at a glance, whilst balancing the aesthetics between professionalism and fun.
Screens
Figma Prototype Screens
Note: sections depicting the clients work have been blurred and censored.