Sculptor Sue

Branding / UI design / Development

Rethink
Keywords:

Brand, Visual design, Design for print, Digital Design, UI design, Front-end development, Database management

Reading time:

Less than 1 minute

Status:

Complete

Tools:
  • Pen & paper
  • Adobe Illustrator
  • Adobe XD
  • Wordpress
  • PHP
  • HTML/CSS/SCSS
  • Javascript
Tasks:
  • Branding / Logo design
  • Visual and interaction design
  • User interface design
  • Front-end Development
  • Database management

Introduction

Scene setting:

As a design consultant, my tasks was to design and develop a small website for a sculptor and jewellery designer. Along with the design a development of the website, my task was also to design a new logo.

Design discovery

Branding:

As part of the branding process the following steps were taken before the final concepts were presented to client:

  • Brainstorm logo concepts (pen & paper sketches)
  • Select best three
  • Recreate digital versions (in black & white only)
  • Present final three concepts to client
  • Decide on final concept
  • Make necessary refinements
  • Define colour palette
Logo design final concepts
Website Design:

As part of the design process, the following steps were taken before the designs were finalised:

  • Develop a site map based on the hierarchal order of importance
  • Develop a series of wireframes
  • Low to high fidelity designs presented to client and iterate based on client feedback
SS website map
Website high fidelity designs:

Low fidelity prototype was signed off before high fidelity designs were crafted.

SS High fidelity Website concepts
SS High fidelity Website concepts
SS High fidelity Website concepts
SS High fidelity Website concepts
Accessibility:

To ensure the design was accessible to all users, I ensured that the product complied with the industry's web content accessibility guidelines including:

  • Text size: large enough to be legible
  • Content: images and text are not cropped or outside the user's viewport
  • Contrast: ensure there is enough contrast ratio between the foreground and background of text
  • Responsive: ensure the product is accessible on different screen sizes
  • Hierarchy: ensure that the interface can be navigated using the keyboard.

Development

I hand coded the website using HTML, SCSS, Vanilla Javascript, PHP, and Wordpress. The website was built in a local environment before being migrated to a staging site on the client's live server where final changes were requested and signed off before launch.

HTML5
CSS 3
Sass SCSS
Javascript
PHP
Wordpress

Post launch: I provide ongoing maintenance of website and database and ensuring security measures and regular updates are performed.

Want more information? Get in touch.