All posts about
Visual design

Reading in a post-textual era

Only reading sharps the mind.

“This paper analyses major social shifts in reading by comparing publishing statistics with results of empirical research on reading. As media statistics suggest, the last five decades have seen two shifts: from textual to visual media, and with the advent of digital screens also from long-form to short-form texts. This was accompanied by new media-adequate reading modes: while long-form content invokes immersed and/or deep reading, we predominantly skim online social media. Empirical research on reading indicates that the reading substrate plays an important role in reading processes. For example, comprehension suffers when complex texts are read from screens. This paper argues that media and reading trends in recent decades indicate broader social and cultural changes in which long-form deep reading traditionally associated with the printed book will be marginalised by prevailing media trends and the reading modes they inspire. As these trends persist, it may be necessary to find new approaches to vocabulary and knowledge building.”

Miha Kovač and Adriaan van der Weel ~ First Monday 23.10

Web typography and layout: Past, present and future

From movable type to computational type.

“Can typography encourage long-form reading – not just scanning? What are the most exciting areas of cutting-edge experimentation in typographic technology and digital layout, and what new skills will we need to design tomorrow’s web content? Three experts – Mozilla’s Jen Simmons, publication design legend Roger Black, and ALA’s Jeffrey Zeldman – discuss typography and layout on today’s web: where we are now, and where we’re going.”

A List Apart

Scrolling and attention

Page turning versus scrolling. Except for snippets.

“While modern webpages tend to be long and include negative space, and users may be more inclined to scroll than in the past, people still spend most of their viewing time in the top part of a page. Content prioritization is a key step in your content-planning process. Strong visual signifiers can sometimes entice users to scroll and discover content below the fold. To determine the ideal page length, test with real users, and keep in mind that very long pages increase the risk of losing the attention of your customers.”

Therese Fessenden a.k.a. /tbfessenden | @TBFessenden ~ Nielsen Norman Group

The future of graphic and communication design

Design disciplines still relevant in the digital domain, even though there’re last century.

“To get a glimpse of the future of graphic and communication design, it’s not enough to think about new hardware, corporate needs, or visual trends. In the short term, digital design will move beyond screens to physical surfaces and augmented or artificial environments, and designers will occupy more positions where they are directing or consulting on larger and more complex systems of experience. Design is already less visual and more collaborative, and will continue along that trend. It’s not enough, though, to look five or ten years in the future. Will there be a Machine-Learning designer in 2050? Maybe. But in forty years, it’s just as likely that jobs will no longer exist, or at least not in a way that we would recognize them.”

Juliette Cezzar a.k.a. /juliette-cezzar | @juliettecezzar ~ Design Observer

Accessibility for visual design

Creating color, typography and lay-out to fit humans, all of them.

“They say beauty is in the eye of the beholder. As designers, we need to remember that the same is true of color and all visual abilities. It’s estimated that 4.5% of the global population experience color blindness (that’s 1 in 12 men and 1 in 200 women), 4% suffer from low vision (1 in 30 people), and 0.6% are blind (1 in 188 people). It’s easy to forget that we’re designing for this group of users since most designers don’t experience such problems.”

Nick Babich a.k.a. /nbabich | @101babich ~ UX Booth courtesy of @MikeClickr

White space isn’t just a UX fad

White space, silence and other ‘moments-in-between’.

“All good visual artists understand the importance of negative space, the empty area that draws attention to, and accentuates, the actual subject. Negative space (the artistic equivalent of a designer’s white space) is like the supporting cast whose duty is to make the star of the show stand out more by not standing out so much themselves.”

Jerry Cao, Kamil Zieba, and Matt Ellis ~ AIGA

How important is art direction to the success of a website?

Part of what’s called production values in cinematography.

“Today I want to offer more thoughts about art direction. Despite its benefits, is art direction something we need to do for the sites we create? How important is it to the success of the site? I want to address both questions today. I’m not sure I have great answers or even any answers, but I want to share some thoughts to help both of us answer the questions for ourselves.”

(Steven Bradley a.k.a. @vangogh ~ Vanseo Design)

People don’t read, they scan

Scanning also involves reading, but at a general level. Unless, the texts are relevant, interesting or remarkable.

“The emergence of highly content-based websites now means one thing: how to fit the content within a very well-functioned website while not sacrificing the aesthetics? In addition to that, the development of web nowadays mean viewers will be able to view these content across multiple sizes of screens. Such are the challenges of designing in these interesting times.”

(Zana Fauzi and Dahlia Ahad ~ Stampede)

Meta-design: The intersection of art, design, and computation

The only thing that is missing is connectivity as a unique trait of digital.

“In a traditional design practice, the designer works directly on a design product. Be it a logo, website, or a set of posters, the designer is the instrument to produce the final artifact. A meta-designer works to distill this instrumentation into a design system, often written in software, that can create the final artifact. Instead of drawing it manually, the designer programs the system to draw it. These systems can then be used within different contexts to generate a range of design products without much effort.”

(Rune Madsen a.k.a. @runemadsen ~ O’Reilly Radar)

Creating style guides

Documenting design decisions is a honorable piece of work.

“(…) a style guide is a living document of code, which details all the various elements and coded modules of your site or application. Beyond its use in consolidating the front-end code, it also documents the visual language, such as header styles and color palettes, used to create the site. This way, it’s a one-stop place for the entire team—from product owners and producers to designers and developers—to reference when discussing site changes and iterations. Several companies have even put their guides online; Starbucks is the most well known of the bunch, but others exist.”

(Susan Robertson a.k.a. @susanjrobertson ~ A List Apart)

The woman behind Apple’s first icons

Honoring our historical roots is what makes us more mature as a relevant domain in world history. Even though is still three decades old, sort of.

“Thirty years ago, as tech titans battled for real estate in the personal computer market, an inconspicuous young artist gave the Macintosh a smile. Susan Kare was the type of kid who always loved art. As a child, she lost herself in drawings, paintings, and crafts; as a young woman, she dove into art history and had grandeur dreams of being a world-renowned fine artist.”

(Zachary Crockett a.k.a. @zzcrockett ~ Priceonomics)

Content-out layout

Old typographical systems get a second life.

“Grids serve well to divide up a predefined canvas and guide how content fits onto a page, but when designing for the web’s fluid nature, we need something more… well, responsive. Enter ratios, which architects, sculptors, and book designers have all used in their work to help set the tone for their compositions, and to scale their material from sketch to final build. We can apply a similar process on the web by focusing on the tone and shape of our content first, then working outward to design fluid, ratio-based grid systems that invite harmony between content, layout, and screen.”

(Nathan Ford ~ A List Apart)

The Dribbblisation of design

How the logical, mental and virtual structures come together in an app.

“A product architecture is not an information architecture. It is not a set of pages that link to one another, or something that shows modals and describes what buttons do. A prototype will always serve this purpose better. It is a level deeper than that. It is the structure. The building blocks. It shows the objects in the system, and the relationships between them.”

(Paul Adams a.k.a. @Padday ~ Inside Intercom)

The tricky science of color perception

Color is still not well understood in digital design.

“Color is infinitely shifty. It’s unstable in the presence of nearby colors. It’s vulnerable to tricks of the light. It acts like it’s moving when it’s not. It can act like it’s there when it’s not. Put another way, color is subject to a thousand kinds of distortion as it travels from an object, through light, through your eye to your (acculturated) brain. Yet the tricky, interwined science and art of color perception still goes under-appreciated.”

(Jude Stewart a.k.a. @joodstew ~ Design Observer)