Mockup templates for SailfishOS?

Hi all,

My students are now building mockups for the health app they’re developing, and we were wondering if there are mockup templates or dedicated tools for SailfishOS ?

Mainly, graphics for the OS visual elements (buttons, pages, menus, etc.), already available ?

Probably obvious, but the ‘examples’ section of the sdk has ‘sailfish silica component gallery’ :slight_smile: I think that’s a good place to start.

1 Like

Yes, but these are code elements. Other than print screening them, they’re not usable as is.

I’m looking for graphical elements to use in Draw.io or Balsamiq and similar UI design/mockup.

Ah, sorry, I misunderstood. Maybe a look at GitHub - qmlbook/qt6book: The Qt 6 Book - A book about QML / Qt6 QML Book ? I refer to it fairly often, though it’s a mix of html/code/images.

Edit: I found pages like: States and Transitions | The Qt 6 Book helpful.

It’s still not that :smiley:

What I mean is graphical elements (images, svg, etc.) that we can use to create a graphical mockup for the app.

Is there available graphical assets for SailfishOS ? Because the slider, buttons, menus, etc. are quite different than available assets mostly aimed to Android/iOS/Web.

The aim is to draw the app visually before writing the code, such as the following (but the aim is to get colored mockup not wireframes):

I’m not aware of any SFOS specific artwork (beyond the little in the docs repo).

You are asking for a solution that the entire software industry has failed to solve in a satisfying way (painful memories of mocking up UML in Visio circa 1998 come to mind :slight_smile:

But seriously, what tools are you using to make mock-ups? Does it encompass stuff like state / control flow diagrams or is it more ‘abstract’, just ‘organizing ideas’? If it’s the latter, I’d do pen and paper, first. A number of people I know use https://penpot.app/ … but that all ends up looking like crappy android/ios stuff, but it’s a very flexible design tool. What is the learning level of your students?

Frankly, I WOULD make mock-ups using QML and snapshot them (maybe automatically on state change). At least then you COMBINE the abstract modeling and initial plausibility testing :slight_smile: Think ‘agile’ :slight_smile:

1 Like

For the course, we’re having a wireframe/mockup session, so they built wireframes with draw.io, and now we’re trying to build a graphical mockup.
They’ll have to prototype the UI later in qml.

On Android or iOS we have plenty of software to do so, including assets in draw.io or figma, etc.
It’s sad we don’t have proper assets for SFOS, either from Jolla or 3rd parties.

A quick image about the terminologies I’m using:

1 Like

For Figma there is this (unofficial and it isn’t my work).

5 Likes

Thanks, that is exactly what I am looking for!