Hacker News new | past | comments | ask | show | jobs | submit login

I agree with some of the othe posters here - using a vector drawing tool such as Illustrator for designing an interface is much easier than using a bitmap tool like Photoshop (although Photoshop has some vector drawing tools). The main difference comes from the ease with which you can simply select, drag and re-size elements on your screen compared to Photoshop. This will definitely help you work faster if you are experimenting with layout.

You can use a vector drawing app for wireframes, for mapping out screen flows and interaction behaviour, and finally for creating the finished visuals for the app. Photoshop is only really suitable for the last of these tasks. There are some visual effects that only Photoshop can achieve, so you may find you have to use both. But I would always recommend starting with a vector drawing app.

If you don't want to use Illustrator (which has a clunky UI in my view) there are plenty of cheaper vector alternatives . Here are a few

Inkscape (open source and capable of professional results) http://www.inkscape.org/en/

Sketch (Mac only, praised for its ease-of-use) http://www.bohemiancoding.com/sketch/

Serif DrawPlus (Windows only, low-cost but very capable) http://www.serif.com/drawplus/ (no trial version, but they are selling the previous version for £10 (approx $16 usd): http://www.serif.com/promo/

Xara Photo and Graphic Designer (Windows only, again low-cost but very fast, capable and an excellent interface) http://www.xara.com/uk/photo-graphic-designer/

Edit: just to add, the apps above do not have anywhere near the amount of tutorials for learning as Illustrator (or the industry recognition), so factor that in when choosing a vector app if that's important to you.




I am building out the front-end of a CRM and I have started using a lot of SVGs for smaller elements. I can't believe how amazing it is working with illustrator and SVGs. As far as actually designing a complete UI in illustrator, personally, I couldn't do this because of lack of knowledge but I can definitely see the positives.


Yes, icons and small motifs made in Illustrator and SVG using pixel preview is ace. Looks lovely on retina too. I do that and fall back to png for devices that can't handle svg.


I have done a lot of interface design (ex-lead UX at my company) and I used Inkscape. It's great, easy to use and fulfills all the needs I had. Actually, using Inkscape was what put me in that role; my mockups were way better than everybody else's.


THANK YOU. I cannot stand using a raster tool to design UIs. It's insane to me, and it absolutely boggles my mind that it's considered 'standard' practice (other than just going to html/css directly).


Currently I am taking designs from a media company and have to turn their PSDs into real code.

Is the process easier in Illustrator-- Design to HTML/CSS? Or does it to build the UI elements easier?


Not really.

Illustrator is better for the drawing stage of your UI than Photoshop but both are equal when it comes to checking spacing, color values, corner radiuses and so on when it's time to actually build that UI.

It's also a bit more straightforward to export an object drawn with Photoshop than it is to do the same with Illustrator.

Also, decent-to-good "Photoshoppers" are a dime a dozen because both businesses and schools have a weird love affair with Photoshop but decent-to-good "Illustrators" are harder to find. You'll have a hard time convincing your client to make its team of ADs and designers switch to Illustrator.


OK that's what I thought. I have a project right now where I'm translating some PSDs into HTML its what I've done in the past but I haven't tried illustrator.


Nope, same process whichever you use.

The initial files will be rasterised - so you won't be able to get the vector benefits of svg unless you export paths to illustrator - which is a bit shit and tedious.

PSD to * is such a bad, bad approach


Let me just re-size this button with rounded corners in Photoshop...


Cmd + T, then resize it. Simple. Works as expected (they just released this feature in Photoshop CC).


Let me just pay for that feature every month, yeah




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: