Archives for category: intuition

The Golden Ratio in web design

April 6, 2012 //
2

I’m terribly sorry for not writing. Let’s chalk it up to Mercury Retrograde, shall we?

A while ago I watched a short documentary called “The Science of Sex Appeal” which understandably focused part of its discussion on visual attraction, and how most people can come to a consensus about faces that are more attractive. We find the attractive faces generally more proportionate, but proportionate to what? Well apparently, faces that conform to the Golden Ratio, or “Phi”, are universally considered more appealing.

Here’s how it works:

This proportion is found more easily in faces most people consider attractive; for example, the ratio can be demonstrated by the length of the face: “a+b”, proportionate to “a”: the distance between the tip of the chin and where the eyebrows meet.

Then I started wondering how this might be applied to website design. Apparently, I am not the first to have considered this. Take for example, the homepage for Life magazine, which won a Webby in 2011 for “BEST VISUAL DESIGN – AESTHETIC”:

Now let’s apply an overlay of the Golden Rectangle over the same image of the Life homepage.

The results are interesting:

FYI, the transparent golden rectangle I used was from Joshua Garity's blog: http://www.joshuagarity.com/web-design/the-golden-ratio/

A great template for web design that’s universally appealing! I wonder if such a thing is now being taught in schools…

What’s more intriguing, though, is the question WHY this particular ratio is so aesthetically appealing to our brains? Humans have applied it in various examples of art, architecture and design, the Fibonacci sequence (which is an approximation of the Golden Ratio), but the ratio itself is beyond ourselves and our creation.

Approximations of “Phi” occur almost everywhere in nature, the proportions of the human body, and the dimensions and orbits of the planets in our solar system. But it’s more of a template, not necessarily a reality. It reminds me of the story of Plato’s idea of perfect forms, as well as the Allegory of the Cave. “Phi” is perhaps something to strive for, but reality (and from a more practical point of view, the needs of the business) may dictate differently.

Hmm…

Advertisement
Tags , , , , ,
Categories coding, intuition, user experience

Dream a little dream [space] with me

October 25, 2011 //
0

Sorry I’ve been away — moving and traveling — aren’t those life’s constants, anyway?

InteractiveWall from Festo HQ via A List Apart on Vimeo. The wall reacts to the presence of users, just like responsive websites should.

Last night B and I re-watched Inception, and I was thinking this morning that it probably wasn’t as popular or deemed Oscar-worthy as it could have been, potentially because the film didn’t use universal archetypes to create its dream space. The few characters that were fleshed out had flaws and attributes, but they weren’t necessarily the kind that most people identify with. It’s the universal that draws people and allows them to engage with a film or product, but in order to access the universal, you have to truly know your users (audience).

Along this same note, earlier I was reading about responsive web design, and how web designers need to be aware that they don’t know much info about the user; and many times, they don’t have a clue what kind of device or screen resolution the user uses.

The idea is that you now have to design for every single variable and difference — for devices that don’t yet exist, that will react to users who may not exist yet either!

So perhaps the lesson is that the future of web design and user experience is HOW to create and architect a (white) space that allows the User to dream his own dream — to fill a universal space with his or her own particular subconscious. Easy, right?

Tags , , , , , ,
Categories coding, intuition, user experience

Defining “l’espace blanc” (white space)

August 29, 2011 //
0

What is “white space”?

White space is commonly referred to as the space between things, such as words of text, or images, or radio frequencies. For a long time I’ve been interested in what’s left out of conversations, design, or print. What are those unspoken messages that we process, information we read between the lines, or visual cues we intuit without actually seeing?

As a web developer, I’ve become very interested in how a user experiences a website, without knowing what’s behind the scenes. Code itself contains a series of spaces (or non-spaces) that define its characteristics, how it displays on a page, and the functionality it enables. When I’m coding a widget or description, I must pay attention to the visual spacing the code will create for the user, as well as the spacing of the code itself (so it remains valid and parses). Luckily, however, as a developer I can validate or parse my code before it goes live; if the spacing is incorrect, I receive an error message:

A website user, unfortunately, doesn’t have the option of validating the messages they’re receiving; they have to make sense of what limited information they’re given to make purchases, find information, or communicate with others. How does a website make a user feel? How does a user figure out how to use a site and its tools? Can we define it?

When I was in college, a few of my English courses focused on post-modernism and deconstruction. One of my professors loosely defined “deconstruction” as explaining or recognizing what’s not being said or talked about in the story. What’s the elephant in the room?

In this blog I’ll attempt to deconstruct — or decode — what’s happening for users in terms of usability and emotional experience. You know, the sound of silence.

Thanks for reading.

Tags , , , ,
Categories coding, emotion, intuition, user experience
%d bloggers like this: