Mattia Valerio - Designing in Pixels: How to Make Beautiful Interfaces That Break User Experience

But uh first of all, I want to thank all you guys that are here today to listen my speech and I want to thank all the people that make this event happen for the second year in a row. I'm Mati Valerio Tossano and I will talk about design for developers and why make uh UI uh can make the design beautiful, buildable and maintainable. Before I start, I want to say a few thing about me. I'm Matalo Tossano. I have a bachelor degree in I have a bachelor degree in digital cultures and communication.

I have a master degree also in digital sociology and web web analysis both at Federico Secondo of Napoli. Also I got a certification from the academy as a developer and now I'm working as a junior UIUIX designer for mult global service in Amsterdam. But the first question that appears to us is what beautifuls really means. As as we know beautiful has has different meaning for different person and this happen also in the web tree. That's because for the for example for the client perspective beautiful can means I don't know uh a button can um that can represent the brand identity all the all the design have to um to be in um focus and be unique over the functionality maybe uh instead for the the user beautiful could mean something that easy familiar to see that every time that you go on the website.

You don't have to scroll too much. You don't have to do too many things. But you have already all the button, all the things that look familiar and easy to navigate. But the most important person for for make the website good is the developer. The developer need to um to have the component structable maintainable.

But the most important things is that the Okay. But the most important thing is that the component can be reusable because if uh a good design is a design that we don't have to rebuild again other time but a design that stay in the time. Sorry for this problem today with this speech. This example for example show show perfect uh what I what I'm saying for example the client could say I love this color for the user could be is easy to see easy to use but the most important person for make an app for make a website is the dev and as I say the reable component is the most important things but when design become a problem. There are some symptom for a bad developer hostel UI.

One of these is uh the custom UI. So an over narrative button that can confuse the user and introduce accessibility issue or or also an overengineer inputs that um for example the complex animation may uh slow down the performances. Another example of a big problem could be the poor componentization. So lack of clean modular structure that uh leads to incon inconsistent code and harder maintenance. As this slide show perfect, it is not only important the aesthetic but also the form they go both together because as you can see the button should be a button that's not distract the the user but a button that is similar to use easy to use.

The solution to this problem is use material UI plus Figma. This is a practical uh function for design development alignment because on Figma you can put auto layout and flexbox synergy. For example, the dev have all the auto layout responsive code and the layout is scalable and developer friendly. Also you can share the sign token for example as text color you share everything with the dev. In this case he has he has he don't have to redesign everything and don't have to redesign the code but as I say before the components are really important in mui why because uh if uh we for example we can name the component for example we use primary button or variant and this for the dev is really good because it don't have to rebuild anything everything is already built in the design here here in this slide show it perfectly because as you can see different button show different code direct in CSS the border is different the background everything so the the the the developer doesn't need any type any kind of uh knowledge about code because Figma give to him to it everything ready sometimes people think that um sustainable design is boring But it isn't because good design are the one that survives product cycles.

For example, uh if they are framework agnostic, they don't require major overalls, the simplicity always win. So we have to avoid unnecessary complexity future proof for speed up everything and the most important thing is the clear documentation. So we have to share with um with the dev a clear documentation for example on notion where the code is all shared together. So the design and the dev can always talk and the code will um will be the same as for the design and for the developer. There are three golden rules that we have to to keep in mind and these are the respective respect the native elements.

So you we don't have to reinvent button because material UI already give to us an full library with a full button cards and everything already preseted without layout. So we don't have to reinvent nothing. We have to avoid the redundancy because duplicating functionalities maybe can create some um confusion in the user experience and use Figma as a source of truth because uh we have to treat design like a liveing documentation not just a as a static mockup. As I say before at the start, the best UI is the one that you don't redesign because good design works not months later, not just at the start because they are timeless aesthetic. So we have to choose an aesthetic that uh can be reent behind the trends and behind years.

We have to think about an user centric feature. So prioritize the functionality that genuinely solves problem rather than create another one. And also a footer proof of code. So a robust architecture that can prevent technical depth or uh for example slow down performances. Um naming is also an an important thing as I said before also because as you can see you um you can call uh on Figma all the uh components for example atoms button primaries molecability and clarity for both design and developers and with unified document space on notion on story book we can share with the de with the dev the design tokens component usage and interaction interaction p patterns.

Before before I leave, I want to give you some uh takeaway for a good development harmony. Design development harmony and this are collaboration is fundamental because we as I say before we have to use always Figma plus material UI because in this way uh we have um a shared language between developer and designer. We have to choose simplicity for ensure longevity. The documentation is not negotiable because we have to treat as a living resource in in this case we can reduce the development effort and we have to choose sustain sustainability over the speed at the end the ultimate goal because the goal in the end is um symbiosis not separation. Uh I want to I want to give you this these few things.

So we have to be collaborated. We have to collaborate from designer developers and speak the same language. In this way we work together for all the time. We we have to find a futroof solution. So a system that adapts the new technologies and user need without constant redesigning and uh at the end we have to think about an userentricing efficiency.

So interfaces that uh delight user while um while building stay uh maintainable. So guys uh this is my speech. I want to thank you all. If you have some question I'm here and uh again thank you to all the stuff for Napolet for this event this year.