Holistic Web Design: Finding the Creative Balance in Multi-disciplined Teams

The whole is greater than the sum of its parts. You'll see how accessibility, content, CSS, information architecture, JavaScript, usability, visual design, and XHTML create better experiences by working together rather than alone.

Moderator: Garrett Dimon Information Architect, GarrettDimon.com

- Shaun Inman haveamint.com
- Jason Santa Maria Art Dir, Happy Cog Studios
- Carl Sieber User Interface Designer, fd2s Inc
- Eris Stassi
- Garrett Dimon Information Architect, GarrettDimon.com

Transcript

1. Holistic Web Design Finding the Creative Balance in Multi-Disciplined Teams 1 - Welcome. (Virtual Stan?)
2. The Idea 5 People. 5 Cities. 5+ Disciplines. 2 Intros - ABC Order :) 1. Garrett - Interface Designer, Writer for Digital Web (Little of everything & accessibility.) 2. Eris - Interface Designer @ Apple (ID) 3. Shaun - Creator of Mint and the original IFR (Scripting) 4. Carl - Some guy named Carl. (Markup & CSS) 5. Jason - (Visual Design) - We wanted to generate conflict. We failed miserably. Everyone got along and the opinions blended together well to create better ideas. - Some conflict.
3. Holistic? ho·lis·tic (adj.) 1. Emphasizing the importance of the whole and the interdependence of its parts. 3 - What do we mean by Holistic Web - About viewing a project as a whole. - It's about a balance and zen state where all areas are equally important. - It's about balancing design, usability, accessibility, LOE, information architecture, making concessions in one area to improve another and the overall experience. - Being able to make an informed decision about when one aspect trumps another.
4. The Myth of Separation Business Design Accessibility Structure / Markup Scripting Presentation / CSS The Big Picture + _________________ 4 - Good clean markup is the foundation. - The layers aren’t separated. - Imagine redoing only the visuals without modifying the code, adding progressive enhancement scripts without modifying the markup, making a site accessible without the help of visual design or improved markup, etc. - Getting experienced specialists involved sooner helps bring different perspectives to the table.
5. Involve everyone. But know when you’re hindering instead of helping. 5 - Different backgrounds and specialties bring different things to the table. - The more diverse the ideas, the more choice you have in selecting the strongest ideas. - There’s always the possibility of having too many cooks in the kitchen.
6. Share, Communicate, and Educate. (Within reason.) 6 - A significant part of holistic design is making other specialists aware of the value and benefits of the other specialties. - For instance, teaching an engineer about the subtle details of markup or a designer teaching an accessibility guru about movement and balance in a composition. - The more this happens, the more respect different groups will have for each other.
7. Respect everyone. (It’s corny, but it’s true.) 7 - Problems arise when specialists don’t respect other specialists. - i.e. engineers may think designers only make things pretty, Designers may not be concerned with accessibility at the cost of a “better” design.
8. Compromise. But stand up for your ideas. 8 - Understand that there will be compromise. - If you feel very strongly about something, put a reasonable amount of effort in illustrating your beliefs and convincing the rest of the team. - i.e. Eris convincing us that Plazes was the ideal site.
9. Remember the big picture. But don’t forget the details. 9 - Leave personal pride and biases at the door. - Every team project is larger than individual team members, and for a team member to think their area is always more important than another is often due to pride.
10. Plazes. 10 - Clear that there’s room for improvement. - Definitely done by technical people. - How we chose the site
11. Communication 5 Cities and 4 Time Zones 11
12. Group Chats with the Entire Team Email Iteration 12
13. 3rd Party Integration It’s never as simple as you want. 13 - Google maps caused some accessibility challenges. - Integrate early. There WILL be pain points. - 3rd Parties rarely compromise. Being aware of this and addressing it early is always important.
14. Idealistic Timeline & Dependencies Parallel Development & Integration 14 - You don’t need to be afraid of working in parallel and integrating later. - This requires a bit of communication, but with some experience and expectation setting, it’s entirely possible. - It will cause some rework and effort, but with the right coding practices, you can minimize the inefficiencies. - It’s not ideal, but it’s not as bad as you’d expect. - Good code and modularity with good communication can mitigate the pain suffered by following this process.
15. Real Timeline & Dependencies Parallel Development & Integration 14 - You don’t need to be afraid of working in parallel and integrating later. - This requires a bit of communication, but with some experience and expectation setting, it’s entirely possible. - It will cause some rework and effort, but with the right coding practices, you can minimize the inefficiencies. - It’s not ideal, but it’s not as bad as you’d expect. - Good code and modularity with good communication can mitigate the pain suffered by following this process.
16. Down to Business Interaction Design & Information Architecture 1 15
17. 16 - These are great because they let you focus on the content and not get caught up in design
18. 17 - Lets you get a little more detailed and design modules if it’s a valid exercise. - Leaves the designer a significant amount of flexibility in the design and layout.
19. Gettin’ Pretty with It Identity, Visual Design, etc. 2 18 - Design is an area where it’s very easy to have too many cooks in the kitchen. - With reasonable expectations, the team should always feel comfortable, and encouraged to provide ideas and feedback even if it’s not their area.
20. 19 - Lots of ideas and iterations on logos were inspired from the diverse comments of the whole team, but in the end, it didn’t work - Jason made a command decision that the push pin wasn’t working. Despite how excited everyone was about the concept, we understood.
21. 20 - Everybody provided their input and discussion - Ended up with the identity with the most personality.
22. 21 - Lots of group iteration and passing things around. - Everybody provided input, but the group discussion worked out the good and bad for various reasons
23. You are here. Friend Person Favorite Plaze Plaze Iconography 22
24. Coding the Beast Markup & CSS 3 23
25. Goals 1. Valid XHTML & CSS 2. Less is More 3. Provide Hooks for Shaun 24
26. Tips & Tricks Comment those closing divs. 25 Closing comments: I’m embarrassed I didn’t think to do this sooner. Cleans the code up nicely. Easy to read and prevents confusion in complicated pages.
27. Tips & Tricks Forms are tags too. 26
28. Scripting & Maps Integration 4 27
29. Markup + Scripting Minimize touch points. Maximize flexibility. 28
30. Scripting. DOM Scripting. 29 - Would be extremely difficult to integrate with bad code.
31. Scripting + Design = Better Range Finder 30 - Shaun could have easily just scripted the basics and made the range finder work, but instead, he went above and beyond by improving the design at the same time. - Inverting this
32. Scripting + Design = Better Buddy List It’s like instant messenger. 31
33. Almost there. Iterate and Enhance 5 32 - It’s never too late to make changes. - Things change, goals shift, projects have moving targets. - It’s often easy to get irritated by numerous change requests and hurt the team dynamic. - Good coding standards and modular code makes it easier to make changes.
34. Thanks to accessibility guru Derek Featherstone for additional insight. Keyboard Navigation More than Markup Low Mobility Device Independent Text Equivalents Low Sight No Sight Accessibility 33 - A very unique challenge presented by the Map interface - Different types of accessibility (Lower vision, Blind, Mobility, Keyboard Navigation, etc.) - Text equivalents (Distance & Direction, 4.3 miles due north of you) - Repeating “Searched” Values - Contrast - Mobility - Keyboard Navigation
35. The Home Page a.k.a. The Salesperson 34
36. The Home Page a.k.a. The Salesperson What’s this? Maybe they should call it “Stalkr”. Where do I register? 34
37. 2 3 1 5 4 35
38. 1 3 4 2 36 1. Map & What is this - This IS Plazes. This content should be forefront and set expectations 2. Near You - This gives a quick glance at how prevalent plazes is. It should use IP addresses to select a plaze as close as possible to the person. 3. Selling Info - People are going to have questions, these paragraphs try to address that. 4. Register Now - This is given a bit more visual emphasis.
39. The Dashboard Me. Me. Me. 37
40. The Dashboard Me. Me. Me. I’m Stan. Who are these other people? What’s a 37
41. 2 3 1 4 38 1. Navigation - The IA and relationships/hierarchy aren’t communicated very well here. For the most part, what I really want is my stuff. I’ll search if I want to find people or plazes. 2. Who are all of these people? Are they close to me? Are they stalking me? 3. Poor use of real estate. If I haven’t used the launcher, put a link to the launcher and tell me how to get it. Encourage me to start participating. 4. What is this a picture of? Does it have anything to do with me?
42. 2 6 3 4 1 5 39 1. It’s all about the map. The map becomes the centerpiece of it all. 2. I’m really only concerned about my online friends. As long as I have quick access to all of my friends, I’m cool with that. 3. The navigation is simplified and all about “you” instead of being overwhelming. 4. Simple map controls and options let you decide what you want to see. 5. Quick information about your account always accessible. 6. Constant easy access to search.
43. A Plaze Isn’t this what it’s all about? 40
44. A Plaze Isn’t this what it’s all about? Free wi-fi! Suckers. This plaze has terrible food. RSS, Mashup, show me the web 2.0! 40
45. 1 2 3 4 41 1. This puny little map does nothing. It’s too crowded and zoomed in. 2. Comments aren’t immediately intuitive or obvious. This is a potentially very valuable aspect and needs more attention. 3. Why does a single flickr photo get so much attention? 4. The actions are intermingled within meta data and not easily identifiable.
46. 1 2 3 4 42 1. It’s all about the plaze and its meta data. 2. Comments get more attention. 3. A more appropriate use of flickr photos as well as more intuitive links for adding and viewing photos. 4. Tags and additional actions are always in a consistent location relative to the rest of the site.
47. Let’s see it! (Drum roll, please.) 43