material design web app template
hi i'm shristi, i've just started workingon 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 numberone 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 themall 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 kindacheatsheet 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 thenjust 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 actuallylets 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 somethingelse
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 andchange that to you any colour that you want to and doanything 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 hereselect your main color: say now i'm gonna be bluegrey and selectyour 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 thatprocess 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 outbossable.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
Tidak ada komentar:
Posting Komentar