Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Holistic Web Design: Finding the Creative Balan...

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

Garrett Dimon

March 12, 2006
Tweet

More Decks by Garrett Dimon

Other Decks in Design

Transcript

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. 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.
  8. 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.
  9. Plazes. 10 - Clear that there’s room for improvement. -

    Definitely done by technical people. - How we chose the site
  10. 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.
  11. 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.
  12. 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.
  13. 16 - These are great because they let you focus

    on the content and not get caught up in design
  14. 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.
  15. 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.
  16. 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.
  17. 20 - Everybody provided their input and discussion - Ended

    up with the identity with the most personality.
  18. 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
  19. Goals 1. Valid XHTML & CSS 2. Less is More

    3. Provide Hooks for Shaun 24
  20. 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.
  21. 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
  22. 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.
  23. 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
  24. The Home Page a.k.a. The Salesperson What’s this? Maybe they

    should call it “Stalkr”. Where do I register? 34
  25. 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.
  26. 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?
  27. 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.
  28. 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
  29. 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.
  30. 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.