How often do you ask yourself: What do Visual Designers use to create concepts, prototypes and designs for their projects? A lot of the times one thinks about Photoshop, but this is not the non plus ultra tool that one needs.
Lets take a short look on tools that I usually work with for my projects and my working process in brief.
First of all, the basics – pencil, ink pen and dotted paper block.
These are the real essentials that one needs for the concept phase. Sketching ideas and creating first drafts. Writing down the actions, descriptions, functions, etc. I use dotted paper block ‘dotPad’ by Rhodia in different sizes.
Sometimes I use an app called ‘POP’ (Prototype-on-Paper) by Marvel for testing the first interactions of the paper concepts. This helps to filter the first ideas fast while just using a smartphone. You can use it also to create simple interfaces with drawn elements on the go.
Depending on what project development cycle the client uses, I have several software choices to continue with. There are a lot of different variants for prototyping and wireframing. The software that I use for the projects are: Adobe Illustrator (yes, you read it right), Sketch, Adobe XD, Adobe Photoshop, Balsamiq, Figma, Invision, Framer. The list of existing programs is huge, but these are what I usually use.
After a concept is created and the basic requirements are defined, I continue with wireframes in one of the programs. Usually a cross-platform, responsive and dynamic design system is needed – the final product has to work on different screens sizes, with different screen resolutions, on different operation systems, for different users and potentially on new not yet announced devices. This is what it is about. Creating a multifunctional design that fits the requirements.
Wireframing is about placing the elements on the artboard according to the use case and user behaviour, following the basic rules of design and user experience and not yet about the color, buttons or interactions. Create the basic idea of your project into a low-fidelity static screens. Then we move to the prototyping phase.
In the prototyping phase we can continue with the still screens, add dummy content to the screens, create the first interactive elements and actions and test these. There is always a period of time where the elements and screens need to be tested, refined and changed. This loop takes a while till the low-fidelity prototype is approved and can be upgraded with the right graphic elements and real data. Then the high-fidelity prototype gets in to the phase where the interfaces can be tested with real testers. With the help of different tools like questionnaires, eye/ click tracking software or device report a designer can check the usability and the interface design issues and update the designs. This iterates until the product is approved and it can be developed into a end product interface or software. All the design assets used in the high-fidelity prototype are exported in a required format for the next process stage.
Most of the time all these steps are accompanied by work of colleagues from different departments – Graphic Design, Research, Development and Marketing.
Design tools are developing and evolving all the time, so it could happen that one software will be obsolete, or a new tool appears on the horizon that can revolutionise the process.
So stay up-to-date and don’t be afraid to learn something new.
This article contains unpaid advertising and recommendations – all purely personal experiences.
