Always design a thing by considering it in its next larger context

“Always design a thing by considering it in its next larger context”, said the Finnish architect Eliel Saarinen. “A chair in a room, a room in a house, a house in an environment, an environment in a city plan.”

When designing for the web, it’s tempting to think in terms of interactions like swiping, tapping, clicking, scrolling, dragging and dropping. But very few people wake up in the morning looking forward to a day of scrolling and tapping. They’re more likely to think in terms of reading, writing, sharing, buying and selling. Web designers need to see past the surface‐level actions to find the more meaningful verbs beneath.

In their book Designing With Progressive Enhancement, the Filament Group describe a technique they call “the x‐ray perspective”:

Taking an x‐ray perspective means looking “through” the complex widgets and visual styles of a design, identifying the core content and functional pieces that make up the page, and finding a simple HTML equivalent for each that will work universally.

Jeremy Keith: Resilient Web Design

Advertisements

Material honesty

Using TABLEs for layout is materially dishonest. The TABLE element is intended for marking up the structure of tabular data. The end result of using TABLEs, FONT elements, and spacer GIFs is a façade. At first glance everything looks fine, but it won’t stand up to scrutiny. As soon as such a website is stress‐tested by actual usage across a range of browsers, the façade crumbles.

Using CSS for presentation is materially honest—that’s the intended use of CSS. It also allows HTML to be materially honest. Instead of trying to fulfil two roles—structure and presentation—HTML can return to fulfilling its true purpose, marking up the meaning of content.

[About mobile first/responsive design:]

This content‐out way of thinking is fundamentally different to the canvas‐in approach that dates all the way back to the Book of Kells. It asks web designers to give up the illusion of control and create a materially‐honest discipline for the World Wide Web.

From Jeremy Keith: Resilient Web Design

Cognitive load is lessened with rounded shapes

According to research, it’s harder for the brain to process sharp edges — the cognitive load is lessened with rounded shapes.

Molly Mc Hugh

Research:

https://www.fastcodesign.com/3020075/why-our-brains-love-curvy-architecture

https://www.webdesignerdepot.com/2012/11/stop-being-so-square/

http://www.cns.nyu.edu/~david/courses/perception/lecturenotes/depth/depth-size.html

What is the Web?

  • The web is made of code and must be designed, there- fore designing with code is working with the right materials. This is the best course of action.
  • Content — what we write or otherwise express via the web — must be subject to design thinking and, in fact, all other design decisions should facilitate that.
  • Web pages are not immutable artifacts. They should be tolerant of changing, dynamic content. This content should be managed in terms of discrete components which can be reused as agreed patterns.
  • The potential audience of a website or app is anyone hu- man. Inclusivity of ability, preference and circumstance is paramount. Where people differ — and they always do — inclusive interfaces are robust interfaces.

Heydon Pickering: Inclusive Design Patterns – Coding Accessibility into Web Design, p.11

 

Baseline grids

  • Typography is the foundation of great design. Where ever possible I like to make use of the traditional typographic scale (6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 30, 48, 60, 72, 80, 96) as mentioned in Robert Bringhust’s book The Elements of Typographic Style. It’s a great way to establish a clear hierarchy and vertical rhythm for your project.
  • A 4px baseline grid provides the consistency and flexibility to design for both web and mobile without having to rethink about different measurements.

Rich McNabb

Page load and attention span

With each second that passes while a page loads, fewer users stick around. In fact, 47% of users expect a Web page to load within two seconds. If a page hasn’t loaded within three seconds, 57% of users will leave the site. This is a consequence of human psychology: We have an eight-second attention span. (That’s shorter than the attention span of a goldfish.)

Jacqueline Kyo Thomas