So we have a first version of a Mockup Toolkit almost ready to go (awaiting review by the core VDG team).

The question I have for you, my fellow community designers, is what would you like in a Mockup Toolkit?

What's it mocking up? Window decoration? Button and widget placements etc?

The toolkit will have have the elements to mockup a full app or a plasmoid or whatever using the visuals(colors, controls, typeface, etc.) we're targeting for Plasma Next. Of course if you have suggestions for different visuals, you can always alter the visuals in the Mockup Kit.

alake wrote:The toolkit will have have the elements to mockup a full app or a plasmoid or whatever using the visuals(colors, controls, typeface, etc.) we're targeting for Plasma Next. Of course if you have suggestions for different visuals, you can always alter the visuals in the Mockup Kit.

Oh that's great news!
What confuses me though is the app/plasmoid distinction. I thought plasma themes and and qt-themes were separate entities. So how will this mockup toolkit allow us to make mockups of both? Will the plasmoids and the qt-theme have the same visuals?

Will the icon style guide be released with the toolkit or later?

Thanks for all the amazing work!

Sogatori wrote:
What confuses me though is the app/plasmoid distinction. I thought plasma themes and and qt-themes were separate entities. So how will this mockup toolkit allow us to make mockups of both? Will the plasmoids and the qt-theme have the same visuals?

The underlying technical implementation of plasma themes and traditional application widgets styles are different, yes. At the visual design level, however, there's no need to focus on the implementation differences. We're focused on one, cohesive set of visual design goals. Whatever differences there may end up being between the plasma themes' design and application widget styles' design are likely to be informed by the functional distinctions (plasmoid on the desktop/panel vs application windows) instead of the technical distinctions.

Oh and, for clarity, this will be a toolkit to do visual mockups, nothing more. So if you can use Inkscape, you'll be able to use the toolkit. If anyone has ideas for what they'd like to see in such a toolkit please share. This is will be one part of our "community studio".

Sogatori wrote: Will the icon style guide be released with the toolkit or later?

I think Jens mentioned in another thread that we've started working on a visual design guide. Any icon related guidance will be there. I'm not sure what jens has in mind regardless simultaneous or independent release of the toolkit and the design guide.

alake wrote:Oh and, for clarity, this will be a toolkit to do visual mockups, nothing more. So if you can use Inkscape, you'll be able to use the toolkit. If anyone has ideas for what they'd like to see in such a toolkit please share. This is will be one part of our "community studio".

My wishes would be:

• A documentation area to unfold, with references to the HIG (and some visual examples of them) in it
• Dockable toolboxes
• A number of standardized templates for getting you started and a preview area for searching the right one
• Snap to grid for often used positions (e.g. middle of an area)
• An easy to use color selector with default Plasma colors predefined

And thanks for your work!

alake wrote:The underlying technical implementation of plasma themes and traditional application widgets styles are different, yes. At the visual design level, however, there's no need to focus on the implementation differences. We're focused on one, cohesive set of visual design goals. Whatever differences there may end up being between the plasma themes' design and application widget styles' design are likely to be informed by the functional distinctions (plasmoid on the desktop/panel vs application windows) instead of the technical distinctions.

Ah, thanks for clearing that up!

What I'd like to see:

• It would be nice if you guys could ship the new colour palette alongside the toolkit
• Maybe one example window for a plasmoid an one for a "real" application
• Maybe some examples when which colour should be used (although this might be part of the visual design guide you mentioned)
• Guidelines about the correct use of the typeface.
• I know that the icons are still work in progress, but it would be nice if you could include some of the action icons, like the magnifying glass, cancel symbol, etc.

donK23 wrote:

alake wrote:Oh and, for clarity, this will be a toolkit to do visual mockups, nothing more. So if you can use Inkscape, you'll be able to use the toolkit. If anyone has ideas for what they'd like to see in such a toolkit please share. This is will be one part of our "community studio".

My wishes would be:

• A documentation area to unfold, with references to the HIG (and some visual examples of them) in it
• Dockable toolboxes
• A number of standardized templates for getting you started and a preview area for searching the right one
• Snap to grid for often used positions (e.g. middle of an area)
• An easy to use color selector with default Plasma colors predefined

And thanks for your work!

The toolkit will simply be an Inkscape image from which you can copy and paste elements into your mockups Inkscape (or any other application which can read the format), not a mockup application, so most of your wishes probably cannot be granted

donK23 wrote:

alake wrote:Oh and, for clarity, this will be a toolkit to do visual mockups, nothing more. So if you can use Inkscape, you'll be able to use the toolkit. If anyone has ideas for what they'd like to see in such a toolkit please share. This is will be one part of our "community studio".

My wishes would be:

• A documentation area to unfold, with references to the HIG (and some visual examples of them) in it
• Dockable toolboxes
• A number of standardized templates for getting you started and a preview area for searching the right one
• Snap to grid for often used positions (e.g. middle of an area)
• An easy to use color selector with default Plasma colors predefined

And thanks for your work!

Like colomar said, the Mockup Toolkit will be an Inkscape SVG. Using excellent software that is already available lowers the learning curve and keeps the toolkit maintainable. Besides, Inkscape is already loaded with excellent features. Android, iOS and many other Visual Design guides provide similar mockup templates for use with popular software (Photoshop, etc.).
For your wishes:

• Inkscape already has dockable toolboxes.
• The SVG will also include example mockups so you can see how the assets are used.
• Inkscape has a snap to grid feature and the toolkit SVG wil have a grid-size specified.
• Based on your suggestion, I'll work on creating an Inkscape color swatch with the Plasma next colors.

Thanks for the suggestions!

Sogatori wrote:What I'd like to see:

• It would be nice if you guys could ship the new colour palette alongside the toolkit
• Maybe one example window for a plasmoid an one for a "real" application
• Maybe some examples when which colour should be used (although this might be part of the visual design guide you mentioned)
• Guidelines about the correct use of the typeface.
• I know that the icons are still work in progress, but it would be nice if you could include some of the action icons, like the magnifying glass, cancel symbol, etc.

• Based on the suggestions in this thread, I'm working on getting an Inkscape color swatch done up!
• The kit will include example a couple applications and plasmoid mockups.
• The Visual Design Guide will include guidelines for color and typography.
• Yeah, the icons are still being work on (with great progress being made btw!). The toolkit will have a few placeholder icons that'll do till the new icons become available. But don't be shy about coming with up your own icons or maybe using some of the Awesome Community Icons for your mockup work (hint: If all else fails, Google image search is your friend) . Remember these are mockups, not working applications.

We'll keep trying to improve the toolkit after the first release (this week), so keep the suggestions rolling in.

It would be cool to have stencils for existing tools like Pencil, Balsamiq or Axure!

alake wrote:Like colomar said, the Mockup Toolkit will be an Inkscape SVG.

Ok, I thought of a standalone application. Even better when it´s based on Inkscape Waiting for the release

bjoernbalazs wrote:It would be cool to have stencils for existing tools like Pencil, Balsamiq or Axure!

I've talked to Jens about Pencil stencils as well, I think that would be great (since I find it easier to create mockups with Pencil than with inkscape). His reply (on Gtalk) was "Yeah ok so perfect! We will have to fix stencils for you guys", so it seems like he was open to the idea. The question is whether we'll find someone willing to do the work (creating proper stencils for Pencil requires a little technical expertise), though.

I've suggested using MyBalsamiq in KDE on the usability list a while ago (http://lists.kde.org/?l=kde-usability&m ... 914921&w=2) since they give free licenses to FOSS communities, but the majority was against using a proprietary tool, even if it's free-as-in-beer. Therefore I assume Pencil would be preferred by the community. Plus, I don't think having our visual designers create stencils for Balsamiq would make much sense anyway, given that the visual style in Balsamiq is fixed to sketch style anyway. If we interaction designers want to use Balsamiq, I guess we should just create our own components.

I don't think creating Axure stencils for KDE makes much sense, given that Axure is proprietary, expensive and only runs on Windows and OSX. Sure it's very powerful, but probably not the right tool for a FOSS community.