Construindo Seaside

A OceanBit começou originalmente usando Material Components, o sistema de design aberto do Google. Pouco depois, porém, sentimos que usar esses componentes e tentar adaptá-los à nossa visão se tornou um incômodo, então seguimos nosso próprio caminho e nasceu o Seaside.

Quando fui incumbido de criar nosso próprio sistema de design, era preciso pensar nos termos técnicos que iam definir o futuro dos nossos produtos. Por um lado, estamos produzindo para desenvolvedores, aqueles indivíduos que apreciam a densidade, a complexidade, os 100 atalhos diferentes, mas ao mesmo tempo, também estamos visando dispositivos móveis, onde os requisitos de precisão têm de ser baixos.

“O quão grande deveria ser um botão?”

No mundo real, não há consenso real entre os maiores sistemas de design. No final, avançamos com três valores diferentes: 32, 40 e 48 .

Esses tamanhos cobriam vários cenários diferentes onde uma medição unificada simplesmente não funcionaria.

• Componentes de 32pt são usados ​​com moderação, principalmente alinhados com o texto, para não prejudicar a densidade ou o alinhamento de outros componentes. Eles também podem ser usados ​​em ambientes de desktop onde a precisão não é um problema.

• Componentes de 40pt são o padrão. São botões, switches, caixas de seleção, botões de opção, avatares e muitos outros. Este é um ponto ideal que fornece umá área de toque acessível, ao mesmo tempo que permite layouts densos quando estritamente necessário.

• Componentes de 48pt são reservados para ocasiões específicas, como listas ou menus, onde muitas seleções são empilhadas, tendo a necessidade de áreas de toques maiores para a diminuição de erros.

Suporte para múltiplas plataformas

O Seaside precisava dar conta de diversas plataformas – iOS, Android e web – e com isso, precisava incorporar uma estética visual que fizesse sentido para cada usuário.

Embora isso possa ter parecido uma tarefa gigantesca há alguns anos, as plataformas já perceberam um fato simples: a consistência leva a uma experiência melhor e os usuários podem mudar de e para qualquer plataforma a qualquer momento.

Isso é melhor visto observando a evolução dos componentes de design ao longo dos anos e como eles se fundiram em um comportamento coeso, apenas com visuais diferentes.

Embora o Android se desviasse fortemente do design do switch do iOS, os sites continuaram a adotá-lo como solução padrão, levando à mudança no Android 12, que agora está muito mais próxima do design do iOS.

O Android lançou sua própria versão dos controles de segmento do iOS e os nomeou grupos de controles. Ao contrário do seu homólogo iOS, eles nunca são usados ​​como guias.

Seaside, no entanto, permite que os designers decidam se um grupo de controles deve ser usado como um grupo de abas sempre que parecer apropriado.

Layout & espaçamento

Como muitos outros sistemas de design, o Seaside também possui seu próprio conjunto de tokens de espaçamento.

These values covered the majority of use cases, and allowed us to control spacing through consistent naming schemes rather than raw values. This holistic approach made our components fit together and form cohesive and predictable layouts.

Cores

Quando se trata de cores, muito se tem falado sobre como escolhê-las, incluindo algumas pesquisas incríveis. Grande parte do desafio envolvido é se os tons são equilibrados ou não, uma tarefa inerentemente impossível se você deseja manter intacta a vibração individual de uma cor - verifique um espaço de cores HCL para ver como isso leva a cores muito turvas, por mais hegemônicas que sejam.

Com a OceanBit, queríamos evitar logo de cara um problema simples: a aplicação de cores neutras e básicas — as cores que compõem os elementos sem marca de nossos produtos. Isso ocorre porque, em alguns sistemas de design, as cores sólidas são escolhidas a dedo e aplicadas umas sobre as outras.

O problema, porém, é que eles dependem um do outro para garantir o contraste. Por outro lado, ao usar a translucidez, as cores podem se sobrepor e evoluir junto com o fundo e garantir contraste na maioria das situações convencionais. Tomamos nota disso e aplicamos a mesma metodologia ao seu sistema, separando-os em categorias.

Accessibilidade

Temos muito orgulho de nosso compromisso com a acessibilidade em nossos componentes. Com orientação direta de Evelyn Hathaway — nossa especialista em acessibilidade — garantimos que nossos componentes pudessem ser usados ​​por uma ampla gama de pessoas.

Tooltips

Ao trabalhar com ferramentas de desenvolvimento, os ícones precisam transmitir ações complexas, e estas nem sempre são aparentes para o usuário. Com Seaside, manter pressionado um ícone sempre mostrará seu nome dentro de uma tooltip.

TalkBack

No Android, o Seaside oferece suporte total ao TalkBack, um serviço que lê componentes e rótulos de texto em voz alta para usuários com deficiência visual.

Juntando tudo

Tudo isso culmina em uma UI acessível, facilmente legível, compreensível e visualmente atraente. GitShark usa Seaside para construir seus aplicativos e se adapta ao dispositivo do usuário para oferecer uma ótima experiência, independentemente do formato.

Se você quiser saber mais sobre a aplicação de UI do GitShark, clique no botão abaixo.