By clicking “Accept”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Privacy Policy for more information.
Web Design
Web Development
Custom Code

Communications Specialist

A simple portfolio site with an integrated CMS system for managing projects.

Client Project
Rachel O'Brien is a communication specialist who wanted a way to display her work. It was important that each project had a similar layout but also had the flexibility to ncorporate different types of content such as videos, text and graphics.


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.


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.



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.


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.



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.
Previous Project
Next Project
You're all caught up.
There are no more recent projects
That's everything.
There are no more projects.

Need a


Let's talk.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.