Communications Specialist
A simple portfolio site with an integrated CMS system for managing projects.
Challenge
To create a portfolio site that is sleek and compact and allows complex projects to be laid out in a clear and concise way. The client also wanted to ensure that a blog could be added at a later date.
Solution
The result is an elegant portfolio site with an integrated CMS which allows for client control. As the CMS structure is in place, it will be easy for the client to add a blog at a later stage.
Design
Typography
We used “PlayFair Display" for the main headings. This font takes its inspiration from the time of the enlightenment in the late 18th century. It’s a classical typeface with a modern feeling that gives an elegance to layouts. Our design team felt the decorative feminine characteristics of ‘PlayFair Display’ paired perfectly with the slightly more professional and corporate ‘Lato’ for the body text.
Colour Palette
Our client wanted a colourful website that didn’t detract from her work. The tone needed to be creative and professional. Turquoise historically symbolises good fortune and wisdom. We paired this with a coral background to bring a grounded earthy style to the site.
Features
Colourful and minimalist
We designed a simple, colour and minimalist page for Rachel. We included minimal content, displayed well.
CMS Design & Development
We designed a custom CMS and associated template so that Rachel can easily add, update or delete projects as she sees fit in the future. We also created a blog CMS that she can integrate whenever she needs to.
Project List
The homepage features a selection of Rachel's communication projects and when an individual project is hovered over, further details become visible via an overlay.
Project Details Page
The project details CMS template page displays each project elegantly and informatively. Each project also has a distinct colour theme which is customisable directly from the CMS. So while the page is based on a single template, there are super custom options that the client has direct control over.
Custom Favicon
We designed a custom signet favicon and webClip icon, based on the colour theme of the website.
Contact Form
A fully functioning contact form is integrated into the site and delivers user emails directly to Rachel's inbox.
Cookie Preference Manager & Privacy
We integrated a cookie preference manager to keep the site GDPR compliant. Users can select the type (if any) of cookies they are happy to accept. The preference manager remembers these cookies for repeated site visits. We also created a privacy policy specifically for this site.
responsivity
Responsivity
The site is fully responsive and functionality is consistent across a range of devices.
Mobile Devices
- Page flow is the same as on larger screens, except the layout is stacked vertically.
- The overlay on the projects is semi visible rather than only visible upon hover.
- The contact page is a stacked layout. (One field per line)
Tablet Devices
- Very similar layout to mobile.
- The overlay on the projects is semi visible rather than only visible upon hover.
- The contact form remains the same as on desktop.
Interactivity & Animations
Subtle Page Load Animation
The client just wanted to integrate a single, subtle page load animation, which we achieved using a mixture of native Webflow interactions and a custom GSAP character animation for the text.
Hover Effects
We added hover effects to a number of links and buttons throughout the site to elevate the user's enjoyment.
- The scroll down link has a hover effect applied to the arrow.
- The navbar links have a hover colour applied.
- The project pages have a hover overlay.
- The submit button has a lovely drop shadow when hovered over.
- The arrows attached to the social links move up diagonally to the right.
- The back button arrow likewise moves.
