1. What does your project path look like when a new topic/task/order
from the client appears?

We start the work from reading the brief delivered by the client or sales manager, who usually collects the first, basic information on the project. Having initially familiarized ourselves with the topic we try to determine the client’s needs in more detail, asking more specific questions and/or we collect on our own the information that is important from our point of view as graphic artists and designers. We also check on the competition and generally the market in which the client operates to better understand the client’s needs and the type of visual communication their users are accustomed to. We try to approach it critically and not always blindly follow the industry solutions if we believe them not to be the best. The next step is to organize, if possible, a workshop with the client, i.e. a meeting or a teleconference during which we discuss the collected information and confront it with the client’s expectations.

After these stages we pass to the UX part, i.e. we start to build a framework for the project and think about its possible operation. We break it into sections, pages, we establish its flow and the order of information, i.e. the so called user flow. The purpose is collision-free, understandable and faster access for the user to the objective assumed by the client. This is a stage in which we start to draw a model of the page/app, called wireframe. We present our project model to the client and after obtaining their approval or next iterations, we move to the next stage with the final construction. If the client wishes so and the project budget allows for it, we also deliver a clickable prototype. An advantage of such a prototype is that it enables the actual testing of the used solutions, testing of the efficacy and speed of accessing desired information, and checking if the suggested content layouts and compositions work as intended. After the above stage, there is a time for consulting with developers and
establishing whether the ideas are technologically feasible to be implemented, if there are any limitations or counterindications, e.g. time-related, budget-related,technical. In other words, we verify our early vision in comparison with the technology.

If the model that we have prepared is accepted by the client and everything is agreed upon with the DEV department, we move to the most interesting stage of our work – the visual part, artwork, layout and design. If the client has their own, implemented and ready CI (corporate identity, brand manual), we have to make sure that we collected all the company materials, familiarized ourselves with the brand styles and translated them into the language of the service/app we are working on and the created system components and design. The situation is different if we are responsible for creating the app image and client image because they do not exist yet. In such a case, the topic is expanded into an additional project area, namely branding. We have to suggest and develop the style and image of the brand, which is indeed a separate and huge challenge.

In addition to layout modeling/styling, also a simple, initial Design System is created, or something similar, ensuring consistency and higher control over the styles and components in the entire project. After developing the system design and styling the prototype previously prepared by us, we get to the point where we can, after a longer or shorter planning stage supported by consultations with the client, provide a finished design. We create a brand guideline, project documentation and upon the client’s approval we pass it on to the production, i.e. the DEV department.

2. What tools do you use on a daily basis?

The main and basic tool in our daily work is Figma. It is probably the best currently existing program for interface design, online graphics, mobile and desktop apps. It is a tool dedicated to designers and developed by designers, which makes it a current leader of such type of software. The app comprises the best tools and solutions known from the commercial graphical packages of the competition. The
users can create and edit both raster and vector graphics in a joint working field. It is also constantly evolving and new functions are added, which makes the project process more efficient. Multiple plugins developed by people from Figma community are also important. We may say that if you are looking for a shortcut in Figma, probably someone has already made a plugin for it 😉

Apart from the abovementioned Figma, we also work in the Adobe package where the most commonly used tool is Illustrator, which is sometimes irreplaceable as a very advanced tool to work with vector graphics. It helps us create extended and complicated vector illustrations, as well as bigger and smaller icon systems for services and apps. For working with photography or various types of bitmap graphics, we use Photoshop, which is also fundamental when it comes to retouching photos, photomanipulation or color correction. Other apps we use as part of the Adobe package include After Effect to work with motion design and video, Premiere for video editing or less frequently Lightroom for advanced color correction and “developing” .raw photos.

3. How do you hand the projects over to developers and clients?

When handing the graphic design of an app or website over to a developer it is important for them to see what exactly the designer had in mind. Irrespective of the program in which the project was made, the developer must see exactly 1:1 how the final product is supposed to look like. At ValueLogic, we work with graphic design in Figma, so we will focus on it. Having designed the product, everything that is related to it and necessary for its functioning, i.e.: components in various operation modes, color styles, typographic styles, forms, error messages, we organize the whole thing, group, delete unnecessary elements and we send the prepared file/project to the DEV department, handing over a link to the Figma.

Figma makes it very easy to enter the Dev Mode, which is enabled with one click and the developer may read a thorough information on the size of objects, sections, columns, margins, fonts, colors, sizes of photos, i.e. everything that defines the product style. It is vital to mention preparing views of the designed website for various devices. Website and app responsiveness is a standard nowadays, namely the fact that they operate on many electronic devices, such as laptop, tablet, phone or, more and more often, smart TV. That’s why we make sure that the developer does not have to think how to show a given project in various screen formats: we can prepare the design in all its variants.

When it comes to the clients, we most often rely on static views when cooperating with the Project Manager on the part of the client. However, if the solution – the project – is to be presented to the management board, or consulted with the client, we prepare a clickable prototype of its entirety, or only a certain solution. It also serves two important functions. The first one is the ability to go through the entire project and see it in its target version. We can track the UX and UI layer “live”. We see a practically final product. Another important function are animated elements on the pages, which are common nowadays. Moving in and out, animated masks, fluent color change, animated illustrations and icons, parallax and many more. Moreover, the prototype may also be useful sometimes when providing the project to the developers, since it helps to show nuances regarding the abovementioned animations or interactive elements.