Atividades relacionadas ao design de interfaces para mídias digitais:

Participar da elaboração dos produtos do projeto não diretamente relacionado ao layout, como diagramas de fluxo, storyboards, wireframes, resultados de pesquisas de/com usuários, personas e cenários, para verificar elementos e requisitos necessários ao produto, para uso em desktop ou dispositivos móveis. Acompanhamento das entrevistas, pesquisas, histórias de uso fornecem informações valiosas para a avaliação, bem como os mapas conceituais, as pesquisas sobre os padrões culturais de grupos de usuários e seus códigos visuais (cores, sinais, ícones, tipologias), as histórias dos usuários.

Também faz parte da atividade de design o conhecimento dos usuários prioritários, para os quais o canal será desenvolvido. Quanto mais amplo é o público, mais preparada a interface precisa ficar para grande variedade de situações de acesso, o que não significa que precise para isso ter mais recursos e funcionalidades. Pelo contrário, o foco no cliente ajuda a reduzir os recursos aos mínimos necessários ao atendimento das necessidades mais importantes.

Além do conhecimento do usuário, é importante também entrar o mais profundamente possível no contexto de produção (processual, informacional, técnico, comercial, editorial) do produto e, de maneira mais específica, no objetivo a alcançar e nos pontos críticos a enfrentar.

O conhecimento do assunto e do contexto de uso também facilita o processo de criação, a escolha de referenciais técnicos, a defesa de soluções na hora de tomar decisões.

O cliente confia mais no fornecedor que entende (ou procura entender) os objetivos do produto e tende a se converter em parceiro da equipe de design – em vez de cruzar os braços e esperar que o produto apareça pronto para aprovação na sua frente –, e coopera mais na criação e no aperfeiçoamento do produto.

Avaliar o conceito editorial, bem como os casos de sucesso na mesma área, para a criação de uma maneira de traduzi-lo visualmente.

Conversar com o editor ou responsável pelo conteúdo sobre o tamanho dos títulos e textos, a necessidade de teasers e subtítulos, o tamanho das chamadas na página Principal e páginas internas, de olhos dentro dos textos, a necessidade de estilos especiais para citações e fontes bibliográficas, de agrupamentos de links.

Avaliação do conceito editorial

A malha e os pontos são elementos que estruturam o design deste site sobre Lucio Costa. A estreita ligação entre estes elementos e a atividade do arquiteto relaciona o layout ao conteúdo publicado (acesso em 22.6.2013)

Escolher/criar uma malha (grid) adequada ao produto final. No caso de um site genérico, pode-se optar por ainda usar uma base de 960 px, com 12 e 16 colunas, como por exemplo as que podem ser encontradas no site 960 Grid System. Ainda são as seguras para uso em desktop. Em caso de sites responsivos, pode-se optar por uma malha de 1200 ou 1280 dpi, como a do site http://1200px.com/. Pode-se também optar pelos modelos responsivos baseados nas malhas do Bootstrap 3, que usam malha para desktop com base em 1170 px. Em caso de aplicativos móveis, são comuns as malhas baseadas em 4 ou 8 colunas. Diversos sites oferecem arquivos em formato psd para autoria básica no Photoshop.

Pode-se optar por estabelecer também um limite horizontal para publicar as informações mais importantes. No entanto, a área “acima da dobra”, ou localizada em uma área limite de tela com um tamanho definido como padrão para os usuários mais comuns, já não é tão importante, pois a maioria das pessoas está mais acostumada a fazer a rolagem da tela do que no início da web.

Organizar imagens gerais das interfaces como esboço e verificar sua aderência às necessidades do projeto. Imagens gerais, ou genéricas, podem ser esboços conceituais, que incluam apenas os elementos básicos, como fontes, cores, aplicação de logotipo, uso de imagens para formatação de botões. Padrões ou estilos visuais, ou “style tiles”, ou “style prototypes” podem ser feitos como imagens estáticas ou em HTML, já prevendo uma larguras padrões para a tela em monitor com resoluções especificadas.

Os estilos visuais, ou de layout, reveem modelos simples para desktop e para dispositivos móveis, embora nesse momento seja mais importante avaliar a inventividade e a originalidade da solução geral, bem como sua afinidade com o público principal.

Criar o layout e alternativas em programa adequado ao projeto, para a escolha do cliente e/ou da equipe responsável pela seleção. Muitas vezes as soluções são esboçadas de maneira informal, com os elementos essenciais, e vão aos poucos ganhando sendo detalhadas, com a inserção de elementos menos críticos e acabamento até que fiquem satisfatórias tanto para seus autores quanto para clientes e o público. A produção de diversas soluções, por diversos profissionais, atenua a ligação de cada um com apenas um resultado, e enriquece o resultado com soluções de consenso.

Embora seja comum a apresentação ao cliente de layouts em formato de imagem, o desenvolvimento do layout em HTML com uso de CSS mostra a ideia com maior precisão especialmente os efeitos visuais que mudam com a ação do usuário, bem como o modo de uso dos botões e recursos dinâmicos e detalhes de acabamento. Muitos clientes aprovam um layout apresentado como imagem e, ao ver o resultado em HTML, pedem para fazer tantas mudanças que é preciso quase refazer a solução.

Mesmo que os elementos, a composição e a descrição sejam satisfatórias em papel ou na imagem estática, a demonstração do uso permite uma percepção completa da solução, tanto sob o ponto de vista visual como funcional.

No momento da criação do layout, o designer precisa considerar aspectos do mercado (tendências, identidade específica), aspectos relacionados à composição do conjunto de elementos (funcionais, de conteúdo) no contexto do veículo. E também aspectos específicos da interface digital, como a interação com/entre pessoas e dispositivo, micro etapas entre estágios das ações, possíveis contextos de uso.

Testar a solução com conteúdo em diferentes formatos, seja conteúdo editorial (textos, imagens, vídeo, músicas) ou funcional, como formulários, botões. Testar imagens em diferentes formatos, aplicar barras de navegação adicionais em áreas internas, prever a diagramação de gráficos e tabelas.

Apresentar presencialmente as soluções aos clientes, patrocinadores e stakeholders, de modo a que a soma de opiniões enriqueça a solução.

Apresentação das soluções aos clientes, patrocinadores e stakeholders

Estas duas telas explicam o redesenho do site da WebMD para o público. Descrevem como funciona, como usar e como se pode achar o conteúdo de cada área. A apresentação permite que o usuário passe o mouse sobre cada área e visualize as explicações e o layout de cada uma.

webMD_desenvolvimento-21c

A apresentação pode funcionar também para mostrar aos stakeholders de um projeto de website as justificativas para o conteúdo e o layout da interface. O ponto de vista do usuário lembra a todas as pessoas relacionadas ao projeto quem, afinal, vai acessar o canal.

 

Apresentação das soluções aos clientes, patrocinadores e stakeholders

A imagem acima explica o redesenho de um site para os leitores. Descrevem como os donos de negócios de alimentação podem comprar online seus acessórios. A linha vermelha destaca os elementos sobre a imagem, azulada e cinza. Embora as explicações não estejam próximas ao destaque, o título está claro e valorizado pelo ícone, o que facilita a localização. Além disso, os textos são objetivos e sintéticos, adequados para buscas rápidas de informações.

O cliente pode pedir que, para a escolha do layout seja feito um teste com usuários representativos do público-alvo do site. Nos testes, a apresentação de duas ou mais soluções permite que os usuários se sintam mais confortáveis para rejeitar totalmente as que não agradam embora evidencie que os designers podem não estar seguros em relação à melhor opção.

Aperfeiçoar o produto de maneira incremental, à medida em que tiver retorno sobre os resultados parciais, e, se possível realizar alguns testes rápidos das novas soluções.

Detalhar as soluções por escrito, incluindo todos os elementos da interface, como diferentes tipos de títulos, subtítulos, textos, imagens (fotos, gráficos, tabelas, ícones) elementos de navegação (barras, botões, menus, links), diferentes tipos de formulários, gráficos e tabelas, vinheta de apresentação de vídeos e arquivos sonoros, moldura para apresentação de vídeos, páginas especiais e elementos específicos a cada orientação comercial e editorial.

Registrar por escrito as decisões e especificações gerais editoriais e de layout (conceito geral, tipologias, palheta de cores, imagens, composição, resolução de tela prioritária considerada, aparência dos botões, setas, bullets elementos secundários de sinalização), que serão detalhadas ao longo da produção.

Este documento é útil para a orientação da equipe de programação sobre o layout das páginas elementos e funcionalidades especiais.

Testar as soluções de layout para verificação da sua efetividade, o que pode levar à revisão do produto, bem como ao seu aperfeiçoamento, de acordo com a demanda do público. Desta maneira, designer podem ter certeza de que as soluções criadas não estão atreladas a opiniões e percepções pessoais sobre o produto.

Outras atividades do projeto de layout

Quando nas primeiras reuniões o cliente pedir um redesenho completo dos canais, verificar se podem ser feitas pequenas mudanças incrementais, que sejam testadas e aperferfeiçoem aos poucos o veículo, seus processos de atualização, de avaliação, de SEO, à medida que são coletadas informações e examinados novos padrões tecnológicos e comportamentos do público.

Incluir um designer na equipe de projeto desde as primeiras etapas, inclusive nas equipes de planejamento estratégico, desenvolvimento, marketing, que sugira soluções relacionadas ao produto final.

Descrever o processo de criação > avaliação > ajustes > aprovação e desenvolvimento antes de começá-lo, bem como os produtos relativos ao layout que serão apresentados. Desta maneira, o cliente (ou dono do produto, se for o caso) pode acompanhar cada etapa e pedir antecipadamente o acréscimo ou supressão de uma atividade ou produto (entregável).

Checar a qualidade do layout de acordo com requisitos pré-estabelecidos ou lista de referência já existente. A lista pode ficar online e ser conferida pelo arquiteto da informação, gerente do projeto, analista de sistemas e desenvolvedores, para ver se não falta nada a criar e a apresentar ao cliente.

Embora a lista de checagem possa se basear em elementos genéricos de layouts de mídias digitais, é sempre necessário enfatizar a importância de adaptá-la a cada projeto.

Na avaliação do layout, é sempre importante manter em perspectiva que a perfeição total, de pixels, é praticamente impossível de alcançar. Se há uma diferença de 2 pixels na localização de um botão no Chrome em relação ao Firefox, podemos nos perguntar quanto isto vai realmente afetar a experiência do usuário e priorizar a plataforma que tem maior número de usuários.

(Atualizado em 27.6.2017)

 

Referências

Themes: a small change to product roadmaps with large effects, Jared M. Spool (User Interface Engeneering, acesso em 17.9.2015)

Livro: Designing interfaces, Jenifer Tidwell. Sebastopol, CA: O’Reilly, 2011

Dissecting design – Part 1, Ben Callahan (User Interface Engeneering, acesso em 1.7.2014)

Designs and deliverables are haikus, not epic poems, Chris Furnum (User Interface Engeneering, acesso em 2.2.2014)

Extraordinarily radical redesign strategies (User Interface Engeneering, acesso em 11.4.2013)

Design process in the responsive age (Smashing Machine, acesso em 14.6.2012)

The battlefield of design: Designers vs. clients (acesso em 18.6.2009)

Usability Body of Knowledge (UsabilityBok, acesso em 20.3.2009)

Principles for usable design (Alertbox, acesso em 20.3.2008)

Bridging the designer-user gap (Alertbox, acesso em 20.3.2008)

Cues, the golden retriever (Boxes and Arrows, acesso em 6.6.2008)

Ferramentas e recursos auxiliares para o layout de interfaces

Canva, ferramenta online para a criação de layouts, esboços, flowcharts e mindmaps (acesso em 27.10.2017)

  Foundation – malha (grid) com colunas dimensionável para qualquer tamanho que permite a criação de
layouts com elementos pré-elaborados customizáveis.

MStyleguide and boilerplate patterns, coleção de links de guias de estilo front end e bibliotecas de padrões, com exemplos novos e já usados, incluindo agrupamentos de elementos com objetivos semelhantes.  (de Cloud Four Blog, acesso em 27.4.2015)

Macaw, ferramenta para a criação de layouts visualização direta do layout e configuração de CSS (acesso em 20.9.2014)

Sketch – ferramenta para o design de interfaces (Mac), fugindo do uso do Photoshop (acesso em 20.7.2014)

Spiffy HTML5 site templates – modelos responsivos em HTML5+CSS3 (HTML5up, acesso em 6.7.2014)

Get Templates – modelos responsivos em HTML5+CSS3 (GetTemplate, acesso em 6.7.2014)

Modelos de elementos de user interfaces para web designers (acesso em 21.7.2010)

Notable, permite o retorno sobre o design de telas, conteúdo e código de páginas ou plataformas web direto do browser (acesso em 24.5.2010)

AttentionWizard, programa para avaliar layouts de websites com a simulação dos movimentos do olho e a verificação dos pontos de atenção (SiteTuners.com, acesso em 4.12.2009)

Sketchbook Pro, permite o desenho livre de esboços, com suporte de ferramentas de texto e efeitos de texturas

 

Sites para a publicação de portfolios

Instagram

Pinterest

 Deviant Art

 Behance

 Behance