Aula 2/2 de fundamentos do design ministrada na matéria de Composição e Projeto Visual para alunos de Jornalismo do 2º e 3º semestres na Universidade Paulista, Campus Brasília.
02/2014
Aula 2/2 de fundamentos do design ministrada na matéria de Composição e Projeto Visual para alunos de Jornalismo do 2º e 3º semestres na Universidade Paulista, Campus Brasília.
02/2014
Buscando uma correlação entre as visões de profissionais e estudiosos como Marc Gobé, Beatriz Russo, Paul Hekkert, Patrick Jordan, Bernard Löbach e Donald Normam, procuro mostrar qual a relação do design com o universo das emoções, e como podemos projetar produtos que reflitam boas emoções para os usuários mediante os sentimentos produzidos no seu contato inicial, na sua experiências de utilização e na sua projeção simbólica.
Introdução aexperiência do usuário.
O que é?
O que se faz?
Como se faz?
User Experience é focar o projeto no usuário, entender necessidades e saber conciliar sua satisfação com os objetivos do produto.
Video fashionista:
http://www.youtube.com/watch?v=E1T0egGgc5E
Referências tiradas de:
http://catarinasdesign.com.br
http://www.slideshare.net/guimenga/interface-interao-e-usabilidade
http://www.slideshare.net/fabricioteixeira/ux-design-antes-do-wireframe
http://www.fatdux.com/pt/What/What-is-UX
http://books.google.com.br/books?id=bl0H1cYIzAwC&printsec=frontcover&hl=pt-BR&source=gbs_ge_summary_r&cad=0#v=onepage&q&f=false
UX e UI Design - O que é? Quais as diferenças?Marconi Pacheco
Conheça estas duas áreas, fique por dentro de sua importância, aplicabilidade, áreas de atuação e o que realmente fazem os profissionais de UX e UI. Um contraste com as duas áreas, suas diferenças, semelhanças e como trabalham em conjunto.
Presentation made for an elective course of my PhD at Technical University of Lisbon, regarding the use of digital tools in the product design methodology. @Lisbon, June, 2010.
--
Apresentação feita no âmbito de uma unidade curricular do curso de Doutoramento na FAUTL, tendo como objectivo explicar o uso das ferramentas digitais na metodologia de design de produto. @Lisboa, Junho de 2010.
Buscando uma correlação entre as visões de profissionais e estudiosos como Marc Gobé, Beatriz Russo, Paul Hekkert, Patrick Jordan, Bernard Löbach e Donald Normam, procuro mostrar qual a relação do design com o universo das emoções, e como podemos projetar produtos que reflitam boas emoções para os usuários mediante os sentimentos produzidos no seu contato inicial, na sua experiências de utilização e na sua projeção simbólica.
Introdução aexperiência do usuário.
O que é?
O que se faz?
Como se faz?
User Experience é focar o projeto no usuário, entender necessidades e saber conciliar sua satisfação com os objetivos do produto.
Video fashionista:
http://www.youtube.com/watch?v=E1T0egGgc5E
Referências tiradas de:
http://catarinasdesign.com.br
http://www.slideshare.net/guimenga/interface-interao-e-usabilidade
http://www.slideshare.net/fabricioteixeira/ux-design-antes-do-wireframe
http://www.fatdux.com/pt/What/What-is-UX
http://books.google.com.br/books?id=bl0H1cYIzAwC&printsec=frontcover&hl=pt-BR&source=gbs_ge_summary_r&cad=0#v=onepage&q&f=false
UX e UI Design - O que é? Quais as diferenças?Marconi Pacheco
Conheça estas duas áreas, fique por dentro de sua importância, aplicabilidade, áreas de atuação e o que realmente fazem os profissionais de UX e UI. Um contraste com as duas áreas, suas diferenças, semelhanças e como trabalham em conjunto.
Presentation made for an elective course of my PhD at Technical University of Lisbon, regarding the use of digital tools in the product design methodology. @Lisbon, June, 2010.
--
Apresentação feita no âmbito de uma unidade curricular do curso de Doutoramento na FAUTL, tendo como objectivo explicar o uso das ferramentas digitais na metodologia de design de produto. @Lisboa, Junho de 2010.
Backbone.js + Rails - Front-end e back-end conectadosHenrique Gogó
Como construir aplicações com front-end atualizável em tempo real sem precisar submeter formulário e atualizar a tela à medida que o servidor atualizar. Backbone.js com Ruby on Rails é a casadinha perfeita.
Última aula do primeiro módulo da disciplina Workshops de Projetos de Interação (WPI) da pós graduação em Design de Interação do IEC PUC Minas. A disciplina enfatiza a relação entre o processo de design de interação e o processo de criação de uma startup.
Aula 04 da disciplina Workshops de Projetos de Interação (WPI) da pós graduação em Design de Interação do IEC PUC Minas. A disciplina enfatiza a relação entre o processo de design de interação e o processo de criação de uma startup.
Última aula do primeiro módulo da disciplina Workshops de Projetos de Interação (WPI) da pós graduação em Design de Interação do IEC PUC Minas. A disciplina enfatiza a relação entre o processo de design de interação e o processo de criação de uma startup.
O Phaser é um framework open source para desenvolvimento de jogos em HTML5. Seu foco é criar jogos que rodam em navegadores tanto para mobile quanto para desktops. Nesta palestra vamos compreender recursos úteis para quem deseja aprender a utilizar Phaser para desenvolvimento de games 2D.
> Benefícios para usuários e empresas
Maior facilidade de leitura, com o mínimo de redimensionamento e rolagem horizontal.
Aumenta os níveis de conversão.
Diminui as taxas de rejeição.
Um único site que funciona em Desktop e Mobile.
Reduz custos com manutenção de páginas.
Alcança mais usuários.
Workshop - Design de Interfaces para Dispositivos MóveisDaniel Lugondi
Workshop desenvolvido para a 5ª Semana de Design do Centro Universitário do Norte – UNINORTE em Manaus. O principal objetivo desta ação foi principalmente compartilhar as principais atividades do designer em um time multidisciplinar com foco na produção de interfaces para dispositivos móveis.
Com atividades que mesclaram tanto o viés teórico quanto atividades práticas, os alunos tiveram a oportunidade de verificar por meio das expertises dos palestrantes o mindset necessário a concepção de interfaces, as principais características, diferenças e similaridades entre plataformas, tendências assim como ferramentas que podem subsidiar esse processo criativo.
É necessário uma boa estratégia e preparação para implementar Responsive Design. Na fase de preparação deve-se preparar a estrutura, filtrar requisitos do cliente e apresentar possíveis soluções antes de fazer Design Visual do website.
Teste de Usabilidade Como planejar e executarMarconi Pacheco
Mostrar como o teste de usabilidade é feito, como planejar e executar. Conheça o processo de como conduzir pesquisas de UX e testar os primeiros conceitos. Saiba como aprimorar a experiência do usuário e a interação humano-computador.
Experiências empíricas, mostram que muitas pessoas, não gostam e não sentem prazer em ir a igreja. Agora vamos entender melhor, o quão é importante ir e frequentar uma igreja.
Conheça a profissão front-end.
O que é front-end?
O que o profissional front-end faz?
Principais ferramentas e tecnologias usadas pelo front-end.
HTML - CSS - JavaScript.
Modelo conceitual das etapas do front-end.
Web Designer - Principais Conhecimentos Principais FunçõesMarconi Pacheco
Dividindo a experiência para aqueles que ainda não conhecem os pricipais conhecimentos e as principais funções de um Web Designer, também para os interessados no assunto.
2. Introdução
O objetivo é explicar alguns conceitos e
práticas em design através de imagens.
Exemplificando com imagens algumas áreas
no meio digital e teórico do design. Aqui
usaremos várias analogias que falará um
pouco de cada tópico abordado, além de
textos com explicações simples e objetivas.
“Se uma imagem vale mais do que mil
palavras, então diga isto com uma imagem.”
- Millôr Fernandes
Observação: o design digital é muito mais
do que esses 4 tópicos que aqui iremos
abordar.
Simplificando o Design Digital
Entendendo de forma rápida e direta sobre:
Ui Design (Ui)
Ux Design (Ux)
Arquitetura de informação (Ai)
Sites Responsivos
3. Ui Design
Ui é o design de interface do usuário, é o meio pela qual uma pessoa interage e controla um
dispositivo, software ou aplicativo.
Simplificando o Design Digital
Produto/interface
UI
Experiência
UX
Produto/interface
UI
Experiência
UX
4. Ux Design
UX é Experiência do usuário, é um termo para o nível de satisfação geral dos usuários enquanto
usam o seu produto ou sistema. Em poucas palavras é como você se sente ao usar algo.
Simplificando o Design Digital
Design
Experiência do Usuário
UX
Design
Experiência do Usuário
UX
5. Arquitetura de informação (Ai)
Ai em design é organizar ou transformar o que é complexo ou confuso em algo mais claro. Esquemas de
organização, rotulação, busca e navegação em dispositivo, software ou aplicativo.
Simplificando o Design Digital
Sem Ai
Com Ai
Exemplo de
Organização feito
por cores
7. Sites Responsivos
É um site que consegue responder ao tamanho da tela (mobile ou desktop), adequando-se da melhor
forma. Sua aparência e disposição muda com base no tamanho da tela em que o site é exibido.
Simplificando o Design Digital
Tv
Monitor PC
Notebook
Tablet
na vertical e horizontal
Celular
na vertical e horizontal
8. Sites Responsivos
Simplificando o Design Digital
Conteúdo Monitor
Tablet Celular
Analogias para site
responsivo
Cereais (conteúdo)
Tigela (monitor)
Barra de cereal
(tablete)
Caixinha de Cereais
(celular)
9. Livros sobre Design Digital
Simplificando o Design Digital
Falamos de uma forma rápida sobre o design digital, onde abordamos quatro tópicos: Ui design, Ux
Design, Arquitetura de informação (Ai) e Sites responsivos. O design digital aborda muito mais dos que
foram simplificados aqui e para ampliar melhor os conhecimentos nessa área, recomendo os seguintes
livros em Português (traduções e autores brasileiros):
Não me faça pensar - Steve Krug
Simplificando coisas que parecem complicadas - Steve Krug
O Design do Dia-a-dia - Donald A. Norman
O Guia para Projetar UX - Russ Unger e Carolyn Chandler
Ergodesign e Arquitetura de Informação - Luiz Agner
Design Centrado no Usuário - Travis Lowdermilk
Design Emocional - Donald A. Norman
Design de Interação - Helen Sharp, Jennifer Preece, Yvonne Rogers
Princípios do Web Design Maravilhoso - Jason Beaird
Avaliação e Projeto no Design de Interfaces - José Guilherme Santa Rosa, Anamaria de Moraes
Design para Internet - Felipe Memória
11. Lowdermilk, Travis. Design Centrado no Usuário: Um guia para o desenvolvimento de aplicativos amigáveis. São Paulo: Novatec
Editora, 2013.
http://mariovalney.com/afinal-o-que-e-ux-user-experience/ (2016)
https://www.youtube.com/watch?time_continue=74&v=-L4gEk7cOfk (2016)
http://www.fatdux.com/pt/what/what-is-ux (2016)
http://www.designculture.com.br/o-que-e-ui-design-e-ux-design (2016)
http://pt.slideshare.net/marconidesenhos/arquitetura-de-informao-para-interface-digital (2016)
http://pt.slideshare.net/marconidesenhos/site-responsivo-vantagens-e-desvantagens (2016)
http://pt.slideshare.net/agenciamateada/arquitetura-de-informacao-agenciamateada-26022641 (2016)
http://www.comersite.com.br/sites-responsivos-o-que-sao-eu-preciso-de-um (2016)
https://www.argohost.net/blog/saiba-como-funciona-um-servico-de-hospedagem-de-sites/ (2016)
http://www.lucrei.com/hospedagem-de-sites-como-funciona/ (2016)
http://www.uxdesign.blog.br/user-experience/ux-por-onde-comecar/ (2016)
Referências
Simplificando o Design Digital
12. Slide 03 – https://goo.gl/O4shtM | http://goo.gl/0U7hXq
Slide 04 – http://goo.gl/NmQCmb | https://goo.gl/zQMMr3
Slide 05 – https://goo.gl/4u6A6X
Slide 06 – https://goo.gl/x9hX8G | http://goo.gl/D5Xmlc
Slide 07 – http://goo.gl/v7SpX8
Slide 08 – http://goo.gl/p3QST4
Lista de Figuras
Simplificando o Design Digital
13. Marconi A. Pacheco
Bacharel em Design
Designer e desenvolvedor front-end. Apaixonado
por cinema, literatura, quadrinhos e ilustrações.
twitter.com/marconidesenhos
linkedin.com/pub/marconi-ap/37/472/405
instagram.com/marconidesenhos
Simplificando o Design Digital