We will redesign our android app using google material guidelines. Now I use illustrator for wireframing so I started looking for material design kit resourses and I found this whiteframes in the google site, where the file contains screens like this which it appears to be perfectly composed screens, with perfect font sizes and style where the only missing element is colour. I can imagine doing wireframes with that level of detail would be very time consuming. Is there any other way, tool, kit to wireframe for material design without that level of detail?

  • 1
    This question is essentially asking us to google wireframing templates for you. – DA01 Sep 5 '15 at 17:29
  • @DA01, I'm sorry if my question can be interpretated that way, it was not my intention. I actually wanted to understand if it's neccessary to wireframe so specifically for a given platform or style. After reading more, I think I've been confused. I'm thinking now that wireframes should be platform agnostic. It does not matter if I have to design for Android or IOS, wireframes should only really contain nested boxes... so then it would be part of a hi-fi wireframe or visual design phase to translate those boxes into actual IOS or Android components... is that it? – Franco Sep 6 '15 at 6:19
  • 1
    There is no one 'recipe' for wireframes. You wireframe in whatever way works for the needs of the particular project. Sometimes that might be a pen and a napkin while sitting at a bar. Sometimes it might be 100 high fidelity photoshop comps. And then there's everything in between. I would always argue for 'less is more' when it comes to wireframes. – DA01 Sep 6 '15 at 6:20

The main reason of the wireframing is to build babysteps of the design. Wireframe focuses on what elements you will use, how elements interact each other. So wireframing is crucial for the design process. On the other side, Designing acording to Material Design principles is next step after the creating wireframes. You can find benefits of the wireframing on this article

I suggest Balsamiq Mockup for the wireframing, it is neat and good start for designing process. However, if you passed wireframing step and want to take the UI design process, I suggest Sketch. It has plenty of resources on the web and you can find Material Design element resources for Sketch.

  • I see how you make a difference between wireframing and designing for Material Design, seeing them as two different things. Does that suggest wireframing with simple boxes first to confirm design decisions and then "apply" Material Design in a hi-fi wireframe or maybe directly in a psd mockup? – Franco Sep 6 '15 at 10:14
  • 1
    Exactly. My view about wireframing is as same as you have said. Some designers do not pay attention to that some of them do. It's a choice I guess but about this issue maybe if we change the topic as "How to better do apply for material design?" it would be more accurate. – Burak Kantarci Sep 7 '15 at 10:48

A good way to wireframe for Material Design on Android would be to use a Wireframing tool for Android itself - WireFlow by Ludomade. It is brilliantly developed and offers most shapes used in Material Design for Android and is very easy to make almost perfect mockups and then replicate them on Photoshop/ Sketch.

WireFlow by Ludomade

It can be done on the go and can be shared as well.

However if you want to go professional, Balsamiq doesn't have the latest paper elements and other things you'd require in Material Design, but it'll work if you only need to wireframe the design and then proceed to construct a high fidelity mockup based on the wire frame.

You can find popular "Mockups to Go" with Balsamiq on Android out here: https://mockupstogo.mybalsamiq.com/projects/android/grid

  • Exactly as Burak mentioned below, you guys make a difference between wireframing with X tool, using simple boxes I believe, and then applying Material Design as part of a second hi-fi wireframe or maybe the actual psd mockup. If so, that would tell me a lot of how actually we need to wireframe. If that's correct, I would assume also that the same runs when designing for IOS and Android as well. The thing is I've found time consuming wireframing with very neat wireframes I've found for both OS for illustrator. What do you think? – Franco Sep 6 '15 at 10:24
  • 1
    Wire-framing is designing a concept you have in mind onto the phone without wasting your precious time on higher fidelity designs if you need to validate them later. Once you have validated your design, you can then move to High Fidelity mock-ups. – Swapnil Borkar Sep 6 '15 at 11:32

Not the answer you're looking for? Browse other questions tagged or ask your own question.