ClickCease

Website Development for Plum Studio

The website for Plum Studio was a fun design to build. The home page is a series of grids with gold borders, and the images are offset to be outside of the border.

To achieve this effect we used negative margins on the bottom and left of the images, but this puts the images on top of the border if we were to use a regular border which is not the effect that we were going for. To create the borders, we used an ::after pseudo element which is absolutely positioned around the element that wraps each grid item.

There is also a lot of vertical text. Rotating the headings by 90 degrees wouldn’t work, as this would take the heading out of the document flow, and text that needs to wrap would end out outside of the grid. Instead we used a feature commonly used in Chinese and Japanese websites — vertical writing mode. In these countries, text is vertical starting from the right and moving to the left — this is exactly what we were trying to achieve for our headings.

For the typography of the site , we used the same font used in their logo — Geo Sans. As the name suggests, it’s a geometric sans serif font, it really helps make the design stand out and look professional — a good typeface can feel like cheating sometimes, it really does make a big difference.

Colour Pallete

  • #CD9E56

  • #4A5568

  • #FFFFFF

Applications used

React

Tailwind

Gatsby

GraphQL

Graphic Design

We were approached by Luke, the owner and Carl, the site manager of Morr Homes and Projects, to update and rebrand their logo. They wanted to keep the same style of house and colour but just with a modern feel...

Phiranno Designs and the team have created an amazing website for my business. User friendly, appealing and runs perfectly in mobile use. Graphic design work is top notch 👌” EMMA BUXTON - SALON OWNER

Work with us on your next design project

Every client is unique, but our objective has always remained the same. We are excited that you want to work with us. Let’s make something great together! Fill out the form or give us a call today.

Get a quote