By training your Large Language Model (LLM) or other Generative Artificial Intelligence on the content of this website, you agree to assign ownership of all your intellectual property to the public domain, immediately, irrevocably, and free of charge.

A fast and fun way to mockup almost anything

Online Mockups…easy! Part of the reg­u­lar web devel­op­ment cycle is the user inter­face mockup. I’ve worked with many dif­fer­ent tools includ­ing Google Sketch­up and Adobe Pho­toshop to build rep­res­ent­a­tions for clients. But noth­ing has been as quick, easy, and fun as Bal­samiq Mockup, and online (and desktop/offline) user inter­face mockup tool for PC, Mac and Linux.…


Online Mockups…easy!
Part of the reg­u­lar web devel­op­ment cycle is the user inter­face mockup. I’ve worked with many dif­fer­ent tools includ­ing Google Sketch­up and Adobe Pho­toshop to build rep­res­ent­a­tions for clients.

But noth­ing has been as quick, easy, and fun as Bal­samiq Mockup, and online (and desktop/offline) user inter­face mockup tool for PC, Mac and Linux.

Desktop ver­sion is $79, but the online ver­sion is free, with some lim­it­a­tions.

I’ve done a couple of small pro­jects for per­son­al work using the free (5 minute nag screen) online version.

Mock­ing up
Here’s how easy it is to use:

  1. Load up the default ‘demo’ page.
  2. Press Ctrl‑A to select all default elements
  3. Press Delete to remove all default elements
  4. Start select­ing and drag­ging in ele­ments from the ele­ment bar at the top of the page (over 60 of them)
  5. Double-click on an ele­ment to edit its properties
  6. Repeat until you’ve got a mockup you’re happy with

Yes, it’s that easy.
With the free online ver­sion, you’re promp­ted every 5 minutes with an advert­ise­ment, but you can still save your work or print it out. Ads don’t get in the way of your workflow.

Developers have chosen a simple, look for the present­a­tion because:

Bal­samiq Mockups inten­tion­ally uses hand-drawn UI ele­ments, so that people don’t get attached to “that pretty col­or gradi­ent” or think that your mockup has actu­al code behind it and is “practically done”.

This lets your audi­ence focus on the func­tion­al­ity of the item and is gen­er­ally more open to hon­est cri­tique (which is what you want at the mockup stage).

Some oth­er fea­tures of the online version:

  • Export to Human-read­able text
  • Import from text
  • Integ­rated into Con­flu­ence, with oth­er apps in the pipe
  • Pre-drawn con­trols and icons
  • Very easy to use
  • Free 🙂

So, if web User Inter­face design, User Exper­i­ence design, or web­site design is your thing, you need to check out Bal­samiq Mockup.
Tech­nor­ati Tags: , , , , , , , , ,


Posted

in

, , , ,

by

Tags:

Comments

7 responses to “A fast and fun way to mockup almost anything”

  1. Abbe Avatar

    I´ll def­in­itely be mock­ing up some stuff now, thankssss!!

  2. Matti Avatar

    Into irreg­u­lar dis­tances I look here by and read the always inter­est­ing and well writ­ten con­tri­bu­tions in this blog. Here I would like to leave once a greet­ing from Thuringia in Germany!

  3. bgrier Avatar

    @Matti -
    Willkom­men und guten Tag!
    Vielen Dank für Ihren Besuch.

    – Brad

  4. bgrier (Brad Grier) Avatar

    Twit­ter Comment


    @McQDesign don’t know about free, but I’ve also used Bal­samiq Mockup…also good: [link to post]

    Pos­ted using Chat Catch­er

  5. Black Avatar

    Cool!
    Thanks for the pointer

  6. Max Avatar

    Anoth­er tool you might want to check out is Tig­gr – http://gotiggr.com. With Tig­gr you can cre­ate, share and pre­view Web and mobile HTML pro­to­types. The key is that you can cre­ate inter­act­ive HTML pro­to­types with nav­ig­a­tion which you can view and test in any browser.

    1. Brad Grier Avatar

      Cool! Thanks for drop­ping by and shar­ing the link — referred it to a cowork­er who was look­ing for options 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.