Este documento apresenta uma oficina sobre design mobile, discutindo os principais conceitos e etapas para o desenvolvimento de um aplicativo móvel, incluindo a estruturação do projeto, mapeamento de telas, identificação de dados e diretrizes para iOS e Android.
Engenharia de Usabilidade - Aula 1 de 3 - Pós em Desenvolvimento de Aplicaç...Dhiego Bicudo
Nesta aula explico de forma ilustrada e com uma prototipação prática o desenvolvimento de aplicativos com foco na experiência do usuário e usabilidade para mobile. Aproveite!
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.
Responsive Web Design. Um site, um conteúdo e muitos dispositivosDaniel Afonso
Desenvolver um site de forma que os elementos que o compõem se adaptem automaticamente à largura de tela do dispositivo no qual ele está sendo visualizado. Hoje seus usuários utilizam diversos dispositivos e meios de acesso para encontrar informação. Saiba como podemos entregar informação de forma eficaz e inteligente.
O objetivo deste livro é apresentar a você o mundo do Android de uma forma fácil e rápida, sem muita enrolação.
Hoje em dia, cada vez mais pessoas utilizam o celular para acessar a Internet; o volume é tanto que o acesso à web, por dispositivos móveis, já está quase superando o acesso por computadores tradicionais. Por essa razão, muitas empresas, na área mobile, faturam milhões anualmente desenvolvendo aplicativos próprios e para terceiros.
Com a altíssima demanda por profissionais qualificados e a grande falta destes, começam a aparecer grandes oportunidades para quem quer seguir uma carreira como desenvolvedor Android, seja em grandes empresas ou autônomos.
O livro Android Aprendiz mostra exatamente o marco inicial do caminho a ser percorrido para que você adentre o mundo da plataforma e, num breve futuro, alcance o grau de profissionalismo para aproveitar essas oportunidades. É um conteúdo de qualidade que está focado na criação de sua primeira aplicação Android!
Engenharia de Usabilidade - Aula 1 de 3 - Pós em Desenvolvimento de Aplicaç...Dhiego Bicudo
Nesta aula explico de forma ilustrada e com uma prototipação prática o desenvolvimento de aplicativos com foco na experiência do usuário e usabilidade para mobile. Aproveite!
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.
Responsive Web Design. Um site, um conteúdo e muitos dispositivosDaniel Afonso
Desenvolver um site de forma que os elementos que o compõem se adaptem automaticamente à largura de tela do dispositivo no qual ele está sendo visualizado. Hoje seus usuários utilizam diversos dispositivos e meios de acesso para encontrar informação. Saiba como podemos entregar informação de forma eficaz e inteligente.
O objetivo deste livro é apresentar a você o mundo do Android de uma forma fácil e rápida, sem muita enrolação.
Hoje em dia, cada vez mais pessoas utilizam o celular para acessar a Internet; o volume é tanto que o acesso à web, por dispositivos móveis, já está quase superando o acesso por computadores tradicionais. Por essa razão, muitas empresas, na área mobile, faturam milhões anualmente desenvolvendo aplicativos próprios e para terceiros.
Com a altíssima demanda por profissionais qualificados e a grande falta destes, começam a aparecer grandes oportunidades para quem quer seguir uma carreira como desenvolvedor Android, seja em grandes empresas ou autônomos.
O livro Android Aprendiz mostra exatamente o marco inicial do caminho a ser percorrido para que você adentre o mundo da plataforma e, num breve futuro, alcance o grau de profissionalismo para aproveitar essas oportunidades. É um conteúdo de qualidade que está focado na criação de sua primeira aplicação Android!
Palestra ministrada no dia 26/08/2015 no 7Masters Design Responsivo (setemasters.imasters.com.br/edicoes/design-responsivo/), falando sobre Responsive Design Workflow.
Atualmente, existe a necessidade de que os softwares se apresentem de forma simples e intuitiva, para que uma pessoa que tenha habilidades e experiências comuns possa usufruir deles sem que se sinta frustrada.
Mobile First (ou boas razões para investir em Mobile)Edu Agni
Palestra sobre Mobile First apresentada por Edu Agni para os funcionários do Banco do Brasil, no dia 30 de julho de 2015 em Brasília. O conteúdo da palestra foi dividido em duas partes: a primeira fazendo uma contextualização sobre o universo mobile, e a segunda parte tratando mais especificamente de design e Mobile First.
Assista ao vídeo em https://www.youtube.com/watch?v=XGV55AHTDa4
A criação de produtos e soluções para o mundo dos dispositivos móveis, vai muito além do que o próprio problema que se deseja resolver. É um mundo onde o surgem novas dúvidas, questionamentos e um usuário final extremamente exigente e presente. Sendo assim, o objetivo deste conteúdo é compartilhar experiências na gestão de projetos de desenvolvimento de software no contexto mobile, apresentar a importância do desenvolvimento pensando no usuário final e apresentar questionamentos que devem ser considerados no desenvolvimento.
Estratégias de desenvolvimento de aplicativos para dispositivos móveis em vár...Evandro da Silva Amparo
Apresentação do Trabalho de Conclusão de Curso apresentado ao Curso de Sistemas de informação na Faculdade do Espírito Santo - UNES, como requisito parcial para obtenção do grau de Bacharel em Sistemas de Informação.
Orientador: Prof. Esp. Alexandre Romanelli
Curso de Marketing Digital realizado no Guajajaras Coworking no dia 15 de novembro de 2014. Conceitos básicos de tecnologia para quem entende pouco ou nada de tecnologias digitais para comunicação e marketing.
Inspeção de usabilidade em aplicativos de rede geossocial: estudo comparativo...Mourylise Heymer
What is the efficiency of Apple’s UI Patterns, which documentation is the most detailed and accessible among its competitors, for developing geosocial networking applications? Article presents the results of usability inspection performed in Gowalla and Forsquare proving it’s efficiency.
Review sobre o evento apresentado durante o III Seminário de Tecnologia da Atech #SDTA
Referências:
https://medium.com/uxconfbr/depoimentos-artigos-e-declara%C3%A7%C3%B5es-sobre-a-uxconf-br-2017-8e4174b44c74
https://medium.com/uxconfbr/uxconf-br-2017-a-evolu%C3%A7%C3%A3o-da-experi%C3%AAncia-c1b8b6583348
https://medium.com/@cerasoli/primeiras-impress%C3%B5es-ux-conf-br-2017-dia-1-255c7de85f51
https://brasil.uxdesign.cc/aprendizados-da-uxconf-br-2017-276cc316c84e
iOS x Android x HTML5 x Mobile Site x Windows Phone e BlackBerry... ou tudo j...Soraya Lopes
Apresentação de Soraya Lopes na 5ª edição da Conferência Web W3C Brasil, na trilha "Mercado, modelos de negócio e tecnologias que funcionam".
Conferência Web W3C / São Paulo · 2013
http://conferenciaweb.w3c.br
Trabalho colaborativo na entrega de software - case es na palma da mãoRenzo Colnago
Entregar um produto único, em tempos de dificuldade de recursos financeiros, que permita a definição de um padrão governamental mobile, centrado na experiência do cidadão, independente de plataforma tecnológica de integração e que permita a colaboração da comunidade para que tenhamos liberdade e economicidade na entrega de novos serviços.
Palestra ministrada no dia 26/08/2015 no 7Masters Design Responsivo (setemasters.imasters.com.br/edicoes/design-responsivo/), falando sobre Responsive Design Workflow.
Atualmente, existe a necessidade de que os softwares se apresentem de forma simples e intuitiva, para que uma pessoa que tenha habilidades e experiências comuns possa usufruir deles sem que se sinta frustrada.
Mobile First (ou boas razões para investir em Mobile)Edu Agni
Palestra sobre Mobile First apresentada por Edu Agni para os funcionários do Banco do Brasil, no dia 30 de julho de 2015 em Brasília. O conteúdo da palestra foi dividido em duas partes: a primeira fazendo uma contextualização sobre o universo mobile, e a segunda parte tratando mais especificamente de design e Mobile First.
Assista ao vídeo em https://www.youtube.com/watch?v=XGV55AHTDa4
A criação de produtos e soluções para o mundo dos dispositivos móveis, vai muito além do que o próprio problema que se deseja resolver. É um mundo onde o surgem novas dúvidas, questionamentos e um usuário final extremamente exigente e presente. Sendo assim, o objetivo deste conteúdo é compartilhar experiências na gestão de projetos de desenvolvimento de software no contexto mobile, apresentar a importância do desenvolvimento pensando no usuário final e apresentar questionamentos que devem ser considerados no desenvolvimento.
Estratégias de desenvolvimento de aplicativos para dispositivos móveis em vár...Evandro da Silva Amparo
Apresentação do Trabalho de Conclusão de Curso apresentado ao Curso de Sistemas de informação na Faculdade do Espírito Santo - UNES, como requisito parcial para obtenção do grau de Bacharel em Sistemas de Informação.
Orientador: Prof. Esp. Alexandre Romanelli
Curso de Marketing Digital realizado no Guajajaras Coworking no dia 15 de novembro de 2014. Conceitos básicos de tecnologia para quem entende pouco ou nada de tecnologias digitais para comunicação e marketing.
Inspeção de usabilidade em aplicativos de rede geossocial: estudo comparativo...Mourylise Heymer
What is the efficiency of Apple’s UI Patterns, which documentation is the most detailed and accessible among its competitors, for developing geosocial networking applications? Article presents the results of usability inspection performed in Gowalla and Forsquare proving it’s efficiency.
Review sobre o evento apresentado durante o III Seminário de Tecnologia da Atech #SDTA
Referências:
https://medium.com/uxconfbr/depoimentos-artigos-e-declara%C3%A7%C3%B5es-sobre-a-uxconf-br-2017-8e4174b44c74
https://medium.com/uxconfbr/uxconf-br-2017-a-evolu%C3%A7%C3%A3o-da-experi%C3%AAncia-c1b8b6583348
https://medium.com/@cerasoli/primeiras-impress%C3%B5es-ux-conf-br-2017-dia-1-255c7de85f51
https://brasil.uxdesign.cc/aprendizados-da-uxconf-br-2017-276cc316c84e
iOS x Android x HTML5 x Mobile Site x Windows Phone e BlackBerry... ou tudo j...Soraya Lopes
Apresentação de Soraya Lopes na 5ª edição da Conferência Web W3C Brasil, na trilha "Mercado, modelos de negócio e tecnologias que funcionam".
Conferência Web W3C / São Paulo · 2013
http://conferenciaweb.w3c.br
Trabalho colaborativo na entrega de software - case es na palma da mãoRenzo Colnago
Entregar um produto único, em tempos de dificuldade de recursos financeiros, que permita a definição de um padrão governamental mobile, centrado na experiência do cidadão, independente de plataforma tecnológica de integração e que permita a colaboração da comunidade para que tenhamos liberdade e economicidade na entrega de novos serviços.
Apresentação da wend tecnologia como alcançar o meu cliente (1)
Oficina Quick Start Mobile Design - R Design Recife 2014
1. Não precisa ser assim!
QUICK START
MOBILE DESIGN
Eduardo Roxius
outubro 2014
2. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014
Esse cara sou eu
Roxius
· Graduando em Design na UFPE
· Designer Freelancer
· Estudo Design de Interação
· Interaction Design Foundation
Local Leader (Recife)
3. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014
Por quê?
Único designer na
Tinha experiência em desenhar interfaces,
conhecia as boas práticas mas nunca tinha
realmente “fechado” o design de um aplicativo;
Informações soltas em vários locais;
Meus amigos não souberam responder algumas
dúvidas.
4. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014
O que é?
Case + coletânea de práticas, dicas e tutorial de
como fazer o fechamento das telas para os
desenvolvedores.
17. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014
CHEGA DE AMOSTRAGEM!
Vamos ao que interessa...
Como eu começo o projeto?
18. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014
O DesignMob estrutura um
projeto de design mobile
da seguinte maneira:
1 - Pré-projeto
2 - Estratégia
3 - Escopo
4 - Estrutura
5 - Desenvolvimento
6 - Publicação
http://designmob.com.br/
19. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014
Como o Roxius faz
Briefing
- Objetivos do projeto
- Informações sobre a empresa
- Orçamento disponível
- Público
- Cronograma do projeto
- Definições técnicas
- Tabela de prioridades para as funcionalidades
Pesquisa de concorrência
20. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014
Como o Roxius faz
21. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014
Como o Roxius faz
Site Map / Fluxograma
Site Map
Fluxograma
22. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014
Como o Roxius faz
Site Map / Fluxograma
=
Gestão do projeto
23. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014
Site Map ou Fluxograma?
Site Map ≠ Fluxograma
24. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014
Site Map ou Fluxograma?
Site Map ≠ Fluxograma
Cataloga as seções do
sistema.
É ótimo para ter um
overview (visão geral).
Identifica as interações
sistema-usuário.
Na construção dele você
vai inevitavelmente
complementar o site map.
25. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014
Atividade - Site Map
WhatsApp
26. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014
Diagrama
01
Boas vindas
27. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014
01
Boas vindas
02
Digite o celular
Digite o número do seu celular
OK
28. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014
01
Boas vindas
02
Digite o celular
Digite o número do seu celular
OK
03
...
29. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014
01
Boas vindas
02
Digite o celular
Digite o número do seu celular
OK
03
...
... ... ...
30. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014
20
01
minutos
Boas vindas
02
empresariais
Digite o celular
Digite o número do seu celular
OK
03
...
... ... ...
31. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014
20
minutos
01
empresariais
10
minutos
Boas vindas
02
Digite o celular
Digite o número do seu celular
OK
03
...
... ... ...
32. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014
01
tempo
esgotado
Boas vindas
02
Digite o celular
Digite o número do seu celular
OK
03
...
... ... ...
33. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014
Atividade - dados
Das telas identificadas, visitar todas
as possíveis e identificar os dados
contidos nelas.
34. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014
Atividade - dados
Das telas identificadas, visitar todas
as possíveis e identificar os dados
contidos nelas.
Número da tela: XX
Nome: home/início/tela inicial/chats
Dados identificados:
ícone do whatsapp, chats,
pesquisar, nova mensagem,
whitmans chat, 12:06 PM, Zissou: ...,
“1”
35. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014
Atividade - dados
Das telas identificadas, visitar todas
as possíveis e identificar os dados
contidos nelas.
Número da tela: XX
Nome: home/início/tela inicial/chats
Dados identificados:
ícone do whatsapp, chats,
pesquisar, nova mensagem,
whitmans chat, 12:06 PM, Zissou: ...,
“1”
36. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014
Atividade - dados
Das telas identificadas, visitar todas
as possíveis e identificar os dados
contidos nelas.
Número da tela: XX
Nome: home/início/tela inicial/chats
Dados identificados:
ícone da aplicação, nome da tela, botão
de pesquisa, botão de nova mensagem;
Mensagens - nome do usuário, hora/data
da msg, fragmento da mensagem,
número de mensagens novas
37. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014
Atividade - dados
15
minutos
empresariais
Das telas identificadas, visitar todas
as possíveis e identificar os dados
contidos nelas.
Número da tela: XX
Nome: home/início/tela inicial/chats
Dados identificados:
ícone da aplicação, nome da tela, botão
de pesquisa, botão de nova mensagem;
Mensagens - nome do usuário, hora/data
da msg, fragmento da mensagem,
número de mensagens novas
38. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014
Atividade - dados
15
minutos
empresariais
8 minutos
Das telas identificadas, visitar todas
as possíveis e identificar os dados
contidos nelas.
Número da tela: XX
Nome: home/início/tela inicial/chats
Dados identificados:
ícone da aplicação, nome da tela, botão
de pesquisa, botão de nova mensagem;
Mensagens - nome do usuário, hora/data
da msg, fragmento da mensagem,
número de mensagens novas
39. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014
Atividade - dados
tempo
esgotado
Das telas identificadas, visitar todas
as possíveis e identificar os dados
contidos nelas.
Número da tela: XX
Nome: home/início/tela inicial/chats
Dados identificados:
ícone da aplicação, nome da tela, botão
de pesquisa, botão de nova mensagem;
Mensagens - nome do usuário, hora/data
da msg, fragmento da mensagem,
número de mensagens novas
40. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014
INTERFACES
O que são
Onde vivem?
Do que se alimentam?
41. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014
Interface
Aquilo que interliga dois sistemas.
No nosso caso: humano e computador .
55. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014
Elementos Básicos da UI
1 - Status Bar
2 - Navigation / Main Action Bar
3 - Content
4 - Tab Bar / Action Bar
5 - Navigation Bar
Google:
“Kinvey Mobile Cheatsheet”
56. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014
O que eu tive que procurar
idev101.com
57. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014
O que eu tive que procurar
androidpixels.net
58. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014
O que eu tive que procurar
Tem algumas coisas prontas na internet... mas cuidado!