Polymer and Material Design


#1

I would like some help with controls that mimic the Polymer/Material Design controls Google is promoting for web design.

It would be even better if I could import the controls, so as new controls are created I could have support for them in Balsamiq.

Between this and the light Android support, I’m finding that it’s becoming difficult to use Mockups for my wire frame work because I can’t do some of the things that are built into the platforms I’m using for development.

I know the wire frames are supposed to be simple. My customers have an expectation around material design, when the design doesn’t have that feel to it they aren’t very happy.

Please, what are the plans around Material Design, Polymer and Android?

Michael


#2

Hi, Michael. I’m guessing what you’re after a pattern libraries or something that gets you started with those frameworks, or with Android.

For Material Design, there are some examples that could be used as templates here:
https://mockupstogo.mybalsamiq.com/projects/googlematerialdesign/grid

For Android, there are some symbol libraries that may be helpful:
https://mockupstogo.mybalsamiq.com/projects/android/grid

Nothing for Polymer in particular, but maybe you can elaborate on your needs there.

With regard to Material Design, my basic understanding of the principles and controls, that you could create anything you wanted with the wireframe skin and leaning heavily on the geometric shape control. But are you looking for pre-built components? I’m aware that some of the properties of our controls make it hard to imply that material, layering, and z-index aspect that Material Design uses in the visual design. So I’m wondering if what you’re after is the pre-built controls, or the aesthetics.


#3

The material design controls will help a bunch. I was looking for just Material Design and Polymer, not Google.

Some of the behaviors would be nice to emulate, like the layering. The way some of the controls float over others (drop shadows), or the way they can be moved and rearranged, would be nice.

I just don’t want to spend my time fidgeting with shape controls to try and mimic something that is a standard control. Does that make sense? It should be easier to wire frame the UI than to build it.

Michael


#4

Sure I understand. I can add a feature request for us to consider a way to imply that raised state that material design uses, but we tend to keep wireframing pure for the focus on function over form and don’t introduce visual design elements. A drop shadow leans heavily in that direction, but I’ll start the discussion internally.

Improving mobile controls is something I’ll start discussing as well.


#5

@Michael_Rickey_AF6FB,

Why are you allowing your clients to, essentially, force you to create relatively high-fidelity mock-ups in the wire-framing phase of your projects? They are costing themselves time and money.

Perhaps a sit-down should be had between you and said clients so as to explain clearly to them the difference between designing the plans for a house and eventually decorating it. Once they get that concept, your life will be much more…ehr…better. In the meanwhile, consider this as catharsis.

As @Mike has mentioned, your suggestion for having more Android-native controls as ready-to-use elements in Balsamiq is spot-on. I’m casting my vote for those goodies right here!

Regards


#6

Hi @Michael_Rickey_AF6FB & @Mike

Great question. I have been working on a few projects which will be following the MD guidelines. I have started to create my own version of the Google Controls. It would be a fairly large project to capture all the design guidelines and as Mike correctly pointed out some aspects you wouldnt cover such as Layers and drop shadows but essentially the basics are needed on my project to convey the design concept. The devil in the detail is covered in High Fidelity designwork done in AI or Sketch.

I would be happy to share these with you or the Balsamiq community.

I also have specifically posted a recent question on the forums re: supporting Font Awesome for myBalsamiq with an extension to support Google Material Design icon library.
http://forums.balsamiq.com/t/issue-adding-new-assets-to-project/796


#7

+1 for 3D mockuping
https://www.google.com/design/spec/what-is-material/environment.html#


#8

it is actually possible to make some shadowing effect by copying a shape underneath itself, moving it to the desired shadow direction and giving it a shade. See https://material.uplabs.com/posts/text-mashup-concept (100% made with Balsamiq)

This might not be possible to achieve with other elements such as text