Early web design inherited a lot from art forms that preceded it by the way of complex and skeuomorphic user interfaces of computers. The recent evolution of user experience design towards simplicity takes us back to a more distinct relationship between content and design where user psychology plays an exceedingly important role.
In very broad terms, we can say that a web page – representing any content container – manifests itself to users as content plus its presentation. While it is obvious to most that different content will have to be presented differently, many aren’t quite aware of the fact that, how content is presented, what we call design, to a great extent determines what sense people make of it. This means content and design interact with one another.
Expanding on the concept of psychology driven design that I introdued in an earlier blog post, psychology impacts both, content and design, but the degree of influence will often depend on the type of website or app we are considering. Extremes are provided by platforms, such as Facebook, Twitter, Pinterest, YouTube, etc. or forums, wiki sites, comment boards, and so on, where the individual user has little control over the design and the designer of the platform has limited control over the content, even though these limitations are more and more lifting.
In ux/ui/web/app design in the classical sense, to which I will summarily refer to as web design in following, the publisher takes charge of both content and design, even though they may have to sacrifice flexibility to some extent when using template-based website builders, website creation tools, or e-commerce ready platforms.
In order to understand the relationship between content and design a little bit better, as psychology driven design is concerned, let’s take a look at three most popular website types, starting with e-commerce.
Different Website Types
Understanding behavioral and cognitive psychology will obviously help overall, and for all websites in this category in a similar manner: For content creation we need to cater to instinctive, emotional as well as rational sides of our users with suitable product descriptions, proper selection of images, pricing considerations, testimonials, user ratings, references, safety assurances and many other things. Regarding design, we need to make sure that users can easily find what they are looking for, unclutter the display and direct users’ attention to products, group related items so information can be easily digested, but at the same time set the mood with colors and typography, etc.
As a second type, we might consider a blog. Here, specifics for content creation will depend on the topic but nevertheless we need to pay attention to issues such as writing style, chunking and paragraphing, scan-ability of the content, breaking of text, etc. in all blogs. On the design side, navigational elements, visually balanced layouts, structuring of content with headers and sub-headers, typography, font-sizes, alignment, text width, stylizing links and so on are the things that matter.
The third type we might consider is a media website where rich content and its suitable presentation are key for success. Here, a consistent design with proper use of colors, grouping by similarity, proximity, common regions, use of good continuation etc. are especially important for structuring and laying out the content for easy digestion. In addition, user interactions as well as social feedback become especially important here. In this type of website it is most obvious what we mean when we say that web design is the arrangement of elements of content within a meaningful composition.
Precursors of Web Design
We need to appreciate, of course, that web design has inherited a lot of know-how from art forms that preceded it, such as publishing, illustration, lithography, typography, industrial design, and more, developed over many centuries. Unity, balance, proportion, etc. are not new concepts and neither are topics in cognitive psychology, such as inattentional blindness, gestalt theory, color theory, and so on. But obviously, the greatest influence has come from designing computer interfaces over the last forty odd years.
Early operating systems with graphical user interfaces were simple in their look and feel, constrained in their complexity by technology, rather than by the designer. But nevertheless, using only two colors for the first Macintosh, Apple managed to convey depth, textures, buttons and icons that mimicked real-life objects. This is called skeuomorphism and it was a brilliant idea to use this type of design, so people would easily adapt to using graphical user interfaces.
Properties of objects that reveal how users may interact with them are called affordances, which are important to understand when designing easy to use, intuitive interfaces. Examples are images of folders to denote file directories and buttons with bevels to let users know they can click on them. But the overall aesthetic at the time was quite restrained due to the low resolution of the black and white displays, so designers couldn’t deliver richer experiences.
This changed in time. As technology evolved, around the turn of the century, both Microsoft and Apple introduced colorful, skeuomorphic user interfaces with plenty of highlights, shadows and gradients. This trend of increasing graphical richness and sophistication was ongoing when the proliferation of the world wide web started occurring. Designers in the early years of the web were especially explorative on this front, using animation and sound together with images to produce excessively rich and often dazzling experiences.
The Early Years
When Apple introduced its first mobile system, the interface still contained complicated textures and skeuomorphic cues. However, at some point during the last ten years, designers realized that people can in the meantime operate digital interfaces without reference to real world objects and so skeuomorphism, with its difficult to design elements started giving way to simpler constructs. This, at the same time ushered in the era of return to basic design principles based on human psychology.
The web naturally followed this trend. Early table-based and flash-based designs had given developers pixel-perfect control over their interfaces, and so designers had not hesitated to create visually rich containers for their content. But as we began to grasp the fluidity of the new medium and to disconnect presentation from content using style sheets, so called CSS files, web design became more restrained.
Highly decorated containers could not change their widths and positions easily, so designers relied more and more on simpler CSS styling to make their layouts more adaptive and easier to maintain. Just as a refresher, designs that can adapt to different screen sizes of laptops, tablets, mobile phones etc. are called responsive, a term that in everyday use encompasses its precursor, fluid design, where layouts are built using percentages for widths, and also its difficult to maintain alternative, adaptive design, where specific devices are targeted.
In any case, these changes led us towards a simpler, content-focused web aesthetic, one that derives its beauty from typography, spacing and color rather than from a heavy use of textures and decorative images. Gone are raised buttons, images with shadows, and shiny glass textures, leaving us with a much simpler concept called flat design, representing a cleaner, more functional aesthetic, which is at the same time much easier for non-professional designers to handle.
The Swiss Design Style
From a historical perspective, these developments brought us full circle back to when the industrialized societies in the West embraced simplicity, getting rid of the ornamentations and extravagances of earlier times. This was when the progressive, radical movement known as the Swiss design style swept through Europe, exported to the rest of the world to become internationally acclaimed by the 1960s.
The Swiss design style can be defined as an authentic pursuit for simplicity and the idea that form must follow function. It is characterized by a keen attention to layout, color and typography rather than textures and decorations. Antoine de Saint-Exupéry once said, “Perfection is achieved, not when there is nothing left to add, but when there is nothing left to remove.” In that sense, the Swiss style searches for the minimal design that will help the content make an impact. This is a great example of the “less is more” principle that many designers have embraced of late. However, care must be taken that, what is necessary remains, something they often forget.
The Swiss design style was born in an institutional context. The majority of pieces from this movement were in the form of posters, stamps, institutional typographical identity, street signs, etc. which sought to create the earliest known user-friendly interfaces. What mattered was that the content could convey its intended message in a clear, unobtrusive fashion. Important design principles were uniformity of geometry, whitespace to let the content breathe, using grid systems for achieving consistent organization of information, coherent page layout, semantic structuring of data, paying a lot of attention to unobtrusive typefaces to use their potential to replace other design elements, using font-size as a tool for readability, impact and rhythm, providing readers with a hint about the hierarchy of the presented data, leading their eyes through the page thus working as an interface to the content and the remarkable use of large size photography.
Towards Simplicity
Now if all this sounds familiar, it is because there is a direct correspondence to what is fashionable in web design. Obviously things never stay the same and web designers, like their counterparts in fashion industry, love change. However, flat design, or the somewhat more elaborate material design of google, offer great opportunities to designers to get a hold of what the interaction between content and design really means.
Simplicity is not a temporary trend. It is the manifestation of a desire for greater authenticity in design, a desire to curb visual excess and eliminate the fake and the superfluous. And this is also where psychology driven design is at home. People sometimes refer to some aspects of it as distinctive design, as it uses visual weights of content elements to show users quickly what to focus on and where to go next. It underlines the ideal that what we display should fit the ideas we wish to convey.
Conclusion
Content and design are interrelated. Websites that are based on off-the-shelf themes by themselves cannot claim this relationship as a theme is always built on dummy content. Only when you work with real content can you begin to truly transform function into form. And this means that with such tools it is even more important to understand psychology driven design, so you can properly stylize your site after content has been added.
Psychology driven design is a fascinating topic. If you wish to learn in-depth how its principles can be employed for user experience, user interface, app, and web design, take the online course PSYCHOLOGY DRIVEN UX/UI/WEB DESIGN offered by Inspiraition.com at Udemy. This course contains essential material for any designer who wishes to learn to create impactful websites and apps that appeal simultaneously to the intellect, emotions and subconscious of users.
In case you don’t have the time to go through the forty or so hours of teaching material supplemented by examples, written resources, assignments, and quizzes presented in the course, we offer an excellent reference book called SUMMARY & TAKEAWAYS: PSYCHOLOGY DRIVEN WEB DESIGN that you can purchase as a kindle e-book or a printed book at Amazon.