While working as a design instructor, I had seen many students struggling with early level low-fidelity wireframing, and high-fidelity wireframing with the inclusion of visual design. The concepts of structure and implementation of visual design weren't being fully understood.
I created a simple workshop to show the significance of and relationship between structure and visual design when creating interfaces. The workshop was hosted as a one-hour Zoom call, and built on Figma.
Teach how to craft simple and effective structure without the inclusion of visual design.
Show how visual design can drastically change the aesthetic of a product without changing the structure.
This exercise began with a very simple structure. By creating a construct using four tabs with consistent text and iconography layouts, students had full freedom to craft the visual design in any way they wanted.
We then designed multiple visual aesthetics using the variants feature in Figma. Each style had a full set of elements based on the initial structure.
%20(1).png)
The final outcome was an interface that constantly communicated the same information architecture with many different visual representations.
