Top Banner
47

Programação Visual Para Blogueiros (WordCamp Salvador 2014) - Helton Bezerra

Jul 25, 2015

Download

Design

Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Programação Visual Para Blogueiros (WordCamp Salvador 2014) - Helton Bezerra
Page 2: Programação Visual Para Blogueiros (WordCamp Salvador 2014) - Helton Bezerra

AGENDA

i. O Desafioii. As Definiçõesiii. Pra QUE SERVE O DESIGN?iv. Método {Fácil} Em 02 Passosv. O Que Vc Vai Precisar Sabervi. Rápidos Aprofundamentosvii. Indicações Úteisviii. Sobre Mimix. Um Breve, Mas Útil, Pensamento

Page 3: Programação Visual Para Blogueiros (WordCamp Salvador 2014) - Helton Bezerra

UM DESAFIO...Como falar sobre {conceitos de design} para umgrupo em que pelo menos mais da metade são {programadores}...

Page 4: Programação Visual Para Blogueiros (WordCamp Salvador 2014) - Helton Bezerra

What is Design?

Page 5: Programação Visual Para Blogueiros (WordCamp Salvador 2014) - Helton Bezerra
Page 6: Programação Visual Para Blogueiros (WordCamp Salvador 2014) - Helton Bezerra

&... PRA QUE SERVE O DESIGN?

Page 7: Programação Visual Para Blogueiros (WordCamp Salvador 2014) - Helton Bezerra
Page 8: Programação Visual Para Blogueiros (WordCamp Salvador 2014) - Helton Bezerra
Page 9: Programação Visual Para Blogueiros (WordCamp Salvador 2014) - Helton Bezerra
Page 10: Programação Visual Para Blogueiros (WordCamp Salvador 2014) - Helton Bezerra

TBM SERVE PARA ESCREVERDANDO VIDA...

De5!GN

Page 11: Programação Visual Para Blogueiros (WordCamp Salvador 2014) - Helton Bezerra

Então, reconhecendo queo assunto é Delicado & Amplo...

[O Que] eu fiz???

Page 12: Programação Visual Para Blogueiros (WordCamp Salvador 2014) - Helton Bezerra

“Me coloquei no lugar de vcs programadores”

Page 13: Programação Visual Para Blogueiros (WordCamp Salvador 2014) - Helton Bezerra

E CHEGUEI EM UM{MÉTODO FÁCIL}

#01 entender as dores das 2 partes do processo

#02 saber algumas coisas que vcs precisarão estudar mais

Page 14: Programação Visual Para Blogueiros (WordCamp Salvador 2014) - Helton Bezerra

VAMOS ÀS doLOres ;]

Case#01: Desabafo de um DESenvolvedorassistir

Case#02: Desabafo de um DESignerassistir

Page 15: Programação Visual Para Blogueiros (WordCamp Salvador 2014) - Helton Bezerra

E ENTÃO... O QUE VOU PRECISAR ESTUDARSOBRE ESSE TAL DE DESIGN?

Bancos de imagens Brainstorming Campos de prioridade em um layout

(prioridades 01, 02 e 03) Como adequar o layout à resolução

em diferentes monitores Cores Criatividade Discursos publicitários (copywrite) Distribuição dos elementos Elementos do web design Feedbacks de erro no site (design de

contingência) Gestalt Influência da cor no processo

cognitivo Layout F Mapas mentais

Mensagens subliminares Metodologia aida (atenção, interesse, desejo e ação) Pontos chave da comunicação em um layout Pontos de calor em cliques Pontos de fixação de leitura Processo cognitivo Publicidade Resoluções dos monitores e responsividade Sites de consulta de cores Teoria do terços Tipologias Usabilidade

Page 16: Programação Visual Para Blogueiros (WordCamp Salvador 2014) - Helton Bezerra

O PROCESSO CRIATIVO

Page 17: Programação Visual Para Blogueiros (WordCamp Salvador 2014) - Helton Bezerra

ELEMENTOS DO DESIGN WEB

Navegação: menu... (arquitetura)

Orientação: breadcrumbs... (arquitetura)

Interação: forms, enquetes... (usabilidade)

Conteúdo: informação... (arquitetura)

Emoção: composições, títulos... (copywrite)

Page 18: Programação Visual Para Blogueiros (WordCamp Salvador 2014) - Helton Bezerra

TIPOLOGIA

Page 19: Programação Visual Para Blogueiros (WordCamp Salvador 2014) - Helton Bezerra

CORES

A cor adiciona outras dimensões à informação:

1. Sugerem mensagens subliminares;2. Despertam sentimentos;3. Geram envolvimento.

PS:influências biológica, cultural e pessoal.

Page 20: Programação Visual Para Blogueiros (WordCamp Salvador 2014) - Helton Bezerra

USABILIDADE

http://www.radios.com.br/

Page 21: Programação Visual Para Blogueiros (WordCamp Salvador 2014) - Helton Bezerra

USABILIDADE

Page 22: Programação Visual Para Blogueiros (WordCamp Salvador 2014) - Helton Bezerra

WIREFRAME

Page 23: Programação Visual Para Blogueiros (WordCamp Salvador 2014) - Helton Bezerra

WIREFRAME

Page 24: Programação Visual Para Blogueiros (WordCamp Salvador 2014) - Helton Bezerra
Page 25: Programação Visual Para Blogueiros (WordCamp Salvador 2014) - Helton Bezerra

VOLTANDO aos ELEM. de NAVEGAÇÃO

Page 26: Programação Visual Para Blogueiros (WordCamp Salvador 2014) - Helton Bezerra

O MÉTODO AIDA

Page 27: Programação Visual Para Blogueiros (WordCamp Salvador 2014) - Helton Bezerra

PONTOS DE CALOR EM CLIQUES

Page 28: Programação Visual Para Blogueiros (WordCamp Salvador 2014) - Helton Bezerra

PONTOS DE CALOR EM CLIQUES

Page 29: Programação Visual Para Blogueiros (WordCamp Salvador 2014) - Helton Bezerra

DESIGN DE CONTINGÊNCIA: erro 404

Page 30: Programação Visual Para Blogueiros (WordCamp Salvador 2014) - Helton Bezerra

INDICAÇÕES ÚTEIS...

Alguns pontos importantes esites para consultar esses assuntos...

Page 31: Programação Visual Para Blogueiros (WordCamp Salvador 2014) - Helton Bezerra

Curso básico de DESIGN:http://criativosfera.com/category/design-basico

/

Curso básico de WebDESIGN:http://criativosfera.com/category/web-design-basico/

Page 33: Programação Visual Para Blogueiros (WordCamp Salvador 2014) - Helton Bezerra

Infográfico sobre COREShttp://viverdeblog.com/psicologia-das-cores/

Gerador de paleta de coreshttp://paletton.com/

Page 34: Programação Visual Para Blogueiros (WordCamp Salvador 2014) - Helton Bezerra

PRESENTE PRA VCS

https://www.youtube.com/playlist?list=PLKAlav3jFa8jB_a9cJGuiAQd9ggHVthVz

Page 35: Programação Visual Para Blogueiros (WordCamp Salvador 2014) - Helton Bezerra

SITES REFERÊNCIAS de LEITURAPinteresthttp://www.pinterest.com/explore/web-design/http://www.pinterest.com/explore/ui-ux-design/http://www.pinterest.com/explore/posters/http://www.pinterest.com/explore/vintage-graphic-design/

Siteshttp://bensecret.com/http://teacakedesign.com/http://www.owengildersleeve.com/http://www.sazzy.co.uk/http://arianeirle.com/http://sashaprood.com/http://www.hypefortype.com/http://www.the-neighbourhood.com/http://kellianderson.com/http://www.underwired.com/http://onrepeat.net/http://madebyjulene.com/http://www.riamonde.com/http://mekanism.com/http://fluidesign.co.uk/http://plugcitarios.com/http://www.criatives.com.br/http://www.blogmariapresenteira.com.br/http://www.repertoriocriativo.com.br/http://www.arquitrecos.com/http://www.arrumadissimo.com.br/http://achadosdedecoracao.blogspot.com.br/

Page 36: Programação Visual Para Blogueiros (WordCamp Salvador 2014) - Helton Bezerra

OPA, AGORA SIM :D

Page 37: Programação Visual Para Blogueiros (WordCamp Salvador 2014) - Helton Bezerra

Nascido em 1982;

Carioca, mas amante do Ceará;

Trabalho com Mkt Digital e Coaching;

Fiz algumas faculdades (Medicina, Química Orgânica, Nutrição, Filosofia, Análise de Sistemas para Internet, Design Gráfico e, ultimamente, Administração...) Quem sabe um dia finalizo alguma pra ter o tão sonhado canudo em mãos, rs.

Page 38: Programação Visual Para Blogueiros (WordCamp Salvador 2014) - Helton Bezerra
Page 39: Programação Visual Para Blogueiros (WordCamp Salvador 2014) - Helton Bezerra

FILHO DE JOSÉ JANUÁRIO

Page 40: Programação Visual Para Blogueiros (WordCamp Salvador 2014) - Helton Bezerra

CASADO COM SUZANE

Page 41: Programação Visual Para Blogueiros (WordCamp Salvador 2014) - Helton Bezerra

PAI DE JOÃO MIGUEL...

Page 42: Programação Visual Para Blogueiros (WordCamp Salvador 2014) - Helton Bezerra

FAZ REPAROS EM REDES ELÉTRICAS;

Page 43: Programação Visual Para Blogueiros (WordCamp Salvador 2014) - Helton Bezerra

FAZ TELEMARKETING...

Page 44: Programação Visual Para Blogueiros (WordCamp Salvador 2014) - Helton Bezerra

& RELAXA OUVINDO LED ZEPELIN...

Page 45: Programação Visual Para Blogueiros (WordCamp Salvador 2014) - Helton Bezerra

UM PENSAMENTO

PráVcs

“Tenha coragem para destruir

[quase] tudo que não seja

excelente em sua vida”

Page 47: Programação Visual Para Blogueiros (WordCamp Salvador 2014) - Helton Bezerra