Am collaborating with a mate building a web app. He’s doing the technical side of things and I’m doing the visual interface stuff.
Have been making my mockups for the interface in Illustrator, but am wondering if this is best program to do this in, what do you guys reckon?
If it’s just mockups you can use anything you like.
The developer will take that and make it into the UI/UX etc.
Ask the person who will be doing the work on the UI/UX and ask them what they prefer.
A lot of times I have done this and used Photoshop and supplied PSDs. What happens after that… I don’t know, a few days/weeks later it’s a functioning app/website… automagically!
It’s a matter of opinion.
I’ve been doing this sort of thing for many years, so I’m just comfortable using Photoshop for prototyping since it’s pixel-based, like the web. For the .svg stuff, Illustrator’s needed, but for just giving a developer a mockup, in my opinion, Photoshop is fine. Besides, many developers are somewhat less than comfortable using with Illustrator. Mostly, I just do my own front-end coding anyway.
That said, that’s just me. Over the past few years, there have been lots more tools come on the market that people seem to feel strongly about — XD, Figma, Sketch, etc. These tools all have special features of one sort or another and assume certain kinds of workflows that various people find useful (or not). Like I said, a lot of it is a matter of opinion and what you and the developer feel comfortable using.
As someone who also works in Web Design and UI/UX design, I would say that there is no best program. Companies, teams, and agencies choose and use different software according to their needs. Some agencies still use only Illustrator and Photoshop to design websites, but others may combine three or more software to achieve the same task.
Personally, I would say Photoshop or Illustrator (most developers will prefer Photoshop) alone is fine if most of the website is static or only contains short transition animations. However, if your website includes heavy animation (and this is the trend in recent years) then you will need to use other tools as well.
For wireframing, tools such as InVision and Atomic are generally preferred as they not only allow the designers to quickly come up with a rough sketch for the website but also allow them to communicate efficiently with the developing team or with the clients using the provided communication tools.
For hi-fidelity models and prototypes, Sketch (only available on Mac), Figma (cloud-based), and Adobe XD dominates the market with their abilities to create complicated prototypes with interactions and animations. These software also have plugins that allow designers and developers to quickly export the prototypes into the final codes, allowing developers to shorten the total developing time. These software are also developed such that they can import designs directly from Photoshop (this is why developers prefer to have .PSD delivered) with all of the layers/groups maintained. In recent years, however, Sketch has been on the decline in terms of popularity as Figma and XD continued to evolve.
Personally, I’ve been using InVision for early drafts, Photoshop for designs, and Adobe XD for prototypes.
I hope this could provide you with some recommendations in case you are looking to add more tools to your arsenal.
Bet regards,
Thanks guys, was unsure whether what I was doing in illustrator was super unconventional (am glad it’s not!). Had a look at inVision and Figma, its so crazy how they’re web based apps, they look like powerful tools. Am only designing a couple of screens for now, so will stick to Illustrator!
