I'm looking for an application/tool to easily create a mock GUI. This GUI will be used by users to control home devices remotely. They can login to a website or use an application to view/control devices. The GUI should look good, but nothing very fancy. It should have checkboxes, lists, radio buttons etc.

The important thing is that since this is just a mock, it should be quick to prepare. While I am a programmer and know C, Python, I would prefer something where I can just drag and drop elements and make a website GUI rather than code.

The software/tool must be free or very cheap. I thought of Dreamweaver, but it's expensive and I guess I'd need a small learning curve (CSS, HTML..)

What should I choose?

  • I use Inkscape for GUI mockups but there are probably better options. – Johan Aug 7 '14 at 19:41
  • 2
    Depending on what you want, go with pen(cil) & paper. – Adam Thompson Aug 7 '14 at 21:51
  • 1
    there is a software called pencil, It's available for Linux and Windows, and also for Mac If I'm right. Google for pencil project – bhathiya-perera Aug 8 '14 at 7:37
  • Define 'mock-up'. Nearly any drawing tool will work. It really depends on your particular needs. Also if this is a web UI, it's hard to beat actual HTML and CSS. – DA01 Aug 14 '14 at 3:32

If you're looking to just mock up a UI, there are a lot of free / cheap tools, but you will still have to wire up the backend code yourself. Here are a few Bootstrap based examples:

You can also try something like Balsamiq Mockups for just rough prototyping.

| improve this answer | |

I use Adobe Fireworks(available in CS6 and below). It's very simple(especially if you've used adobe photoshop or illustrator) and, I believe, offers all the components you mention. One downside is that you need to import vector art for very specific elements which might be in other programs; however, this process makes for better designs!

| improve this answer | |

must be free or very cheap

  • Inkscape
  • the GIMP
  • Paint.NET
  • Google Draw
  • HTML/CSS/JS frameworks
  • Open Office
| improve this answer | |

Adobe Edge apps are free to try, and after a 30 day trial you might even subscribe. You can also try webflow.com, but that will only let you download the html and css with a paid license, or just go HTML Kickstart and get in on that not so steep learning curve. For simple wire-framing I found nothing better than Balsamiq Mockups

| improve this answer | |

buy ui kit, will be the best option from www.creativemarket.com

| improve this answer | |
  • Not software- you'd still need some kind of software to use a ui kit – spiral Apr 27 '15 at 7:37

Not the answer you're looking for? Browse other questions tagged or ask your own question.