Notes: Holistic Web Design

The following are my panel notes from SXSW. As I am not the fastest typer I have paraphrased what was said. Should you notice any mistakes please do point them out in the comments for corrections.

Moderator: Garrett Dimon Information Architect, GarrettDimon.com

GD: The idea here was to start here with 5 people to pick a site and redesign it. The idea 5 People. 5 Cities 5+ Disciplines.

holistic is the purpose.

Emphasizing the importance of the whole and the interdependence of its parts.

The myth of separation in reality it's not that easy. Class hooks for scripting etc. sometimes you need to change the markup to accommodate the design.

SI: Involve everyone. Make sure everyone has his or her say. have everyone respect each other know when to concede and compromise.

CS: Share information and communicate be on the same page within the team

GD: Respect everyone, it's corny but true. you can end up with heavy conflicts. If everyone respects everyone's talents and skills you are one of a group of skills.

ES: Compromise but stand up for your ideas.

JSM: Remember the big picture.

PLazes.com designed to show all of the people given by a router's address? Show all of the people at a given location.

SI: communication 5 cities and 4 time zones. IM used for the group chats with the entire team. �rd party integration it's never as simple as you want. When you are using third party tools you re stuck with what they give you. We decided to standardise on Googlemaps.

GD: Parallel development and integration but what happened didn't follow the ideal.

ES: Down to business. Make sure that you know how to use the site. The dashboard pages show how and why things are going to work. these dashboards were handed to Jason to do the design rather than designing from a wireframe.

GD: Page description diagrams document the thought and the concepts first without worrying about the layout.

JSM: I started with the logo and turned to my sketchbook as that allows going through ideas really quickly. The rest of the team provided input.

GD: This was the first time I'd provided feedback in this way.

JSM next step was to go through iteration of the chosen logo and fonts. clarendon was chosen.

ES: the map needs to be bigger as the map is the most important aspect of the site.

CS: Jason compromised! (laughter)

GD: Everyone would give feedback and some and not all of these recommendations were heeded.

Iconography
JSM: the P shape was also used to define the icons.

CS:

Coding the beast.

Valid XHTML & CSS
Less is more
Provide hooks for Shaun.

Took screen shots to be able to show how the site design came together
Sliding doors and faux columns. And SiFR. Shaun didn't make us use mint.

Tips and tricks.
comment those closing divs
Forms are tags too use that as a container.

SI: Markup and scripting.
Google maps API is easy to use. I made sure the code was modular so that it wasn't dependent on pre-existing markup. code was marked up with comments. Used moths to work out how to work out the zoom levels in Km.

CS: The zone was reversed so that the current area was highlighted.

SI: The list of people in you location was trimmed to just being your buddies rather than the whole world.

GD: Accessibility: Derek Featherstone helped out. Being that this site was a map and we needed to think about how to deal with this. We needed a text equivalent to show a description of where people were. It's more than just screen readers. It's about mobility device lots more stuff than blindness.

Pages as they were.

The home page:

SI: the login register wasn't near the login so where to register wasn't obvious.
GD: the content was written in too much of a techy way. we wanted to make it more inviting.
ES: there was a picture that was totally unrelated to the content.
JSM: You can't tell what plazes is at this point.

The new page

The logo is harmonised by the icons on the map.
ES: the login was moved off the homepage
GD: privacy wasn't addressed very well so this was re-enforced.
CS: We showed information in the boxes at the bottom to show current information of what's going on.

The dashboard pages

JSM: The navigation needed to be simplified.
GD: Iframe used for friends list.
Whitespace in the middle was odd. there was no description of what the launcher was.
ES: the secondary content didn't make much sense.

The new dashboard page:
JSM: the nav was refined.
ES: the rangefinder was redefined.
GD: A search was added at the top to replace some of the nav
CS: the map was made bigger
SI: The checkboxes gave you control over what you could see.
ES: Your friends online was altered so that you weren't overwhelmed with useless info.
SI: The frames were replaced with Ajax

The old plazes page

GD: the map was not the most important thing on the page.
ES: It's hard to use and the user is turned off.
JSM: the comments aren't a bad thing but the it seemed unrelated.
ES: the comment area wasn't obvious.

The new plaze page

GD: the emphasis is on the map
CS: the Flickr content was added and not as prominent.
GD: Jason put in more consistency around adding comments or photos
JSM: text sizes were used to split up the sections of the site.

Let's see it. Drum roll

GD: the text is friendlier
SI: the range finder was using the sliding script as per
JSM: the icons show a lot of info in a small space.

GD: the goal was to show you how to see the site as the big picture. Not just focusing in on one aspect.
There was a lack of conflict in the group because of the respect within the group.
ES: Everyone understood every aspect of the site. It's important that everyone understand everyone else's job.
GD: I had never been involved with responding to the designs as most designers go off into their own space. This gave us all more involvement.

Questions:
What was the timeline for the project?

Started in July 2005

What does it look like in IE?
CS: It looks good in pretty much all IE versions.

Why didn't you talk more about the project management aspects?
GD: The time difference meant that we had to get together at a specific time. It was painless everyone got their bit done.

Are they going to use this design?
CS: We talked to the people who own the site. They might get funding with this design.

Why did you change the colours?
JSM: I can't take too much teal. We started with grayscale and I didn't wanted to change it too much away from that.

GD: I thought it was an old A list apart design that didn't make it! (laughter)

Did you use their API?
SI: no they didn't have one.

... Missed question! Doh!

ES: how would you recommend fostering that respect within a team of 120.
JSM: do your best to work out what everyone's roles are
GD: A lot of the problems are communication. The more educated everyone is about all of the other areas makes you understand where you're coming from.
CS: Take an engineer out to lunch or if you are a engineer take a designer out to lunch get to know each other.

Notes: Holistic Web Design

Stuart Colville

Topics