Balsamiq Community Discussion

Sketch versus wireframe

What is the real difference between using the sketch skin and the wireframe one?

is it really just the “skin” how the page is displayed?

What is the added value of one compared to the other?

Hey @simple45, hope you’re doing well. :slight_smile:

The difference is indeed the look of your project. Having both options allows you to adapt your project to your needs or audience. You can either use a rough, sketchy look or a more polished one when needed. More details here.

Hope this helps. Have a great weekend!

Hello Vingin :slight_smile:

I still do not see the usefulness of the sketch look, when the wireframe look is clearly more clearer and more enjoyable, whether when you design your wireframes or when you present them.

In addition, I would have liked the marckup with the red thumbtack.to be available under the wireframe look…

Hi @simple45, A lot of customers like the rougher look of the Sketch skin because it allows them to present ideas without their clients and other stakeholders getting too attached to the wireframes as the finished version - i.e. it focuses on the core ideas of structure and content rather than the pixel-perfect implementation details.

If you’re not crazy about the Sketch skin, no problem! Just use the Wireframe skin as your default and you’re all set.

Perfect :slightly_smiling_face:

I would have liked the marckup with the red thumbtack.to be available under the wireframe look the same way it isavailable under the sketch look. I am using that as some light documentation.

1 Like

Hello,

You could create your own using a couple of Rectangle controls and a Text Area… You can then convert to a Symbol for convenient reuse.

Try importing this JSON to see what I mean:

{
"mockup": {
    "controls": {
        "control": [
            {
                "ID": "1",
                "typeID": "Canvas",
                "zOrder": "0",
                "w": "150",
                "h": "150",
                "measuredW": "100",
                "measuredH": "70",
                "x": "298",
                "y": "200",
                "properties": {
                    "borderStyle": "none",
                    "color": "16767334"
                }
            },
            {
                "ID": "2",
                "typeID": "Canvas",
                "zOrder": "1",
                "w": "73",
                "h": "36",
                "measuredW": "100",
                "measuredH": "70",
                "x": "336",
                "y": "180",
                "properties": {
                    "borderStyle": "none",
                    "color": "13369344"
                }
            },
            {
                "ID": "3",
                "typeID": "TextArea",
                "zOrder": "2",
                "w": "136",
                "h": "127",
                "measuredW": "200",
                "measuredH": "140",
                "x": "305",
                "y": "216",
                "properties": {
                    "borderColor": "16767334",
                    "color": "16767334",
                    "text": "\nThis is a comment!",
                    "size": "13",
                    "bold": "true"
                }
            }
        ]
    },
    "attributes": {
        "name": "New Wireframe 1",
        "order": 1000000,
        "parentID": null
    },
    "resourceID": "DA3FA22A-5644-44D8-B943-7217273D9064",
    "mockupH": "170",
    "mockupW": "150",
    "measuredW": "448",
    "measuredH": "350",
    "version": "1.0"
}

}

I dit that with a rectangle, containing a text area containing the jason you provided.

Now:

  • If I want to use that everywhere, I have to convert to a Symbol
  • In order to convert it to a Symbol, I have to group these objects (the rectangle, the text area…)
  • When grouped, I will not be able to modify the comment if I don’t ungroup before. is not it?

So, I will have to group and ungroup each time I want to add or modify a comment in the markup?

Maybe, I am not using the symbols the right way?

Hello @simple45,

yes - to create a Symbol you first group the controls then convert them to a Symbol:

The new Symbol will then be added to your project Symbols and can be used like any other control - you can add them from the UI Library or Quick Add and move and arrange them with other controls in your wireframes.

When you add a Symbol to the canvas, it becomes a Symbol instance (a copy of the Symbol if you like). You can override the text in the Text Area only for a single instance. More here: Overriding Symbol Properties

Yes, but before I can override the text in the Text Area, I have to ungroup the symbol. Doing that each time I want to add a comment ?

We are talking about comments, I am using them (adding, updating…) frequently.
Can you imagine ungroup, modify, group each time?

You don’t need to ungroup a Symbol instance to override the text - just double click on the Symbol instance in one of your wireframes to edit the instance and override the text.

Check out this short animated GIF to see what I mean:

override

Oh, let me try it again because I already try it but seems like I was forced to ungroup before begin able to modify the instance.

1 Like