After establishing my task flow and conducting research, I started wirefaming the outline of the website, based on the content that best meets the business and user goals. Shown below is the low-fidelity wireframe and then the high-fidelity version of the design.
Design Systems are crucial to the design process as they help achieve visual consistency, thus creating a better user experience for the end user. Before starting the high fidelity design, I first established a colour palette, as well as systems for shadows, typography, and different components of the website. This results\ed in a clean and polished end design that is easy for the user to navigate.
Across Web we utilise all six headings and follow the 4px rule for our spacing convention. Within our web styles we also notably showcase the link, bold, and default text styles.
Across web we again follow the 4px rule for our text styles. We have four text sizes including large, medium, small, and overline text.
We have three button text sizes across web and mobile. Each of these sizes shifts across devices from a font size and line height perspective
We split our color palette between primary, surface, text, and secondary colors. We then identify tints and shades of those colours to use throughout a design for a consistent look and feel.
We use action shadows to apply elevation to our product. We have four shadow ranges across our primary and secondary action colours.
If you like what you see and want to work together, get in touch!
vicky_marchenko@hotmail.com
