Blog

BEGINNERS GUIDE TO UI/UX DESIGN

 

When it comes to UI/UX design, there are principles that form the base of your design. Interacting with UI/UX principles is very essential in becoming a good designer and even web developer. Design has power so use your power for good. Design is all around us. We interact with designs everyday from our mobile phones to billboards to our TV screens, name them!

What makes a good design? Aesthetically, designs can be a piece of wall arts hanging in your bedroom or in the art gallery. You can call it art – it draws your attention and some times retains it.
But looks are not everything, or are they? Design is thinking made visual. Designs serves a function and purpose. Design communicates. Design affects the way we feel. Design can change our opinions.

CONTRAST

“The designs pops!”, says the client. While that sounds random, what the client means is that the contrast is just perfect thereby not rendering the design monotonous. Contrast describes how different elements are in a design, particularly adjacent elements. The various elements stand out because of those differences. Contrast affects everything from how a user feels when they interact with a design, to how they use the design whether they can fully see and understand it. Contrast Impacts user experience on an emotional and usability level.

Using the PEPSI drink as a case study. You can see that purple isn’t popping the design but the original design pops the can and even makes it look so enticing.

pepsi_contrast[1].jpg

BALANCE

Each design element-topography, colors, images, shapes, patterns etc. carries a visual weight. Some images, shapes, patterns etc. carries a virtual weight. Some images are heavier to the eyes while some are not. The arrangements of these elements laid out on a page should give a feel of balance. Elements are arranged either symmetrically, asymmetrically, or radially in relation to the overall design.

EMPHASIS

Emphasis gives the distinctive features. Emphasis deals with the part of design that is meant to stand out. Emphasis conveys important design information.

PROPORTION

Proportion is one of the most easiest design principles to understand. Easily, it is the size of elements in relation to one another. Proportions helps you approach your designs in sections instead of as a whole. Proportion is achieved when all elements of your design and well-sized and thoughtfully placed. Proportion pin points what is important in a design and what is not.

HIERARCHY

Hierarchy directly relates to how well content can be processed by people using a website. Hierarchy is the importance of elements within a design, making the most important elements appear as the most important. In visual hierarchy, the interface helps the user process details in order of relevance.

REPETITION

Repetition is a great way to reinforce an idea. Repetition unifies a design that brings together a lot of different elements. Don’t reinvent the wheel. Reinventing hurts engagement and instead of differentiating, scares off the audience.

REPETITION[1].jpg

MOVEMENT AND RHYTHM

Movement is how the eye moves throughout the composition, capturing each detail and attention from one aspect to another. Rhythm is how often something repeats, and the intensity of its contrast creates rhythm. Maintain consistency of the user flow throughout the journey.

PATTERN

Patterns are the repetition of multiple designs, and elements working together. Examples are the wallpaper patterns that virtually everyone is familiar with. In designs, patterns are set standards for how certain elements are designed.

Pattern[1].jpg

WHITE SPACE

White space is the part of the design that has no design elements. White space give the design room to breathe. Psychologically, humans appreciate white spaces more. White spaces creates serenity. Don’t be afraid of white space. White space helps create focus and balance.

Egg_WHITE_SPACE[1].jpg

VARIETY

Designs becomes dull without variety. Design uses variety for visual interest. Variety are through colors, topography, images shapes and virtual every other design element. Variety reinforces other elements of design to create more interesting and pleasing outcomes that improves the user’s experience.

VARIETY[1].jpg

UNITY

Unity shows how well a design elements work together. Designs that are not united throws the user off balance. For example, magazine page with different fonts. Unity ensures concepts are communicated in a clear manner. Designs with good unity depicts high quality and authority.

DESIGN PSYCHOLOGY 

We must design for the way people behave, not how we want them to behave. Design psychology aids you to understand how your user thinks and respond to design elements which enables you to make effective decisions about architecture and aesthetics.

INCLUSIVE DESIGN

People ignore designs that ignore people. Inclusive design is a framework that respects and enables human differences by involving and learning from the diverse range of people the design will serve. Inclusive design provides the best user experience.

Conclusively, Even more exciting, a design doesn’t need to follow all these principles to be good. A design can be spontaneous. Make your designs findable, discoverable, understandable, efficient, and informative. Make it simple but significant. Significant by eliminating the unnecessary so that the necessary may speak. Simple sells, simple is useable and simple scales.

Thanks for reading!

 

IMAGE SOURCES: PINTEREST/UIUX CREATIVE/CKGIGITAL ACADEMY

I'm a Medical Physiologist, Technical Writer and Hyper realism Artist who has a knack for UI/UX Design. I venture to build a bridge between passion, psychology, technology and verbal expression in the world at large.

Comments

  • Avatar
    Iniubong
    May 31, 2022

    Wow! I love this. An elaborative description of design elements and the little spices that can capture a users attention in the ui/ux designs.

  • Avatar
    Emy Hanson
    May 31, 2022

    Great article for learning. I can apply these for corel designs and fliers too

    • Avatar
      Faith Joseph
      May 31, 2022

      I’m glad you found this useful, and yes! You can apply it to your graphic designs. Thank you

  • Avatar
    Grace
    May 31, 2022

    I’ve learnt a lot in this 4min read. Beautiful!!!!

    • Avatar
      Faith Joseph
      May 31, 2022

      I’m glad you enjoyed reading my content. Thank you

    • Avatar
      Faith Joseph
      June 1, 2022

      I’m glad you found it concise and interesting. Thank You

  • Avatar
    Nkaiso
    May 31, 2022

    I immensely like they way you present the vital stuffs that makes up a UI/UX design amazing.

    • Avatar
      Faith Joseph
      June 1, 2022

      Much Appreciative, Nkaiso. It’s amazing.

  • Avatar
    Jin Si Li
    May 31, 2022

    Inclusive design, design psychology and unity adds to my already alive knowledge of these design keys

    • Avatar
      Faith Joseph
      June 1, 2022

      Yes, they are not often discussed but they are important principles. I’m glad you learnt something new.

  • Avatar
    Godswill
    May 31, 2022

    Nice. Hierarchy can be found even in some books where the title are bolder and bigger in font, than the succeeding texts following the main title.

    • Avatar
      Faith Joseph
      June 1, 2022

      Yes, Hierarchy is unavoidable in design. It is found all round us. It is usually the lure of a design.

  • Avatar
    Ibiangake Andy
    May 31, 2022

    Thank you for this fantastic piece 👍

    • Avatar
      Faith Joseph
      June 1, 2022

      Much appreciative, Ibiangake.

  • Avatar
    Frekky
    May 31, 2022

    I can’t say any thank you than this. Nice blog to find an educative piece

    • Avatar
      Faith Joseph
      June 1, 2022

      We are most grateful.

  • Avatar
    Zebulon
    May 31, 2022

    I pictured everything you outlined in an artwork. Some secret tips to art perfection

    • Avatar
      Faith Joseph
      June 1, 2022

      Ofcourse, ART! The only difference is that UI/UX Design leaves a lasting impression on the mind of your client.

  • Avatar
    Inemesit Okon
    May 31, 2022

    This is a wonderful piece, and a detailed one at that to the understanding of a beginner.

    • Avatar
      Faith Joseph
      June 1, 2022

      My most sincere goal is that a beginner understands it swiftly and I’m glad that goal wasn’t defeated. Thank you

  • Avatar
    RICHGOD CRYPTO
    May 31, 2022

    A nice 4 minute read. Lovely content

    • Avatar
      Faith Joseph
      June 1, 2022

      Much Appreciative, Richgod.

  • Avatar
    Happiness
    May 31, 2022

    This is a wonderful piece and a very detailed one for a beginner.

    • Avatar
      Faith Joseph
      June 1, 2022

      I’m most grateful that the preciseness of my article has been well received. Thank You

    • Avatar
      Faith Joseph
      June 1, 2022

      Yes, UX Research is really serving purposes now.
      Design Psychology is tantamount. Your design must interact with the users emotions for your design to be well appreciated. It should be a designers first consideration.

  • Avatar
    Noble Ugorji
    May 31, 2022

    All these principles in UI/UX are what make most products usable—ranging from cooking utensils to wheelchairs to mobile devices. The world is also getting better with the help of UX Research.

    I feel/think the best principle here is familiarity. The Design Psychology here is that people can relate more to designs that they are used to or have used before.

    This is a lovely and well-informed write-up.

  • Avatar
    Albert
    May 31, 2022

    Have been hearing of UI design. I have gotten a basket of knowledge from this piece.

    • Avatar
      Faith Joseph
      June 1, 2022

      WOW! I am elated at this. Knowing that this 4 min read has made you this aware of UI/UX Design, thank you Albert.

  • Avatar
    Faith
    May 31, 2022

    I’m glad you found this quite engaging and interesting. UI/UX should be fun and reading about it should be precise but make one star-struck. Thank you 😃

  • Avatar
    Faith Joseph
    May 31, 2022

    Thank you. I really appreciate you taking time to notice that, I’m grateful.

Leave a Reply

Your email address will not be published. Required fields are marked *

Captcha Plus loading...