Product design, often perceived as UI/UX design is an integral part of any product. However fascinating an idea is, without a good visual interface and clean user experience, it is probable that the idea might fail. After all no one will like to use a software/product with crappy interface and a nightmarish experience. Fancy some Frobscottle, anyone?
I am a beginner when it comes to design, but I would like to jot down some interesting points as I learn. I hope these points might come in handy to someone who is looking to learn design. This particular article will not make you a designer overnight, but will introduce some really basic concepts called ‘Design principles’ in the design world. I would like to thank Melissa Mandelbaum (Product designer, Percolate) for simplifying the design principle concepts.
Well then, let’s take it step by step. For this one, I will conclude by introducing 4 important things, which a designer should be aware of.
It is represented by dashed lines. Simply put, axis is an imaginary line used to organize a group of elements in a product design screen.
Pic courtesy: Mockplus
Symmetry is achieved when elements are arranged in the same way on both sides of axis. Perfection of symmetry is when the elements are mirrored over axis; the elements will be aligned in the same way on both sides.
So, if we consider a central vertical axis of the below screen, the images are arranged in same way on both side of the axis.
Pic courtesy: Dribble
In a design, sometimes some elements appear more important when compared to other elements. If that is the case, we will say that there is a hierarchy in the design. This is intentional and is mainly used for highlighting some section or content.
In the above picture, the top news is intentionally bigger so as to make it appear important.
Pic courtesy: Materialup
Have you seen Facebook posts? Of course yes! However, have you seen the rhythm in it? The answer is yes, but you might not have thought of this as rhythm. Let me quickly explain. Take any post, the basic pattern is: Avatar details and more options, Post content, Social action section (like, comment, share). When you scroll, you see a repeated pattern in design. That is called as rhythm. Remember the rhythm of your favorite song? The same concept can be applied there too. Rhythm makes it easier to take action or find the required section or content.
Pic courtesy: Sketchapp resources
There you go!
In the next chapter, we will be seeing various points that constitute the above principles and some general design principles too. Now, just to make things interesting, let us try taking the screens of 3 of our favorite applications/websites. Co-relate axis, symmetry, hierarchy and rhythm in their designs. Happy designing!! So long!!!