Everyone is a designer. Well, at least everyone has the potential to be a designer, and that’s because people understand basic design principles whether they realize it or not. For example, when you approach a door you might clearly know whether to push or pull the door open, right? If there is a push bar on the door, you know to push – if there is a pull handle on the door you know to pull.
However, there are moments where a handle is not clearly a push or pull and you risk the chance of pushing on a door that requires a pull, causing an awkward moment in public view. In that moment you say to yourself, this could be designed better – why not write PULL on the door?
Understanding these interactions and how they can be improved is essential to creating better design and user experiences for the physical world as well as the digital world.
To help us understand this design process and more in-depth design concepts for digital content, here are 10 terms that will get yourself mentally prepared, with the door being a frame of reference.
10 Essential Design Terms
1. User Interface (UI)
Technically a door has a “user interface,” but it’s a physical one. The push bar or the pull handle, and even the door panel and frame are the parts of the interface, and you (the user) interact with the interface to create a desired action.
On a digital screen, the interface is you clicking on the LOGIN button to your favorite website which “opens the door” to the website – it’s easy to enter the website because you understand that LOGIN is your entry method. Similarly, the background behind the button and everything else on the digital screen is also part of the website’s user interface.
UIs should be treated the same way any other physical space or object is treated – it should be super intuitive, clean, and direct in purpose.
2. User Experience (UX) / Usability
When taking into consideration the interface, there is also the method in which the interface interacts with the user while the user interacts with the interface.
This back and forth communication between the two is known as the “user experience” and the “usability” of the interface is a measure of how successful the interaction is between both parties. If you slam your face into a door that you were expecting to push open – that’s a bad user experience (I think we can all agree).
Taking a step back and pinpointing the strengths and weaknesses of a particular User Experience is key to improving its effectiveness and conversion potential.
3. Visual Hierarchy
Imagine you are standing far away from a building with more than one entrance and you only know the entrance you need to walk through by it’s name.
The first thing you would want to see is where the entrances are. The second thing you would want to see is the name of the entrance you want to enter. And the third – it would be helpful to see whether you are pushing, pulling, swiping a card, scanning a retina, or somersaulting through the door to enter the building.
A visual hierarchy makes sure you aren’t seeing the PULL lettering in large letters before knowing which door you need to enter through in the first place.
Visual hierarchy should guide the user through the experience, sometimes taking a narrative form as to what happens next in the process.
4. Conventions
A great way to think about a convention in design is through understanding the advantages of consistency. If every time you used a doorway the method for opening it changed, seconds or minutes (dare I say hours?) of your time would be spent unlearning the previous method and learning the new one. This is an inconsistency that could easily be fixed by maintaining conventions.
If every door had the same push bar for pushing a door and pull bar for pulling a door then it would be hard to forget how to open any door. That consistency is in fact a convention and it saves people a lot of time to not have to think twice about them. Another term for this is a UI Pattern.
Review and take note of the similarities between popular designs and successful campaigns you’ve seen and responded to. Employ these layouts in your designs.
5. Affordance / Intuitive Design
Have you ever tried pulling open a door that has no handle on it and only a flat metal panel? In most cases probably not! This is because the design of the door is such that your only intuitive option is to push on the door.
This type of design is called an affordance because it’s so obvious as to what your options are that the interface barely has to explain the process to the user.
Page elements should behave in accordance to how things feel like they should behave naturally.
6. Responsiveness
This one’s easy to explain if you’ve had pets before. A door to your house is easy to walk through (unlocked, of course), especially for a human. But for a dog or a cat, a door could be made to respond to their smaller body type by having a smaller pet door installed as well.
This makes the door responsive to different scenarios similarly to how a website could be responsive to a desktop browser screen or a mobile device screen. We can go a step further and say that a mail slot in the door is equivalent to a watch device’s screen in terms of size.
A good digital design will account for all possible scenarios and will respond to them across devices and screen sizes.
7. Contrast
Have you ever noticed how main doors in a building are a darker color to stand out from a white wall? What about doors for janitors and supply closets where they are painted white with the wall?
The darker doors would be considered in high contrast to the walls and the janitorial / staff doors would be considered to have virtually no contrast. This is because the traffic in a building should not be directed towards supply closets and boiler rooms.
The same concept applies to interfaces where higher contrasted elements among other elements will take visual priority for users.
Some elements should stand out clearly and strongly amongst other less important elements of a digital experience.
8. Minimalism
Sure, it’s a self-explanatory term, but for design, minimalism goes further. Imagine a door with a pull and push bar on both sides of a door but it only opens in one direction.
By simplifying the amount of features on the door to only allow push on one side and pull on the other, you’ve created an minimalist and more intuitive design. As Leonardo Da Vinci stated multiple times throughout his creative life, “simplicity is the ultimate sophistication”.
Simplicity in a digital experience helps to avoid confusion and unnecessary conflicting details.
9. Typography
Even if someone were to put PULL lettering on the door to make it more obvious to the user, the lettering can still be done to the disadvantage of those door users. If the lettering is too small then users might miss the instruction.
If the lettering is too faded or it doesn’t stand out from the material it’s printed on (metal, wood, paint, etc.) then the same issue occurs. Additionally, if the door has anything else printed on it, such as ROOM # or OFFICES OF DAN, DANNY, & DANIEL CO., then that factors into the door interface’s typography as well.
Typography is more than just the size and coloring of lettering, but also how thick or thin a font is (weight), what style the font has (type), the spacing between the letters in each word (tracking) or between each line of text (leading), and many more variables.
Fonts should be simple enough to read while also distinguishing different components of a design visually.
10. Color palette
When designing anything, one of the most exciting parts is choosing a set of colors. A color palette helps to define those colors as a set.
By visually previewing all of the colors in unison you can make sure there is color harmony across all of your choices for a unique and unified aesthetic style. Your typical door color palette is a wooden brown color, off-white trim, darker door knobs, etc..
Consider a color palette as a way to find harmony in a set of colors being used for a design – often less is more.
Use Your Surroundings
There are many more terms and concepts that exist within design but these are some of the essentials that will help you acquire an eye for digital design.
When a design becomes difficult to work out, sometimes the best solution for thinking through its various facets is to relate your work to that of common, everyday, easy-to-use physical objects. The door is only an entryway to one of many paths that you could take to understand design better.
When you’re looking at websites, content, or search engines – ask yourself, “What could make this better?” Any ideas you come up with, jot them down for reference in your next design, whether it’s a powerpoint, pdf, email, or interactive content – all are more effective when built with strong design practices.