3

I am what's defined a "full stack" developer, with very little sense of what's "good looking". I want to "reform" myself, and learn how to "make the leap": actually learn UIs (design, colours, etc) and mocking up. At the moment I am developing using Google Polymer (material design). To "mock up", at the moment I am actually writing up HTML/CSS, but it's not ideal and it's time consuming.

Questions:

  • What tools can I use to mock up Material Design UIs? Are Gimp/Inkscape the way to go?

  • What resources would you recommend in terms of actually learning how to design UIs, considering that I am very little visual art skills (I would need to acquire them) and poor colour coordination skills?

Improve this question
1
  • I prefer to do most of my wireframes on paper. Printer paper and, and some black/gray markers. It allows you to do physically mock up some of material design animations (slide a piece of paper with the nav over the piece of paper with the body). Also, it prevents you from getting too wrapped up in details like fonts, colors, etc. Commented May 16, 2016 at 8:33

2 Answers 2

Reset to default
1

Like you, I have a development background and not much design experience. Nevertheless, I decided to build my own mobile apps by my own so found myself in the exact place as you not too long ago.

After a few days trying out different alternatives for wireframes / mockups, I decided to use Pencil with the Lollipop stencils. It contains most of the widgets I need and is very easy to use. The best thing about it is that it's open source and free. If you feel like spending money, there's plenty of paid alternatives that are supposed to be better but they weren't worth the money in my case so can't advise on them.

Using HTML/CSS for mocking, as you noticed, is a bad idea as it's painfully slow. Using Gimp/Photoshop/Paint is a bit better but it's still painful as those tools were designed for general image manipulation rather than creating mockups. Give Pencil a try and if you still feel like you need more, try the paid alternatives (they all offer free trials).

As for resources, the one I always use is Google's Material Design guide. It is easily digestible so I always go back to it whenever I need to make a decision on how to design something and so far I've been very pleased with the results.

Improve this answer
1
  • 1
    Fantastic, this answer made me discover Pencil...! Commented May 15, 2016 at 7:16
0

Material design is a great place to start for getting into UI design. I am from a similar background & moved intoa front end dev role & then UI/ UX design after my passion for creating high quality products grew.

For wireframing I use moqups for low fidelity as it's very easy to throw things together in minutes. Then I use Axure to take them further,as I like being able to build out a true example for the application flow. This can sometimes be lost on a non tech audience.

I don't currently use a Mac, but sketch is a really good product if you have the opportunity to use it.

To develop more as a designer, being with material design as it lends itself to white labelling, then check out sites like themeforest, you will get a lot of ideas from look at those sites. Even just to gain an opinion on certain elements.

Hopefully this info was useful for you.

Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.