UX/UI Design Hub
Design aquilo
Design aquilo
navios como projetados
Projetamos interfaces para plataformas web, móveis e automóveis. O trabalho baseia-se em pesquisa de utilizador, é construído segundo normas de acessibilidade e especificado com detalhe suficiente para que a equipa de engenharia o possa construir sem necessidade de interpretação.
Plataformas
O que projetamos
De portais à escala do cidadão a interfaces homem-máquina (HMI) automóveis
O nosso trabalho de UX/UI abrange plataformas do setor público utilizadas por milhões de cidadãos, aplicações móveis para trabalhadores de campo, ferramentas empresariais de back-office e interfaces humano-máquina em veículos. Em cada caso, as restrições de design são específicas do contexto. Como resultado, projetamos para a plataforma desde o início, em vez de adaptar uma abordagem genérica.
01
Plataformas Web
De sites de marketing a portais empresariais complexos com acesso baseado em funções, suporte multilíngue e fluxos trans.
02
Aplicações Móveis
Interfaces nativas e cross-platform para Android e iOS. Projetamos tendo em conta as limitações do telemóvel: espaço de ecrã limitado, interações por toque, conectividade variável. Um bom design móvel não é um design de desktop comprimido. É uma experiência criada para a forma como as pessoas utilizam um dispositivo, muitas vezes distraídas, muitas vezes em movimento.
03
Software Empresarial
Ferramentas de back-office, painéis operacionais, sistemas de gestão de dados e interfaces de fluxo de trabalho. Estes são ambientes onde os utilizadores passam oito horas por dia. A prioridade é a eficiência e a clareza: reduzir a carga cognitiva, minimizar as taxas de erro e tornar os dados complexos legíveis sem necessidade de formação.
04
Interface Homem-Máquina Automóvel
Projeto de interfaces humano-máquina para sistemas automóveis, uma disciplina especializada com as suas próprias restrições de segurança e padrões de interação. Trabalhámos com normas de tempo de consulta, redução de distração, a integração de controlos táteis e físicos, e o desafio de projetar para utilizadores que não conseguem olhar para o ecrã por mais do que um momento.
Sistemas de Design
Para clientes que constroem em escala, criamos bibliotecas de componentes e sistemas de design que fornecem às equipas de desenvolvimento um conjunto consistente e reutilizável de blocos de construção. Um sistema de design bem construído reduz a lacuna entre design e desenvolvimento, mantém o produto visualmente consistente à medida que cresce e significa que novos ecrãs podem ser construídos sem a necessidade de um designer rever todas as decisões. Construímos estes em Figma com documentação completa dos componentes e trabalhamos com engenharia para garantir que o sistema mapeia claramente para o seu framework escolhido.
Processo
Como projetamos
Porque testar cedo é importante
Um problema de usabilidade detetado na fase de wireframe demora uma hora a ser corrigido por um designer. O mesmo problema detetado após o desenvolvimento leva semanas a ser resolvido e arrisca desestabilizar componentes que já estavam a funcionar. Na prática, isto significa que realizamos sessões de usabilidade em todas as fases — não apenas no final, quando a correção de problemas é dispendiosa.
01
Pesquisa de Utilizador
Falamos com as pessoas que vão usar o produto. Para software empresarial, isso significa sessões com equipas de operações, agentes de apoio ao cliente ou trabalhadores de campo que viverão na.
02
Arquitetura da Informação
Antes de nos preocuparmos com a aparência, mapeamos como o conteúdo e a funcionalidade devem ser organizados. Acertar na estrutura é o que separa um produto que as pessoas conseguem navegar de um que requer formação. Testes de árvore e "card sorting" com utilizadores reais validam a IA antes de nos comprometermos com ela.
03
Wireframes e Prototipagem
Protótipos interativos que podem ser testados antes do início do desenvolvimento. Sessões de usabilidade na fase de wireframe detetam problemas estruturais e de fluxo enquanto ainda são baratos de corrigir. O protótipo é suficientemente próximo do produto real, de modo que os utilizadores se confundem de formas úteis e reveladoras.
04
Design e Especificação de Alta Fidelidade
Design visual, especificações de componentes, notas de interação para comportamentos não standard e um guia de estilo. A acessibilidade é concebida nesta fase: contraste de cores WCAG 2.1 AA, navegação por teclado, compatibilidade com leitores de ecrã, tamanhos de alvo de toque. Não é uma lista de verificação que executamos no final.
05
Implementação QA
Revisamos a interface desenvolvida antes do lançamento para verificar se a implementação corresponde à intenção do design. Isto é padrão em todos os projetos. Os designs não são lançados como foram concebidos sem este passo, pois a lacuna entre um ficheiro Figma e uma interface renderizada é onde residem a maioria das inconsistências visuais.
Porque é que importa
Designers que trabalham com os engenheiros que constroem
Designers que apenas desenham, sem trabalhar em conjunto com engenheiros na produção, desenvolvem hábitos que tornam a implementação mais difícil. Os estados de interação ficam por contabilizar. As animações especificadas são caras de construir. Os componentes são criados sem pensar em como escalam com diferentes comprimentos de dados e tamanhos de ecrã.
Os nossos designers sabem o que está a ser construído, por quem e em que estrutura. O resultado é uma entrega sem atritos e interfaces que são realmente lançadas da forma como foram concebidas.
Para clientes que trabalham com a sua própria equipa de desenvolvimento, fornecemos entregáveis em Figma com o nível de especificação que elimina a necessidade de adivinhar.
Design consciente do framework
Projetamos com o modelo de componentes do Angular, React ou Vue. Os componentes são realistas de implementar, não esboços aspiracionais que precisam de reengenharia antes de poderem ser lançados.
WCAG 2.1 AA como norma
A acessibilidade está integrada em todas as especificações: contraste de cores, navegação por teclado, compatibilidade com leitores de ecrã, alvos de toque. Não é uma lista de verificação pós-lançamento.
Melhoria incremental disponível
Avaliamos a interface existente, identificamos os problemas de maior impacto e redesenhamos fluxos específicos sem necessitar de uma reconstrução total. Melhorias mensuráveis com menor risco e custo.
QA pós-construção incluída
Revisamos a interface construída antes do lançamento. É assim que os designs são lançados conforme projetados, e é padrão em todos os projetos.
Perguntas Frequentes
Perguntas frequentes
Que clientes costumam perguntar antes de iniciar um projeto de design.
Qual é a diferença entre design UX e design UI?
O design UX (User Experience) foca-se em como um produto funciona: a estrutura da informação, o fluxo das tarefas e se os utilizadores conseguem atingir os seus objetivos de forma eficiente. O.
Como aborda a acessibilidade?
Concebemos com base no padrão WCAG 2.1 AA. Para projetos do setor público em Portugal e na UE, concebemos de acordo com os requisitos de acessibilidade mais rigorosos impostos pela legislação europeia. A acessibilidade é integrada desde o início: rácios de contraste de cores, percursos de navegação por teclado, etiquetas para leitores de ecrã e tamanhos de alvos de toque fazem parte de todas as especificações.
Realiza pesquisa de utilizador antes de projetar?
Sim, sempre. Para uma plataforma empresarial de grande dimensão, isso pode significar entrevistas estruturadas com 15 a 20 utilizadores, card sorting, tree testing e várias rondas de testes de usabilidade. Para uma remodelação focada, podem ser cinco sessões de usabilidade moderadas com utilizadores existentes. A abordagem adapta-se ao projeto, mas a investigação do utilizador nunca é dispensada. As decisões de design tomadas sem o contributo do utilizador são suposições.
Processo de trabalho e entregáveis
É possível melhorar um produto existente sem o reconstruir do zero?
Sim, e este é um dos nossos projetos mais comuns. Analisamos a interface existente, identificamos os problemas de maior impacto e redesenhamos componentes ou fluxos específicos. Isto resulta em melhorias mensuráveis, sem o risco e o custo de uma reconstrução completa.
Como é que trabalha com a nossa equipa de desenvolvimento?
Entregamos ficheiros Figma com especificações completas de componentes, notas de interação para comportamentos não standard, um guia de estilos e um inventário de componentes. Se a sua equipa utiliza React, Angular ou Vue, desenhamos de acordo com o modelo de componentes desse framework. Uma revisão de QA da interface construída antes do lançamento está incluída em todos os projetos.
Quanto custa um envolvimento de design e quanto tempo demora?
Uma auditoria UX e redesign de uma área de produto específica demora tipicamente 4 a 8 semanas. Um envolvimento completo de design de produto, desde a pesquisa de utilizador até a um sistema de design completo, demora 3 a 6 meses dependendo da complexidade do produto. Definimos o âmbito de cada projeto individualmente após uma chamada inicial.
Tem um produto para desenhar?
Informe-nos o que está a construir e quem o irá utilizar. Responderemos dentro de um dia útil.
Vamos conversar