Assignment 2;

Design System
User Interface Design (DCO20004)

Name: Riley Inglis

Class: Tuesday 11.30 am
Teacher: Diego Munoz Saez
 Table of contents
Introduction.................................3 Web fonts & headings....................10

Moodboard..................................4 Fall back fonts………………………11

Colour Palette..............................5 Font stacks/ Example.....................13

WCAG Colour contrast tests........6 Wireframes………………………….14

Page Brainstorming......................7 Design system components……….18

Page ranking & categorisation......8 Reflective Essay…………………….21

Site map........................................9 References…………………………..23

2
Introduction

The topic of this website is thrifting in melbourne, in

particular which thrift stores/op shops are the best to visit
with the site effectively acting as a guide.

As mentioned in Assignment 1, the primary purpose of

the website is to inform users about these thrift stores to
create a more efficient/enjoyable thrifting experience. As
a byproduct, the site will also promote the sustainable
fashion movement and encourage users to consider
pre-loved clothing over the current fast fashion trends.

3
 Moodboard
As my website acts as a guide
to thrifting for both new and
experienced thrifters, I wanted
to portray the warm and tender
feeling of pre-loved clothes and
the joy of finding hidden gems
in picture form. The pictures all
commonly utilise warm yet
muted colours to portray the
feeling of warmly loved antique
and second hand goods.

Utilising these colours in my

website should act as
encouragement for users to
participate in the sustainable
fashion movement, by playing
on these emotions.
4
 Colour Palette

#0E425A #CD9459 #faf8ec #402e1b #DFB9A9 #C0C6A5

headings/ headings/ background/ text/ dark decorative/ UI decorative/ UI

subheadings subheadings on text on dark bg background elements elements
dark background

For my colour palette I decided to primarily use warm and muted colours similarly to my moodboard to
convey a sense of warmness yet and pre-loved quality that items from thrift stores represent.

● An off white and dark brown act as both background colours and text against each other.
● A warm blue and burnt orange act as headings/subheadings on their respective background
colours.
● A warm pink and sage green are used as additional UI elements & decoration.
5
 WCAG
Colour Contrast tests
My light text and dark background
combination and dark text and light
background combinations both
passed the WCAG contrast tests.

Additionally I tested the headings/

subheadings and decorative
colours against the backgrounds I
intended to use them for, with all
passing.

6
 Page Brainstorming

● Home Page ● Map This list of potential web pages, are pages that
● FAQ ● Gallery I believe would be most important to have on
● About Us ● What’s on/ my site.
● Contact Us events
● Locations ● More info This includes the basic elements of all
● Fitzroy websites such as a home page, FAQ, about
● Brunswick us, contact us etc., as well as more specific
● South Yarra pages. This includes ‘locations’ which would
● Hawthorn detail all the main locations in which thrift
● Richmond stores are present, as well as web pages for
● CBD each location detailing the thrift stores that are
in these areas (the core purpose of the site).

7
 Page ranking & categorisation
In terms of page ranking, the General Info Miscellaneous
most important pages for users 1. Home Page 12. Gallery
will be the home page along with 2. Locations 13. About Us ● Home Page ● Gallery
the locations in which thrift store 3. Map 14. Contact Us ● FAQ ● What’s on/
can be found, as this is the 4. Fitzroy 15. More info ● About Us events
primary purpose of the site and
5. Brunswick ● Contact Us
fulfills both the user and site
goals. Secondary info then 6. South Yarra
7. Hawthorn Thrift stores Footer
follows this in importance.
8. Richmond ● Locations ● More info
For page categorisation, all 9. CBD ● Map links
pages can be grouped in 3 main 10. FAQ ● Fitzroy
categories along with a footer.
11. What’s on/ ● Brunswick
This includes general info, the ● South Yarra
thrift stores themselves, events
● Hawthorn
miscellaneous info and the
● Richmond
aforementioned footer.
● CBD

8
 Site Map

Home

Menu bar Map About us Footer

More info
Locations What’s on FAQ Contact us Gallery
links

South
Fitzroy Brunswick Hawthorn Richmond CBD
Yarra

9
Web fonts & Headings

For my web fonts I chose

IvyMode for headings and
subheadings using different
variations of the font, and
Owner’s Text for body text.

These fonts best capture the

essence of thrifting, being similar
to text of that in fashion/clothing
magazines, while also having a
decorative/handwritten quality
that embodies the warm
personal feeling of second-hand
goods.

10
 Fall back Fonts; Mac/iOS
Heading For my Mac/iOS fallback fonts I
Garamond Subheading (1) decided on using Garamond Bold
for headings, Palatino for
Palatino subheadings and Helvetica Neue
Bold 48pt Light for body text, as these are all
pre-installed on mac/iOS systems.
96pt #0E425A Unlike the originals, the heading and
subheading fonts are serifs, as they
#0E425A more closely imitate the thickness,
stroke and shape of the original than
other pre-installed sans serifs. The
Subheading (2) Body serif fallback fonts also contrast
Palatino Helvetica against the sans serif body text, thus
Neue Light being the best choice for a fall back
36pt 20pt font.
#402e1b #402e1b 11
 Fall back Fonts; Windows

Heading
Subheading (1) For my Windows fallback fonts I
Georgia Times New
decided on using Georgia Bold
for headings, Times New Roman
for subheadings and Arial for
Bold Roman body text, as these are all
pre-installed on Windows.
48pt
96pt #0E425A Similarly to my Mac/iOS fonts I
again used serif fonts as
#0E425A backups for headings and
subheadings as I believe they
Subheading (2) more closely imitate the
Body decorative original than the
Times New Roman Arial pre-installed sans serifs.
36pt 20pt
#402e1b
#402e1b 12
 Font Stacks/ Example
On the left is an example of what my
chosen fonts would look like in my
site, with the words per line and line
spacing in body text likely changing
between computer and mobile
platforms.

Below are my completed font stacks

containing fallback fonts for both
Mac and Windows, as well as a
generic font family in case both are
unavailable.

Heading: IvyMode semi bold > Garamond (iOS) > Georgia (Windows) > Serif
Subheading 1 & 2: IvyMode regular > Palatino (iOS) > Times New Roman (Windows) > Serif
Body: Owner’s text > Helvetica Neue light (iOS) > Arial (Windows) > Sans Serif
13
 Wire Frames: Home
For my home page wire frame, I included a short
‘about us’ section/ intro into thrifting, as well as a
moveable map to see the various thrift stores
listed on the website easily. This allows the
viewers to obtain a brief visual overview of the
websites content immediately upon opening the
webpage. The page also includes a footer at the
bottom with links to more info, which will be used
in every webpage. Additionally these wireframes
showcase the different typography scales I used
across all my wireframes between mobile and
computer.

Computer: heading (96pt), subheading (48pt), body (20pt)

Mobile: heading (64pt), subheading (36pt), body (14pt)

Computer Mobile 14
 Wire Frames: Locations

The locations page is the next

page that users will likely gravitate
to upon opening the site, as this is
where users will be able to find
which areas are best for specific
thrifting purposes. The page will
contain some basic information
regarding melbourne at the top as
well as specific information about
each location, a picture of each
location and a link to each
location’s webpage.

Computer Mobile 15
 Wire Frames: Brunswick

The ‘Brunswick’ web page would

be one of many web pages
accessible from the locations web
page. Each of these would then
detail the individual thrift stores
located in these areas. Information
that was deemed important in my
user interviews for assignment 1
would then be added here in for
each thrift store including,
sustainability, price, proximity to
public transport, and images of the
store.

Computer Mobile 16
 Wire Frames: What’s On

The last wireframe I created was

for my ‘What’s On’ page. This is
very important in regards to
thrifting as there are various pop
up events which are great for
thrifting at specific times in the
year. This page will include
relevant event information
including locations, addresses,
prices and images and will be
updated regularly.

Computer Mobile 17
 Design System
For my primary and secondary
buttons I utilised my
Components: Buttons
decorative colours to ensure
they stand out from whatever
background they are placed Primary Primary
upon, and used the inverse of
these colours for the hover Default Hover
state. This will ensure a
smooth user experience as
the difference between the
default and hover state isn’t Secondary Secondary
too jarring.
Default Hover
My tertiary buttons are a little
more discreet in their default
state however still stand out in
their hover state. Tertiary Tertiary

Default Hover 18
 Design System Components: Hyperlinks

For my default and active hyperlinks I

utilised #0E425A, which I had planned to
use for my headings and subheadings as I
believe it stands out nicely from the dark
Default Hyperlink
brown body text I intend to use, however is
still a little discreet. In it’s hover state the Hover Hyperlink
hyperlink is much more exaggerated
shifting to a brighter colour and becoming
underlined to emphasise that it is in fact a Visited Hyperlink
hyperlink. The visited hyperlink also stands
out using the decorative colour #C0C6A5,
so users clearly know which links have Active Hyperlink
been utilised already. This will hopefully
streamline the user experience as a result.
19
Design System Components: UI elements

#DFB9A9

#C0C6A5

For my site I plan to use various icons in my two main decorative colours.
These icons are adobe stock icons that I then adapted to suit the colour
palette for my site. As I’m developing the site I may change my mind as to
which colour should be used where so I reconfigured the icons in both colour
options.

20
 Reflective Essay

User interface design has been one of the toughest classes I’ve had to complete, but I’ve found a
lot of creative growth and development within myself over the duration of the unit. As I was mostly
unfamiliar with this form of designing for the web I found many of the weekly tasks challenging
such as creating wireframes, font stacks and the site map. However upon completing the process
I’ve learnt various valuable insights that will likely help me immensely if I ever have to do a similar
project again.

Coming into this assignment following my research in assignment 1 I had a pretty strong idea of
the direction I wanted to take thanks to my user interviews, which definitely helped me when
making design decisions about wireframes and colour palettes. I also believe that I had a very
strong concept that I was particularly sure of which helped me when deciding upon the site map
and which webpages were of most importance. I began to be challenged however when I had to
actually convert these ideas into physical form as the way in which websites are layed out is a
difficult thing to fully grasp at first.

21
 Reflective Essay

My weaknesses in physically creating the design system however, led to various improvements
and challenges I had to overcome. Another challenge I had difficulty with, was deciding upon
colours that were a suitable contrast level for a website. At first I was extremely certain of which
colours I wanted to use however upon undertaking the WCAG colour contrast test I found that
many colours I wanted to use would not be viable. If I did the assignment again I definitely would
have considered this important factor before becoming so attached to certain colours, as this likely
would have made the design process smoother. In the end however I did manage to use various
colours I wanted by making adjustments to background colours and placements.

While this assignment was particularly challenging for me, I believe that I now have a solid
foundation to build off of for my final assignment, as the first and second assignments have given
me an immense amount of material to work with. This has taught me a very valuable lesson in how
essential research and planning is for design in general, as there are many aspects I would have
failed to consider had I created a website without undergoing these processes. Therefore I think
these tasks were particularly invaluable.
22
 References
Sites
● WebAIM. (2025). Contrast Checker. [Link]

● (2025). Adobe Colour. [Link]

Photos
● KoolShooters. (2021). Green Plant near a Brown Wooden Chair [photograph].
[Link] .

● exclusive. (2024). Vintage Style Store with Clothes [photograph].

[Link] .

Icons
● Seyyahil. (2025). Web Icons [JPEG]. [Link]

23