Contente
- Uma metodologia responsiva
- Como faço para manter o conteúdo primeiro?
- Por quê?
- 01. Defina seus objetivos de negócios e de usuário
- 02. Faça referência a eles sempre que puder
- 03. Não tenha medo de empurrar
- 04. Impulsione sua própria equipe também
- 05. Defina todas as suas necessidades de conteúdo com antecedência
- Como faço para abstrair o conteúdo da apresentação?
- Precisamos parar de pensar no conteúdo em termos de layout
- Force seus clientes a planejarem seu conteúdo independentemente do design
- Finalize seu conteúdo antes do design
- Use conteúdo real - sempre
- Então, como wireframes funcionam para projetos de design responsivo?
- Sketching
- Estrutura do navegador
- Anotações
- Use conteúdo real em wireframes
- Como faço o design para telas pequenas primeiro?
- Desenhos abstratos de dispositivos no início
- Use blocos de estilo
- Crie harmonia de interface
- Veja tudo no navegador
- Alcance o equilíbrio com programas estáticos
- Conclusão
Sejamos claros: o design é a solução apenas se focar nas questões mais profundas em questão, o porquê de tudo. Um processo sólido deve sempre guiar nosso trabalho, mas precisamos abraçar algo mais flexível. Nosso meio finalmente provou ser fluido, então não deveria o nosso processo? Pense no design do sistema: você precisa ver a imagem completa e os pequenos detalhes. Impossível? Longe disso!
Frank Chimero coloca isso lindamente em seu livro The Shape of Design: “Há uma parte em que o artista se afasta do cavalete para obter uma nova perspectiva sobre o trabalho. A pintura é em partes iguais perto e longe: quando perto, o artista trabalha duro para deixar sua marca; quando longe, ele avalia a obra para analisar suas qualidades. Ele dá um passo para trás para deixar o trabalho falar com ele. ”
Precisamos deixar nosso trabalho, nosso meio, falar conosco. Com o surgimento do design responsivo, estamos finalmente adotando nosso meio como deveria ser: fluido. É um momento brilhante para dar um passo atrás e avaliar o trabalho, analisar e abraçar uma nova maneira de fazer as coisas, um novo processo. Já se foi o tempo dos mock-ups estáticos e web designers que não entendiam de código. É hora de um processo responsivo.
Uma metodologia responsiva
Vamos revelar o grande segredo para um processo sólido logo no início deste artigo. Porque somos loucos assim. Preparar? Um processo responsivo é um processo responsável. Vago? Pode ser. Boba? Não. Como o movimento de padrões da web antes dele, o design responsivo está empurrando a web com métodos amigáveis para o futuro.
Como qualquer processo de design, ele deve se concentrar no "porquê" por trás de tudo. Então, por que existem sites? Para entregar conteúdo. Isso pode ser baseado em tarefas, social, informativo ... não importa. Tudo se resume a isso: comece com o porquê, conteúdo bem estruturado e interações que importam.
Aqui estão as perguntas que ouvimos com mais frequência sobre nosso processo de design responsivo.
Como faço para manter o conteúdo primeiro?
Estamos todos muito otimistas no início de um projeto. “Conteúdo primeiro!” nós dizemos. “Objetivos do usuário! Lembre-se do que é importante! ” É verdade. Mas o que isso significa? Como você implementa um processo que prioriza o conteúdo?
Mesmo se você souber (ou achar que sabe), é fácil esquecer conforme o projeto avança. Projetos de longo prazo tendem a se arrastar continuamente (e continuar ... e continuar ...). Paramos de pensar no porquê e começamos a nos concentrar no como. Nós nos enganamos pensando que nossos projetos podem ser divididos em fases separadas de 'descoberta' e 'desenvolvimento' que podem existir independentemente.
A verdade é que temos que ficar perguntando por quê, o tempo todo. Não importa o quanto você pensa que sabe, não importa quanto planejamento você tenha feito - toda vez que você toma uma decisão, toda vez que cria um botão ou escreve um título, você tem que perguntar ...
Por quê?
Por que estou fazendo isto? para quem é isso? Que objetivo de negócios isso ajudará meu cliente a alcançar? De que necessidade ele ajudará meus usuários a lidar com isso? Não mantenha o conteúdo em primeiro lugar. Mantenha o porquê primeiro.
Isso faz com que pareça fácil. Mas para fazer isso bem, você vai ter que empurrar. Empurre seus clientes e sua equipe para definir seus porquês primeiro. Não Lorem Ipsum, não ‘vamos chegar a isso mais tarde’. Faça sua lição de casa! Todos os seus comos precisam começar com um porquê sólido. Na Yellow Pencil, isso significou grandes mudanças na forma como lançamos, estimamos, orçamos e planejamos projetos. Tivemos que exigir orçamento e tempo para fazer pesquisa, estratégia e planejamento sólidos. Você também pode. Mas assim que seus clientes e suas equipes virem os enormes benefícios de definir as necessidades de conteúdo com antecedência, eles nunca mais olharão para trás.
E é nosso trabalho educá-los. (Leia o excelente livro de Mike Monteiro, Design is a Job, se quiser saber mais sobre como lidar com os clientes.) Os clientes podem ter dificuldade em entender o valor de fazer toda essa pesquisa e trabalho antecipado. E por que eles deveriam? Eles não conseguem nada 'finalizado' no final - e muitas vezes eles apenas recebem uma fatura e um grande e velho documento do Word.
Isso não é culpa deles - é nossa culpa. É nossa responsabilidade fazer um trabalho melhor para demonstrar esse valor. A cada passo do caminho, precisamos trazer tudo de volta ao importante porquê.
Isso é especialmente importante para um design responsivo. Um site responsivo não requer muito mais esforço de desenvolvimento, mas significa muito mais planejamento. Porém, na verdade, é um planejamento que deveríamos ter feito o tempo todo. Testemunhe o atual ciclo do projeto de redesenho a cada três anos. Você quer continuar fazendo isso? Claro que não.
Portanto, aqui estão três etapas para manter o conteúdo primeiro no processo do projeto.
01. Defina seus objetivos de negócios e de usuário
Estabeleça uma lista priorizada de metas de negócios e usuários para o seu projeto. O que seus usuários mais desejam saber ou fazer? Faça sua pesquisa. Faça inferências informadas, não suposições selvagens. Faça com que todas as partes interessadas concordem.
02. Faça referência a eles sempre que puder
Cada vez que você toma uma decisão, sempre que alguém propõe um novo recurso ou elemento de design, ou página de conteúdo, faça com que eles mapeiem a solicitação para uma meta de negócio e de usuário. Que necessidade real esse recurso atenderá? Qual é o verdadeiro motivo? (Dica: ‘Porque eu quero’ ou ‘Eu realmente gosto de azul’ ou ‘todo mundo está no Facebook’ não contam.)
03. Não tenha medo de empurrar
Isso pode ser difícil. O relacionamento com os clientes pode ser delicado e pode ser tentador desistir da batalha para vencer a guerra. Mas lembre-se, estamos todos juntos nisso! Não é negócio x usuário; nós contra eles.
Atender às necessidades do usuário é a melhor maneira de atender às necessidades de negócios. Porque sem nossos usuários, não temos um negócio! Os clientes (bons clientes) não estão contratando você para dizer "sim" a tudo. Portanto, se seu cliente solicitar algo que não atenda a seus objetivos ou às necessidades de seus usuários, não tenha medo de desafiá-lo. Não se trata de ego. Trata-se de criar a melhor solução possível.
04. Impulsione sua própria equipe também
Isso também pode ser um desafio ao trabalhar em uma equipe criativa. A separação de funções - design visual, experiência do usuário, arquitetura da informação, estratégia de conteúdo, produção de conteúdo - pode levar a falhas de comunicação. Ficamos ocupados, sobrecarregados de e-mails. É difícil ficar com um projeto do início ao fim, especialmente depois que "seu" trabalho está concluído.
O relacionamento de sua equipe é pelo menos tão importante quanto o relacionamento de seu cliente. Precisamos nos lembrar do porquê, assim como fazemos com nossos clientes. A colaboração é a chave. Você não pode simplesmente "entregar" um plano de conteúdo, wireframes ou designs. Tanto quanto possível, temos que trabalhar de mãos dadas. É fácil ‘terminar’ uma entrega e passar para outra coisa. É muito mais difícil continuar com um projeto quando as coisas ficam difíceis.
Uma abordagem em cascata para o trabalho criativo simplesmente não funciona. O trabalho ágil e colaborativo entre os membros da equipe traz melhores resultados.
05. Defina todas as suas necessidades de conteúdo com antecedência
O problema é o seguinte: sites responsivos demoram mais para serem planejados. Não estamos mais planejando apenas um único contexto. Estamos planejando para todos os contextos que conhecemos agora, e alguns que ainda não existem.
Mas leva muito menos tempo para planejar todas essas complexidades com antecedência do que voltar e adaptar recursos e funções que você não considerou. Portanto, gaste o tempo / esforço / orçamento. Force seus clientes e sua equipe a definir (e se comprometer com!) Todo o conteúdo antes de você entrar no design. Use tabelas de página. Use conteúdo estruturado. Prepare seu conteúdo para o futuro agora! Ou chore mais tarde.
Como faço para abstrair o conteúdo da apresentação?
Você ouve muito isso na internet-o-sphere. Mas espere, o quê? E espere - por quê?
Porque a apresentação pode (e irá) mudar. A maneira como criamos sites há 15 anos é quase irreconhecível pela forma como os apresentamos agora. Mas você sabe o que não mudou? Palavras. Ainda os usamos. A Internet existe principalmente para conteúdo (baseado em texto). Ainda o usamos para resolver problemas de informação; para realizar tarefas. Mas se o seu conteúdo depende de um meio de apresentação (páginas de introdução em Flash, alguém?), Há uma probabilidade real de que ele não seja utilizável em alguns anos. E isso é péssimo.
Precisamos parar de pensar no conteúdo em termos de layout
Nós (como indústria) treinamos nossos clientes para pensar no conteúdo em termos de layout. “Coloque na barra lateral”, dizemos. "Isso deve ir no rodapé." Pare! Pare com isso. Pare. Não se trata de localização. É uma questão de prioridade. Qual é o conteúdo mais importante para seus usuários? Porque adivinhe: o layout muda entre os contextos. (Provavelmente) não haverá uma barra lateral no design da sua tela pequena.
O supermenu gigante que seu cliente deseja? Não vou voar em um iPhone.
Force seus clientes a planejarem seu conteúdo independentemente do design
Ok, você não precisa forçá-los. Encoraje-os. Incentive fortemente. As tabelas de páginas são ótimas para isso. Se você ainda não leu, vá imediatamente para Estratégia de Conteúdo para a Web de Kristina Halvorson e Melissa Rach para obter mais informações sobre como criá-los. Organize-os em ordem de prioridade. Não mencione localização ou layout. Isso ajudará seus clientes a pensar sobre seu conteúdo de uma forma mais produtiva e também movimentará o processo de criação de conteúdo, antes de finalizar wireframes ou design.
Finalize seu conteúdo antes do design
Ok, isso nem sempre é possível. Mas quanto mais incerteza você puder eliminar antes de começar a projetar, menos terá que voltar e mudar as coisas mais tarde.
Use conteúdo real - sempre
Se possível, use o conteúdo de casos extremos - mostre a seus clientes as páginas, imagens e menus mais complicados. Isso evitará surpresas posteriormente no processo, quando virem seu conteúdo mais confuso no produto final.
Os wireframes funcionais no navegador fazem uma grande diferença. Permita que seus clientes observem seu conteúdo se movendo e mudando em uma variedade de tamanhos de tela. Aponte enquanto você apresenta seus wireframes (você está fazendo apresentações presenciais, certo?) Demonstre a eles como a prioridade de suas informações permanece a mesma em todos os tamanhos de tela, enquanto o layout muda.
Então, como wireframes funcionam para projetos de design responsivo?
Acreditamos firmemente que o design de interação para RWD deve entrar no navegador com rapidez e frequência. É praticamente impossível criar um documento estático que descreva tudo. Claro, poderíamos criar um documento que demonstrasse três, quatro ou cinco pontos de ruptura, mas isso é apenas uma fração da história. E quanto a todos os momentos entre os pontos de interrupção? Isso acontece no navegador.
Sketching
Ainda assim, é bom ser capaz de esboçar rapidamente suas ideias de forma colaborativa. Isso não precisa acontecer em nenhum meio específico, mas há apenas algo sobre lápis no papel. O objetivo aqui é obter ideias de forma rápida e iterativa. Adoramos esboçar sempre que possível, e há até um aplicativo para isso: UI Sketcher.
Estrutura do navegador
Aqui está o verdadeiro ingresso para nós. Adoramos reutilizar padrões e sistemas ao demonstrar RWD no navegador. Claro, poderíamos criar nosso próprio sistema do zero a cada vez, mas isso não está ajudando a nós ou aos nossos clientes.
Também gostamos de usar estruturas de prototipagem com resposta rápida, como Twitter's Bootstrap ou Zurb's Foundation. Nós, pessoalmente, apoiamos a Fundação porque ela se encaixa em nosso fluxo de trabalho. Seria ótimo se qualquer um deles adotasse uma abordagem de tela pequena e largura de banda baixa primeiro, mas é assim que funciona.
Anotações
Anotações para wireframes RWD são essenciais, mas, descobrimos, muitas vezes são esquecidas. Diga em voz alta: documentação, documentação, documentação! Vimos alguns exemplos disso de amigos e achamos que o júri ainda está decidindo sobre a "melhor" maneira de anotar adequadamente wireframes responsivos no navegador. Conforme mencionado acima, usamos regularmente Foundation by Zurb e gostamos de usar seu complemento Reveal para exibir nossas anotações. Essas anotações só aparecem em telas maiores e, de preferência, podem ser ligadas e desligadas.
Use conteúdo real em wireframes
Tem havido muito debate em torno de Lorem Ipsum em wireframes e modelos de design, mas se você não tem conteúdo real em seus wireframes, você está fazendo errado. O conteúdo informa as decisões de interação e informa quando um design será interrompido. Como Lorem Ipsum pode fazer isso?
Como faço o design para telas pequenas primeiro?
Por anos nós projetamos com uma resolução específica em mente. Era uma configuração padrão. Seja esboçando em notebooks, criando wireframes no OmniGraffle, trabalhando no Photoshop ou projetando no navegador, sabíamos qual seria o tamanho da tela. Esses dias acabaram. Acreditamos muito no design primeiro para o pequeno ecrã e na melhoria progressiva. Então, como um designer muda seu fluxo de trabalho de um tamanho de tela fixo para um fluido?
Desenhos abstratos de dispositivos no início
A menos que estejamos projetando para um dispositivo específico, é essencial que paremos de pensar em dispositivos e comecemos a pensar em experiências. Todas as técnicas a seguir ajudam os designers a criar suas experiências enquanto são capazes de permanecer agnósticos em relação ao dispositivo (até certo ponto).
Use blocos de estilo
Use blocos de estilo para estabelecer a direção e iterar rapidamente. Os blocos de estilo permitem que um designer estabeleça a direção de um sistema de design sem se tornar muito específico. Sua criadora, Samantha Warren, os descreve desta forma:
“Os blocos de estilo são para quando um moodboard é muito vago e um comp é muito literal. Os blocos de estilo estabelecem uma conexão direta com os elementos reais da interface sem definir o layout. ”
Crie harmonia de interface
Imagine uma tela com todos os elementos visuais e interativos reunidos. Não para ver um layout de IU específico, mas para ver como todos os elementos funcionam juntos. Esta é uma tela de harmonia de interface. Uma tela de harmonia de interface permite que um designer mantenha as ideias juntas, mas não se concentre em um único tamanho de tela. Além disso, é uma ótima maneira de comunicar e documentar com eficiência os elementos projetados, em vez de produzir um guia de estilo completo.
Se você estiver interessado em ler mais, dois artigos excelentes sobre o assunto de harmonia de interface podem ser encontrados aqui e aqui.
Veja tudo no navegador
Tudo precisa ser reunido no navegador. É aqui que o design da IU realmente ganha vida. Ver como o conteúdo real interage com os elementos visuais é crucial. Não há como fazer isso corretamente em um ambiente estático. Você precisa ver como ele responderá no meio nativo.
Alcance o equilíbrio com programas estáticos
Existe um fluxo entre o navegador e programas estáticos como o Photoshop. Deve haver um equilíbrio que permita que o sistema de design seja criado de forma fluida e natural. Claro, isso vai acontecer no Photoshop, mas um designer que está projetando de forma responsiva precisa aprender a pensar criativamente no navegador também.
Conclusão
Mais uma vez, com sentimento: comece com o porquê, com conteúdo bem estruturado e interações que importam. Concentre-se primeiro na tela pequena e na largura de banda baixa e aprimore progressivamente seus conceitos de resposta. Nosso médium está amadurecendo. Temos a chance de fazer as coisas certas e mudar o mundo, um projeto da web por vez.
Descubra as 20 melhores ferramentas de wireframing para designers
Steve Fisher coordena pesquisa, análise, design e estratégia na Yellow Pencil, no Canadá, e fala sobre tópicos como RWD, UX e código aberto. Alaine Mackenzie é estrategista de conteúdo da Yellow Pencil.
