All posts about
Visual design

Content-out layout

Added on 25 March 2014 Peter Bogaards

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

Added on 19 September 2013 Peter Bogaards
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

Added on 17 September 2013 Peter Bogaards
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)

Great design always means great style

Added on 2 September 2013 Peter Bogaards
Style is no easy concept.

“Many people confuse style with fashion, with the surface features of an object. No, good style runs deep. I work in interaction and product design, and the designers I work with think hard about what lies beneath the skin; about the way a product or service interacts with those who engage it; about the value, functions and utility of the design. We go deeply into the essence of the product. This sense of style is one of the fundamentals of great design.”

(Donald A. Norman ~ Misc Magazine)

Color and user experience

Added on 20 June 2013 Peter Bogaards
Great how resolution can drive design decisions.

“Proper use of color can enhance the user experience of any design as color affects humans psychologically, physiologically, and emotionally. (…) Remember that user experience is overarchingly affective. Both objective and subjective evidence supports the concept that color affects humans psychologically, physiologically, and emotionally. Importantly, these effects come wrapped in cultural contexts. This means that the reactions that color evokes in us can change depending on the culture or cultures in which we were raised, currently reside, or are currently acting as a user. Selecting and using color with thought, purpose, and care can enhance the user experience. We would love to hear your experiences with color use and choice in your designs. Please write your comments below. Until next time, please enjoy the experience.”

(Ashley Karr ~ SIGCHI Interactions)

Reusable divisions of space: Grids and modular design

Added on 26 February 2013 Peter Bogaards
If it has structure, it can be modular.

“Grids follow the same principle of modularity we’ve been considering the last few weeks. In some ways that seems obvious given the terminology modular grids. In other ways though it isn’t quite as obvious that they’re the same thing. However, when you think about how grids divide space and make it easier for us to make layout decisions, I think the modularity of grids falls right in line with the reusable modularity of components and design patterns. They separate concerns, by dividing the space into modular units. The characteristics of these modular units are reusable and through reuse help us more efficiently place information. Finally, the structure of these units in the grid leads to greater consistency in how content is organized.”

(Steven Bradley a.k.a. @vangogh ~ VanSeoDesign)

Information Surfacing: Communicating through Design

Added on 3 April 2012 Peter Bogaards
Manipulate user engagement? Direct user behavior would be better.

“Information surfacing is to interaction designers what information hierarchy is to graphic designers. (…) Conceptual models are nothing new, but often become unintentionally obfuscated during the design processes. The design team, often dazed and confused, struggles to figure out why the product is now cluttered and unintuitive. A design thinking method I call ‘information surfacing’ helps to remedy this problem. Information surfacing involves the prioritization of UI elements with an intent to manipulate user engagement.”

(Ernest Volnyansky a.k.a. @ernestvo ~ UX Booth)

Online Graphic Design Degree

Added on 3 November 2011 Peter Bogaards
Great set of resources all things graphics.

“Graphic Design undertakes the task of translating messages intended for specific audiences through visual communication. Such communication uses various outlets including typography, visual arts, page layout, and Web displays to effectively represent the message of a company, product, or brand. (…) Consider the following resources as you make your way in graphic design. Whether you are a student or teacher, just starting out in your career or simply looking for new information in this exciting field, these articles and resources will assist as you climb the ladder to success.”

Interaction Design Tactics For Visual Designers

Added on 12 September 2011 Peter Bogaards
It keeps coming back to the idea of ‘know the material you work with’.

“Interaction design is a multi-faceted discipline that links static communications together to form an experience. Understanding the basic principles of this discipline is core to designing websites that are not only aesthetically pleasing but that actually solve business problems and bring delight to their users. This article just scratches the surface of interaction design. For Web designers of any kind, considering these fundamentals when designing any transaction or interaction is imperative.”

(Jeff Gothelf a.k.a. @jboogie ~ Smashing Magazine)

Lost in translation: Bridging the gap between interaction and visual design

Added on 25 August 2011 Peter Bogaards
Interaction design deals with the behavorial dimension; visual design with the perceptual dimension of the user.

“Interaction designers and visual designers bring something different yet complementary to the table. If you can combine these in a pragmatic way it will enhance the final result and perhaps drive better innovation.”

(Adeline Salkeld-Blears a.k.a. @webdesigngirl ~ OptimalUsability)
courtesy of fredbeecher

The Fold Exists but Does it Matter?

Added on 26 July 2011 Peter Bogaards
Paradigms from paper technology (like ‘The Page’) are deeply rooted in our minds.

“Content decisions should be driving the design of each page. As people scan the page, they are looking for content that seems relevant. Following this information scent should lead them below the fold if that is where their target content exists.”

(Emily Smith a.k.a. @emilysmith ~ Design Festival)
courtesy of ronderksen

Visual Designers Are Just As Important As UX Designers

Added on 19 July 2011 Peter Bogaards
Always thought perception was an integral part of feeding the experience.

“Conceptually I believe you can break design into tangible and abstract activities. Tangible design typically draws on the artistic skills of the designer and results in some kind of visually pleasing artefact. This is what most people imagine when they think of design and it covers graphic design, typography and visual identity.”

(Andy Budd a.k.a. @andybudd ~ Blogography)

A Richer Canvas

Added on 24 March 2011 Peter Bogaards
“Grid system design should begin with a constraint. Something that is knowable and unchangeable. This constraint is used to build the modules of your grid. In book design, that constraint is defined by the page through subdivision. Book designers take the page, divide it up into a modular grid of spaces. These spaces (called modules) are then combined to create rows and columns. These are then filled with content (images and text). The text feels like it belongs because the columns are related to the physical object: the page. (…) Embrace the fluidity of the web. Design layouts and systems that can cope to whatever environment they may find themselves in. But the only way we can do any of this is to shed ways of thinking that have been shackles around our necks. They’re holding us back. Start designing from the content out, rather than the canvas in.” (Mark Boulton)

Design Principles for Visual Communication

Added on 21 March 2011 Peter Bogaards
“Visual communication via diagrams, sketches, charts, photographs, video, and animation is fundamental to the process of exploring concepts and disseminating information. The most-effective visualizations capitalize on the human facility for processing visual information, thereby improving comprehension, memory, and inference. Such visualizations help analysts quickly find patterns lurking within large data sets and help audiences quickly understand complex ideas.” (Maneesh Agrawala, Wilmot Li, and Floraine Berthouzoz ~ CACM)