The Kindergarten Of Web Design

3 min read
Design - Igniting Your Startup

That would be the User Interface…

Hey, if I’ve associated the kindergarten with UI, you shouldn’t interpret it as a bad thing. I’m referring to the fun of this process, because back in the days when we were kids, drawing and coloring was cooler than cool.

The UI madness

There are thousands of articles, around the web (and not only), written under the UI category. There are thousands of designers who call themselves UI designers. There are so many references to the user interface… plenty to make us go mad. But why is it so important?

UI can be found in so many things, in so many places: smart watches, phones, operating systems, ATMs, TVs, car dashboards… I can go on and on. Without a proper interface, the user won’t be able to use the product accordingly and you know where that leads? Failure!

The UI debunked

There are so many things that must be defined in the UI… So grab a chair, get a drawing block and some pencils and get ready to have some proper fun!

  • Color Palette – differentiate items, create depth, add emphasis, and/or help organize information. Be advised: colors have a psychologically impact upon the users, so choose them wisely, tuned with your business field!
  • Layout – provides aid for organizing the elements in a manner that’s both rational and easy to be processed.
  • Typography – refers to which fonts are chosen, their size, alignment, color, and spacing.
  • Input Controls – buttons, text fields, checkboxes, radio buttons, drop-down lists, list boxes, toggles, date fields.
  • Navigational Components – breadcrumbs, sliders, search fields, pagination, tags, icons
  • Informational Components – tooltips, icons, progress bar, notifications, message boxes, modals.
  • Containers – tabs, accordions.

Really getting our hands dirty

Awesome! You have a (temporary) look for your elements… Now what? Start thinking about a saying that is vehiculated on the web – “A good UI is an invisible UI.” This means that there are other elements – invisible – that can have a huge impact on your website’s interface.

  • Unity – your elements must be part of the same family. You gotta have them synced. Don’t throw in a user’s face a section with large fonts and red buttons, only later to offer him a page with minuscule fonts and purple & orange buttons. Of course, you should avoid a dull interface, so find a balance between unity and variety.
  • Space – use the space (a.k.a. “nothing”, “zero”, “blank”, “room”, “empty”) as an UI element. Give elements room to breathe. Increase readability and avoid a cluttered interface.
  • Hierarchy – similar to what has been said in Unity above, the elements are part of the same family. So like in any family, there’s a hierarchy in order to keep things sane. Through different font sizes and colors you can differentiate the element’s importance. Also use placement (location in page – e.g. as closer to the top, as higher the importance) as a differentiation factor.
  • Scale – define a size pattern. It will grasp attention and possibly ignite interest. But do it with a logic, don’t go normal, normal, huge, big, normal, huge, huge, big… Create relations between elements, even if they are different in size.

The above are not the only ones, there are many others like balance, contrast, dominance, similarity and gestalt. But getting further into UI will only confuse you more and it should be left to professionals.

And my point is…

You should know about UI… It’s not an easy and quickly done process. It requires a lot of strategic thinking and attention. Everybody involved in the creative process of an user interface should:

  • pay attention to patterns
  • create consistency
  • strategically use color, text, form and size
  • not ignore the default states of elements
  • guide the user throughout the entire use of the website
  • keep the interface simple

So next time when you’re talking about UI, you won’t find yourself in the dark. Appreciate and allocate the necessary time for its proper development.

Interesting read?

About Ciprian Irimies

Ciprian is an UX Ninja, but what really makes him stand out of a crowd is the desire to venture into the unknown, to boldly face new challenges and the lack of hair on his head.