SJEI WEBSITE
Applying the Gestalt principles to the elements of the interface strengthened my understanding of visual design and further my interest in creating memorable visual experiences with my products.
DURATION: 1 Week
TYPE: Conceptual project
RESPONSIBILITIES: Research, Ideation, Design
METHODS: Competitive Analysis, Moodboard, Wireframing, Prototyping
TOOLS: Figma Jam, Figma
Introduction
We all have encountered those websites that look like stuck in a time warp and should be put to sleep or better shelf with mothballs.
The Social Justice and Engineering Initiative website was sadly one of them.
Process
Based on the organisation’s principles, I focused on the following groups: researchers, volunteers and prospective builders who wished to use the consulting services of SJEI.
I also noted the 3-fold character of the company’s ethos. They cared about a) social justice, b) the impact on the environment and c) the idea that engineering can be done ethically and for the good of the community.
Moodboard and Design
As set out at the beginning of the reskin, my intention was to implement the six principles of Gestalt in the new design.
Unity & Harmony
Using the same format for various calls for action gives the user the needed clarity on which elements will initiate further action.
Balance
The use of white space, letter spacing for text as well as margins and paddings around functional elements such as buttons creates an uncluttered and balanced environment where the user can take in the information step by step.
Hierarchy
Three weights of the typeface give a sense of importance in communicating with the user.
Scale & Proportion
Understanding that scaling between desktop and mobile versions requires appropriate adjustments taught me intuitive solutions about element arrangments.
Dominance & Emphasis
Colour blocking the important elements “disrupts” the flow of the experience and demands the user’s attention.
Similarity & Contrast
Setting a rhythm to a page with the inclusion of layout arrangments that repeat through gives the user a sense of familiarity without looking too monotonous or boring.
