Share your designs!

Hi there, Peldi here from Balsamiq. I wanted to start a discussion thread here for people to share some of the mockups that they created using Balsamiq Mockups.

It would be useful for me to see what people use Mockups for (is it more websites or desktop apps or rich internet applications or what?), so that I could improve the product accordingly.

I also think it would be a great way for you to show off your new design and most importantly get feedback on its usability.

I don't think GetSatisfaction allows attachments, so to share your design either post a link to your PNG or just export your mockup to XML and paste it here!

I’m excited

Inappropriate?

Reply to this discussion

Follow this discussion to get notifications on your dashboard.

Inappropriate?

Michael replied on September 24, 2008 10:36

Sorry to see nobody has replied to this yet.

I am going to share a discussion thread mockup I created a while ago. I don't think it is anything to brag about, but I think others may want to use/import it themselves.

Import it now:



<mockup>

  <controls>

    <control>

      <groupchildrendescriptors>

        <control>

        <control>

          <controlproperties>

            <color>15132390</color>

            <borderstyle>none</borderstyle>

          </controlproperties>

        </control>

        <control>

          <controlproperties>

            <color>15132390</color>

            <borderstyle>none</borderstyle>

          </controlproperties>

        </control>

        </control><control>

        <control>

          <controlproperties>

            <text>Post%20a%20Comment</text>

          </controlproperties>

        </control>

        <control>

          <controlproperties>

            <icon>EmoticonIcon%7Clarge</icon>

          </controlproperties>

        </control>

        </control><control>

        <control>

          <controlproperties>

            <verticalscrollbar>true</verticalscrollbar>

          </controlproperties>

        </control>

        <control>

          <controlproperties>

            <text>Lorem%20ipsum%20dolor%20sit%20amet%2C%20consectetuer%20adipiscing%20elit.%20Integer%20eget%20leo%20nec%20odio%20fermentum%20aliquet.%20Donec%20ipsum%20velit%2C%20fringilla%20in%2C%20hendrerit%20quis%2C%20sollicitudin%20et%2C%20tortor.%20Sed%20lacus%20nisl%2C%20ultricies%20ac%2C%20auctor%20semper%2C%20congue%20nec%2C%20purus.%20Vivamus%20aliquam%20dignissim%20nisl.</text>

          </controlproperties>

        </control>

        <control>

          <controlproperties>

            <icon>EmoticonIcon%7Clarge</icon>

          </controlproperties>

        </control>

        <control>

          <controlproperties>

            <text>posted%20Sep%2017%2C%202008%20by%20</text>

          </controlproperties>

        </control>

        <control>

          <controlproperties>

            <text>John%20Doe</text>

          </controlproperties>

        </control>

        <control>

          <controlproperties>

            <text>Aenean%20at%20mauris.%20Donec%20in%20eros.%20Duis%20nunc.%20Ut%20luctus%20fringilla%20est.%20Ut%20dapibus%20fermentum%20dolor.%20Donec%20pellentesque%20tincidunt%20dolor.%20Vestibulum%20augue%20magna%2C%20auctor%20ut%2C%20rutrum%20ac%2C%20vehicula%20at%2C%20mauris.</text>

          </controlproperties>

        </control>

        <control>

          <controlproperties>

            <icon>EmoticonIcon%7Clarge</icon>

          </controlproperties>

        </control>

        <control>

          <controlproperties>

            <text>posted%20Sep%2018%2C%202008%20by%20</text>

          </controlproperties>

        </control>

        <control>

          <controlproperties>

            <text>Mary%20Jane</text>

          </controlproperties>

        </control>

        <control>

          <controlproperties>

            <text>Post%20Comment</text>

          </controlproperties>

        </control>

        </control><control>

        <control>

          <controlproperties>

            <text>Comments</text>

          </controlproperties>

        </control>

      </control></groupchildrendescriptors>

    </control>

  </controls>

</mockup>

I’m confident

1 Comment

Add a comment

Remove
Giacomo 'Peldi' Guilizzoni, (Official Rep), commented on September 24, 2008 10:40

Hey Michael, unfortunately GetSatisfaction doesn't deal well with XML, even within the "code" tag. :( I had to replace each < with the and-lt; and each > with a and-gt; in a text editor before I could paste the mockup's code properly.
Remove Inappropriate?
Delete or Edit

Michael replied on September 24, 2008 10:47

See this post: :)

http://getsatisfaction.com/balsamiq/t...

Add a comment
Remove Inappropriate?
Delete or Edit

William replied on November 15, 2008 17:52

Well so far just desktop apps, but I have a feeling I'll be using it more for RIA when we get to that phase in our development.

Add a comment
Remove Inappropriate?
Delete or Edit

Riel Roussopoulos replied on November 16, 2008 18:26

Here is a design that I'm working on for my help section of my application.

Here is the BMML
-----------------------

<mockup>
<controls>
<control>
<controlproperties>
<text>XL%20%7C%20Riel%20Roussopoulos</text>
</controlproperties>
</control>
<control>
<controlproperties>
<verticalscrollbar>false</verticalscrollbar>
<text>Topic%2C%20Description%2C%20Tags%2C%20Rating%2C%20Comments%20%0A%20%0ATitle%20Change%2C%20Changing%20the%20site%20title%2C%20edit%2C%20***%2C%20this%20is%20easy...%0ABlog%20Post%2C%20Adding%20a%20new%20post%2C%20blog%20post%20copy%2C%20*****%2C%20I%20like%20the%20...%0AEcommerce%2C%20About%20the%20product%20catalog%2C%20ecom%20im%2C%20**%2C%20Needs%20to%20be%20flushed%20out%0ANew%2C%20We%27ve%20updated%20to%20Rails%202.2%2C%20RoR%20rails%20code%2C%20*****%2C%20about%20time</text>
<selectedindex>4</selectedindex>
</controlproperties>
</control>
<control>
<controlproperties>
<text>CONTACTS%2C%20COMMUNICATE%2C%20COMMERCE%2C%20RESOURCES%2C%20ADMIN</text>
<selectedindex>3</selectedindex>
</controlproperties>
</control>
<control>
<control>
<controlproperties>
<verticalscrollbar>true</verticalscrollbar>
<topheight>61</topheight>
<bottomheight>36</bottomheight>
<text>New%2C%20Import%2C%20Close%20other%20tabs</text>
</controlproperties>
</control>
<control>
<controlproperties>
<text>My%20Dashboard</text>
</controlproperties>
</control>
<control>
<controlproperties>
<text>Record%20Dashboard</text>
</controlproperties>
</control>
<control>
<controlproperties>
<text>Landing%20Page%2C%20Templates%2C%20Feeds%2C%20Getting%20Started</text>
<selectedindex>3</selectedindex>
</controlproperties>
</control>
<control>
<controlproperties>
<text>search</text>
</controlproperties>
</control>
<control>
<controlproperties>
<text>search</text>
</controlproperties>
</control>
<control>
<controlproperties>
<text>Clear%2C%20Actions%2C%20Expand%20all%2C%20Collapse%20all</text>
<selectedindex>1</selectedindex>
</controlproperties>
</control>
<control>
<controlproperties>
<text>Quick%20Entry%0AMy%20Recent%20Unread%20Messages%20%280%29%0AMy%20Recent%20History%0AMy%20Email%20Labels%0AMy%20Feeds%0AMy%20Saved%20Searchs</text>
<selectedindex>4</selectedindex>
</controlproperties>
</control>
<control>
<controlproperties>
<text>Groups</text>
</controlproperties>
</control>
<control>
<controlproperties>
<text>Messages%0AFiles%0AGroups%0APayments%0ATestimonials%0ABlog%20Posts%0AForum%20Posts</text>
<selectedindex>1</selectedindex>
</controlproperties>
</control>
<control>
<controlproperties>
<text>100</text>
</controlproperties>
</control>
</control><control>
<control>
<controlproperties>
<icon>SpinningIcon%7Csmall</icon>
</controlproperties>
</control>
<control>
<controlproperties>
<icon>LeftTriangleIcon%7Csmall</icon>
</controlproperties>
</control>
<control>
<controlproperties>
<text>f%20Development%20Track%0AF%20API%20of%20use%0A%20-%20Google%20API%0A%20-%20CJ%0A%20-%20Clickbank%0AF%20Project%20Management%0A.f%20iXLd%0A.f%20AgentXL%0A.F%20XLsuite%0A%3E%3E-%20Sales%20Copy%0A%3E%3E-%20Promo%20Video%0A%3E%3E-%20Feature%20List%0AF%20Client%20Blogs%0A.f%20Designers%0A.F%20SEO%0A%3E%3E-%20ShoeMoney%0A%3E%3E-%20John%20Chow%0A.f%20Developers%0A.F%20Internet%20Marketing</text>
</controlproperties>
</control>
<control>
<controlproperties>
<text>o%20Basics%0AChange%20the%20title%20of%20your%20site%0ANew%20Blog%20Post%0Ao%20Intermediate%0AChanging%20your%20template%0AAdding%20new%20pages%0Ao%20Advanced%0A%3D%0AContact%20Support</text>
</controlproperties>
</control>
</control><control>
</control><control>
<control>
<controlproperties>
<text>Type%2C%20Recent%2C%20Popular%2C%20Most%20Talked%20About</text>
</controlproperties>
</control>
<control>
<controlproperties>
<icon>WirelessIcon%7Csmall</icon>
</controlproperties>
</control>
<control>
<controlproperties>
<text>This%20is%20the%20area%20that%20has%20the%20description%20about%20each%20lesson.%0A_________________________________%0AIt%20could%20have%20a%20mini%20test%2C%20or%20poll%20in%20here%20also%0A_________________________________%0AWe%20could%20even%20put%20a%20support%20window%20in%20there%0A_________________________________%0AThis%20might%20be%20a%20good%20place%20for%20the%20%22get%20satisfaction%22%20here</text>
</controlproperties>
</control>
<control>
<controlproperties>
<text>search</text>
</controlproperties>
</control>
<control>
<controlproperties>
<text>Selecting%20a%20lesson%20below%20loads%20it%20into%20the%20video%20player</text>
</controlproperties>
</control>
<control>
<controlproperties>
<icon>SaveIcon%7Csmall</icon>
</controlproperties>
</control>
<control>
<groupchildrendescriptors>
<control>
<controlproperties>
<icon>RewindChapterIcon%7Csmall</icon>
</controlproperties>
</control>
<control>
<controlproperties>
<icon>ForwardIcon%7Csmall</icon>
</controlproperties>
</control>
<control>
<controlproperties>
<icon>RightTriangleIcon%7Csmall</icon>
</controlproperties>
</control>
<control>
<controlproperties>
<text>5</text>
</controlproperties>
</control>
</groupchildrendescriptors>
</control>
</control></controls>
</mockup>

Add a comment
Remove Inappropriate?
Delete or Edit

Riel Roussopoulos replied on November 16, 2008 18:34

I'd say it's an even split between RIA and website designs.
no desktop apps for me yet, but then that's my preference anyway, we're a web app shop.

--------------- the site: SuperSaveSigns.com - in development still ------------

--------------- the BMML --------------
Sorry ... didn't see that the XML didn't work
ping me if you want the code for any reason.

I’m happy

Add a comment
Remove Inappropriate?
Delete or Edit

Michael Hackney replied on November 17, 2008 14:54

I'll share my designs for Shrugh as well as the technique I used to tie the Mockups together to create a demo. First the design:

http://www.shrugh.com - gives a short overview and then you go right to the Mockups

How it was done: http://eclecticguy.com/2008/11/06/ass...

Oh, and please feel free to leave comments on the concept!

Cheers!

I’m happy

2 Comments Add a comment
Remove
Riel Roussopoulos commented on November 17, 2008 19:30

Sweet... I'd love to spit out clickabel mockup's like this... extra step, but man is that nice to be able to really visualize not just the layout, but the flow too
Remove
Michael Hackney commented on November 17, 2008 19:36

Riel, read my blog post on how I did it, it really was quite easy. I posted some extra details here: http://eclecticguy.com/2008/11/12/shr...
Especially read about the trick of showing the hotspot rectangle while you are laying out the hotspots on the page! You can see what you are doing, which makes it a lot quicker. The other tip is to name your Mockups starting with a 2 or 3 digit sequence like 03-blaahblah - that way the new tab sort order (in the beta version today) works and it helps keep things organized.
Remove Inappropriate?
Delete or Edit

Chris Gruel replied on November 17, 2008 16:43

I am testing the application for rapid prototyping of proof of concept ideas before they are sent to IT for enterprise implementation.

Below is the BMML

<mockup>
<controls>
<control>
<controlproperties>
<text>Mkt%20%7C%20Count%0A1%20%20%20%20%7C%20899%0A75%20%20%20%7C%20650%20</text>
<verticalscrollbar>true</verticalscrollbar>
<hasheader>true</hasheader>
<selectedindex>0</selectedindex>
</controlproperties>
</control>
<control>
<controlproperties>
<text>Show</text>
</controlproperties>
</control>
<control>
<control>
<controlproperties>
<text>Over</text>
</controlproperties>
</control>
<control>
<controlproperties>
<text>All</text>
</controlproperties>
</control>
<control>
<controlproperties>
<text>Mkt%20Counts</text>
</controlproperties>
</control>
<control>
<controlproperties>
<text>Limit%3A</text>
</controlproperties>
</control>
<control>
<controlproperties>
<text>850%20Default</text>
</controlproperties>
</control>
<control>
<controlproperties>
<text>Price%20Change%20Ind.</text>
</controlproperties>
</control>
<control>
<controlproperties>
<text>Max%20Str%3A</text>
</controlproperties>
</control>
<control>
<controlproperties>
<text>899</text>
</controlproperties>
</control>
</control><control>
<control>
<controlproperties>
<text>Download%20Data</text>
</controlproperties>
</control>
<control>
<controlproperties>
<text>Download</text>
</controlproperties>
</control>
<control>
<controlproperties>
<text>Download%20data%20from%20the%20staging%20table.</text>
</controlproperties>
</control>
<control>
<controlproperties>
<text>Go%20No%20Go%2CSMR%2CSubmitter%2CJob%2CType%2CDept%2CCount%2CPush%20Count%0A%2C3351%2CCGK0O7%2CTest%2CClearance%2C22%2C221%2C1%0Ax%2C2552%2CDSV01%2CPrice%20Changes%2C28%2C331%2C0</text>
<verticalscrollbar>true</verticalscrollbar>
</controlproperties>
</control>
<control>
<controlproperties>
<text>Both%20Up%20and%20Down</text>
<state>up</state>
</controlproperties>
</control>
<control>
<controlproperties>
<src>file%3A///C%3A/HDL.jpg</src>
</controlproperties>
</control>
</control></controls>
</mockup>

Add a comment

Company participation

The mood in here

Products & Services

This topic is tagged

Related topics in Balsamiq

Share your designs!