Project Overview

Client: Emma Mullender
Sector: Art, Upholstery, Interiors
MUT Roles: Design, Development
Project Time: 3 years

Emma works as an artist, interior stylist, and upholsterer. She produces collage and assemblage artwork, practices traditional and modern upholstery, and undertakes a host of interior styling projects. She also writes blog articles.

Emma approached me to help her with the design and development of her site, and also required a logo to represent her brand.

Design

Design work began with the logo. (Read more about creating Emma's logo)

The logo design with the vertical and horizontal lines is repeated in the design of the website. The content flow of the site is arranged in 3 columns (for narrow devices there are 2 columns), which is bordered by fixed columns on either side. These fixed columns hold the logo, social media links, menu, and a contact button call-to-action.

Elements can be created to span columns (via CSS classes), as well as on-scroll to either scroll faster or slower. These parallax effects are created using a JavaScript library called ScrollMagic. This was implemented to create interest as well as attempting to create a diagonal flow in conjunction with the vertical and horizontal aspects of the design.

Development

Emma creates a lot of content and wished to update her own site. With this in mind, the website was built with Wordpress, creating a bespoke theme. Other technologies used include ScrollMagic and GSAP.

Style Guide & Wiki

Wordpress updates can at times be tricky, especially when it comes to creating design elements, for example, content spanning multiple columns. This requires adding CSS classes to block elements. In order to make this possible a separate Style Guide and Wiki site was created (in Wordpress). This provides Emma with detailed instructions on how to update her site.

Business Card

Using one of Emma's self-portrait artworks her business card was designed.

Live Website iframe