Learning responsive layout design
This case study is about a visual design project while studying at General Assembly’s UXDI remote course. For this week our instructor gave us a brief to redesign a charity’s website.
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 world in which the clothes we produce, consume and wear
do not harm people or planet.” — Traid’s Vision Statement
The pages I am going to redesign are the home-page and their store locator page.
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.
Next, I turned these words into phrases which will help me to better understand the meaning and the things they also definitely should not be representing.
Mood-board
A mood-board is a representational collage of inspirations and imagery, and it can be about an idea or feeling.
I created this mood-board to find inspiration for my designs especially to create my colour scheme for their new redesign.
Key points from my mood-board:
- the visual elements of red bricks in an industrial building, because a lot of Traid shops have bricked walls in their shop interior — it reminds me of warehouse-like aesthetics
- 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
From the mood-board colour inspirations, I came up with a final colour palette that I thought would represent the new values very well.
Typography decision
After playing around with fonts for a bit and using Google fonts to pair up suitable ones together, I decided on these 3 main fonts.
Caladea will be used more as a decorative slogan font and the header will be Crete Round. I chose them because I thought they contrast in a complimenting way with the body font which is Poppins. Poppins is a san-serif font which I think is better for reading accessibility as it’s clearer and easier on the eye to scan through.
When choosing the fonts I took inspiration from Traid’s logo. I liked the rounding corners and the circular fonts used in there.
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.
Here are some pictures that I thought I really liked the look of — from the blocks of colours in them.
With these ideas in mind, I drew out some wireframes to base my idea around the visual concept.
I turned the sketches into digital wireframes and also included designs for my second page. I really enjoyed the collage type layout and also the brick-like blocks which are the store selector buttons on my second page, because they remind me of Traid shop interiors and I think it is visually more appealing to look at compared to a list of shop locations.
Adding colour to the wireframes
I picked out where I think the colours from the palette I introduced earlier to go.
After adding the colour I then filled up the designs with the fonts I chose.
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
I used Zeroheight to document my style guide. This is the first time I used it so I am still currently learning and maybe doing some things incorrectly! However, I also have a style guide which I started first on Figma, then transferred the data into Zeroheight in case anything went wrong.
Link to the style guide
https://zeroheight.com/0952ce342
Key Learnings
Some things I learnt about documentation:
- it is better to start documentation while doing the project because it is quicker and keeps your designs consistent
- 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
Thank you for persevering to this point! Please consider leaving a like if you enjoyed what you read, learned something new, or simply scrolled to the bottom of the page!
You can read about other projects I’ve worked on here in Medium or you can view them in my portfolio!
