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

Tools for photo-realistic wireframe prototyping

Expand Messages
  • Desilets, Alain
    I need to produce a photo-realistic wireframe prototype. What tools do you use to produce those? Thx Alain
    Message 1 of 15 , Sep 1, 2006
    • 0 Attachment
      I need to produce a photo-realistic wireframe prototype.

      What tools do you use to produce those?

      Thx

      Alain
    • William Pietri
      ... Prototype of what, Alain? I also don t understand the use of wireframe and photo-realistic together. At least with the designers I work with, a
      Message 2 of 15 , Sep 1, 2006
      • 0 Attachment
        Desilets, Alain wrote:
        > I need to produce a photo-realistic wireframe prototype.
        >
        > What tools do you use to produce those?
        >

        Prototype of what, Alain?

        I also don't understand the use of "wireframe" and "photo-realistic"
        together. At least with the designers I work with, a wireframe is a
        low-fidelity imitation of the real thing. E.g.:

        http://www.openinterface.ie/prototype/proto_wire.html

        Allegedly, this term comes from sculpture, where you use a wire frame as
        a skeleton:

        http://www.grokdotcom.com/wireframing.htm

        But I suspect in our industry this comes out of the 3D graphics world:

        http://www.bergen.org/AAST/ComputerAnimation/Graph_Rendering.html


        Could you explain a little more what you're looking for?

        Thanks,

        William
      • Josh Seiden
        I assume you want to work to pixel-level accuracy, rather than working at a sketchier level. I find that Fireworks is an excellent tool for this. It combines
        Message 3 of 15 , Sep 1, 2006
        • 0 Attachment
          I assume you want to work to pixel-level accuracy,
          rather than working at a sketchier level.

          I find that Fireworks is an excellent tool for this.
          It combines good (not great) bitmap editing with good
          (not great) vector editing--so in a sense it's like a
          sweet spot Photoshop+Illustrator.

          The killer feature for prototyping is what Fireworks
          calls "frames." Frames were originally designed to
          allow you to produce simple animated GIFS. But,
          because you can share drawing layers across frames,
          you can produce a UI drawing and manipulate its state
          fairly easily (with each frame representing one
          state.)

          Fireworks also lets you turn objects into "symbols",
          which makes them re-usable. Changing one instance of a
          symbol changes it globally. This makes it easy to
          change the names and appearances or UI elements.

          There was a good discussion of this on the IxDA
          Discuss list last month. Here's a link into the
          archive:

          http://listserver.dreamhost.com/pipermail/discuss-interactiondesigners.com/2006-August/011057.html

          Note that this tool won't produce a finished
          prototype--just the static images of each state.
          You'll need something to wire them together. I
          sometimes use Axure (www.axure.com) for this, though
          others use Dreamweaver or something more open-ended.

          JS


          --- "Desilets, Alain" <alain.desilets@...>
          wrote:

          > I need to produce a photo-realistic wireframe
          > prototype.
          >
          > What tools do you use to produce those?
          >
          > Thx
          >
          > Alain
          >
          >
          >
          > Yahoo! Groups Links
          >
          >
          > agile-usability-unsubscribe@yahoogroups.com
          >
          >
          >
          >
          >
          >
        • Fred Beecher
          ... You mean a photo-realistic prototype? Because photo-realistic and wireframe cancel each other out. For photo-realistic prototypes, it s usually a
          Message 4 of 15 , Sep 1, 2006
          • 0 Attachment
            On 9/1/06, Desilets, Alain <alain.desilets@...> wrote:
            > I need to produce a photo-realistic wireframe prototype.
            >
            > What tools do you use to produce those?

            You mean a photo-realistic prototype? Because photo-realistic and
            wireframe cancel each other out. For photo-realistic prototypes, it's
            usually a combination of Dreamweaver & Photoshop. I'm not big on
            prototyping like this though... I prefer prototyping from (decidedly
            NON-photorealistic) wireframes with Axure, a tool which, I think, has
            a lot of potential for facilitating UCD in an Agile environment
            (http://www.axure.com/)

            - Fred
          • Desilets, Alain
            ... Prototype of what, Alain? -- Alain: A special purpose editor designed for translators. ... I also don t understand the use of wireframe and
            Message 5 of 15 , Sep 1, 2006
            • 0 Attachment
              Desilets, Alain wrote:
              > I need to produce a photo-realistic wireframe prototype.
              >
              > What tools do you use to produce those?
              >

              Prototype of what, Alain?

              -- Alain:
              A special purpose editor designed for translators.
              ----

              I also don't understand the use of "wireframe" and "photo-realistic"
              together. At least with the designers I work with, a wireframe is a
              low-fidelity imitation of the real thing. E.g.:

              http://www.openinterface.ie/prototype/proto_wire.html

              Allegedly, this term comes from sculpture, where you use a wire frame as

              a skeleton:

              http://www.grokdotcom.com/wireframing.htm

              But I suspect in our industry this comes out of the 3D graphics world:

              http://www.bergen.org/AAST/ComputerAnimation/Graph_Rendering.html


              Could you explain a little more what you're looking for?

              -- Alain:
              I must admit, I was using the term wireframe prototype without really
              knowing what it refered to ;-).

              I mean something that looks like a real GUI, but is just a plain
              drawing, without any functionality behind it.
              ----
            • Desilets, Alain
              I assume you want to work to pixel-level accuracy, rather than working at a sketchier level. -- Alain: Actually, as I think of this more, this is really what I
              Message 6 of 15 , Sep 1, 2006
              • 0 Attachment
                I assume you want to work to pixel-level accuracy,
                rather than working at a sketchier level.

                -- Alain:
                Actually, as I think of this more, this is really what I need:

                - The mockup must be in electronic form
                - The mockup must be "neat" (i.e. neater than a free-hand drawing), but
                does not have to be photo-realistic. It just has to look professional,
                and clearly communicate what the real thing looks like and how it works.
                - The mockup must be easy to modify
                ----

                I find that Fireworks is an excellent tool for this.
                It combines good (not great) bitmap editing with good
                (not great) vector editing--so in a sense it's like a
                sweet spot Photoshop+Illustrator.

                -- Alain:
                Sounds good.
                ----

                The killer feature for prototyping is what Fireworks
                calls "frames." Frames were originally designed to
                allow you to produce simple animated GIFS. But,
                because you can share drawing layers across frames,
                you can produce a UI drawing and manipulate its state
                fairly easily (with each frame representing one
                state.)

                -- Alain:
                I don't think I'll need animation capabilities.
                ----

                Fireworks also lets you turn objects into "symbols",
                which makes them re-usable. Changing one instance of a
                symbol changes it globally. This makes it easy to
                change the names and appearances or UI elements.

                -- Alain:
                Sounds good. Presumably some people have already created symbols for
                commonly used GUI elements?
                ----

                There was a good discussion of this on the IxDA
                Discuss list last month. Here's a link into the
                archive:

                http://listserver.dreamhost.com/pipermail/discuss-interactiondesigners.c
                om/2006-August/011057.html

                -- Alain:
                Thx. I'll look at that.
                ----

                Note that this tool won't produce a finished
                prototype--just the static images of each state.
                You'll need something to wire them together. I
                sometimes use Axure (www.axure.com) for this, though
                others use Dreamweaver or something more open-ended.

                -- Alain:
                Sounds like what I need.
                ----
              • William Pietri
                ... Great. I gather this is a web app or a desktop app, then, rather than a physical object. ... Heh. My pals use Photoshop for this, but perhaps that s
                Message 7 of 15 , Sep 1, 2006
                • 0 Attachment
                  Desilets, Alain wrote:
                  > -- Alain:
                  > A special purpose editor designed for translators.
                  > ----
                  >

                  Great. I gather this is a web app or a desktop app, then, rather than a
                  physical object.

                  > I must admit, I was using the term wireframe prototype without really
                  > knowing what it refered to ;-).
                  >
                  > I mean something that looks like a real GUI, but is just a plain
                  > drawing, without any functionality behind it.
                  >

                  Heh. My pals use Photoshop for this, but perhaps that's because when
                  they got started that was the only real option. I see from Fred and Josh
                  there are other options that are task-specific and probably a lot more
                  novice-friendly.

                  If it will turn into a physical object, I hear great things about
                  SketchUp. My brother, who makes furniture, raves about using it to do
                  prototypes for clients. For novices, it's radically easier to use than
                  the other 3D tools I have tried. And you can't beat the price.

                  William
                • Josh Seiden
                  -- Alain: Actually, as I think of this more, this is really what I need: - The mockup must be in electronic form - The mockup must be neat (i.e. neater than
                  Message 8 of 15 , Sep 1, 2006
                  • 0 Attachment
                    -- Alain:
                    Actually, as I think of this more, this is really what
                    I need:

                    - The mockup must be in electronic form
                    - The mockup must be "neat" (i.e. neater than a
                    free-hand drawing), but
                    does not have to be photo-realistic. It just has to
                    look professional,
                    and clearly communicate what the real thing looks like
                    and how it
                    works.
                    - The mockup must be easy to modify
                    ----

                    Josh:
                    Looking at this list, I think there is some tension
                    between "neat" and "communicate what the real thing
                    looks like." These are not the same.

                    If you want it to look neat, try axure, powerpoint,
                    visio. If you want it to look finished, try Fireworks,
                    Illustrator, Photoshop. (Although you can produce
                    sketchy looking work in this second category of
                    software, it's tempting to spend a lot of twiddly time
                    on appearance with these tools.)

                    -- Alain:
                    I don't think I'll need animation capabilities.
                    ----

                    Josh: Just to clarify--the frames enable animation,
                    but they also enable a lot of other goodness. For
                    interaction design, they allow you to manage
                    multi-state drawings, which few tools do at all (and
                    none do well IMHO.)

                    JS
                  • Fredrik Matheson
                    I usually lay out a huge sheet in Illustrator (10.000 x 10.000 pixels) with a gray background and create screen flows with fairly realistic mockups of the
                    Message 9 of 15 , Sep 1, 2006
                    • 0 Attachment
                      I usually lay out a huge sheet in Illustrator (10.000 x 10.000 pixels) with a gray background and create screen flows with fairly realistic mockups of the design. The huge size means I don't run out of space and can show lots of concurrent processes.

                      It's easy to distribute as a PDF and not too hard to print.

                      For detail work like buttons I might use photoshop and bring those images in for extra detail. When our graphic designers create a full-resolution mockup I usually re-do the psd-file and bring bits and pieces into illustrator, it's much, much easier to move stuff around in there. Illustrator also has pixel preview, which makes things look pretty much as the would on the screen.

                      Also, projecting the sketches onto a whiteboard, sketching with the client and taking a picture of the result - and translating this back into the illustrator file - helps communication.

                      If you have a little library of buttons, boxes and other UI elements it's easy to put something together pretty quickly, but it won't be interactive, of course.
                    • Fred Beecher
                      ... Yep, that s Axure. It s a bit clunky, interface-wise, but it s capabilities are worth all the clicking. I ve used Axure for lots of projects so far, so if
                      Message 10 of 15 , Sep 1, 2006
                      • 0 Attachment
                        On 9/1/06, Desilets, Alain <alain.desilets@...> wrote:
                        >
                        > Actually, as I think of this more, this is really what I need:
                        >
                        > - The mockup must be in electronic form
                        > - The mockup must be "neat" (i.e. neater than a free-hand drawing), but
                        > does not have to be photo-realistic. It just has to look professional,
                        > and clearly communicate what the real thing looks like and how it works.
                        > - The mockup must be easy to modify

                        Yep, that's Axure. It's a bit clunky, interface-wise, but it's
                        capabilities are worth all the clicking. I've used Axure for lots of
                        projects so far, so if you want to know more about what it's like
                        working with it, feel free to ask me. Also, their support is
                        incredibly good. They respond to issues and questions very rapidly.

                        - Fred
                      • Desilets, Alain
                        ... Great. I gather this is a web app or a desktop app, then, rather than a physical object. -- Alain: That s right. I m not much of a handy man ;-).
                        Message 11 of 15 , Sep 1, 2006
                        • 0 Attachment
                          > -- Alain:
                          > A special purpose editor designed for translators.
                          > ----
                          >

                          Great. I gather this is a web app or a desktop app, then, rather than a
                          physical object.

                          -- Alain:
                          That's right. I'm not much of a handy man ;-).
                          ----
                        • Ilen Zazueta-Hall
                          De-lurking to second the recommendation on Axure. It s clunky but robust and allows rapid, semi-functional html prototyping of just about anything. Combine
                          Message 12 of 15 , Sep 1, 2006
                          • 0 Attachment
                            De-lurking to second the recommendation on Axure. It's clunky but robust and allows rapid, semi-functional html prototyping of just about anything. Combine  its custom widgets/masters features with copying and pasting from the graphics editor of your choice and you get something more than a wireframe with minimal effort.

                            I'm curious to know if anybody else uses this type of "pretty" wireframes??

                            Recognizing the oxymoron, I've nevertheless found these documents (somewhere between a wireframe, an html prototype and a screen mock up) to be a very effective bridge between engineering and business users.

                            Regards,

                            --Ilen

                          • Dave Churchville
                            ... If you re planning to use Photoshop, Fireworks, etc. to make static images, you might be interested in EasyPrototype (http://www.easyprototype.com). It s
                            Message 13 of 15 , Sep 1, 2006
                            • 0 Attachment
                              --- In agile-usability@yahoogroups.com, "Desilets, Alain"
                              <alain.desilets@...> wrote:
                              >
                              > I need to produce a photo-realistic wireframe prototype.
                              >
                              > What tools do you use to produce those?

                              If you're planning to use Photoshop, Fireworks, etc. to make static
                              images, you might be interested in EasyPrototype
                              (http://www.easyprototype.com).

                              It's designed to take static images (hand-drawn or pixel-perfect) and
                              make it easy to wire them together to make an interactive prototype,
                              or generate a specification in MS Word.

                              I normally do paper sketches, then just scan them, load them in, and
                              label and link the pages together - it's actually kind of fun.

                              (Disclaimer: My company makes the product, so I'm a bit biased here).

                              --Dave

                              David Churchville
                              http://www.extremeplanner.com/blog
                            • Ron Vutpakdi
                              ... I use Canvas from ACD Systems (formerly from Deneba Software) for my wireframes and mockups. Canvas is a jack of all trades graphics package that is a
                              Message 14 of 15 , Sep 2, 2006
                              • 0 Attachment
                                --- In agile-usability@yahoogroups.com, "Desilets, Alain"
                                <alain.desilets@...> wrote:
                                >
                                > I assume you want to work to pixel-level accuracy,
                                > rather than working at a sketchier level.
                                >
                                > -- Alain:
                                > Actually, as I think of this more, this is really what I need:
                                >
                                > - The mockup must be in electronic form
                                > - The mockup must be "neat" (i.e. neater than a free-hand drawing), but
                                > does not have to be photo-realistic. It just has to look professional,
                                > and clearly communicate what the real thing looks like and how it works.
                                > - The mockup must be easy to modify

                                I use Canvas from ACD Systems (formerly from Deneba Software) for my
                                wireframes and mockups. Canvas is a jack of all trades graphics
                                package that is a combination of functionality found in Illustrator,
                                Photoshop, and some light page layout capabilities.

                                Depending on the need, I can create wireframes using solely the vector
                                and text capabilities or "photo realistic mockups" by adding in bitmap
                                level functionality.

                                For distribution, I create multiple page PDFs. These days, I've been
                                experimenting with adding (limited) clickable navigation to each
                                mockup so that if the user clicks on what looks like a button (that
                                launches a dialog) or tab, the document changes to the page of the
                                document which shows the interface as if the user really did click on
                                that button or tab.

                                On Wednesday, when my manager returns from vacation, I'll ask if I can
                                distribute a short example of one of my documents.

                                Ron
                              • Miinalainen, Petteri
                                Well, first i call only simple wireframes as wireframes... Photorealistic stuff is usually called hifi prototype (if it s clickable) or visualized storyboard
                                Message 15 of 15 , Sep 4, 2006
                                • 0 Attachment
                                  Well, first i call only simple wireframes as wireframes... Photorealistic stuff is usually called hifi prototype (if it's clickable) or visualized storyboard or scenario if it's only a sequence of photorealistic screenshots without any functionality.
                                   
                                  I usually only produce one or two photorealistic screens to show the visual appearance and produce lofi wireframe of the rest.
                                  Only when the visual appearance and overall structure of screens and associated screen flows have been fixed, we produce the rest of screens usually with html or IDE GUI tools.
                                   
                                  So, to try to answer your question.
                                  1. for photorealistic screens: either photoshop or fireworks is used to create photorealistic screen pictures
                                  2. for wireframes: visio, pen & paper, powerpoint, freehand, whiteboard and digicam etc etc.
                                  3. based on those, a basic set of screens is produced in html or with development environments gui tools ( screen types, templates). In some cases a formal documentation is created to describe the various screen types. This is kinda slow and can not usually be considered as very agile, but it sure does bring some accuracy...
                                  For web development, dreamweaver and well-designed css is often fastest way to create photorealistic screens after the initial creation. They have the added benefit of being reusable as basis for final applications ui code.
                                  4. developers usually finish the rest of the required screens based on the screen types (list, search, drill-down,...) in collaboration with ui designer
                                   
                                   
                                  Lately i've been wondering about using axure rp pro for creating simultaneously wireframe, prototype and user interface specification.
                                  check it out www.axure.com
                                   
                                  other tools worth checking out
                                  MockupScreens at http://mockupscreens.com/
                                  tools for creating wireframes
                                  tools for creating annotated prototypes and specifications on top of pictures. Pictures can be digital shots of whiteboard doodles or sophisticated and elaborate screen images made with photoshop et al. You just create the annotation overlay with this application.
                                   
                                   
                                  Petteri
                                   
                                   


                                  From: agile-usability@yahoogroups.com [mailto:agile-usability@yahoogroups.com] On Behalf Of Desilets, Alain
                                  Sent: 1. syyskuuta 2006 17:30
                                  To: agile-usability@yahoogroups.com
                                  Subject: [agile-usability] Tools for photo-realistic wireframe prototyping

                                  I need to produce a photo-realistic wireframe prototype.

                                  What tools do you use to produce those?

                                  Thx

                                  Alain

                                  This message contains information that may be privileged or confidential and is the property of the Capgemini Group. It is intended only for the person to whom it is addressed. If you are not the intended recipient, you are not authorized to read, print, retain, copy, disseminate, distribute, or use this message or any part thereof. If you receive this message in error, please notify the sender immediately and delete all copies of this message.

                                Your message has been successfully submitted and would be delivered to recipients shortly.