O documento fornece uma introdução sobre design para web, cobrindo tópicos como pesquisa, tipografia, cores, layout, grids e um estudo de caso sobre o redesign do site de notícias De Standaard. O foco é ensinar sobre os fundamentos e processos do design web, incluindo a importância da pesquisa, escolha de cores e tipografia, composição visual e criação de sistemas de grade para organizar conteúdo.
Apresentação com algumas dicas para estudantes de comunicação que queiram trabalhar com diereção de arte. Esse material foi feito para um workshop realizado na Mercatto Comunicação. (www.mercattando.com)
[palestra] Definindo a estratégia com Design Thinking e CanvasAlessandro Almeida
Palestras e dinâmicas realizadas no Walmart.com, entre março e abril de 2016.
Objetivos:
- Apresentar os conceitos de Design Thinking e Canvas
- Apoiar o time na construção do Canvas da área, focando na estratégia para 2016
Apresentação do Workshop realizado, no dia 19 de abril de 2018, na ACIC - Associação Comercial e Industrial de Campinas como parte do Programa de Formação de Gestores.
[palestra] Design Thinking e Canvas: Ferramentas para EmpreendedoresAlessandro Almeida
O objetivo do material é apresentar o Design Thinking, o Business Model Canvas e o Lean Canvas, ferramentas que podem ajudá-los a definir e descrever o modelo de negócios do seu empreendimento
Palestra apresentada na Semana Cultural do UNIFIEO
Apresentação com algumas dicas para estudantes de comunicação que queiram trabalhar com diereção de arte. Esse material foi feito para um workshop realizado na Mercatto Comunicação. (www.mercattando.com)
[palestra] Definindo a estratégia com Design Thinking e CanvasAlessandro Almeida
Palestras e dinâmicas realizadas no Walmart.com, entre março e abril de 2016.
Objetivos:
- Apresentar os conceitos de Design Thinking e Canvas
- Apoiar o time na construção do Canvas da área, focando na estratégia para 2016
Apresentação do Workshop realizado, no dia 19 de abril de 2018, na ACIC - Associação Comercial e Industrial de Campinas como parte do Programa de Formação de Gestores.
[palestra] Design Thinking e Canvas: Ferramentas para EmpreendedoresAlessandro Almeida
O objetivo do material é apresentar o Design Thinking, o Business Model Canvas e o Lean Canvas, ferramentas que podem ajudá-los a definir e descrever o modelo de negócios do seu empreendimento
Palestra apresentada na Semana Cultural do UNIFIEO
Mini apresentação explicando como criar o briefing de um website, necessário para o planejamento, organização e elaboração de orçamento do website pelo desenvolvedor.
From 3 until the 6 of June the last project meeting in Tuusula (Finland) was held. All members from the participating schools send teachers to work at the final report for the Comenius Project 'Holidays in Europe'.
Esse slide contêm os processos do CMMI e seus níveis. Também descreve os níveis MPS.Br e ao final faz uma breve comparação entre os dois modelos e apresenta as vantagens e desvantagens
Criando uma startup de tecnologia / WorkshopRhuan Willrich
Técnicas, conceitos e metodologias para a criação de uma startup de tecnologia.
Workshop apresentado no evento Olhares Múltiplos 2013, como parte das oficinas "Tô na Área", dos egressos dos cursos.
Conceitos de empreendedorismo, startup, business model canvas, lean startup, product/market fit, MVP, métricas, customer development, além de orientações gerais sobre investimento, sócios e equipe e dicas finais.
Mini apresentação explicando como criar o briefing de um website, necessário para o planejamento, organização e elaboração de orçamento do website pelo desenvolvedor.
From 3 until the 6 of June the last project meeting in Tuusula (Finland) was held. All members from the participating schools send teachers to work at the final report for the Comenius Project 'Holidays in Europe'.
Esse slide contêm os processos do CMMI e seus níveis. Também descreve os níveis MPS.Br e ao final faz uma breve comparação entre os dois modelos e apresenta as vantagens e desvantagens
Criando uma startup de tecnologia / WorkshopRhuan Willrich
Técnicas, conceitos e metodologias para a criação de uma startup de tecnologia.
Workshop apresentado no evento Olhares Múltiplos 2013, como parte das oficinas "Tô na Área", dos egressos dos cursos.
Conceitos de empreendedorismo, startup, business model canvas, lean startup, product/market fit, MVP, métricas, customer development, além de orientações gerais sobre investimento, sócios e equipe e dicas finais.
Como montar um negócio genial - Guia Siga o RastroDiego Cordovez
Quer entender como montar um negócio genial?
A Siga o Rastro preparou um e-book com dicas práticas para que você prepare-se para essa fase decisiva da sua empresa.
Você verá itens como: pesquisa de mercado, Equipe e co-fundadores, Planejamento Estratégico e Business Canvas, e Plano de Marketing.
Saiba também quais os documentos necessários para se abrir uma empresa.
Confira o material completo também em:
http://materiais.sigaorastro.com.br/como-montar-um-negocio
LATEC - UFF. PALESTRA - O ANALISTA DE MODELO DE NEGÓCIOS.LATEC - UFF
O modelo de negócios se tornou rapidamente um grande sucesso mundial, principalmente entre uma nova
geração de empreendedores loucos para criar suas start-ups! Mas por que tamanho sucesso?
Durante muitos anos empreendedores foram incentivados a desenvolver um plano de negócios toda vez que
pensavam em criar uma nova empresa ou produto.
Precisamos temer o futuro e as tecnologias que com ele estão chegando? Uma breve análise de como chegamos até aqui em termos de tecnologia e o que nos espera no futuro.
4. Pesquisa e Idéias
Todo design tem preocupação com a estética e com o
rigor técnico e aperfeiçoamento de detalhes, mas o
web design é baseado essencialmente na resolução de
problemas.
Cada projeto tem seu próprio conjunto de problemas a
serem resolvidos.
Qual é o primeiro passo na resolução de problemas?
Você começa com a pesquisa.
Você precisa mergulhar nas necessidades do cliente,
do público e do projeto em si, e se informar o máximo
possível (Walter Longo).
4
5. O Processo de Web Design
• O Briefing
– O Briefing do Cliente
– O Briefing Técnico Briefing
– O Briefing Criativo
– O Briefing de Idéias
• Pesquisa & Insights Pesquisa
– Pesquisa Qualitativa
– Pesquisa Quantitativa
– Pesquisa Primária
– Pesquisa Secundaria Ideação
– Segmentação
– Focus Groups
– Testes de Usabilidade
– Pesquisa Visual Solução
– Insights Gerados
• Geração de Ideias
– Inspiração
Produção
– Idéias Estruturadas
• Solução
• Produção/Implementação
5
10. Escolha da Cor
A escolha da cor é talvez o elemento mais dificil do projeto.
Por quê?
Porque é o elemento mais subjetivo do projeto.
Para alguns, uma paleta de cinza-escuro com salpicos de rosa
brilhante vai ser ótimo, para outros pode ser totalmente errado.
Muitos designers, com conhecimentos em teoria da cor ou não,
acabam tomando decisões subjetivas sobre a cor e então, quando
chega a hora de explicar as decisões a um cliente, as coisas começam
a complicar.
10
11. Círculo cromático
As cores, quando selecionadas a
partir do círculo cromático, em
certas combinações, interagem
entre si.
Esta é a base da paleta de cores, a
interação das cores.
Conhecer a base de tipos de
combinações de cores é essencial
na criação de paletas.
11
12. Tonalidade, Saturação e Brilho
Descrever cores pode ser difícil.
Usar termos padrões pode nos
ajudar a descrever o que
queremos.
Matiz, saturação e brilho são
maneiras de organizar e
descrever cores.
• Tonalidade
• Saturação
• Brilho
12
16. As Bases da Composição
• A Regra dos Terços
Fotógrafos usam esta regra há
anos e antes deles artistas e
arquitetos.
A teoria é simples e fácil de aplicar
no dia-a-dia do designer.
Divida qualquer espaço de
trabalho, ou layout, em
terços horizontalmente e
verticalmente, e alinhe os pontos
chave do foco de sua composição
nos locais onde as linhas se
cruzam.
16
17. As Bases da Composição
• “Looking Room”
1. objeto
2. espaço à esquerda
3. “looking room” cria sensação
de movimento nesta direção
17
18. As Bases da Composição
• Aplicando “Looking Room”
para a web
Podemos aplicar a mesma teoria
para uma página na web.
Tomando os três elementos:
“assunto, espaço,
e movimento", podemos guiar o
olhar do usuário para os
elementos que desejarmos.
A definição correta pode ter um
sutil, mas importante efeito sobre
a forma como uma página é
visualmente percebida pelo
usuário.
18
19. Relações Espaciais
O espaço é importante no layout.
O espaço pode ser criado pelo conteúdo - como texto, imagens,
listas, logos, etc - ou pode ser criado pelo espaço entre o conteúdo,
chamado de espaço negativo, ou espaço em branco.
O espaço pode ser passivo, um subproduto do processo de layout.
Ou, pode ser ativo; estar lá por um motivo, para guiar os olhos do
usuário, ou ajudá-lo a tomar uma decisão.
19
20. Espaço em Branco
Espaço em branco, ou espaço
negativo é o espaço entre os
elementos de uma composição;
quer seja uma página web, uma
aplicação web ou uma página em
uma revista.
20
24. Estudo de Caso – Jornal De Standaard
O Briefing
• Aprimorar o conteúdo principal;
• Melhorar a marca e atrair novos usuários ao site,
não os leitores do jornal;
• Melhorar a inovação do novo site;
• Melhorar o modelo de negócio;
• Melhorar o visual (já desatualizado);
• Integrar um novo sistema de gerenciamento de conteúdo (CMS);
24
25. Estudo de Caso – Jornal De Standaard
Conteúdo existente Integração da Marca
www.standaard.be já existia a anos. De Standaard é um jornal com uma
Durante esse tempo, houve tentativas história rica. O público no entanto, é
típico de um jornal padrão, idosos, sexo
de reforçar padrões, de anúncios a masculino, branco.
tamanhos de imagem.
Já o site tem uma audiência um pouco
Parte do trabalho a ser feito seria de diferente. Ainda predominantemente do
auditar o máximo de conteúdo possível sexo masculino, mas eles são mais
e, em seguida, definir as novas jovens, menos conservadores em sua
guidelines que se encaixam nos padrões visão política. relacionados, mas não
marcas estão
Nesse sentido, as duas
e tendências são a mesma. Esta diferença sutil tinha
de ser levada em conta no projeto.
Receita
Como a maioria dos jornais, De Standaard depende de publicidade e assinaturas
para suas receitas. Anteriormente, o jornal utilizava alguns tamanhos de anúncio
padrão e alguns anúncios feitos sob medida para a execução de promoções
internas. Com tantos tamanhos diferentes, alguns padronizados, outros não,
quaisquer alterações de design e layout eram um desafio. Os anúncios colocados
onde se encaixavam, ao invés de em um posicionamento estratégico.
25
26. Estudo de Caso – Jornal De Standaard
Conteúdo Modular
Grade Modular
Para lidar com a variedade de
importância da uma notícia, uma
série de variações foram exploradas
e projetadas.
Era também fundamental explorar
o fato de que as histórias podem
escalar seu grau de importância. A
notícia pode começar com
pequenas quantidades de
informação e pode ir crescendo e
agregando conteúdos associados,
tais como fotos e vídeo.
Tudo isso tem de ser estruturado
em um formato de conteúdo que
permita a exibição deste fluxo de
crescimento.
26
27. Estudo de Caso – Jornal De Standaard
Elementos Tipográficos
Todo o conteúdo escrito pode ser
estruturado em elementos
tipográficos, tais como parágrafos,
listas, títulos, subtítulos, citações
etc. Os jornais cobrem histórias tão
amplas que, do ponto de vista
editorial, os escritores precisam de
todos os elementos tipográficos
com que estão acostumados a
trabalhar.
27
28. Estudo de Caso – Jornal De Standaard
Criando a Grade
As constantes definem as colunas.
De Standaard usa as unidades de
publicidade definidas pelo
Interactive Advertising Bureau.
Para o novo site, foi proposto que
as seguintes unidades de anúncio
seriam incorporadas:
28
31. Estudo de Caso – Jornal De Standaard
Crie um sistema,
não um Web Site
31
32. Conclusão
O design gráfico mudou pouco em cinqüenta anos anos.
Nós continuamos a usar a cor, imagem, tipografia, ilustrações e layout
para contar uma história para os usuários. Continuamos a usar a
pesquisa para basear e informar as nossas decisões.
Uma das poucas coisas que é diferente é o meio de entrega: a web.
E com esso diferença surge uma mudança fundamental:
Nós não controlamos o conteúdo, quem controla é o usuário.
Web design precisa ir além de layout, fontes e cores, além dos
caprichos do navegador e das últimas bibliotecas de JavaScript.
Precisa abraçar as verdadeiras raízes da prática:
a comunicação de informações.
32