• Jason CarulliJason Carulli, 8 years ago

    Adobe Illustrator.

    It's all about artboards and symbol libraries.

    First, set up default project template files (.ait). You can lay out as many artboards to your standard layouts (eg. web, mobile, iOS), add guides, etc.

    Second, set up a custom symbol library for wireframing elements that can easily be dragged onto the artboard to get your project up and running.

    Finally, once you get your projects design style nailed down, you can add buttons, forms, logos and other graphic elements to the project symbol library where you can continue designing each page quickly and easily.

    A couple of tips...

    If you need to present wireframes to a team, you can File -> Save as and choose PDF. Each artboard will appear as its own page inside a compiled PDF.

    For isolated graphics and elements that appear on the web, create a new artboard roughly the size of the element and export to png or save as an SVG. I never use Photoshop to slice up mockups.

    If you aren't using SVGs for assets on the web and are using transparent pngs, always File -> Export artboards rather than File -> Save for Web... — the pngs come out much crisper.

    I have a hard time comprehending why so many people use Photoshop as opposed to Illustrator when designing for the web. Most designers that I have worked with turn over multiple files for different pages of the project that are littered with hundreds of disorganized layers and file sizes between 50-200mb. With Illustrator I can produce 1 file with multiple artboards representing pages of the project with only a couple layers and a file size around 10mb max.

    I have my perfect design tool, it's Adobe Illustrator.

    1 point
    • Toby KellerToby Keller, 8 years ago

      I use Illustrator as well, but it's not the ideal design tool. Exporting assets sucks compared to Sketch. Quality of exported assets sucks compared to Photoshop. No way to prototype animation/transitions or responsive layouts, no iOS7 background blurring, poor text rendering…

      I still find it the best compromise for my needs, but since we're talking about how to build something better, let's not gloss over the inadequacies.

      2 points
      • Jason CarulliJason Carulli, 8 years ago (edited 8 years ago )

        I see your point but I don't consider those elements as part of the design phase, those interactions come during the development phase of our process where the UX engineers do what they do best.

        I agree with your point on exporting assets, it's not ideal, and there are hacks to make graphics cleaner, offset path, etc. But for me being able to quickly create an artboard to a defined pixel size and export it at web and 2x versions works better than creating a bunch of layers and relying on 3rd party plugins to export at their own dimensions. I know the devs I work with would prefer to have graphics at 80x40px as opposed to 78x39px.

        Obviously I am biased and it's nice to see apps like Sketch gain popularity, but I can't put my faith into Bohemian Coding maintaining and growing the product for the long haul like Adobe has with their products.

        0 points