Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It only takes a minute to sign up.
Sign up to join this community
I am an experienced programmer but new to graphic design.
I am making mobile apps for both iOS & Android, and I am wondering what graphic design tools/software I should use (in Mac) would be the best fit for a starter and for designing graphics for mobile apps?
Any advice will be appreciated. Thanks.
If you have the device you're designing for, you want something that can pitch out the image you're working on, straight to the device, so you can see what you're editing on the actual intended screen.
This sounds so logical you'd imagine it's easy to achieve and that someone had thoroughly setup a situation that did this live, easily.
Not true.
Let's deal with Apple first, because you should always design for this platform first. If you need this explained as to why this generalisation is true, you probably still believe in a benign Microsoft and the "virtues" of laissez-faire economics. So use an iPad or iPhone to begin with. Android devices compound the fiddliness of doing this.
The best rig is either iDisplay or AirDisplay. //both also work for Android
I prefer iDisplay but do use both, and at $20 a shot, it's not like you're breaking the bank to try each. There's minor differences between them, both developers are responsive, but iDisplay is the little guy, and he's super cool with his email responses. So gets my nod:
iDisplay http://www.getidisplay.com
Air Display is here: http://www.avatron.com/apps/air-display/
// BOTH of these apps are designed for extending your display, so their benefits don't end with your testing of app interfaces dynamically. They're generally very helpful. iDisplay's touch screen responsiveness is (to me) a little better. So yes, you can operate your apps and draw on screen in Photoshop with these things. Amongst other benefits over things like Skala View etc.
Now for the hard bit. You need to get your work view over to the screen without borders and chrome etc.
Some apps are good at this, some are near impossible to get right.
Indesign is good at this. It has a full window preview mode that you can push out to the iDevice, as a duplicate of the open document, so you continue working in Indesign on the computer and see live updates on the iDevice screen.
I prefer a more powerful vector app for editing than Indesign, so I embed an Illustrator document into that Indesign document with live linking and then draw in Illustrator...hit a key combo that updates everything in Indesign and see it all update on the iPad/iPhone.
Adobe Bridge can do similarly, more directly, but is so prone to "losing its connection" that it's only stable for a few updates to the original file.
Photoshop is rather painful to work in for interface design, because it's not really suited to the job, and Fireworks, which was excellent for UI design is now a thing of the past. BUT, Photoshop can also do second screen, full screen previews with a duplicate of the current document, so you get live updates on the device, without chrome and other nonsense obscuring your full screen viewing.
I've spent a lot of time testing these sorts of setups to do LIVE editing on the device, and this can be much more fiddly and unreliable than it should be, so please don't be shy about asking more questions. It may well be annoying to setup. But it's very much worth it for the ability to live edit and preview onscreen.
It would be completely remiss of me to not point out that this app does this "automagically", apparently:
http://www.bohemiancoding.com/sketch/
I haven't tried it. But it's worth considering.
Sorry, while I'm handing out free advice, one more thing. If you're a competent programmer I think you should focus on becoming a great programmer. They're very rare. And in so doing, partner with a designer for design. Design might look like anyone can do it, that all you need do is learn the tools. But there's a magic ingredient to design, and that's an intuitive understanding of humanity's desires and opinions, feelings, sentiments and the zeitgeist of now. This is something that can't really be taught or learned. You either have sufficient empathy to be a designer and will push through learning the tools to express that, or you're a programmer.
If you're a programmer, and can communicate with a designer, that will ultimately be a 1+1=3 type of equation. You'll both benefit massively from the others talents, and be able to more deeply focus on your own talents and improving in that area.
So, in deeper answer to your question, the best design software for you to use is a designer.
In the past I've mainly used a combination of Photoshop for actual pixel rendering and Illustrator for vector artwork (icons, bars, illustrations).
To preview artwork on my devices I've used Liveview and Silkscreen.
The pros to Liveview is that it's broadcasting a live view of a particular view port to your device from your desktop. The con is that it's broadcasting a live view of your desktop. I found myself moving windows a lot or screens savers triggering and needing to log back in.
The pros to Silkscreen was that it creates a new preview image every time you save your PSD. The cons to it was it didn't retain history of recent PSDs for quick reference so I found myself reloading files a lot.
There are a lot of interesting products coming out to assist designers with previewing artwork, though most of the time nothing is better than actually building the app. The recent Facebook Paper app was designed with a custom design tool built on top of Quartz Composer. (Source)
My best advice is to find some tools you're comfortable with and use those. Since you're a developer using something like Quartz Composer or even the open-source tool Facebook built on top of Quartz, Origami.
