117 Speed Psychology

Our reactions to page delays have specific time increments:

0.1 seconds gives us the illusion of instantaneous response.

1 second keeps our flow of though seamless.

10 seconds keeps out attention, just barely.

After 10 seconds, we start thinking about other things, making it harder to get back into our task when the website finally responds.

If you design a site that makes users feel out of control, they will not care about completing their goals on your site.

#56 Authenticity

Authenticity indicates whether or not some thing’s “real.” Low-bandwidth websites appear more authentic, and current research shows that “authentic” ads and brand experiences are what consumers crave. People don’t trust most advertising. They trust online advertising less, in particular, online video and online banner ads.

We Rely on “Authenticity” to Trust a Website
Long ago, we trusted “the media” to give us the straight story, but trust in the press has been declining for years. The Web has further blurred the picture by creating a relatively level playing field for communicators, where scamming can appear just as well-produced as legitimate

Not Slick or High-brow
Low-bandwidth websites are not “hip”, they’re not slick, and they’re definitely not “high brow.” But they work by being direct, memorable, and honest. They work because they feel down at our “level,” connecting with us in a way
flashy sites can’t.

Low-bandwidth Websites are More Powerful
A personal touch generates response by triggering “reciprocity.” We believe someone put personal effort into reaching us. These websites are simple. They work at a visceral level. They don’t try to be more than they are. They’re unpretentious.

“Glossier,” “artier,” or “more highly produced” websites are NOT more effective. They just cost more and take more time.

#55 Why themes are important

It’s important to understand what a theme is and why it is critical in design. 

I present a quote by Johannes Itten (1888 – 1967)and then a quote by Hillman Curtis (1961 – 2012):

ITTEN Wrote:

Decorators and designers sometimes tend to be guided by their own subjective color propensities. This may lead to misunderstandings and disputes, where
one subjective judgment collides with another. For the solution of many problems, however, there are objective considerations that outweigh subjective preferences. Thus a meat market may be decorated in light green and blue-green tones, so the various meats will appear fresher and redder. Confectionery shows to advantage in light orange, pink, white, and accents of black, stimulating an appetite for sweets. If a commercial artist were to design a package of coffee bearing yellow and white stripes, or one with blue polka-dots for spaghetti, he would be wrong because these forms and color features are in conflict with the theme.” (The Elements of Color by Johannes Itten. c1961)

According to Hillman Curtis, theme is central. Hillman draws three concentric circles on a piece of paper in the very first client meeting. As he jots down keywords during the meeting, he figures out how close to the center of the “target” each one fits. The words in the center become the theme. Theme can be the most difficult part of the creative process. An idea generated in collaboration with the client is more likely to express their story than one generated in isolation.

Hillman Curtis says: “It’s all about communicating the theme. You do it by combining color, type, layout, and motion in a way that supports an identified theme. You might not see the way these elements work to communicate theme, but you “feel” it. As a designer, I try to justify every element and to [consistently and clearly] support the theme.”

“Every product or brand has a theme and these products and brands exist because of their ability to tap into recognizable themes … and make people feel something. So I focus on the theme … on telling a story. If you look at that title “Commercial Artist” and deconstruct it, you can
look at it this way; you have a responsibility to your client and their brand … which is the “commercial” part of the title…but you also have a responsibility as an artist … and artists have always responded, reflected upon, and hopefully influenced the world.”

“Our challenge as designers is to target a given project’s theme and use it as a guide that will influence every design decision we make, from the initial concept to the final composition.”

Here’s are my observations about web theming. A project outline or text leads to the exploration of storytelling possibilities, imagining picture-and-word sequences, making discoveries, and uncovering unforeseen problems. Out of this design puzzle, is then formulated a “theme.” A theme grows out of the communication goal. It affects all design elements. It needs to be appropriate to the client and the audience. It’s frequently a metaphor, a stereotype, or a cliche as these accelerate understanding. Memories alter perception. The reader/viewer’s historical memory (emotions) helps them recognize and interpret “theme” (images, symbols, fonts, colors, etc). The theme alters their perception of reality.

#54 Vintage Webpage Crafting: A Philosophy

The text of this webpage example is excerpted from an INFP writers emails to me. The site was built as an experiment of balancing speed and beauty. Her text is worth reading. Almost all links are disconnected for this demo. Once the text snippets were put together and edited it made a nice philosophy about her writing. Notice she is talking conversationally about “why she cares.” Very important and great example.

Low-bandwidth websites are about the actual making of DIY websites, the joy of building (and owning) something unique. It’s about crafting faster websites using free and lowtech resources. LoBand borrows from antiquated code recycling, scavenging, and reuse. It takes abandoned, throwaway code and plays with it. Especially code that is considered old-school, unfashionable, taboo, or forbidden by mainstream “web standards” programmers. These are “old code” like HTML Frames, Tables, single-pixel GIFs, marquees, and others.

Complex technology is an enslaving force.
LoBand are built from rediscovering “web artifacts” belonging to another time, primarily the 1990s. Modern websites are too complex today. LoBand sites are nostalgic and have the mark of a craftsperson burnished into them. Reusing old elements is classic craft like during shortages or rationing in a web cottage industry. This provides timelessness in a constantly changing modern technical culture. LoBand are a response to modern plastic-blob consumer technology. They are built with low-tech tables, CSS tiling background and HTML text.

Low-bandwidth sites aren’t mass-produced; they’re anti-slickness and unique.
They rely heavily on re-purposing vintage, legacy, low-technology code and software tools. Production requires learning low-tech and no-tech techniques to deliver project’s faster with little budget. They’re built with small or zero investment. There is nothing dogmatic or Utopian about them. This blog is about reducing production lead times and getting things done now —about things that work today. Results and workarounds.

Low-bandwidth sites are the answer.
Buyers of products and services have been tuning out traditional forms of marketing and advertising. At the same time, buyers are increasingly relying on search engines, blogs and social networks to research, form opinions and compare solutions. As a result, the effectiveness of traditional marketing services has been waning rapidly. However, despite this transformation, most marketing agencies and professionals have not adapted. Low-bandwidth sites are the answer for fast adaptation.

Simple and Fast Decision-making Process
To create this fast-loading, lo-band, single-page website, I decided to apply the “tradeshow booth” formula I’ve described elsewhere. The simple elements are:

1) color

2) foliage

3) lighting

4) legibility.

The color theme was determined previously –and I wasn’t going to change it but I did enhance the palette with a sampled yellow.

I selected a shot by searching on “purple flower” at stock.xchng – free stock photo site. The original image is shown below and was 3.7MB. Very large!

I then cropped and optimized the image as a 30Q 17K JPEG.

This was then placed as a HTML Table cell background image with an inline CSS style. This allowed HTML type to float above the background without “baking-in” the text on the image which would have made the text “fuzzy.” JPEGs frequently don’t render text as well as GIF images.

Lighting (depth and shadow)
A 13K GIF 32-color gradiant “string tile” was created in Photoshop to use as a CSS background image. It repeats in the x-axis at the top of the page. Gradients and shadows create a feeling of light-depth to a page. The screen at the top was “harvested” from a larger image after searching for images that were “delicate.”

The HTML Times New Roman author’s title was black and horsey. It was hard to read. Adding an inline Style “text highlight” with a yellow #FFCC33 sampled from the flower made it pop and allowed the type size to be reduced significantly.

The column width is set to 50% of the screen size.

The website now is attractive and weighs very little (36.6K) –a bonus. What needs changing now? The carrot image no longer seem to match the theme so I used a pencil sketch Photoshop filter to make it a little more artistic.

The page is extremely liquid as shown in the image below. And the window can collapse even further and still not break.