Learning responsive layout design

The deliverables:

  • Entirely redesign the home-page and another page of choice
  • Show 3 different viewport sizes for the responsive design
  • Document a style-guide

Tools I used:

  • Figma, Adobe Colour, Coolors, Able plug-in, Zero Height, Google Fonts, Mood board

My roles:

UI Design, Visual Design, Brand Design

Introduction

For this project the charity I chose to redesign their website is called Traid. Traid is a London based charity that has a circular and sustainable approach by selling second-hand clothing and other items to raise funding and reduce the negative impact of fast fashion.

a picture of a traid shop’s storefront

Brand design & Research

In this project I was allowed to design a completely new brand for Traid, but because Traid’s brand values were already quite established I didn’t want to change their brand values too much. So instead I am going to evolve their brand design from my personal experience going into a Traid store.

Word association

Following from my previous visual design project I started the brand designing with word association practice. I came up with a list of words that I felt relevant to Traid’s brand values and weren’t far from what they currently represented, then I narrowed them down to 5 words. This activity will help me by pointing to the direction of the brand values I am aiming for Traid and to guide my design later on.

Mood-board

A mood-board is a representational collage of inspirations and imagery, and it can be about an idea or feeling.

  • bright, playful and earthy colours were very prominent in the different images I found, and it reminds me of Traid’s sustainable approach and it also reminds me of fields and organic cotton
  • I really liked the blocks of colours from the websites and app inspirations, because I feel like it draws the attention of the eye around the page

Colour palette decision

Typography decision

Analysing their current website

I went on their current website and drew a wireframe of the home-page and store locator contents. With this exercise, it was for me to see the hierarchy in which they place their elements and also what elements I think are critical in bringing to my redesign.

Designing

Sketches and low-fidelity wireframes

After analysing their website I knew what elements I needed to include in my redesign. Before I started sketching I looked back at my mood-board for inspiration.

Adding colour to the wireframes

I picked out where I think the colours from the palette I introduced earlier to go.

Final decision key points:

  • In the COVID related news banner, I made it a brick red colour, because I think it should stand out as it acts as an alert for the users
  • Added alternating colours to the store selector buttons to make it the page look lively and I thought it was a great way to play with the colour scheme I chose
  • The font sizing didn’t change too much through the different viewports, the difference was only by enlarging the fonts 2px larger than the small and medium viewports
  • Simplified the content information in the educational and project fund boxes in the home-page
  • I found it challenging to fill up the large viewport because there was so much white space, so I added a background which I thought helped solve this issue by bringing the elements together and the colours and shapes of the background compliment my design elements

Link to my final design

https://www.figma.com/proto/kGtG2GLMOdzla8lVy1v61q/week-2?node-id=71%3A602&scaling=min-zoomDocumenting my style guide

Link to the style guide

https://zeroheight.com/0952ce342

Key Learnings

Some things I learnt about documentation:

  • but planning for it can be hard sometimes (lots of hindsight and planning) and remembering to update the components and icons is vital or else it the design can become really messy
  • use spacers while designing and document them so other designers can see the layout because it’s important to stay organised so other people can follow without necessarily needing to ask many questions
  • to do accessibility tests whenever you choose/update a colour
  • have short descriptions by the style guide pages if possible to give a brief explanation or clarify any rules

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store