webdesign
dDESIGN | UFPE
SUMÁRIO
ESTRUTURA E FUNDAMENTOS
MÉTODOLOGIA DE PROJETO
PROTOTIPAÇÃO
estrutura e fundamentos
PARTE 1
{
}
como faço para criar websites incríveis?
senta lá, Cláudia... é bem mais complexo do que parece...
PETER MORVILLE
A INTERNET PRODUZIU UMA GRANDE BAGUNÇA DE INFORMAÇÃO.
WEBSITES CRIADOS SEM PLANEJAMENTO PARA CRESCER; PROBLEMAS NO GERENCIAMENTO DE CONTEÚDO; ALTOS CUSTOS DE REFORMULAÇÃO DE WEBSITES;
USUÁRIOS PREJUDICADOS.
MÍDIAS
COMPUTACIONAIS
NEW MEDIA
MÍDIA ON
MÍDIA DIGITAL
MÍDIA ALGORÍTIMICA
MÍDIA INTERATIVA
</>
INTERNET
MÍDIAS SOCIAIS
FRONT-END
BACK-END
</>
{;}
DIFERENÇAS ENTRE
DISPOSITIVOS DE I/O
E RECURSOS
DISPONÍVEIS
LARGURA DE BANDA
E RESTRIÇÕES DE TRANSFERÊNCIA DE DADOS
CAPACIDADE DE PROCESSAMENTO
CONSUMO DE MEMÓRIA
DISPONIBILIDADE
CAPACIDADE DE PROCESSAMENTO
CONSUMO DE MEMÓRIA
INCOMPATIBILIDADE DE SOFTWARE
LIMITAÇÕES
TÉCNICAS
INCOMPATIBILIDADE DE SOFTWARE
CÓDIGO INTERPRETADO
CÓDIGO COMPILADO
PROJETAR É UM PROBLEMA METODOLÓGICO
PRODUTO TÍPICO DA APPLE
PRODUTO TÍPICO DO GOOGLE
PRODUTO TÍPICO DA SUA EMPRESA
PROJETO
POR
QUE?
COMO?
O QUE?
PROJETO NÃO É JOB
PROJETO PRECISA DE PESQUISA CONSTANTE
PROJETO PRECISA DE REFLEXÃO PERMANENTE
PROJETO = PENSAR + FAZER +
REPENSAR + REFAZER
TRABALHO PROJETUAL NÃO É INSTRUMENTAÇÃO TÉCNICA, MAS UM PROCESSO INVESTIGATIVO E REFLEXIVO
"ENSINAR DESIGN ENVOLVE CRIAR TANTO HÁBITOS MENTAIS QUANTO ARTEFATOS ESTÉTICOS. SE UM ESTUDANTE NÃO PODE REFLETIR SIGNIFICATIVAMENTE SOBRE SEU PRÓPRIO PROCESSO AO FINAL DE UM EXERCÍCIO DE DESIGN, EU CONSIDERO ISSO UM FRACASSO, NÃO IMPORTANDO A QUALIDADE DE SEUS PROJETOS."
TRACY FULLERTON
PROFESSORA ASSOCIADA E CATEDRÁTICA DE ARTES ELETRÔNICAS EM ENTRETENIMENTO INTERATIVO DA UNIVERSITY OF SOUTHERN CALIFORNIA
DESIGN É PROCESSO
(NÃO É O COMO O OBJETO SE APARENTA, MAS ELE FUNCIONA)
EIXO PRAGMÁTICO
EIXO TÉCNICO-CONSTRUTIVO
FORMA
MÍDIA
PLASTICIDADE / APARÊNCIA
EIXO SIMBÓLICO
SENTIDO
LINGUAGEM
USO
FUNÇÃO
UM PROJETO DESESTRUTURADO / SEM FOCO
ADOÇÃO DE UM MÉTODO PROJETUAL
CONCISÃO
IDENTIDADE
INTEGRIDADE
SOLIDEZ
CLAREZA (LEGIBILIDADE)
UTILIDADE
FRAGMENTAÇÃO
DESESTRUTURAÇÃO
AUSÊNCIA DE FOCO
"PICADINHO"
"QUEIJO SUIÇO"
"PICADINHO" OU FRAGMENTAÇÃO
DESIGN USADO COMO INSTRUMENTAL TÉCNICO
metodologia de projeto para web
PARTE 2
PROCESSOMANIFESTOPROPOSIÇÃO
FORM FOLLOWS FUNCTION
FORM FOLLOWS CONTENT
ARQUITETURA DA
INFORMAÇÃO
contexto de uso
RICHARD SAUL WURMAN
DAR ORDEM AO CAOS DE INFORMAÇÕES PRODUZIDAS EM LARGA ESCALA
DAR MAIS ATENÇÃO À COMO INFORMAÇÕES SÃO APRESENTADAS
JESSE JAMES GARRETT
EYE4U.COM
USEIT.COM
METADADOS
CONTEÚDO
CONTEXTO
USO
IA
MARTIJN DE WALL
THE CITY AS INTERFACE
PLATAFORMA
PROGRAMA
PROTOCOLO
TROCAS, CONVENÇÕES, REGRAS, PADRÕES
CONTEÚDO,
ATIVIDADES
FORMA,
INFRAESTRUTURA
FLUXO
ORGANIZAÇÃO
RELACIONAMENTO
NAVEGAÇÃO
TAXONOMIA
CRITÉRIOS
DESIGN DE INFORMAÇÃO
≠
ONTOLOGIAS
PROCESSO DE ANÁLISE
DESIGN SISTEMATIZAÇÃO
=
DESIGN PATTERNS
CHRISTOPHER ALEXANDER
GoF (GANG OF FOUR)
UI PATTERNS
INSTRUMENTOS /
FERRAMENTAS
DE PROJETO
WIREFRAMES
A/B TESTS
HEATMAPS
USER TESTING
PESQUISA
TESTES
USUÁRIO
USER MAPPING
PENSAMENTO
AUDIÇÃO
VISÃO
MOTIVAÇÃO
CONTEXTO
COMPORTAMENTO
INTERFACE
USER MAPPING
experimentação e prototipação
PARTE 3
criatividade
SUBLIME.FYI
107 OF THE BRIGHTEST CREATIVE PEOPLE IN WEB DESIGN
PROTOTIPAR NÃO É PROJETAR
PROTÓTIPOS SERVEM PARA VALIDAR / TESTAR IDEIAS
UXKITS.COM
WEBFLOW
FRAMER
320 PX
480 PX
655 PX
767 PX
835 PX
979 PX
1200 PX
1024 PX
MEDIA QUERY
WEB PATTERNS
BOOTSTRAP
RESPONSIVE ICONS
</>
HTML
CSS
JAVASCRIPT
HTML
CSS
JAVASCRIPT
<p id="P1">Eu sou um paragrafo</p>
p {
color: #ffffff;
}
if (apaga == true) {
var objeto = document.getElementById("P1");
objeto.display = none;
}
SCRIPT
LINGUAGEM DE PROGRAMAÇÃO FORMAL
Playground
CODEPEN.IO
IDE Online
CODEANYWHERE.COM
Editor de código
SUBLIME TEXT 3
ATUALIDADE DAS MÍDIAS COMPUTACIONAIS
AWWWARDS
2017 © PROF. DR. GUILHERME RANOYA
[OLD] Webdesign
By Guilherme Ranoya
[OLD] Webdesign
[OLD] APRESENTAÇÃO DA DISCIPLINA DE WEBDESIGN DA UNIVERSIDADE FEDERAL DE PERNAMBUCO (dDESIGN|UFPE)
