Posts Tagged ‘webDesign’

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

September 25, 2017

“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

September 25, 2017

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

June 20, 2017

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?

April 21, 2017
  • 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

March 15, 2017
  • 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

Why White Space Is Crucial To UX Design

February 14, 2017

White space can be broken down into four elements:

  • visual white space (space surrounding graphics, icons, and images);
  • layout white space (margins, paddings, and gutters);
  • text white space (spacing between lines and spacing between letters); and
  • content white space (space separating columns of text).

Jerry Cao and Kamil Zieba and Matt Ellis

Page load and attention span

May 9, 2016

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

 

Parallax scrolling

May 9, 2016

“In the age-old debate between beauty and function, parallax scrolling wins the beauty pageant, but fails miserably in terms of function.”

Parallax Scrolling: Attention Getter or Headache? by Jacqueline Kyo Thomas

Responsive Web Design

February 28, 2012

Responsive Web design is a combination of fluid grids and images with media queries to change layout based on the size of a device viewport. It uses feature detection (mostly on the client) to determine available device capabilities and adapt accordingly. With responsive Web design one code-base, deployment, and URL provides you with access to many devices including future ones you haven’t encountered yet. But optimizing images, video, third party widgets and more using client-only solutions can be challenging.

Luke Wroblewski

Responsive Web Design

August 31, 2011

At its core, Responsive Web Design is about serving the same HTML to every device and adapting its presentation (mostly through CSS) based on the specific capabilities of the device being used to access it.

Luke Wroblewski: Why Separate Mobile & Desktop Web Pages?