💡 Keep this in mind
What you need to know right off the bat – traditional design and digital design have a lot in common.
Both rely on design theory and use tools like colour, composition, contrast, typography, and rhythm.
The creation process, in both, is guided by the psychology of vision. It used to be less functional, more aesthetic; now, it's all about practicality and tools.
📜 A touch of history
About a hundred years ago, a graphic revolution began, led by designers of the time. The biggest changes happened in visual communication and the criteria for defining new aesthetics.
This led to new standards that shaped the design process for the next several decades.
Modernists—from Germany, Switzerland, Poland, Hungary – created a brand-new aesthetic canon in printed art: modernism. It offered a fresh look at visual communication, turning design into a tool, rather than pure art.
A tool meant to create a product with a specific function (like communication) and convey concrete information. Art for art's sake? Totally passé. From then on, functionality was key.
And we lived by these principles, which were set out at the start of the last century, for around 80 years. Then came the Internet. And everything turned upside down.
Not only did it change how graphic projects were created, but it also transformed everyday life.
Traditional designers worked with terms like pre-press, Pantone, and RAL. They knew printing techniques, bookbinding tricks, and channel-based thinking – all geared mainly towards print.
The Internet brought its own set of rules: HTML, CSS, responsiveness, and more. So today’s digital designer is a true renaissance person. What do they need to know?
🖥️ Digital Designer knows the right software
The most important design tool? One word: Figma.
Hugely popular in Poland and beyond. It enables smooth collaboration on projects, easy feedback sharing, and, most importantly—you can create highly detailed graphic interfaces in a simple way.
In Figma, you can prototype interactive versions of your designs and get an idea of how users will probably navigate through your app or website. It also allows for quick code export, making communication with the development team a breeze.
It’s agile, lightweight, and opens in seconds. Plus, it’s browser-based, and your projects are stored in the cloud, freeing up disk space.
You can create a whole range of things with Figma, including graphics for social media.
🧑💻 Digital Designer understands basic coding principles
While you don’t need to be a programming whiz, you do need to know the fundamental principles behind the code.
Understanding how code works and how the developers who will bring your designs to life think is key to clear communication.
The entire Internet is built on a certain model of thinking. What might seem creative and boundary-free is actually a meticulously coded structure.
Here are the key coding concepts you need to know:
- Viewport – The browser window’s viewing area. Its height and width change as you resize the browser.
- Box model – The layout model. Every bit of web content is boxed in, and that box is inside another box. This awareness helps structure design properly.
- Relative sizing and positioning – em, rem, percentages. Plus, terms that help decide where elements land in a layout: percentages, columns, grids.
- CSS classes – Think reusable styles. CSS relies on classes. One class is a style you can apply to multiple elements, like font style or margin size.
- Flexbox – A way to structure layouts. You need to know how Auto Layout in Figma is reflected by Flexbox in HTML and the rules that govern it—what it can and can’t do.
- Responsiveness and scaling – How should element sizes adjust when the screen size changes?
- Systematic typography scaling – Express font sizes using em and rem, not pixels. This allows typography to scale smoothly.
🧠 Digital Designer understands basic UX principles
Every UI designer should know a bit of UX, and every UX designer should know a bit of UI.
Why? Because design is incomplete without these principles:
- You need to know why the website exists. You can’t design a site without understanding its purpose.
- You need to understand conversion and how to achieve it. Conversion could be anything from completing a transaction in an e-commerce store to signing up for a newsletter.
- Put yourself in the user's shoes. How will they behave on the site?
- You should know how to run a simple user test. The easiest way is to create a Figma prototype and ask someone to use it while thinking aloud about what they see and think.
- Understand basic UX/UI patterns. This saves you from reinventing the wheel, e.g., when designing specific interactions. Presenting a product in a fresh, original way? Great! But a new concept for the shopping cart? Maybe not.
- Know about User Personas. It’s a way to define who the product is for.
- Understand User Journeys. Be aware of how users will interact with the product and what their experience will be at each stage.
- Know the importance of information architecture. How is the information hierarchy structured, and how is it categorised?
🕹️ Digital Designer thinks in terms of interactions and animations
A design is a dynamic sequence of screens. It’s easy to understand with something like a “buy now” button.
A beginner might see this button as just one static image. Usually, they’re thinking of the button in its active state.
You need to remember that a button looks different when you hover over it with the cursor, and differently again when it’s inactive. There are 5 states you’ll need to design for:
- Default - the “neutral” state of the button,
- Hover - when the cursor hovers over it,
- Active - when the button is in use, ready for interaction,
- Focused - when highlighted, e.g., via the Tab key,
- Visited - after it’s been clicked.
Each of these states is determined by specific user interactions.
📏 Digital Designer thinks systemically and creates rules
Applying consistent rules when planning a layout helps users understand what's happening on the site or app. It’s like a manual for the product.
Creating limits fosters creativity. It gives the product structure, making it not only visually pleasing but also highly functional.
Why? Digital products follow specific rules. The first one to remember: every website is made up of modules.
We’ll introduce more rules in future blog posts! 😃
