My “Design101 with Senpai” Experience

The beautiful journey with Senpai Henry began 6 weeks ago and each week of learning up until now has been all informative and mind-blowing. All I saw design as was a plan of something like a building, a car, a structure or just aesthetics, but I found out that design is more than just all that; Design is everything and everywhere.

Also, I discovered that design has basic needs it must satisfy before it can satisfy higher-level needs, this idea rests on Maslow’s hierarchy of needs. Some of this hierarchy of needs are Physiological needs, Safety needs, Love and belonging needs, Esteem needs and self-actualization needs. This Maslow’s hierarchy of needs must be met before a design can actually have that “wow” effect on us.

Visual Hierarchy

Visual hierarchy refers to the arrangement or presentation of elements in a way that implies importance. In other words, visual hierarchy influences the order in which the human eye perceives what it sees. ”— Wikipedia.

Visual hierarchy’s most prominent property is size i.e when a text or a picture is way bigger than it’s neighboring counterparts, it will definitely be seen first. Other properties of visual hierarchy are color and space respectively and this brings us to the Gestalt principles.

The whole is greater than the sum of its parts” — Kurt Koffka.

This phrase is like a simple definition of the general idea behind the gestalt principles or principles of grouping. Some of the gestalt principles are Proximity, Similarity, Closure, etc. I made some iterations of few gestalt principles as seen in the images below.

My Figma iteration of some of the gestalt principles


Also, when designing with your design application, might be Figma, Sketch, etc, it is best practice to layout your wire frame on a grid, this makes the work aligned, professional and pleasing to the user’s eyes. This will also make the website or interface easy to navigate.

Typography, Fonts and Color Theory

Finally, I learned about color; color is one of the most difficult aspects of design, especially when it comes to matching two or multiple colors for a design. In order to properly understand how to effectively pick and match colors for a design, I learned about a few color concepts and some color terminologies and this, in turn, made it easy for me to create a color scheme that I used in my most recent project. The Traditional Color Scheme types actually made creating a new color scheme easier for me.

My Design 101 final project was a design of a demo restaurant website layout. In this project, I applied everything or almost everything I’ve been learning over the weeks to it to make it candy-looking for the eyes. It was not easy but it was worth it and I’m quite happy with what I managed to produce. Attached below is a picture of my work.

Wire frame and grey representation of my demo restaurant
Completed design of the demo restaurant with colors and images included