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

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

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. Holistic Web Design
    Finding the Creative Balance in Multi-Disciplined Teams
    1
    - Welcome. (Virtual Stan?)

    View full-size slide

  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.

    View full-size slide

  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.

    View full-size slide

  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.

    View full-size slide

  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.

    View full-size slide

  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.

    View full-size slide

  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.

    View full-size slide

  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.

    View full-size slide

  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.

    View full-size slide

  10. Plazes.
    10
    - Clear that there’s room for improvement.
    - Definitely done by technical people.
    - How we chose the site

    View full-size slide

  11. Communication
    5 Cities and 4 Time Zones
    11

    View full-size slide

  12. Group Chats with
    the Entire Team
    Email Iteration
    12

    View full-size slide

  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.

    View full-size slide

  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.

    View full-size slide

  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.

    View full-size slide

  16. Down to Business
    Interaction Design & Information Architecture
    1
    15

    View full-size slide

  17. 16
    - These are great because they let you focus on the content and not get caught up in design

    View full-size slide

  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.

    View full-size slide

  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.

    View full-size slide

  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.

    View full-size slide

  21. 20
    - Everybody provided their input and discussion
    - Ended up with the identity with the most personality.

    View full-size slide

  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

    View full-size slide

  23. You are here.
    Friend
    Person
    Favorite Plaze
    Plaze
    Iconography
    22

    View full-size slide

  24. Coding the Beast
    Markup & CSS
    3
    23

    View full-size slide

  25. Goals
    1. Valid XHTML & CSS
    2. Less is More
    3. Provide Hooks for Shaun
    24

    View full-size slide

  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.

    View full-size slide

  27. Tips & Tricks
    Forms are tags too.
    26

    View full-size slide

  28. Scripting & Maps
    Integration
    4
    27

    View full-size slide

  29. Markup + Scripting
    Minimize touch points. Maximize flexibility.
    28

    View full-size slide

  30. Scripting. DOM Scripting.
    29
    - Would be extremely difficult to integrate with bad code.

    View full-size slide

  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

    View full-size slide

  32. Scripting + Design = Better Buddy List
    It’s like instant messenger.
    31

    View full-size slide

  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.

    View full-size slide

  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

    View full-size slide

  35. The Home Page
    a.k.a. The Salesperson
    34

    View full-size slide

  36. The Home Page
    a.k.a. The Salesperson What’s
    this?
    Maybe they
    should call it
    “Stalkr”.
    Where do I
    register?
    34

    View full-size slide

  37. 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.

    View full-size slide

  38. The Dashboard
    Me. Me. Me.
    37

    View full-size slide

  39. The Dashboard
    Me. Me. Me.
    I’m Stan. Who are
    these other people?
    What’s a
    37

    View full-size slide

  40. 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?

    View full-size slide

  41. 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.

    View full-size slide

  42. A Plaze
    Isn’t this what it’s all about?
    40

    View full-size slide

  43. 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

    View full-size slide

  44. 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.

    View full-size slide

  45. 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.

    View full-size slide

  46. Let’s see it!
    (Drum roll, please.)
    43

    View full-size slide