The Adventures of Cindy Li

SXSW 2006: Holistic Web Design: Finding the Creative Balance in Multi-Disciplined Teams

March 12 , 2006

Dimon:
Holistic?
Emphasizing the importance of the whole and the independence of its parts.

If you change class names you will change the site.
We would love to write perfect markup but we had to change the markup to accommodate design.

Project: Plazes

www.plaze.com Involve everyone: but know when you’re hindering instead of helping. Share, communicate, and educate. Within reason.

Sieber: For a project everyone needs to be on the same page

Respect everyone: It’s corny, but it’s true.

When working on a team, developers might say… you don’t rounded corners… when the designers wanted.

Compromise: But stand up for your ideas.

Stassi: Plazes.com
A location of where your friends are, for more of the social web.
The site has potential but a lot of problems.

Communication: 5 cities and 4 time zones

Inman: Group chats w/the entire team, email literation.
Dimon used tags to organize

3rd party integration: It’s never as simple as you want.

They are another member of your team they are rigid and you are stuck with what they give you. Think about how you are using Google maps and nail down the finer details so it doesn’t surprise you later. Sieber: each discipline gets their time, but that’s not how it works for the real world

Time-line and dependencies: Parallel development & integration

Real.. (arrows going all different.. and overlapping)
things aren’t as perfect as we would like and sometimes go backward.

Down to Business:Interaction Design and information Architecture

Primary idea and this is what is going to happen, this is why we got rid of tabs, more of a written document of a list. 
Stassi:didn’t want to hinder Santa Maria by giving him a wire frame, more freedom

Gettin’ Pretty with it: Identity, Visual designer, etc.,

Santa Maria: there was room for improvement, start with the logo in the sketch book (OH MY GOD Paper!! and Pen)
We sent it around and got people to write comments and feedback very early on.  It helped hammer out what was working and what wasn’t working. It helped w/the speech bubble.
Dimon: this is the first time I had a chance to give a voice to what SM provided
SM: refinements of what we thought it should mean and what should be applied, is it a flag, is it a speech bubble?
We ended up w/Clarendon, stable font.
Did sketches w/the design and jumped in using the maps
used the entire width for the map
SM: gave page that has the map 1/4 the size of what the page was…
Stassi: the map has to be huge because the whole site is for the map
I went back and said.. It has to be BIGGER.
SM compromised…
Dimon:There were 10 rounds of emails, replies, feedback, we didn’t expect he would do everything we asked. He would take some of the feedback and edit the good from the bad.
SM: iconography

< h3 >Goals:

• 1. Valid XHTML & CSS
• 2. Less is More
• 3. Provide Hooks for Shaun

Sieber:
Stay modular and attack things in chunks
Refresh and tighten up
Doug Bowman’s sliding doors
Siffer for Inman
He made us use mint and pay for it :D

Tips and Tricks

Comment those closing divs
Trips and tricks :forms are tags too..

Scripting & Maps: Integration
Inman: Silent member of the group was Google maps

Scripting. DOM scripting
Scripting+Design=Better Range Finder

It’s like instant messaging
Scripting+Design=Better Buddy List

< h3 >Almost there: Iterate and Enhance

Thanks to accessibility guru Derek Featherstone for additional insight.
Dimon makes Derek stand up for thanks! Girl whistles.. :)

It really is more than what people think it is. It needs to be accessible on devices, people who can see, or people who can’t use a mouse and has to use a keyboard.

The homepage aka the salesperson

Screen example…sorry I can’t take a pic:

Dimon: This is what plaze is.. it was too technical we wanted to make it more fun and something that people would want to be

side note: too much text.. not digest-able, users aren’t going to read it. I have the attention span of a gnat!

Stassi: There was a spot on the page.. that reloads the pictures, the guys who created Plazes wanted the pics for ego boosting but the users had no idea what it was and it took up space for no reason form the point of view of the user.

Dimon: privacy wasn’t addressed very well. They should call Plazes instead Stalker. The content reads.. u are probably worried about privacy. A reinforcement to reduce friction into the site.

Sieber: have examples of sample data, relevant data around you to peek your interest.

When you are logged in be aware of the different states so that you can see the use of the white space in the product.

The meta data that wasn’t relevant to the rest of the page

Cut it out because it was too much info

• 1.Use plain language
• 2 To go from 2k to 10kilometers… incrementing it.
• 3 Search: homes places and people before… but it is really just a search and put it at the top and have it friendly with a call to action to do the search.
• 4: big map
• 5: referring to the check boxes
• 6. Your friends on-line area.. what do you want to see..

The goal is to see it get an overview and go somewhere else. Go somewhere else and move.  If we don’t need that feature get rid of it?
Buddy list uploads in real-time.

A plaze: isn’t this what its’ all about?

This is the lowest page of importance on the site

• 1. Little map, overlapping controls (not useful at all)
• 2. flickr image might be there, might not be there, the balance for the page wasn’t right.
• 3. Comments, everything is disjointed, they aren’t segmented.

I’m going to go visit this to the page to do this and it doesn’t relate to the rest of the page. You don’t even know you can comment because there is so much info there. If you have no interaction it makes it irrelevant

The new design

• 1. map is big
• 2. flickr pics has lower hierarchy on page and lower importance than map
• 3. latest comments is below flickr because it makes sense to have it close to it
• 4. the tags/more info are the same area and it is more digestable

Let’s see it!

(Drum roll, please.) www.plaze.com
Hooks into the API of google. Inman wrote something to change the size of the maps. The range is small or it wouldn’t be right.

Dimon: has to be accessible….
when you get specialists we are very attached to our skill-set and sometimes we miss the picture.. but it takes time.