While creating a complex visual design, have you ever thought that there must be an easier way? When interaction and visual designers face the challenge of creating a complex design over several months, the choice and the correct usage of tools is crucial.
In my last article I told you about some easy traps waiting for visual designers. Now I want to tell you a little about my project experience as a visual (interaction) designer, and the evaluation criteria I have collected for different tools over time. I will also explain which tool I use for what, and which tool I would choose for my next project.
Over the course of my projects I have asked myself many of these questions, but often had to live with compromises because specific tools were prescribed, or the desired functionality was simply missing in a program. My motivation, however, is to optimize the design process and to get the best out of the tools. That's why I looked at various visual design tools and analyzed them for critical aspects.
Visual design tools
At this point we need to look at current visual design tools, classify them and briefly distinguish them.
Adobe Photoshop
Photoshop has its roots in classic photo processing and is mainly pixel-based. As Photoshop has evolved over the years, however, it has become possible to use it for almost all types of digital design. Many designers still use Photoshop when it comes to visual interface design, although they know that it was never intended for the creation of interfaces. This is partly because many people are familiar with Photoshop, and because older projects may be in PSD format.
Adobe Illustrator
In contrast to Photoshop, Illustrator is a vector-based program that was developed specifically as a graphics and drawing program. In Illustrator you can typically create logos, icons or print templates. Although Illustrator and Photoshop look similar, many concepts in the applications are fundamentally different. Many designers use Illustrator for the design of interfaces even though Illustrator was not intended for this.
Adobe Experience Design
Experience Design is a vector-based, next-generation tool that focuses on interface design and prototyping. It is significantly more lightweight than Photoshop or Illustrator. Adobe clearly wanted to address visual and interaction designers who may have used Photoshop or Illustrator even though neither of those applications completely met their needs. The application interface is also significantly reduced compared to Photoshop or Illustrator, and optimized for essential tasks involved in interface design. At present Adobe Experience Design is only available in a beta version, although the range of functions already offered makes it clear what the tool will look like in future.
Sketch
Sketch is another lightweight next-generation vector-based tool with a focus on visual interface design. Sketch’s user interface is, like that of Adobe Experience Design, very clear and reduced to essentials. In contrast to Adobe Experience Design, Sketch is a mature application with a large user community and many useful extensions. These extensions make Sketch of considerable interest to many designers, as they greatly expand Sketch’s functionality. So far Sketch is only available for Apple Mac, but only costs $99.
(Craft)
Craft is a collection of plugins for working with example data within a tool such as Sketch or Photoshop. This makes it possible to embed texts, pictures and placeholders automatically in a visual design. Texts can be synchronized with websites, and images taken from image databases. It also enables access to JSON APIs for access to content.
(InVision)
InVision is also not itself a design tool, but rather a cloud-based design platform for collaboration, prototyping and workflows. It allows you to better communicate the design process in a company and make decisions more transparent, enabling design-driven project management. An extension allows synchronization of Sketch or Photoshop project files with the InVision Cloud to further manage design via the cloud.
Key features of InVision are:
- Design prototyping
- Design sharing and presentation
- Design feedback and commenting
- Real-time design meetings and white-boarding
- Design organization and collaboration
- Project management for designers
- User testing and research
Tools comparison
To compare the five visual design tools (where the fifth is a combination of Sketch, Craft and InVision) I have defined 15 evaluation criteria. The colour, symbol and typographical criteria specify that these parameters are supported both centrally and conceptually. For example, changing a colour value at one point should propagate that change automatically throughout the whole design concept.
x not fulfilled – partially fulfilled + fulfilled ++ well fulfilled
Explanation
The matrix shows that the two Adobe products, Photoshop and Illustrator, fare badly. This is because they do not provide any special functionality for interface design. Their user interfaces are overloaded; as a visual designer you only need a very small part of the functionality these tools offer. It is impossible to manage colours, symbols and typography centrally, to be able to react quickly to changed requirements in a project, in either tool. Neither tool allows you to create an interactive prototype, or to generate measurements for developers.
The two newer generation tools, Adobe Experience Design and Sketch, are relatively evenly matched. Sketch scores especially well with a sophisticated and intuitive user interface that supports designers perfectly. Experience Design scores extra points in the area of prototyping because it is possible to link drawing surfaces and create app flows. Sketch does not offer such functionality without extensions, and I don’t think this will change in the immediate future. In addition, Adobe plans to extend Experience Design to allow integration of simultaneous work by several people within a design concept, which would be a huge step forward and would revolutionize the design of user interfaces. It's also only a matter of time before Adobe integrates sample data and measurements; we should not forget that we are only talking about a beta version here.
The last column shows a combination of Sketch, Craft and the InVision platform. Sketch is a very good tool for designing a surface, because Sketch's integrated smart guides work very well and the surface is reduced to essentials. In addition, Sketch and Adobe Experience Design have very good performance: everything runs well and the applications are stable. However, you need something like Craft to populate a design with good example data and integrate it seamlessly into an application. Sketch offers a Craft plugin with numerous options for working intelligently with sample data. This is a very important point, because experience shows that realistic content is the key to a good design. Without realistic data you will get into trouble, because you won’t meet the requirements and in the end the content will not fit into the design.
You also need something like the InVision platform to ensure that a design concept can be communicated and managed professionally within a company or team. InVision offers many features for organizing a design and its screens in a process that uses clear dashboards to support design-driven project management. InVision’s inspect function allows developers to read measurements directly, copy css files and download required assets. Live feedback via a special ‘collaboration room’ is also possible, allowing several users to look at a design together and sketch and comment on it. InVision introduces a design platform for organization and communication into a company, where design takes on a very different form and new possibilities arise. Unfortunately, InVision only supports Sketch and Photoshop files, which may exclude it from use in some companies. Whether InVision will support the Adobe Experience Design format in the future remains to be seen, but it would definitely be desirable.
Conclusion
In the meantime, Adobe Experience Design, even as a beta version, is no longer in its infancy, and already shows some decisive advantages over Sketch, such as the creation of interactive prototypes, or central colour management via a clear colour palette. Even with its current functionality you can create complex design concepts, and the application gets better with every update from Adobe. The video on the product website demonstrates where Adobe would like to take the application in future and how, for example, collaborative work with several people in a large design concept can work in the application.
In my opinion, Sketch is currently the major tool for visual design, because it is specifically designed for this purpose and has the greatest degree of maturity. A big disadvantage is that it is unable to create interactive prototypes or support collaboration with other team members. A combination of Sketch with Craft and InVision allows you to close this gap, but would you really want to use three separate programs for visual design? The more programs you use, the higher the probability of incompatibilities or errors at their interfaces. In daily use a tool that offers all the required functionality within one application is significantly more comfortable for a designer.
In my next project I would prefer to use the final version of Adobe Experience Design, because the tool is the most complete and most specialized for interface design. It supports a visual designer with intelligent guides, is drag and drop-compatible with other Adobe products and convinces with innovative features like the repeat grid, which allows you to duplicate entire blocks of elements with different contents. Its central administration of colours, character formats and symbols is precisely what I always searched for in tools like Photoshop or Illustrator. In addition, it makes it possible to define complex application flows and provide them to a customer without great effort via a simple feedback link. The customer can then look at the concept in their own time and leave comments at specific points in the design. It seems to be the most promising tool at the moment, with the most innovative features, such as simultaneous working and the Creative Cloud.
Outlook
Whatever way Adobe will go with Experience Design, the other tools will also move towards support for collaborative working, which is not yet fully implemented in any visual design tool. In future it will be possible for team members to design elements collectively online regardless of their location.
What I personally miss in the tools we’ve looked at here is the ability to define fixed and flowing form design areas, to make reusable symbols ‘more intelligent’. For example, if you could add several states (events), and animations for, say, inactive, active and deactivated, you could achieve even more flexibility and compactness in the definition of a visual design. Prototypes would be more realistic, and your customers could get a better picture of an application. For texts, it would also be nice to be able to define maximum run widths and truncation.
None of the tools I have tested so far allow you to assign identifiers to colours, typographical styles or symbols, or the definition of responsive layouts for special target devices. There is still a lot to do and the available tools have a lot of potential for improvement. It remains to be seen which features their developers will integrate into them, but even so such tools fundamentally change the work of a visual designer and offer completely new possibilities for teams working on complex design concepts.
Visual Design Start Kit
If you want to try Adobe Experience Design yourself, download the free Visual Design Starter Kit.
Comments