GUI Mockups - What Do You Use?

Started by
9 comments, last by sunandshadow 14 years, 10 months ago
I have a few questions for game designers when mocking up their GUI's for a pitch/design document or for quick prototypes of a UI:
  1. What do you currently use for mocking up your GUI designs?
  2. If there was a tool created specifically for mocking up game GUI's, would you be interested in using it?
  3. What core features would you like to see to help you mock up your GUI's?
I'm thinking about making a lightweight tool which allows rapid GUI prototyping specifically for games. It would have a set of UI controls (eg minimap, compass, health bar, etc) which you could easily snap together to do rough mockups. Any thoughts? Doolwind
Advertisement
Quote:
1. What do you currently use for mocking up your GUI designs?


Any painting tool currently at hand (gimp).

Quote:
2. If there was a tool created specifically for mocking up game GUI's, would you be interested in using it?

No, to be honest. Most painting tools like gimp got layers, grid,snaping etc. Where's the benefit of learning a new tool with more or less any new feature ?


Well, a mockup tool doesn't deliver enough new features to be of any interest, but what about a game gui designer ? I would love to see a customizable game gui designer with customizable text/xml support.

--
Ashaman
Quote:Original post by Ashaman73

Well, a mockup tool doesn't deliver enough new features to be of any interest, but what about a game gui designer ? I would love to see a customizable game gui designer with customizable text/xml support.


Thanks for the info Ashaman73. I'm hoping that the tool will be simple enough that it will allow prototyping much quicker than the average paint tool (photoshop, gimp). I'd also look at adding simple interaction design and game specific guides such as screen safe zones for consoles.

As for a customizable game gui designer, I guess the issue is what technology to write it in.
Quote:Original post by Doolwind
  • What do you currently use for mocking up your GUI designs?


  • Pen and paper combined with some basic shapes (boxes etc) printed out in GIMP. Although I use such cutouts more for website designs. For games, mostly pen and paper as it's easier to create new and unique elements.

    Quote:Original post by Doolwind
  • If there was a tool created specifically for mocking up game GUI's, would you be interested in using it?


  • No interest here, but tools are important, so I think you should write it regardless if you have such an interest. At worst, you will find it useful yourself. At best, someone else will also find use from it.
    Quote:Original post by lightbringer
    Quote:Original post by Doolwind
  • What do you currently use for mocking up your GUI designs?

  • Pen and paper combined with some basic shapes (boxes etc) printed out in GIMP. Although I use such cutouts more for website designs. For games, mostly pen and paper as it's easier to create new and unique elements.
    This, but with Paint.NET or Inkscape instead of GIMP. I cut out shapes and draw on them using marker, and find this to be an excellent way of very quickly assembling a prototype you can easily rearrange or make changes to.

    If the GUI in question is a simple Windows application (or something that closely resembles one) I'll also sometimes click it together in Visual C#.

    Quote:Original post by Doolwind
  • If there was a tool created specifically for mocking up game GUI's, would you be interested in using it?

  • I might, but I can't guarantee it; if I saw something that was as easy to use as pen&paper/markers and had some convincing benefits (online collaboration? Integration with existing tools? Support for existing GUI formats?) I might consider using it.

    Quote:What core features would you like to see to help you mock up your GUI's?
    It has to be simple to use; drag and drop, point and click, I shouldn't have to edit scripts or navigate complicated menus.

    It has to support all the common GUI elements.

    - Jason Astle-Adams

    jbadams-

    Thanks for the feedback. My main aim would be to create something that is easier than pen & paper. One main requirement would be the ability to create a GUI mockup for say an RTS in <5 mins. The main aim over pen & paper would be the ease of moving things around and sharing with people on the net.

    I would plan to support all the basic UI elements (probably 100 or so for v1.0). In future versions I'd add extra support for collaboration as well as annotated feedback.
    Pen + graph paper works best for me.
    visualnovelty.com - Novelty - Visual novel maker
    Pen & Paper for sharing quick ideas a lot of times. For official documentation I use Visio and a stencil I created that has a bunch of common HUD shapes.

    Honestly, this tool you're talking about doesn't sound like it is much different than my Visio stencil.

    [Edited by - zer0wolf on June 15, 2009 1:43:25 PM]
    laziness is the foundation of efficiency | www.AdrianWalker.info | Adventures in Game Production | @zer0wolf - Twitter
    Quote:Original post by Doolwind
    What core features would you like to see to help you mock up your GUI's?

    - Resizable 9-part panels, each part corresponding to an image, to show how artwork will fit.
    - 'Projects', which aggregate multiple dialogs. Subprojects would be handy too.
    - The ability to set some project-wide settings (eg. font name + size), and to be able to change them in one place and have that propagate across all dialogs in the project.
    - Human-readable export formats that write out all the details associated with the mock-up so that they can be recreated by artists and designers. Project-wide standard settings would be notated as such.
    - Preview mode that superimposes the current dialog over a project-specific background (eg. a mockup of the game, or concept art). This should support several common screen resolutions and be extensible to any arbitrary resolutions the developer might want. Allow full-screen mode where possible.
    - Statistic gathering, showing how many different images and fonts are in use, and how much memory and disk space they consume.
    - Dialog 'shuffling'. With several dialogs on-screen at once, click a button and the system randomly places them all with no overlaps (if possible). This could help the creative process.
    - Invisible vertical and horizontal boxes, and grids, to automatically line up elements within a dialog, so you can drag and drop a widget into the desired slot and exact positioning and alignment is done for you.

    Some of these are bordering on being fully-fledged GUI editor features - but I think that if you're trying to add value over just pen and paper or even just some Photoshop work then you may as well make it practical to see the end GUI almost exactly as it will be in the final product, and to produce output that helps you get to that point.
    Kylotan-

    Thanks for the detailed list. I was hoping to be able to add value over pen & paper/photoshop with it's ease of use, but it seems that isn't enough :)

    This topic is closed to new replies.

    Advertisement