Loading ...
Sorry, an error occurred while loading the content.
 

Example sketches

Expand Messages
  • William Pietri
    I thought folks here would be as interested as I was to see these example design sketches: http://deeplinking.net/paper-web/ It includes on-paper designs for
    Message 1 of 9 , Jun 26, 2008
      I thought folks here would be as interested as I was to see these
      example design sketches:

      http://deeplinking.net/paper-web/

      It includes on-paper designs for portions of Flickr, Twitter, and Vimeo.

      I mention it here because I see agile teams using a lot of low-fi
      renderings like this, both for exploration of ideas and for
      communication about what gets built.

      Anybody have more examples like this?

      William
    • Nick Gassman
      ... I don t have any specific examples to share, just a tip. Although we re not doing Agile yet, this sort of sketching out of ideas is just standard practice,
      Message 2 of 9 , Jun 28, 2008
        On Thu, 26 Jun 2008 09:58:06 -0700, William wrote wrote:

        >http://deeplinking.net/paper-web/
        >
        >It includes on-paper designs for portions of Flickr, Twitter, and Vimeo.
        >
        >I mention it here because I see agile teams using a lot of low-fi
        >renderings like this, both for exploration of ideas and for
        >communication about what gets built.
        >
        >Anybody have more examples like this?

        I don't have any specific examples to share, just a tip. Although
        we're not doing Agile yet, this sort of sketching out of ideas is just
        standard practice, although more usually on flipcharts as a group of
        us expand on and discuss ideas. Typically then an Information
        Architect will take the ideas away and take them to the next (low-fi
        wireframe) stage in Visio. To keep the record of the ideas, I'll take
        pictures of the flips with my camera phone, and email them round the
        team. It works just as well when you just have words.

        * Nick Gassman - Usability and Standards Manager - http://ba.com *
      • Tom Hume
        +1 to using sketching and cameras to capture the results - this works really well for us. OTOH we ve noticed that when you get into rounds of preparing Visio
        Message 3 of 9 , Jun 29, 2008
          +1 to using sketching and cameras to capture the results - this works really well for us. OTOH we've noticed that when you get into rounds of preparing Visio docs, reviewing and updating them adds a really significant clerical burden onto iterating a design forwards... so my personal preference these days would be to leave off taking such sketches into a formal software package for as long as possible.

          On 28 Jun 2008, at 12:35, Nick Gassman wrote:

          Typically then an Information
          Architect will take the ideas away and take them to the next (low-fi
          wireframe) stage in Visio. To keep the record of the ideas, I'll take
          pictures of the flips with my camera phone, and email them round the
          team. It works just as well when you just have words.

          --
          Future Platforms Ltd
          t: +44 (0) 1273 819038
          m: +44 (0) 7971 781422
          personal: tomhume.org



        • James Page
          These stencils http://developer.yahoo.com/ypatterns/wireframes/ from Yahoo are very useful. We normally just print them out and then just paste them to a
          Message 4 of 9 , Jun 29, 2008
            These stencils http://developer.yahoo.com/ypatterns/wireframes/ from Yahoo are very useful.

            We normally just print them out and then  just paste them to a sheet of paper.

            I have stopped using Visio and prefer to go straight to a basic html wireframe layout. The designer then takes the sketch prototype and designs the page while the developers add the basic functionality to the html wireframe. By using this technique integrating the designers graphics back into the wireframe is easy, and you lose the whole Viso step.

            Basic html skills are easy now, and we spend less time building the wireframe in Html then would take us to do it in Viso or another tool. It may not look at as good while we the functionality is just in the basic html wireframe but we are always moving forward.

            I would still use Viso for a non web application.

            My guess with the stat.us or Twitter sketch is that as they used Ruby on Rails as the framework which produces a basic HTML layout for you then they just modified the HTML that Ruby on Rails produces to the sketch. This is quite a fast technique for the new frameworks like Rails, Grails (which if you coming from Java is worth looking at)

            On Sun, Jun 29, 2008 at 6:15 PM, Tom Hume <Tom.Hume@...> wrote:

            +1 to using sketching and cameras to capture the results - this works really well for us. OTOH we've noticed that when you get into rounds of preparing Visio docs, reviewing and updating them adds a really significant clerical burden onto iterating a design forwards... so my personal preference these days would be to leave off taking such sketches into a formal software package for as long as possible.


            On 28 Jun 2008, at 12:35, Nick Gassman wrote:

            Typically then an Information
            Architect will take the ideas away and take them to the next (low-fi
            wireframe) stage in Visio. To keep the record of the ideas, I'll take
            pictures of the flips with my camera phone, and email them round the
            team. It works just as well when you just have words.

            --
            Future Platforms Ltd
            t: +44 (0) 1273 819038
            m: +44 (0) 7971 781422
            personal: tomhume.org




          • Nick Gassman
            ... into rounds of preparing Visio docs, reviewing and updating them adds a really significant clerical burden onto iterating a design forwards... so my
            Message 5 of 9 , Jun 29, 2008
              On Sun, 29 Jun 2008 18:15:41 +0100, Tom Hume wrote:

              >+1 to using sketching and cameras to capture the results - this works really well for us. OTOH we've noticed that when you get
              into rounds of preparing Visio docs, reviewing and updating them adds
              a really significant clerical burden onto iterating a design
              forwards... so my personal preference these days would be to leave off
              taking such sketches into a formal software package for as long as
              possible.

              I think it helps us move forward more quickly. We have a session where
              we knock out the rough ideas, and the IA can quickly turn those into
              something where we can say 'yes that's what we meant', or even 'that's
              what we meant, but now I see it properly laid out I don't think it's
              going to work'. In parallel, we're doing some more flipcharts on
              another aspect of the development.

              We've got a lot of templates and pre-built objectsin Visio, which
              means it can be really quick to build and modify new ideas.

              * Nick Gassman - Usability and Standards Manager - http://ba.com *
            • Ron Jeffries
              ... Got pencils? Got paper? Ron Jeffries www.XProgramming.com For me, XP ain t out there, it s in here. -- Bill Caputo
              Message 6 of 9 , Jun 29, 2008
                Hello, Nick. On Sunday, June 29, 2008, at 1:44:53 PM, you wrote:

                > We've got a lot of templates and pre-built objectsin Visio, which
                > means it can be really quick to build and modify new ideas.

                Got pencils? Got paper?

                Ron Jeffries
                www.XProgramming.com
                For me, XP ain't out there, it's in here. -- Bill Caputo
              • Nick Gassman
                On Sun, 29 Jun 2008 16:51:57 -0400, Ron Jeffries wrote: I said ... Ron said ... Hi Ron Yes of course, and as I ve said, that s where we usually start the
                Message 7 of 9 , Jun 29, 2008
                  On Sun, 29 Jun 2008 16:51:57 -0400, Ron Jeffries wrote:

                  I said

                  >> We've got a lot of templates and pre-built objectsin Visio, which
                  >> means it can be really quick to build and modify new ideas.
                  >
                  >
                  Ron said
                  >Got pencils? Got paper?

                  Hi Ron

                  Yes of course, and as I've said, that's where we usually start the
                  initial design. But there are also advantages to not using paper. Once
                  you're working with digital media you don't have to keep track of
                  physical pieces of paper - we can't usually leave them on walls and
                  come back to them (something we'd love to fix). You can distribute the
                  ideas more easily, you can more easily project them to a larger
                  audience, and by virtue of being a step up in fidelity, leave less
                  scope for ambiguity. It's just a step along the way.


                  * Nick Gassman - Usability and Standards Manager - http://ba.com *
                • James Page
                  ... it may be worth looking at going straight from sketch to working software at this stage :), and bypass the Viso step. It may seam scary but now current
                  Message 8 of 9 , Jun 30, 2008
                    and by virtue of being a step up in fidelity, leave less
                    scope for ambiguity. It's just a step along the way.

                    it may be worth looking at going straight from sketch to working software at this stage :), and bypass the Viso step. It may seam scary but now current frameworks like rails and grails allow such fast turnarounds it maybe as fast as the time to work it up in Viso....

                    It does depend on the complicity of the design....

                    Once the design has been worked up in HTML it is then very easy to modify using tools like firebug.



                    On Sun, Jun 29, 2008 at 10:16 PM, Nick Gassman <nick@...> wrote:

                    On Sun, 29 Jun 2008 16:51:57 -0400, Ron Jeffries wrote:

                    I said



                    >> We've got a lot of templates and pre-built objectsin Visio, which
                    >> means it can be really quick to build and modify new ideas.
                    >
                    >
                    Ron said
                    >Got pencils? Got paper?

                    Hi Ron

                    Yes of course, and as I've said, that's where we usually start the
                    initial design. But there are also advantages to not using paper. Once
                    you're working with digital media you don't have to keep track of
                    physical pieces of paper - we can't usually leave them on walls and
                    come back to them (something we'd love to fix). You can distribute the
                    ideas more easily, you can more easily project them to a larger
                    audience, and by virtue of being a step up in fidelity, leave less
                    scope for ambiguity. It's just a step along the way.


                    * Nick Gassman - Usability and Standards Manager - http://ba.com *

                  • Christopher McComas
                    Having designed everything from products, software, mobile apps to websites, I find that it all starts with paper and pencil sketches. But the paper sketches I
                    Message 9 of 9 , Jun 30, 2008
                      Having designed everything from products, software, mobile apps to
                      websites, I find that it all starts with paper and pencil sketches.
                      But the paper sketches I usually do for my team and not for the
                      client (unless I am trying to wow them with the method that produces
                      the results). When I get to the stage that I am going to show
                      wireframes to a client or test them with users I start moving to
                      Visio. Yes this does add some overhead but it also adds reusability
                      to the process. Most applications have redundant assets within the
                      wireframe, thus you can set these up as master elements on
                      backgrounds in Visio. This ability to reuse UI assets usually offsets
                      any overhead within the tool.

                      Now the use… I have two different stencils or shapes I use in Visio,
                      one looks hand drawn and the other is clean but still basic. I use
                      the hand drawn set to develop and print out early concepts. This
                      rough look to the lines leaves the customer/users more open to
                      suggest changes to the design. This rough look feels like it is still
                      in concept thus can be changed. I print these out for presentation,
                      sometimes cut them up and reconstruct them with the audience and then
                      go back into Visio to update the design. Once the design begins to
                      harden I move to the more formal Stencil. This shows progression
                      within the design to the client and begins to show more detail of the
                      elements on the page. During this process it is always challenging to
                      make sure that the client understands that the UI wireframe is not
                      the "visual design" and more will come when the visual vocabulary is
                      applied.

                      The last plug for Visio and one of my favorite uses is its ability to
                      export/save as web pages. You can set a tall page, set hyperlinks,
                      and then export a navigateable site. This is great for quick
                      Usability testing and scenario analysis that would be clumsy with
                      paper or timely with normal HTML/CSS development. I have even begun
                      to make interactive UIs using the hand drawn stencil. This allows
                      users to navigate the site and still feel free to make suggestions
                      for significant changes.

                      The general thought here is find a method that allows you to iterate
                      quickly, reuse assets and past learning, show progression, and test,
                      test, test.

                      Chris McComas


                      --- In agile-usability@yahoogroups.com, Nick Gassman <nick@...> wrote:
                      >
                      > On Sun, 29 Jun 2008 16:51:57 -0400, Ron Jeffries wrote:
                      >
                      > I said
                      >
                      > >> We've got a lot of templates and pre-built objectsin Visio, which
                      > >> means it can be really quick to build and modify new ideas.
                      > >
                      > >
                      > Ron said
                      > >Got pencils? Got paper?
                      >
                      > Hi Ron
                      >
                      > Yes of course, and as I've said, that's where we usually start the
                      > initial design. But there are also advantages to not using paper.
                      Once
                      > you're working with digital media you don't have to keep track of
                      > physical pieces of paper - we can't usually leave them on walls and
                      > come back to them (something we'd love to fix). You can distribute
                      the
                      > ideas more easily, you can more easily project them to a larger
                      > audience, and by virtue of being a step up in fidelity, leave less
                      > scope for ambiguity. It's just a step along the way.
                      >
                      >
                      > * Nick Gassman - Usability and Standards Manager - http://ba.com
                      *
                      >
                    Your message has been successfully submitted and would be delivered to recipients shortly.