ClickCease
Web Development

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.

Check it out right here.

What was created

Website

Applications used

React

Tailwind

Gatsby

GraphQL

Look at what we have been up to
@phirannodesigns.

Phiranno Designs.
Office Hours:
Monday to Friday 9am–5pm
Instagram
Facebook
@phirannodesigns