Usando cores em wireframes ... isso é um "não, não"?
Recentemente, iniciou-se um debate interno sobre o uso de cores em wireframes. Um designer júnior terminou um belo conjunto de wireframes e foi instruído no final a transformar tudo em escala de cinza! Eles foram informados de que a cor não deveria estar nos quadros de arame.
Posso ver alguns motivos pelos quais o design em escala de cinza pode ajudar:
- para acessibilidade (para que você não seja obrigado a confiar nas cores para diferenciação)
- não se engane em comunicar design visual em wireframes (às vezes os clientes podem associar uma opção de cor a uma decisão de design visual em vez de uma maneira de comunicar a diferença visual)
Na verdade, uso uma paleta de ícones coloridos e usarei cores para ajudar a comunicar a diferença visual. Às vezes, há muito que você pode fazer usando diferentes tons de cinza ou padrões.
Qual é a prática padrão lá fora? Eu já vi wireframes com e sem cor.
Parece que seus colegas ficaram um pouco perdidos em suposições sem pensar sobre qual é o objetivo de uma estrutura de arame. Vamos começar com ma definição flexível fornecida pela Wikipedia :
Um wireframe do site (também "web wire frame", "web wireframe", "web wireframing") é um guia visual básico usado no design de interface para sugerir a estrutura de um site e os relacionamentos entre suas páginas. Um wireframe de página da web é uma ilustração semelhante do layout de elementos fundamentais na interface. Normalmente, os wireframes são concluídos antes que qualquer arte final seja desenvolvida.
Como em qualquer palavra ou termo, é importante considerar o que realmente significa. Um modelo de estrutura de arame é um termo usado na modelagem 3D ao falar sobre a representação da estrutura física de um modelo poligonal, que é renderizada mostrando pontos de conexão entre os vértices. Qual é o sentido de um modelo de estrutura de arame? É para mostrar as "entranhas" de uma estrutura, a fim de entender melhor sua composição.
Quando transferido para o wireframing do site, conforme a Wikipedia o discute, devemos considerar como esse significado se aplica, e a definição da Wikipedia o define: "um guia visual básico usado para sugerir a estrutura de um site e os relacionamentos entre suas páginas".
Como você pode ver, não há menção de cores ou de como esse guia visual deve aparecer. Tudo o que importa é que ele sugere como a estrutura do site funciona. Desde que isso seja alcançado, é uma estrutura de arame eficaz. Então, por exemplo, estes são todos os wireframes "válidos":
- esboços em um guardanapo
- esboços no rascunho da 37signals ou em algum outro aplicativo no iPad
- wireframes parecidos com esboços feitos usando uma ferramenta como Balsamiq Mockups
- wireframes de aparência mais rígida, feitos com algo como Axure ou Illustrator
- designs leves de um site feito no Photoshop, em que a estrutura da página é aparente e inclui elementos de design, quando relevantes
- Projetos exportáveis em HTML no Fireworks que permitem ver em quais elementos uma página consiste
- wireframes totalmente interativos em HTML/CSS
É apenas uma questão de fidelidade e detalhes. Talvez você deva esclarecer que tipo de fidelidade é esperada na entrega e orientar seus designers nesse caminho. Mas não se trata de "a cor deve ser usada em uma estrutura de arame" - se a cor ajuda a comunicar a estrutura do site, então absolutamente a cor deve ser usada em uma estrutura de arame!
Acordado.
Normalmente, a cor traz conotações emocionais/culturais para uma discussão que "deveria" ser sobre estrutura básica, layout e IA (arquitetura da informação). Embora isso possa ser debatido, podemos concordar que o uso de cores, no mínimo, transmitirá MAIS informações à renderização.
O objetivo principal do wireframe é comunicar APENAS o que é necessário e nada mais.
Na minha experiência na prática, as pessoas usam o termo "wireframe" para significar todos e cada um dos artefatos que Rahul lista.
Pela minha experiência, é principalmente a segunda razão pela qual você listou:
- Às vezes, até as partes interessadas internas ficam confusas com os wireframes que parecem muito "reais". Minhas maquetes do Axure são de fidelidade muito maior do que outras maquetes do PowerPoint usadas na minha organização, então às vezes recebo comentários relacionados ao design gráfico, como botões com aparência diferente ou painéis que não ajustam a altura de acordo com o conteúdo, etc.
- Um amigo meu criou um wireframe de alta fidelidade que o cliente realmente adorou tanto que o implementou imediatamente :)
Passei da escala de cinza para a cores e voltei novamente. Acho que as cores tendem a ser uma verdadeira distração para as discussões que precisam acontecer.
Em uma nota lateral, por acaso, eu estou em um projeto em que não há designer gráfico entre mim e os desenvolvedores; portanto, wireframes "realistas" ou "muito bonitos" correm o risco de serem implementados como estão. Isso praticamente garante um desastre, porque eu não sou designer gráfico ...
Uma desvantagem da cor em uma estrutura de arame é que, juntamente com (o que se considera ser) maior fidelidade dos controles e mais cedo ou mais tarde, um de seus desenvolvedores assumirá que eles precisam fazer a GUI parecer assim como a estrutura de arame.
Eu sei. Eu sei. Isso aponta para um grande equívoco sobre o objetivo de uma estrutura de arame.
Mas isso realmente acontece.
Costumo reservar o uso de cores para fazer anotações em componentes. Certifico-me de que os pedaços de texto que devem se comportar como hiperlinks estejam em azul e sublinhados, por exemplo, mesmo que o design final do site possa ter uma história de cores completamente diferente. Pedaços de texto que não são estáticos e variam de acordo com a entrada do usuário obtêm outra cor. Se houver várias caixas e linhas que estejam em dúvida ou eu sei que precisam de mais polimento, então definirei para que tenham linhas vermelhas. Blocos de texto que são anotações deixados na parte superior da estrutura de arame obtêm um preenchimento de fundo amarelo claro.
É tudo muito assustador de se ver, visualmente, mas serve para se comunicar. Não para representar.
Pessoalmente, acho que é bom usar cores se isso oferecer algum tipo de funcionalidade.
Costumo usar cores em elementos interativos dos meus wireframes, como links e botões sendo azuis. Isso ajuda a destacar claramente os elementos interativos ao apresentar ao cliente.
Também usei verde, laranja e vermelho para indicar diferentes estados de aviso em uma lista de itens. Descobri que isso ajudou a comunicar a funcionalidade ao cliente mais rapidamente, o que era menos aparente nas versões anteriores, em escala de cinza.
No entanto, eu não usaria a cor como elemento decorativo, pelo menos não em wireframes ou maquetes. Como alguns outros responderam, os clientes às vezes podem se envolver com a aparência de algo, versus como ele funciona. Isso pode atrasar um pouco o processo.