design para internet
DESCRIPTION
Palestra apresentada na FUPAC em Visconde do Rio Branco / MG para os Aluno do curso de Sistema de Informação.TRANSCRIPT
![Page 1: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/1.jpg)
DESIGN PARA INTERNET
![Page 2: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/2.jpg)
![Page 3: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/3.jpg)
![Page 4: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/4.jpg)
![Page 5: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/5.jpg)
![Page 6: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/6.jpg)
![Page 7: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/7.jpg)
OBJETIVOS DO DESIGN WEB
![Page 8: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/8.jpg)
![Page 9: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/9.jpg)
• O usuário
• A tarefa a ser executada
• A ferramenta necessária para a execução
da tarefa
![Page 10: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/10.jpg)
Esse é o objetivo de todo
webdesigner.
Contribuir para uma interface
gráfica não só bonita mas funcional.
![Page 11: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/11.jpg)
ELEMENTOS DO DESIGN WEB
![Page 12: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/12.jpg)
Elemento deOrientação
Elemento de Navegação
Elemento de Emoção
Elemento deConteúdo
![Page 13: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/13.jpg)
![Page 14: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/14.jpg)
![Page 15: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/15.jpg)
![Page 16: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/16.jpg)
Elementos de NavegaçãoAjuda o usuário a se mover dentro do site e acessar áreas específicas.
Elementos de OrientaçãoDiz ao usuário onde ele está dentro do site.
Elementos de InteraçãoProcessa informações e dados incluídos pelo usuário. Exemplo: uma busca, formulários, enquetes, etc.
Elementos de ConteúdoToda a informação em forma de texto, imagens, sons, vídeos ou animações.
Elementos de EmoçãoApelam para o sentimento do usuário, provocando curiosidade ou convidando a continuar a visitação, destacando alguma seção do site, produto ou serviço. Esses elementos podem ser imagens, animações, sons ou composições textuais.
![Page 17: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/17.jpg)
![Page 18: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/18.jpg)
![Page 19: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/19.jpg)
![Page 20: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/20.jpg)
USO ORIENTADO DO DESIGN WEB
![Page 21: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/21.jpg)
Trazendo isso para o design web, podemos dizer que é praticamente impossível agradar a todos ao mesmo tempo utilizando uma mesma linguagem visual.
Por isso é preciso decidir o público-alvo do site para a partir daí encontrar a linguagem que deverá ser utilizada.
![Page 22: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/22.jpg)
![Page 23: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/23.jpg)
O Briefing
![Page 24: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/24.jpg)
Podemos dizer que o briefing é um
conjunto de dados fornecidos pela
empresa-cliente para orientar você na
sua criação.
![Page 25: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/25.jpg)
Usabilidade
![Page 26: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/26.jpg)
Onde Estou?
Desorientação causa insegurança.
![Page 27: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/27.jpg)
Não me faça pensar
"Qual a coisa mais importante que eu devo fazer se quiser me assegurar que meu website seja fácil de usar?"
![Page 28: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/28.jpg)
Um exemplo típico de dificuldade
gratuita e sem necessidade são os nomes
das seções.
Quando tentam reinventar um nome já
conhecido, a coisa complica.
![Page 29: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/29.jpg)
![Page 30: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/30.jpg)
![Page 31: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/31.jpg)
![Page 32: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/32.jpg)
Cores
![Page 33: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/33.jpg)
![Page 34: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/34.jpg)
![Page 35: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/35.jpg)
![Page 36: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/36.jpg)
![Page 37: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/37.jpg)
Harmonia
Infinito
Eternidade
Nobre
Sobriedade
Lógica
Pensamento
Frio
Calmo
Confidência
Conservadorismo
Austeridade
Monotonia,
Dependência
Tecnologia
![Page 38: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/38.jpg)
Luxúria
Sofisticação
Sensualidade
Feminilidade
Desejo;
Espiritualidade
Criatividade
Realeza
Sabedoria
Resplandecência
![Page 39: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/39.jpg)
• AfeiçãoEncantamentoAmizadeJuventudeFloresDocesFemininoMeninaBebêsIngenuidadeDelicadeza
![Page 40: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/40.jpg)
• SólidoSeguroCalmoNaturezaRústicoEstabilidade,EstagnaçãoPesoAspereza.Antigo
![Page 41: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/41.jpg)
• PoderModernidadeSofisticaçãoFormalidadeMorteMedoAnonimatoRaivaMistérioNoite
![Page 42: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/42.jpg)
• Elegância
Humildade
Respeito
Reverência
Sutileza
![Page 43: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/43.jpg)
• PurezaInocênciaReverênciaPazSimplicidadeEsterilidadeClaridadeHonestidadeInocênciaDivindadeLuzRendição
![Page 44: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/44.jpg)
Processos para o desenvolvimento
de um Bom Site
![Page 45: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/45.jpg)
![Page 46: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/46.jpg)
![Page 47: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/47.jpg)
![Page 48: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/48.jpg)
![Page 49: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/49.jpg)
![Page 50: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/50.jpg)
![Page 51: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/51.jpg)
![Page 52: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/52.jpg)
![Page 53: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/53.jpg)
![Page 54: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/54.jpg)
![Page 55: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/55.jpg)
![Page 56: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/56.jpg)
![Page 57: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/57.jpg)
![Page 58: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/58.jpg)
![Page 59: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/59.jpg)
![Page 60: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/60.jpg)
![Page 61: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/61.jpg)
![Page 62: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/62.jpg)
![Page 63: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/63.jpg)
![Page 64: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/64.jpg)
![Page 65: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/65.jpg)
Processos para o desenvolvimento
de um Bom Site
![Page 66: Design para internet](https://reader033.vdocuments.com.br/reader033/viewer/2022060123/559751941a28ab75448b46ee/html5/thumbnails/66.jpg)
Wagner Amaro
www.wagneramaro.com.br