Invisible Web Design 101

Posted on

  • email
  • twitter
  • facebook
  • share this

share this


:: By Jack Dawson, webds.com ::


Design doesn’t always have to be about creation of striking art; sometimes the best design is usable, yet subtle and inexplicable. Invisible design is about more than just adding hidden meanings, layers and transparencies to design projects. Rather, it’s about the creation of visually appealing, fully functional user-oriented projects.

If you feel you have to ‘decorate’ a canvas, chances are that you’re doing too much. The best design works behind the scenes to make a project work; it is invisible; how is this achieved given that Web design is especially visual?

What is invisibility in design?

Design is visual, there's no argument there. However being visible doesn’t mean that the user should be privy to all the tools and techniques you decide to employ. Much of invisible design in about creating stuff that just ‘works’ or ‘clicks’ or ‘feels right.’ It makes users want to interact and engage, and they can’t put a finger on why.

One of the best descriptions of invisible design was put forth by Information Architects founder slash director Oliver Reichenstein, given below:

Invisible Communication

In the process of creation of a mobile app, Web page or even a smartwatch user interactive interface, you’re essentially designing a way to communicate. This design should support, rather than interfere with, the message.

You will use all the design and project management tools within your reach. However, in the end, you are not designing for yourself, or other designers. Rather, you’re working for a wider audience that has no presence of mind to consider spacing, typography or color theory. All they know is that various things came together to create a usable, cohesive and interesting interface.

This is why design should be thought of an invisible.

Types of Invisibility in Design

There are many things that come to mind when considering invisible design. Every type is as important as the other, and has a significant impact on your end product. These include:

• Invisible placements and products – e.g. advertising or brands that are hardly noticeable (useful for game and app designers that have to pay special mind to their placements during design)

• Invisible notifications and interactions – these occur so unobtrusively that an action or a task is performed without giving a second thought to it, e.g. setting up an alert/alarm on your phone.

• Invisible aesthetics – creation of an emotional bond and/or connection with users, driving them to seek engagement.

Invisible aesthetic design techniques

Invisible aesthetics has its foundation in the very basics of the theory of design. It’s not about a fad/trend, or utilization of some new, cool UX feature. It’s about using the various elements of design – color, text, images, typography, technique and icons – to transmit a certain message. Below is a description of a few basic elements, and how they can be applied in invisible design:

Language and text

You use words to convey tone and elicit emotional responses from your audience. Your choice of language should communicate what you’d like the audience to feel as they interact with your design: playful, comical, formal, etc. It should elicit some emotion – like passion – and drive certain actions in response. Think about the rhyme and rhythm – how the words sound when read out loud.

Color

Every color combination creates a certain feel to it. There are cultural and emotional considerations to be made, meaning that color choice should be carefully and slowly considered. Be careful with the palette; ensure you select colors that drive your audience to perform certain actions, and to create a sense of balance, harmony and the right feel.

Typography

Typefaces also communicate certain meanings and will add a specific feel to the project. Clean sans serif typefaces like Helvetica draw their meanings from their surroundings, while more complex, black-letter typefaces like Baroque Text indicate formality. If you are not sure, stick to using simple serifs or sans serif typefaces with regular weights and uniform stroke widths.

Images

This refers to all photographs, videos and animations. What’s going on in those images? Are there people, and if so, how are they feeling? Do the images have warm colors or cool? Is action slow or fast? Having proper flow and pacing will make your audience feel comfortable with your images (if moving). Having action that is either to slow or too fast would draw attention to this speed disparity rather than focusing on the actual image and the message it gives.

UI elements and icons

Having a consistent set of UI elements and icons work out great for invisible design. The set communicates to users about the workings of the site, and how they should interact with it on standard displays, even though particular looks and/or actions for each icon may be different. At the point of invisibility, the user doesn’t have to think about how the element/icon works.

A perfect example is that shopping cart icon in e-commerce sites; users identify it as a chance to view selected items and/or proceed to checkout. They don’t have to think about how to navigate from product selection to the final point of completing purchase; the element seamlessly leads them in that direction.

Other techniques

There is a vast array of techniques that inform the design process, and how you use them can fortify or interfere with your design. A few of these include text effects (frames, strokes and bevels), drop shadows, underlines and spacing among many more. The most important point to remember when using any effects is that if you open the tool in editing software and apply the effect with default settings, you’re likely to end up with a start effect.

The idea is to apply these effects then edit them to ensure that the user looks at an image for instance, and doesn’t register that it has a great shadow to it (of course it might be clear to another trained designer). The effect of the design should not be standing out, but rather blending in to further the message and goals of the visuals.

Conclusion

Just like Oliver Reichenstein noted, micro and macro elements must come together seamlessly for complete invisibility to be achieved. Every detail must be perfected down to a T. It’s about purposeful, simple design.


Jack Dawson is an IT specialist and a consultant with http://webds.com/ and has been in the industry for the last 20 years. When not thinking about programming he loves hiking in his native Arizona.

 Request Website Magazine's Free Weekly Newsletters 

Login To Comment


Become a Member

Not already a part of our community? Sign up to participate in the discussion. It's free and quick.

Sign Up

8 comments

DonaldL 01-21-2016 2:51 PM

I preach this often.  For many of the websites I work with the design is not a high ranking aspect to the overall web-presence.  It should complement the message of the website - far from overpowering it.  IMHO too often organization want this luxurious over-the-top ‘look’ to their website which may be more of a distraction from the true intent of the website.  Some websites do demand a great design component.  But, in my experience and understanding, most do not.  Put your effort and money into a great message drawing that visitor to take it to the next step.  Isn’t that the real intent of it all?

Appreciate your thoughts, etc. ~ email me directly at DonL@psu.edu

VishalV 01-21-2016 6:11 PM

UI plays a vital role in web designing.

Coursework Service 01-25-2016 10:50 AM

"Good design is invisible" - great words. There are so many websites on the web nowadays, some better, some less. But still, less of the website has some unusual designs, that shows its peculiarity.

Internet tricks 01-26-2016 1:36 AM

In my view good design is necessary but how it works is the main thing.

OpcjeB 03-11-2016 6:32 AM

Thanks, nice article

Platforma 03-16-2016 6:59 PM

Thanks for all, good job

Reverse Phone Detective 03-28-2016 2:29 AM

Web design very important role in the user engagement.

coursework 04-19-2016 6:14 AM

We hold communication with clients in order to work in the accordance with the specific needs and instructions.

Add to the discussion!

999 E Touhy Ave
Des Plaines, IL 60018

Toll Free: 1.800.817.1518
International: 1.773.628.2779
Fax: 1.773.272.0920
Email: info@websitemagazine.com

Facebook


Twitter