CMS Web Design: A Guide to Dynamic Content Applications

By | Blog | No Comments

This post was written by Ian Spangler, Digital Designer for Toptal 

UI/UX techniques for the dynamic content-driven world of online media.

A large majority of web applications and mobile apps, especially in the online media space, are powered by content management systems (CMS) such as WordPress, Drupal, and others. These systems have come into existence to meet the needs of an internet age where content is king and dynamic—changing continuously and frequently.

In the past, most websites were static—not built to evolve and grow seamlessly. Now they are considered to be living systems, and there is an optimal way to design for them.

The following is a guide for digital designers looking to expand their repertoire beyond static websites and landing pages, and to start designing effectively for dynamic content-driven applications such as news sites, blogs, or even social networks where users publish content regularly. In order to make this transition, designers will need to understand how these types of applications are typically structured as well as to adopt a “content-first” mindset in the design process.

CMS Web Design IA Patterns in CMS-Driven Applications

Designers should have a mental model of the common information architecture patterns in a CMS-driven application, especially if working on the UX (user experience) and designing it from the ground up. There are several page types that are common and integral to these applications, and they often connect together in a predictable fashion where the “post” functions as the core component. There is generally no theoretical limit to the number of posts that an application can contain.

Diagram of common CMS architecture design patterns for CMS web design

Front Page

This is the formal point of entry and is often synonymous with the home page. It is highly common, especially when there is a lot of content to access because it helps to highlight or feature what is most important. This page typically shows abbreviated versions of posts without revealing too many details.

Post Page

If the “post” is the core unit of a CMS-driven application, then the post page is where all public details about a post are displayed. It is probably the only truly critical page in the application, and it could be an article page or an informational page about a particular event, person, group, product, etc. In some larger applications, there may be multiple types of posts and post pages designated.

List/Category Page

This type of page is helpful for allowing users to navigate through all of the available posts, and filter them by category, attributes, or other criteria. A sort option is also common when the amount of content to scroll through is substantial.

Search Page

A dedicated page for search is not essential for smaller applications, but is always helpful. Sometimes, it can be merged or integrated with the category/list page.

User/Author Profile

This page is dedicated to each author or user that creates one or more posts. It is sometimes forgone on small news sites and single-author blogs, but is critical for large multi-author news sites, content-driven social networks, and other user-generated applications. A common and helpful practice is to include a listing of all of the user’s posts on this page.

User Home or Dashboard

This page shows information (including posts) relevant to the logged-in user, often in the form of a personal newsfeed or recommended content, recent activity, and statuses. The user home is essential for gated apps and social network applications, but optional or irrelevant for others.

Content-Driven UI Design for Dynamic Content

“Content precedes design. Design in the absence of content is not design, it’s decoration.” – Jeffrey Zeldman

When it’s time to design the user interface of a CMS-driven application, it is important to remember that content always drives the design, not the other way around. A content-first approach has been adopted by more and more media companies in recent years with proven results. With this in mind, here is a list of recommendations for UI designers to bear in mind when getting their feet wet in these types of projects.

Consider the Content Before Defining a Style

In a content-driven application, the visual style should support the content as a whole. Though the nature of these types of applications usually implies that content will be variable and not entirely predictable, more often than not it will fit within an overall theme. So when developing the brand’s aesthetic, actual content can be a great source of inspiration. At the same time, it can also be a liability if the designer becomes too attached to specific pieces of content and develops an overly targeted style.

Example of dynamic website design–The Verge

Example of CMS web design–Glamour Paris

Examples from two different CMS-driven news sites, demonstrating style in accordance with content.

DO get to know who will be creating the content on a regular basis.

In a CMS-driven application, content is largely determined by content creators, not designers. Hence, it is usually expected that the designer will relinquish some control of the look of the product to people who publish content on a regular basis—namely editors, authors, administrators, or even random users who input content through public forms.

Depending on the process that is agreed to, the designer can set some standards and guidelines for choosing images, preparing and cropping them, and even put some parameters on text styling. However, overall, it is the responsibility of the designer to shape the front-end of the application in such a way that subpar work on the part of the content creator, such as a poor photograph or very long headline, does not lower the quality of the design to a significant degree.

DO design with real content where possible.

Because the type of content can vary widely in a CMS-driven application, it makes sense to spend time looking at a large sampling of it. Ideally, in the case of a news site or blog, the designer would collaborate with content creators at the very beginning of the design process and request story examples, product images, videos, or anything else that can help make the design mockups feel as real as possible.

Designing with real content is preferable to using stock photos and dummy text and can even be done in parallel with wireframing or prototyping, as it helps to limit any surprises that may occur.

It’s not uncommon for a design to look stunning when a designer fills it with carefully pre-selected or photoshopped imagery and perfectly tailored headlines, and then see it descend into the doldrums once it rolls into production.

DON’T get overly specific with the style.

When setting a visual style, don’t pigeonhole the content by reflecting only a single mood, genre, story, or subject. Instead, keep it simple and universal with respect to the entire range of tones that might come into play in the content.

A very specific look and feel is acceptable at times for an application that caters to a niche audience, but can often come across as outdated and lacking in mass appeal in today’s market. Further, it can potentially limit prospects for growth and expansion to new verticals in the future.

To ensure that a design works for a wide range of content, it is usually a good idea to test it by mocking up an additional version or two of the same page with markedly different subject matter still within the thematic range of what’s publishable.

Example home page UI design treatments for dynamic content websites

In these two approaches to dynamic website design and a brand’s visual style, the one on the left fails to account for the full range of content that comes into play.

Design Each Page as a Template for Varying Content

Think of each type of page in the application as a template or blueprint for various media items (images, widgets, videos, blocks of text, etc.) to fill, and know which items will be subject to change and which ones can remain fixed.

DO establish a clear set of rules and consistencies.

Just because content may vary widely from one page to the next does not mean that there should not be a consistent set of formats in which the content gets presented.

Keeping headers and image sizes predictable and observing a logical information hierarchy from top to bottom within a page has many benefits, one being that it creates a sense of harmony throughout the application and keeps the user properly oriented.

To achieve this more easily, develop a modular, reusable set of style components for as many parts of the interface as possible, including headings, dividers, buttons, widgets, and other elements within a design program. Use these components repeatedly and in a logical scheme, keeping the variations to a minimum. This article by Toptal Designer Wojciech Dobry presents a nice guide for creating a UI library in Sketch.

DON’T give individualized design treatments to posts.

Try to avoid giving posts within the same section of a page too many differences in style and format. This includes changing up image dimensions, adding special text layouts or fonts, or puffing up individual images with customized adornments or graphics. This not only tends to kill visual harmony, but is generally a waste of resources and a drag on performance and maintenance from a developer or content manager’s standpoint.

Example post treatments in news site for CMS web design

In this CMS web design comparison, the design on the left sets up too many types of post formats, tailoring the text styles to the individual stories and creating inconsistencies.

DON’T assume that content will always fit within a designated area.

One of the inevitable results of the dynamic nature of a CMS-driven application is that the amount of text that appears in a given display area can vary in length. Often, character limits can be placed on text in the CMS to keep things reasonable, but the designer should never blindly assume that a block of text will always fit on a certain number of lines.

Not only do individual character widths vary, but it is also not customary to heavily restrict the creativity of writers by enforcing a very low character limit. This is why it is always good to test a design with real content as discussed above, and to vet each area with different samples of text.

To be sure about a worst case scenario, temporarily insert a sequence of wide alphabetical characters (such as “w” if the content is in English) up until an agreed-upon character limit is reached.

Example widget design with content overflow for a dynamic content website

Using dummy text instead of real headlines enables the designer to turn a blind eye to potential content overflow. This can be rectified through testing and resizing.

Allow the Content to Stand Out

In a content-driven application, content should be kept front and center at all times, and stylistic branding elements should generally recede.

DO surround dynamic content with clean, light, neutral background colors.

White or off-white is usually preferable. This allows for many different types of images, light and dark, to pop off the page without being overshadowed.

DO make images large and commanding.

Big images, especially photos, grab the visitor’s attention more effectively than anything else.

DO keep headlines and body text large and highly readable.

For text-heavy pages, choose web fonts that are highly legible, and deploy them at a large, comfortable size across all devices—desktop, mobile, and tablet.

Example of good CMS website design

An example of good CMS web design, GQStyle magazine keeps content the main focus in their lists of articles by deploying large images and plain, readable text in their design, while also being generous with white space.

DON’T over-design.

Often, digital and print designers like to deploy creative embellishments or give branding elements free rein in their designs. In general, while certain visual effects can sometimes enhance a content-driven design, they can also easily distract from the content, which is what really interests users when they visit a news site or blog.

Such effects can also make the application’s appearance less predictable as images change. It is generally a best practice to put a check on decorative fonts, bold patterns, illustrations, overlapping images, semi-transparent images, and fancy frames around images. Lastly, keep the logo relatively small compared to featured content.

dynamic content website bad example

While many graphic designers may love the highly stylized aesthetic employed on The Outline’s homepage, it obscures the content.

DON’T use colored backgrounds near dynamic images.

Bold, bright colors are in right now, but it is usually best to avoid applying large amounts of saturated color, or a colored background, around images that are subject to change as this can yield unpredictable results, including color clashes and over-stimulation, distracting from the content.

Example footer designs with dynamic content website

DON’T use dark backgrounds to cover whole pages of text.

Studies show that light text against a dark background is more stressful on the eyes than dark text on a light background in content-heavy applications. A dark background may work nicely for a special section of a page or a slideshow area where there is a limited amount of text, but is not well suited to cover long blocks of text.

Understand How Images and Other Media Work on the Back-end

Content management systems can vary in how they handle media, such as images, videos, and animation files, and sometimes a developer will purposefully set constraints on the media for efficiency purposes.

For instance, there may be limitations on how images are scaled and cropped and on the number of sizes and crops that can be generated and displayed. Thus, it’s important to consult with the application developer or content managers to determine what’s practical (and what they are willing to put extra development resources into) before forging ahead with a design.

DO find out what media formats are supported.

While it’s usually a given that an application will support images, it’s a good idea to consult with the content managers about what types of video, audio, and other multimedia files can be stored and displayed and the degree to which they can be customized visually.

For instance, it helps to find out if a custom video player will be built or if embedding a YouTube or Vimeo video on a page is the only option. In the case of YouTube, there are specific standards and limitations in how videos can be embedded, scaled, and skinned.

DON’T designate many different crops and sizes for images.

While it it is often technically feasible to create a lot of separate crops for an image, there is usually a negative impact in doing so. For instance, by default, the WordPress CMS automatically generates several sizes of an uploaded image in a single ratio, but only provides an option for one separately cropped thumbnail to be created.

Cropping each image to additional ratios not only requires a special plugin to be installed or a dedicated tool to be developed up front, but also places extra demands on editors as it requires them to do additional work for every image uploaded. Sometimes this also makes choosing a viable image more difficult, further slowing down workflow.

Wordpress admin media tool with cropping function for a dynamic content website

The default cropping system in the WordPress CMS.

DO determine whether legacy content needs to be supported.

When redesigning a legacy application, there are sometimes even fewer options available than when starting a new application from scratch. This is because there is already an existing repository of media, and migrating all of it a new format can often be an expensive or impractical operation from a development standpoint.

Provide Content Editors with a Variety of Ways to Style Text

Text content is a key element of a CMS-driven application, and in a news site or blog in particular, one will find that editors or writers, when left to their own devices, look for ways to style and format text to provide emphasis for certain points, break up content, add quotations, create lists, link to other content, and accomplish a number of other tasks.

Many popular CMS platforms like WordPress provide text formatting options by default, but if the designerfails to plan for how these styles will be customized to their design, the outcome will be something random, plain, or undesirable.

DO design for all of the common ways text can be formatted.

Especially for blogs and news sites, it pays to take the time to provide the developer with style rules for all of the common ways that text can be formatted including: bold and italicized text, headings and subheadings, numbered and bulleted lists, blockquotes, captions, and hyperlinks.

Example post page designs with and without extra styles provided in dynamic website design

Example of a post page with and without styles provided for hyperlinks and blockquotes for a dynamic content website.

DON’T give content creators too much stylistic control.

It’s generally not a good idea to open up too much design control to editors. Allowing them to do such things as build their own layouts within pages or color text in more than one way can be daunting or time-consuming for some people and produce ugly, inconsistent results in the hands of others.

Future Patterns of Content-driven Design

With the advent of new technologies such as augmented reality (AR), new paradigms for content-driven design have begun to arise. CMS-driven applications in the augmented/mixed reality space, which are currently in their infancy, use real-world objects and/or scenes as a key part of the content.

A particular mobile user’s viewing environment, lighting conditions, and physical proximity with respect to text and inserted 3D objects can all affect the end result. This alters the notion of content curation significantly and adds an extra layer of unpredictability that should be taken into account in the design process.

dynamic app design: AR application in news content

Two screens from the Quartz news app’s AR feature showing different use cases affecting content.

CMS Web Design Is a Little Different

Designing for CMS-driven applications means putting content first, style second. It also means planning for and embracing variability and unpredictability in the content that one is designing around. The ability to accommodate myriad potential outcomes will become even more critical in CMS web design as emerging technologies transform the nature of content itself.

Master Hot Design Trends with These Photoshop Tutorials

By | Blog | No Comments

This post was written by Miklos Philips, UX Designer for Toptal

 

Our daily lives are are saturated with amazing images. Visual design experiments become hot graphic design trends, and suddenly we see them everywhere.

Striking visual designs are plastered all over the sides of buses, posters, billboards, TV ads, magazines and of course, digital products. They have many names, including duotone, double exposure, scan lines, glitch, smudge, color channel, photo masking, vibrant-garish colors, and misprint.

graphic design trend glitch visual effect on a subway ad

The graphic design trend “glitch” on a New York City subway advertisement.

As with fashion, design trends are often recycled from decades past—we see them coming back again and again: Russian constructivism, Bauhaus, screen printing, 1970’s… etc. Simple, saturated geometric design patterns have been around for almost a century, and designers are still using them because they’re just as effective as they were 100 years ago.

Luckily, today’s designers have a much wider variety of digital tools with which to create these trendsetting effects than they did in earlier days. Still, even though the tools may be easier to come by, let’s not forget that it’s brave creativity and visual innovation that will forge the freshest, most compelling designs.

Some creative directors and designers may resist design trends because they don’t want to be seen as “followers.” However, using graphic design trends could prove to be an important decision because doing so can help make a designer more contemporary. Daring to be different also has its rewards. The best designers “follow and borrow” heavily from trends—past and present—at times creating something entirely new by combining graphic design trends into something striking and fresh.

Word of caution—designers should use graphic design trends in their work only when appropriate, and keeping branding in mind. For example, people expect stability and trust from banking, investing, insurance brands, and so on—so a subversive counter-culture effect like “glitch” may not be appropriate in these cases.

double exposure effect motion graphics following a design trend

The HBO series True Detective uses “double exposure” to great effect in its opening titles.

Let’s look at a few of these hot graphic design trends, and share some of the top Photoshop tutorials on how to create them.

Hot Design Trend: The Double Exposure Effect

Spectacular image combinations can be achieved by using the “double exposure” effect. The name comes from celluloid film photography where two or three photos are taken without winding the film forward in the camera, exposing the same frame multiple times with different images. This trend featured a lot on movie posters and TV promos. As seen above, TV show opening titles such as True Detective on HBO have been using this effect with motion graphics to great affect.

double exposure photography effect graphic design trend

double exposure effect visual design trend

double exposure photoshop effect a hot graphic design trend

In order to achieve a great double exposure effect, careful image selection is very important. High-contrast images work best when darker areas take up an area of the image where another image is going to be used. Juxtaposing a portrait with a more detailed image such as a cityscape or landscape is often done.

Here are some top Photoshop tutorials on how to achieve this hot design trend:

Double Exposure Effect Photoshop Tutorial #1:

Double Exposure Effect Photoshop Tutorial #2:

Double Exposure Effect Photoshop Tutorial #3:

Glitch, Misprint, Visual Interference Effects

This is a double-taker. It catches the eye in a sea of “perfect images” because it’s all about imperfection. It’s based on the unexpected result of digital errors known as “glitches.” Everything around us—advertising, posters, magazine covers, and TV promos—has been Photoshopped to perfection, (some would even call it “fakery” or “visual pollution”), thereby driving a desire to see more real, organic, less-than-perfect images.

Often more appealing to younger generations, this design trend is a subversive, counterculture, “anti-fake” movement intended to make designs stand out. As mentioned above, it may not be appropriate for some situations or brands, so designers are advised to tread carefully if choosing to implement this effect.

Most designers would use the term “glitch,” but sometimes it’s called a VHS effect, RGB shift with scan lines, misprint or visual interference. Innovative designers sometimes combine several types of these vogueish effects into something new.

glitch, misprint, visual interference effects graphic design trends

Mr. Robot posters used variations of the glitch effect to stand out and reinforce the counter-culture sensibility of the show.

glitch, misprint, visual interference effects graphic design trends

The misprint/color shift design trend and a combination of the color-shift and glitch effect

video scan lines graphic effect design trend

Video scan lines and image-shift are also used to create unusual, eye-catching graphics.

Everyone has their own method of creating this effect, so look around YouTube and pick one that you like. There are even Photoshop Actions designers can buy to create the glitch effect with just a few clicks. Here are a couple of top Photoshop tutorials on how to achieve this design trend:

Glitch Effect Photoshop Tutorial #1:

Glitch Effect Photoshop Tutorial #2:

There are even ways to achieve a cool glitch effect with only CSS as this slideshow demo and this landing page demo show.

Duotone Effects

Duotone has been around for a while but never seems to get tired. Hundreds of years ago Sanguine was used (red chalk on paper) to create simple one-tone drawings by artists such as Leonardo da Vinci. There’s something enduring about breaking an image down to simple tonality and a modern duotone image isn’t all that different from an old master’s sketch.

duotone drawings using sanguine - red chalk on paper

Sanguine drawings by Da Vinci and Mademoiselle de Mondran, and a modern duotone image

Today from Hollywood blockbuster posters to Apple and Spotify, everyone seems to be using the duotone effect. The purpose, again, is to stand apart, to be seen as something different. There are even Photoshop Actions and many mobile apps for creating duotone effects easily.

blade runner poster duotone effect follows a graphic design trend

photoshop duotone effect design trend

duotone effect visual design trend

creating a duotone effect graphic design trend
Here are some top Photoshop tutorials on how to achieve this happening design trend:

Duotone Effect Photoshop Tutorial #1:

Duotone Effect Photoshop Tutorial #2:

Duotone Effect Photoshop Tutorial #3:

RGB Split, Color Channel, Double Color Exposure

Here is another eye-catching effect that can use photos, text, and shapes. This effect sometimes uses 3 different images in 3 different color channels of the same subject, and juxtaposes them for an interesting image. This effect can sometimes also be seen as mixing together the glitch effect and RGB split effect. Some designers get really creative and mix double exposure, glitch and the RGB split effects.

rgb shift effect design trend created in photoshop

color channel and glitch effect photoshop actions

photoshop tutorial color shift effect a design trend
Here are some top Photoshop and Affinity Photo tutorials on how to create this trending visual design effect (please disregard what they call the effect, everybody has a different name for it):

Double Color Exposure Effect Photoshop Tutorial:

Double Color Exposure Effect Affinity Photo Tutorial:

Vibrant, Garish Colors and Fluorescent Duotone Effects

Again, the goal here is to really stand out. This trend uses vibrant, saturated and fluorescent colors in generous amounts over the design.

duotone fluorescent effect website design trend

New Deal Design’s website follows the fluorescent duotone effect design trend.

vibrant color effect graphic design trend

vibrant, garish color effect used on a web calendar, a website design trend

Calendar panel from AfriSam 2018 Corporate Stationery using the website design trend.

bold saturated colors effect website design trend

Employing this website design trend, design agency ELJE Group’s website uses vibrant, saturated colors.

hackernoon employs bright fluorescent saturated color effect a website design trend

Hackernoon uses bright fluorescent saturated colors to stand out.

The direction to take here is to be bold (when appropriate) and take risks with garish, saturated colors, whether it’s a website, album cover, or a poster.

Photo Masking, Cutouts, Abstractionism, Cubism

This is one of those recurring design trends that continues to be an enduring graphic design approach. It can be a hybrid of bold, flat color areas, montage, and masking. It’s a technique that is almost 100 years old, as these Russian propaganda posters from the 1920’s demonstrate.

russian propaganda posters with simple geometric shapes, cutouts, and photo masking visual effect

To create works of wide-ranging color and complexity, during the last decade of his life Henri Matissedeployed two simple materials—white paper and gouache—that became his famous paper cutouts. A simple pair of scissors was the tool Matisse used to transform paint and paper into a world of plants, animals, figures, and shapes.

matisse cutouts set a certain design trend for simple shapes and colors

The digital variation of cubism, abstract art, and “cutouts” today is the photo-masking design trend employed by lots of designers to attract attention.

photo masking effect design trend

Some of these visual layering effects resemble the famous paper cutouts by Matisse.

another design trend the photo masking effect

Interesting photo masking effects can be achieved with simple geometric shapes or typefaces.

photo masking effect graphic design trend

There are no hard and fast rules on how to create this effect. It all depends on the source materials and your creativity. Look for design and art inspirations such as the Russian propaganda posters, Picasso’s abstract cubist art and Matisse’s cutouts. Most of these photo masking techniques and collages can be created with layer masking in Photoshop. It’s more about photo selection and creativity, and less about technique.

Nevertheless, here are a couple of top Photoshop tutorials on how to create this hip design trend, the photo masking effect:

How to Create a Text Effect Poster Photoshop Tutorial:

How to Create a Letter Portrait Photoshop Tutorial:

Here’s another interesting Photoshop tutorial using photo masking to create this image:

photoshop tutorial for photo masking design trend

The tutorial is an example of how a few simple techniques can be used to create elaborate illustrations using multiple layers, masking, the pen tool, some basic lighting, and one simple texture.

Explore, Be Brave and Set Your Own Course

Today, creative bravery isn’t optional. It’s what designers must do as people’s expectations rise and their attention becomes harder to capture. Don’t shy away from following some design trends. In fact, mix it up, do something new with them! Rock the status quo, be bold and explore your fancy. Take the leap! Be creatively brave!

Art vs. Design – A Timeless Debate

By | Blog | No Comments

This post was written by Miklos Philips, JavaScript developer for Toptal.

Spend any amount of time working among professional designers and you learn that equating art with design is a surefire way to stir the pot and hear bold statements like:

  • “Design is not art. Design has to function.”
  • “Art is meant to provoke thought and emotions, but it doesn’t solve problems.”
  • “Artists primarily work off instinct, whereas designers employ a methodical, data-driven process.”

Unfortunately, the designer vs. artist discussion often deteriorates into ranting and raving. Lines are drawn, battle flags are raised, and productive dialogue becomes impossible.

What’s really going on here? Why have art and design been pitted against each other, and why are designersso adamant that design cannot be art? These questions are the starting point for a thoughtful conversation between Toptal designers Micah Bowers and Miklos Philips.

Bowers is a brand designer and illustrator who believes that art encompasses many creative disciplines, design being one, and therefore design is art.

Philips, a UX designer and lead editor for the Toptal Design Blog, takes the position that art and design may intersect, but they are distinctly different fields.

With our contestants in the ring, it’s time for the debate to begin. Gentlemen, touch gloves and go to your corners.

Is Design Art?

Micah: Design is art. Art is design. No exceptions.

Let’s be clear—I’m aware of how unpopular my position is, especially among my design peers. I’ve been to talks, read books, spoken with colleagues, and taken classes determined to establish the irreconcilable differences between art and design. Whenever I share my views, the backlash comes quick and fierce, but I remain unmoved by the counter-arguments (good luck, Miklos).

The insistence on a distinction between art and design has been like a constant, low-grade fever that’s bothered me for the last 15 years—first through my industrial design training, then during a fine arts graduate degree, and on into my career in branding and illustration.

My position is this: Great design is first and foremost art. What is this belief rooted in? A philosophical understanding of art.

What is design? Plato's philosophy of the meaning of art.

Philosophers like Plato have debated the meaning of art and the definition of design for centuries.

The quest to define art is steeped in centuries of debate. Greek philosopher Plato believed that art is essentially a reflection of a reflection of what is real. But his views are widely contested, and since we have to start somewhere, we must aim for an understanding that acknowledges history and the diversity of global thought and culture.

Paraphrasing the Stanford Encyclopedia of Philosophy leads us here:

“Art exists and has existed in every known human culture and consists of objects, performances, and experiences that are intentionally endowed by their makers with a high degree of aesthetic interest.”

By virtue of this definition, design is undeniably art. It can be found in every human culture. It is used to create objects, performances, and experiences. And, designers intentionally instill significant amounts of aesthetic interest into their work.

Here, the inevitable cry is heard, “Wait! You’ve undone yourself by a single word. Aesthetic!”

Designers love to make sweeping assumptions in regard to aesthetics, so allow me to construct a safeguard.

Much like art, the concept of aesthetics is a complicated field of philosophical thought and cannot be reduced to the designer stereotype that it means “making things look pretty.”

In fact, aesthetics covers many questions that are essential to the “art vs. design” debate:

  • “Is it possible to determine an aesthetic judgment from a practical one?”
  • “What is the basis by which we judge between utility and beauty?”
  • And, “How are the foundational beliefs by which we make aesthetic judgments influenced by time, culture, and life experience?”

Here’s my point: In the world of contemporary design, art has been narrowly defined and unfairly diminished into a pathetic, watercolor caricature. Designers have flippantly inflated the significance of their own disciplines (which vary in substance to a comical degree) over centuries of artistic practice, philosophical inquiry, and cultural understanding. Design is art. Art is design. No exceptions.

Miklos: Design needs to fulfill a function. Not art.

First of all, we have to separate out what type of design we’re talking about. I can see in the case of graphic design, illustration, and branding maybe design is somewhat “art,” but if we’re talking about more functional design—such as digital product design or industrial design—we need to go a lot deeper, and it becomes clear: Design is not “art.”

Great design is part science, part process, and part a practical set of solutions with a dash of aesthetics thrown in. Going beyond the surface, a designer inevitably discovers that great design is more about delivering solutions to problems.

Design is a process, not art.

What is design? Jonathan Ive quote

As a UX designer, I always need to dig deeper, beyond the facade that one might call a potential “design” and look at the bigger picture holistically: the target audience, the use case scenarios, the context, and the device the design is intended for: TV to mobile, desktops to tablets, to ATMs, etc. And when it comes to product design, let’s not forget validation and usability testing. If design were just art, how could you test it?

If design were purely about art, what about usability heuristics? Are such UX usability concepts as feedback, consistency and standards, error prevention, user control, flexibility, and predictability out the window? Isn’t design there to serve people? If you want to be an artist, be that, but don’t call yourself a designer. Be a painter or a sculptor.

“There is beauty when something works and it works intuitively,” says Jonathan Ive.

The “working intuitively” part alone can’t be achieved by “art”; it’s driven by user research and testing. Good design is also data-driven. What is more, in the near future, AI will transform the way design is delivered. It will be super-personalized and anticipatory. Will design as “art” be able to do that? I don’t think so.

You can’t say designing a ticket vending machine UI is “art.” Surely, aesthetics and emotional design come into play—as other articles on the Toptal Design Blog have mentioned before—because aesthetics play a role in design to the extent that designs with better aesthetics make a product seem to “work better.” But still, the function of the design and context of use need to be taken into account.

The Nest thermostat is a great example in the art vs. design debate.

For example, in Don Norman’s seminal book “The Design of Everyday Things,” he talks about design and the concept of affordances. (The concept of an affordance was coined by the perceptual psychologist James J. Gibson in his groundbreaking book The Ecological Approach to Visual Perception.) Norman writes:

“Affordances provide strong clues to the operations of things. Plates are for pushing. Knobs are for turning. Slots are for inserting things into. Handles are for lifting. Balls are for throwing or bouncing. When affordances are taken advantage of, the user knows what to do just by looking: no picture, label, or instruction needed.”

So, affordances are “perceived properties” of a function in design, and they need to be signaled to the user with “signifiers,” which provide clues to the user of the existence of a possible interaction. I don’t know how one would go about marrying the concepts of affordances and signifiers with “art.” They are essential interaction design concepts in the realm of HCI (human-computer interaction). They have nothing to do with art.

As a UX designer, I reject the notion. I mean, can you imagine a ticket vending machine designed in the cubist style by Picasso? Not saying it wouldn’t be interesting, but it wouldn’t be very effective or functional.

What Is Good Design?

Micah: Art solves problems. “Good design” is simply one path to a solution.

A ticket vending machine in Picasso’s Cubism? Now that would be good design! I can envision the hands of a capable artist leveraging Cubism’s stylistic dissonance into a clearly defined visual hierarchy that delights users with unambiguous points of interaction. Finally, we could wave goodbye to the bland and confusing button shrines we’ve all grown accustomed to.

Interestingly, such an idea is not without precedent. In towns and cities around the world, public art installations have been used to improve experiences previously overlooked or muddled by design. The Van Gogh Path, created by Dutch artist Daan Roosegaarde, is a perfect example.

What is art? Van Gogh path glowing art installation

The technology of experimental installation art has a substantial impact on the world of design.

Inspired by Van Gogh’s Starry Night, the path runs through Nuenen, NL (a town where the artist lived in the 1880’s) and is made up of thousands of small painted rocks that capture energy from the sun during the day and light up at night.

If this were all the project encompassed, it would be little more than a nice lighting effect, but the scope of Roosegaarde’s artistic vision is much wider. Van Gogh Path is a proof of concept within a larger project called SMART HIGHWAY, an ambitious effort aimed at reinventing the Dutch landscape by implementing a sustainable system of glowing, interactive roads.

The takeaway? Art and artists have the ability to solve substantial problems.

Problem solving requires knowledge, experience, skill, research, risk, and an understanding of human behavior, but unfortunately, many designers fail to acknowledge that artists employ problem-solving methodology in their work—even though artists have been systematically pursuing creative solutions for centuries, long before the distinction of “designer” was fashionable.

Need proof?

Again, we look to a Dutch artist, the master of light and painter of the Girl with a Pearl Earring, Johannes Vermeer. Vermeer lived during the middle part of the 17th century, experienced modest success as a painter, and died under a mountain of debt. Nearly two centuries after his death, however, Vermeer’s work was rediscovered, and his standing as one of the great painters of all time was cemented in the annals of art history.

But a strange thing happened. The more people studied Vermeer and his work, the more they realized that his paintings and process were truly unlike any other artist’s. How so?

  • Vermeer had no formal artistic training and apparently did not undergo an apprenticeship as a painter.
  • His body of work is quite small, consisting of less than 50 total paintings.
  • He never had any pupils or apprentices of his own.
  • Nearly all of Vermeer’s paintings were staged in one of two rooms in his home.
  • There are no surviving preparatory drawings or sketches attributed to Vermeer.
  • X-rays of Vermeer’s paintings reveal no underdrawings or compositional corrections.
  • His paintings contain lighting and perspective distortions that can only be seen through manmade lenses.
  • And finally, Vermeer was a close friend of Antonie van Leeuwenhoek, a Dutch scientist known for his trailblazing work in the fields of lens making and microscopy.

Is art design? Johannes Vermeer camera obscura painting controversy

Some scholars contest that the human eye cannot naturally perceive the lighting and perspective aberrations found in Vermeer’s paintings.

What does all this mean? Vermeer likely used an advanced, and still unknown, form of camera obscura to create his masterpieces. This is a contentious theory, but there is ample evidence from multiple sources to support such a claim.

How is it relevant to our debate? Vermeer invented an apparatus and process that went undetected and unduplicated for over 350 years and allowed him to create some of the world’s most iconic and technically exquisite paintings without any formal training. That is the pinnacle of problem solving.

Design is an art form, a method of human expression that follows a system of highly developed procedures in order to imbue objects, performances, and experiences with significance. Like all art forms, design has the potential to solve problems, but there is no guarantee that it will.

More than anything, I want designers to realize that art is not an asinine subculture of design rejects preoccupied with finger painting their feelings. In fact, a low view of art is also a low view of design, science, history, and culture that severely limits creative potential and interdisciplinary progress.

At the end of the day, art solves problems. “Good design” is simply one path to a solution.

Miklos: Good design is unbiased and delivers what people need.

Notice I didn’t say “what people want” like the Rolling Stones song that says: “You can’t always get what you want…you get what you need.” People don’t always know what they want, it’s up to designers to figure out exactly what they need.

By the way, how are paintings solving problems? I fail to see that.

Good design is subjective to a degree, but in my view “good design” is figured out along the way in an iterative design process with lots of validation/testing. It’s “design thinking.” It’s been around for decades. It’s something that just works, where things come together in the right way, at the right time, in the right moment.

The difference between art and design

Good design is definitely not about art or aesthetics alone. That is just the surface. Good design should be judged by several factors such as the intended user base, the environment, context of use, the medium, and the device it’s to appear on. For example, in the case of a ticket vending machine, aesthetics may not matter as much—people need to get things done and things just need to work for them. It needs to be super functional, fast, and efficient.

Good design in my mind is a design that is balanced in the right way between aesthetics and interaction design. To keep using the example of a ticket vending machine, in that scenario, the “look” is less important and should take the appropriate portion in terms of importance on the balancing scale, and usability and interaction design (functional design) should take the larger proportion.

We could also contrast “good design” vs. “bad design.” Bad design is pandemonium. It is disorder. It can be frustrating or annoying. It slows people down and drains them emotionally. It may actually be ugly, or simply unremarkable and therefore not worthy of anyone’s attention. To your audience, bad design is an impediment instead of an empowerment.

What is design? Bad design vs. good design

Looks kind of cool, but is it good design?

Is Design Subjective or Objective?

Miklos: It’s a mix of both in varying proportions.

Art and design are inextricably combined. I consider design as a holistic endeavor which includes “art.” Design is both subjective and objective but should be primarily objective. Proper design objectivity is achieved by user research (defining the target user base, getting to know the product’s users, observing context of use), working through the essential steps of a user-centered design process (UCD) and user testing.

A design can spring from a brilliant designer’s mind, but its practical use still needs to be validated. If design were only subjective, there would be no need for usability testing (which would most likely upset the designer because he/she would find that the design doesn’t work). The design would come from one person which, to me, is a ridiculous, backward idea. Designers who are 100% subjective are arrogant.

However, a small percentage of subjectivity does come into play—aesthetics play a role, and this is perhaps where emotional design happens. This is the step where the designer’s sensibility, “art,” and subjectivity is brought to the forefront. Great designers “dress up” or “put a facade” on the underlying functional design to create something that works on all emotional levels—visceral, behavioral, and reflective—to deliver a product with amazing UX.

Some designers believe good design must be objective. I don’t believe that. There is a touch of genius in Starck’s or Jonathan Ive’s designs. They bring a dash of subjectivity to their designs which has to do with taste. One of Steve Jobs’s greatest insults was to accuse someone of having no taste.

A chair demonstrating, not art vs. design, but that good design incorporates art

Chair design by Belgian designer Maarten Van Severen

Micah: Art and all its disciplines (design included) combine objectivity and subjectivity.

I’m not sure how it happened, Miklos, but it looks like we’ve found some sort of common ground, and I’m pleasantly surprised.

Art and all its disciplines, including design, require a mix of objectivity and subjectivity. Of course, there will be designers who roll their eyes and declare, “Art is purely subjective. It can mean different things to different people.” The obvious counterpoint? “Same with design!”

But let’s look closer.

When designers assert that art has to be subjective, they’re typically referring to the way people judge the outcome of an artist’s efforts. This manner of thinking about art places a supreme emphasis on results. In other words, art equals objects, performances, and experiences. Art is a painting. Art is a dance. Art is a light show.

Viewed this way, art is subjective. I think American Gothic is creepy, but you find it inspiring. I think an Eames Chair is classy, but you feel it’s kitschy. I think the WhatsApp interface is confusing, but you’ve never seen anything more elegant. Art is a result, results are open to interpretation, and everyone’s right!

What is art? The American Gothic painting represents principles of art.

Is it fair to judge art solely by the result of an artist’s efforts?

Luckily, the definition of art that I proposed at the start of this debate is more nuanced, so let’s refresh our memories:

“Art exists and has existed in every known human culture and consists of objects, performances, and experiences that are intentionally endowed by their makers with a high degree of aesthetic interest.”

Notice the words in bold. Artists “intentionally endow” their work with meaning to a high degree. In other words, they consciously enhance or purposefully enrich. There is intent married to action.

Understood more fully, art is not a result. Art is a process, and the process of art is overflowing with objectivity.

Don’t agree? Consider the centuries of repeatable practices, standardized tools, chemical reactions, and scientific discoveries owed to art. To the extent that there can be realities independent of the mind (the definition of objectivity), art is objective because it is process dependent.

If a ceramic artist fires a dish without first letting it dry, it will explode.

If a pianist places her fingers on the correct keys, she will play the intended chord.

If a web designer selects Dingbats for body text, large portions of his client’s site will be illegible.

The big takeaway, Miklos, is that I mostly agree with you. Art, and thereby design, is a mixed bag of objectivity and subjectivity sprinkled with enough ambiguity to keep this Art vs. Design debate raging on for years to come.

Conclusion

“It is not at all clear that these words—‘What is art?’—express anything like a single question, to which competing answers are given, or whether philosophers proposing answers are even engaged in the same debate… The sheer variety of proposed definitions should give us pause.” – Kendall Walton

At their most fundamental level, both art and design seek to communicate something, and whatever the differences, or whether classified as fine, commercial, or applied art—at their best, both forms elicit an emotional response.

It has been argued that the difference between fine and applied art is context and has more to do with value judgments made about the work itself than any indisputable distinction between the two disciplines. Furthermore, comparing “art” and “design” is, though a lofty endeavor, perhaps a quixotic one, as neither can be defined absolutely because they are always changing—boundaries are constantly being pushed and will hopefully continue to be so into the future. This debate, after all, is timeless.

How do we decide what is art and what is design, and why is the relationship between the two so fractured? Is it the difference between what is functional (design) and what is non-functional (art) that creates the dissension? Is a Noguchi coffee table or a Rennie Mackintosh chair merely a functional object, or is it art that happens to have a function?

Glaswegian architect, artist, and designer Charles Rennie Mackintosh was one of the first proponents of integrated art-architecture. He believed in the pure integration of form and function and sought throughout his career to bring forward the theory of “the room as a work of art.”

Art and design: Rennie Mackintosh interior design

Rennie Mackintosh designed the furniture and other fixtures in his buildings, where every detail contributed to a greater whole.

Frank Lloyd Wright believed so strongly in the unity of form and function that he changed the oft-misunderstood axiom, “form follows function” coined by his mentor Louis Sullivan to read, “form and function are one.” His plan for the Guggenheim “…was to make the building and the paintings a beautiful symphony such as never existed in the world of Art before.”

In conclusion, it is not art versus design, but the unity of the two that is at the core of any superior design. In other words, good design incorporates art.

Usability Testing for Conversion: Stop Following Trends, Start Using Data

By | Uncategorized | No Comments

This post was written by Joel Lopez, Designer for Toptal.

When it comes to designing a product, designers are looking for the best solution to ensure a product meets the needs of the user as well as the needs of the business. Making a conversion is an important business goal when convincing a potential customer to buy a product or use your service. But what role does good user experience design play—including usability testing—in ensuring the highest conversion optimization rate possible (i.e., of leads to sales)?

There are a lot of articles out there that claim to hold the ultimate key to conversion. There are always new trends or fads promising that, by changing a button to one particular color, using this specific picture or icon, or employing that certain layout, a product’s conversion rates will skyrocket.

However, there is no one size fits all “magic bullet” to conversion optimization. The needs and behaviors of every user demographic is different. It is essential to use data of the specific targeted audience in order to create designs that convert.

While UX best practices established by common behavior patterns are a good starting point, quick fixes reveal nothing about measuring the user experience of a product. If there is one single piece of advice designers should listen to, it’s to focus on usability testing to collect actionable data.

color trends for conversion optimization

It’s best not to follow trends such as “better converting colors” trying to achieve better conversion optimization.

Imagine your client has just launched a new website or product, but initial data is showing conversionproblems. To illustrate an example, the site conversion rate appears to be 0.3%—that’s only 3 out of every 1000 leads converting into customers. Presumably, such a dramatically low rate is not what the client is looking for.

A quick Google search on ways to convert more users will likely result in a list of results that make some confident “magic bullet” claims. “Red converts better than green!” “Orange beats any color!” “Add cat pictures! Everybody loves kittens!” “Pictures of people convert better!” “Pictures of products convert better!” Each one claims to have nailed the secret to high website conversion once and for all.

While each of these approaches may have in fact been successful in one or more scenarios, the likelihood that these quick-fix design tweaks are right for every site or product is slim. There’s no data behind claims that making the button orange over every site will help each one of them convert better. There is data to support, however, that what users really care about is that the website makes it easy for them to find what they want—in other words, it has to be usable.

Conversion optimization doesn’t simply boil down to using trendy colors in CTA buttons. The site ultimately needs to be “usable,” which means meeting the user’s specific needs effectively and with minimal friction. Leveraging usability analysis to better understand users and improving customer experience will make a larger, more lasting impact on conversion than whatever the most popular CTA button color is this month.

employing usability testing methods for better conversion optimization

Analyzing user behavior data for better conversion optimization (source: Frog Design)

Conversion Optimization Through Usability

There are a couple of important questions to answer before starting the process of conversion optimization:

  • Understand the Audience – What is the target audience? Collect demographic data and ask whether the website is tailored to them.
  • Define Measurable Goals – Is the site meant to capture more emails, get people to sign up for a service, or have them buy a product? Focus on the main goal and define success metrics to test.
  • Analyze Usability Scores – How usable is the website or product? Look at ux testing tools and usability metrics to find opportunities for improvement.
  • Optimize Content – Is the site’s content easy to read? Consider whether the content is geared to the personality and education level of the targeted audience and whether it clearly communicates a message/goal.
  • Check for Fallout – Are there obvious drop-off points? Look at the site’s bounce rate, time on page, and performance by page or area of site.

Answering these questions are fundamental to improving customer experience—and therefore, increasing conversions. Only once these questions are answered can designers begin defining usability goals and optimizing website conversion.

usability testing analysis employing user personas

Look at the usability testing data for measuring user experience, not just what’s trendy.

Understanding the Target Audience

Formulate a precise definition of who the target is. If the product is intended for people around the age of 18 – 24, the corresponding content, design, and usability metrics should reflect that. One common way to begin understanding the target audience is by creating personas.

Personas are models of fictitious or real people that describe members of the target audience, detailing their age, demographic information, occupation, tech-savviness, and what they’re looking to accomplish. UX researchers synthesize this kind of ux research to help designers establish empathy and guide design decisions for their target audience. Personas can be formed from data gathered through user interviews, focus groups, and other usability testing tools.

personas for usability testing and improving customer experience

Personas are representative users of your product which help with improving customer experience (by Miklos Philips).

Data platforms like Google Analytics are also great places to look for in-depth information about your users—such as where they’re located, what devices they’re using, and what content sparks their interest. In addition, heat map trackers like Crazy Egg will help explain what users are looking at and doing when they visit the site. Include these insights when building a profile of who the users are, and what they’re interested in.

Consider whether the existing site or product aligns with the qualities defined in the personas. Analyzing the connections as well as the snags between the solution and personas will help more clearly understand—and thereby target—specific user needs.

Defining Usability Data

Understanding the core characteristics of the target audience is part of user centered design (UCD), but that data only tells part of the story. By measuring the user experience and conducting usability analysis, UX designers can get a better picture of potential conversion problems or areas of friction in the existing solution, and identify opportunities to improve customer experience.

What is meant by usability? According to Jakob Nielsen of Nielsen Norman Group, “usability is a quality attribute that assesses how easy user interfaces are to use.” That usability is further defined by five key components: learnability, efficiency, memorability, user error and recovery, and user satisfaction.

A website or product that delivers great user experience and usability is more likely to convert users and have them coming back for more, as opposed to one that is flashy but unusable.

run a usability test

Run usability tests to see how your site measures up.

Look at the existing product and current analytics data. Decide on what usability metrics to analyze and compare with data for measuring conversion. Use that information to define some usability goals that will translate into improved conversion stats and start testing!

There are many types of usability testing methods that can provide actionable data to meet the site’s usability goals. Running usability testing with actual customers can provide great insight into what is working and what isn’t on the site.

usability testing methods

Look at the user experience holistically when measuring the user experience.

Usability tests like these don’t need to break the bank or explode project deadlines when done carefully and systematically with a usability test plan. Whether in person or set up using a remote usability testing tool like usertesting.com, watching an actual user navigate a site or product will reveal invaluable insights into a site’s usability.

Conducting quantified usability analysis is another one of many usability testing tools to help bring clarity to usability issues that might be costing conversions. When running a usability analysis on a website, look at several usability metrics and tabulate the data.

For example, dividing 100 users attempting a task with only 32 completing the task would mean a success rate of 32%. Tabulate the results with the existing solution to see which usability metrics are in need of improvement and by how much. When iterating design improvements, compare how those changes improve the usability score in those critical metrics.

In most cases, making changes that improve user experience will result in improved conversion rates. Better usability means that users will not only enjoy a website or product, but will have better reason to trust it. A user or customer that feels confidence that their needs are going to be met are more likely to complete a sign-up form, subscribe to a newsletter, or purchase a product.

Improving User Experience Through Design

A website’s usability as well as its presentation, colors, branding, content—everything creates an impact on the user and, in just a matter of seconds, their confidence is either won or lost.

looking at user pain points for conversion optimization

Map out pain points in the user experience for better conversion optimization.

Take a look at the quantitative data gathered from site analytics and usability analysis and compare it to the qualitative findings from usability testing, customer interviews, and observation. Look for patterns where a drop-off in conversions can be explained by something in the usability metrics. These insights should be the foundation to improve user experience, engender user trust and confidence, and boost conversions.

Once critical flaws are identified through usability analysis and usability goals have been defined, it’s time to make design decisions to improve the key components of usability. Optimize learnability so that users can immediately understand why they’ve arrived at the site and how it can help meet their needs.

Make the central message clearly stand out through good visual hierarchy of information. Immediately let the user know that they’ve arrived in the right place, and break down dense information into digestible pieces that are easy to remember.

Reduce the complexity of the actions users must take to complete tasks efficiently. Make sign up forms simple by removing unnecessary fields. Guide the user through the process by providing clear error messaging every step of the way. Something as simple as explaining a password character requirement within a sign-up form can mean the difference between a seamless experience and an abandoned task.

user onboarding improves conversion optimization

As part of conversion optimization, user onboarding done well increases customer conversion rates (source Johan Adam Horn).

Of course, the most important aim in user-centered design is to satisfy the user goal. Satisfaction is one of the key components of usability and, arguably the most essential to conversion. By guiding users to find what they need and make a decision with ease, you are not only delivering a great user experience, but improving the chances of a successful conversion.

Measuring UX Improvements

After making improvements to the design, it’s time to compare the new design to the previous solution. So how does one measure the success of new designs? Compare the usability data from one design to another alongside conversion metrics. If the design decisions were made with usability in mind, the impact on the rate of conversion should outshine and outlast any knee-jerk fad-inspired design decisions.

Good design requires a team to test and test often. Always be specific on what needs to be tested and define the success metrics in advance. The more specific the test, the better the data that can be collected to keep improving.

When testing for usability, one is by definition looking at things from the user’s perspective and not just focusing on making a quick sale. Empathy informs designs that help the user get what they need and in turn builds their trust.

Designs that are obviously created to “trick” the user into clicking on or buying something, end up damaging the relationship with that user and subverting the effort to convert them.

user centered design for optimal customer experience with usability testing methods

Better usability that improves customer experience will foster confidence from your customers.

Build trust and relationships through user centered design. By building trust with your users, you keep them coming back, and even promote your business indirectly by word of mouth. Positive reviews and a good reputation will turn into better leads.

Another great reason to focus on usability is SEO. Usability will not only create a great user experience, but it can help a website or product stand out from competitors in search results. Google puts a great deal of focus on giving the user what they need, just by searching. Sites that demonstrate the capability to provide the users with that information get ahead from others who are just trying to beat or game the system.

Trendy button colors and stylistic trends come and go. Focus on usability testing, the data, not the noise. Create designs that garner trust and convert customers.