The very basics of Design Principles

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.

  1. Axis
  2. Symmetry
  3. Hierarchy
  4. Rhythm

Axis:

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.

mockplus axis

Pic courtesy: Mockplus

Symmetry:

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.

dribble symmetry

Pic courtesy: Dribble

Hierarchy:

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.

materialup hierarchy

In the above picture, the top news is intentionally bigger so as to make it appear important.

Pic courtesy: Materialup

Rhythm:

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.

sketchappsources rhythm

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!!!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.