Designing for the Web – Capítulo 15: Imprimindo da Web

Às vezes, a tela é só uma forma de mostrar o que criamos. Outra forma importante é a impressão. Vamos ver por que ela importa ao criar sites.

Design Impresso vs. Web

  • Foco na Web: designers geralmente pensam mais na aparência online.
  • Botão ‘Versão para Impressão’: dites têm isso, mas poucos usam.

Folhas de Estilo para Impressão

  • Alternativa Eficiente: use folhas de estilo CSS para impressão, melhor que botões de ‘Versão para Impressão’.
  • Design vs. Técnico: designers deveriam cuidar disso, não só os técnicos.

Importância do Design Impresso

  • Percepção Errada: às vezes, acham que a impressão não importa, mas muita gente imprime páginas.
  • Cuidado com Dinheiro: algumas páginas ganham dinheiro com versões impressas, influenciando escolhas de design.

Conclusão

Design para impressão importa, mas muitos esquecem. Usar folhas de estilo e cuidar dos detalhes garante uma impressão boa, mantendo a identidade visual.

Designers precisam lembrar da importância da impressão para melhorar a experiência dos usuários.

Designing for the Web – Capítulo 14: A Arte da Diagramação e Tipografia

No design, a escolha das letras e como organizá-las são super importantes.

Tamanho e Espaçamento

  • Medida Importante: a largura do texto é crucial, cerca de 52-78 letras por linha.
  • Web e Layouts Flexíveis: adaptar texto para diferentes tamanhos na web é desafiador, mas a legibilidade é a chave.

Entrelinhas e Espaços

  • Boa Distância: deixe um pouco mais de espaço entre as linhas do que entre as palavras.
  • Mudanças de Cor: se usar texto branco em fundo preto, ajuste o espaço e o peso da fonte.

Dicas Práticas

  • Espaço Entre Palavras: ajuste conforme o comprimento da linha; menos espaço para linhas curtas.
  • Responsabilidade do Designer: designers devem seguir regras para texto fácil de ler.

Detalhes Importantes

  • Bom Entrelinhamento: ajuste o espaço entre linhas conforme o tamanho do texto.
  • Escolha Cuidadosa das Letras: entenda onde usar ponto e vírgula, reticências e aspas.

Pontuação Especial

  • Reticências Certas: três pontos indicam pausa ou omissão, seguindo regras específicas.
  • Use Aspas Corretamente: as aspas devem ser usadas direitinho quando citar algo.

Toques Finais

  • Letras Especiais: ligaduras, letras especiais, são importantes.
  • Hífens e Travessões: eles têm usos diferentes, então saiba quando usar cada um.

Organização Simples

  • Listas e Tabelas: mantenha tudo organizado para facilitar a leitura.
  • Formulários Simples: desenhe tabelas e formulários pensando no espaço e alinhamento.

Conclusão

Mesmo no mundo digital, lembre-se sempre de manter o texto fácil de ler. Seja organizado e use as regras, elas estão aí para ajudar!

Designing for the Web – Capítulo 13: Hierarquia Tipográfica

Hierarquia tipográfica é organizar palavras visualmente usando diferentes tamanhos ou estilos. Isso ajuda na compreensão e destaque das informações.

Escala Tipográfica

Lista de tamanhos padrão para manter o design equilibrado, usada há muito tempo.

Aplicação Prática

Ao criar, por exemplo, um site, seguir essa lista ajuda a definir tamanhos específicos para diferentes partes, tornando o design mais equilibrado.

Considerações sobre Tamanho

Escolher tamanhos certos é crucial. Planejar em vez de escolher aleatoriamente melhora a estética e a legibilidade.

Estilo e Peso

Além do tamanho, compreender o uso de estilos, como itálico ou negrito, é essencial para resolver problemas de design.

História das Letras

A ideia de usar maiúsculas e minúsculas existe há mil anos. No século XIX, adicionaram mais estilos, como itálico e negrito.

Conclusão

Hierarquia tipográfica não é só estilo, é tornar o texto fácil de ler. Seguir princípios básicos ajuda a criar designs claros e atraentes.

Designing for the Web – Capítulo 12: Tipos e Classificação

Partes das Tipografias:

As tipografias têm partes que definem suas características.

Classificação de Tipografias:

  1. Serif ou Sans-Serif: Com ou sem prolongamentos no final das hastes.
  2. Contraste e Espaçamento: Espessura relativa das letras determina espaçamento.
  3. Altura x: Altura da letra minúscula ‘x’.
  4. Estresse: Direção da espessura da haste.
  5. Peso: Espessura da haste.

Classificação Tradicional:

Gráficas, Humanistas, Garaldes, Transicionais, Didones, Slab Serif, Lineares, Glíficas, Manuscritas e Estilizadas.

Tipos Icônicos:

Algumas tipografias representam épocas específicas, mas o uso excessivo pode prejudicá-las.

Clássicos e Ícones:

Tipografias duráveis e versáteis, como Helvetica e Meta, são respeitadas por diferentes designers.

Exemplos Adicionais:

  1. VAG Rounded: Juvenil, usado pela Volkswagen.
  2. Meta: Design corporativo por Erik Spiekermann.
  3. Mrs. Eaves: Releitura elegante da Baskerville.

Designing for the Web – “Parte 3: Tipografia” – Capítulo 11: Design Tipográfico

Design Tipográfico na Web:

O design tipográfico é vital para websites e marcas. Mesmo sem fontes garantidas na web, compreender profundamente o design tipográfico é crucial. Tipografias têm características que comunicam e possuem personalidades únicas.

Importância para Marcas:

Empresas como Microsoft, Audi e BBC são reconhecíveis devido, em parte, às suas tipografias. Na web, onde não podemos garantir fontes específicas, entender o design tipográfico faz toda a diferença.

Elementos das Tipografias:

Tipografias têm elementos distintos, como cauda, espinha, ápice, serifas, bacia, final, contraforma, descedor, haste, esporão, ligação, laço, orelha, ascendente, braço e barra. Conhecer esses elementos é crucial para escolher a tipografia certa.

Designing for the Web – Capítulo 10: Unindo Tudo

Neste capítulo é sugerido um estudo de caso para pôr em prática o que foi abordado nos capítulos anteriores.

Estudo de Caso: Site de Jardinagem

  1. Equipe do Projeto e Cliente: Reúna uma equipe diversificada para representar diferentes áreas.
  2. Coleta de Pesquisa: Consuma mídias relacionadas ao projeto, explore pesquisas existentes e entreviste especialistas.
  3. Auditoria de Concorrentes: Analise marcas e experiências online dos concorrentes.
  4. Organizando Tudo: Coloque descobertas em um local visível, escrevendo breves ideias para oportunidades.
  5. Desenvolvimento de Ideias: Realize uma sessão de ideias, reduzindo para uma principal para cada oportunidade.
  6. Brief Criativo: O designer cria um brief orientando a equipe de design com base nas ideias e insights.

Designing for the Web – Capítulo 9: Ideias

Ideias são vitais no processo criativo, mas raramente surgem como inspiração instantânea. Elas precisam ser trabalhadas e refinadas ao longo do tempo.

Pensamento Criativo

Ao receber um briefing, crio um “Idea Brief” para focar o problema. Começo a gerar ideias em um ambiente tranquilo, rapidamente pulando entre conceitos no meu caderno.

Inspiração

Inspiração é subjetiva e pode vir de músicas, passeios ou coisas do dia a dia. Manter uma coleção de itens inspiradores, como folhetos e fotos, pode ser útil.

Ideias Estruturadas

Não podemos depender apenas de flashes de inspiração. Sessões de Ideias, ou “Ideas Sessions”, são valiosas. Sessões em grupo com membros-chave garantem apoio interno.

Sessões de Ideias

  1. Primeiro Impulso: Anote ideias iniciais.
  2. Estímulo: Use informações do Idea Brief e pesquisa.
  3. Quatro Etapas:
    • Revolução: Inverta suposições.
    • Re-Expressão: Aborde a ideia de maneira diferente.
    • Mundos Relacionados: Aplique ideias de domínios semelhantes.
    • Links Aleatórios: Conecte ideias com objetos aleatórios.
  4. Regras do Brainstorming:
    • Todas as ideias são iguais.
    • Não julgue.
    • Analise depois.
    • Todos são iguais.
    • Divirta-se e respeite o tempo.
  5. Avaliação: Classifique as ideias usando um “Passionometer” para escolher as melhores.

Ter ideias é um processo ativo que envolve criatividade, análise e colaboração. Brainstorming estruturado é crucial para gerar e refinar ideias para um projeto.

Designing for the Web – Capítulo 8: Pesquisa

A Profissão da Pesquisa

A pesquisa é essencial para o sucesso do design. Isso inclui entender o negócio por trás do projeto, lendo documentos estratégicos e entrevistando partes interessadas.

Perguntas Cruciais

Entrevistas informais ajudam a construir confiança e a entender produtos, metas de negócios, mercado-alvo e diferenciais competitivos.

Pesquisa de Mercado

Qualquer pessoa pode fazer isso com um navegador, mas é crucial garantir que as informações sejam precisas.

Termos de Pesquisa

  • Pesquisa Qualitativa: Explora sentimentos e motivações.
  • Pesquisa Quantitativa: Baseada em números, exige análise.
  • Pesquisa Primária: Informação nova.
  • Pesquisa Secundária: Feita em dados antigos.
  • Segmentação: Divisão do mercado por características demográficas.
  • Grupos Focais: Discussões para representar a audiência.
  • Teste de Usabilidade: Usuários completam tarefas enquanto são observados.

Pesquisa Visual e Esboços

Manter um livro de esboços é essencial. Aplicativos como iPhoto e Flickr ajudam a criar livros de esboços virtuais.

Moodboards

Criados para projetos específicos, apresentam uma linguagem visual em uma folha, usando imagens, cores e tipografias.

Obtendo Insights

O objetivo é fornecer insights para impulsionar ideias. Análises leves, como SWOT, são úteis. Apresentar insights isoladamente é crucial para inspirar futuras ideias. Agora, é hora de se divertir no processo criativo.

Designing for the Web – Capítulo 7: O Briefing

O Início do Projeto

O Briefing marca o começo de um projeto. O primeiro briefing do cliente muitas vezes é insuficiente, podendo faltar informações importantes e focar demais nos detalhes internos do cliente, além de frequentemente omitir o orçamento. Não é culpa deles, pois muitas vezes é a primeira vez que escrevem um briefing. Este capítulo explora os quatro tipos de briefings discutidos anteriormente.

Tipos de Briefings:

  1. Brief do Cliente: Pode ser um telefonema ou e-mail inicial, uma introdução que marca o início da conversa.
  2. Brief Técnico: Frequentemente invisível, encontrado em documentos mais extensos. Desenha uma linha sobre o desenvolvimento e protege o designer.
  3. Brief Criativo: Necessário para líderes de equipe ou designers seniores, criado a partir do Brief do Cliente, envolvendo muitas perguntas e interações.
  4. Brief de Ideias: Uma frase que descreve os objetivos do projeto. Serve como ponto de partida para sessões de ideias. Difícil de escrever, mas essencial para a solução criativa.

Tipos de Briefings Ideais:

  1. Brief Florescente: Usando linguagem complexa e abreviações, confuso e sem foco.
  2. Brief Nebuloso: Vago e carente de detalhes, deixando muito à imaginação.
  3. Brief Restrito: Muito focado, com solução específica, limita a criatividade do designer.
  4. Brief Solto: Muito aberto, sem foco específico, pedindo apenas ideias sem direção.

O Brief Ideal:

Não é muito solto nem muito restrito. Aberto o suficiente para facilitar a criação dos outros briefings. Claro e descomplicado.

Funil de Foco:

Visualização crucial para definir um briefing. Imagine um funil: amplo no topo e estreito na base. No topo, ideias conceituais; na base, pensamento específico. O briefing ideal fica no meio, claro o suficiente para direcionar, mas aberto para criar outros briefings essenciais.

Designing for the Web – “Parte 2: Pesquisa e Ideias” – Capítulo 6: O Processo de Design na Web

O Que é Design?

Design não é apenas sobre ser criativo ou técnico; na web, trata-se de resolver problemas. Cada projeto é único, e a solução começa com pesquisa para entender as necessidades do cliente, público e projeto.

O Processo de Design Tradicional

  1. Briefing: Cliente e designer definem metas e expectativas.
  2. Pesquisa: Coleta de dados para insights e fundamentação da solução no mundo real.
  3. Design: Geração e apresentação de ideias ao cliente.
  4. Revisões: Feedback do cliente resulta em ajustes.
  5. Produção: Transformação da solução em um produto final, como um site.

Este processo pode falhar por falta de comunicação e testes, levando a projetos inacabados.

O Processo de Design na Web

  1. Briefing na Web: Documentos do cliente, técnico, criativo e uma breve ideia fornecem base.
  2. Pesquisa e Insights: Coleta de dados, incluindo análise de página, personas e questionários, informa a solução.
  3. Geração de Ideias: Ideias registradas sem julgamento, envolvendo cliente e equipe.
  4. Solução: Resultados, pesquisa e ideias compilados em um design claro. Protótipos de baixa fidelidade são desenvolvidos para testes.
  5. Produção na Web: Implementação do design final em um produto funcional. Colaboração contínua entre equipes para garantir consistência.

Conclusão

Não há um único caminho certo para o design de sites. Este capítulo destaca a importância da pesquisa, ideias iterativas e colaboração entre disciplinas. O design na web é um processo contínuo, incorporando elementos do método tradicional, mas com ênfase na flexibilidade e adaptação às necessidades do projeto. Experimente diferentes abordagens para encontrar o método que melhor se adapte a você e ao projeto em questão.