Baixe o app para aproveitar ainda mais
Prévia do material em texto
Resumo Design de Interface "Interfaces" são SUPERFÍCIES DE CONTATO entre duas entidades. Como conceito mais específico em plataformas digitais, refere-se à criação de imagens, sons e palavras que podem ser manipulados em telas. A interface atua como uma espécie de tradutor, mediando entre as duas partes, tornando uma sensível para a outra. O objetivo das interfaces digitais seria dar sentido à informação em sua forma bruta. Doug Engelbart foi o inventor do mouse e pioneiro na interação entre humanos e computadores. Indo além da representação de um documento, ícone ou janela, ele criou a manipulação direta; Hoje as interfaces gráficas digitais podem ser: FlatDesign (um estilo minimalista) ou Skeumormfismo (elementos gráficos que utilizam recursos visuais do mundo real). O objetivo do designer de Interfaces é projetar interfaces que proporcionem a melhor experiência do usuário (UX) ao consumidor. Ex.: ● Sites - Institucionais / Hotsites / Blogs / Plataformas de interação social ● Portais - Negócios / Notícias / Conhecimento ● Apps - Desktop / On-line - SAAS (Software as a service) / Mobile ● Vendas - E-commerce / M-commerce / S-Commerce / F-Commerce / T-Commerce, V-Commerce Os pilares da internet são: design, front-end, back-end e gerenciamento. O front-end: Organização (HTML | XML); Interagindo (JAVASCRIPT); Maquiando (CSS); Aparecendo (SEO | SEM ); “Conteúdo é rei”. Na dúvida, a preferência é a da convenção. Design de Interação Os princípios básicos de design ajudam a controlar a diagramação de páginas, eles são: ● Proximidade: itens relacionados entre si devem ser agrupados. Quando vários itens estão próximos, tornam-se uma unidade visual. ● Alinhamento: cada elemento deve ter uma ligação visual com outro elemento da página. isso cria uma aparência limpa, sofisticada e suave. ● Repetição: o princípio da repetição afirma que algum aspecto do design deve repetir-se no material inteiro. Pode ser considerada como "consistência". ● Contraste: Cria-se quando dois elementos são diferentes. Se eles diferirem um pouco mas não muito, não acontecerá o contraste e sim um conflito. As 10 Heurísticas de Nielsen 1. Feedback - o sistema deve informar continuamente ao usuário sobre o que ele está fazendo. 2. Falar a linguagem do usuário - as palavras tem que ser entendidas e organizadas conforme o modelo mental do usuário. 3. Saídas claramente demarcadas - O usuário deve poder controlar o sistema (abortar, desfazer e retornar uma operação). 4. Consistência - Um mesmo comando ou ação deve ter sempre o mesmo efeito e estar no mesmo lugar. 5. Prevenir erros - Evitar situações de erro. 6. Minimizar a sobrecarga de memória do usuário - o sistema deve mostrar os seus elementos sem a necessidade de lembrar um comando específico. 7. Atalhos - Para usuários experientes executarem as operações mais rapidamente. 8. Diálogos simples e naturais - apresentar exatamente a informação que o usuário precisa no momento. 9. Boas mensagens de erro - Linguagem clara, para ajudar o usuário a entender e resolver o problema. 10. Ajuda e documentação - O ideal é que um software seja tão fácil de usar (intuitivo) que não necessite de ajuda. Se for necessário, deve estar facilmente acessível. O que é grid? É uma malha composta por linhas guias, colunas e margens que servem para definir as relações de alinhamento, proporção e posicionamento dos elementos de um layout - Coluna: áreas verticais que contêm textos, imagens, vídeos e elementos interativos. - Módulos: divisões separadas por espaços uniformes, possibilita grids ordenados e repetitivos. - Margens: áreas protetoras periféricas que representam a quantidade de espaço entre a borda e o conteúdo do site. - Zonas Espaciais: agrupamentos de módulos ou colunas que podem formar áreas específicas para textos, anúncios, imagens ou outras informações. - Guias Horizontais: não são efetivamente linhas, podem ser espaços ou elementos que guiem o usuário pela tela. - Marcador: auxilia o usuário a navegar pela página, são eles: navegação global, local, de rodapé e de contexto, bem como títulos e ícones. Proporção Áurea - A Escola Pitagórica observou a ocorrência de um padrão matemático tão frequentemente na natureza que, segundo criam, era divinamente inspirado. Wireframes são rascunhos de uma tela que posicionam a informação e a navegação, é o esqueleto que organiza os elementos de interface, sem a interferência do projeto visual. Em projetos que envolvem interfaces gráficas digitais, são os documentos de representação da organização, diagramação e funcionamento dos elementos de uma página. Eles podem ser de baixa ou alta fidelidade Vantagens Desvantagens Alta fidelidade Validação consistente e persuasiva junto ao cliente, Facilita a compreensão de montagem do layout e Possibilita testes mais fiéis com usuários. Requer esforço e tempo, o que pode atrasar o processo e aumentar custos; e o foco pode se desviar prematuramente da arquitetura de informação para a interface e design visual Baixa fidelidade Rapidez, Baixo custo, Liberdade para o designer e Fácil de ser refeito se houver necessidade Pouca credibilidade, Maior margem de erros, Difícil de ser testado, Exige mais de programadores e designers, Requer desenvolvimento em conjunto, e é Menos intuitivo. Para que servem? ● Arquitetos de Informação: usam na forma de protótipo em testes de usabilidade. ● Diretores de Criação: usam como base gráfica para o desenvolvimento do Layout. ● Redatores: preenchem a estrutura com o conteúdo. ● Desenvolvedores: irão fazer tudo funcionar. ● Clientes: validam tudo de acordo com os requisitos do projeto. ● Usuários: que irão usá-lo como protótipo nos testes de usabilidade. Sketches: são os esboços, eles possuem baixa fidelidade Representação: é o Wireframe que é um protótipo Identificação: são mockups que consistem em uma versão mais detalhado que o wireframe Utilizando a metáfora do iceberg defina as etapas de um projeto correspondentes a cada camada: A- a primeira camada, a que fica acima da superfície da água é o que os usuários veem, é o visual, o design, a interface do usuário. B - Wireframes C- Arquitetura da informação D- escopo do projeto
Compartilhar