Bossable.com: 3 Tips for your Material Design Wireframes


Hi I’m Shristi, I’ve just started working
on putting together some wireframes for my new app and I thought I’d just take a moment and show you a couple of quick tips and tricks for getting started with actually designing your app using material design so there’s not too much to see here, I can just quickly show you what I’ve started to work on and this page that I’ve got here is very much just a quick drag, drop, move a few things around and starting to formulate what the app might start to look like the 3 things that I have for you number
one grab yourself some whiteframe layouts for desktop tablet mobile layouts they give you some potential templates and layouts for putting together layouts for desktop and same deal with tablet devices and you can also do the same for mobile, so where do you get these from? and to get them just jump across http://www.google.com/design/spec/resources/layout-templates.html if you jump down to resources and to layout templates you’ll see them
all here you can just download them you can then take them and use them in your new app, the next thing I want to talk about is the Font Awesome vector icons for your wireframes while you’ve got ideas about potential icons that you might use or potential images or different types of graphics one kinda
cheatsheet way to do that is to grab Font Awesome and actually use that as a font in your app (wireframes) if I show you what I mean if you download Font Awesome and then
just unzip the file that you’ll get and just jump across to fonts and look for the OpenType font file and the TrueType font file just right click on that and just go ahead and install that file, what that actually
lets you do is use any of these icons, you can drop them straight into anything that using if your not using Illustrator, if you’re using something
else you can actually drop these icons directly in as text Say for example, I wanted to add an ambulance icon I just come here copy it and jump across to my app (wireframes) and I can just basically just paste that in I’m just going to change that to Font Awesome if I can find it that’s that right there, I’ll make that a little bigger so you can actually see it There’s the ambulance icon right then and then you can use that and
change that to you any colour that you want to and do
anything that you want for your app, so that’s tip number 2 Tip number 3 if you’re using material design, not sure about colors or colour combinations or how you want your app to look A great place to start is this website over here it’s called http://www.materialpalette.com/ on here
select your main color: say now I’m gonna be bluegrey and select
your accent color and what this will do for you is put together a palette so it will put together your primary colours, dark primary divider colours, all the things that will actually work together well for you for your app and make that
process of having to think about colors and combinations and that kind of thing and a lot easier, so those are my three tips for working on your wireframes and I’ll check back in when I’ve got a few more things to show you, so please subscribe to the channel if you haven’t already check out
Bossable.com for more detail I’ll keep you updated with how I’m progressing through my new app, and I’ll see you again soon

One Comment

Add a Comment

Your email address will not be published. Required fields are marked *