ui/ux/web/mobile
Freetrade
back to projects
Freetrade
LANDING PAGE REDESIGN
I was given the task of re-designing Freetrade's current website, here I'll take you through my thought process, how I got there, the UX, UI, the design and then final product.
The task was specifically for web but there is also a responsive mobile designed & developed.
The task was specifically for web but there is also a responsive mobile designed & developed.
Aa
Larssiet
Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^&*()
abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^&*()
Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^&*()
abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^&*()
Pale Violet Red
primary colour
#F7618B
R 247
G 97
B 137
R 247
G 97
B 137
Mid Turquoise
secondary colour
#21CEC9
R 33
G 206
B 201
R 33
G 206
B 201
Medium Violet Red
secondary colour
#C21C6C
R 194
G 28
B 108
R 194
G 28
B 108
Black
secondary colour
#000000
R 0
G 0
B 0
R 0
G 0
B 0
White
primary colour
#ffffff
R 255
G 255
B 255
R 255
G 255
B 255
PROCESS
Inspiration, Wireframes & Sketches
I started by going through the current design, working out what I could change, what was important to use and any ideas I had to improve on the sections.
I then created a mood board of designs I liked in an attempt to influence my design process from other fintech websites and design inspirations from Dribble.
I then created a mood board of designs I liked in an attempt to influence my design process from other fintech websites and design inspirations from Dribble.
SKETCHES & WIREFRAMES
The next step was to work out the sections to design and sketch them out into a a rough layout on paper.
Once I was happy with the layout, I transferred the designs across to Figma to create a lo-fi wireframe.
Once I was happy with the layout, I transferred the designs across to Figma to create a lo-fi wireframe.
.png)
FIRST DESIGN
I then developed the sketches and wireframe into a hi-fidelity design on Figma with the Freetrade colours and fonts (as close as I could get).
I left some notes for interactions and animations in areas I could not show as easily in Figma as you can in Webflow, such as horizontal scrolling or transitions.
I left some notes for interactions and animations in areas I could not show as easily in Figma as you can in Webflow, such as horizontal scrolling or transitions.
.png)
.png)
.png)
.png)
.png)
.png)
PROTOTYPE, DEVELOPMENT & MOCKUPS
The next step was to create the design on Webflow to create a finished product whilst including interactions, transitions, scrolling and menu animations (something I realised needed to happen to fit in all the content).
I then made the site responsive for mobile, tablet and horizontal mobile and created some mockups to display the designs in the best way possible.
I then made the site responsive for mobile, tablet and horizontal mobile and created some mockups to display the designs in the best way possible.
