MY DESIGN 101 STORY — A GREAT SIX WEEKS
I can’t still remember how i got to follow @think_senpai on twitter but i can gladly say it has been one of the best decisions i have made in my life so far. Still remember applying for Design 101, getting accepted and starting the course. Now, i am in the last week of the program and its been surreal. And yes, you guessed right, i am as excited as when i started.
One of the secret to success is to teach what you know, so permit me to take you through some of the few things i have learnt in the design 101 program from the first week to the fifth week. Each week focused on certain segments of design and like Pusha T said, we went in layer by layer.
Week 1- Introduction to Design
“There are three responses to a piece of design- yes, no and WOW! Wow is the one to aim for.”- Milton Glaser
The week started with an introduction to some of the basic of designs such as the need for designers to have empathy, perceptual set, information overload, Maslow’s low hierarchy of need and so much more.
As we know, everyone want to be great at their craft and designers are not left out but in the case of a designer, its the little things that matter. To be a great designer, one needs to develop empathy which in summary is being detail oriented and having people you are designing for in mind.
Great deigners apply empathy into everything around them and not just what they are designing, you can say it is a part of them.
Empathy is a paranormal ability to psychically read another person’s emotions.
Since we all want to be great designers and am pretty sure the next question on your mind is, how do i gain empathy? I understand, its easy. Just follow the steps below and that is all;
- Start by abandoning any ego you have.
- Adopt humility.
- Show people around you that you care.
- Hone your observation skill- observant of things around you.
- Be a good listener.
- Be sincere.
- Always be curious by asking why, how and what when confused.
“Nobody cares how much you know until they know how much you care”-Theodore Roosevelt
Remember, empathy makes designers great and it is one of the most important building blocks in design. Perceptual set emphasised the need as a designer to be detail oriented.
Perceptual set explains the ability for one to consciously/unconsciously ignore certain data because we have already noticed certain information. Perceptual set works in two ways;
- The perceiver has certain expectations and focuses attention on certain aspects of the sensory data.
- The perceiver knows how to classify, understand and name selected data and what inferences to draw from it.
Perceptual set can be further explained by the image below;
Everything in design is hierarchical and Maslow’s hierarchy of need totally explains this. Maslow’s hierarchy of need is a five -level pyramid which consist of different levels of human need. It explains that a healthy human being has certain number of needs ranging from the lower needs to the higher needs and for the higher needs to have been accomplished, the lower or basic needs should have been met.
Design hierarchy of needs is an adaptation of Maslow’s hierarchy of needs which gives the idea that for a design to be successful, a design must meet basic needs before it can satisfy higher-level needs.
We went slow in week one, understanding basic level concepts needed to create an acceptable design. Also got to learn that design applications do not make designers but the pen and book (a very important designer toolkit) is what really creates designers.
Week 2- Visual Hierarchy
Visual Hierarchy controls the visual perception. Visual Hierarchy being the order in the design elements are arranged and visual perception understood as the order in which the design elements are translated by the viewer.
Strong visual hierarchies guide the user’s view by showing what is important while weak visual hierarchies offers no guide to the viewers on what is important. Many of the principles followed in design arise from gestalt theory. By following some of this principles a strong visual hierarchy can be created.
“The whole is other than the sum of the parts.”- Kurt Koffka
Gestalt principles defines the ideas that govern the principles of gestalt, which are;
- Emergence- The whole being identified before the parts. It is a process of forming complex patterns from simple rules. For example, the process of first identifying the outline of an object before finding a match with object we already know.
- Reification (our mind fills in the gaps)- An aspect of perception in which the object perceived contains more spatial information than what is actually present.
- Multi-stability- The tendency of ambiguous perceptional experiences to move unstably back and forth between alternative interpretations. In summary, its the mind trying to avoid uncertainty.
- Invariance (recognizing similarities and differences)- A property of perception in which simple objects are recognized independent of their rotation, scale and translation.
The principles of gestalt are governed by the ideas above and the principles are;
- Law of Pragnanz (Good Figure, Law of Simplicity)- It describes people preferring elements that are simple and clear to relate with. It leads to less time taken to process the element.
- Closure- The need to look for a single recognizable pattern when with complex arrangement of elements.
- Symmetry and Order- Used to impose order among the elements of design. It brings the feeling of solidity and order.
- Figure/Ground- Most elements are perceived as either figure (the element in focus) or ground (the background on which the figure rests on). Two principles in which you can use to determine either of the figure or ground; Area (the smaller of the two overlapping objects are seen as figure) and Convexity (convex instead of concave pattern are perceived as figures).
- Uniform Connectedness- Elements that are visually connected are perceived as more related than elements with no connection.
- Common Regions- Elements that are perceived as part of a group if they are located within the same closed region.
- Proximity- Objects that are closer together are perceived as more related than objects that are further apart. White/negative space helps in this aspect. The more the negative space, the less related they are and the less the negative space, the more related they are.
- Continuation- Elements arranged on a lane or curve are perceived as more related than elements not on the same line or curve.
- Common Fate (Synchrony)- Elements that move in the same direction are perceived as more related than elements that are stationary or that move in different directions.
- Parallelism- Elements that are parallel to each other are seen as more related than elements not parallel to each other.
- Similarity- Elements that share similar characteristics are perceived as more related than elements that don’t share those characteristics.
- Focal Points- Elements with a point of interest, emphasis or difference will capture and hold the viewer’s attention.
- Past Experiences- Elements tend to be perceived according to an observer’s past experience.
Week 3- Layout & Composition
The third week of the program and the tempo had gone up. The program continued by reading and also creating a wire-frame for a restaurant.
So what is a wire-frame?
A wire-frame can be described as a page schematic or screen blueprint which is a visual guide that represents the skeletal framework of a website. Wire-frames are created for the purpose of arranging elements that best accomplish a particular purpose.
How do you create a wire-frame?
Remember i said one tools a designer must have is a pen/pencil and a book. You make sketches for ideas you have conceived for the look of your website with the pen and book. At the stage of the wire-frame creation, you have the opportunity to make as many mistakes as possible. Take your time to sketch what looks good for you. When creating a wire-frame, make use of grids. Grids help to properly align content on a wire-frame.
Week 4- Typography
Typography is the arrangement of type. The use of typography is rooted in its overall theme, tone and message. It works with your layout, grid and color choice to create a well-rounded design.
Selecting a typeface for your design, consider the theme of your design when making the decision cause the technique of setting the type gives your composition its character, pace and style. There are some common terms and concepts which are described below;
- Lines- The type character has five (5) lines which are associated with the type. They are cap-line, mid-line, baseline, topline and beardline.
- Leading- It is the amount of space between the baselines of the text. Leading is also referred to as the line-height in css. Space between the baseline of text (leading) has effects on how the text is perceived. Increased leading reduces in the pace of the text while decreased leading increases pace of text.
- Tracking- It can also be referred to as letter-spacing. It is the space between the group of characters.
- Kerning- It describes the amount of space between two characters.
- Alignment- It is the order in which the text are aligned. It affects the way the text is perceived. The text can be aligned in four ways; Flush left (Ragged right), Flush right (Ragged left), Justified, and Centered.
With the knowledge on typography gained, text was therefore added to the created restaurant wire-frame.
Week 5- Color Theory
In week 5, the knowledge gotten from week 1 to 4 was expanded on by the creating a color scheme for the created restaurant design. It was all about color theory for designers, as a designer i needed to really understand this and you will too.
Color as we know is very important, like an image when it is added to you design can really spice up your design. Color was in 3 major parts;
- Meanings behind colors
- Terminologies associated with colour
- How to create a colour scheme or palette
Meanings behind colors
Colors influence designs and all color have emotions that they convey. Summary some of the meaning behind each of these colors are listed below;
- Red: Passion, Love, Anger.
- Orange: Energy, Happiness, Vitality
- Yellow: Happiness, Hope, Deceit
- Green: New Beginnings, Abundance, Nature
- Blue: Clam, Responsible, Sadness
- Purple: Creativity, Royalty, Wealth
- Black: Mystery, Elegance, Evil
- Gray: Moody, Conservative, Formality
- White: Purity, Cleanliness, Virtue
- Brown: Nature, Wholesomeness, Dependability
- Tan or Beige: Conservative, Piety, Dull
- Cream or Ivory: Calm, Elegant, Purity
Note: The right mix of the right color would express the emotion you want to convey on your design.
Terminologies associated with colours
All colours have three major personalities; Hue, Chroma (Saturation) and Value.
In the different professions, there are words which are associated with the profession and in the world of color, it is no different. There are seven words, know them and you are a little closer to being an expert in the theory of color.
- Hue:- describes the name used to refer to an object’s color e.g green, yellow, purple e.t.c.
- Chroma:- Refers to the purity of a hue or the brightness of a color in comparison with white. Hue with a high chroma is an indication of no white, grey and black in the hue and hue with low chroma indicates the presence of either white, grey and black in the hue.
- Saturation:- It refers to the dominance of a hue as the objects color.
Note:- Chroma and saturation are usually refer to as one but i feel they are two keywords that explain the same thing in a unique way.
Value:- A hue with high value described as light and hue with low value is described as dark. Value describes how light or dark a hue is.
Tones:- They are created by the mixing grey with the hues. They have a dull/soft look than the actual hue.
Shades:- They are created by mixing black with the hues. Dark shades can replace black in a design.
Tints:- Created by the mixing of white with a hue.
Colour scheme
A color scheme or palette is a choice of colors used to design a range of media. You can either create or used any of the traditional color schemes below;
- Monochromatic- A color scheme that consist tones, tints and shade of a particular hue.
- Analogous- A color scheme that consist three colors that are next to each other.
- Complementary- Consist of hues that are opposite each other on the 12 spoke color wheel.
- Split Complementary- Consist of hues that are by the side of the hue which is opposite the base hue.
- Triadic- It is made of hues that are equally spaced on the 12 spoke color wheel.
- Double Complementary (Tetradic)
- Custom- It refers to color schemes which you create. A color scheme of any number of colors that you are satisfied with.
You can make use of Abode Color CC to create you color scheme and to have better idea of the color schemes illustrated above. I also created a color scheme which i added to the restaurant wire-frame.
Week 1 to 5 explained in words i understand. I hope you enjoyed it, please give me a few claps, i will appreciate it. Special thank you to @think_senpai for the opportunity.
