Forem: Sidney Souza

Knowing the name of things helps think better about the project's experience and interface. 🇺🇸

Sidney Souza — Sun, 27 Apr 2025 18:24:30 +0000

For a while now, I’ve been thinking about how to write about design and frontend in a way that’s useful to both sides. Without a wall in between, because here, there should be no wall.

I reflected on various experiences I’ve had in a handoff context—the exchange between design and development. I saw value in many of them, so I’ll start with one that I think is useful to open minds and this virtual space we’re in.

Some time ago, in a review meeting for interface and project alignment, a comment from the client stuck in my mind:

“It’s amazing how you designers know the name of every icon, every little thing...”

By the way, besides being the company’s founder, he was also one of the product developers. I took it well at the time, laughing, but it stayed with me.

This type of comment says a lot about mastering the language of what we build.

Knowing that that icon is a chevron-down and not "the little arrow pointing down" might seem like a small detail. But when we're designing in Figma, coding in VS Code, or integrating with a UI library, it makes a huge difference: it saves time, avoids communication noise, and brings teams closer together.

It could be an arrow-right, a plus-circle, an x, or even a hamburger. Having those names clear in mind, along with the functions and variations of each component, gives me flow when presenting an interface, defending a design choice, or aligning with developers on what's going to production.

And this doesn't stop at icons. Whether it's a modal, a drawer, a card, a badge, a tooltip, a chip, or an accordion, each carries meaning that organizes the conversation and the product development process all the way to the final touchpoint with the user.

Knowing the name of things completely changes the game.

Understanding this "vocabulary" takes us out of the place of "I think it's that little square with rounded corners" and puts us in a spot where the team speaks the same language, where the product flows without noise. That's it.

And understanding the name of these pieces is just the first step. Behind every component, there is a logic, an intention of use, a reason why.

And that’s where another layer comes in: design as building meaning.

When we arrive on the internet, it's not just wild.

It seems obvious, but sometimes we forget: everything we see in an interface has been thought through.

Buttons, icons, spacing, visual hierarchies. None of that is there by chance.

One of the best managers I had the honor of working with taught me, early in my career, that interface design is about understanding the why behind things.

It's the invisible logic that makes us look at a button and know it’s clickable. It’s the visual weight that separates what’s important from what’s secondary. It’s the flow that guides the experience without the user needing to stop and think.

This has a name: affordance.

There’s a concept in design that explains exactly this phenomenon, and it's indispensable for creating great interfaces.

Affordance is when design suggests how something should be used just by the way it appears. An arrow points forward. A button with a shadow looks ready to be pressed. A link in underlined text calls to be clicked. And so on.

When we ignore these cues, the interface becomes noise. When we respect them, the experience becomes fluid. And that's where the importance of studying UI and UX comes in—to have a theoretical foundation when building something.

UI isn't just about making things look pretty. UI is about designing functionality, hierarchy, clarity.

UX isn't just about making journey maps. UX is about creating the experience that facilitates, that shortens the path, that respects how people feel while interacting.

And the deeper I dive into this, the more I realize: knowing the names of icons, components, patterns... is still just the surface. It invites us to open a door to understand the thinking that came before.

Yes, before.

Want to dive into this tide?

Since I started in interface design, I’ve always been driven by the curiosity to understand the why behind things, motivated by people who inspired me.

I spent hours and hours studying libraries, design systems, icon families, accessibility best practices, even though I had no idea I’d one day be working so closely with code. And in a time when it was hard to find well-organized materials!

Today, I see that this drive to understand patterns was what built my bridges: between Design and Development, between Product and People.

So that's it: the internet is already waiting for us with fundamentals ready to be understood.

If you want to learn the names of components, icons, and web design fundamentals, there are amazing places to study and build that vocabulary.

Here are some I believe are great foundations and good reinforcements that can help you:

📦 Good for understanding components

Material Design — Google’s design system, defining modern UI standards.
Chakra UI — A library of accessible and practical components. One of the first I studied.
Carbon Design System — A comprehensive system by IBM, great for gaining perspective in more technical projects.
Tailwind UI — A component library built on Tailwind CSS, very popular nowadays!
Radix UI — Accessible, unstyled components, great for exploring pure, flexible functionalities.

🎨 Good for exploring icons

Phosphor Icons — Countless icons, with various styles, free to use.
Lucide Icons — Open-source library of lightweight, modern icons.

📚 Good for fundamentals and best practices

MDN Web Docs — The best source for learning HTML, CSS, JavaScript, and web fundamentals. No doubt about it!
Web.dev — Google’s project on performance, accessibility, and UX/UI best practices.

Finally...

My goal with this space is exactly this: to build bridges, never walls.

It’s up to us to learn, respect, and build from the fundamentals.

Exploring new ways is also part of the journey, but that’s a topic for other articles. Stay tuned!

Saber o nome das coisas ajuda a pensar melhor na experiência do projeto e interface.

Sidney Souza — Sun, 27 Apr 2025 15:36:50 +0000

Faz um tempo que venho pensando em como escrever sobre design e frontend de forma a ser útil a ambos os lados. Sem um muro no meio, porque aqui não deve existir muro.

Foi que pensei em diversas experiências que pude ter em um contexto de handoff, a troca entre design e desenvolvimento. Acabei por ver valor em tantas, vou começar por uma que acredito ser útil para abrir os pensamentos e este espaço virtual que nos encontramos.

Há algum tempo, numa reunião de revisão de interface e alinhamento de projeto, um comentário do cliente ficou na minha mente:

“Acho incrível como vocês designers sabem o nome de cada ícone, de cada coisa…”

Aliás, além de fundador da empresa, ele também era um dos devs do produto. Na hora eu levei numa boa, rindo, mas fiquei com aquilo na cabeça.

Esse tipo de comentário diz muito sobre dominar a linguagem do que a gente constrói.

Saber que aquele ícone é um chevron-down e não “a setinha pra baixo” pode parecer um detalhe do dia a dia. Mas quando estamos ali projetando no Figma, codando em um VS Code ou integrando com uma UI library, isso faz uma diferença absurda: economiza tempo, evita ruídos na comunicação e aproxima os times.

Podia ser um arrow-right, um plus-circle, um x, ou até um hamburger. Ter esses nomes claros na cabeça, junto com as funções e variações de cada componente, me dá fluidez na hora de apresentar uma interface, defender uma escolha de design ou alinhar com devs o que vai para produção.

E isso não para nos ícones. Seja um modal, um drawer, um card, um badge, um tooltip, um chipou um accordion, cada um carrega um significado que organiza a conversa e o processo de desenvolvimento do produto até o contato final com quem vai usar.

Saber o nome das coisas muda completamente o jogo.

Entender esse "vocabulário" tira a gente daquele lugar do “acho que é aquele quadradinho com cantinho arredondado” e coloca num ponto onde o time fala a mesma língua, onde o produto flui sem ruídos. É isso.

E entender o nome dessas peças é só o primeiro passo. Atrás de cada componente existe uma lógica, uma intenção de uso, um porquê.

E aí entra outra camada: o design como construção de significado.

Quando a gente chega na internet, ela não é mato.

Parece óbvio, mas às vezes a gente esquece: tudo que a gente vê numa interface já foi pensado.

Os botões, ícones, espaçamentos, hierarquias visuais. Nada disso está ali por acaso.

Um dos melhores gestores com quem tive a honra de trabalhar me ensinou, no começo da minha carreira, que design de interface é sobre entender o porquê das coisas.

É a lógica invisível que faz a gente bater o olho num botão e saber que ele é clicável. É o peso visual que separa o que é importante do que é secundário. É o fluxo que conduz a experiência sem a pessoa precisar parar para pensar.

Isso tem nome: affordance.

Existe um conceito em design que explica exatamente esse fenômeno, e ele é indispensável para criar boas interfaces.

Affordance é quando o design sugere como algo deve ser usado só pelo jeito que se apresenta. Uma seta aponta pra frente. Um botão com sombra parece pronto para ser pressionado. um link em um texto sublinhado chama pra clicar. E por aí vai.

Quando a gente ignora essas pistas, a interface vira ruído. Quando respeita, a experiência se torna fluida. E aí entra a importância de estudar UI e UX para se ter uma base teórica na hora de construir algo.

UI não é só deixar bonito. UI é projetar funcionalidade, hierarquia, clareza.

UX não é só fazer mapa de jornada. UX é construir a experiência que facilita, que encurta o caminho, que respeita o que as pessoas sentem enquanto interagem.

E quanto mais eu mergulho nisso, mais eu percebo: saber o nome dos ícones, dos componentes, dos padrões... ainda é só a superfície. Que nos convida a abrir uma porta para entender o raciocínio que veio antes.

Sim, antes.

Quer mergulhar nessa maré?

Desde que comecei na área de design de interfaces, sempre fui movido pela curiosidade de entender o porquê das coisas, motivado por pessoas que me inspiraram.

Passei horas e horas estudando bibliotecas, sistemas de design, famílias de ícones, boas práticas de acessibilidade, mesmo sem imaginar que um dia estaria trabalhando tão próximo do código. E em um tempo onde era difícil encontrar esses materiais bem catalogados!

Hoje vejo que essa vontade de entender padrões foi o que construiu minhas pontes: entre Design e Desenvolvimento, entre Produto e Pessoas.

Então é isso: a internet já nos espera com fundamentos prontos para serem compreendidos.

Se você quer aprender os nomes dos componentes, dos ícones e os fundamentos de design para web, já existem lugares incríveis para estudar e construir esse vocabulário, viu?

Separei alguns que acredito serem boas bases e bons reforços e que podem te ajudar:

📦 Bom para compreender os componentes

Material Design — Sistema de design do Google, define padrões de UI modernos.
Chakra UI — Biblioteca de componentes acessíveis e práticos. Uma das primeiras que estudei.
Carbon Design System — Sistema bem completo da IBM, ótimo para ter uma visão em projetos mais técnicos.
Tailwind UI — Biblioteca de componentes construída sobre Tailwind CSS, muito usada atualmente!
Radix UI — Componentes acessíveis e sem estilos, bom para explorar funcionalidades puras e flexíveis.

🎨 Bom para explorar ícones

Phosphor Icons — Incontáveis ícones, com vários estilos e gratuito.
Lucide Icons — Biblioteca open source de ícones leves e modernos.

📚 Bom para fundamentos e boas práticas

MDN Web Docs — A melhor fonte para aprender HTML, CSS, JavaScript e fundamentos web. Sem dúvidas!
Web.dev — Projeto do Google sobre performance, acessibilidade e boas práticas de UX/UI.

Por fim...

Minha vontade com este espaço é justamente essa: construir pontes, nunca muros.

Cabe a nós aprender, respeitar e construir a partir dos fundamentos.

Explorar novas formas também é parte do caminho, mas isso é papo para outros textos. Aguardem!