http://wiki.mstech.com.br/api.php?action=feedcontributions&feedformat=atom&user=Danilo.pontechelleMSTECH wiki - Contribuições do usuário [pt-br]2026-05-07T14:18:50ZContribuições do usuárioMediaWiki 1.26.2http://wiki.mstech.com.br/index.php?title=Trilha_UX_Design&diff=1505Trilha UX Design2016-07-18T14:27:00Z<p>Danilo.pontechelle: </p>
<hr />
<div>'''01. Designers devem programar?'''<br />
<br />
Victor Santos <br />
<br />
O palestrante levantou a polêmica discussão que aflige o meio dos designers: eles devem escrever códigos HTML/CSS ou apenas conceber telas?<br />
A partir de exemplos práticos da aplicação do código em interfaces produzidas por ele mesmo na empresa em que atua, a Contabilizei, ele nos mostra como pode ser dinâmico esta forma de desenvolvimento juntamente com as equipes de desenvolvimento. Cita um caso, também, da melhora no engajamento e prospecção de novos usuários para a plataforma Contabilizei através de um estudo simples de UX, melhorando o acesso em 188% e aumentando em 51% a conversão de novos clientes.<br />
A preocupação da empresa com UX, Growth, Inbound Marketing & SEO garantiu um aumento em seu faturamento de 700%.<br />
Material<br />
http://pt.slideshare.net/VictorFerreiraSantos/designers-devem-programar-trilha-ux-design-the-developers-conference-2016<br />
<br />
'''02. Guia de sobrevivência para designers em um time de desenvolvedores'''<br />
<br />
Lívia Amorim<br />
<br />
A palestrante coloca em discussão a metodologia ágil em detrimento aos processos de UX, afirmando que são conflitivas, pois, a primeira prioriza a entrega rápida com foco nas funções, enquanto UX foca o usuário final e pesquisa. A partir de exemplos praticados em sua empresa, mostrou que é preciso chegar em um meio termo, onde a entrega pode ser rápida, mas os estudos de UX e pesquisas com usuários são primordiais para garantir a qualidade do produto e um faturamento maior para a empresa.<br />
<br />
https://speakerdeck.com/liviamorim/guia-de-sobrevivencia-para-designers-em-um-time-de-desenvolvedores<br />
<br />
'''03. Através do espelho: por que desenvolvedores não gostam de testes de usabilidade?'''<br />
<br />
Ana Coli<br />
<br />
A palestrante coloca em pauta a questão dos testes de usabilidade dos produtos desenvolvidos e a importância de engajar todos de uma empresa, incluindo os desenvolvedores, que muitas vezes estão focados apenas com entrega e não possuem engajamento com outras equipes.<br />
Cita que para estabelecer um teste de usabilidade é preciso:<br />
- Planejamento: definição do problema a ser resolvido, discussões, envolvimento de equipes;<br />
- Execução: recrutamento de pessoas que serão engajadas com o teste, bem como a definição real de quem é o público-alvo e a construção de um roteiro para aplica-lo com os mesmos;<br />
- Resultados: ambiente definido para que o moderador possa efetuar o processo com o entrevistado que, por muitas vezes, deve ser realizada através de uma sala de ‘espelho’, onde outras pessoas estarão acompanhando nos bastidores o que está ocorrendo com o teste prático.<br />
<br />
'''04. UX influenciando decisões de negócio'''<br />
<br />
Gustavo Oliveira<br />
<br />
O palestrante mostra as vantagens da criação de um setor específico de UX na empresa TOTVS e relatou um case de como conseguiu melhorar um produto através de metodologias que consistem de pesquisa que foram desde os stakeholders da empresa até o usuário final. A otimização da ferramenta, após 3 meses de trabalho e pesquisa, proporcionou grandes resultados e lucro não só para a TOTVS mas também para seus clientes.<br />
<br />
'''05. Designing for Trust - Fazendo o usuário confiar no seu produto'''<br />
<br />
Guilherme Verdasca / Luciana H Terceiro<br />
<br />
A palestra, como define o tema, mostra como empresas estão prospectando e engajando usuários através de uma política de transparência e confiança. Citou-se empresas como UBER, Netflix, AIRBNB, Pag Seguro, Conta Azul, Nubank e a importância de garantir ao usuário uma experiência bem elaborada para que o marketing possa ocorrer a nível boca-a-boca e, assim, deixando a marca fortalecida e conhecida no mercado.<br />
<br />
'''06. Como Designer e PM podem trabalhar em sincronia, sem confusão de papéis e entregando sucesso para o cliente.'''<br />
<br />
Raphael Farinazzo / Glauco Cardoso de Oliveira<br />
<br />
Foi abordado todas as técnicas de marketing para a prospecção de novos clientes: Roadmap, Pres-release, Adoption, Retention, Customer Success, UX (Design & Prototipagem, alinhamentos do designers junto com desenvolvedores), Usabilidade e Problem Solution Fit. Afirma que os papéis de designer e UX devem ser bem separados, onde o primeiro deve cuidar da construção prática, enquanto o último deve preocupar-se com pesquisa e planejamento.<br />
<br />
'''07. Como vencer a barreira do engajamento inicial de novos usuários e conquistar mais clientes'''<br />
<br />
Júlia Ghisi<br />
<br />
A palestrante comenta sobre a necessidade de estarmos à frente da concorrência partindo do Customer Experience, onde deve ser planejado todos os pontos de contato com o usuários na jornada em que é feita até a compra do produto. É preciso uma análise detalhada para poder atrair e converter clientes em potencial e uma das técnicas utilizadas é o estudo detalhado de UX e a transparência para com o usuário.<br />
<br />
'''08. IBM Studios: conhecendo nossos usuários para criar experiências disruptivas envolvendo IoT'''<br />
<br />
Adilson Chicória / Thiago Barcelos<br />
A palestra aborda como foi a criação de um time multidisciplinar de UX na empresa IBM, onde colocou todas as equipes, incluindo desenvolvedores, para efetuar pesquisas internas juntamente com aplicação de conceitos de Design Thinking, a fim de obter um produto novo e/ou melhorias em produtos já existentes. O produto final foi a construção de salas de reuniões inteligentes, onde faz um auto-checkin ao entrar na sala, por meio de tecnologia de sensores, que são disparados para o sistema da empresa onde todos poderão consultar em tempo real.<br />
<br />
'''09. Mensurando a Experiência do Usuário ( A Importância dos Dados para UX )'''<br />
<br />
Huxley Dias<br />
<br />
O palestrante mostra a importância de se obter dados através da aplicação prática de UX em uma empresa, como argumento para a sua visibilidade aos stakeholders e diretores. Cita métodos de KPIs, pesquisas e ferramentas como google analytics, hotjar e adobe analytics.<br />
<br />
'''10. Vou mensurar a UX, e agora?'''<br />
<br />
Christian Spilhere<br />
<br />
Assim como na palestra anterior, foi abordado a questão de como provar aos empresários a importância do UX em uma empresa e como isso pode aumentar o faturamento da mesma. Para isso é preciso um diálogo embasado em métricas KPIs retiradas de ferramentas como google analytics, woopra, el tracker, hotjar e optmizely.<br />
<br />
'''11. Do Protótipo ao Produto: Técnicas que Fazem Sentido'''<br />
<br />
Barbara Wolff Dick<br />
http://www.slideshare.net/barbarawolffdick/do-prottipo-ao-produto-tcnicas-que-fazem-sentido-63753917<br />
<br />
Abordou-se a importância da construção de uma biblioteca que funciona como guideline para a empresa e ferramentas que facilitam este trabalho como styleguides.io.<br />
<br />
'''12. Menos telas, mais soluções! A união de IoT com UX por produtos mais úteis'''<br />
<br />
Rodrigo Roncaglio<br />
<br />
Levantou-se o questionamento filosófico de que um bom produto não deve possuir interface e deve estar inserido no cotidiano do usuário sem que ele perceba. Um exemplo prático foi o de portas inteligentes que possuem sensores que só abrem ao usuário quando ele chega perto, com seu celular no bolso, efetuando, assim, o seu desbloqueio sem que o mesmo perceba que há esse processo de interação entre sistemas.<br />
<br />
'''13. O Futuro das Interfaces: da Zero UI às Interfaces Hepáticas'''<br />
<br />
Alessandra Rosa<br />
http://www.slideshare.net/AlessandraPeguimRosa/o-futuro-das-interfaces-zero-ui-e-interfaces-hpticas<br />
<br />
A palestrante aborda, de uma maneira filosófica, o surgimento de novas tecnologias como holografia e como isso impactará o trabalho do designer para projetar soluções práticas para as mesmas.<br />
<br />
'''14. A evolução do nível de maturidade em relação a UX em uma startup'''<br />
<br />
Simone Beltrame<br />
http://www.slideshare.net/SiBeltrame/palestra-a-evolucao-do-nivel-de-maturidade-da-ux-em-uma-startup<br />
<br />
A palestrante aborda como foi a construção do time de UX na empresa Resultados Digitais, levando em consideração todas as dificuldades iniciais para provar ao CEO a importância deste tipo de atividade e o resultados obtidos após a aplicação das metodologias e pesquisas feitas com os usuários.<br />
<br />
'''15. Building UX Design Process in Startups and Tech'''<br />
<br />
Juscieldo Lavi / Danilo Oliveira<br />
<br />
Os palestrantes mostram como e porque foi criado um departamento de UX na empresa OLX e como conseguiram mais resultados por meio de processos de pesquisas, definição de personas, store mapping, road map e construção de novos fluxos de trabalho.<br />
<br />
'''16. Inserindo métricas no processo de design de produto'''<br />
<br />
Willian Sertório<br />
<br />
Assim como nas palestras anteriores, abordou-se a importância de levar dados e métricas para uma discussão com empresários, a fim de mostrar a importância do UX em seus negócios.<br />
<br />
'''17. Time de UX - separado e produtivo :0'''<br />
<br />
Nasser Said<br />
<br />
O palestrante conta a sua trajetória de liderança do time de UX na empresa youse, e como conseguiu transformar o ambiente de trabalho em algo mais produtivo para todos, garantindo o sucesso do produto final.<br />
<br />
'''18. UX como plataforma'''<br />
<br />
Cynthia Zanoni<br />
<br />
Discuti-se as novas tecnologias que estão surgindo no mercado e como isso deve impactar na remoção total de interfaces, deixando a interação do usuário com suas necessidades feitas através de dispositivos e sensores.<br />
<br />
'''19. A evolução do UX nas empresas (e como promovê-la)'''<br />
<br />
Luciana H Terceiro / Diogo Cavalcanti Cosentino<br />
http://pt.slideshare.net/DiogoCosentino/a-evoluo-do-ux-nas-empresas-e-como-promovla<br />
<br />
Nesta palestra foi discutido que UX não consiste apenas em fluxos, wireframes e mockups, e sim o engajamento de todos os setores da empresa. Primeiro é preciso convencer a todos da importância do UX e depois adotá-lo como cultura a fim de otimizar os produtos e a experiência em si para os usuários.</div>Danilo.pontechellehttp://wiki.mstech.com.br/index.php?title=Trilha_UX_Design&diff=1504Trilha UX Design2016-07-18T14:25:50Z<p>Danilo.pontechelle: </p>
<hr />
<div>'''01. Designers devem programar?'''<br />
<br />
Victor Santos <br />
<br />
O palestrante levantou a polêmica discussão que aflige o meio dos designers: eles devem escrever códigos HTML/CSS ou apenas conceber telas?<br />
A partir de exemplos práticos da aplicação do código em interfaces produzidas por ele mesmo na empresa em que atua, a Contabilizei, ele nos mostra como pode ser dinâmico esta forma de desenvolvimento juntamente com as equipes de desenvolvimento. Cita um caso, também, da melhora no engajamento e prospecção de novos usuários para a plataforma Contabilizei através de um estudo simples de UX, melhorando o acesso em 188% e aumentando em 51% a conversão de novos clientes.<br />
A preocupação da empresa com UX, Growth, Inbound Marketing & SEO garantiu um aumento em seu faturamento de 700%.<br />
Material<br />
http://pt.slideshare.net/VictorFerreiraSantos/designers-devem-programar-trilha-ux-design-the-developers-conference-2016<br />
<br />
'''02. Guia de sobrevivência para designers em um time de desenvolvedores'''<br />
Lívia Amorim<br />
<br />
A palestrante coloca em discussão a metodologia ágil em detrimento aos processos de UX, afirmando que são conflitivas, pois, a primeira prioriza a entrega rápida com foco nas funções, enquanto UX foca o usuário final e pesquisa. A partir de exemplos praticados em sua empresa, mostrou que é preciso chegar em um meio termo, onde a entrega pode ser rápida, mas os estudos de UX e pesquisas com usuários são primordiais para garantir a qualidade do produto e um faturamento maior para a empresa.<br />
<br />
https://speakerdeck.com/liviamorim/guia-de-sobrevivencia-para-designers-em-um-time-de-desenvolvedores<br />
'''<br />
03. Através do espelho: por que desenvolvedores não gostam de testes de usabilidade?'''<br />
Ana Coli<br />
<br />
A palestrante coloca em pauta a questão dos testes de usabilidade dos produtos desenvolvidos e a importância de engajar todos de uma empresa, incluindo os desenvolvedores, que muitas vezes estão focados apenas com entrega e não possuem engajamento com outras equipes.<br />
Cita que para estabelecer um teste de usabilidade é preciso:<br />
- Planejamento: definição do problema a ser resolvido, discussões, envolvimento de equipes;<br />
- Execução: recrutamento de pessoas que serão engajadas com o teste, bem como a definição real de quem é o público-alvo e a construção de um roteiro para aplica-lo com os mesmos;<br />
- Resultados: ambiente definido para que o moderador possa efetuar o processo com o entrevistado que, por muitas vezes, deve ser realizada através de uma sala de ‘espelho’, onde outras pessoas estarão acompanhando nos bastidores o que está ocorrendo com o teste prático.<br />
<br />
'''04. UX influenciando decisões de negócio'''<br />
Gustavo Oliveira<br />
<br />
O palestrante mostra as vantagens da criação de um setor específico de UX na empresa TOTVS e relatou um case de como conseguiu melhorar um produto através de metodologias que consistem de pesquisa que foram desde os stakeholders da empresa até o usuário final. A otimização da ferramenta, após 3 meses de trabalho e pesquisa, proporcionou grandes resultados e lucro não só para a TOTVS mas também para seus clientes.<br />
<br />
'''05. Designing for Trust - Fazendo o usuário confiar no seu produto'''<br />
Guilherme Verdasca / Luciana H Terceiro<br />
<br />
A palestra, como define o tema, mostra como empresas estão prospectando e engajando usuários através de uma política de transparência e confiança. Citou-se empresas como UBER, Netflix, AIRBNB, Pag Seguro, Conta Azul, Nubank e a importância de garantir ao usuário uma experiência bem elaborada para que o marketing possa ocorrer a nível boca-a-boca e, assim, deixando a marca fortalecida e conhecida no mercado.<br />
<br />
'''06. Como Designer e PM podem trabalhar em sincronia, sem confusão de papéis e entregando sucesso para o cliente.'''<br />
Raphael Farinazzo / Glauco Cardoso de Oliveira<br />
<br />
Foi abordado todas as técnicas de marketing para a prospecção de novos clientes: Roadmap, Pres-release, Adoption, Retention, Customer Success, UX (Design & Prototipagem, alinhamentos do designers junto com desenvolvedores), Usabilidade e Problem Solution Fit. Afirma que os papéis de designer e UX devem ser bem separados, onde o primeiro deve cuidar da construção prática, enquanto o último deve preocupar-se com pesquisa e planejamento.<br />
<br />
'''07. Como vencer a barreira do engajamento inicial de novos usuários e conquistar mais clientes'''<br />
Júlia Ghisi<br />
<br />
A palestrante comenta sobre a necessidade de estarmos à frente da concorrência partindo do Customer Experience, onde deve ser planejado todos os pontos de contato com o usuários na jornada em que é feita até a compra do produto. É preciso uma análise detalhada para poder atrair e converter clientes em potencial e uma das técnicas utilizadas é o estudo detalhado de UX e a transparência para com o usuário.<br />
<br />
'''08. IBM Studios: conhecendo nossos usuários para criar experiências disruptivas envolvendo IoT'''<br />
Adilson Chicória / Thiago Barcelos<br />
A palestra aborda como foi a criação de um time multidisciplinar de UX na empresa IBM, onde colocou todas as equipes, incluindo desenvolvedores, para efetuar pesquisas internas juntamente com aplicação de conceitos de Design Thinking, a fim de obter um produto novo e/ou melhorias em produtos já existentes. O produto final foi a construção de salas de reuniões inteligentes, onde faz um auto-checkin ao entrar na sala, por meio de tecnologia de sensores, que são disparados para o sistema da empresa onde todos poderão consultar em tempo real.<br />
<br />
'''09. Mensurando a Experiência do Usuário ( A Importância dos Dados para UX )'''<br />
Huxley Dias<br />
<br />
O palestrante mostra a importância de se obter dados através da aplicação prática de UX em uma empresa, como argumento para a sua visibilidade aos stakeholders e diretores. Cita métodos de KPIs, pesquisas e ferramentas como google analytics, hotjar e adobe analytics.<br />
<br />
'''10. Vou mensurar a UX, e agora?'''<br />
Christian Spilhere<br />
<br />
Assim como na palestra anterior, foi abordado a questão de como provar aos empresários a importância do UX em uma empresa e como isso pode aumentar o faturamento da mesma. Para isso é preciso um diálogo embasado em métricas KPIs retiradas de ferramentas como google analytics, woopra, el tracker, hotjar e optmizely.<br />
<br />
'''11. Do Protótipo ao Produto: Técnicas que Fazem Sentido'''<br />
Barbara Wolff Dick<br />
http://www.slideshare.net/barbarawolffdick/do-prottipo-ao-produto-tcnicas-que-fazem-sentido-63753917<br />
<br />
Abordou-se a importância da construção de uma biblioteca que funciona como guideline para a empresa e ferramentas que facilitam este trabalho como styleguides.io.<br />
<br />
'''12. Menos telas, mais soluções! A união de IoT com UX por produtos mais úteis'''<br />
Rodrigo Roncaglio<br />
<br />
Levantou-se o questionamento filosófico de que um bom produto não deve possuir interface e deve estar inserido no cotidiano do usuário sem que ele perceba. Um exemplo prático foi o de portas inteligentes que possuem sensores que só abrem ao usuário quando ele chega perto, com seu celular no bolso, efetuando, assim, o seu desbloqueio sem que o mesmo perceba que há esse processo de interação entre sistemas.<br />
<br />
'''13. O Futuro das Interfaces: da Zero UI às Interfaces Hepáticas'''<br />
Alessandra Rosa<br />
http://www.slideshare.net/AlessandraPeguimRosa/o-futuro-das-interfaces-zero-ui-e-interfaces-hpticas<br />
<br />
A palestrante aborda, de uma maneira filosófica, o surgimento de novas tecnologias como holografia e como isso impactará o trabalho do designer para projetar soluções práticas para as mesmas.<br />
<br />
'''14. A evolução do nível de maturidade em relação a UX em uma startup'''<br />
Simone Beltrame<br />
http://www.slideshare.net/SiBeltrame/palestra-a-evolucao-do-nivel-de-maturidade-da-ux-em-uma-startup<br />
<br />
A palestrante aborda como foi a construção do time de UX na empresa Resultados Digitais, levando em consideração todas as dificuldades iniciais para provar ao CEO a importância deste tipo de atividade e o resultados obtidos após a aplicação das metodologias e pesquisas feitas com os usuários.<br />
<br />
'''15. Building UX Design Process in Startups and Tech'''<br />
Juscieldo Lavi / Danilo Oliveira<br />
<br />
Os palestrantes mostram como e porque foi criado um departamento de UX na empresa OLX e como conseguiram mais resultados por meio de processos de pesquisas, definição de personas, store mapping, road map e construção de novos fluxos de trabalho.<br />
<br />
'''16. Inserindo métricas no processo de design de produto'''<br />
Willian Sertório<br />
<br />
Assim como nas palestras anteriores, abordou-se a importância de levar dados e métricas para uma discussão com empresários, a fim de mostrar a importância do UX em seus negócios.<br />
<br />
'''17. Time de UX - separado e produtivo :0'''<br />
Nasser Said<br />
<br />
O palestrante conta a sua trajetória de liderança do time de UX na empresa youse, e como conseguiu transformar o ambiente de trabalho em algo mais produtivo para todos, garantindo o sucesso do produto final.<br />
<br />
'''18. UX como plataforma'''<br />
Cynthia Zanoni<br />
<br />
Discuti-se as novas tecnologias que estão surgindo no mercado e como isso deve impactar na remoção total de interfaces, deixando a interação do usuário com suas necessidades feitas através de dispositivos e sensores.<br />
<br />
'''19. A evolução do UX nas empresas (e como promovê-la)'''<br />
Luciana H Terceiro / Diogo Cavalcanti Cosentino<br />
http://pt.slideshare.net/DiogoCosentino/a-evoluo-do-ux-nas-empresas-e-como-promovla<br />
<br />
Nesta palestra foi discutido que UX não consiste apenas em fluxos, wireframes e mockups, e sim o engajamento de todos os setores da empresa. Primeiro é preciso convencer a todos da importância do UX e depois adotá-lo como cultura a fim de otimizar os produtos e a experiência em si para os usuários.</div>Danilo.pontechellehttp://wiki.mstech.com.br/index.php?title=Trilha_UX_Design&diff=1503Trilha UX Design2016-07-18T14:24:22Z<p>Danilo.pontechelle: </p>
<hr />
<div><br />
== <br />
01. Designers devem programar? ==<br />
<br />
Victor Santos <br />
<br />
O palestrante levantou a polêmica discussão que aflige o meio dos designers: eles devem escrever códigos HTML/CSS ou apenas conceber telas?<br />
A partir de exemplos práticos da aplicação do código em interfaces produzidas por ele mesmo na empresa em que atua, a Contabilizei, ele nos mostra como pode ser dinâmico esta forma de desenvolvimento juntamente com as equipes de desenvolvimento. Cita um caso, também, da melhora no engajamento e prospecção de novos usuários para a plataforma Contabilizei através de um estudo simples de UX, melhorando o acesso em 188% e aumentando em 51% a conversão de novos clientes.<br />
A preocupação da empresa com UX, Growth, Inbound Marketing & SEO garantiu um aumento em seu faturamento de 700%.<br />
Material<br />
http://pt.slideshare.net/VictorFerreiraSantos/designers-devem-programar-trilha-ux-design-the-developers-conference-2016<br />
<br />
02. Guia de sobrevivência para designers em um time de desenvolvedores<br />
Lívia Amorim<br />
<br />
A palestrante coloca em discussão a metodologia ágil em detrimento aos processos de UX, afirmando que são conflitivas, pois, a primeira prioriza a entrega rápida com foco nas funções, enquanto UX foca o usuário final e pesquisa. A partir de exemplos praticados em sua empresa, mostrou que é preciso chegar em um meio termo, onde a entrega pode ser rápida, mas os estudos de UX e pesquisas com usuários são primordiais para garantir a qualidade do produto e um faturamento maior para a empresa.<br />
<br />
https://speakerdeck.com/liviamorim/guia-de-sobrevivencia-para-designers-em-um-time-de-desenvolvedores<br />
<br />
03. Através do espelho: por que desenvolvedores não gostam de testes de usabilidade?<br />
Ana Coli<br />
<br />
A palestrante coloca em pauta a questão dos testes de usabilidade dos produtos desenvolvidos e a importância de engajar todos de uma empresa, incluindo os desenvolvedores, que muitas vezes estão focados apenas com entrega e não possuem engajamento com outras equipes.<br />
Cita que para estabelecer um teste de usabilidade é preciso:<br />
- Planejamento: definição do problema a ser resolvido, discussões, envolvimento de equipes;<br />
- Execução: recrutamento de pessoas que serão engajadas com o teste, bem como a definição real de quem é o público-alvo e a construção de um roteiro para aplica-lo com os mesmos;<br />
- Resultados: ambiente definido para que o moderador possa efetuar o processo com o entrevistado que, por muitas vezes, deve ser realizada através de uma sala de ‘espelho’, onde outras pessoas estarão acompanhando nos bastidores o que está ocorrendo com o teste prático.<br />
<br />
04. UX influenciando decisões de negócio<br />
Gustavo Oliveira<br />
<br />
O palestrante mostra as vantagens da criação de um setor específico de UX na empresa TOTVS e relatou um case de como conseguiu melhorar um produto através de metodologias que consistem de pesquisa que foram desde os stakeholders da empresa até o usuário final. A otimização da ferramenta, após 3 meses de trabalho e pesquisa, proporcionou grandes resultados e lucro não só para a TOTVS mas também para seus clientes.<br />
<br />
05. Designing for Trust - Fazendo o usuário confiar no seu produto<br />
Guilherme Verdasca / Luciana H Terceiro<br />
<br />
A palestra, como define o tema, mostra como empresas estão prospectando e engajando usuários através de uma política de transparência e confiança. Citou-se empresas como UBER, Netflix, AIRBNB, Pag Seguro, Conta Azul, Nubank e a importância de garantir ao usuário uma experiência bem elaborada para que o marketing possa ocorrer a nível boca-a-boca e, assim, deixando a marca fortalecida e conhecida no mercado.<br />
<br />
06. Como Designer e PM podem trabalhar em sincronia, sem confusão de papéis e entregando sucesso para o cliente.<br />
Raphael Farinazzo / Glauco Cardoso de Oliveira<br />
<br />
Foi abordado todas as técnicas de marketing para a prospecção de novos clientes: Roadmap, Pres-release, Adoption, Retention, Customer Success, UX (Design & Prototipagem, alinhamentos do designers junto com desenvolvedores), Usabilidade e Problem Solution Fit. Afirma que os papéis de designer e UX devem ser bem separados, onde o primeiro deve cuidar da construção prática, enquanto o último deve preocupar-se com pesquisa e planejamento.<br />
<br />
07. Como vencer a barreira do engajamento inicial de novos usuários e conquistar mais clientes<br />
Júlia Ghisi<br />
<br />
A palestrante comenta sobre a necessidade de estarmos à frente da concorrência partindo do Customer Experience, onde deve ser planejado todos os pontos de contato com o usuários na jornada em que é feita até a compra do produto. É preciso uma análise detalhada para poder atrair e converter clientes em potencial e uma das técnicas utilizadas é o estudo detalhado de UX e a transparência para com o usuário.<br />
<br />
08. IBM Studios: conhecendo nossos usuários para criar experiências disruptivas envolvendo IoT<br />
Adilson Chicória / Thiago Barcelos<br />
A palestra aborda como foi a criação de um time multidisciplinar de UX na empresa IBM, onde colocou todas as equipes, incluindo desenvolvedores, para efetuar pesquisas internas juntamente com aplicação de conceitos de Design Thinking, a fim de obter um produto novo e/ou melhorias em produtos já existentes. O produto final foi a construção de salas de reuniões inteligentes, onde faz um auto-checkin ao entrar na sala, por meio de tecnologia de sensores, que são disparados para o sistema da empresa onde todos poderão consultar em tempo real.<br />
<br />
09. Mensurando a Experiência do Usuário ( A Importância dos Dados para UX )<br />
Huxley Dias<br />
<br />
O palestrante mostra a importância de se obter dados através da aplicação prática de UX em uma empresa, como argumento para a sua visibilidade aos stakeholders e diretores. Cita métodos de KPIs, pesquisas e ferramentas como google analytics, hotjar e adobe analytics.<br />
<br />
10. Vou mensurar a UX, e agora?<br />
Christian Spilhere<br />
<br />
Assim como na palestra anterior, foi abordado a questão de como provar aos empresários a importância do UX em uma empresa e como isso pode aumentar o faturamento da mesma. Para isso é preciso um diálogo embasado em métricas KPIs retiradas de ferramentas como google analytics, woopra, el tracker, hotjar e optmizely.<br />
<br />
11. Do Protótipo ao Produto: Técnicas que Fazem Sentido<br />
Barbara Wolff Dick<br />
http://www.slideshare.net/barbarawolffdick/do-prottipo-ao-produto-tcnicas-que-fazem-sentido-63753917<br />
<br />
Abordou-se a importância da construção de uma biblioteca que funciona como guideline para a empresa e ferramentas que facilitam este trabalho como styleguides.io.<br />
<br />
12. Menos telas, mais soluções! A união de IoT com UX por produtos mais úteis<br />
Rodrigo Roncaglio<br />
<br />
Levantou-se o questionamento filosófico de que um bom produto não deve possuir interface e deve estar inserido no cotidiano do usuário sem que ele perceba. Um exemplo prático foi o de portas inteligentes que possuem sensores que só abrem ao usuário quando ele chega perto, com seu celular no bolso, efetuando, assim, o seu desbloqueio sem que o mesmo perceba que há esse processo de interação entre sistemas.<br />
<br />
13. O Futuro das Interfaces: da Zero UI às Interfaces Hepáticas<br />
Alessandra Rosa<br />
http://www.slideshare.net/AlessandraPeguimRosa/o-futuro-das-interfaces-zero-ui-e-interfaces-hpticas<br />
<br />
A palestrante aborda, de uma maneira filosófica, o surgimento de novas tecnologias como holografia e como isso impactará o trabalho do designer para projetar soluções práticas para as mesmas.<br />
<br />
14. A evolução do nível de maturidade em relação a UX em uma startup<br />
Simone Beltrame<br />
http://www.slideshare.net/SiBeltrame/palestra-a-evolucao-do-nivel-de-maturidade-da-ux-em-uma-startup<br />
<br />
A palestrante aborda como foi a construção do time de UX na empresa Resultados Digitais, levando em consideração todas as dificuldades iniciais para provar ao CEO a importância deste tipo de atividade e o resultados obtidos após a aplicação das metodologias e pesquisas feitas com os usuários.<br />
<br />
15. Building UX Design Process in Startups and Tech<br />
Juscieldo Lavi / Danilo Oliveira<br />
<br />
Os palestrantes mostram como e porque foi criado um departamento de UX na empresa OLX e como conseguiram mais resultados por meio de processos de pesquisas, definição de personas, store mapping, road map e construção de novos fluxos de trabalho.<br />
<br />
16. Inserindo métricas no processo de design de produto<br />
Willian Sertório<br />
<br />
Assim como nas palestras anteriores, abordou-se a importância de levar dados e métricas para uma discussão com empresários, a fim de mostrar a importância do UX em seus negócios.<br />
<br />
17. Time de UX - separado e produtivo :0<br />
Nasser Said<br />
<br />
O palestrante conta a sua trajetória de liderança do time de UX na empresa youse, e como conseguiu transformar o ambiente de trabalho em algo mais produtivo para todos, garantindo o sucesso do produto final.<br />
<br />
18. UX como plataforma<br />
Cynthia Zanoni<br />
<br />
Discuti-se as novas tecnologias que estão surgindo no mercado e como isso deve impactar na remoção total de interfaces, deixando a interação do usuário com suas necessidades feitas através de dispositivos e sensores.<br />
<br />
19. A evolução do UX nas empresas (e como promovê-la)<br />
Luciana H Terceiro / Diogo Cavalcanti Cosentino<br />
http://pt.slideshare.net/DiogoCosentino/a-evoluo-do-ux-nas-empresas-e-como-promovla<br />
<br />
Nesta palestra foi discutido que UX não consiste apenas em fluxos, wireframes e mockups, e sim o engajamento de todos os setores da empresa. Primeiro é preciso convencer a todos da importância do UX e depois adotá-lo como cultura a fim de otimizar os produtos e a experiência em si para os usuários.</div>Danilo.pontechellehttp://wiki.mstech.com.br/index.php?title=Trilha_UX_Design&diff=1502Trilha UX Design2016-07-18T14:23:57Z<p>Danilo.pontechelle: Criou página com ' 01. Designers devem programar? Victor Santos O palestrante levantou a polêmica discussão que aflige o meio dos designers: eles devem escrever códigos HTML/CSS ou apenas...'</p>
<hr />
<div><br />
01. Designers devem programar?<br />
Victor Santos <br />
<br />
O palestrante levantou a polêmica discussão que aflige o meio dos designers: eles devem escrever códigos HTML/CSS ou apenas conceber telas?<br />
A partir de exemplos práticos da aplicação do código em interfaces produzidas por ele mesmo na empresa em que atua, a Contabilizei, ele nos mostra como pode ser dinâmico esta forma de desenvolvimento juntamente com as equipes de desenvolvimento. Cita um caso, também, da melhora no engajamento e prospecção de novos usuários para a plataforma Contabilizei através de um estudo simples de UX, melhorando o acesso em 188% e aumentando em 51% a conversão de novos clientes.<br />
A preocupação da empresa com UX, Growth, Inbound Marketing & SEO garantiu um aumento em seu faturamento de 700%.<br />
Material<br />
http://pt.slideshare.net/VictorFerreiraSantos/designers-devem-programar-trilha-ux-design-the-developers-conference-2016<br />
<br />
02. Guia de sobrevivência para designers em um time de desenvolvedores<br />
Lívia Amorim<br />
<br />
A palestrante coloca em discussão a metodologia ágil em detrimento aos processos de UX, afirmando que são conflitivas, pois, a primeira prioriza a entrega rápida com foco nas funções, enquanto UX foca o usuário final e pesquisa. A partir de exemplos praticados em sua empresa, mostrou que é preciso chegar em um meio termo, onde a entrega pode ser rápida, mas os estudos de UX e pesquisas com usuários são primordiais para garantir a qualidade do produto e um faturamento maior para a empresa.<br />
<br />
https://speakerdeck.com/liviamorim/guia-de-sobrevivencia-para-designers-em-um-time-de-desenvolvedores<br />
<br />
03. Através do espelho: por que desenvolvedores não gostam de testes de usabilidade?<br />
Ana Coli<br />
<br />
A palestrante coloca em pauta a questão dos testes de usabilidade dos produtos desenvolvidos e a importância de engajar todos de uma empresa, incluindo os desenvolvedores, que muitas vezes estão focados apenas com entrega e não possuem engajamento com outras equipes.<br />
Cita que para estabelecer um teste de usabilidade é preciso:<br />
- Planejamento: definição do problema a ser resolvido, discussões, envolvimento de equipes;<br />
- Execução: recrutamento de pessoas que serão engajadas com o teste, bem como a definição real de quem é o público-alvo e a construção de um roteiro para aplica-lo com os mesmos;<br />
- Resultados: ambiente definido para que o moderador possa efetuar o processo com o entrevistado que, por muitas vezes, deve ser realizada através de uma sala de ‘espelho’, onde outras pessoas estarão acompanhando nos bastidores o que está ocorrendo com o teste prático.<br />
<br />
04. UX influenciando decisões de negócio<br />
Gustavo Oliveira<br />
<br />
O palestrante mostra as vantagens da criação de um setor específico de UX na empresa TOTVS e relatou um case de como conseguiu melhorar um produto através de metodologias que consistem de pesquisa que foram desde os stakeholders da empresa até o usuário final. A otimização da ferramenta, após 3 meses de trabalho e pesquisa, proporcionou grandes resultados e lucro não só para a TOTVS mas também para seus clientes.<br />
<br />
05. Designing for Trust - Fazendo o usuário confiar no seu produto<br />
Guilherme Verdasca / Luciana H Terceiro<br />
<br />
A palestra, como define o tema, mostra como empresas estão prospectando e engajando usuários através de uma política de transparência e confiança. Citou-se empresas como UBER, Netflix, AIRBNB, Pag Seguro, Conta Azul, Nubank e a importância de garantir ao usuário uma experiência bem elaborada para que o marketing possa ocorrer a nível boca-a-boca e, assim, deixando a marca fortalecida e conhecida no mercado.<br />
<br />
06. Como Designer e PM podem trabalhar em sincronia, sem confusão de papéis e entregando sucesso para o cliente.<br />
Raphael Farinazzo / Glauco Cardoso de Oliveira<br />
<br />
Foi abordado todas as técnicas de marketing para a prospecção de novos clientes: Roadmap, Pres-release, Adoption, Retention, Customer Success, UX (Design & Prototipagem, alinhamentos do designers junto com desenvolvedores), Usabilidade e Problem Solution Fit. Afirma que os papéis de designer e UX devem ser bem separados, onde o primeiro deve cuidar da construção prática, enquanto o último deve preocupar-se com pesquisa e planejamento.<br />
<br />
07. Como vencer a barreira do engajamento inicial de novos usuários e conquistar mais clientes<br />
Júlia Ghisi<br />
<br />
A palestrante comenta sobre a necessidade de estarmos à frente da concorrência partindo do Customer Experience, onde deve ser planejado todos os pontos de contato com o usuários na jornada em que é feita até a compra do produto. É preciso uma análise detalhada para poder atrair e converter clientes em potencial e uma das técnicas utilizadas é o estudo detalhado de UX e a transparência para com o usuário.<br />
<br />
08. IBM Studios: conhecendo nossos usuários para criar experiências disruptivas envolvendo IoT<br />
Adilson Chicória / Thiago Barcelos<br />
A palestra aborda como foi a criação de um time multidisciplinar de UX na empresa IBM, onde colocou todas as equipes, incluindo desenvolvedores, para efetuar pesquisas internas juntamente com aplicação de conceitos de Design Thinking, a fim de obter um produto novo e/ou melhorias em produtos já existentes. O produto final foi a construção de salas de reuniões inteligentes, onde faz um auto-checkin ao entrar na sala, por meio de tecnologia de sensores, que são disparados para o sistema da empresa onde todos poderão consultar em tempo real.<br />
<br />
09. Mensurando a Experiência do Usuário ( A Importância dos Dados para UX )<br />
Huxley Dias<br />
<br />
O palestrante mostra a importância de se obter dados através da aplicação prática de UX em uma empresa, como argumento para a sua visibilidade aos stakeholders e diretores. Cita métodos de KPIs, pesquisas e ferramentas como google analytics, hotjar e adobe analytics.<br />
<br />
10. Vou mensurar a UX, e agora?<br />
Christian Spilhere<br />
<br />
Assim como na palestra anterior, foi abordado a questão de como provar aos empresários a importância do UX em uma empresa e como isso pode aumentar o faturamento da mesma. Para isso é preciso um diálogo embasado em métricas KPIs retiradas de ferramentas como google analytics, woopra, el tracker, hotjar e optmizely.<br />
<br />
11. Do Protótipo ao Produto: Técnicas que Fazem Sentido<br />
Barbara Wolff Dick<br />
http://www.slideshare.net/barbarawolffdick/do-prottipo-ao-produto-tcnicas-que-fazem-sentido-63753917<br />
<br />
Abordou-se a importância da construção de uma biblioteca que funciona como guideline para a empresa e ferramentas que facilitam este trabalho como styleguides.io.<br />
<br />
12. Menos telas, mais soluções! A união de IoT com UX por produtos mais úteis<br />
Rodrigo Roncaglio<br />
<br />
Levantou-se o questionamento filosófico de que um bom produto não deve possuir interface e deve estar inserido no cotidiano do usuário sem que ele perceba. Um exemplo prático foi o de portas inteligentes que possuem sensores que só abrem ao usuário quando ele chega perto, com seu celular no bolso, efetuando, assim, o seu desbloqueio sem que o mesmo perceba que há esse processo de interação entre sistemas.<br />
<br />
13. O Futuro das Interfaces: da Zero UI às Interfaces Hepáticas<br />
Alessandra Rosa<br />
http://www.slideshare.net/AlessandraPeguimRosa/o-futuro-das-interfaces-zero-ui-e-interfaces-hpticas<br />
<br />
A palestrante aborda, de uma maneira filosófica, o surgimento de novas tecnologias como holografia e como isso impactará o trabalho do designer para projetar soluções práticas para as mesmas.<br />
<br />
14. A evolução do nível de maturidade em relação a UX em uma startup<br />
Simone Beltrame<br />
http://www.slideshare.net/SiBeltrame/palestra-a-evolucao-do-nivel-de-maturidade-da-ux-em-uma-startup<br />
<br />
A palestrante aborda como foi a construção do time de UX na empresa Resultados Digitais, levando em consideração todas as dificuldades iniciais para provar ao CEO a importância deste tipo de atividade e o resultados obtidos após a aplicação das metodologias e pesquisas feitas com os usuários.<br />
<br />
15. Building UX Design Process in Startups and Tech<br />
Juscieldo Lavi / Danilo Oliveira<br />
<br />
Os palestrantes mostram como e porque foi criado um departamento de UX na empresa OLX e como conseguiram mais resultados por meio de processos de pesquisas, definição de personas, store mapping, road map e construção de novos fluxos de trabalho.<br />
<br />
16. Inserindo métricas no processo de design de produto<br />
Willian Sertório<br />
<br />
Assim como nas palestras anteriores, abordou-se a importância de levar dados e métricas para uma discussão com empresários, a fim de mostrar a importância do UX em seus negócios.<br />
<br />
17. Time de UX - separado e produtivo :0<br />
Nasser Said<br />
<br />
O palestrante conta a sua trajetória de liderança do time de UX na empresa youse, e como conseguiu transformar o ambiente de trabalho em algo mais produtivo para todos, garantindo o sucesso do produto final.<br />
<br />
18. UX como plataforma<br />
Cynthia Zanoni<br />
<br />
Discuti-se as novas tecnologias que estão surgindo no mercado e como isso deve impactar na remoção total de interfaces, deixando a interação do usuário com suas necessidades feitas através de dispositivos e sensores.<br />
<br />
19. A evolução do UX nas empresas (e como promovê-la)<br />
Luciana H Terceiro / Diogo Cavalcanti Cosentino<br />
http://pt.slideshare.net/DiogoCosentino/a-evoluo-do-ux-nas-empresas-e-como-promovla<br />
<br />
Nesta palestra foi discutido que UX não consiste apenas em fluxos, wireframes e mockups, e sim o engajamento de todos os setores da empresa. Primeiro é preciso convencer a todos da importância do UX e depois adotá-lo como cultura a fim de otimizar os produtos e a experiência em si para os usuários.</div>Danilo.pontechellehttp://wiki.mstech.com.br/index.php?title=Designers_da_Informa%C3%A7%C3%A3o&diff=821Designers da Informação2016-06-23T19:44:27Z<p>Danilo.pontechelle: </p>
<hr />
<div><br />
A equipe de Design da Informação tem como principais responsabilidades arquitetar e realizar fluxos de informação na concepção de produtos, construção de interfaces gráficas e identidades visuais, bem como elaborar soluções criativas no que compete a usabilidade, navegabilidade e facilidade de interação, definir padrões reaproveitáveis e executar procedimentos práticos, assim como a codificação Front End (HTML/CSS), a fim de garantir a melhor experiência entre o produto concebido e o usuário final.<br />
<br />
Site da equipe: http://design.mstech.com.br/<br />
<br />
'''A equipe'''<br />
<br />
Contamos com quatro designers altamente capacitados e versados nas mais diferentes aptidões que são necessárias para desempenhar o papel de Designer da Informação:<br />
<ul><br />
<li>Danilo Martinelli Pontechelle;</li><br />
<li>Lucas Toledo Teixeira Evangelista;</li><br />
<li>Miriam Midori Haga;</li><br />
<li>Samuel de Aguiar Sabino.</li><br />
</ul><br />
<br><br />
== Planejamento geral ==<br />
<br />
<p><strong>O que é?</strong></p><br />
<p class="ng-binding">Análise de todos os requisitos relacionados ao projeto, tipos de plataforma envolvidas, objetivo do cliente, análise do público alvo, a fim de elaborar o planejamento da produção e também a concepção do produto.</p><br />
<p><strong>Importância</strong></p><br />
<p class="ng-binding">Fase crucial para entendimento do que precisa ser produzido e como será produzido assim como suas características.</p><br />
<p><strong>Atividades relacionadas</strong></p><br />
<ul class="lista-padrao"><br />
<!-- ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise de requisitos</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do objetivo do cliente</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do público alvo</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Concepção do produto</li><!-- end ngRepeat: relacionado in competencia.relacionados --><br />
</ul><br />
<br />
== Identidade Visual ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representa um produto/serviço por meio de símbolos, logotipos, fontes, áudios, animações, elementos gráficos e outros.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia um produto/serviço e é responsável pela comunicação de seus valores ao usuário/consumidor.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Estudos (análise de similares, brainstorm, rascunhos de solução)</li><br />
<li>Moodboard (prancha com paleta de cores e imagens de referência)</li><br />
<li>Elementos gráficos (patterns, ícones, grafismos etc.)</li><br />
<li>Layout (impresso, web, animação etc.)</li><br />
<li>Guidelines</li><br />
</ul><br />
<br />
== Logo do produto ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representação visual de um conceito, cuja forma, cores e fonte dão identidade a um produto.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia o produto em relação aos concorrentes. Também simboliza a sua filosofia e forma de atuação no mercado.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Pesquisa de referências de similares no mercado</li><br />
<li>Definição do conceito principal e criação de um símbolo que traduza essa ideia</li><br />
<li>Avaliação da consistência da identidade em diversos tamanhos e dispositivos/plataformas</li><br />
</ul><br />
<br />
== Iconografia ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
É o conjunto de ícones padrão de uma interface, signos visuais que representam outro objeto por força de semelhança. Ícones são signos substitutivos (podem ser usados no lugar da coisa representada) e fundamentais na interação dos usuários com os computadores, pois indicam as zonas de acionamento de comandos ou reforçam visualmente alguma ação que o sistema apresenta.<br />
<br />
'''Importância'''<br />
<br />
Uma iconografia bem projetada é essencial para qualquer interface. Suas vantagens são impressionantes, pois dispensam leitura, logo podem ser identificadas por analfabetos, estrangeiros, etc. São compreendidos rapidamente diminuindo o tempo de interação, são mais facilmente memorizados e otimizam o espaço nas telas.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Ícones da interface (menus, funcionalidades, alertas, botões...)</li><br />
<li>Ícones do produto (aplicativo, favicon, etc.)</li><br />
</ul><br />
<br />
== Acessibilidade ==<br />
<br />
'''O que é?'''<br />
<br />
Acessibilidade é definida como a possibilidade de qualquer pessoa, independentemente de suas capacidades físicomotoras, perceptivas, culturais e sociais, usufruir os benefícios de uma vida em sociedade, tendo a possibilidade de participar de qualquer atividade, até as que incluem o uso de produtos, serviços e informações, com o mínimo de restrição possível.<br />
<br />
'''Importância'''<br />
<br />
Está ligado intimamente com a experiência do usuário e com toda a produção tanto de código quanto visual. É mais fácil e eficiente planejá-la desde o início para evitar retrabalho.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Seguir os padrões de desenvolvimento Web da W3C (cor, contraste, tamanhos etc.)</li><br />
<li>Seguir diretrizes e recomendações de acessibilidade do WAI, WCAG e WAI-ARIA (navegabilidade, HTML, etc.)</li><br />
<li>Realizar avaliação de acessibilidade</li><br />
</ul><br />
<br />
== Fluxo de navegação ==<br />
<br />
'''O que é?'''<br />
<br />
Uma representação visual do fluxo do usuário para completar tarefas dentro de um sistema. Exemplo: Em um site, o usuário começa pela na página inicial, segue para a página de um produto, depois vai até o carrinho de compras – e assim por diante. É a perspectiva do usuário sobre a organização do site, que ajuda a identificar quais passos precisam ser melhorados ou redesenhados.<br />
'''<br />
Importância'''<br />
<br />
Define a navegação bem como a utilização de botões/menus/listas e outros componentes de interação.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Simplificar processos</li><br />
<li>Redefinir fluxos de interação</li><br />
</ul><br />
<br />
== Mapa do site ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Consiste em um diagrama das páginas/seções de um site/app/sistema/etc organizadas hierarquicamente.<br />
<br />
'''Importância'''<br />
<br />
Ajuda a visualizar e compreender a estrutura básica e a navegação entre as diferentes partes do sistema. A partir dele podemos definir a navegação macro e ideal do usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Listagem de seções</li><br />
<li>Montagem de mapa do site</li><br />
</ul><br />
<br />
== Sketch ==<br />
<br />
'''O que é?'''<br />
<br />
Uma forma rápida de rabiscar uma nova interface usando papel e caneta sem compromisso com a fidelidade de formas, cores e detalhes dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Podem ser muito úteis para validar rapidamente conceitos de produtos e ideias de design com os outros membros da equipe e com usuários.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Sketch manual</li><br />
<li>Sketch digital</li><br />
</ul><br />
<br />
== Wireframe ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um guia visual que representa a estrutura da página, bem como sua hierarquia e os principais elementos que a compõem com maior fidelidade de proporções e posicionamento mais definidos dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Útil para discutir ideias com o time e com os clientes, e também para guiar o trabalho dos Diretores de Arte e Desenvolvedores.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Planejamento</li><br />
<li>Criação de wireframe</li><br />
<li>Validação</li><br />
</ul><br />
<br />
== Mockup ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma representação estática de média a alta fidelidade de um site/app/sistema/etc. Muitas vezes um mockup é um rascunho bem próximo do design final do produto, ou até o próprio produto final.<br />
<br />
'''Importância'''<br />
<br />
Úteis para vender a ideia do produto antes de ele estar pronto. Não possuem a resistência dos entregáveis de baixa fidelidade em apresentações e são ótimos coletores de feedback.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Planejamento</li><br />
<li>Desenvolvimento</li><br />
<li>Avaliação da consistência da Identidade Visual em determinados dispositivos/plataformas</li><br />
<li>Validação</li><br />
</ul><br />
<br />
== Prototipagem ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um protótipo é uma simulação da navegação e de algumas funcionalidades de um site/app/sistema, composto normalmente por sketch/wireframes/mockup clicáveis.<br />
<br />
'''Importância'''<br />
<br />
É uma forma rápida de validar e testar um produto antes de desenvolvê-lo do começo ao fim.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Protótipo sketch</li><br />
<li>Protótipo wireframe</li><br />
<li>Protótipo mockup</li><br />
</ul><br />
<br />
== Telas de ajuda e tutorial ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Montagem de imagens ou animações que mostram um passo a passo para guiar a utilização de um produto.<br />
<br />
'''Importância'''<br />
<br />
Identifica as ferramentas e funcionamento de um produto facilitando seu reconhecimento pelo usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Criação de pranchas que demonstrem o fluxo de navegação pelas telas do produto</li><br />
<li>Simulações animadas interativas com instruções que guiam o usuário</li><br />
<li>Telas de ajuda dentro do próprio produto com textos e indicações de como utilizá-lo</li><br />
</ul><br />
<br />
== Pranchas de apresentação ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Documento para visualização e entendimento das telas e conceitos aplicados em um projeto ou produto.<br />
<br />
'''Importância'''<br />
<br />
Podem ser utilizadas em apresentações para auxiliar o cliente a visualizar o que foi planejado, por que foi planejado e sua importância para o produto.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Proposta de sketch</li><br />
<li>Proposta de wireframe</li><br />
<li>Proposta de mapa de site</li><br />
<li>Proposta de fluxograma de navegação</li><br />
<li>Proposta de identidade visual (logotipo, ícones, elementos gráficos etc.)</li><br />
<li>Proposta de iconografia</li><br />
</ul><br />
<br />
== Testes de usabilidade ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Entrevista com o consumidor, onde pede-se que ele execute uma série de tarefas em um protótipo ou mesmo no produto final. À medida em que o consumidor interage com o produto, o pesquisador faz anotações sobre seu comportamento, dificuldades e suas opiniões.<br />
<br />
'''Importância'''<br />
<br />
Essencial para atualizações do produto. Ajuda a validar fluxos, layouts e funcionalidades aumentando a qualidade, o desempenho e a empatia pelo produto final.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Análise de resultado dos testes aplicado ao usuário</li><br />
<li>Planejamento de ações</li><br />
<li>Produção</li><br />
</ul><br />
<br />
== HTML/CSS (front-end design) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Codificação em HTML/CSS/JQUERY do mockup do layout final.<br />
<br />
'''Importância'''<br />
<br />
Traduz o que foi planejado no mockup com fidelidade e estrutura para a equipe desenvolvimento implementar as interações e funcionalidades.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Guia de montagemHTML/CSS (proporções, distâncias, tamanho de fonte, etc)</li><br />
<li>Montagem HTML/CSS (estruturação, customização de componentes padrão, etc)</li><br />
</ul><br />
<br />
== Folha de estilos (biblioteca de padrões) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma lista prática com exemplos (e às vezes códigos) dos padrões visuais que serão utilizados em todo o site. É fundamental para a padronização dos elementos da interface, facilitando a produção e reprodução das demais telas.<br />
<br />
'''Importância'''<br />
<br />
Não só ajuda a manter o design consistente em diferentes telas, mas também facilita a vida dos desenvolvedores na hora de implementar os elementos.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Componentes de interação (botões, listas suspensas, setas de navegação, etc.)</li><br />
<li>Componentes de formatação (fonte, cores, tamanhos, espaçamentos, etc.)</li><br />
<li>Componentes de marcação (HTML e CSS)</li><br />
</ul><br />
<br />
== Interface animada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Animações pontuais que têm a intenção de tornar a experiência do usuário mais amigável e familiar aos seus referenciais de interação analógica/digital. Podem ser aplicadas em ícones, transições, menus, janelas, botões, etc.<br />
<br />
'''Importância'''<br />
<br />
Animações de interface ajudam a envolver o usuário e encorajam uma exploração mais profunda de um app ou site. Auxilia na contextualização de uma sequência de ações. Instiga o usuário a questionar “O que vai acontecer se eu tocar isso?”, ”E depois disso?”.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Planejamento de animação</li><br />
<li>Guia de animação (documento com especificações de execução)</li><br />
<li>Criação de animação codificada</li><br />
</ul><br />
<br />
== Validação técnica (designer) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Revisão e validação do produto funcional em relação ao que foi planejado.<br />
<br />
'''Importância'''<br />
<br />
Garantir que todo o planejamento, em todas as áreas competentes a equipe, tenha sido executado para que o produto chegue com a máxima qualidade para a análise do cliente.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Validação de montagem HTML/CSS</li><br />
<li>Validação pós back-end</li><br />
<li>Validação de usabilidade básica no dispositivo/paltaforma final</li><br />
</ul><br />
<br />
== Interface gamificada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uso de elementos visuais atrativos que auxiliam na exposição dos dados de desempenho do usuário/jogador. Adiciona uma experiência lúdica, mais próxima de um jogo que de um sistema.<br />
<br />
'''Importância'''<br />
<br />
Tem o objetivo de tornar a experiência de uso de um determinado produto diferenciado e instigante.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Estudo de similares</li><br />
<li>Pesquisa de interesses do público alvo</li><br />
<li>Planejamento da gamificação</li><br />
<li>Planejamento e mapeamento do impacto no layout</li><br />
</ul></div>Danilo.pontechellehttp://wiki.mstech.com.br/index.php?title=Designers_da_Informa%C3%A7%C3%A3o&diff=820Designers da Informação2016-06-23T19:44:14Z<p>Danilo.pontechelle: </p>
<hr />
<div><br />
A equipe de Design da Informação tem como principais responsabilidades arquitetar e realizar fluxos de informação na concepção de produtos, construção de interfaces gráficas e identidades visuais, bem como elaborar soluções criativas no que compete a usabilidade, navegabilidade e facilidade de interação, definir padrões reaproveitáveis e executar procedimentos práticos, assim como a codificação Front End (HTML/CSS), a fim de garantir a melhor experiência entre o produto concebido e o usuário final.<br />
<br />
Site da equipe: http://design.mstech.com.br/<br />
<br />
'''A equipe'''<br />
<br />
Contamos com quatro designers altamente capacitados e versados nas mais diferentes aptidões que são necessárias para desempenhar o papel de Designer da Informação:<br />
<ul><br />
<li>Danilo Martinelli Pontechelle;</li><br />
<li>Lucas Toledo Teixeira Evangelista;</li><br />
<li>Miriam Midori Haga;</li><br />
<li>Samuel de Aguiar Sabino.</li><br />
</ul><br />
<br><br />
<br />
== Planejamento geral ==<br />
<br />
<p><strong>O que é?</strong></p><br />
<p class="ng-binding">Análise de todos os requisitos relacionados ao projeto, tipos de plataforma envolvidas, objetivo do cliente, análise do público alvo, a fim de elaborar o planejamento da produção e também a concepção do produto.</p><br />
<p><strong>Importância</strong></p><br />
<p class="ng-binding">Fase crucial para entendimento do que precisa ser produzido e como será produzido assim como suas características.</p><br />
<p><strong>Atividades relacionadas</strong></p><br />
<ul class="lista-padrao"><br />
<!-- ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise de requisitos</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do objetivo do cliente</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do público alvo</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Concepção do produto</li><!-- end ngRepeat: relacionado in competencia.relacionados --><br />
</ul><br />
<br />
== Identidade Visual ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representa um produto/serviço por meio de símbolos, logotipos, fontes, áudios, animações, elementos gráficos e outros.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia um produto/serviço e é responsável pela comunicação de seus valores ao usuário/consumidor.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Estudos (análise de similares, brainstorm, rascunhos de solução)</li><br />
<li>Moodboard (prancha com paleta de cores e imagens de referência)</li><br />
<li>Elementos gráficos (patterns, ícones, grafismos etc.)</li><br />
<li>Layout (impresso, web, animação etc.)</li><br />
<li>Guidelines</li><br />
</ul><br />
<br />
== Logo do produto ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representação visual de um conceito, cuja forma, cores e fonte dão identidade a um produto.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia o produto em relação aos concorrentes. Também simboliza a sua filosofia e forma de atuação no mercado.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Pesquisa de referências de similares no mercado</li><br />
<li>Definição do conceito principal e criação de um símbolo que traduza essa ideia</li><br />
<li>Avaliação da consistência da identidade em diversos tamanhos e dispositivos/plataformas</li><br />
</ul><br />
<br />
== Iconografia ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
É o conjunto de ícones padrão de uma interface, signos visuais que representam outro objeto por força de semelhança. Ícones são signos substitutivos (podem ser usados no lugar da coisa representada) e fundamentais na interação dos usuários com os computadores, pois indicam as zonas de acionamento de comandos ou reforçam visualmente alguma ação que o sistema apresenta.<br />
<br />
'''Importância'''<br />
<br />
Uma iconografia bem projetada é essencial para qualquer interface. Suas vantagens são impressionantes, pois dispensam leitura, logo podem ser identificadas por analfabetos, estrangeiros, etc. São compreendidos rapidamente diminuindo o tempo de interação, são mais facilmente memorizados e otimizam o espaço nas telas.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Ícones da interface (menus, funcionalidades, alertas, botões...)</li><br />
<li>Ícones do produto (aplicativo, favicon, etc.)</li><br />
</ul><br />
<br />
== Acessibilidade ==<br />
<br />
'''O que é?'''<br />
<br />
Acessibilidade é definida como a possibilidade de qualquer pessoa, independentemente de suas capacidades físicomotoras, perceptivas, culturais e sociais, usufruir os benefícios de uma vida em sociedade, tendo a possibilidade de participar de qualquer atividade, até as que incluem o uso de produtos, serviços e informações, com o mínimo de restrição possível.<br />
<br />
'''Importância'''<br />
<br />
Está ligado intimamente com a experiência do usuário e com toda a produção tanto de código quanto visual. É mais fácil e eficiente planejá-la desde o início para evitar retrabalho.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Seguir os padrões de desenvolvimento Web da W3C (cor, contraste, tamanhos etc.)</li><br />
<li>Seguir diretrizes e recomendações de acessibilidade do WAI, WCAG e WAI-ARIA (navegabilidade, HTML, etc.)</li><br />
<li>Realizar avaliação de acessibilidade</li><br />
</ul><br />
<br />
== Fluxo de navegação ==<br />
<br />
'''O que é?'''<br />
<br />
Uma representação visual do fluxo do usuário para completar tarefas dentro de um sistema. Exemplo: Em um site, o usuário começa pela na página inicial, segue para a página de um produto, depois vai até o carrinho de compras – e assim por diante. É a perspectiva do usuário sobre a organização do site, que ajuda a identificar quais passos precisam ser melhorados ou redesenhados.<br />
'''<br />
Importância'''<br />
<br />
Define a navegação bem como a utilização de botões/menus/listas e outros componentes de interação.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Simplificar processos</li><br />
<li>Redefinir fluxos de interação</li><br />
</ul><br />
<br />
== Mapa do site ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Consiste em um diagrama das páginas/seções de um site/app/sistema/etc organizadas hierarquicamente.<br />
<br />
'''Importância'''<br />
<br />
Ajuda a visualizar e compreender a estrutura básica e a navegação entre as diferentes partes do sistema. A partir dele podemos definir a navegação macro e ideal do usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Listagem de seções</li><br />
<li>Montagem de mapa do site</li><br />
</ul><br />
<br />
== Sketch ==<br />
<br />
'''O que é?'''<br />
<br />
Uma forma rápida de rabiscar uma nova interface usando papel e caneta sem compromisso com a fidelidade de formas, cores e detalhes dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Podem ser muito úteis para validar rapidamente conceitos de produtos e ideias de design com os outros membros da equipe e com usuários.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Sketch manual</li><br />
<li>Sketch digital</li><br />
</ul><br />
<br />
== Wireframe ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um guia visual que representa a estrutura da página, bem como sua hierarquia e os principais elementos que a compõem com maior fidelidade de proporções e posicionamento mais definidos dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Útil para discutir ideias com o time e com os clientes, e também para guiar o trabalho dos Diretores de Arte e Desenvolvedores.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Planejamento</li><br />
<li>Criação de wireframe</li><br />
<li>Validação</li><br />
</ul><br />
<br />
== Mockup ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma representação estática de média a alta fidelidade de um site/app/sistema/etc. Muitas vezes um mockup é um rascunho bem próximo do design final do produto, ou até o próprio produto final.<br />
<br />
'''Importância'''<br />
<br />
Úteis para vender a ideia do produto antes de ele estar pronto. Não possuem a resistência dos entregáveis de baixa fidelidade em apresentações e são ótimos coletores de feedback.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Planejamento</li><br />
<li>Desenvolvimento</li><br />
<li>Avaliação da consistência da Identidade Visual em determinados dispositivos/plataformas</li><br />
<li>Validação</li><br />
</ul><br />
<br />
== Prototipagem ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um protótipo é uma simulação da navegação e de algumas funcionalidades de um site/app/sistema, composto normalmente por sketch/wireframes/mockup clicáveis.<br />
<br />
'''Importância'''<br />
<br />
É uma forma rápida de validar e testar um produto antes de desenvolvê-lo do começo ao fim.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Protótipo sketch</li><br />
<li>Protótipo wireframe</li><br />
<li>Protótipo mockup</li><br />
</ul><br />
<br />
== Telas de ajuda e tutorial ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Montagem de imagens ou animações que mostram um passo a passo para guiar a utilização de um produto.<br />
<br />
'''Importância'''<br />
<br />
Identifica as ferramentas e funcionamento de um produto facilitando seu reconhecimento pelo usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Criação de pranchas que demonstrem o fluxo de navegação pelas telas do produto</li><br />
<li>Simulações animadas interativas com instruções que guiam o usuário</li><br />
<li>Telas de ajuda dentro do próprio produto com textos e indicações de como utilizá-lo</li><br />
</ul><br />
<br />
== Pranchas de apresentação ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Documento para visualização e entendimento das telas e conceitos aplicados em um projeto ou produto.<br />
<br />
'''Importância'''<br />
<br />
Podem ser utilizadas em apresentações para auxiliar o cliente a visualizar o que foi planejado, por que foi planejado e sua importância para o produto.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Proposta de sketch</li><br />
<li>Proposta de wireframe</li><br />
<li>Proposta de mapa de site</li><br />
<li>Proposta de fluxograma de navegação</li><br />
<li>Proposta de identidade visual (logotipo, ícones, elementos gráficos etc.)</li><br />
<li>Proposta de iconografia</li><br />
</ul><br />
<br />
== Testes de usabilidade ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Entrevista com o consumidor, onde pede-se que ele execute uma série de tarefas em um protótipo ou mesmo no produto final. À medida em que o consumidor interage com o produto, o pesquisador faz anotações sobre seu comportamento, dificuldades e suas opiniões.<br />
<br />
'''Importância'''<br />
<br />
Essencial para atualizações do produto. Ajuda a validar fluxos, layouts e funcionalidades aumentando a qualidade, o desempenho e a empatia pelo produto final.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Análise de resultado dos testes aplicado ao usuário</li><br />
<li>Planejamento de ações</li><br />
<li>Produção</li><br />
</ul><br />
<br />
== HTML/CSS (front-end design) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Codificação em HTML/CSS/JQUERY do mockup do layout final.<br />
<br />
'''Importância'''<br />
<br />
Traduz o que foi planejado no mockup com fidelidade e estrutura para a equipe desenvolvimento implementar as interações e funcionalidades.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Guia de montagemHTML/CSS (proporções, distâncias, tamanho de fonte, etc)</li><br />
<li>Montagem HTML/CSS (estruturação, customização de componentes padrão, etc)</li><br />
</ul><br />
<br />
== Folha de estilos (biblioteca de padrões) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma lista prática com exemplos (e às vezes códigos) dos padrões visuais que serão utilizados em todo o site. É fundamental para a padronização dos elementos da interface, facilitando a produção e reprodução das demais telas.<br />
<br />
'''Importância'''<br />
<br />
Não só ajuda a manter o design consistente em diferentes telas, mas também facilita a vida dos desenvolvedores na hora de implementar os elementos.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Componentes de interação (botões, listas suspensas, setas de navegação, etc.)</li><br />
<li>Componentes de formatação (fonte, cores, tamanhos, espaçamentos, etc.)</li><br />
<li>Componentes de marcação (HTML e CSS)</li><br />
</ul><br />
<br />
== Interface animada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Animações pontuais que têm a intenção de tornar a experiência do usuário mais amigável e familiar aos seus referenciais de interação analógica/digital. Podem ser aplicadas em ícones, transições, menus, janelas, botões, etc.<br />
<br />
'''Importância'''<br />
<br />
Animações de interface ajudam a envolver o usuário e encorajam uma exploração mais profunda de um app ou site. Auxilia na contextualização de uma sequência de ações. Instiga o usuário a questionar “O que vai acontecer se eu tocar isso?”, ”E depois disso?”.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Planejamento de animação</li><br />
<li>Guia de animação (documento com especificações de execução)</li><br />
<li>Criação de animação codificada</li><br />
</ul><br />
<br />
== Validação técnica (designer) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Revisão e validação do produto funcional em relação ao que foi planejado.<br />
<br />
'''Importância'''<br />
<br />
Garantir que todo o planejamento, em todas as áreas competentes a equipe, tenha sido executado para que o produto chegue com a máxima qualidade para a análise do cliente.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Validação de montagem HTML/CSS</li><br />
<li>Validação pós back-end</li><br />
<li>Validação de usabilidade básica no dispositivo/paltaforma final</li><br />
</ul><br />
<br />
== Interface gamificada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uso de elementos visuais atrativos que auxiliam na exposição dos dados de desempenho do usuário/jogador. Adiciona uma experiência lúdica, mais próxima de um jogo que de um sistema.<br />
<br />
'''Importância'''<br />
<br />
Tem o objetivo de tornar a experiência de uso de um determinado produto diferenciado e instigante.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Estudo de similares</li><br />
<li>Pesquisa de interesses do público alvo</li><br />
<li>Planejamento da gamificação</li><br />
<li>Planejamento e mapeamento do impacto no layout</li><br />
</ul></div>Danilo.pontechellehttp://wiki.mstech.com.br/index.php?title=Designers_da_Informa%C3%A7%C3%A3o&diff=819Designers da Informação2016-06-23T19:44:07Z<p>Danilo.pontechelle: </p>
<hr />
<div><br />
A equipe de Design da Informação tem como principais responsabilidades arquitetar e realizar fluxos de informação na concepção de produtos, construção de interfaces gráficas e identidades visuais, bem como elaborar soluções criativas no que compete a usabilidade, navegabilidade e facilidade de interação, definir padrões reaproveitáveis e executar procedimentos práticos, assim como a codificação Front End (HTML/CSS), a fim de garantir a melhor experiência entre o produto concebido e o usuário final.<br />
<br />
Site da equipe: http://design.mstech.com.br/<br />
<br />
'''A equipe'''<br />
<br />
Contamos com quatro designers altamente capacitados e versados nas mais diferentes aptidões que são necessárias para desempenhar o papel de Designer da Informação:<br />
<ul><br />
<li>Danilo Martinelli Pontechelle;</li><br />
<li>Lucas Toledo Teixeira Evangelista;</li><br />
<li>Miriam Midori Haga;</li><br />
<li>Samuel de Aguiar Sabino.</li><br />
</ul><br />
<br />
<br />
<br><br />
<br />
== Planejamento geral ==<br />
<br />
<p><strong>O que é?</strong></p><br />
<p class="ng-binding">Análise de todos os requisitos relacionados ao projeto, tipos de plataforma envolvidas, objetivo do cliente, análise do público alvo, a fim de elaborar o planejamento da produção e também a concepção do produto.</p><br />
<p><strong>Importância</strong></p><br />
<p class="ng-binding">Fase crucial para entendimento do que precisa ser produzido e como será produzido assim como suas características.</p><br />
<p><strong>Atividades relacionadas</strong></p><br />
<ul class="lista-padrao"><br />
<!-- ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise de requisitos</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do objetivo do cliente</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do público alvo</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Concepção do produto</li><!-- end ngRepeat: relacionado in competencia.relacionados --><br />
</ul><br />
<br />
== Identidade Visual ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representa um produto/serviço por meio de símbolos, logotipos, fontes, áudios, animações, elementos gráficos e outros.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia um produto/serviço e é responsável pela comunicação de seus valores ao usuário/consumidor.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Estudos (análise de similares, brainstorm, rascunhos de solução)</li><br />
<li>Moodboard (prancha com paleta de cores e imagens de referência)</li><br />
<li>Elementos gráficos (patterns, ícones, grafismos etc.)</li><br />
<li>Layout (impresso, web, animação etc.)</li><br />
<li>Guidelines</li><br />
</ul><br />
<br />
== Logo do produto ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representação visual de um conceito, cuja forma, cores e fonte dão identidade a um produto.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia o produto em relação aos concorrentes. Também simboliza a sua filosofia e forma de atuação no mercado.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Pesquisa de referências de similares no mercado</li><br />
<li>Definição do conceito principal e criação de um símbolo que traduza essa ideia</li><br />
<li>Avaliação da consistência da identidade em diversos tamanhos e dispositivos/plataformas</li><br />
</ul><br />
<br />
== Iconografia ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
É o conjunto de ícones padrão de uma interface, signos visuais que representam outro objeto por força de semelhança. Ícones são signos substitutivos (podem ser usados no lugar da coisa representada) e fundamentais na interação dos usuários com os computadores, pois indicam as zonas de acionamento de comandos ou reforçam visualmente alguma ação que o sistema apresenta.<br />
<br />
'''Importância'''<br />
<br />
Uma iconografia bem projetada é essencial para qualquer interface. Suas vantagens são impressionantes, pois dispensam leitura, logo podem ser identificadas por analfabetos, estrangeiros, etc. São compreendidos rapidamente diminuindo o tempo de interação, são mais facilmente memorizados e otimizam o espaço nas telas.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Ícones da interface (menus, funcionalidades, alertas, botões...)</li><br />
<li>Ícones do produto (aplicativo, favicon, etc.)</li><br />
</ul><br />
<br />
== Acessibilidade ==<br />
<br />
'''O que é?'''<br />
<br />
Acessibilidade é definida como a possibilidade de qualquer pessoa, independentemente de suas capacidades físicomotoras, perceptivas, culturais e sociais, usufruir os benefícios de uma vida em sociedade, tendo a possibilidade de participar de qualquer atividade, até as que incluem o uso de produtos, serviços e informações, com o mínimo de restrição possível.<br />
<br />
'''Importância'''<br />
<br />
Está ligado intimamente com a experiência do usuário e com toda a produção tanto de código quanto visual. É mais fácil e eficiente planejá-la desde o início para evitar retrabalho.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Seguir os padrões de desenvolvimento Web da W3C (cor, contraste, tamanhos etc.)</li><br />
<li>Seguir diretrizes e recomendações de acessibilidade do WAI, WCAG e WAI-ARIA (navegabilidade, HTML, etc.)</li><br />
<li>Realizar avaliação de acessibilidade</li><br />
</ul><br />
<br />
== Fluxo de navegação ==<br />
<br />
'''O que é?'''<br />
<br />
Uma representação visual do fluxo do usuário para completar tarefas dentro de um sistema. Exemplo: Em um site, o usuário começa pela na página inicial, segue para a página de um produto, depois vai até o carrinho de compras – e assim por diante. É a perspectiva do usuário sobre a organização do site, que ajuda a identificar quais passos precisam ser melhorados ou redesenhados.<br />
'''<br />
Importância'''<br />
<br />
Define a navegação bem como a utilização de botões/menus/listas e outros componentes de interação.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Simplificar processos</li><br />
<li>Redefinir fluxos de interação</li><br />
</ul><br />
<br />
== Mapa do site ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Consiste em um diagrama das páginas/seções de um site/app/sistema/etc organizadas hierarquicamente.<br />
<br />
'''Importância'''<br />
<br />
Ajuda a visualizar e compreender a estrutura básica e a navegação entre as diferentes partes do sistema. A partir dele podemos definir a navegação macro e ideal do usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Listagem de seções</li><br />
<li>Montagem de mapa do site</li><br />
</ul><br />
<br />
== Sketch ==<br />
<br />
'''O que é?'''<br />
<br />
Uma forma rápida de rabiscar uma nova interface usando papel e caneta sem compromisso com a fidelidade de formas, cores e detalhes dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Podem ser muito úteis para validar rapidamente conceitos de produtos e ideias de design com os outros membros da equipe e com usuários.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Sketch manual</li><br />
<li>Sketch digital</li><br />
</ul><br />
<br />
== Wireframe ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um guia visual que representa a estrutura da página, bem como sua hierarquia e os principais elementos que a compõem com maior fidelidade de proporções e posicionamento mais definidos dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Útil para discutir ideias com o time e com os clientes, e também para guiar o trabalho dos Diretores de Arte e Desenvolvedores.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Planejamento</li><br />
<li>Criação de wireframe</li><br />
<li>Validação</li><br />
</ul><br />
<br />
== Mockup ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma representação estática de média a alta fidelidade de um site/app/sistema/etc. Muitas vezes um mockup é um rascunho bem próximo do design final do produto, ou até o próprio produto final.<br />
<br />
'''Importância'''<br />
<br />
Úteis para vender a ideia do produto antes de ele estar pronto. Não possuem a resistência dos entregáveis de baixa fidelidade em apresentações e são ótimos coletores de feedback.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Planejamento</li><br />
<li>Desenvolvimento</li><br />
<li>Avaliação da consistência da Identidade Visual em determinados dispositivos/plataformas</li><br />
<li>Validação</li><br />
</ul><br />
<br />
== Prototipagem ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um protótipo é uma simulação da navegação e de algumas funcionalidades de um site/app/sistema, composto normalmente por sketch/wireframes/mockup clicáveis.<br />
<br />
'''Importância'''<br />
<br />
É uma forma rápida de validar e testar um produto antes de desenvolvê-lo do começo ao fim.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Protótipo sketch</li><br />
<li>Protótipo wireframe</li><br />
<li>Protótipo mockup</li><br />
</ul><br />
<br />
== Telas de ajuda e tutorial ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Montagem de imagens ou animações que mostram um passo a passo para guiar a utilização de um produto.<br />
<br />
'''Importância'''<br />
<br />
Identifica as ferramentas e funcionamento de um produto facilitando seu reconhecimento pelo usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Criação de pranchas que demonstrem o fluxo de navegação pelas telas do produto</li><br />
<li>Simulações animadas interativas com instruções que guiam o usuário</li><br />
<li>Telas de ajuda dentro do próprio produto com textos e indicações de como utilizá-lo</li><br />
</ul><br />
<br />
== Pranchas de apresentação ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Documento para visualização e entendimento das telas e conceitos aplicados em um projeto ou produto.<br />
<br />
'''Importância'''<br />
<br />
Podem ser utilizadas em apresentações para auxiliar o cliente a visualizar o que foi planejado, por que foi planejado e sua importância para o produto.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Proposta de sketch</li><br />
<li>Proposta de wireframe</li><br />
<li>Proposta de mapa de site</li><br />
<li>Proposta de fluxograma de navegação</li><br />
<li>Proposta de identidade visual (logotipo, ícones, elementos gráficos etc.)</li><br />
<li>Proposta de iconografia</li><br />
</ul><br />
<br />
== Testes de usabilidade ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Entrevista com o consumidor, onde pede-se que ele execute uma série de tarefas em um protótipo ou mesmo no produto final. À medida em que o consumidor interage com o produto, o pesquisador faz anotações sobre seu comportamento, dificuldades e suas opiniões.<br />
<br />
'''Importância'''<br />
<br />
Essencial para atualizações do produto. Ajuda a validar fluxos, layouts e funcionalidades aumentando a qualidade, o desempenho e a empatia pelo produto final.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Análise de resultado dos testes aplicado ao usuário</li><br />
<li>Planejamento de ações</li><br />
<li>Produção</li><br />
</ul><br />
<br />
== HTML/CSS (front-end design) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Codificação em HTML/CSS/JQUERY do mockup do layout final.<br />
<br />
'''Importância'''<br />
<br />
Traduz o que foi planejado no mockup com fidelidade e estrutura para a equipe desenvolvimento implementar as interações e funcionalidades.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Guia de montagemHTML/CSS (proporções, distâncias, tamanho de fonte, etc)</li><br />
<li>Montagem HTML/CSS (estruturação, customização de componentes padrão, etc)</li><br />
</ul><br />
<br />
== Folha de estilos (biblioteca de padrões) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma lista prática com exemplos (e às vezes códigos) dos padrões visuais que serão utilizados em todo o site. É fundamental para a padronização dos elementos da interface, facilitando a produção e reprodução das demais telas.<br />
<br />
'''Importância'''<br />
<br />
Não só ajuda a manter o design consistente em diferentes telas, mas também facilita a vida dos desenvolvedores na hora de implementar os elementos.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Componentes de interação (botões, listas suspensas, setas de navegação, etc.)</li><br />
<li>Componentes de formatação (fonte, cores, tamanhos, espaçamentos, etc.)</li><br />
<li>Componentes de marcação (HTML e CSS)</li><br />
</ul><br />
<br />
== Interface animada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Animações pontuais que têm a intenção de tornar a experiência do usuário mais amigável e familiar aos seus referenciais de interação analógica/digital. Podem ser aplicadas em ícones, transições, menus, janelas, botões, etc.<br />
<br />
'''Importância'''<br />
<br />
Animações de interface ajudam a envolver o usuário e encorajam uma exploração mais profunda de um app ou site. Auxilia na contextualização de uma sequência de ações. Instiga o usuário a questionar “O que vai acontecer se eu tocar isso?”, ”E depois disso?”.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Planejamento de animação</li><br />
<li>Guia de animação (documento com especificações de execução)</li><br />
<li>Criação de animação codificada</li><br />
</ul><br />
<br />
== Validação técnica (designer) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Revisão e validação do produto funcional em relação ao que foi planejado.<br />
<br />
'''Importância'''<br />
<br />
Garantir que todo o planejamento, em todas as áreas competentes a equipe, tenha sido executado para que o produto chegue com a máxima qualidade para a análise do cliente.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Validação de montagem HTML/CSS</li><br />
<li>Validação pós back-end</li><br />
<li>Validação de usabilidade básica no dispositivo/paltaforma final</li><br />
</ul><br />
<br />
== Interface gamificada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uso de elementos visuais atrativos que auxiliam na exposição dos dados de desempenho do usuário/jogador. Adiciona uma experiência lúdica, mais próxima de um jogo que de um sistema.<br />
<br />
'''Importância'''<br />
<br />
Tem o objetivo de tornar a experiência de uso de um determinado produto diferenciado e instigante.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Estudo de similares</li><br />
<li>Pesquisa de interesses do público alvo</li><br />
<li>Planejamento da gamificação</li><br />
<li>Planejamento e mapeamento do impacto no layout</li><br />
</ul></div>Danilo.pontechellehttp://wiki.mstech.com.br/index.php?title=Designers_da_Informa%C3%A7%C3%A3o&diff=818Designers da Informação2016-06-23T19:34:37Z<p>Danilo.pontechelle: </p>
<hr />
<div><br />
A equipe de Design da Informação tem como principais responsabilidades arquitetar e realizar fluxos de informação na concepção de produtos, construção de interfaces gráficas e identidades visuais, bem como elaborar soluções criativas no que compete a usabilidade, navegabilidade e facilidade de interação, definir padrões reaproveitáveis e executar procedimentos práticos, assim como a codificação Front End (HTML/CSS), a fim de garantir a melhor experiência entre o produto concebido e o usuário final.<br />
<br />
Site da equipe: http://design.mstech.com.br/<br />
<br />
'''A equipe'''<br />
<br />
Contamos com quatro designers altamente capacitados e versados nas mais diferentes aptidões que são necessárias para desempenhar o papel de Designer da Informação:<br />
<ul><br />
<li>Danilo Martinelli Pontechelle;</li><br />
<li>Lucas Toledo Teixeira Evangelista;</li><br />
<li>Miriam Midori Haga;</li><br />
<li>Samuel de Aguiar Sabino.</li><br />
</ul><br />
<br />
== Planejamento geral ==<br />
<br />
<p><strong>O que é?</strong></p><br />
<p class="ng-binding">Análise de todos os requisitos relacionados ao projeto, tipos de plataforma envolvidas, objetivo do cliente, análise do público alvo, a fim de elaborar o planejamento da produção e também a concepção do produto.</p><br />
<p><strong>Importância</strong></p><br />
<p class="ng-binding">Fase crucial para entendimento do que precisa ser produzido e como será produzido assim como suas características.</p><br />
<p><strong>Atividades relacionadas</strong></p><br />
<ul class="lista-padrao"><br />
<!-- ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise de requisitos</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do objetivo do cliente</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do público alvo</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Concepção do produto</li><!-- end ngRepeat: relacionado in competencia.relacionados --><br />
</ul><br />
<br />
== Identidade Visual ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representa um produto/serviço por meio de símbolos, logotipos, fontes, áudios, animações, elementos gráficos e outros.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia um produto/serviço e é responsável pela comunicação de seus valores ao usuário/consumidor.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Estudos (análise de similares, brainstorm, rascunhos de solução)</li><br />
<li>Moodboard (prancha com paleta de cores e imagens de referência)</li><br />
<li>Elementos gráficos (patterns, ícones, grafismos etc.)</li><br />
<li>Layout (impresso, web, animação etc.)</li><br />
<li>Guidelines</li><br />
</ul><br />
<br />
== Logo do produto ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representação visual de um conceito, cuja forma, cores e fonte dão identidade a um produto.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia o produto em relação aos concorrentes. Também simboliza a sua filosofia e forma de atuação no mercado.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Pesquisa de referências de similares no mercado</li><br />
<li>Definição do conceito principal e criação de um símbolo que traduza essa ideia</li><br />
<li>Avaliação da consistência da identidade em diversos tamanhos e dispositivos/plataformas</li><br />
</ul><br />
<br />
== Iconografia ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
É o conjunto de ícones padrão de uma interface, signos visuais que representam outro objeto por força de semelhança. Ícones são signos substitutivos (podem ser usados no lugar da coisa representada) e fundamentais na interação dos usuários com os computadores, pois indicam as zonas de acionamento de comandos ou reforçam visualmente alguma ação que o sistema apresenta.<br />
<br />
'''Importância'''<br />
<br />
Uma iconografia bem projetada é essencial para qualquer interface. Suas vantagens são impressionantes, pois dispensam leitura, logo podem ser identificadas por analfabetos, estrangeiros, etc. São compreendidos rapidamente diminuindo o tempo de interação, são mais facilmente memorizados e otimizam o espaço nas telas.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Ícones da interface (menus, funcionalidades, alertas, botões...)</li><br />
<li>Ícones do produto (aplicativo, favicon, etc.)</li><br />
</ul><br />
<br />
== Acessibilidade ==<br />
<br />
'''O que é?'''<br />
<br />
Acessibilidade é definida como a possibilidade de qualquer pessoa, independentemente de suas capacidades físicomotoras, perceptivas, culturais e sociais, usufruir os benefícios de uma vida em sociedade, tendo a possibilidade de participar de qualquer atividade, até as que incluem o uso de produtos, serviços e informações, com o mínimo de restrição possível.<br />
<br />
'''Importância'''<br />
<br />
Está ligado intimamente com a experiência do usuário e com toda a produção tanto de código quanto visual. É mais fácil e eficiente planejá-la desde o início para evitar retrabalho.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Seguir os padrões de desenvolvimento Web da W3C (cor, contraste, tamanhos etc.)</li><br />
<li>Seguir diretrizes e recomendações de acessibilidade do WAI, WCAG e WAI-ARIA (navegabilidade, HTML, etc.)</li><br />
<li>Realizar avaliação de acessibilidade</li><br />
</ul><br />
<br />
== Fluxo de navegação ==<br />
<br />
'''O que é?'''<br />
<br />
Uma representação visual do fluxo do usuário para completar tarefas dentro de um sistema. Exemplo: Em um site, o usuário começa pela na página inicial, segue para a página de um produto, depois vai até o carrinho de compras – e assim por diante. É a perspectiva do usuário sobre a organização do site, que ajuda a identificar quais passos precisam ser melhorados ou redesenhados.<br />
'''<br />
Importância'''<br />
<br />
Define a navegação bem como a utilização de botões/menus/listas e outros componentes de interação.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Simplificar processos</li><br />
<li>Redefinir fluxos de interação</li><br />
</ul><br />
<br />
== Mapa do site ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Consiste em um diagrama das páginas/seções de um site/app/sistema/etc organizadas hierarquicamente.<br />
<br />
'''Importância'''<br />
<br />
Ajuda a visualizar e compreender a estrutura básica e a navegação entre as diferentes partes do sistema. A partir dele podemos definir a navegação macro e ideal do usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Listagem de seções</li><br />
<li>Montagem de mapa do site</li><br />
</ul><br />
<br />
== Sketch ==<br />
<br />
'''O que é?'''<br />
<br />
Uma forma rápida de rabiscar uma nova interface usando papel e caneta sem compromisso com a fidelidade de formas, cores e detalhes dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Podem ser muito úteis para validar rapidamente conceitos de produtos e ideias de design com os outros membros da equipe e com usuários.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Sketch manual</li><br />
<li>Sketch digital</li><br />
</ul><br />
<br />
== Wireframe ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um guia visual que representa a estrutura da página, bem como sua hierarquia e os principais elementos que a compõem com maior fidelidade de proporções e posicionamento mais definidos dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Útil para discutir ideias com o time e com os clientes, e também para guiar o trabalho dos Diretores de Arte e Desenvolvedores.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Planejamento</li><br />
<li>Criação de wireframe</li><br />
<li>Validação</li><br />
</ul><br />
<br />
== Mockup ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma representação estática de média a alta fidelidade de um site/app/sistema/etc. Muitas vezes um mockup é um rascunho bem próximo do design final do produto, ou até o próprio produto final.<br />
<br />
'''Importância'''<br />
<br />
Úteis para vender a ideia do produto antes de ele estar pronto. Não possuem a resistência dos entregáveis de baixa fidelidade em apresentações e são ótimos coletores de feedback.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Planejamento</li><br />
<li>Desenvolvimento</li><br />
<li>Avaliação da consistência da Identidade Visual em determinados dispositivos/plataformas</li><br />
<li>Validação</li><br />
</ul><br />
<br />
== Prototipagem ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um protótipo é uma simulação da navegação e de algumas funcionalidades de um site/app/sistema, composto normalmente por sketch/wireframes/mockup clicáveis.<br />
<br />
'''Importância'''<br />
<br />
É uma forma rápida de validar e testar um produto antes de desenvolvê-lo do começo ao fim.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Protótipo sketch</li><br />
<li>Protótipo wireframe</li><br />
<li>Protótipo mockup</li><br />
</ul><br />
<br />
== Telas de ajuda e tutorial ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Montagem de imagens ou animações que mostram um passo a passo para guiar a utilização de um produto.<br />
<br />
'''Importância'''<br />
<br />
Identifica as ferramentas e funcionamento de um produto facilitando seu reconhecimento pelo usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Criação de pranchas que demonstrem o fluxo de navegação pelas telas do produto</li><br />
<li>Simulações animadas interativas com instruções que guiam o usuário</li><br />
<li>Telas de ajuda dentro do próprio produto com textos e indicações de como utilizá-lo</li><br />
</ul><br />
<br />
== Pranchas de apresentação ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Documento para visualização e entendimento das telas e conceitos aplicados em um projeto ou produto.<br />
<br />
'''Importância'''<br />
<br />
Podem ser utilizadas em apresentações para auxiliar o cliente a visualizar o que foi planejado, por que foi planejado e sua importância para o produto.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Proposta de sketch</li><br />
<li>Proposta de wireframe</li><br />
<li>Proposta de mapa de site</li><br />
<li>Proposta de fluxograma de navegação</li><br />
<li>Proposta de identidade visual (logotipo, ícones, elementos gráficos etc.)</li><br />
<li>Proposta de iconografia</li><br />
</ul><br />
<br />
== Testes de usabilidade ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Entrevista com o consumidor, onde pede-se que ele execute uma série de tarefas em um protótipo ou mesmo no produto final. À medida em que o consumidor interage com o produto, o pesquisador faz anotações sobre seu comportamento, dificuldades e suas opiniões.<br />
<br />
'''Importância'''<br />
<br />
Essencial para atualizações do produto. Ajuda a validar fluxos, layouts e funcionalidades aumentando a qualidade, o desempenho e a empatia pelo produto final.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Análise de resultado dos testes aplicado ao usuário</li><br />
<li>Planejamento de ações</li><br />
<li>Produção</li><br />
</ul><br />
<br />
== HTML/CSS (front-end design) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Codificação em HTML/CSS/JQUERY do mockup do layout final.<br />
<br />
'''Importância'''<br />
<br />
Traduz o que foi planejado no mockup com fidelidade e estrutura para a equipe desenvolvimento implementar as interações e funcionalidades.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Guia de montagemHTML/CSS (proporções, distâncias, tamanho de fonte, etc)</li><br />
<li>Montagem HTML/CSS (estruturação, customização de componentes padrão, etc)</li><br />
</ul><br />
<br />
== Folha de estilos (biblioteca de padrões) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma lista prática com exemplos (e às vezes códigos) dos padrões visuais que serão utilizados em todo o site. É fundamental para a padronização dos elementos da interface, facilitando a produção e reprodução das demais telas.<br />
<br />
'''Importância'''<br />
<br />
Não só ajuda a manter o design consistente em diferentes telas, mas também facilita a vida dos desenvolvedores na hora de implementar os elementos.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Componentes de interação (botões, listas suspensas, setas de navegação, etc.)</li><br />
<li>Componentes de formatação (fonte, cores, tamanhos, espaçamentos, etc.)</li><br />
<li>Componentes de marcação (HTML e CSS)</li><br />
</ul><br />
<br />
== Interface animada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Animações pontuais que têm a intenção de tornar a experiência do usuário mais amigável e familiar aos seus referenciais de interação analógica/digital. Podem ser aplicadas em ícones, transições, menus, janelas, botões, etc.<br />
<br />
'''Importância'''<br />
<br />
Animações de interface ajudam a envolver o usuário e encorajam uma exploração mais profunda de um app ou site. Auxilia na contextualização de uma sequência de ações. Instiga o usuário a questionar “O que vai acontecer se eu tocar isso?”, ”E depois disso?”.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Planejamento de animação</li><br />
<li>Guia de animação (documento com especificações de execução)</li><br />
<li>Criação de animação codificada</li><br />
</ul><br />
<br />
== Validação técnica (designer) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Revisão e validação do produto funcional em relação ao que foi planejado.<br />
<br />
'''Importância'''<br />
<br />
Garantir que todo o planejamento, em todas as áreas competentes a equipe, tenha sido executado para que o produto chegue com a máxima qualidade para a análise do cliente.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Validação de montagem HTML/CSS</li><br />
<li>Validação pós back-end</li><br />
<li>Validação de usabilidade básica no dispositivo/paltaforma final</li><br />
</ul><br />
<br />
== Interface gamificada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uso de elementos visuais atrativos que auxiliam na exposição dos dados de desempenho do usuário/jogador. Adiciona uma experiência lúdica, mais próxima de um jogo que de um sistema.<br />
<br />
'''Importância'''<br />
<br />
Tem o objetivo de tornar a experiência de uso de um determinado produto diferenciado e instigante.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Estudo de similares</li><br />
<li>Pesquisa de interesses do público alvo</li><br />
<li>Planejamento da gamificação</li><br />
<li>Planejamento e mapeamento do impacto no layout</li><br />
</ul></div>Danilo.pontechellehttp://wiki.mstech.com.br/index.php?title=Designers_da_Informa%C3%A7%C3%A3o&diff=817Designers da Informação2016-06-23T19:34:15Z<p>Danilo.pontechelle: </p>
<hr />
<div><br />
A equipe de Design da Informação tem como principais responsabilidades arquitetar e realizar fluxos de informação na concepção de produtos, construção de interfaces gráficas e identidades visuais, bem como elaborar soluções criativas no que compete a usabilidade, navegabilidade e facilidade de interação, definir padrões reaproveitáveis e executar procedimentos práticos, assim como a codificação Front End (HTML/CSS), a fim de garantir a melhor experiência entre o produto concebido e o usuário final.<br />
<br />
Site da equipe: [http://design.mstech.com.br/]<br />
<br />
'''A equipe'''<br />
<br />
Contamos com quatro designers altamente capacitados e versados nas mais diferentes aptidões que são necessárias para desempenhar o papel de Designer da Informação:<br />
<ul><br />
<li>Danilo Martinelli Pontechelle;</li><br />
<li>Lucas Toledo Teixeira Evangelista;</li><br />
<li>Miriam Midori Haga;</li><br />
<li>Samuel de Aguiar Sabino.</li><br />
</ul><br />
<br />
== Planejamento geral ==<br />
<br />
<p><strong>O que é?</strong></p><br />
<p class="ng-binding">Análise de todos os requisitos relacionados ao projeto, tipos de plataforma envolvidas, objetivo do cliente, análise do público alvo, a fim de elaborar o planejamento da produção e também a concepção do produto.</p><br />
<p><strong>Importância</strong></p><br />
<p class="ng-binding">Fase crucial para entendimento do que precisa ser produzido e como será produzido assim como suas características.</p><br />
<p><strong>Atividades relacionadas</strong></p><br />
<ul class="lista-padrao"><br />
<!-- ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise de requisitos</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do objetivo do cliente</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do público alvo</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Concepção do produto</li><!-- end ngRepeat: relacionado in competencia.relacionados --><br />
</ul><br />
<br />
== Identidade Visual ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representa um produto/serviço por meio de símbolos, logotipos, fontes, áudios, animações, elementos gráficos e outros.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia um produto/serviço e é responsável pela comunicação de seus valores ao usuário/consumidor.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Estudos (análise de similares, brainstorm, rascunhos de solução)</li><br />
<li>Moodboard (prancha com paleta de cores e imagens de referência)</li><br />
<li>Elementos gráficos (patterns, ícones, grafismos etc.)</li><br />
<li>Layout (impresso, web, animação etc.)</li><br />
<li>Guidelines</li><br />
</ul><br />
<br />
== Logo do produto ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representação visual de um conceito, cuja forma, cores e fonte dão identidade a um produto.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia o produto em relação aos concorrentes. Também simboliza a sua filosofia e forma de atuação no mercado.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Pesquisa de referências de similares no mercado</li><br />
<li>Definição do conceito principal e criação de um símbolo que traduza essa ideia</li><br />
<li>Avaliação da consistência da identidade em diversos tamanhos e dispositivos/plataformas</li><br />
</ul><br />
<br />
== Iconografia ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
É o conjunto de ícones padrão de uma interface, signos visuais que representam outro objeto por força de semelhança. Ícones são signos substitutivos (podem ser usados no lugar da coisa representada) e fundamentais na interação dos usuários com os computadores, pois indicam as zonas de acionamento de comandos ou reforçam visualmente alguma ação que o sistema apresenta.<br />
<br />
'''Importância'''<br />
<br />
Uma iconografia bem projetada é essencial para qualquer interface. Suas vantagens são impressionantes, pois dispensam leitura, logo podem ser identificadas por analfabetos, estrangeiros, etc. São compreendidos rapidamente diminuindo o tempo de interação, são mais facilmente memorizados e otimizam o espaço nas telas.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Ícones da interface (menus, funcionalidades, alertas, botões...)</li><br />
<li>Ícones do produto (aplicativo, favicon, etc.)</li><br />
</ul><br />
<br />
== Acessibilidade ==<br />
<br />
'''O que é?'''<br />
<br />
Acessibilidade é definida como a possibilidade de qualquer pessoa, independentemente de suas capacidades físicomotoras, perceptivas, culturais e sociais, usufruir os benefícios de uma vida em sociedade, tendo a possibilidade de participar de qualquer atividade, até as que incluem o uso de produtos, serviços e informações, com o mínimo de restrição possível.<br />
<br />
'''Importância'''<br />
<br />
Está ligado intimamente com a experiência do usuário e com toda a produção tanto de código quanto visual. É mais fácil e eficiente planejá-la desde o início para evitar retrabalho.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Seguir os padrões de desenvolvimento Web da W3C (cor, contraste, tamanhos etc.)</li><br />
<li>Seguir diretrizes e recomendações de acessibilidade do WAI, WCAG e WAI-ARIA (navegabilidade, HTML, etc.)</li><br />
<li>Realizar avaliação de acessibilidade</li><br />
</ul><br />
<br />
== Fluxo de navegação ==<br />
<br />
'''O que é?'''<br />
<br />
Uma representação visual do fluxo do usuário para completar tarefas dentro de um sistema. Exemplo: Em um site, o usuário começa pela na página inicial, segue para a página de um produto, depois vai até o carrinho de compras – e assim por diante. É a perspectiva do usuário sobre a organização do site, que ajuda a identificar quais passos precisam ser melhorados ou redesenhados.<br />
'''<br />
Importância'''<br />
<br />
Define a navegação bem como a utilização de botões/menus/listas e outros componentes de interação.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Simplificar processos</li><br />
<li>Redefinir fluxos de interação</li><br />
</ul><br />
<br />
== Mapa do site ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Consiste em um diagrama das páginas/seções de um site/app/sistema/etc organizadas hierarquicamente.<br />
<br />
'''Importância'''<br />
<br />
Ajuda a visualizar e compreender a estrutura básica e a navegação entre as diferentes partes do sistema. A partir dele podemos definir a navegação macro e ideal do usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Listagem de seções</li><br />
<li>Montagem de mapa do site</li><br />
</ul><br />
<br />
== Sketch ==<br />
<br />
'''O que é?'''<br />
<br />
Uma forma rápida de rabiscar uma nova interface usando papel e caneta sem compromisso com a fidelidade de formas, cores e detalhes dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Podem ser muito úteis para validar rapidamente conceitos de produtos e ideias de design com os outros membros da equipe e com usuários.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Sketch manual</li><br />
<li>Sketch digital</li><br />
</ul><br />
<br />
== Wireframe ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um guia visual que representa a estrutura da página, bem como sua hierarquia e os principais elementos que a compõem com maior fidelidade de proporções e posicionamento mais definidos dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Útil para discutir ideias com o time e com os clientes, e também para guiar o trabalho dos Diretores de Arte e Desenvolvedores.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Planejamento</li><br />
<li>Criação de wireframe</li><br />
<li>Validação</li><br />
</ul><br />
<br />
== Mockup ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma representação estática de média a alta fidelidade de um site/app/sistema/etc. Muitas vezes um mockup é um rascunho bem próximo do design final do produto, ou até o próprio produto final.<br />
<br />
'''Importância'''<br />
<br />
Úteis para vender a ideia do produto antes de ele estar pronto. Não possuem a resistência dos entregáveis de baixa fidelidade em apresentações e são ótimos coletores de feedback.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Planejamento</li><br />
<li>Desenvolvimento</li><br />
<li>Avaliação da consistência da Identidade Visual em determinados dispositivos/plataformas</li><br />
<li>Validação</li><br />
</ul><br />
<br />
== Prototipagem ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um protótipo é uma simulação da navegação e de algumas funcionalidades de um site/app/sistema, composto normalmente por sketch/wireframes/mockup clicáveis.<br />
<br />
'''Importância'''<br />
<br />
É uma forma rápida de validar e testar um produto antes de desenvolvê-lo do começo ao fim.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Protótipo sketch</li><br />
<li>Protótipo wireframe</li><br />
<li>Protótipo mockup</li><br />
</ul><br />
<br />
== Telas de ajuda e tutorial ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Montagem de imagens ou animações que mostram um passo a passo para guiar a utilização de um produto.<br />
<br />
'''Importância'''<br />
<br />
Identifica as ferramentas e funcionamento de um produto facilitando seu reconhecimento pelo usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Criação de pranchas que demonstrem o fluxo de navegação pelas telas do produto</li><br />
<li>Simulações animadas interativas com instruções que guiam o usuário</li><br />
<li>Telas de ajuda dentro do próprio produto com textos e indicações de como utilizá-lo</li><br />
</ul><br />
<br />
== Pranchas de apresentação ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Documento para visualização e entendimento das telas e conceitos aplicados em um projeto ou produto.<br />
<br />
'''Importância'''<br />
<br />
Podem ser utilizadas em apresentações para auxiliar o cliente a visualizar o que foi planejado, por que foi planejado e sua importância para o produto.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Proposta de sketch</li><br />
<li>Proposta de wireframe</li><br />
<li>Proposta de mapa de site</li><br />
<li>Proposta de fluxograma de navegação</li><br />
<li>Proposta de identidade visual (logotipo, ícones, elementos gráficos etc.)</li><br />
<li>Proposta de iconografia</li><br />
</ul><br />
<br />
== Testes de usabilidade ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Entrevista com o consumidor, onde pede-se que ele execute uma série de tarefas em um protótipo ou mesmo no produto final. À medida em que o consumidor interage com o produto, o pesquisador faz anotações sobre seu comportamento, dificuldades e suas opiniões.<br />
<br />
'''Importância'''<br />
<br />
Essencial para atualizações do produto. Ajuda a validar fluxos, layouts e funcionalidades aumentando a qualidade, o desempenho e a empatia pelo produto final.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Análise de resultado dos testes aplicado ao usuário</li><br />
<li>Planejamento de ações</li><br />
<li>Produção</li><br />
</ul><br />
<br />
== HTML/CSS (front-end design) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Codificação em HTML/CSS/JQUERY do mockup do layout final.<br />
<br />
'''Importância'''<br />
<br />
Traduz o que foi planejado no mockup com fidelidade e estrutura para a equipe desenvolvimento implementar as interações e funcionalidades.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Guia de montagemHTML/CSS (proporções, distâncias, tamanho de fonte, etc)</li><br />
<li>Montagem HTML/CSS (estruturação, customização de componentes padrão, etc)</li><br />
</ul><br />
<br />
== Folha de estilos (biblioteca de padrões) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma lista prática com exemplos (e às vezes códigos) dos padrões visuais que serão utilizados em todo o site. É fundamental para a padronização dos elementos da interface, facilitando a produção e reprodução das demais telas.<br />
<br />
'''Importância'''<br />
<br />
Não só ajuda a manter o design consistente em diferentes telas, mas também facilita a vida dos desenvolvedores na hora de implementar os elementos.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Componentes de interação (botões, listas suspensas, setas de navegação, etc.)</li><br />
<li>Componentes de formatação (fonte, cores, tamanhos, espaçamentos, etc.)</li><br />
<li>Componentes de marcação (HTML e CSS)</li><br />
</ul><br />
<br />
== Interface animada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Animações pontuais que têm a intenção de tornar a experiência do usuário mais amigável e familiar aos seus referenciais de interação analógica/digital. Podem ser aplicadas em ícones, transições, menus, janelas, botões, etc.<br />
<br />
'''Importância'''<br />
<br />
Animações de interface ajudam a envolver o usuário e encorajam uma exploração mais profunda de um app ou site. Auxilia na contextualização de uma sequência de ações. Instiga o usuário a questionar “O que vai acontecer se eu tocar isso?”, ”E depois disso?”.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Planejamento de animação</li><br />
<li>Guia de animação (documento com especificações de execução)</li><br />
<li>Criação de animação codificada</li><br />
</ul><br />
<br />
== Validação técnica (designer) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Revisão e validação do produto funcional em relação ao que foi planejado.<br />
<br />
'''Importância'''<br />
<br />
Garantir que todo o planejamento, em todas as áreas competentes a equipe, tenha sido executado para que o produto chegue com a máxima qualidade para a análise do cliente.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Validação de montagem HTML/CSS</li><br />
<li>Validação pós back-end</li><br />
<li>Validação de usabilidade básica no dispositivo/paltaforma final</li><br />
</ul><br />
<br />
== Interface gamificada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uso de elementos visuais atrativos que auxiliam na exposição dos dados de desempenho do usuário/jogador. Adiciona uma experiência lúdica, mais próxima de um jogo que de um sistema.<br />
<br />
'''Importância'''<br />
<br />
Tem o objetivo de tornar a experiência de uso de um determinado produto diferenciado e instigante.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Estudo de similares</li><br />
<li>Pesquisa de interesses do público alvo</li><br />
<li>Planejamento da gamificação</li><br />
<li>Planejamento e mapeamento do impacto no layout</li><br />
</ul></div>Danilo.pontechellehttp://wiki.mstech.com.br/index.php?title=Designers_da_Informa%C3%A7%C3%A3o&diff=816Designers da Informação2016-06-23T19:33:52Z<p>Danilo.pontechelle: </p>
<hr />
<div><br />
A equipe de Design da Informação tem como principais responsabilidades arquitetar e realizar fluxos de informação na concepção de produtos, construção de interfaces gráficas e identidades visuais, bem como elaborar soluções criativas no que compete a usabilidade, navegabilidade e facilidade de interação, definir padrões reaproveitáveis e executar procedimentos práticos, assim como a codificação Front End (HTML/CSS), a fim de garantir a melhor experiência entre o produto concebido e o usuário final.<br />
<br />
Site da equipe: <a href="http://design.mstech.com.br/" target="_blank">http://design.mstech.com.br/</a><br />
<br />
'''A equipe'''<br />
<br />
Contamos com quatro designers altamente capacitados e versados nas mais diferentes aptidões que são necessárias para desempenhar o papel de Designer da Informação:<br />
<ul><br />
<li>Danilo Martinelli Pontechelle;</li><br />
<li>Lucas Toledo Teixeira Evangelista;</li><br />
<li>Miriam Midori Haga;</li><br />
<li>Samuel de Aguiar Sabino.</li><br />
</ul><br />
<br />
== Planejamento geral ==<br />
<br />
<p><strong>O que é?</strong></p><br />
<p class="ng-binding">Análise de todos os requisitos relacionados ao projeto, tipos de plataforma envolvidas, objetivo do cliente, análise do público alvo, a fim de elaborar o planejamento da produção e também a concepção do produto.</p><br />
<p><strong>Importância</strong></p><br />
<p class="ng-binding">Fase crucial para entendimento do que precisa ser produzido e como será produzido assim como suas características.</p><br />
<p><strong>Atividades relacionadas</strong></p><br />
<ul class="lista-padrao"><br />
<!-- ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise de requisitos</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do objetivo do cliente</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do público alvo</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Concepção do produto</li><!-- end ngRepeat: relacionado in competencia.relacionados --><br />
</ul><br />
<br />
== Identidade Visual ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representa um produto/serviço por meio de símbolos, logotipos, fontes, áudios, animações, elementos gráficos e outros.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia um produto/serviço e é responsável pela comunicação de seus valores ao usuário/consumidor.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Estudos (análise de similares, brainstorm, rascunhos de solução)</li><br />
<li>Moodboard (prancha com paleta de cores e imagens de referência)</li><br />
<li>Elementos gráficos (patterns, ícones, grafismos etc.)</li><br />
<li>Layout (impresso, web, animação etc.)</li><br />
<li>Guidelines</li><br />
</ul><br />
<br />
== Logo do produto ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representação visual de um conceito, cuja forma, cores e fonte dão identidade a um produto.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia o produto em relação aos concorrentes. Também simboliza a sua filosofia e forma de atuação no mercado.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Pesquisa de referências de similares no mercado</li><br />
<li>Definição do conceito principal e criação de um símbolo que traduza essa ideia</li><br />
<li>Avaliação da consistência da identidade em diversos tamanhos e dispositivos/plataformas</li><br />
</ul><br />
<br />
== Iconografia ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
É o conjunto de ícones padrão de uma interface, signos visuais que representam outro objeto por força de semelhança. Ícones são signos substitutivos (podem ser usados no lugar da coisa representada) e fundamentais na interação dos usuários com os computadores, pois indicam as zonas de acionamento de comandos ou reforçam visualmente alguma ação que o sistema apresenta.<br />
<br />
'''Importância'''<br />
<br />
Uma iconografia bem projetada é essencial para qualquer interface. Suas vantagens são impressionantes, pois dispensam leitura, logo podem ser identificadas por analfabetos, estrangeiros, etc. São compreendidos rapidamente diminuindo o tempo de interação, são mais facilmente memorizados e otimizam o espaço nas telas.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Ícones da interface (menus, funcionalidades, alertas, botões...)</li><br />
<li>Ícones do produto (aplicativo, favicon, etc.)</li><br />
</ul><br />
<br />
== Acessibilidade ==<br />
<br />
'''O que é?'''<br />
<br />
Acessibilidade é definida como a possibilidade de qualquer pessoa, independentemente de suas capacidades físicomotoras, perceptivas, culturais e sociais, usufruir os benefícios de uma vida em sociedade, tendo a possibilidade de participar de qualquer atividade, até as que incluem o uso de produtos, serviços e informações, com o mínimo de restrição possível.<br />
<br />
'''Importância'''<br />
<br />
Está ligado intimamente com a experiência do usuário e com toda a produção tanto de código quanto visual. É mais fácil e eficiente planejá-la desde o início para evitar retrabalho.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Seguir os padrões de desenvolvimento Web da W3C (cor, contraste, tamanhos etc.)</li><br />
<li>Seguir diretrizes e recomendações de acessibilidade do WAI, WCAG e WAI-ARIA (navegabilidade, HTML, etc.)</li><br />
<li>Realizar avaliação de acessibilidade</li><br />
</ul><br />
<br />
== Fluxo de navegação ==<br />
<br />
'''O que é?'''<br />
<br />
Uma representação visual do fluxo do usuário para completar tarefas dentro de um sistema. Exemplo: Em um site, o usuário começa pela na página inicial, segue para a página de um produto, depois vai até o carrinho de compras – e assim por diante. É a perspectiva do usuário sobre a organização do site, que ajuda a identificar quais passos precisam ser melhorados ou redesenhados.<br />
'''<br />
Importância'''<br />
<br />
Define a navegação bem como a utilização de botões/menus/listas e outros componentes de interação.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Simplificar processos</li><br />
<li>Redefinir fluxos de interação</li><br />
</ul><br />
<br />
== Mapa do site ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Consiste em um diagrama das páginas/seções de um site/app/sistema/etc organizadas hierarquicamente.<br />
<br />
'''Importância'''<br />
<br />
Ajuda a visualizar e compreender a estrutura básica e a navegação entre as diferentes partes do sistema. A partir dele podemos definir a navegação macro e ideal do usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Listagem de seções</li><br />
<li>Montagem de mapa do site</li><br />
</ul><br />
<br />
== Sketch ==<br />
<br />
'''O que é?'''<br />
<br />
Uma forma rápida de rabiscar uma nova interface usando papel e caneta sem compromisso com a fidelidade de formas, cores e detalhes dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Podem ser muito úteis para validar rapidamente conceitos de produtos e ideias de design com os outros membros da equipe e com usuários.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Sketch manual</li><br />
<li>Sketch digital</li><br />
</ul><br />
<br />
== Wireframe ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um guia visual que representa a estrutura da página, bem como sua hierarquia e os principais elementos que a compõem com maior fidelidade de proporções e posicionamento mais definidos dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Útil para discutir ideias com o time e com os clientes, e também para guiar o trabalho dos Diretores de Arte e Desenvolvedores.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Planejamento</li><br />
<li>Criação de wireframe</li><br />
<li>Validação</li><br />
</ul><br />
<br />
== Mockup ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma representação estática de média a alta fidelidade de um site/app/sistema/etc. Muitas vezes um mockup é um rascunho bem próximo do design final do produto, ou até o próprio produto final.<br />
<br />
'''Importância'''<br />
<br />
Úteis para vender a ideia do produto antes de ele estar pronto. Não possuem a resistência dos entregáveis de baixa fidelidade em apresentações e são ótimos coletores de feedback.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Planejamento</li><br />
<li>Desenvolvimento</li><br />
<li>Avaliação da consistência da Identidade Visual em determinados dispositivos/plataformas</li><br />
<li>Validação</li><br />
</ul><br />
<br />
== Prototipagem ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um protótipo é uma simulação da navegação e de algumas funcionalidades de um site/app/sistema, composto normalmente por sketch/wireframes/mockup clicáveis.<br />
<br />
'''Importância'''<br />
<br />
É uma forma rápida de validar e testar um produto antes de desenvolvê-lo do começo ao fim.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Protótipo sketch</li><br />
<li>Protótipo wireframe</li><br />
<li>Protótipo mockup</li><br />
</ul><br />
<br />
== Telas de ajuda e tutorial ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Montagem de imagens ou animações que mostram um passo a passo para guiar a utilização de um produto.<br />
<br />
'''Importância'''<br />
<br />
Identifica as ferramentas e funcionamento de um produto facilitando seu reconhecimento pelo usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Criação de pranchas que demonstrem o fluxo de navegação pelas telas do produto</li><br />
<li>Simulações animadas interativas com instruções que guiam o usuário</li><br />
<li>Telas de ajuda dentro do próprio produto com textos e indicações de como utilizá-lo</li><br />
</ul><br />
<br />
== Pranchas de apresentação ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Documento para visualização e entendimento das telas e conceitos aplicados em um projeto ou produto.<br />
<br />
'''Importância'''<br />
<br />
Podem ser utilizadas em apresentações para auxiliar o cliente a visualizar o que foi planejado, por que foi planejado e sua importância para o produto.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Proposta de sketch</li><br />
<li>Proposta de wireframe</li><br />
<li>Proposta de mapa de site</li><br />
<li>Proposta de fluxograma de navegação</li><br />
<li>Proposta de identidade visual (logotipo, ícones, elementos gráficos etc.)</li><br />
<li>Proposta de iconografia</li><br />
</ul><br />
<br />
== Testes de usabilidade ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Entrevista com o consumidor, onde pede-se que ele execute uma série de tarefas em um protótipo ou mesmo no produto final. À medida em que o consumidor interage com o produto, o pesquisador faz anotações sobre seu comportamento, dificuldades e suas opiniões.<br />
<br />
'''Importância'''<br />
<br />
Essencial para atualizações do produto. Ajuda a validar fluxos, layouts e funcionalidades aumentando a qualidade, o desempenho e a empatia pelo produto final.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Análise de resultado dos testes aplicado ao usuário</li><br />
<li>Planejamento de ações</li><br />
<li>Produção</li><br />
</ul><br />
<br />
== HTML/CSS (front-end design) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Codificação em HTML/CSS/JQUERY do mockup do layout final.<br />
<br />
'''Importância'''<br />
<br />
Traduz o que foi planejado no mockup com fidelidade e estrutura para a equipe desenvolvimento implementar as interações e funcionalidades.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Guia de montagemHTML/CSS (proporções, distâncias, tamanho de fonte, etc)</li><br />
<li>Montagem HTML/CSS (estruturação, customização de componentes padrão, etc)</li><br />
</ul><br />
<br />
== Folha de estilos (biblioteca de padrões) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma lista prática com exemplos (e às vezes códigos) dos padrões visuais que serão utilizados em todo o site. É fundamental para a padronização dos elementos da interface, facilitando a produção e reprodução das demais telas.<br />
<br />
'''Importância'''<br />
<br />
Não só ajuda a manter o design consistente em diferentes telas, mas também facilita a vida dos desenvolvedores na hora de implementar os elementos.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Componentes de interação (botões, listas suspensas, setas de navegação, etc.)</li><br />
<li>Componentes de formatação (fonte, cores, tamanhos, espaçamentos, etc.)</li><br />
<li>Componentes de marcação (HTML e CSS)</li><br />
</ul><br />
<br />
== Interface animada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Animações pontuais que têm a intenção de tornar a experiência do usuário mais amigável e familiar aos seus referenciais de interação analógica/digital. Podem ser aplicadas em ícones, transições, menus, janelas, botões, etc.<br />
<br />
'''Importância'''<br />
<br />
Animações de interface ajudam a envolver o usuário e encorajam uma exploração mais profunda de um app ou site. Auxilia na contextualização de uma sequência de ações. Instiga o usuário a questionar “O que vai acontecer se eu tocar isso?”, ”E depois disso?”.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Planejamento de animação</li><br />
<li>Guia de animação (documento com especificações de execução)</li><br />
<li>Criação de animação codificada</li><br />
</ul><br />
<br />
== Validação técnica (designer) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Revisão e validação do produto funcional em relação ao que foi planejado.<br />
<br />
'''Importância'''<br />
<br />
Garantir que todo o planejamento, em todas as áreas competentes a equipe, tenha sido executado para que o produto chegue com a máxima qualidade para a análise do cliente.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Validação de montagem HTML/CSS</li><br />
<li>Validação pós back-end</li><br />
<li>Validação de usabilidade básica no dispositivo/paltaforma final</li><br />
</ul><br />
<br />
== Interface gamificada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uso de elementos visuais atrativos que auxiliam na exposição dos dados de desempenho do usuário/jogador. Adiciona uma experiência lúdica, mais próxima de um jogo que de um sistema.<br />
<br />
'''Importância'''<br />
<br />
Tem o objetivo de tornar a experiência de uso de um determinado produto diferenciado e instigante.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Estudo de similares</li><br />
<li>Pesquisa de interesses do público alvo</li><br />
<li>Planejamento da gamificação</li><br />
<li>Planejamento e mapeamento do impacto no layout</li><br />
</ul></div>Danilo.pontechellehttp://wiki.mstech.com.br/index.php?title=Designers_da_Informa%C3%A7%C3%A3o&diff=815Designers da Informação2016-06-23T19:33:23Z<p>Danilo.pontechelle: </p>
<hr />
<div><br />
A equipe de Design da Informação tem como principais responsabilidades arquitetar e realizar fluxos de informação na concepção de produtos, construção de interfaces gráficas e identidades visuais, bem como elaborar soluções criativas no que compete a usabilidade, navegabilidade e facilidade de interação, definir padrões reaproveitáveis e executar procedimentos práticos, assim como a codificação Front End (HTML/CSS), a fim de garantir a melhor experiência entre o produto concebido e o usuário final.<br />
<br />
Site da equipe: http://design.mstech.com.br/<br />
<br />
'''A equipe'''<br />
<br />
Contamos com quatro designers altamente capacitados e versados nas mais diferentes aptidões que são necessárias para desempenhar o papel de Designer da Informação:<br />
<ul><br />
<li>Danilo Martinelli Pontechelle;</li><br />
<li>Lucas Toledo Teixeira Evangelista;</li><br />
<li>Miriam Midori Haga;</li><br />
<li>Samuel de Aguiar Sabino.</li><br />
</ul><br />
<br />
== Planejamento geral ==<br />
<br />
<p><strong>O que é?</strong></p><br />
<p class="ng-binding">Análise de todos os requisitos relacionados ao projeto, tipos de plataforma envolvidas, objetivo do cliente, análise do público alvo, a fim de elaborar o planejamento da produção e também a concepção do produto.</p><br />
<p><strong>Importância</strong></p><br />
<p class="ng-binding">Fase crucial para entendimento do que precisa ser produzido e como será produzido assim como suas características.</p><br />
<p><strong>Atividades relacionadas</strong></p><br />
<ul class="lista-padrao"><br />
<!-- ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise de requisitos</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do objetivo do cliente</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do público alvo</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Concepção do produto</li><!-- end ngRepeat: relacionado in competencia.relacionados --><br />
</ul><br />
<br />
== Identidade Visual ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representa um produto/serviço por meio de símbolos, logotipos, fontes, áudios, animações, elementos gráficos e outros.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia um produto/serviço e é responsável pela comunicação de seus valores ao usuário/consumidor.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Estudos (análise de similares, brainstorm, rascunhos de solução)</li><br />
<li>Moodboard (prancha com paleta de cores e imagens de referência)</li><br />
<li>Elementos gráficos (patterns, ícones, grafismos etc.)</li><br />
<li>Layout (impresso, web, animação etc.)</li><br />
<li>Guidelines</li><br />
</ul><br />
<br />
== Logo do produto ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representação visual de um conceito, cuja forma, cores e fonte dão identidade a um produto.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia o produto em relação aos concorrentes. Também simboliza a sua filosofia e forma de atuação no mercado.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Pesquisa de referências de similares no mercado</li><br />
<li>Definição do conceito principal e criação de um símbolo que traduza essa ideia</li><br />
<li>Avaliação da consistência da identidade em diversos tamanhos e dispositivos/plataformas</li><br />
</ul><br />
<br />
== Iconografia ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
É o conjunto de ícones padrão de uma interface, signos visuais que representam outro objeto por força de semelhança. Ícones são signos substitutivos (podem ser usados no lugar da coisa representada) e fundamentais na interação dos usuários com os computadores, pois indicam as zonas de acionamento de comandos ou reforçam visualmente alguma ação que o sistema apresenta.<br />
<br />
'''Importância'''<br />
<br />
Uma iconografia bem projetada é essencial para qualquer interface. Suas vantagens são impressionantes, pois dispensam leitura, logo podem ser identificadas por analfabetos, estrangeiros, etc. São compreendidos rapidamente diminuindo o tempo de interação, são mais facilmente memorizados e otimizam o espaço nas telas.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Ícones da interface (menus, funcionalidades, alertas, botões...)</li><br />
<li>Ícones do produto (aplicativo, favicon, etc.)</li><br />
</ul><br />
<br />
== Acessibilidade ==<br />
<br />
'''O que é?'''<br />
<br />
Acessibilidade é definida como a possibilidade de qualquer pessoa, independentemente de suas capacidades físicomotoras, perceptivas, culturais e sociais, usufruir os benefícios de uma vida em sociedade, tendo a possibilidade de participar de qualquer atividade, até as que incluem o uso de produtos, serviços e informações, com o mínimo de restrição possível.<br />
<br />
'''Importância'''<br />
<br />
Está ligado intimamente com a experiência do usuário e com toda a produção tanto de código quanto visual. É mais fácil e eficiente planejá-la desde o início para evitar retrabalho.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Seguir os padrões de desenvolvimento Web da W3C (cor, contraste, tamanhos etc.)</li><br />
<li>Seguir diretrizes e recomendações de acessibilidade do WAI, WCAG e WAI-ARIA (navegabilidade, HTML, etc.)</li><br />
<li>Realizar avaliação de acessibilidade</li><br />
</ul><br />
<br />
== Fluxo de navegação ==<br />
<br />
'''O que é?'''<br />
<br />
Uma representação visual do fluxo do usuário para completar tarefas dentro de um sistema. Exemplo: Em um site, o usuário começa pela na página inicial, segue para a página de um produto, depois vai até o carrinho de compras – e assim por diante. É a perspectiva do usuário sobre a organização do site, que ajuda a identificar quais passos precisam ser melhorados ou redesenhados.<br />
'''<br />
Importância'''<br />
<br />
Define a navegação bem como a utilização de botões/menus/listas e outros componentes de interação.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Simplificar processos</li><br />
<li>Redefinir fluxos de interação</li><br />
</ul><br />
<br />
== Mapa do site ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Consiste em um diagrama das páginas/seções de um site/app/sistema/etc organizadas hierarquicamente.<br />
<br />
'''Importância'''<br />
<br />
Ajuda a visualizar e compreender a estrutura básica e a navegação entre as diferentes partes do sistema. A partir dele podemos definir a navegação macro e ideal do usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Listagem de seções</li><br />
<li>Montagem de mapa do site</li><br />
</ul><br />
<br />
== Sketch ==<br />
<br />
'''O que é?'''<br />
<br />
Uma forma rápida de rabiscar uma nova interface usando papel e caneta sem compromisso com a fidelidade de formas, cores e detalhes dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Podem ser muito úteis para validar rapidamente conceitos de produtos e ideias de design com os outros membros da equipe e com usuários.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Sketch manual</li><br />
<li>Sketch digital</li><br />
</ul><br />
<br />
== Wireframe ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um guia visual que representa a estrutura da página, bem como sua hierarquia e os principais elementos que a compõem com maior fidelidade de proporções e posicionamento mais definidos dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Útil para discutir ideias com o time e com os clientes, e também para guiar o trabalho dos Diretores de Arte e Desenvolvedores.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Planejamento</li><br />
<li>Criação de wireframe</li><br />
<li>Validação</li><br />
</ul><br />
<br />
== Mockup ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma representação estática de média a alta fidelidade de um site/app/sistema/etc. Muitas vezes um mockup é um rascunho bem próximo do design final do produto, ou até o próprio produto final.<br />
<br />
'''Importância'''<br />
<br />
Úteis para vender a ideia do produto antes de ele estar pronto. Não possuem a resistência dos entregáveis de baixa fidelidade em apresentações e são ótimos coletores de feedback.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Planejamento</li><br />
<li>Desenvolvimento</li><br />
<li>Avaliação da consistência da Identidade Visual em determinados dispositivos/plataformas</li><br />
<li>Validação</li><br />
</ul><br />
<br />
== Prototipagem ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um protótipo é uma simulação da navegação e de algumas funcionalidades de um site/app/sistema, composto normalmente por sketch/wireframes/mockup clicáveis.<br />
<br />
'''Importância'''<br />
<br />
É uma forma rápida de validar e testar um produto antes de desenvolvê-lo do começo ao fim.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Protótipo sketch</li><br />
<li>Protótipo wireframe</li><br />
<li>Protótipo mockup</li><br />
</ul><br />
<br />
== Telas de ajuda e tutorial ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Montagem de imagens ou animações que mostram um passo a passo para guiar a utilização de um produto.<br />
<br />
'''Importância'''<br />
<br />
Identifica as ferramentas e funcionamento de um produto facilitando seu reconhecimento pelo usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Criação de pranchas que demonstrem o fluxo de navegação pelas telas do produto</li><br />
<li>Simulações animadas interativas com instruções que guiam o usuário</li><br />
<li>Telas de ajuda dentro do próprio produto com textos e indicações de como utilizá-lo</li><br />
</ul><br />
<br />
== Pranchas de apresentação ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Documento para visualização e entendimento das telas e conceitos aplicados em um projeto ou produto.<br />
<br />
'''Importância'''<br />
<br />
Podem ser utilizadas em apresentações para auxiliar o cliente a visualizar o que foi planejado, por que foi planejado e sua importância para o produto.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Proposta de sketch</li><br />
<li>Proposta de wireframe</li><br />
<li>Proposta de mapa de site</li><br />
<li>Proposta de fluxograma de navegação</li><br />
<li>Proposta de identidade visual (logotipo, ícones, elementos gráficos etc.)</li><br />
<li>Proposta de iconografia</li><br />
</ul><br />
<br />
== Testes de usabilidade ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Entrevista com o consumidor, onde pede-se que ele execute uma série de tarefas em um protótipo ou mesmo no produto final. À medida em que o consumidor interage com o produto, o pesquisador faz anotações sobre seu comportamento, dificuldades e suas opiniões.<br />
<br />
'''Importância'''<br />
<br />
Essencial para atualizações do produto. Ajuda a validar fluxos, layouts e funcionalidades aumentando a qualidade, o desempenho e a empatia pelo produto final.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Análise de resultado dos testes aplicado ao usuário</li><br />
<li>Planejamento de ações</li><br />
<li>Produção</li><br />
</ul><br />
<br />
== HTML/CSS (front-end design) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Codificação em HTML/CSS/JQUERY do mockup do layout final.<br />
<br />
'''Importância'''<br />
<br />
Traduz o que foi planejado no mockup com fidelidade e estrutura para a equipe desenvolvimento implementar as interações e funcionalidades.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Guia de montagemHTML/CSS (proporções, distâncias, tamanho de fonte, etc)</li><br />
<li>Montagem HTML/CSS (estruturação, customização de componentes padrão, etc)</li><br />
</ul><br />
<br />
== Folha de estilos (biblioteca de padrões) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma lista prática com exemplos (e às vezes códigos) dos padrões visuais que serão utilizados em todo o site. É fundamental para a padronização dos elementos da interface, facilitando a produção e reprodução das demais telas.<br />
<br />
'''Importância'''<br />
<br />
Não só ajuda a manter o design consistente em diferentes telas, mas também facilita a vida dos desenvolvedores na hora de implementar os elementos.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Componentes de interação (botões, listas suspensas, setas de navegação, etc.)</li><br />
<li>Componentes de formatação (fonte, cores, tamanhos, espaçamentos, etc.)</li><br />
<li>Componentes de marcação (HTML e CSS)</li><br />
</ul><br />
<br />
== Interface animada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Animações pontuais que têm a intenção de tornar a experiência do usuário mais amigável e familiar aos seus referenciais de interação analógica/digital. Podem ser aplicadas em ícones, transições, menus, janelas, botões, etc.<br />
<br />
'''Importância'''<br />
<br />
Animações de interface ajudam a envolver o usuário e encorajam uma exploração mais profunda de um app ou site. Auxilia na contextualização de uma sequência de ações. Instiga o usuário a questionar “O que vai acontecer se eu tocar isso?”, ”E depois disso?”.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Planejamento de animação</li><br />
<li>Guia de animação (documento com especificações de execução)</li><br />
<li>Criação de animação codificada</li><br />
</ul><br />
<br />
== Validação técnica (designer) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Revisão e validação do produto funcional em relação ao que foi planejado.<br />
<br />
'''Importância'''<br />
<br />
Garantir que todo o planejamento, em todas as áreas competentes a equipe, tenha sido executado para que o produto chegue com a máxima qualidade para a análise do cliente.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Validação de montagem HTML/CSS</li><br />
<li>Validação pós back-end</li><br />
<li>Validação de usabilidade básica no dispositivo/paltaforma final</li><br />
</ul><br />
<br />
== Interface gamificada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uso de elementos visuais atrativos que auxiliam na exposição dos dados de desempenho do usuário/jogador. Adiciona uma experiência lúdica, mais próxima de um jogo que de um sistema.<br />
<br />
'''Importância'''<br />
<br />
Tem o objetivo de tornar a experiência de uso de um determinado produto diferenciado e instigante.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Estudo de similares</li><br />
<li>Pesquisa de interesses do público alvo</li><br />
<li>Planejamento da gamificação</li><br />
<li>Planejamento e mapeamento do impacto no layout</li><br />
</ul></div>Danilo.pontechellehttp://wiki.mstech.com.br/index.php?title=Designers_da_Informa%C3%A7%C3%A3o&diff=814Designers da Informação2016-06-23T19:32:19Z<p>Danilo.pontechelle: /* Planejamento geral */</p>
<hr />
<div><br />
A equipe de Design da Informação tem como principais responsabilidades arquitetar e realizar fluxos de informação na concepção de produtos, construção de interfaces gráficas e identidades visuais, bem como elaborar soluções criativas no que compete a usabilidade, navegabilidade e facilidade de interação, definir padrões reaproveitáveis e executar procedimentos práticos, assim como a codificação Front End (HTML/CSS), a fim de garantir a melhor experiência entre o produto concebido e o usuário final.<br />
<br />
'''A equipe'''<br />
<br />
Contamos com quatro designers altamente capacitados e versados nas mais diferentes aptidões que são necessárias para desempenhar o papel de Designer da Informação:<br />
<ul><br />
<li>Danilo Martinelli Pontechelle;</li><br />
<li>Lucas Toledo Teixeira Evangelista;</li><br />
<li>Miriam Midori Haga;</li><br />
<li>Samuel de Aguiar Sabino.</li><br />
</ul><br />
<br />
== Planejamento geral ==<br />
<br />
<p><strong>O que é?</strong></p><br />
<p class="ng-binding">Análise de todos os requisitos relacionados ao projeto, tipos de plataforma envolvidas, objetivo do cliente, análise do público alvo, a fim de elaborar o planejamento da produção e também a concepção do produto.</p><br />
<p><strong>Importância</strong></p><br />
<p class="ng-binding">Fase crucial para entendimento do que precisa ser produzido e como será produzido assim como suas características.</p><br />
<p><strong>Atividades relacionadas</strong></p><br />
<ul class="lista-padrao"><br />
<!-- ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise de requisitos</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do objetivo do cliente</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do público alvo</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Concepção do produto</li><!-- end ngRepeat: relacionado in competencia.relacionados --><br />
</ul><br />
<br />
== Identidade Visual ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representa um produto/serviço por meio de símbolos, logotipos, fontes, áudios, animações, elementos gráficos e outros.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia um produto/serviço e é responsável pela comunicação de seus valores ao usuário/consumidor.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Estudos (análise de similares, brainstorm, rascunhos de solução)</li><br />
<li>Moodboard (prancha com paleta de cores e imagens de referência)</li><br />
<li>Elementos gráficos (patterns, ícones, grafismos etc.)</li><br />
<li>Layout (impresso, web, animação etc.)</li><br />
<li>Guidelines</li><br />
</ul><br />
<br />
== Logo do produto ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representação visual de um conceito, cuja forma, cores e fonte dão identidade a um produto.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia o produto em relação aos concorrentes. Também simboliza a sua filosofia e forma de atuação no mercado.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Pesquisa de referências de similares no mercado</li><br />
<li>Definição do conceito principal e criação de um símbolo que traduza essa ideia</li><br />
<li>Avaliação da consistência da identidade em diversos tamanhos e dispositivos/plataformas</li><br />
</ul><br />
<br />
== Iconografia ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
É o conjunto de ícones padrão de uma interface, signos visuais que representam outro objeto por força de semelhança. Ícones são signos substitutivos (podem ser usados no lugar da coisa representada) e fundamentais na interação dos usuários com os computadores, pois indicam as zonas de acionamento de comandos ou reforçam visualmente alguma ação que o sistema apresenta.<br />
<br />
'''Importância'''<br />
<br />
Uma iconografia bem projetada é essencial para qualquer interface. Suas vantagens são impressionantes, pois dispensam leitura, logo podem ser identificadas por analfabetos, estrangeiros, etc. São compreendidos rapidamente diminuindo o tempo de interação, são mais facilmente memorizados e otimizam o espaço nas telas.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Ícones da interface (menus, funcionalidades, alertas, botões...)</li><br />
<li>Ícones do produto (aplicativo, favicon, etc.)</li><br />
</ul><br />
<br />
== Acessibilidade ==<br />
<br />
'''O que é?'''<br />
<br />
Acessibilidade é definida como a possibilidade de qualquer pessoa, independentemente de suas capacidades físicomotoras, perceptivas, culturais e sociais, usufruir os benefícios de uma vida em sociedade, tendo a possibilidade de participar de qualquer atividade, até as que incluem o uso de produtos, serviços e informações, com o mínimo de restrição possível.<br />
<br />
'''Importância'''<br />
<br />
Está ligado intimamente com a experiência do usuário e com toda a produção tanto de código quanto visual. É mais fácil e eficiente planejá-la desde o início para evitar retrabalho.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Seguir os padrões de desenvolvimento Web da W3C (cor, contraste, tamanhos etc.)</li><br />
<li>Seguir diretrizes e recomendações de acessibilidade do WAI, WCAG e WAI-ARIA (navegabilidade, HTML, etc.)</li><br />
<li>Realizar avaliação de acessibilidade</li><br />
</ul><br />
<br />
== Fluxo de navegação ==<br />
<br />
'''O que é?'''<br />
<br />
Uma representação visual do fluxo do usuário para completar tarefas dentro de um sistema. Exemplo: Em um site, o usuário começa pela na página inicial, segue para a página de um produto, depois vai até o carrinho de compras – e assim por diante. É a perspectiva do usuário sobre a organização do site, que ajuda a identificar quais passos precisam ser melhorados ou redesenhados.<br />
'''<br />
Importância'''<br />
<br />
Define a navegação bem como a utilização de botões/menus/listas e outros componentes de interação.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Simplificar processos</li><br />
<li>Redefinir fluxos de interação</li><br />
</ul><br />
<br />
== Mapa do site ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Consiste em um diagrama das páginas/seções de um site/app/sistema/etc organizadas hierarquicamente.<br />
<br />
'''Importância'''<br />
<br />
Ajuda a visualizar e compreender a estrutura básica e a navegação entre as diferentes partes do sistema. A partir dele podemos definir a navegação macro e ideal do usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Listagem de seções</li><br />
<li>Montagem de mapa do site</li><br />
</ul><br />
<br />
== Sketch ==<br />
<br />
'''O que é?'''<br />
<br />
Uma forma rápida de rabiscar uma nova interface usando papel e caneta sem compromisso com a fidelidade de formas, cores e detalhes dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Podem ser muito úteis para validar rapidamente conceitos de produtos e ideias de design com os outros membros da equipe e com usuários.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Sketch manual</li><br />
<li>Sketch digital</li><br />
</ul><br />
<br />
== Wireframe ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um guia visual que representa a estrutura da página, bem como sua hierarquia e os principais elementos que a compõem com maior fidelidade de proporções e posicionamento mais definidos dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Útil para discutir ideias com o time e com os clientes, e também para guiar o trabalho dos Diretores de Arte e Desenvolvedores.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Planejamento</li><br />
<li>Criação de wireframe</li><br />
<li>Validação</li><br />
</ul><br />
<br />
== Mockup ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma representação estática de média a alta fidelidade de um site/app/sistema/etc. Muitas vezes um mockup é um rascunho bem próximo do design final do produto, ou até o próprio produto final.<br />
<br />
'''Importância'''<br />
<br />
Úteis para vender a ideia do produto antes de ele estar pronto. Não possuem a resistência dos entregáveis de baixa fidelidade em apresentações e são ótimos coletores de feedback.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Planejamento</li><br />
<li>Desenvolvimento</li><br />
<li>Avaliação da consistência da Identidade Visual em determinados dispositivos/plataformas</li><br />
<li>Validação</li><br />
</ul><br />
<br />
== Prototipagem ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um protótipo é uma simulação da navegação e de algumas funcionalidades de um site/app/sistema, composto normalmente por sketch/wireframes/mockup clicáveis.<br />
<br />
'''Importância'''<br />
<br />
É uma forma rápida de validar e testar um produto antes de desenvolvê-lo do começo ao fim.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Protótipo sketch</li><br />
<li>Protótipo wireframe</li><br />
<li>Protótipo mockup</li><br />
</ul><br />
<br />
== Telas de ajuda e tutorial ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Montagem de imagens ou animações que mostram um passo a passo para guiar a utilização de um produto.<br />
<br />
'''Importância'''<br />
<br />
Identifica as ferramentas e funcionamento de um produto facilitando seu reconhecimento pelo usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Criação de pranchas que demonstrem o fluxo de navegação pelas telas do produto</li><br />
<li>Simulações animadas interativas com instruções que guiam o usuário</li><br />
<li>Telas de ajuda dentro do próprio produto com textos e indicações de como utilizá-lo</li><br />
</ul><br />
<br />
== Pranchas de apresentação ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Documento para visualização e entendimento das telas e conceitos aplicados em um projeto ou produto.<br />
<br />
'''Importância'''<br />
<br />
Podem ser utilizadas em apresentações para auxiliar o cliente a visualizar o que foi planejado, por que foi planejado e sua importância para o produto.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Proposta de sketch</li><br />
<li>Proposta de wireframe</li><br />
<li>Proposta de mapa de site</li><br />
<li>Proposta de fluxograma de navegação</li><br />
<li>Proposta de identidade visual (logotipo, ícones, elementos gráficos etc.)</li><br />
<li>Proposta de iconografia</li><br />
</ul><br />
<br />
== Testes de usabilidade ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Entrevista com o consumidor, onde pede-se que ele execute uma série de tarefas em um protótipo ou mesmo no produto final. À medida em que o consumidor interage com o produto, o pesquisador faz anotações sobre seu comportamento, dificuldades e suas opiniões.<br />
<br />
'''Importância'''<br />
<br />
Essencial para atualizações do produto. Ajuda a validar fluxos, layouts e funcionalidades aumentando a qualidade, o desempenho e a empatia pelo produto final.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Análise de resultado dos testes aplicado ao usuário</li><br />
<li>Planejamento de ações</li><br />
<li>Produção</li><br />
</ul><br />
<br />
== HTML/CSS (front-end design) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Codificação em HTML/CSS/JQUERY do mockup do layout final.<br />
<br />
'''Importância'''<br />
<br />
Traduz o que foi planejado no mockup com fidelidade e estrutura para a equipe desenvolvimento implementar as interações e funcionalidades.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Guia de montagemHTML/CSS (proporções, distâncias, tamanho de fonte, etc)</li><br />
<li>Montagem HTML/CSS (estruturação, customização de componentes padrão, etc)</li><br />
</ul><br />
<br />
== Folha de estilos (biblioteca de padrões) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma lista prática com exemplos (e às vezes códigos) dos padrões visuais que serão utilizados em todo o site. É fundamental para a padronização dos elementos da interface, facilitando a produção e reprodução das demais telas.<br />
<br />
'''Importância'''<br />
<br />
Não só ajuda a manter o design consistente em diferentes telas, mas também facilita a vida dos desenvolvedores na hora de implementar os elementos.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Componentes de interação (botões, listas suspensas, setas de navegação, etc.)</li><br />
<li>Componentes de formatação (fonte, cores, tamanhos, espaçamentos, etc.)</li><br />
<li>Componentes de marcação (HTML e CSS)</li><br />
</ul><br />
<br />
== Interface animada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Animações pontuais que têm a intenção de tornar a experiência do usuário mais amigável e familiar aos seus referenciais de interação analógica/digital. Podem ser aplicadas em ícones, transições, menus, janelas, botões, etc.<br />
<br />
'''Importância'''<br />
<br />
Animações de interface ajudam a envolver o usuário e encorajam uma exploração mais profunda de um app ou site. Auxilia na contextualização de uma sequência de ações. Instiga o usuário a questionar “O que vai acontecer se eu tocar isso?”, ”E depois disso?”.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Planejamento de animação</li><br />
<li>Guia de animação (documento com especificações de execução)</li><br />
<li>Criação de animação codificada</li><br />
</ul><br />
<br />
== Validação técnica (designer) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Revisão e validação do produto funcional em relação ao que foi planejado.<br />
<br />
'''Importância'''<br />
<br />
Garantir que todo o planejamento, em todas as áreas competentes a equipe, tenha sido executado para que o produto chegue com a máxima qualidade para a análise do cliente.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Validação de montagem HTML/CSS</li><br />
<li>Validação pós back-end</li><br />
<li>Validação de usabilidade básica no dispositivo/paltaforma final</li><br />
</ul><br />
<br />
== Interface gamificada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uso de elementos visuais atrativos que auxiliam na exposição dos dados de desempenho do usuário/jogador. Adiciona uma experiência lúdica, mais próxima de um jogo que de um sistema.<br />
<br />
'''Importância'''<br />
<br />
Tem o objetivo de tornar a experiência de uso de um determinado produto diferenciado e instigante.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Estudo de similares</li><br />
<li>Pesquisa de interesses do público alvo</li><br />
<li>Planejamento da gamificação</li><br />
<li>Planejamento e mapeamento do impacto no layout</li><br />
</ul></div>Danilo.pontechellehttp://wiki.mstech.com.br/index.php?title=Designers_da_Informa%C3%A7%C3%A3o&diff=813Designers da Informação2016-06-23T19:32:05Z<p>Danilo.pontechelle: /* Planejamento geral */</p>
<hr />
<div><br />
A equipe de Design da Informação tem como principais responsabilidades arquitetar e realizar fluxos de informação na concepção de produtos, construção de interfaces gráficas e identidades visuais, bem como elaborar soluções criativas no que compete a usabilidade, navegabilidade e facilidade de interação, definir padrões reaproveitáveis e executar procedimentos práticos, assim como a codificação Front End (HTML/CSS), a fim de garantir a melhor experiência entre o produto concebido e o usuário final.<br />
<br />
'''A equipe'''<br />
<br />
Contamos com quatro designers altamente capacitados e versados nas mais diferentes aptidões que são necessárias para desempenhar o papel de Designer da Informação:<br />
<ul><br />
<li>Danilo Martinelli Pontechelle;</li><br />
<li>Lucas Toledo Teixeira Evangelista;</li><br />
<li>Miriam Midori Haga;</li><br />
<li>Samuel de Aguiar Sabino.</li><br />
</ul><br />
<br />
== Planejamento geral ==<br />
<br />
<p><strong>O que é?</strong></p><br />
<p class="ng-binding">Análise de todos os requisitos relacionados ao projeto, tipos de plataforma envolvidas, objetivo do cliente, análise do público alvo, a fim de elaborar o planejamento da produção e também a concepção do produto.</p><br />
<p><strong>Importância</strong></p><br />
<p class="ng-binding">Fase crucial para entendimento do que precisa ser produzido e como será produzido assim como suas características.</p><br />
<p><strong>Atividades relacionadas</strong></p><br />
<ul class="lista-padrao"><br />
<!-- ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise de requisitos</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do objetivo do cliente</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do público alvo</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Concepção do produto</li><!-- end ngRepeat: relacionado in competencia.relacionados --><br />
</ul><br />
[[Mídia:http://design.mstech.com.br/images/planejamento.jpg]]<br />
<br />
== Identidade Visual ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representa um produto/serviço por meio de símbolos, logotipos, fontes, áudios, animações, elementos gráficos e outros.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia um produto/serviço e é responsável pela comunicação de seus valores ao usuário/consumidor.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Estudos (análise de similares, brainstorm, rascunhos de solução)</li><br />
<li>Moodboard (prancha com paleta de cores e imagens de referência)</li><br />
<li>Elementos gráficos (patterns, ícones, grafismos etc.)</li><br />
<li>Layout (impresso, web, animação etc.)</li><br />
<li>Guidelines</li><br />
</ul><br />
<br />
== Logo do produto ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representação visual de um conceito, cuja forma, cores e fonte dão identidade a um produto.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia o produto em relação aos concorrentes. Também simboliza a sua filosofia e forma de atuação no mercado.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Pesquisa de referências de similares no mercado</li><br />
<li>Definição do conceito principal e criação de um símbolo que traduza essa ideia</li><br />
<li>Avaliação da consistência da identidade em diversos tamanhos e dispositivos/plataformas</li><br />
</ul><br />
<br />
== Iconografia ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
É o conjunto de ícones padrão de uma interface, signos visuais que representam outro objeto por força de semelhança. Ícones são signos substitutivos (podem ser usados no lugar da coisa representada) e fundamentais na interação dos usuários com os computadores, pois indicam as zonas de acionamento de comandos ou reforçam visualmente alguma ação que o sistema apresenta.<br />
<br />
'''Importância'''<br />
<br />
Uma iconografia bem projetada é essencial para qualquer interface. Suas vantagens são impressionantes, pois dispensam leitura, logo podem ser identificadas por analfabetos, estrangeiros, etc. São compreendidos rapidamente diminuindo o tempo de interação, são mais facilmente memorizados e otimizam o espaço nas telas.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Ícones da interface (menus, funcionalidades, alertas, botões...)</li><br />
<li>Ícones do produto (aplicativo, favicon, etc.)</li><br />
</ul><br />
<br />
== Acessibilidade ==<br />
<br />
'''O que é?'''<br />
<br />
Acessibilidade é definida como a possibilidade de qualquer pessoa, independentemente de suas capacidades físicomotoras, perceptivas, culturais e sociais, usufruir os benefícios de uma vida em sociedade, tendo a possibilidade de participar de qualquer atividade, até as que incluem o uso de produtos, serviços e informações, com o mínimo de restrição possível.<br />
<br />
'''Importância'''<br />
<br />
Está ligado intimamente com a experiência do usuário e com toda a produção tanto de código quanto visual. É mais fácil e eficiente planejá-la desde o início para evitar retrabalho.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Seguir os padrões de desenvolvimento Web da W3C (cor, contraste, tamanhos etc.)</li><br />
<li>Seguir diretrizes e recomendações de acessibilidade do WAI, WCAG e WAI-ARIA (navegabilidade, HTML, etc.)</li><br />
<li>Realizar avaliação de acessibilidade</li><br />
</ul><br />
<br />
== Fluxo de navegação ==<br />
<br />
'''O que é?'''<br />
<br />
Uma representação visual do fluxo do usuário para completar tarefas dentro de um sistema. Exemplo: Em um site, o usuário começa pela na página inicial, segue para a página de um produto, depois vai até o carrinho de compras – e assim por diante. É a perspectiva do usuário sobre a organização do site, que ajuda a identificar quais passos precisam ser melhorados ou redesenhados.<br />
'''<br />
Importância'''<br />
<br />
Define a navegação bem como a utilização de botões/menus/listas e outros componentes de interação.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Simplificar processos</li><br />
<li>Redefinir fluxos de interação</li><br />
</ul><br />
<br />
== Mapa do site ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Consiste em um diagrama das páginas/seções de um site/app/sistema/etc organizadas hierarquicamente.<br />
<br />
'''Importância'''<br />
<br />
Ajuda a visualizar e compreender a estrutura básica e a navegação entre as diferentes partes do sistema. A partir dele podemos definir a navegação macro e ideal do usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Listagem de seções</li><br />
<li>Montagem de mapa do site</li><br />
</ul><br />
<br />
== Sketch ==<br />
<br />
'''O que é?'''<br />
<br />
Uma forma rápida de rabiscar uma nova interface usando papel e caneta sem compromisso com a fidelidade de formas, cores e detalhes dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Podem ser muito úteis para validar rapidamente conceitos de produtos e ideias de design com os outros membros da equipe e com usuários.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Sketch manual</li><br />
<li>Sketch digital</li><br />
</ul><br />
<br />
== Wireframe ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um guia visual que representa a estrutura da página, bem como sua hierarquia e os principais elementos que a compõem com maior fidelidade de proporções e posicionamento mais definidos dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Útil para discutir ideias com o time e com os clientes, e também para guiar o trabalho dos Diretores de Arte e Desenvolvedores.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Planejamento</li><br />
<li>Criação de wireframe</li><br />
<li>Validação</li><br />
</ul><br />
<br />
== Mockup ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma representação estática de média a alta fidelidade de um site/app/sistema/etc. Muitas vezes um mockup é um rascunho bem próximo do design final do produto, ou até o próprio produto final.<br />
<br />
'''Importância'''<br />
<br />
Úteis para vender a ideia do produto antes de ele estar pronto. Não possuem a resistência dos entregáveis de baixa fidelidade em apresentações e são ótimos coletores de feedback.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Planejamento</li><br />
<li>Desenvolvimento</li><br />
<li>Avaliação da consistência da Identidade Visual em determinados dispositivos/plataformas</li><br />
<li>Validação</li><br />
</ul><br />
<br />
== Prototipagem ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um protótipo é uma simulação da navegação e de algumas funcionalidades de um site/app/sistema, composto normalmente por sketch/wireframes/mockup clicáveis.<br />
<br />
'''Importância'''<br />
<br />
É uma forma rápida de validar e testar um produto antes de desenvolvê-lo do começo ao fim.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Protótipo sketch</li><br />
<li>Protótipo wireframe</li><br />
<li>Protótipo mockup</li><br />
</ul><br />
<br />
== Telas de ajuda e tutorial ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Montagem de imagens ou animações que mostram um passo a passo para guiar a utilização de um produto.<br />
<br />
'''Importância'''<br />
<br />
Identifica as ferramentas e funcionamento de um produto facilitando seu reconhecimento pelo usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Criação de pranchas que demonstrem o fluxo de navegação pelas telas do produto</li><br />
<li>Simulações animadas interativas com instruções que guiam o usuário</li><br />
<li>Telas de ajuda dentro do próprio produto com textos e indicações de como utilizá-lo</li><br />
</ul><br />
<br />
== Pranchas de apresentação ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Documento para visualização e entendimento das telas e conceitos aplicados em um projeto ou produto.<br />
<br />
'''Importância'''<br />
<br />
Podem ser utilizadas em apresentações para auxiliar o cliente a visualizar o que foi planejado, por que foi planejado e sua importância para o produto.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Proposta de sketch</li><br />
<li>Proposta de wireframe</li><br />
<li>Proposta de mapa de site</li><br />
<li>Proposta de fluxograma de navegação</li><br />
<li>Proposta de identidade visual (logotipo, ícones, elementos gráficos etc.)</li><br />
<li>Proposta de iconografia</li><br />
</ul><br />
<br />
== Testes de usabilidade ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Entrevista com o consumidor, onde pede-se que ele execute uma série de tarefas em um protótipo ou mesmo no produto final. À medida em que o consumidor interage com o produto, o pesquisador faz anotações sobre seu comportamento, dificuldades e suas opiniões.<br />
<br />
'''Importância'''<br />
<br />
Essencial para atualizações do produto. Ajuda a validar fluxos, layouts e funcionalidades aumentando a qualidade, o desempenho e a empatia pelo produto final.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Análise de resultado dos testes aplicado ao usuário</li><br />
<li>Planejamento de ações</li><br />
<li>Produção</li><br />
</ul><br />
<br />
== HTML/CSS (front-end design) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Codificação em HTML/CSS/JQUERY do mockup do layout final.<br />
<br />
'''Importância'''<br />
<br />
Traduz o que foi planejado no mockup com fidelidade e estrutura para a equipe desenvolvimento implementar as interações e funcionalidades.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Guia de montagemHTML/CSS (proporções, distâncias, tamanho de fonte, etc)</li><br />
<li>Montagem HTML/CSS (estruturação, customização de componentes padrão, etc)</li><br />
</ul><br />
<br />
== Folha de estilos (biblioteca de padrões) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma lista prática com exemplos (e às vezes códigos) dos padrões visuais que serão utilizados em todo o site. É fundamental para a padronização dos elementos da interface, facilitando a produção e reprodução das demais telas.<br />
<br />
'''Importância'''<br />
<br />
Não só ajuda a manter o design consistente em diferentes telas, mas também facilita a vida dos desenvolvedores na hora de implementar os elementos.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Componentes de interação (botões, listas suspensas, setas de navegação, etc.)</li><br />
<li>Componentes de formatação (fonte, cores, tamanhos, espaçamentos, etc.)</li><br />
<li>Componentes de marcação (HTML e CSS)</li><br />
</ul><br />
<br />
== Interface animada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Animações pontuais que têm a intenção de tornar a experiência do usuário mais amigável e familiar aos seus referenciais de interação analógica/digital. Podem ser aplicadas em ícones, transições, menus, janelas, botões, etc.<br />
<br />
'''Importância'''<br />
<br />
Animações de interface ajudam a envolver o usuário e encorajam uma exploração mais profunda de um app ou site. Auxilia na contextualização de uma sequência de ações. Instiga o usuário a questionar “O que vai acontecer se eu tocar isso?”, ”E depois disso?”.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Planejamento de animação</li><br />
<li>Guia de animação (documento com especificações de execução)</li><br />
<li>Criação de animação codificada</li><br />
</ul><br />
<br />
== Validação técnica (designer) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Revisão e validação do produto funcional em relação ao que foi planejado.<br />
<br />
'''Importância'''<br />
<br />
Garantir que todo o planejamento, em todas as áreas competentes a equipe, tenha sido executado para que o produto chegue com a máxima qualidade para a análise do cliente.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Validação de montagem HTML/CSS</li><br />
<li>Validação pós back-end</li><br />
<li>Validação de usabilidade básica no dispositivo/paltaforma final</li><br />
</ul><br />
<br />
== Interface gamificada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uso de elementos visuais atrativos que auxiliam na exposição dos dados de desempenho do usuário/jogador. Adiciona uma experiência lúdica, mais próxima de um jogo que de um sistema.<br />
<br />
'''Importância'''<br />
<br />
Tem o objetivo de tornar a experiência de uso de um determinado produto diferenciado e instigante.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Estudo de similares</li><br />
<li>Pesquisa de interesses do público alvo</li><br />
<li>Planejamento da gamificação</li><br />
<li>Planejamento e mapeamento do impacto no layout</li><br />
</ul></div>Danilo.pontechellehttp://wiki.mstech.com.br/index.php?title=Designers_da_Informa%C3%A7%C3%A3o&diff=812Designers da Informação2016-06-23T19:31:39Z<p>Danilo.pontechelle: /* Planejamento geral */</p>
<hr />
<div><br />
A equipe de Design da Informação tem como principais responsabilidades arquitetar e realizar fluxos de informação na concepção de produtos, construção de interfaces gráficas e identidades visuais, bem como elaborar soluções criativas no que compete a usabilidade, navegabilidade e facilidade de interação, definir padrões reaproveitáveis e executar procedimentos práticos, assim como a codificação Front End (HTML/CSS), a fim de garantir a melhor experiência entre o produto concebido e o usuário final.<br />
<br />
'''A equipe'''<br />
<br />
Contamos com quatro designers altamente capacitados e versados nas mais diferentes aptidões que são necessárias para desempenhar o papel de Designer da Informação:<br />
<ul><br />
<li>Danilo Martinelli Pontechelle;</li><br />
<li>Lucas Toledo Teixeira Evangelista;</li><br />
<li>Miriam Midori Haga;</li><br />
<li>Samuel de Aguiar Sabino.</li><br />
</ul><br />
<br />
== Planejamento geral ==<br />
<br />
<p><strong>O que é?</strong></p><br />
<p class="ng-binding">Análise de todos os requisitos relacionados ao projeto, tipos de plataforma envolvidas, objetivo do cliente, análise do público alvo, a fim de elaborar o planejamento da produção e também a concepção do produto.</p><br />
<p><strong>Importância</strong></p><br />
<p class="ng-binding">Fase crucial para entendimento do que precisa ser produzido e como será produzido assim como suas características.</p><br />
<p><strong>Atividades relacionadas</strong></p><br />
<ul class="lista-padrao"><br />
<!-- ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise de requisitos</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do objetivo do cliente</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do público alvo</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Concepção do produto</li><!-- end ngRepeat: relacionado in competencia.relacionados --><br />
</ul><br />
[[Arquivo:http://design.mstech.com.br/images/planejamento.jpg]]<br />
<br />
== Identidade Visual ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representa um produto/serviço por meio de símbolos, logotipos, fontes, áudios, animações, elementos gráficos e outros.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia um produto/serviço e é responsável pela comunicação de seus valores ao usuário/consumidor.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Estudos (análise de similares, brainstorm, rascunhos de solução)</li><br />
<li>Moodboard (prancha com paleta de cores e imagens de referência)</li><br />
<li>Elementos gráficos (patterns, ícones, grafismos etc.)</li><br />
<li>Layout (impresso, web, animação etc.)</li><br />
<li>Guidelines</li><br />
</ul><br />
<br />
== Logo do produto ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representação visual de um conceito, cuja forma, cores e fonte dão identidade a um produto.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia o produto em relação aos concorrentes. Também simboliza a sua filosofia e forma de atuação no mercado.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Pesquisa de referências de similares no mercado</li><br />
<li>Definição do conceito principal e criação de um símbolo que traduza essa ideia</li><br />
<li>Avaliação da consistência da identidade em diversos tamanhos e dispositivos/plataformas</li><br />
</ul><br />
<br />
== Iconografia ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
É o conjunto de ícones padrão de uma interface, signos visuais que representam outro objeto por força de semelhança. Ícones são signos substitutivos (podem ser usados no lugar da coisa representada) e fundamentais na interação dos usuários com os computadores, pois indicam as zonas de acionamento de comandos ou reforçam visualmente alguma ação que o sistema apresenta.<br />
<br />
'''Importância'''<br />
<br />
Uma iconografia bem projetada é essencial para qualquer interface. Suas vantagens são impressionantes, pois dispensam leitura, logo podem ser identificadas por analfabetos, estrangeiros, etc. São compreendidos rapidamente diminuindo o tempo de interação, são mais facilmente memorizados e otimizam o espaço nas telas.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Ícones da interface (menus, funcionalidades, alertas, botões...)</li><br />
<li>Ícones do produto (aplicativo, favicon, etc.)</li><br />
</ul><br />
<br />
== Acessibilidade ==<br />
<br />
'''O que é?'''<br />
<br />
Acessibilidade é definida como a possibilidade de qualquer pessoa, independentemente de suas capacidades físicomotoras, perceptivas, culturais e sociais, usufruir os benefícios de uma vida em sociedade, tendo a possibilidade de participar de qualquer atividade, até as que incluem o uso de produtos, serviços e informações, com o mínimo de restrição possível.<br />
<br />
'''Importância'''<br />
<br />
Está ligado intimamente com a experiência do usuário e com toda a produção tanto de código quanto visual. É mais fácil e eficiente planejá-la desde o início para evitar retrabalho.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Seguir os padrões de desenvolvimento Web da W3C (cor, contraste, tamanhos etc.)</li><br />
<li>Seguir diretrizes e recomendações de acessibilidade do WAI, WCAG e WAI-ARIA (navegabilidade, HTML, etc.)</li><br />
<li>Realizar avaliação de acessibilidade</li><br />
</ul><br />
<br />
== Fluxo de navegação ==<br />
<br />
'''O que é?'''<br />
<br />
Uma representação visual do fluxo do usuário para completar tarefas dentro de um sistema. Exemplo: Em um site, o usuário começa pela na página inicial, segue para a página de um produto, depois vai até o carrinho de compras – e assim por diante. É a perspectiva do usuário sobre a organização do site, que ajuda a identificar quais passos precisam ser melhorados ou redesenhados.<br />
'''<br />
Importância'''<br />
<br />
Define a navegação bem como a utilização de botões/menus/listas e outros componentes de interação.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Simplificar processos</li><br />
<li>Redefinir fluxos de interação</li><br />
</ul><br />
<br />
== Mapa do site ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Consiste em um diagrama das páginas/seções de um site/app/sistema/etc organizadas hierarquicamente.<br />
<br />
'''Importância'''<br />
<br />
Ajuda a visualizar e compreender a estrutura básica e a navegação entre as diferentes partes do sistema. A partir dele podemos definir a navegação macro e ideal do usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Listagem de seções</li><br />
<li>Montagem de mapa do site</li><br />
</ul><br />
<br />
== Sketch ==<br />
<br />
'''O que é?'''<br />
<br />
Uma forma rápida de rabiscar uma nova interface usando papel e caneta sem compromisso com a fidelidade de formas, cores e detalhes dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Podem ser muito úteis para validar rapidamente conceitos de produtos e ideias de design com os outros membros da equipe e com usuários.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Sketch manual</li><br />
<li>Sketch digital</li><br />
</ul><br />
<br />
== Wireframe ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um guia visual que representa a estrutura da página, bem como sua hierarquia e os principais elementos que a compõem com maior fidelidade de proporções e posicionamento mais definidos dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Útil para discutir ideias com o time e com os clientes, e também para guiar o trabalho dos Diretores de Arte e Desenvolvedores.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Planejamento</li><br />
<li>Criação de wireframe</li><br />
<li>Validação</li><br />
</ul><br />
<br />
== Mockup ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma representação estática de média a alta fidelidade de um site/app/sistema/etc. Muitas vezes um mockup é um rascunho bem próximo do design final do produto, ou até o próprio produto final.<br />
<br />
'''Importância'''<br />
<br />
Úteis para vender a ideia do produto antes de ele estar pronto. Não possuem a resistência dos entregáveis de baixa fidelidade em apresentações e são ótimos coletores de feedback.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Planejamento</li><br />
<li>Desenvolvimento</li><br />
<li>Avaliação da consistência da Identidade Visual em determinados dispositivos/plataformas</li><br />
<li>Validação</li><br />
</ul><br />
<br />
== Prototipagem ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um protótipo é uma simulação da navegação e de algumas funcionalidades de um site/app/sistema, composto normalmente por sketch/wireframes/mockup clicáveis.<br />
<br />
'''Importância'''<br />
<br />
É uma forma rápida de validar e testar um produto antes de desenvolvê-lo do começo ao fim.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Protótipo sketch</li><br />
<li>Protótipo wireframe</li><br />
<li>Protótipo mockup</li><br />
</ul><br />
<br />
== Telas de ajuda e tutorial ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Montagem de imagens ou animações que mostram um passo a passo para guiar a utilização de um produto.<br />
<br />
'''Importância'''<br />
<br />
Identifica as ferramentas e funcionamento de um produto facilitando seu reconhecimento pelo usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Criação de pranchas que demonstrem o fluxo de navegação pelas telas do produto</li><br />
<li>Simulações animadas interativas com instruções que guiam o usuário</li><br />
<li>Telas de ajuda dentro do próprio produto com textos e indicações de como utilizá-lo</li><br />
</ul><br />
<br />
== Pranchas de apresentação ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Documento para visualização e entendimento das telas e conceitos aplicados em um projeto ou produto.<br />
<br />
'''Importância'''<br />
<br />
Podem ser utilizadas em apresentações para auxiliar o cliente a visualizar o que foi planejado, por que foi planejado e sua importância para o produto.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Proposta de sketch</li><br />
<li>Proposta de wireframe</li><br />
<li>Proposta de mapa de site</li><br />
<li>Proposta de fluxograma de navegação</li><br />
<li>Proposta de identidade visual (logotipo, ícones, elementos gráficos etc.)</li><br />
<li>Proposta de iconografia</li><br />
</ul><br />
<br />
== Testes de usabilidade ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Entrevista com o consumidor, onde pede-se que ele execute uma série de tarefas em um protótipo ou mesmo no produto final. À medida em que o consumidor interage com o produto, o pesquisador faz anotações sobre seu comportamento, dificuldades e suas opiniões.<br />
<br />
'''Importância'''<br />
<br />
Essencial para atualizações do produto. Ajuda a validar fluxos, layouts e funcionalidades aumentando a qualidade, o desempenho e a empatia pelo produto final.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Análise de resultado dos testes aplicado ao usuário</li><br />
<li>Planejamento de ações</li><br />
<li>Produção</li><br />
</ul><br />
<br />
== HTML/CSS (front-end design) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Codificação em HTML/CSS/JQUERY do mockup do layout final.<br />
<br />
'''Importância'''<br />
<br />
Traduz o que foi planejado no mockup com fidelidade e estrutura para a equipe desenvolvimento implementar as interações e funcionalidades.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Guia de montagemHTML/CSS (proporções, distâncias, tamanho de fonte, etc)</li><br />
<li>Montagem HTML/CSS (estruturação, customização de componentes padrão, etc)</li><br />
</ul><br />
<br />
== Folha de estilos (biblioteca de padrões) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma lista prática com exemplos (e às vezes códigos) dos padrões visuais que serão utilizados em todo o site. É fundamental para a padronização dos elementos da interface, facilitando a produção e reprodução das demais telas.<br />
<br />
'''Importância'''<br />
<br />
Não só ajuda a manter o design consistente em diferentes telas, mas também facilita a vida dos desenvolvedores na hora de implementar os elementos.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Componentes de interação (botões, listas suspensas, setas de navegação, etc.)</li><br />
<li>Componentes de formatação (fonte, cores, tamanhos, espaçamentos, etc.)</li><br />
<li>Componentes de marcação (HTML e CSS)</li><br />
</ul><br />
<br />
== Interface animada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Animações pontuais que têm a intenção de tornar a experiência do usuário mais amigável e familiar aos seus referenciais de interação analógica/digital. Podem ser aplicadas em ícones, transições, menus, janelas, botões, etc.<br />
<br />
'''Importância'''<br />
<br />
Animações de interface ajudam a envolver o usuário e encorajam uma exploração mais profunda de um app ou site. Auxilia na contextualização de uma sequência de ações. Instiga o usuário a questionar “O que vai acontecer se eu tocar isso?”, ”E depois disso?”.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Planejamento de animação</li><br />
<li>Guia de animação (documento com especificações de execução)</li><br />
<li>Criação de animação codificada</li><br />
</ul><br />
<br />
== Validação técnica (designer) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Revisão e validação do produto funcional em relação ao que foi planejado.<br />
<br />
'''Importância'''<br />
<br />
Garantir que todo o planejamento, em todas as áreas competentes a equipe, tenha sido executado para que o produto chegue com a máxima qualidade para a análise do cliente.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Validação de montagem HTML/CSS</li><br />
<li>Validação pós back-end</li><br />
<li>Validação de usabilidade básica no dispositivo/paltaforma final</li><br />
</ul><br />
<br />
== Interface gamificada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uso de elementos visuais atrativos que auxiliam na exposição dos dados de desempenho do usuário/jogador. Adiciona uma experiência lúdica, mais próxima de um jogo que de um sistema.<br />
<br />
'''Importância'''<br />
<br />
Tem o objetivo de tornar a experiência de uso de um determinado produto diferenciado e instigante.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Estudo de similares</li><br />
<li>Pesquisa de interesses do público alvo</li><br />
<li>Planejamento da gamificação</li><br />
<li>Planejamento e mapeamento do impacto no layout</li><br />
</ul></div>Danilo.pontechellehttp://wiki.mstech.com.br/index.php?title=Designers_da_Informa%C3%A7%C3%A3o&diff=811Designers da Informação2016-06-23T19:30:38Z<p>Danilo.pontechelle: /* Testes de usabilidade */</p>
<hr />
<div><br />
A equipe de Design da Informação tem como principais responsabilidades arquitetar e realizar fluxos de informação na concepção de produtos, construção de interfaces gráficas e identidades visuais, bem como elaborar soluções criativas no que compete a usabilidade, navegabilidade e facilidade de interação, definir padrões reaproveitáveis e executar procedimentos práticos, assim como a codificação Front End (HTML/CSS), a fim de garantir a melhor experiência entre o produto concebido e o usuário final.<br />
<br />
'''A equipe'''<br />
<br />
Contamos com quatro designers altamente capacitados e versados nas mais diferentes aptidões que são necessárias para desempenhar o papel de Designer da Informação:<br />
<ul><br />
<li>Danilo Martinelli Pontechelle;</li><br />
<li>Lucas Toledo Teixeira Evangelista;</li><br />
<li>Miriam Midori Haga;</li><br />
<li>Samuel de Aguiar Sabino.</li><br />
</ul><br />
<br />
== Planejamento geral ==<br />
<br />
<p><strong>O que é?</strong></p><br />
<p class="ng-binding">Análise de todos os requisitos relacionados ao projeto, tipos de plataforma envolvidas, objetivo do cliente, análise do público alvo, a fim de elaborar o planejamento da produção e também a concepção do produto.</p><br />
<p><strong>Importância</strong></p><br />
<p class="ng-binding">Fase crucial para entendimento do que precisa ser produzido e como será produzido assim como suas características.</p><br />
<p><strong>Atividades relacionadas</strong></p><br />
<ul class="lista-padrao"><br />
<!-- ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise de requisitos</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do objetivo do cliente</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do público alvo</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Concepção do produto</li><!-- end ngRepeat: relacionado in competencia.relacionados --><br />
</ul><br />
<br />
== Identidade Visual ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representa um produto/serviço por meio de símbolos, logotipos, fontes, áudios, animações, elementos gráficos e outros.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia um produto/serviço e é responsável pela comunicação de seus valores ao usuário/consumidor.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Estudos (análise de similares, brainstorm, rascunhos de solução)</li><br />
<li>Moodboard (prancha com paleta de cores e imagens de referência)</li><br />
<li>Elementos gráficos (patterns, ícones, grafismos etc.)</li><br />
<li>Layout (impresso, web, animação etc.)</li><br />
<li>Guidelines</li><br />
</ul><br />
<br />
== Logo do produto ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representação visual de um conceito, cuja forma, cores e fonte dão identidade a um produto.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia o produto em relação aos concorrentes. Também simboliza a sua filosofia e forma de atuação no mercado.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Pesquisa de referências de similares no mercado</li><br />
<li>Definição do conceito principal e criação de um símbolo que traduza essa ideia</li><br />
<li>Avaliação da consistência da identidade em diversos tamanhos e dispositivos/plataformas</li><br />
</ul><br />
<br />
== Iconografia ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
É o conjunto de ícones padrão de uma interface, signos visuais que representam outro objeto por força de semelhança. Ícones são signos substitutivos (podem ser usados no lugar da coisa representada) e fundamentais na interação dos usuários com os computadores, pois indicam as zonas de acionamento de comandos ou reforçam visualmente alguma ação que o sistema apresenta.<br />
<br />
'''Importância'''<br />
<br />
Uma iconografia bem projetada é essencial para qualquer interface. Suas vantagens são impressionantes, pois dispensam leitura, logo podem ser identificadas por analfabetos, estrangeiros, etc. São compreendidos rapidamente diminuindo o tempo de interação, são mais facilmente memorizados e otimizam o espaço nas telas.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Ícones da interface (menus, funcionalidades, alertas, botões...)</li><br />
<li>Ícones do produto (aplicativo, favicon, etc.)</li><br />
</ul><br />
<br />
== Acessibilidade ==<br />
<br />
'''O que é?'''<br />
<br />
Acessibilidade é definida como a possibilidade de qualquer pessoa, independentemente de suas capacidades físicomotoras, perceptivas, culturais e sociais, usufruir os benefícios de uma vida em sociedade, tendo a possibilidade de participar de qualquer atividade, até as que incluem o uso de produtos, serviços e informações, com o mínimo de restrição possível.<br />
<br />
'''Importância'''<br />
<br />
Está ligado intimamente com a experiência do usuário e com toda a produção tanto de código quanto visual. É mais fácil e eficiente planejá-la desde o início para evitar retrabalho.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Seguir os padrões de desenvolvimento Web da W3C (cor, contraste, tamanhos etc.)</li><br />
<li>Seguir diretrizes e recomendações de acessibilidade do WAI, WCAG e WAI-ARIA (navegabilidade, HTML, etc.)</li><br />
<li>Realizar avaliação de acessibilidade</li><br />
</ul><br />
<br />
== Fluxo de navegação ==<br />
<br />
'''O que é?'''<br />
<br />
Uma representação visual do fluxo do usuário para completar tarefas dentro de um sistema. Exemplo: Em um site, o usuário começa pela na página inicial, segue para a página de um produto, depois vai até o carrinho de compras – e assim por diante. É a perspectiva do usuário sobre a organização do site, que ajuda a identificar quais passos precisam ser melhorados ou redesenhados.<br />
'''<br />
Importância'''<br />
<br />
Define a navegação bem como a utilização de botões/menus/listas e outros componentes de interação.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Simplificar processos</li><br />
<li>Redefinir fluxos de interação</li><br />
</ul><br />
<br />
== Mapa do site ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Consiste em um diagrama das páginas/seções de um site/app/sistema/etc organizadas hierarquicamente.<br />
<br />
'''Importância'''<br />
<br />
Ajuda a visualizar e compreender a estrutura básica e a navegação entre as diferentes partes do sistema. A partir dele podemos definir a navegação macro e ideal do usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Listagem de seções</li><br />
<li>Montagem de mapa do site</li><br />
</ul><br />
<br />
== Sketch ==<br />
<br />
'''O que é?'''<br />
<br />
Uma forma rápida de rabiscar uma nova interface usando papel e caneta sem compromisso com a fidelidade de formas, cores e detalhes dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Podem ser muito úteis para validar rapidamente conceitos de produtos e ideias de design com os outros membros da equipe e com usuários.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Sketch manual</li><br />
<li>Sketch digital</li><br />
</ul><br />
<br />
== Wireframe ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um guia visual que representa a estrutura da página, bem como sua hierarquia e os principais elementos que a compõem com maior fidelidade de proporções e posicionamento mais definidos dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Útil para discutir ideias com o time e com os clientes, e também para guiar o trabalho dos Diretores de Arte e Desenvolvedores.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Planejamento</li><br />
<li>Criação de wireframe</li><br />
<li>Validação</li><br />
</ul><br />
<br />
== Mockup ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma representação estática de média a alta fidelidade de um site/app/sistema/etc. Muitas vezes um mockup é um rascunho bem próximo do design final do produto, ou até o próprio produto final.<br />
<br />
'''Importância'''<br />
<br />
Úteis para vender a ideia do produto antes de ele estar pronto. Não possuem a resistência dos entregáveis de baixa fidelidade em apresentações e são ótimos coletores de feedback.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Planejamento</li><br />
<li>Desenvolvimento</li><br />
<li>Avaliação da consistência da Identidade Visual em determinados dispositivos/plataformas</li><br />
<li>Validação</li><br />
</ul><br />
<br />
== Prototipagem ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um protótipo é uma simulação da navegação e de algumas funcionalidades de um site/app/sistema, composto normalmente por sketch/wireframes/mockup clicáveis.<br />
<br />
'''Importância'''<br />
<br />
É uma forma rápida de validar e testar um produto antes de desenvolvê-lo do começo ao fim.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Protótipo sketch</li><br />
<li>Protótipo wireframe</li><br />
<li>Protótipo mockup</li><br />
</ul><br />
<br />
== Telas de ajuda e tutorial ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Montagem de imagens ou animações que mostram um passo a passo para guiar a utilização de um produto.<br />
<br />
'''Importância'''<br />
<br />
Identifica as ferramentas e funcionamento de um produto facilitando seu reconhecimento pelo usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Criação de pranchas que demonstrem o fluxo de navegação pelas telas do produto</li><br />
<li>Simulações animadas interativas com instruções que guiam o usuário</li><br />
<li>Telas de ajuda dentro do próprio produto com textos e indicações de como utilizá-lo</li><br />
</ul><br />
<br />
== Pranchas de apresentação ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Documento para visualização e entendimento das telas e conceitos aplicados em um projeto ou produto.<br />
<br />
'''Importância'''<br />
<br />
Podem ser utilizadas em apresentações para auxiliar o cliente a visualizar o que foi planejado, por que foi planejado e sua importância para o produto.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Proposta de sketch</li><br />
<li>Proposta de wireframe</li><br />
<li>Proposta de mapa de site</li><br />
<li>Proposta de fluxograma de navegação</li><br />
<li>Proposta de identidade visual (logotipo, ícones, elementos gráficos etc.)</li><br />
<li>Proposta de iconografia</li><br />
</ul><br />
<br />
== Testes de usabilidade ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Entrevista com o consumidor, onde pede-se que ele execute uma série de tarefas em um protótipo ou mesmo no produto final. À medida em que o consumidor interage com o produto, o pesquisador faz anotações sobre seu comportamento, dificuldades e suas opiniões.<br />
<br />
'''Importância'''<br />
<br />
Essencial para atualizações do produto. Ajuda a validar fluxos, layouts e funcionalidades aumentando a qualidade, o desempenho e a empatia pelo produto final.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Análise de resultado dos testes aplicado ao usuário</li><br />
<li>Planejamento de ações</li><br />
<li>Produção</li><br />
</ul><br />
<br />
== HTML/CSS (front-end design) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Codificação em HTML/CSS/JQUERY do mockup do layout final.<br />
<br />
'''Importância'''<br />
<br />
Traduz o que foi planejado no mockup com fidelidade e estrutura para a equipe desenvolvimento implementar as interações e funcionalidades.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Guia de montagemHTML/CSS (proporções, distâncias, tamanho de fonte, etc)</li><br />
<li>Montagem HTML/CSS (estruturação, customização de componentes padrão, etc)</li><br />
</ul><br />
<br />
== Folha de estilos (biblioteca de padrões) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma lista prática com exemplos (e às vezes códigos) dos padrões visuais que serão utilizados em todo o site. É fundamental para a padronização dos elementos da interface, facilitando a produção e reprodução das demais telas.<br />
<br />
'''Importância'''<br />
<br />
Não só ajuda a manter o design consistente em diferentes telas, mas também facilita a vida dos desenvolvedores na hora de implementar os elementos.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Componentes de interação (botões, listas suspensas, setas de navegação, etc.)</li><br />
<li>Componentes de formatação (fonte, cores, tamanhos, espaçamentos, etc.)</li><br />
<li>Componentes de marcação (HTML e CSS)</li><br />
</ul><br />
<br />
== Interface animada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Animações pontuais que têm a intenção de tornar a experiência do usuário mais amigável e familiar aos seus referenciais de interação analógica/digital. Podem ser aplicadas em ícones, transições, menus, janelas, botões, etc.<br />
<br />
'''Importância'''<br />
<br />
Animações de interface ajudam a envolver o usuário e encorajam uma exploração mais profunda de um app ou site. Auxilia na contextualização de uma sequência de ações. Instiga o usuário a questionar “O que vai acontecer se eu tocar isso?”, ”E depois disso?”.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Planejamento de animação</li><br />
<li>Guia de animação (documento com especificações de execução)</li><br />
<li>Criação de animação codificada</li><br />
</ul><br />
<br />
== Validação técnica (designer) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Revisão e validação do produto funcional em relação ao que foi planejado.<br />
<br />
'''Importância'''<br />
<br />
Garantir que todo o planejamento, em todas as áreas competentes a equipe, tenha sido executado para que o produto chegue com a máxima qualidade para a análise do cliente.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Validação de montagem HTML/CSS</li><br />
<li>Validação pós back-end</li><br />
<li>Validação de usabilidade básica no dispositivo/paltaforma final</li><br />
</ul><br />
<br />
== Interface gamificada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uso de elementos visuais atrativos que auxiliam na exposição dos dados de desempenho do usuário/jogador. Adiciona uma experiência lúdica, mais próxima de um jogo que de um sistema.<br />
<br />
'''Importância'''<br />
<br />
Tem o objetivo de tornar a experiência de uso de um determinado produto diferenciado e instigante.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Estudo de similares</li><br />
<li>Pesquisa de interesses do público alvo</li><br />
<li>Planejamento da gamificação</li><br />
<li>Planejamento e mapeamento do impacto no layout</li><br />
</ul></div>Danilo.pontechellehttp://wiki.mstech.com.br/index.php?title=Designers_da_Informa%C3%A7%C3%A3o&diff=810Designers da Informação2016-06-23T19:30:12Z<p>Danilo.pontechelle: /* Interface gamificada */</p>
<hr />
<div><br />
A equipe de Design da Informação tem como principais responsabilidades arquitetar e realizar fluxos de informação na concepção de produtos, construção de interfaces gráficas e identidades visuais, bem como elaborar soluções criativas no que compete a usabilidade, navegabilidade e facilidade de interação, definir padrões reaproveitáveis e executar procedimentos práticos, assim como a codificação Front End (HTML/CSS), a fim de garantir a melhor experiência entre o produto concebido e o usuário final.<br />
<br />
'''A equipe'''<br />
<br />
Contamos com quatro designers altamente capacitados e versados nas mais diferentes aptidões que são necessárias para desempenhar o papel de Designer da Informação:<br />
<ul><br />
<li>Danilo Martinelli Pontechelle;</li><br />
<li>Lucas Toledo Teixeira Evangelista;</li><br />
<li>Miriam Midori Haga;</li><br />
<li>Samuel de Aguiar Sabino.</li><br />
</ul><br />
<br />
== Planejamento geral ==<br />
<br />
<p><strong>O que é?</strong></p><br />
<p class="ng-binding">Análise de todos os requisitos relacionados ao projeto, tipos de plataforma envolvidas, objetivo do cliente, análise do público alvo, a fim de elaborar o planejamento da produção e também a concepção do produto.</p><br />
<p><strong>Importância</strong></p><br />
<p class="ng-binding">Fase crucial para entendimento do que precisa ser produzido e como será produzido assim como suas características.</p><br />
<p><strong>Atividades relacionadas</strong></p><br />
<ul class="lista-padrao"><br />
<!-- ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise de requisitos</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do objetivo do cliente</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do público alvo</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Concepção do produto</li><!-- end ngRepeat: relacionado in competencia.relacionados --><br />
</ul><br />
<br />
== Identidade Visual ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representa um produto/serviço por meio de símbolos, logotipos, fontes, áudios, animações, elementos gráficos e outros.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia um produto/serviço e é responsável pela comunicação de seus valores ao usuário/consumidor.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Estudos (análise de similares, brainstorm, rascunhos de solução)</li><br />
<li>Moodboard (prancha com paleta de cores e imagens de referência)</li><br />
<li>Elementos gráficos (patterns, ícones, grafismos etc.)</li><br />
<li>Layout (impresso, web, animação etc.)</li><br />
<li>Guidelines</li><br />
</ul><br />
<br />
== Logo do produto ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representação visual de um conceito, cuja forma, cores e fonte dão identidade a um produto.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia o produto em relação aos concorrentes. Também simboliza a sua filosofia e forma de atuação no mercado.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Pesquisa de referências de similares no mercado</li><br />
<li>Definição do conceito principal e criação de um símbolo que traduza essa ideia</li><br />
<li>Avaliação da consistência da identidade em diversos tamanhos e dispositivos/plataformas</li><br />
</ul><br />
<br />
== Iconografia ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
É o conjunto de ícones padrão de uma interface, signos visuais que representam outro objeto por força de semelhança. Ícones são signos substitutivos (podem ser usados no lugar da coisa representada) e fundamentais na interação dos usuários com os computadores, pois indicam as zonas de acionamento de comandos ou reforçam visualmente alguma ação que o sistema apresenta.<br />
<br />
'''Importância'''<br />
<br />
Uma iconografia bem projetada é essencial para qualquer interface. Suas vantagens são impressionantes, pois dispensam leitura, logo podem ser identificadas por analfabetos, estrangeiros, etc. São compreendidos rapidamente diminuindo o tempo de interação, são mais facilmente memorizados e otimizam o espaço nas telas.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Ícones da interface (menus, funcionalidades, alertas, botões...)</li><br />
<li>Ícones do produto (aplicativo, favicon, etc.)</li><br />
</ul><br />
<br />
== Acessibilidade ==<br />
<br />
'''O que é?'''<br />
<br />
Acessibilidade é definida como a possibilidade de qualquer pessoa, independentemente de suas capacidades físicomotoras, perceptivas, culturais e sociais, usufruir os benefícios de uma vida em sociedade, tendo a possibilidade de participar de qualquer atividade, até as que incluem o uso de produtos, serviços e informações, com o mínimo de restrição possível.<br />
<br />
'''Importância'''<br />
<br />
Está ligado intimamente com a experiência do usuário e com toda a produção tanto de código quanto visual. É mais fácil e eficiente planejá-la desde o início para evitar retrabalho.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Seguir os padrões de desenvolvimento Web da W3C (cor, contraste, tamanhos etc.)</li><br />
<li>Seguir diretrizes e recomendações de acessibilidade do WAI, WCAG e WAI-ARIA (navegabilidade, HTML, etc.)</li><br />
<li>Realizar avaliação de acessibilidade</li><br />
</ul><br />
<br />
== Fluxo de navegação ==<br />
<br />
'''O que é?'''<br />
<br />
Uma representação visual do fluxo do usuário para completar tarefas dentro de um sistema. Exemplo: Em um site, o usuário começa pela na página inicial, segue para a página de um produto, depois vai até o carrinho de compras – e assim por diante. É a perspectiva do usuário sobre a organização do site, que ajuda a identificar quais passos precisam ser melhorados ou redesenhados.<br />
'''<br />
Importância'''<br />
<br />
Define a navegação bem como a utilização de botões/menus/listas e outros componentes de interação.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Simplificar processos</li><br />
<li>Redefinir fluxos de interação</li><br />
</ul><br />
<br />
== Mapa do site ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Consiste em um diagrama das páginas/seções de um site/app/sistema/etc organizadas hierarquicamente.<br />
<br />
'''Importância'''<br />
<br />
Ajuda a visualizar e compreender a estrutura básica e a navegação entre as diferentes partes do sistema. A partir dele podemos definir a navegação macro e ideal do usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Listagem de seções</li><br />
<li>Montagem de mapa do site</li><br />
</ul><br />
<br />
== Sketch ==<br />
<br />
'''O que é?'''<br />
<br />
Uma forma rápida de rabiscar uma nova interface usando papel e caneta sem compromisso com a fidelidade de formas, cores e detalhes dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Podem ser muito úteis para validar rapidamente conceitos de produtos e ideias de design com os outros membros da equipe e com usuários.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Sketch manual</li><br />
<li>Sketch digital</li><br />
</ul><br />
<br />
== Wireframe ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um guia visual que representa a estrutura da página, bem como sua hierarquia e os principais elementos que a compõem com maior fidelidade de proporções e posicionamento mais definidos dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Útil para discutir ideias com o time e com os clientes, e também para guiar o trabalho dos Diretores de Arte e Desenvolvedores.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Planejamento</li><br />
<li>Criação de wireframe</li><br />
<li>Validação</li><br />
</ul><br />
<br />
== Mockup ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma representação estática de média a alta fidelidade de um site/app/sistema/etc. Muitas vezes um mockup é um rascunho bem próximo do design final do produto, ou até o próprio produto final.<br />
<br />
'''Importância'''<br />
<br />
Úteis para vender a ideia do produto antes de ele estar pronto. Não possuem a resistência dos entregáveis de baixa fidelidade em apresentações e são ótimos coletores de feedback.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Planejamento</li><br />
<li>Desenvolvimento</li><br />
<li>Avaliação da consistência da Identidade Visual em determinados dispositivos/plataformas</li><br />
<li>Validação</li><br />
</ul><br />
<br />
== Prototipagem ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um protótipo é uma simulação da navegação e de algumas funcionalidades de um site/app/sistema, composto normalmente por sketch/wireframes/mockup clicáveis.<br />
<br />
'''Importância'''<br />
<br />
É uma forma rápida de validar e testar um produto antes de desenvolvê-lo do começo ao fim.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Protótipo sketch</li><br />
<li>Protótipo wireframe</li><br />
<li>Protótipo mockup</li><br />
</ul><br />
<br />
== Telas de ajuda e tutorial ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Montagem de imagens ou animações que mostram um passo a passo para guiar a utilização de um produto.<br />
<br />
'''Importância'''<br />
<br />
Identifica as ferramentas e funcionamento de um produto facilitando seu reconhecimento pelo usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Criação de pranchas que demonstrem o fluxo de navegação pelas telas do produto</li><br />
<li>Simulações animadas interativas com instruções que guiam o usuário</li><br />
<li>Telas de ajuda dentro do próprio produto com textos e indicações de como utilizá-lo</li><br />
</ul><br />
<br />
== Pranchas de apresentação ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Documento para visualização e entendimento das telas e conceitos aplicados em um projeto ou produto.<br />
<br />
'''Importância'''<br />
<br />
Podem ser utilizadas em apresentações para auxiliar o cliente a visualizar o que foi planejado, por que foi planejado e sua importância para o produto.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Proposta de sketch</li><br />
<li>Proposta de wireframe</li><br />
<li>Proposta de mapa de site</li><br />
<li>Proposta de fluxograma de navegação</li><br />
<li>Proposta de identidade visual (logotipo, ícones, elementos gráficos etc.)</li><br />
<li>Proposta de iconografia</li><br />
</ul><br />
<br />
== Testes de usabilidade ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Entrevista com o consumidor, onde pede-se que ele execute uma série de tarefas em um protótipo ou mesmo no produto final. À medida em que o consumidor interage com o produto, o pesquisador faz anotações sobre seu comportamento, dificuldades e suas opiniões.<br />
<br />
'''Importância'''<br />
<br />
Essencial para atualizações do produto. Ajuda a validar fluxos, layouts e funcionalidades aumentando a qualidade, o desempenho e a empatia pelo produto final.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Análise de resultado dos testes aplicado ao usuário<br />
Planejamento de ações<br />
Produção<br />
<br />
<br />
<br />
== HTML/CSS (front-end design) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Codificação em HTML/CSS/JQUERY do mockup do layout final.<br />
<br />
'''Importância'''<br />
<br />
Traduz o que foi planejado no mockup com fidelidade e estrutura para a equipe desenvolvimento implementar as interações e funcionalidades.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Guia de montagemHTML/CSS (proporções, distâncias, tamanho de fonte, etc)</li><br />
<li>Montagem HTML/CSS (estruturação, customização de componentes padrão, etc)</li><br />
</ul><br />
<br />
== Folha de estilos (biblioteca de padrões) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma lista prática com exemplos (e às vezes códigos) dos padrões visuais que serão utilizados em todo o site. É fundamental para a padronização dos elementos da interface, facilitando a produção e reprodução das demais telas.<br />
<br />
'''Importância'''<br />
<br />
Não só ajuda a manter o design consistente em diferentes telas, mas também facilita a vida dos desenvolvedores na hora de implementar os elementos.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Componentes de interação (botões, listas suspensas, setas de navegação, etc.)</li><br />
<li>Componentes de formatação (fonte, cores, tamanhos, espaçamentos, etc.)</li><br />
<li>Componentes de marcação (HTML e CSS)</li><br />
</ul><br />
<br />
== Interface animada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Animações pontuais que têm a intenção de tornar a experiência do usuário mais amigável e familiar aos seus referenciais de interação analógica/digital. Podem ser aplicadas em ícones, transições, menus, janelas, botões, etc.<br />
<br />
'''Importância'''<br />
<br />
Animações de interface ajudam a envolver o usuário e encorajam uma exploração mais profunda de um app ou site. Auxilia na contextualização de uma sequência de ações. Instiga o usuário a questionar “O que vai acontecer se eu tocar isso?”, ”E depois disso?”.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Planejamento de animação</li><br />
<li>Guia de animação (documento com especificações de execução)</li><br />
<li>Criação de animação codificada</li><br />
</ul><br />
<br />
== Validação técnica (designer) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Revisão e validação do produto funcional em relação ao que foi planejado.<br />
<br />
'''Importância'''<br />
<br />
Garantir que todo o planejamento, em todas as áreas competentes a equipe, tenha sido executado para que o produto chegue com a máxima qualidade para a análise do cliente.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Validação de montagem HTML/CSS</li><br />
<li>Validação pós back-end</li><br />
<li>Validação de usabilidade básica no dispositivo/paltaforma final</li><br />
</ul><br />
<br />
== Interface gamificada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uso de elementos visuais atrativos que auxiliam na exposição dos dados de desempenho do usuário/jogador. Adiciona uma experiência lúdica, mais próxima de um jogo que de um sistema.<br />
<br />
'''Importância'''<br />
<br />
Tem o objetivo de tornar a experiência de uso de um determinado produto diferenciado e instigante.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Estudo de similares</li><br />
<li>Pesquisa de interesses do público alvo</li><br />
<li>Planejamento da gamificação</li><br />
<li>Planejamento e mapeamento do impacto no layout</li><br />
</ul></div>Danilo.pontechellehttp://wiki.mstech.com.br/index.php?title=Designers_da_Informa%C3%A7%C3%A3o&diff=809Designers da Informação2016-06-23T19:29:54Z<p>Danilo.pontechelle: /* Validação técnica (designer) */</p>
<hr />
<div><br />
A equipe de Design da Informação tem como principais responsabilidades arquitetar e realizar fluxos de informação na concepção de produtos, construção de interfaces gráficas e identidades visuais, bem como elaborar soluções criativas no que compete a usabilidade, navegabilidade e facilidade de interação, definir padrões reaproveitáveis e executar procedimentos práticos, assim como a codificação Front End (HTML/CSS), a fim de garantir a melhor experiência entre o produto concebido e o usuário final.<br />
<br />
'''A equipe'''<br />
<br />
Contamos com quatro designers altamente capacitados e versados nas mais diferentes aptidões que são necessárias para desempenhar o papel de Designer da Informação:<br />
<ul><br />
<li>Danilo Martinelli Pontechelle;</li><br />
<li>Lucas Toledo Teixeira Evangelista;</li><br />
<li>Miriam Midori Haga;</li><br />
<li>Samuel de Aguiar Sabino.</li><br />
</ul><br />
<br />
== Planejamento geral ==<br />
<br />
<p><strong>O que é?</strong></p><br />
<p class="ng-binding">Análise de todos os requisitos relacionados ao projeto, tipos de plataforma envolvidas, objetivo do cliente, análise do público alvo, a fim de elaborar o planejamento da produção e também a concepção do produto.</p><br />
<p><strong>Importância</strong></p><br />
<p class="ng-binding">Fase crucial para entendimento do que precisa ser produzido e como será produzido assim como suas características.</p><br />
<p><strong>Atividades relacionadas</strong></p><br />
<ul class="lista-padrao"><br />
<!-- ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise de requisitos</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do objetivo do cliente</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do público alvo</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Concepção do produto</li><!-- end ngRepeat: relacionado in competencia.relacionados --><br />
</ul><br />
<br />
== Identidade Visual ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representa um produto/serviço por meio de símbolos, logotipos, fontes, áudios, animações, elementos gráficos e outros.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia um produto/serviço e é responsável pela comunicação de seus valores ao usuário/consumidor.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Estudos (análise de similares, brainstorm, rascunhos de solução)</li><br />
<li>Moodboard (prancha com paleta de cores e imagens de referência)</li><br />
<li>Elementos gráficos (patterns, ícones, grafismos etc.)</li><br />
<li>Layout (impresso, web, animação etc.)</li><br />
<li>Guidelines</li><br />
</ul><br />
<br />
== Logo do produto ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representação visual de um conceito, cuja forma, cores e fonte dão identidade a um produto.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia o produto em relação aos concorrentes. Também simboliza a sua filosofia e forma de atuação no mercado.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Pesquisa de referências de similares no mercado</li><br />
<li>Definição do conceito principal e criação de um símbolo que traduza essa ideia</li><br />
<li>Avaliação da consistência da identidade em diversos tamanhos e dispositivos/plataformas</li><br />
</ul><br />
<br />
== Iconografia ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
É o conjunto de ícones padrão de uma interface, signos visuais que representam outro objeto por força de semelhança. Ícones são signos substitutivos (podem ser usados no lugar da coisa representada) e fundamentais na interação dos usuários com os computadores, pois indicam as zonas de acionamento de comandos ou reforçam visualmente alguma ação que o sistema apresenta.<br />
<br />
'''Importância'''<br />
<br />
Uma iconografia bem projetada é essencial para qualquer interface. Suas vantagens são impressionantes, pois dispensam leitura, logo podem ser identificadas por analfabetos, estrangeiros, etc. São compreendidos rapidamente diminuindo o tempo de interação, são mais facilmente memorizados e otimizam o espaço nas telas.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Ícones da interface (menus, funcionalidades, alertas, botões...)</li><br />
<li>Ícones do produto (aplicativo, favicon, etc.)</li><br />
</ul><br />
<br />
== Acessibilidade ==<br />
<br />
'''O que é?'''<br />
<br />
Acessibilidade é definida como a possibilidade de qualquer pessoa, independentemente de suas capacidades físicomotoras, perceptivas, culturais e sociais, usufruir os benefícios de uma vida em sociedade, tendo a possibilidade de participar de qualquer atividade, até as que incluem o uso de produtos, serviços e informações, com o mínimo de restrição possível.<br />
<br />
'''Importância'''<br />
<br />
Está ligado intimamente com a experiência do usuário e com toda a produção tanto de código quanto visual. É mais fácil e eficiente planejá-la desde o início para evitar retrabalho.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Seguir os padrões de desenvolvimento Web da W3C (cor, contraste, tamanhos etc.)</li><br />
<li>Seguir diretrizes e recomendações de acessibilidade do WAI, WCAG e WAI-ARIA (navegabilidade, HTML, etc.)</li><br />
<li>Realizar avaliação de acessibilidade</li><br />
</ul><br />
<br />
== Fluxo de navegação ==<br />
<br />
'''O que é?'''<br />
<br />
Uma representação visual do fluxo do usuário para completar tarefas dentro de um sistema. Exemplo: Em um site, o usuário começa pela na página inicial, segue para a página de um produto, depois vai até o carrinho de compras – e assim por diante. É a perspectiva do usuário sobre a organização do site, que ajuda a identificar quais passos precisam ser melhorados ou redesenhados.<br />
'''<br />
Importância'''<br />
<br />
Define a navegação bem como a utilização de botões/menus/listas e outros componentes de interação.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Simplificar processos</li><br />
<li>Redefinir fluxos de interação</li><br />
</ul><br />
<br />
== Mapa do site ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Consiste em um diagrama das páginas/seções de um site/app/sistema/etc organizadas hierarquicamente.<br />
<br />
'''Importância'''<br />
<br />
Ajuda a visualizar e compreender a estrutura básica e a navegação entre as diferentes partes do sistema. A partir dele podemos definir a navegação macro e ideal do usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Listagem de seções</li><br />
<li>Montagem de mapa do site</li><br />
</ul><br />
<br />
== Sketch ==<br />
<br />
'''O que é?'''<br />
<br />
Uma forma rápida de rabiscar uma nova interface usando papel e caneta sem compromisso com a fidelidade de formas, cores e detalhes dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Podem ser muito úteis para validar rapidamente conceitos de produtos e ideias de design com os outros membros da equipe e com usuários.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Sketch manual</li><br />
<li>Sketch digital</li><br />
</ul><br />
<br />
== Wireframe ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um guia visual que representa a estrutura da página, bem como sua hierarquia e os principais elementos que a compõem com maior fidelidade de proporções e posicionamento mais definidos dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Útil para discutir ideias com o time e com os clientes, e também para guiar o trabalho dos Diretores de Arte e Desenvolvedores.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Planejamento</li><br />
<li>Criação de wireframe</li><br />
<li>Validação</li><br />
</ul><br />
<br />
== Mockup ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma representação estática de média a alta fidelidade de um site/app/sistema/etc. Muitas vezes um mockup é um rascunho bem próximo do design final do produto, ou até o próprio produto final.<br />
<br />
'''Importância'''<br />
<br />
Úteis para vender a ideia do produto antes de ele estar pronto. Não possuem a resistência dos entregáveis de baixa fidelidade em apresentações e são ótimos coletores de feedback.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Planejamento</li><br />
<li>Desenvolvimento</li><br />
<li>Avaliação da consistência da Identidade Visual em determinados dispositivos/plataformas</li><br />
<li>Validação</li><br />
</ul><br />
<br />
== Prototipagem ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um protótipo é uma simulação da navegação e de algumas funcionalidades de um site/app/sistema, composto normalmente por sketch/wireframes/mockup clicáveis.<br />
<br />
'''Importância'''<br />
<br />
É uma forma rápida de validar e testar um produto antes de desenvolvê-lo do começo ao fim.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Protótipo sketch</li><br />
<li>Protótipo wireframe</li><br />
<li>Protótipo mockup</li><br />
</ul><br />
<br />
== Telas de ajuda e tutorial ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Montagem de imagens ou animações que mostram um passo a passo para guiar a utilização de um produto.<br />
<br />
'''Importância'''<br />
<br />
Identifica as ferramentas e funcionamento de um produto facilitando seu reconhecimento pelo usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Criação de pranchas que demonstrem o fluxo de navegação pelas telas do produto</li><br />
<li>Simulações animadas interativas com instruções que guiam o usuário</li><br />
<li>Telas de ajuda dentro do próprio produto com textos e indicações de como utilizá-lo</li><br />
</ul><br />
<br />
== Pranchas de apresentação ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Documento para visualização e entendimento das telas e conceitos aplicados em um projeto ou produto.<br />
<br />
'''Importância'''<br />
<br />
Podem ser utilizadas em apresentações para auxiliar o cliente a visualizar o que foi planejado, por que foi planejado e sua importância para o produto.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Proposta de sketch</li><br />
<li>Proposta de wireframe</li><br />
<li>Proposta de mapa de site</li><br />
<li>Proposta de fluxograma de navegação</li><br />
<li>Proposta de identidade visual (logotipo, ícones, elementos gráficos etc.)</li><br />
<li>Proposta de iconografia</li><br />
</ul><br />
<br />
== Testes de usabilidade ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Entrevista com o consumidor, onde pede-se que ele execute uma série de tarefas em um protótipo ou mesmo no produto final. À medida em que o consumidor interage com o produto, o pesquisador faz anotações sobre seu comportamento, dificuldades e suas opiniões.<br />
<br />
'''Importância'''<br />
<br />
Essencial para atualizações do produto. Ajuda a validar fluxos, layouts e funcionalidades aumentando a qualidade, o desempenho e a empatia pelo produto final.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Análise de resultado dos testes aplicado ao usuário<br />
Planejamento de ações<br />
Produção<br />
<br />
<br />
<br />
== HTML/CSS (front-end design) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Codificação em HTML/CSS/JQUERY do mockup do layout final.<br />
<br />
'''Importância'''<br />
<br />
Traduz o que foi planejado no mockup com fidelidade e estrutura para a equipe desenvolvimento implementar as interações e funcionalidades.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Guia de montagemHTML/CSS (proporções, distâncias, tamanho de fonte, etc)</li><br />
<li>Montagem HTML/CSS (estruturação, customização de componentes padrão, etc)</li><br />
</ul><br />
<br />
== Folha de estilos (biblioteca de padrões) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma lista prática com exemplos (e às vezes códigos) dos padrões visuais que serão utilizados em todo o site. É fundamental para a padronização dos elementos da interface, facilitando a produção e reprodução das demais telas.<br />
<br />
'''Importância'''<br />
<br />
Não só ajuda a manter o design consistente em diferentes telas, mas também facilita a vida dos desenvolvedores na hora de implementar os elementos.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Componentes de interação (botões, listas suspensas, setas de navegação, etc.)</li><br />
<li>Componentes de formatação (fonte, cores, tamanhos, espaçamentos, etc.)</li><br />
<li>Componentes de marcação (HTML e CSS)</li><br />
</ul><br />
<br />
== Interface animada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Animações pontuais que têm a intenção de tornar a experiência do usuário mais amigável e familiar aos seus referenciais de interação analógica/digital. Podem ser aplicadas em ícones, transições, menus, janelas, botões, etc.<br />
<br />
'''Importância'''<br />
<br />
Animações de interface ajudam a envolver o usuário e encorajam uma exploração mais profunda de um app ou site. Auxilia na contextualização de uma sequência de ações. Instiga o usuário a questionar “O que vai acontecer se eu tocar isso?”, ”E depois disso?”.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Planejamento de animação</li><br />
<li>Guia de animação (documento com especificações de execução)</li><br />
<li>Criação de animação codificada</li><br />
</ul><br />
<br />
== Validação técnica (designer) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Revisão e validação do produto funcional em relação ao que foi planejado.<br />
<br />
'''Importância'''<br />
<br />
Garantir que todo o planejamento, em todas as áreas competentes a equipe, tenha sido executado para que o produto chegue com a máxima qualidade para a análise do cliente.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Validação de montagem HTML/CSS</li><br />
<li>Validação pós back-end</li><br />
<li>Validação de usabilidade básica no dispositivo/paltaforma final</li><br />
</ul><br />
<br />
== Interface gamificada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uso de elementos visuais atrativos que auxiliam na exposição dos dados de desempenho do usuário/jogador. Adiciona uma experiência lúdica, mais próxima de um jogo que de um sistema.<br />
<br />
'''Importância'''<br />
<br />
Tem o objetivo de tornar a experiência de uso de um determinado produto diferenciado e instigante.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Estudo de similares<br />
Pesquisa de interesses do público alvo<br />
Planejamento da gamificação<br />
Planejamento e mapeamento do impacto no layout</div>Danilo.pontechellehttp://wiki.mstech.com.br/index.php?title=Designers_da_Informa%C3%A7%C3%A3o&diff=808Designers da Informação2016-06-23T19:29:32Z<p>Danilo.pontechelle: /* Interface animada */</p>
<hr />
<div><br />
A equipe de Design da Informação tem como principais responsabilidades arquitetar e realizar fluxos de informação na concepção de produtos, construção de interfaces gráficas e identidades visuais, bem como elaborar soluções criativas no que compete a usabilidade, navegabilidade e facilidade de interação, definir padrões reaproveitáveis e executar procedimentos práticos, assim como a codificação Front End (HTML/CSS), a fim de garantir a melhor experiência entre o produto concebido e o usuário final.<br />
<br />
'''A equipe'''<br />
<br />
Contamos com quatro designers altamente capacitados e versados nas mais diferentes aptidões que são necessárias para desempenhar o papel de Designer da Informação:<br />
<ul><br />
<li>Danilo Martinelli Pontechelle;</li><br />
<li>Lucas Toledo Teixeira Evangelista;</li><br />
<li>Miriam Midori Haga;</li><br />
<li>Samuel de Aguiar Sabino.</li><br />
</ul><br />
<br />
== Planejamento geral ==<br />
<br />
<p><strong>O que é?</strong></p><br />
<p class="ng-binding">Análise de todos os requisitos relacionados ao projeto, tipos de plataforma envolvidas, objetivo do cliente, análise do público alvo, a fim de elaborar o planejamento da produção e também a concepção do produto.</p><br />
<p><strong>Importância</strong></p><br />
<p class="ng-binding">Fase crucial para entendimento do que precisa ser produzido e como será produzido assim como suas características.</p><br />
<p><strong>Atividades relacionadas</strong></p><br />
<ul class="lista-padrao"><br />
<!-- ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise de requisitos</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do objetivo do cliente</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do público alvo</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Concepção do produto</li><!-- end ngRepeat: relacionado in competencia.relacionados --><br />
</ul><br />
<br />
== Identidade Visual ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representa um produto/serviço por meio de símbolos, logotipos, fontes, áudios, animações, elementos gráficos e outros.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia um produto/serviço e é responsável pela comunicação de seus valores ao usuário/consumidor.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Estudos (análise de similares, brainstorm, rascunhos de solução)</li><br />
<li>Moodboard (prancha com paleta de cores e imagens de referência)</li><br />
<li>Elementos gráficos (patterns, ícones, grafismos etc.)</li><br />
<li>Layout (impresso, web, animação etc.)</li><br />
<li>Guidelines</li><br />
</ul><br />
<br />
== Logo do produto ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representação visual de um conceito, cuja forma, cores e fonte dão identidade a um produto.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia o produto em relação aos concorrentes. Também simboliza a sua filosofia e forma de atuação no mercado.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Pesquisa de referências de similares no mercado</li><br />
<li>Definição do conceito principal e criação de um símbolo que traduza essa ideia</li><br />
<li>Avaliação da consistência da identidade em diversos tamanhos e dispositivos/plataformas</li><br />
</ul><br />
<br />
== Iconografia ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
É o conjunto de ícones padrão de uma interface, signos visuais que representam outro objeto por força de semelhança. Ícones são signos substitutivos (podem ser usados no lugar da coisa representada) e fundamentais na interação dos usuários com os computadores, pois indicam as zonas de acionamento de comandos ou reforçam visualmente alguma ação que o sistema apresenta.<br />
<br />
'''Importância'''<br />
<br />
Uma iconografia bem projetada é essencial para qualquer interface. Suas vantagens são impressionantes, pois dispensam leitura, logo podem ser identificadas por analfabetos, estrangeiros, etc. São compreendidos rapidamente diminuindo o tempo de interação, são mais facilmente memorizados e otimizam o espaço nas telas.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Ícones da interface (menus, funcionalidades, alertas, botões...)</li><br />
<li>Ícones do produto (aplicativo, favicon, etc.)</li><br />
</ul><br />
<br />
== Acessibilidade ==<br />
<br />
'''O que é?'''<br />
<br />
Acessibilidade é definida como a possibilidade de qualquer pessoa, independentemente de suas capacidades físicomotoras, perceptivas, culturais e sociais, usufruir os benefícios de uma vida em sociedade, tendo a possibilidade de participar de qualquer atividade, até as que incluem o uso de produtos, serviços e informações, com o mínimo de restrição possível.<br />
<br />
'''Importância'''<br />
<br />
Está ligado intimamente com a experiência do usuário e com toda a produção tanto de código quanto visual. É mais fácil e eficiente planejá-la desde o início para evitar retrabalho.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Seguir os padrões de desenvolvimento Web da W3C (cor, contraste, tamanhos etc.)</li><br />
<li>Seguir diretrizes e recomendações de acessibilidade do WAI, WCAG e WAI-ARIA (navegabilidade, HTML, etc.)</li><br />
<li>Realizar avaliação de acessibilidade</li><br />
</ul><br />
<br />
== Fluxo de navegação ==<br />
<br />
'''O que é?'''<br />
<br />
Uma representação visual do fluxo do usuário para completar tarefas dentro de um sistema. Exemplo: Em um site, o usuário começa pela na página inicial, segue para a página de um produto, depois vai até o carrinho de compras – e assim por diante. É a perspectiva do usuário sobre a organização do site, que ajuda a identificar quais passos precisam ser melhorados ou redesenhados.<br />
'''<br />
Importância'''<br />
<br />
Define a navegação bem como a utilização de botões/menus/listas e outros componentes de interação.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Simplificar processos</li><br />
<li>Redefinir fluxos de interação</li><br />
</ul><br />
<br />
== Mapa do site ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Consiste em um diagrama das páginas/seções de um site/app/sistema/etc organizadas hierarquicamente.<br />
<br />
'''Importância'''<br />
<br />
Ajuda a visualizar e compreender a estrutura básica e a navegação entre as diferentes partes do sistema. A partir dele podemos definir a navegação macro e ideal do usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Listagem de seções</li><br />
<li>Montagem de mapa do site</li><br />
</ul><br />
<br />
== Sketch ==<br />
<br />
'''O que é?'''<br />
<br />
Uma forma rápida de rabiscar uma nova interface usando papel e caneta sem compromisso com a fidelidade de formas, cores e detalhes dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Podem ser muito úteis para validar rapidamente conceitos de produtos e ideias de design com os outros membros da equipe e com usuários.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Sketch manual</li><br />
<li>Sketch digital</li><br />
</ul><br />
<br />
== Wireframe ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um guia visual que representa a estrutura da página, bem como sua hierarquia e os principais elementos que a compõem com maior fidelidade de proporções e posicionamento mais definidos dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Útil para discutir ideias com o time e com os clientes, e também para guiar o trabalho dos Diretores de Arte e Desenvolvedores.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Planejamento</li><br />
<li>Criação de wireframe</li><br />
<li>Validação</li><br />
</ul><br />
<br />
== Mockup ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma representação estática de média a alta fidelidade de um site/app/sistema/etc. Muitas vezes um mockup é um rascunho bem próximo do design final do produto, ou até o próprio produto final.<br />
<br />
'''Importância'''<br />
<br />
Úteis para vender a ideia do produto antes de ele estar pronto. Não possuem a resistência dos entregáveis de baixa fidelidade em apresentações e são ótimos coletores de feedback.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Planejamento</li><br />
<li>Desenvolvimento</li><br />
<li>Avaliação da consistência da Identidade Visual em determinados dispositivos/plataformas</li><br />
<li>Validação</li><br />
</ul><br />
<br />
== Prototipagem ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um protótipo é uma simulação da navegação e de algumas funcionalidades de um site/app/sistema, composto normalmente por sketch/wireframes/mockup clicáveis.<br />
<br />
'''Importância'''<br />
<br />
É uma forma rápida de validar e testar um produto antes de desenvolvê-lo do começo ao fim.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Protótipo sketch</li><br />
<li>Protótipo wireframe</li><br />
<li>Protótipo mockup</li><br />
</ul><br />
<br />
== Telas de ajuda e tutorial ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Montagem de imagens ou animações que mostram um passo a passo para guiar a utilização de um produto.<br />
<br />
'''Importância'''<br />
<br />
Identifica as ferramentas e funcionamento de um produto facilitando seu reconhecimento pelo usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Criação de pranchas que demonstrem o fluxo de navegação pelas telas do produto</li><br />
<li>Simulações animadas interativas com instruções que guiam o usuário</li><br />
<li>Telas de ajuda dentro do próprio produto com textos e indicações de como utilizá-lo</li><br />
</ul><br />
<br />
== Pranchas de apresentação ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Documento para visualização e entendimento das telas e conceitos aplicados em um projeto ou produto.<br />
<br />
'''Importância'''<br />
<br />
Podem ser utilizadas em apresentações para auxiliar o cliente a visualizar o que foi planejado, por que foi planejado e sua importância para o produto.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Proposta de sketch</li><br />
<li>Proposta de wireframe</li><br />
<li>Proposta de mapa de site</li><br />
<li>Proposta de fluxograma de navegação</li><br />
<li>Proposta de identidade visual (logotipo, ícones, elementos gráficos etc.)</li><br />
<li>Proposta de iconografia</li><br />
</ul><br />
<br />
== Testes de usabilidade ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Entrevista com o consumidor, onde pede-se que ele execute uma série de tarefas em um protótipo ou mesmo no produto final. À medida em que o consumidor interage com o produto, o pesquisador faz anotações sobre seu comportamento, dificuldades e suas opiniões.<br />
<br />
'''Importância'''<br />
<br />
Essencial para atualizações do produto. Ajuda a validar fluxos, layouts e funcionalidades aumentando a qualidade, o desempenho e a empatia pelo produto final.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Análise de resultado dos testes aplicado ao usuário<br />
Planejamento de ações<br />
Produção<br />
<br />
<br />
<br />
== HTML/CSS (front-end design) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Codificação em HTML/CSS/JQUERY do mockup do layout final.<br />
<br />
'''Importância'''<br />
<br />
Traduz o que foi planejado no mockup com fidelidade e estrutura para a equipe desenvolvimento implementar as interações e funcionalidades.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Guia de montagemHTML/CSS (proporções, distâncias, tamanho de fonte, etc)</li><br />
<li>Montagem HTML/CSS (estruturação, customização de componentes padrão, etc)</li><br />
</ul><br />
<br />
== Folha de estilos (biblioteca de padrões) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma lista prática com exemplos (e às vezes códigos) dos padrões visuais que serão utilizados em todo o site. É fundamental para a padronização dos elementos da interface, facilitando a produção e reprodução das demais telas.<br />
<br />
'''Importância'''<br />
<br />
Não só ajuda a manter o design consistente em diferentes telas, mas também facilita a vida dos desenvolvedores na hora de implementar os elementos.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Componentes de interação (botões, listas suspensas, setas de navegação, etc.)</li><br />
<li>Componentes de formatação (fonte, cores, tamanhos, espaçamentos, etc.)</li><br />
<li>Componentes de marcação (HTML e CSS)</li><br />
</ul><br />
<br />
== Interface animada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Animações pontuais que têm a intenção de tornar a experiência do usuário mais amigável e familiar aos seus referenciais de interação analógica/digital. Podem ser aplicadas em ícones, transições, menus, janelas, botões, etc.<br />
<br />
'''Importância'''<br />
<br />
Animações de interface ajudam a envolver o usuário e encorajam uma exploração mais profunda de um app ou site. Auxilia na contextualização de uma sequência de ações. Instiga o usuário a questionar “O que vai acontecer se eu tocar isso?”, ”E depois disso?”.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Planejamento de animação</li><br />
<li>Guia de animação (documento com especificações de execução)</li><br />
<li>Criação de animação codificada</li><br />
</ul><br />
<br />
== Validação técnica (designer) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Revisão e validação do produto funcional em relação ao que foi planejado.<br />
<br />
'''Importância'''<br />
<br />
Garantir que todo o planejamento, em todas as áreas competentes a equipe, tenha sido executado para que o produto chegue com a máxima qualidade para a análise do cliente.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Validação de montagem HTML/CSS<br />
Validação pós back-end<br />
Validação de usabilidade básica no dispositivo/paltaforma final<br />
<br />
<br />
<br />
<br />
== Interface gamificada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uso de elementos visuais atrativos que auxiliam na exposição dos dados de desempenho do usuário/jogador. Adiciona uma experiência lúdica, mais próxima de um jogo que de um sistema.<br />
<br />
'''Importância'''<br />
<br />
Tem o objetivo de tornar a experiência de uso de um determinado produto diferenciado e instigante.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Estudo de similares<br />
Pesquisa de interesses do público alvo<br />
Planejamento da gamificação<br />
Planejamento e mapeamento do impacto no layout</div>Danilo.pontechellehttp://wiki.mstech.com.br/index.php?title=Designers_da_Informa%C3%A7%C3%A3o&diff=807Designers da Informação2016-06-23T19:29:14Z<p>Danilo.pontechelle: /* Folha de estilos (biblioteca de padrões) */</p>
<hr />
<div><br />
A equipe de Design da Informação tem como principais responsabilidades arquitetar e realizar fluxos de informação na concepção de produtos, construção de interfaces gráficas e identidades visuais, bem como elaborar soluções criativas no que compete a usabilidade, navegabilidade e facilidade de interação, definir padrões reaproveitáveis e executar procedimentos práticos, assim como a codificação Front End (HTML/CSS), a fim de garantir a melhor experiência entre o produto concebido e o usuário final.<br />
<br />
'''A equipe'''<br />
<br />
Contamos com quatro designers altamente capacitados e versados nas mais diferentes aptidões que são necessárias para desempenhar o papel de Designer da Informação:<br />
<ul><br />
<li>Danilo Martinelli Pontechelle;</li><br />
<li>Lucas Toledo Teixeira Evangelista;</li><br />
<li>Miriam Midori Haga;</li><br />
<li>Samuel de Aguiar Sabino.</li><br />
</ul><br />
<br />
== Planejamento geral ==<br />
<br />
<p><strong>O que é?</strong></p><br />
<p class="ng-binding">Análise de todos os requisitos relacionados ao projeto, tipos de plataforma envolvidas, objetivo do cliente, análise do público alvo, a fim de elaborar o planejamento da produção e também a concepção do produto.</p><br />
<p><strong>Importância</strong></p><br />
<p class="ng-binding">Fase crucial para entendimento do que precisa ser produzido e como será produzido assim como suas características.</p><br />
<p><strong>Atividades relacionadas</strong></p><br />
<ul class="lista-padrao"><br />
<!-- ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise de requisitos</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do objetivo do cliente</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do público alvo</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Concepção do produto</li><!-- end ngRepeat: relacionado in competencia.relacionados --><br />
</ul><br />
<br />
== Identidade Visual ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representa um produto/serviço por meio de símbolos, logotipos, fontes, áudios, animações, elementos gráficos e outros.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia um produto/serviço e é responsável pela comunicação de seus valores ao usuário/consumidor.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Estudos (análise de similares, brainstorm, rascunhos de solução)</li><br />
<li>Moodboard (prancha com paleta de cores e imagens de referência)</li><br />
<li>Elementos gráficos (patterns, ícones, grafismos etc.)</li><br />
<li>Layout (impresso, web, animação etc.)</li><br />
<li>Guidelines</li><br />
</ul><br />
<br />
== Logo do produto ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representação visual de um conceito, cuja forma, cores e fonte dão identidade a um produto.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia o produto em relação aos concorrentes. Também simboliza a sua filosofia e forma de atuação no mercado.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Pesquisa de referências de similares no mercado</li><br />
<li>Definição do conceito principal e criação de um símbolo que traduza essa ideia</li><br />
<li>Avaliação da consistência da identidade em diversos tamanhos e dispositivos/plataformas</li><br />
</ul><br />
<br />
== Iconografia ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
É o conjunto de ícones padrão de uma interface, signos visuais que representam outro objeto por força de semelhança. Ícones são signos substitutivos (podem ser usados no lugar da coisa representada) e fundamentais na interação dos usuários com os computadores, pois indicam as zonas de acionamento de comandos ou reforçam visualmente alguma ação que o sistema apresenta.<br />
<br />
'''Importância'''<br />
<br />
Uma iconografia bem projetada é essencial para qualquer interface. Suas vantagens são impressionantes, pois dispensam leitura, logo podem ser identificadas por analfabetos, estrangeiros, etc. São compreendidos rapidamente diminuindo o tempo de interação, são mais facilmente memorizados e otimizam o espaço nas telas.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Ícones da interface (menus, funcionalidades, alertas, botões...)</li><br />
<li>Ícones do produto (aplicativo, favicon, etc.)</li><br />
</ul><br />
<br />
== Acessibilidade ==<br />
<br />
'''O que é?'''<br />
<br />
Acessibilidade é definida como a possibilidade de qualquer pessoa, independentemente de suas capacidades físicomotoras, perceptivas, culturais e sociais, usufruir os benefícios de uma vida em sociedade, tendo a possibilidade de participar de qualquer atividade, até as que incluem o uso de produtos, serviços e informações, com o mínimo de restrição possível.<br />
<br />
'''Importância'''<br />
<br />
Está ligado intimamente com a experiência do usuário e com toda a produção tanto de código quanto visual. É mais fácil e eficiente planejá-la desde o início para evitar retrabalho.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Seguir os padrões de desenvolvimento Web da W3C (cor, contraste, tamanhos etc.)</li><br />
<li>Seguir diretrizes e recomendações de acessibilidade do WAI, WCAG e WAI-ARIA (navegabilidade, HTML, etc.)</li><br />
<li>Realizar avaliação de acessibilidade</li><br />
</ul><br />
<br />
== Fluxo de navegação ==<br />
<br />
'''O que é?'''<br />
<br />
Uma representação visual do fluxo do usuário para completar tarefas dentro de um sistema. Exemplo: Em um site, o usuário começa pela na página inicial, segue para a página de um produto, depois vai até o carrinho de compras – e assim por diante. É a perspectiva do usuário sobre a organização do site, que ajuda a identificar quais passos precisam ser melhorados ou redesenhados.<br />
'''<br />
Importância'''<br />
<br />
Define a navegação bem como a utilização de botões/menus/listas e outros componentes de interação.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Simplificar processos</li><br />
<li>Redefinir fluxos de interação</li><br />
</ul><br />
<br />
== Mapa do site ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Consiste em um diagrama das páginas/seções de um site/app/sistema/etc organizadas hierarquicamente.<br />
<br />
'''Importância'''<br />
<br />
Ajuda a visualizar e compreender a estrutura básica e a navegação entre as diferentes partes do sistema. A partir dele podemos definir a navegação macro e ideal do usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Listagem de seções</li><br />
<li>Montagem de mapa do site</li><br />
</ul><br />
<br />
== Sketch ==<br />
<br />
'''O que é?'''<br />
<br />
Uma forma rápida de rabiscar uma nova interface usando papel e caneta sem compromisso com a fidelidade de formas, cores e detalhes dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Podem ser muito úteis para validar rapidamente conceitos de produtos e ideias de design com os outros membros da equipe e com usuários.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Sketch manual</li><br />
<li>Sketch digital</li><br />
</ul><br />
<br />
== Wireframe ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um guia visual que representa a estrutura da página, bem como sua hierarquia e os principais elementos que a compõem com maior fidelidade de proporções e posicionamento mais definidos dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Útil para discutir ideias com o time e com os clientes, e também para guiar o trabalho dos Diretores de Arte e Desenvolvedores.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Planejamento</li><br />
<li>Criação de wireframe</li><br />
<li>Validação</li><br />
</ul><br />
<br />
== Mockup ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma representação estática de média a alta fidelidade de um site/app/sistema/etc. Muitas vezes um mockup é um rascunho bem próximo do design final do produto, ou até o próprio produto final.<br />
<br />
'''Importância'''<br />
<br />
Úteis para vender a ideia do produto antes de ele estar pronto. Não possuem a resistência dos entregáveis de baixa fidelidade em apresentações e são ótimos coletores de feedback.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Planejamento</li><br />
<li>Desenvolvimento</li><br />
<li>Avaliação da consistência da Identidade Visual em determinados dispositivos/plataformas</li><br />
<li>Validação</li><br />
</ul><br />
<br />
== Prototipagem ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um protótipo é uma simulação da navegação e de algumas funcionalidades de um site/app/sistema, composto normalmente por sketch/wireframes/mockup clicáveis.<br />
<br />
'''Importância'''<br />
<br />
É uma forma rápida de validar e testar um produto antes de desenvolvê-lo do começo ao fim.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Protótipo sketch</li><br />
<li>Protótipo wireframe</li><br />
<li>Protótipo mockup</li><br />
</ul><br />
<br />
== Telas de ajuda e tutorial ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Montagem de imagens ou animações que mostram um passo a passo para guiar a utilização de um produto.<br />
<br />
'''Importância'''<br />
<br />
Identifica as ferramentas e funcionamento de um produto facilitando seu reconhecimento pelo usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Criação de pranchas que demonstrem o fluxo de navegação pelas telas do produto</li><br />
<li>Simulações animadas interativas com instruções que guiam o usuário</li><br />
<li>Telas de ajuda dentro do próprio produto com textos e indicações de como utilizá-lo</li><br />
</ul><br />
<br />
== Pranchas de apresentação ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Documento para visualização e entendimento das telas e conceitos aplicados em um projeto ou produto.<br />
<br />
'''Importância'''<br />
<br />
Podem ser utilizadas em apresentações para auxiliar o cliente a visualizar o que foi planejado, por que foi planejado e sua importância para o produto.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Proposta de sketch</li><br />
<li>Proposta de wireframe</li><br />
<li>Proposta de mapa de site</li><br />
<li>Proposta de fluxograma de navegação</li><br />
<li>Proposta de identidade visual (logotipo, ícones, elementos gráficos etc.)</li><br />
<li>Proposta de iconografia</li><br />
</ul><br />
<br />
== Testes de usabilidade ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Entrevista com o consumidor, onde pede-se que ele execute uma série de tarefas em um protótipo ou mesmo no produto final. À medida em que o consumidor interage com o produto, o pesquisador faz anotações sobre seu comportamento, dificuldades e suas opiniões.<br />
<br />
'''Importância'''<br />
<br />
Essencial para atualizações do produto. Ajuda a validar fluxos, layouts e funcionalidades aumentando a qualidade, o desempenho e a empatia pelo produto final.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Análise de resultado dos testes aplicado ao usuário<br />
Planejamento de ações<br />
Produção<br />
<br />
<br />
<br />
== HTML/CSS (front-end design) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Codificação em HTML/CSS/JQUERY do mockup do layout final.<br />
<br />
'''Importância'''<br />
<br />
Traduz o que foi planejado no mockup com fidelidade e estrutura para a equipe desenvolvimento implementar as interações e funcionalidades.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Guia de montagemHTML/CSS (proporções, distâncias, tamanho de fonte, etc)</li><br />
<li>Montagem HTML/CSS (estruturação, customização de componentes padrão, etc)</li><br />
</ul><br />
<br />
== Folha de estilos (biblioteca de padrões) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma lista prática com exemplos (e às vezes códigos) dos padrões visuais que serão utilizados em todo o site. É fundamental para a padronização dos elementos da interface, facilitando a produção e reprodução das demais telas.<br />
<br />
'''Importância'''<br />
<br />
Não só ajuda a manter o design consistente em diferentes telas, mas também facilita a vida dos desenvolvedores na hora de implementar os elementos.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Componentes de interação (botões, listas suspensas, setas de navegação, etc.)</li><br />
<li>Componentes de formatação (fonte, cores, tamanhos, espaçamentos, etc.)</li><br />
<li>Componentes de marcação (HTML e CSS)</li><br />
</ul><br />
<br />
== Interface animada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Animações pontuais que têm a intenção de tornar a experiência do usuário mais amigável e familiar aos seus referenciais de interação analógica/digital. Podem ser aplicadas em ícones, transições, menus, janelas, botões, etc.<br />
<br />
'''Importância'''<br />
<br />
Animações de interface ajudam a envolver o usuário e encorajam uma exploração mais profunda de um app ou site. Auxilia na contextualização de uma sequência de ações. Instiga o usuário a questionar “O que vai acontecer se eu tocar isso?”, ”E depois disso?”.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Planejamento de animação<br />
Guia de animação (documento com especificações de execução)<br />
Criação de animação codificada<br />
<br />
<br />
<br />
<br />
== Validação técnica (designer) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Revisão e validação do produto funcional em relação ao que foi planejado.<br />
<br />
'''Importância'''<br />
<br />
Garantir que todo o planejamento, em todas as áreas competentes a equipe, tenha sido executado para que o produto chegue com a máxima qualidade para a análise do cliente.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Validação de montagem HTML/CSS<br />
Validação pós back-end<br />
Validação de usabilidade básica no dispositivo/paltaforma final<br />
<br />
<br />
<br />
<br />
== Interface gamificada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uso de elementos visuais atrativos que auxiliam na exposição dos dados de desempenho do usuário/jogador. Adiciona uma experiência lúdica, mais próxima de um jogo que de um sistema.<br />
<br />
'''Importância'''<br />
<br />
Tem o objetivo de tornar a experiência de uso de um determinado produto diferenciado e instigante.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Estudo de similares<br />
Pesquisa de interesses do público alvo<br />
Planejamento da gamificação<br />
Planejamento e mapeamento do impacto no layout</div>Danilo.pontechellehttp://wiki.mstech.com.br/index.php?title=Designers_da_Informa%C3%A7%C3%A3o&diff=806Designers da Informação2016-06-23T19:28:58Z<p>Danilo.pontechelle: /* HTML/CSS (front-end design) */</p>
<hr />
<div><br />
A equipe de Design da Informação tem como principais responsabilidades arquitetar e realizar fluxos de informação na concepção de produtos, construção de interfaces gráficas e identidades visuais, bem como elaborar soluções criativas no que compete a usabilidade, navegabilidade e facilidade de interação, definir padrões reaproveitáveis e executar procedimentos práticos, assim como a codificação Front End (HTML/CSS), a fim de garantir a melhor experiência entre o produto concebido e o usuário final.<br />
<br />
'''A equipe'''<br />
<br />
Contamos com quatro designers altamente capacitados e versados nas mais diferentes aptidões que são necessárias para desempenhar o papel de Designer da Informação:<br />
<ul><br />
<li>Danilo Martinelli Pontechelle;</li><br />
<li>Lucas Toledo Teixeira Evangelista;</li><br />
<li>Miriam Midori Haga;</li><br />
<li>Samuel de Aguiar Sabino.</li><br />
</ul><br />
<br />
== Planejamento geral ==<br />
<br />
<p><strong>O que é?</strong></p><br />
<p class="ng-binding">Análise de todos os requisitos relacionados ao projeto, tipos de plataforma envolvidas, objetivo do cliente, análise do público alvo, a fim de elaborar o planejamento da produção e também a concepção do produto.</p><br />
<p><strong>Importância</strong></p><br />
<p class="ng-binding">Fase crucial para entendimento do que precisa ser produzido e como será produzido assim como suas características.</p><br />
<p><strong>Atividades relacionadas</strong></p><br />
<ul class="lista-padrao"><br />
<!-- ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise de requisitos</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do objetivo do cliente</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do público alvo</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Concepção do produto</li><!-- end ngRepeat: relacionado in competencia.relacionados --><br />
</ul><br />
<br />
== Identidade Visual ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representa um produto/serviço por meio de símbolos, logotipos, fontes, áudios, animações, elementos gráficos e outros.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia um produto/serviço e é responsável pela comunicação de seus valores ao usuário/consumidor.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Estudos (análise de similares, brainstorm, rascunhos de solução)</li><br />
<li>Moodboard (prancha com paleta de cores e imagens de referência)</li><br />
<li>Elementos gráficos (patterns, ícones, grafismos etc.)</li><br />
<li>Layout (impresso, web, animação etc.)</li><br />
<li>Guidelines</li><br />
</ul><br />
<br />
== Logo do produto ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representação visual de um conceito, cuja forma, cores e fonte dão identidade a um produto.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia o produto em relação aos concorrentes. Também simboliza a sua filosofia e forma de atuação no mercado.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Pesquisa de referências de similares no mercado</li><br />
<li>Definição do conceito principal e criação de um símbolo que traduza essa ideia</li><br />
<li>Avaliação da consistência da identidade em diversos tamanhos e dispositivos/plataformas</li><br />
</ul><br />
<br />
== Iconografia ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
É o conjunto de ícones padrão de uma interface, signos visuais que representam outro objeto por força de semelhança. Ícones são signos substitutivos (podem ser usados no lugar da coisa representada) e fundamentais na interação dos usuários com os computadores, pois indicam as zonas de acionamento de comandos ou reforçam visualmente alguma ação que o sistema apresenta.<br />
<br />
'''Importância'''<br />
<br />
Uma iconografia bem projetada é essencial para qualquer interface. Suas vantagens são impressionantes, pois dispensam leitura, logo podem ser identificadas por analfabetos, estrangeiros, etc. São compreendidos rapidamente diminuindo o tempo de interação, são mais facilmente memorizados e otimizam o espaço nas telas.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Ícones da interface (menus, funcionalidades, alertas, botões...)</li><br />
<li>Ícones do produto (aplicativo, favicon, etc.)</li><br />
</ul><br />
<br />
== Acessibilidade ==<br />
<br />
'''O que é?'''<br />
<br />
Acessibilidade é definida como a possibilidade de qualquer pessoa, independentemente de suas capacidades físicomotoras, perceptivas, culturais e sociais, usufruir os benefícios de uma vida em sociedade, tendo a possibilidade de participar de qualquer atividade, até as que incluem o uso de produtos, serviços e informações, com o mínimo de restrição possível.<br />
<br />
'''Importância'''<br />
<br />
Está ligado intimamente com a experiência do usuário e com toda a produção tanto de código quanto visual. É mais fácil e eficiente planejá-la desde o início para evitar retrabalho.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Seguir os padrões de desenvolvimento Web da W3C (cor, contraste, tamanhos etc.)</li><br />
<li>Seguir diretrizes e recomendações de acessibilidade do WAI, WCAG e WAI-ARIA (navegabilidade, HTML, etc.)</li><br />
<li>Realizar avaliação de acessibilidade</li><br />
</ul><br />
<br />
== Fluxo de navegação ==<br />
<br />
'''O que é?'''<br />
<br />
Uma representação visual do fluxo do usuário para completar tarefas dentro de um sistema. Exemplo: Em um site, o usuário começa pela na página inicial, segue para a página de um produto, depois vai até o carrinho de compras – e assim por diante. É a perspectiva do usuário sobre a organização do site, que ajuda a identificar quais passos precisam ser melhorados ou redesenhados.<br />
'''<br />
Importância'''<br />
<br />
Define a navegação bem como a utilização de botões/menus/listas e outros componentes de interação.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Simplificar processos</li><br />
<li>Redefinir fluxos de interação</li><br />
</ul><br />
<br />
== Mapa do site ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Consiste em um diagrama das páginas/seções de um site/app/sistema/etc organizadas hierarquicamente.<br />
<br />
'''Importância'''<br />
<br />
Ajuda a visualizar e compreender a estrutura básica e a navegação entre as diferentes partes do sistema. A partir dele podemos definir a navegação macro e ideal do usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Listagem de seções</li><br />
<li>Montagem de mapa do site</li><br />
</ul><br />
<br />
== Sketch ==<br />
<br />
'''O que é?'''<br />
<br />
Uma forma rápida de rabiscar uma nova interface usando papel e caneta sem compromisso com a fidelidade de formas, cores e detalhes dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Podem ser muito úteis para validar rapidamente conceitos de produtos e ideias de design com os outros membros da equipe e com usuários.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Sketch manual</li><br />
<li>Sketch digital</li><br />
</ul><br />
<br />
== Wireframe ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um guia visual que representa a estrutura da página, bem como sua hierarquia e os principais elementos que a compõem com maior fidelidade de proporções e posicionamento mais definidos dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Útil para discutir ideias com o time e com os clientes, e também para guiar o trabalho dos Diretores de Arte e Desenvolvedores.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Planejamento</li><br />
<li>Criação de wireframe</li><br />
<li>Validação</li><br />
</ul><br />
<br />
== Mockup ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma representação estática de média a alta fidelidade de um site/app/sistema/etc. Muitas vezes um mockup é um rascunho bem próximo do design final do produto, ou até o próprio produto final.<br />
<br />
'''Importância'''<br />
<br />
Úteis para vender a ideia do produto antes de ele estar pronto. Não possuem a resistência dos entregáveis de baixa fidelidade em apresentações e são ótimos coletores de feedback.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Planejamento</li><br />
<li>Desenvolvimento</li><br />
<li>Avaliação da consistência da Identidade Visual em determinados dispositivos/plataformas</li><br />
<li>Validação</li><br />
</ul><br />
<br />
== Prototipagem ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um protótipo é uma simulação da navegação e de algumas funcionalidades de um site/app/sistema, composto normalmente por sketch/wireframes/mockup clicáveis.<br />
<br />
'''Importância'''<br />
<br />
É uma forma rápida de validar e testar um produto antes de desenvolvê-lo do começo ao fim.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Protótipo sketch</li><br />
<li>Protótipo wireframe</li><br />
<li>Protótipo mockup</li><br />
</ul><br />
<br />
== Telas de ajuda e tutorial ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Montagem de imagens ou animações que mostram um passo a passo para guiar a utilização de um produto.<br />
<br />
'''Importância'''<br />
<br />
Identifica as ferramentas e funcionamento de um produto facilitando seu reconhecimento pelo usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Criação de pranchas que demonstrem o fluxo de navegação pelas telas do produto</li><br />
<li>Simulações animadas interativas com instruções que guiam o usuário</li><br />
<li>Telas de ajuda dentro do próprio produto com textos e indicações de como utilizá-lo</li><br />
</ul><br />
<br />
== Pranchas de apresentação ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Documento para visualização e entendimento das telas e conceitos aplicados em um projeto ou produto.<br />
<br />
'''Importância'''<br />
<br />
Podem ser utilizadas em apresentações para auxiliar o cliente a visualizar o que foi planejado, por que foi planejado e sua importância para o produto.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Proposta de sketch</li><br />
<li>Proposta de wireframe</li><br />
<li>Proposta de mapa de site</li><br />
<li>Proposta de fluxograma de navegação</li><br />
<li>Proposta de identidade visual (logotipo, ícones, elementos gráficos etc.)</li><br />
<li>Proposta de iconografia</li><br />
</ul><br />
<br />
== Testes de usabilidade ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Entrevista com o consumidor, onde pede-se que ele execute uma série de tarefas em um protótipo ou mesmo no produto final. À medida em que o consumidor interage com o produto, o pesquisador faz anotações sobre seu comportamento, dificuldades e suas opiniões.<br />
<br />
'''Importância'''<br />
<br />
Essencial para atualizações do produto. Ajuda a validar fluxos, layouts e funcionalidades aumentando a qualidade, o desempenho e a empatia pelo produto final.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Análise de resultado dos testes aplicado ao usuário<br />
Planejamento de ações<br />
Produção<br />
<br />
<br />
<br />
== HTML/CSS (front-end design) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Codificação em HTML/CSS/JQUERY do mockup do layout final.<br />
<br />
'''Importância'''<br />
<br />
Traduz o que foi planejado no mockup com fidelidade e estrutura para a equipe desenvolvimento implementar as interações e funcionalidades.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Guia de montagemHTML/CSS (proporções, distâncias, tamanho de fonte, etc)</li><br />
<li>Montagem HTML/CSS (estruturação, customização de componentes padrão, etc)</li><br />
</ul><br />
<br />
== Folha de estilos (biblioteca de padrões) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma lista prática com exemplos (e às vezes códigos) dos padrões visuais que serão utilizados em todo o site. É fundamental para a padronização dos elementos da interface, facilitando a produção e reprodução das demais telas.<br />
<br />
'''Importância'''<br />
<br />
Não só ajuda a manter o design consistente em diferentes telas, mas também facilita a vida dos desenvolvedores na hora de implementar os elementos.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Componentes de interação (botões, listas suspensas, setas de navegação, etc.)<br />
Componentes de formatação (fonte, cores, tamanhos, espaçamentos, etc.)<br />
Componentes de marcação (HTML e CSS)<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
== Interface animada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Animações pontuais que têm a intenção de tornar a experiência do usuário mais amigável e familiar aos seus referenciais de interação analógica/digital. Podem ser aplicadas em ícones, transições, menus, janelas, botões, etc.<br />
<br />
'''Importância'''<br />
<br />
Animações de interface ajudam a envolver o usuário e encorajam uma exploração mais profunda de um app ou site. Auxilia na contextualização de uma sequência de ações. Instiga o usuário a questionar “O que vai acontecer se eu tocar isso?”, ”E depois disso?”.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Planejamento de animação<br />
Guia de animação (documento com especificações de execução)<br />
Criação de animação codificada<br />
<br />
<br />
<br />
<br />
== Validação técnica (designer) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Revisão e validação do produto funcional em relação ao que foi planejado.<br />
<br />
'''Importância'''<br />
<br />
Garantir que todo o planejamento, em todas as áreas competentes a equipe, tenha sido executado para que o produto chegue com a máxima qualidade para a análise do cliente.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Validação de montagem HTML/CSS<br />
Validação pós back-end<br />
Validação de usabilidade básica no dispositivo/paltaforma final<br />
<br />
<br />
<br />
<br />
== Interface gamificada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uso de elementos visuais atrativos que auxiliam na exposição dos dados de desempenho do usuário/jogador. Adiciona uma experiência lúdica, mais próxima de um jogo que de um sistema.<br />
<br />
'''Importância'''<br />
<br />
Tem o objetivo de tornar a experiência de uso de um determinado produto diferenciado e instigante.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Estudo de similares<br />
Pesquisa de interesses do público alvo<br />
Planejamento da gamificação<br />
Planejamento e mapeamento do impacto no layout</div>Danilo.pontechellehttp://wiki.mstech.com.br/index.php?title=Designers_da_Informa%C3%A7%C3%A3o&diff=805Designers da Informação2016-06-23T19:28:35Z<p>Danilo.pontechelle: /* Pranchas de apresentação */</p>
<hr />
<div><br />
A equipe de Design da Informação tem como principais responsabilidades arquitetar e realizar fluxos de informação na concepção de produtos, construção de interfaces gráficas e identidades visuais, bem como elaborar soluções criativas no que compete a usabilidade, navegabilidade e facilidade de interação, definir padrões reaproveitáveis e executar procedimentos práticos, assim como a codificação Front End (HTML/CSS), a fim de garantir a melhor experiência entre o produto concebido e o usuário final.<br />
<br />
'''A equipe'''<br />
<br />
Contamos com quatro designers altamente capacitados e versados nas mais diferentes aptidões que são necessárias para desempenhar o papel de Designer da Informação:<br />
<ul><br />
<li>Danilo Martinelli Pontechelle;</li><br />
<li>Lucas Toledo Teixeira Evangelista;</li><br />
<li>Miriam Midori Haga;</li><br />
<li>Samuel de Aguiar Sabino.</li><br />
</ul><br />
<br />
== Planejamento geral ==<br />
<br />
<p><strong>O que é?</strong></p><br />
<p class="ng-binding">Análise de todos os requisitos relacionados ao projeto, tipos de plataforma envolvidas, objetivo do cliente, análise do público alvo, a fim de elaborar o planejamento da produção e também a concepção do produto.</p><br />
<p><strong>Importância</strong></p><br />
<p class="ng-binding">Fase crucial para entendimento do que precisa ser produzido e como será produzido assim como suas características.</p><br />
<p><strong>Atividades relacionadas</strong></p><br />
<ul class="lista-padrao"><br />
<!-- ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise de requisitos</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do objetivo do cliente</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do público alvo</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Concepção do produto</li><!-- end ngRepeat: relacionado in competencia.relacionados --><br />
</ul><br />
<br />
== Identidade Visual ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representa um produto/serviço por meio de símbolos, logotipos, fontes, áudios, animações, elementos gráficos e outros.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia um produto/serviço e é responsável pela comunicação de seus valores ao usuário/consumidor.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Estudos (análise de similares, brainstorm, rascunhos de solução)</li><br />
<li>Moodboard (prancha com paleta de cores e imagens de referência)</li><br />
<li>Elementos gráficos (patterns, ícones, grafismos etc.)</li><br />
<li>Layout (impresso, web, animação etc.)</li><br />
<li>Guidelines</li><br />
</ul><br />
<br />
== Logo do produto ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representação visual de um conceito, cuja forma, cores e fonte dão identidade a um produto.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia o produto em relação aos concorrentes. Também simboliza a sua filosofia e forma de atuação no mercado.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Pesquisa de referências de similares no mercado</li><br />
<li>Definição do conceito principal e criação de um símbolo que traduza essa ideia</li><br />
<li>Avaliação da consistência da identidade em diversos tamanhos e dispositivos/plataformas</li><br />
</ul><br />
<br />
== Iconografia ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
É o conjunto de ícones padrão de uma interface, signos visuais que representam outro objeto por força de semelhança. Ícones são signos substitutivos (podem ser usados no lugar da coisa representada) e fundamentais na interação dos usuários com os computadores, pois indicam as zonas de acionamento de comandos ou reforçam visualmente alguma ação que o sistema apresenta.<br />
<br />
'''Importância'''<br />
<br />
Uma iconografia bem projetada é essencial para qualquer interface. Suas vantagens são impressionantes, pois dispensam leitura, logo podem ser identificadas por analfabetos, estrangeiros, etc. São compreendidos rapidamente diminuindo o tempo de interação, são mais facilmente memorizados e otimizam o espaço nas telas.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Ícones da interface (menus, funcionalidades, alertas, botões...)</li><br />
<li>Ícones do produto (aplicativo, favicon, etc.)</li><br />
</ul><br />
<br />
== Acessibilidade ==<br />
<br />
'''O que é?'''<br />
<br />
Acessibilidade é definida como a possibilidade de qualquer pessoa, independentemente de suas capacidades físicomotoras, perceptivas, culturais e sociais, usufruir os benefícios de uma vida em sociedade, tendo a possibilidade de participar de qualquer atividade, até as que incluem o uso de produtos, serviços e informações, com o mínimo de restrição possível.<br />
<br />
'''Importância'''<br />
<br />
Está ligado intimamente com a experiência do usuário e com toda a produção tanto de código quanto visual. É mais fácil e eficiente planejá-la desde o início para evitar retrabalho.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Seguir os padrões de desenvolvimento Web da W3C (cor, contraste, tamanhos etc.)</li><br />
<li>Seguir diretrizes e recomendações de acessibilidade do WAI, WCAG e WAI-ARIA (navegabilidade, HTML, etc.)</li><br />
<li>Realizar avaliação de acessibilidade</li><br />
</ul><br />
<br />
== Fluxo de navegação ==<br />
<br />
'''O que é?'''<br />
<br />
Uma representação visual do fluxo do usuário para completar tarefas dentro de um sistema. Exemplo: Em um site, o usuário começa pela na página inicial, segue para a página de um produto, depois vai até o carrinho de compras – e assim por diante. É a perspectiva do usuário sobre a organização do site, que ajuda a identificar quais passos precisam ser melhorados ou redesenhados.<br />
'''<br />
Importância'''<br />
<br />
Define a navegação bem como a utilização de botões/menus/listas e outros componentes de interação.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Simplificar processos</li><br />
<li>Redefinir fluxos de interação</li><br />
</ul><br />
<br />
== Mapa do site ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Consiste em um diagrama das páginas/seções de um site/app/sistema/etc organizadas hierarquicamente.<br />
<br />
'''Importância'''<br />
<br />
Ajuda a visualizar e compreender a estrutura básica e a navegação entre as diferentes partes do sistema. A partir dele podemos definir a navegação macro e ideal do usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Listagem de seções</li><br />
<li>Montagem de mapa do site</li><br />
</ul><br />
<br />
== Sketch ==<br />
<br />
'''O que é?'''<br />
<br />
Uma forma rápida de rabiscar uma nova interface usando papel e caneta sem compromisso com a fidelidade de formas, cores e detalhes dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Podem ser muito úteis para validar rapidamente conceitos de produtos e ideias de design com os outros membros da equipe e com usuários.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Sketch manual</li><br />
<li>Sketch digital</li><br />
</ul><br />
<br />
== Wireframe ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um guia visual que representa a estrutura da página, bem como sua hierarquia e os principais elementos que a compõem com maior fidelidade de proporções e posicionamento mais definidos dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Útil para discutir ideias com o time e com os clientes, e também para guiar o trabalho dos Diretores de Arte e Desenvolvedores.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Planejamento</li><br />
<li>Criação de wireframe</li><br />
<li>Validação</li><br />
</ul><br />
<br />
== Mockup ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma representação estática de média a alta fidelidade de um site/app/sistema/etc. Muitas vezes um mockup é um rascunho bem próximo do design final do produto, ou até o próprio produto final.<br />
<br />
'''Importância'''<br />
<br />
Úteis para vender a ideia do produto antes de ele estar pronto. Não possuem a resistência dos entregáveis de baixa fidelidade em apresentações e são ótimos coletores de feedback.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Planejamento</li><br />
<li>Desenvolvimento</li><br />
<li>Avaliação da consistência da Identidade Visual em determinados dispositivos/plataformas</li><br />
<li>Validação</li><br />
</ul><br />
<br />
== Prototipagem ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um protótipo é uma simulação da navegação e de algumas funcionalidades de um site/app/sistema, composto normalmente por sketch/wireframes/mockup clicáveis.<br />
<br />
'''Importância'''<br />
<br />
É uma forma rápida de validar e testar um produto antes de desenvolvê-lo do começo ao fim.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Protótipo sketch</li><br />
<li>Protótipo wireframe</li><br />
<li>Protótipo mockup</li><br />
</ul><br />
<br />
== Telas de ajuda e tutorial ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Montagem de imagens ou animações que mostram um passo a passo para guiar a utilização de um produto.<br />
<br />
'''Importância'''<br />
<br />
Identifica as ferramentas e funcionamento de um produto facilitando seu reconhecimento pelo usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Criação de pranchas que demonstrem o fluxo de navegação pelas telas do produto</li><br />
<li>Simulações animadas interativas com instruções que guiam o usuário</li><br />
<li>Telas de ajuda dentro do próprio produto com textos e indicações de como utilizá-lo</li><br />
</ul><br />
<br />
== Pranchas de apresentação ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Documento para visualização e entendimento das telas e conceitos aplicados em um projeto ou produto.<br />
<br />
'''Importância'''<br />
<br />
Podem ser utilizadas em apresentações para auxiliar o cliente a visualizar o que foi planejado, por que foi planejado e sua importância para o produto.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Proposta de sketch</li><br />
<li>Proposta de wireframe</li><br />
<li>Proposta de mapa de site</li><br />
<li>Proposta de fluxograma de navegação</li><br />
<li>Proposta de identidade visual (logotipo, ícones, elementos gráficos etc.)</li><br />
<li>Proposta de iconografia</li><br />
</ul><br />
<br />
== Testes de usabilidade ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Entrevista com o consumidor, onde pede-se que ele execute uma série de tarefas em um protótipo ou mesmo no produto final. À medida em que o consumidor interage com o produto, o pesquisador faz anotações sobre seu comportamento, dificuldades e suas opiniões.<br />
<br />
'''Importância'''<br />
<br />
Essencial para atualizações do produto. Ajuda a validar fluxos, layouts e funcionalidades aumentando a qualidade, o desempenho e a empatia pelo produto final.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Análise de resultado dos testes aplicado ao usuário<br />
Planejamento de ações<br />
Produção<br />
<br />
<br />
<br />
== HTML/CSS (front-end design) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Codificação em HTML/CSS/JQUERY do mockup do layout final.<br />
<br />
'''Importância'''<br />
<br />
Traduz o que foi planejado no mockup com fidelidade e estrutura para a equipe desenvolvimento implementar as interações e funcionalidades.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Guia de montagemHTML/CSS (proporções, distâncias, tamanho de fonte, etc)<br />
Montagem HTML/CSS (estruturação, customização de componentes padrão, etc)<br />
<br />
<br />
== Folha de estilos (biblioteca de padrões) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma lista prática com exemplos (e às vezes códigos) dos padrões visuais que serão utilizados em todo o site. É fundamental para a padronização dos elementos da interface, facilitando a produção e reprodução das demais telas.<br />
<br />
'''Importância'''<br />
<br />
Não só ajuda a manter o design consistente em diferentes telas, mas também facilita a vida dos desenvolvedores na hora de implementar os elementos.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Componentes de interação (botões, listas suspensas, setas de navegação, etc.)<br />
Componentes de formatação (fonte, cores, tamanhos, espaçamentos, etc.)<br />
Componentes de marcação (HTML e CSS)<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
== Interface animada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Animações pontuais que têm a intenção de tornar a experiência do usuário mais amigável e familiar aos seus referenciais de interação analógica/digital. Podem ser aplicadas em ícones, transições, menus, janelas, botões, etc.<br />
<br />
'''Importância'''<br />
<br />
Animações de interface ajudam a envolver o usuário e encorajam uma exploração mais profunda de um app ou site. Auxilia na contextualização de uma sequência de ações. Instiga o usuário a questionar “O que vai acontecer se eu tocar isso?”, ”E depois disso?”.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Planejamento de animação<br />
Guia de animação (documento com especificações de execução)<br />
Criação de animação codificada<br />
<br />
<br />
<br />
<br />
== Validação técnica (designer) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Revisão e validação do produto funcional em relação ao que foi planejado.<br />
<br />
'''Importância'''<br />
<br />
Garantir que todo o planejamento, em todas as áreas competentes a equipe, tenha sido executado para que o produto chegue com a máxima qualidade para a análise do cliente.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Validação de montagem HTML/CSS<br />
Validação pós back-end<br />
Validação de usabilidade básica no dispositivo/paltaforma final<br />
<br />
<br />
<br />
<br />
== Interface gamificada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uso de elementos visuais atrativos que auxiliam na exposição dos dados de desempenho do usuário/jogador. Adiciona uma experiência lúdica, mais próxima de um jogo que de um sistema.<br />
<br />
'''Importância'''<br />
<br />
Tem o objetivo de tornar a experiência de uso de um determinado produto diferenciado e instigante.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Estudo de similares<br />
Pesquisa de interesses do público alvo<br />
Planejamento da gamificação<br />
Planejamento e mapeamento do impacto no layout</div>Danilo.pontechellehttp://wiki.mstech.com.br/index.php?title=Designers_da_Informa%C3%A7%C3%A3o&diff=804Designers da Informação2016-06-23T19:28:10Z<p>Danilo.pontechelle: /* Telas de ajuda e tutorial */</p>
<hr />
<div><br />
A equipe de Design da Informação tem como principais responsabilidades arquitetar e realizar fluxos de informação na concepção de produtos, construção de interfaces gráficas e identidades visuais, bem como elaborar soluções criativas no que compete a usabilidade, navegabilidade e facilidade de interação, definir padrões reaproveitáveis e executar procedimentos práticos, assim como a codificação Front End (HTML/CSS), a fim de garantir a melhor experiência entre o produto concebido e o usuário final.<br />
<br />
'''A equipe'''<br />
<br />
Contamos com quatro designers altamente capacitados e versados nas mais diferentes aptidões que são necessárias para desempenhar o papel de Designer da Informação:<br />
<ul><br />
<li>Danilo Martinelli Pontechelle;</li><br />
<li>Lucas Toledo Teixeira Evangelista;</li><br />
<li>Miriam Midori Haga;</li><br />
<li>Samuel de Aguiar Sabino.</li><br />
</ul><br />
<br />
== Planejamento geral ==<br />
<br />
<p><strong>O que é?</strong></p><br />
<p class="ng-binding">Análise de todos os requisitos relacionados ao projeto, tipos de plataforma envolvidas, objetivo do cliente, análise do público alvo, a fim de elaborar o planejamento da produção e também a concepção do produto.</p><br />
<p><strong>Importância</strong></p><br />
<p class="ng-binding">Fase crucial para entendimento do que precisa ser produzido e como será produzido assim como suas características.</p><br />
<p><strong>Atividades relacionadas</strong></p><br />
<ul class="lista-padrao"><br />
<!-- ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise de requisitos</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do objetivo do cliente</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do público alvo</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Concepção do produto</li><!-- end ngRepeat: relacionado in competencia.relacionados --><br />
</ul><br />
<br />
== Identidade Visual ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representa um produto/serviço por meio de símbolos, logotipos, fontes, áudios, animações, elementos gráficos e outros.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia um produto/serviço e é responsável pela comunicação de seus valores ao usuário/consumidor.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Estudos (análise de similares, brainstorm, rascunhos de solução)</li><br />
<li>Moodboard (prancha com paleta de cores e imagens de referência)</li><br />
<li>Elementos gráficos (patterns, ícones, grafismos etc.)</li><br />
<li>Layout (impresso, web, animação etc.)</li><br />
<li>Guidelines</li><br />
</ul><br />
<br />
== Logo do produto ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representação visual de um conceito, cuja forma, cores e fonte dão identidade a um produto.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia o produto em relação aos concorrentes. Também simboliza a sua filosofia e forma de atuação no mercado.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Pesquisa de referências de similares no mercado</li><br />
<li>Definição do conceito principal e criação de um símbolo que traduza essa ideia</li><br />
<li>Avaliação da consistência da identidade em diversos tamanhos e dispositivos/plataformas</li><br />
</ul><br />
<br />
== Iconografia ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
É o conjunto de ícones padrão de uma interface, signos visuais que representam outro objeto por força de semelhança. Ícones são signos substitutivos (podem ser usados no lugar da coisa representada) e fundamentais na interação dos usuários com os computadores, pois indicam as zonas de acionamento de comandos ou reforçam visualmente alguma ação que o sistema apresenta.<br />
<br />
'''Importância'''<br />
<br />
Uma iconografia bem projetada é essencial para qualquer interface. Suas vantagens são impressionantes, pois dispensam leitura, logo podem ser identificadas por analfabetos, estrangeiros, etc. São compreendidos rapidamente diminuindo o tempo de interação, são mais facilmente memorizados e otimizam o espaço nas telas.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Ícones da interface (menus, funcionalidades, alertas, botões...)</li><br />
<li>Ícones do produto (aplicativo, favicon, etc.)</li><br />
</ul><br />
<br />
== Acessibilidade ==<br />
<br />
'''O que é?'''<br />
<br />
Acessibilidade é definida como a possibilidade de qualquer pessoa, independentemente de suas capacidades físicomotoras, perceptivas, culturais e sociais, usufruir os benefícios de uma vida em sociedade, tendo a possibilidade de participar de qualquer atividade, até as que incluem o uso de produtos, serviços e informações, com o mínimo de restrição possível.<br />
<br />
'''Importância'''<br />
<br />
Está ligado intimamente com a experiência do usuário e com toda a produção tanto de código quanto visual. É mais fácil e eficiente planejá-la desde o início para evitar retrabalho.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Seguir os padrões de desenvolvimento Web da W3C (cor, contraste, tamanhos etc.)</li><br />
<li>Seguir diretrizes e recomendações de acessibilidade do WAI, WCAG e WAI-ARIA (navegabilidade, HTML, etc.)</li><br />
<li>Realizar avaliação de acessibilidade</li><br />
</ul><br />
<br />
== Fluxo de navegação ==<br />
<br />
'''O que é?'''<br />
<br />
Uma representação visual do fluxo do usuário para completar tarefas dentro de um sistema. Exemplo: Em um site, o usuário começa pela na página inicial, segue para a página de um produto, depois vai até o carrinho de compras – e assim por diante. É a perspectiva do usuário sobre a organização do site, que ajuda a identificar quais passos precisam ser melhorados ou redesenhados.<br />
'''<br />
Importância'''<br />
<br />
Define a navegação bem como a utilização de botões/menus/listas e outros componentes de interação.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Simplificar processos</li><br />
<li>Redefinir fluxos de interação</li><br />
</ul><br />
<br />
== Mapa do site ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Consiste em um diagrama das páginas/seções de um site/app/sistema/etc organizadas hierarquicamente.<br />
<br />
'''Importância'''<br />
<br />
Ajuda a visualizar e compreender a estrutura básica e a navegação entre as diferentes partes do sistema. A partir dele podemos definir a navegação macro e ideal do usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Listagem de seções</li><br />
<li>Montagem de mapa do site</li><br />
</ul><br />
<br />
== Sketch ==<br />
<br />
'''O que é?'''<br />
<br />
Uma forma rápida de rabiscar uma nova interface usando papel e caneta sem compromisso com a fidelidade de formas, cores e detalhes dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Podem ser muito úteis para validar rapidamente conceitos de produtos e ideias de design com os outros membros da equipe e com usuários.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Sketch manual</li><br />
<li>Sketch digital</li><br />
</ul><br />
<br />
== Wireframe ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um guia visual que representa a estrutura da página, bem como sua hierarquia e os principais elementos que a compõem com maior fidelidade de proporções e posicionamento mais definidos dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Útil para discutir ideias com o time e com os clientes, e também para guiar o trabalho dos Diretores de Arte e Desenvolvedores.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Planejamento</li><br />
<li>Criação de wireframe</li><br />
<li>Validação</li><br />
</ul><br />
<br />
== Mockup ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma representação estática de média a alta fidelidade de um site/app/sistema/etc. Muitas vezes um mockup é um rascunho bem próximo do design final do produto, ou até o próprio produto final.<br />
<br />
'''Importância'''<br />
<br />
Úteis para vender a ideia do produto antes de ele estar pronto. Não possuem a resistência dos entregáveis de baixa fidelidade em apresentações e são ótimos coletores de feedback.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Planejamento</li><br />
<li>Desenvolvimento</li><br />
<li>Avaliação da consistência da Identidade Visual em determinados dispositivos/plataformas</li><br />
<li>Validação</li><br />
</ul><br />
<br />
== Prototipagem ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um protótipo é uma simulação da navegação e de algumas funcionalidades de um site/app/sistema, composto normalmente por sketch/wireframes/mockup clicáveis.<br />
<br />
'''Importância'''<br />
<br />
É uma forma rápida de validar e testar um produto antes de desenvolvê-lo do começo ao fim.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Protótipo sketch</li><br />
<li>Protótipo wireframe</li><br />
<li>Protótipo mockup</li><br />
</ul><br />
<br />
== Telas de ajuda e tutorial ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Montagem de imagens ou animações que mostram um passo a passo para guiar a utilização de um produto.<br />
<br />
'''Importância'''<br />
<br />
Identifica as ferramentas e funcionamento de um produto facilitando seu reconhecimento pelo usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Criação de pranchas que demonstrem o fluxo de navegação pelas telas do produto</li><br />
<li>Simulações animadas interativas com instruções que guiam o usuário</li><br />
<li>Telas de ajuda dentro do próprio produto com textos e indicações de como utilizá-lo</li><br />
</ul><br />
<br />
== Pranchas de apresentação ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Documento para visualização e entendimento das telas e conceitos aplicados em um projeto ou produto.<br />
<br />
'''Importância'''<br />
<br />
Podem ser utilizadas em apresentações para auxiliar o cliente a visualizar o que foi planejado, por que foi planejado e sua importância para o produto.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Proposta de sketch<br />
Proposta de wireframe<br />
Proposta de mapa de site<br />
Proposta de fluxograma de navegação<br />
Proposta de identidade visual (logotipo, ícones, elementos gráficos etc.)<br />
Proposta de iconografia<br />
<br />
<br />
<br />
<br />
<br />
== Testes de usabilidade ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Entrevista com o consumidor, onde pede-se que ele execute uma série de tarefas em um protótipo ou mesmo no produto final. À medida em que o consumidor interage com o produto, o pesquisador faz anotações sobre seu comportamento, dificuldades e suas opiniões.<br />
<br />
'''Importância'''<br />
<br />
Essencial para atualizações do produto. Ajuda a validar fluxos, layouts e funcionalidades aumentando a qualidade, o desempenho e a empatia pelo produto final.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Análise de resultado dos testes aplicado ao usuário<br />
Planejamento de ações<br />
Produção<br />
<br />
<br />
<br />
== HTML/CSS (front-end design) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Codificação em HTML/CSS/JQUERY do mockup do layout final.<br />
<br />
'''Importância'''<br />
<br />
Traduz o que foi planejado no mockup com fidelidade e estrutura para a equipe desenvolvimento implementar as interações e funcionalidades.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Guia de montagemHTML/CSS (proporções, distâncias, tamanho de fonte, etc)<br />
Montagem HTML/CSS (estruturação, customização de componentes padrão, etc)<br />
<br />
<br />
== Folha de estilos (biblioteca de padrões) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma lista prática com exemplos (e às vezes códigos) dos padrões visuais que serão utilizados em todo o site. É fundamental para a padronização dos elementos da interface, facilitando a produção e reprodução das demais telas.<br />
<br />
'''Importância'''<br />
<br />
Não só ajuda a manter o design consistente em diferentes telas, mas também facilita a vida dos desenvolvedores na hora de implementar os elementos.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Componentes de interação (botões, listas suspensas, setas de navegação, etc.)<br />
Componentes de formatação (fonte, cores, tamanhos, espaçamentos, etc.)<br />
Componentes de marcação (HTML e CSS)<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
== Interface animada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Animações pontuais que têm a intenção de tornar a experiência do usuário mais amigável e familiar aos seus referenciais de interação analógica/digital. Podem ser aplicadas em ícones, transições, menus, janelas, botões, etc.<br />
<br />
'''Importância'''<br />
<br />
Animações de interface ajudam a envolver o usuário e encorajam uma exploração mais profunda de um app ou site. Auxilia na contextualização de uma sequência de ações. Instiga o usuário a questionar “O que vai acontecer se eu tocar isso?”, ”E depois disso?”.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Planejamento de animação<br />
Guia de animação (documento com especificações de execução)<br />
Criação de animação codificada<br />
<br />
<br />
<br />
<br />
== Validação técnica (designer) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Revisão e validação do produto funcional em relação ao que foi planejado.<br />
<br />
'''Importância'''<br />
<br />
Garantir que todo o planejamento, em todas as áreas competentes a equipe, tenha sido executado para que o produto chegue com a máxima qualidade para a análise do cliente.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Validação de montagem HTML/CSS<br />
Validação pós back-end<br />
Validação de usabilidade básica no dispositivo/paltaforma final<br />
<br />
<br />
<br />
<br />
== Interface gamificada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uso de elementos visuais atrativos que auxiliam na exposição dos dados de desempenho do usuário/jogador. Adiciona uma experiência lúdica, mais próxima de um jogo que de um sistema.<br />
<br />
'''Importância'''<br />
<br />
Tem o objetivo de tornar a experiência de uso de um determinado produto diferenciado e instigante.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Estudo de similares<br />
Pesquisa de interesses do público alvo<br />
Planejamento da gamificação<br />
Planejamento e mapeamento do impacto no layout</div>Danilo.pontechellehttp://wiki.mstech.com.br/index.php?title=Designers_da_Informa%C3%A7%C3%A3o&diff=803Designers da Informação2016-06-23T19:27:48Z<p>Danilo.pontechelle: /* Prototipagem */</p>
<hr />
<div><br />
A equipe de Design da Informação tem como principais responsabilidades arquitetar e realizar fluxos de informação na concepção de produtos, construção de interfaces gráficas e identidades visuais, bem como elaborar soluções criativas no que compete a usabilidade, navegabilidade e facilidade de interação, definir padrões reaproveitáveis e executar procedimentos práticos, assim como a codificação Front End (HTML/CSS), a fim de garantir a melhor experiência entre o produto concebido e o usuário final.<br />
<br />
'''A equipe'''<br />
<br />
Contamos com quatro designers altamente capacitados e versados nas mais diferentes aptidões que são necessárias para desempenhar o papel de Designer da Informação:<br />
<ul><br />
<li>Danilo Martinelli Pontechelle;</li><br />
<li>Lucas Toledo Teixeira Evangelista;</li><br />
<li>Miriam Midori Haga;</li><br />
<li>Samuel de Aguiar Sabino.</li><br />
</ul><br />
<br />
== Planejamento geral ==<br />
<br />
<p><strong>O que é?</strong></p><br />
<p class="ng-binding">Análise de todos os requisitos relacionados ao projeto, tipos de plataforma envolvidas, objetivo do cliente, análise do público alvo, a fim de elaborar o planejamento da produção e também a concepção do produto.</p><br />
<p><strong>Importância</strong></p><br />
<p class="ng-binding">Fase crucial para entendimento do que precisa ser produzido e como será produzido assim como suas características.</p><br />
<p><strong>Atividades relacionadas</strong></p><br />
<ul class="lista-padrao"><br />
<!-- ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise de requisitos</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do objetivo do cliente</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do público alvo</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Concepção do produto</li><!-- end ngRepeat: relacionado in competencia.relacionados --><br />
</ul><br />
<br />
== Identidade Visual ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representa um produto/serviço por meio de símbolos, logotipos, fontes, áudios, animações, elementos gráficos e outros.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia um produto/serviço e é responsável pela comunicação de seus valores ao usuário/consumidor.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Estudos (análise de similares, brainstorm, rascunhos de solução)</li><br />
<li>Moodboard (prancha com paleta de cores e imagens de referência)</li><br />
<li>Elementos gráficos (patterns, ícones, grafismos etc.)</li><br />
<li>Layout (impresso, web, animação etc.)</li><br />
<li>Guidelines</li><br />
</ul><br />
<br />
== Logo do produto ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representação visual de um conceito, cuja forma, cores e fonte dão identidade a um produto.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia o produto em relação aos concorrentes. Também simboliza a sua filosofia e forma de atuação no mercado.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Pesquisa de referências de similares no mercado</li><br />
<li>Definição do conceito principal e criação de um símbolo que traduza essa ideia</li><br />
<li>Avaliação da consistência da identidade em diversos tamanhos e dispositivos/plataformas</li><br />
</ul><br />
<br />
== Iconografia ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
É o conjunto de ícones padrão de uma interface, signos visuais que representam outro objeto por força de semelhança. Ícones são signos substitutivos (podem ser usados no lugar da coisa representada) e fundamentais na interação dos usuários com os computadores, pois indicam as zonas de acionamento de comandos ou reforçam visualmente alguma ação que o sistema apresenta.<br />
<br />
'''Importância'''<br />
<br />
Uma iconografia bem projetada é essencial para qualquer interface. Suas vantagens são impressionantes, pois dispensam leitura, logo podem ser identificadas por analfabetos, estrangeiros, etc. São compreendidos rapidamente diminuindo o tempo de interação, são mais facilmente memorizados e otimizam o espaço nas telas.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Ícones da interface (menus, funcionalidades, alertas, botões...)</li><br />
<li>Ícones do produto (aplicativo, favicon, etc.)</li><br />
</ul><br />
<br />
== Acessibilidade ==<br />
<br />
'''O que é?'''<br />
<br />
Acessibilidade é definida como a possibilidade de qualquer pessoa, independentemente de suas capacidades físicomotoras, perceptivas, culturais e sociais, usufruir os benefícios de uma vida em sociedade, tendo a possibilidade de participar de qualquer atividade, até as que incluem o uso de produtos, serviços e informações, com o mínimo de restrição possível.<br />
<br />
'''Importância'''<br />
<br />
Está ligado intimamente com a experiência do usuário e com toda a produção tanto de código quanto visual. É mais fácil e eficiente planejá-la desde o início para evitar retrabalho.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Seguir os padrões de desenvolvimento Web da W3C (cor, contraste, tamanhos etc.)</li><br />
<li>Seguir diretrizes e recomendações de acessibilidade do WAI, WCAG e WAI-ARIA (navegabilidade, HTML, etc.)</li><br />
<li>Realizar avaliação de acessibilidade</li><br />
</ul><br />
<br />
== Fluxo de navegação ==<br />
<br />
'''O que é?'''<br />
<br />
Uma representação visual do fluxo do usuário para completar tarefas dentro de um sistema. Exemplo: Em um site, o usuário começa pela na página inicial, segue para a página de um produto, depois vai até o carrinho de compras – e assim por diante. É a perspectiva do usuário sobre a organização do site, que ajuda a identificar quais passos precisam ser melhorados ou redesenhados.<br />
'''<br />
Importância'''<br />
<br />
Define a navegação bem como a utilização de botões/menus/listas e outros componentes de interação.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Simplificar processos</li><br />
<li>Redefinir fluxos de interação</li><br />
</ul><br />
<br />
== Mapa do site ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Consiste em um diagrama das páginas/seções de um site/app/sistema/etc organizadas hierarquicamente.<br />
<br />
'''Importância'''<br />
<br />
Ajuda a visualizar e compreender a estrutura básica e a navegação entre as diferentes partes do sistema. A partir dele podemos definir a navegação macro e ideal do usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Listagem de seções</li><br />
<li>Montagem de mapa do site</li><br />
</ul><br />
<br />
== Sketch ==<br />
<br />
'''O que é?'''<br />
<br />
Uma forma rápida de rabiscar uma nova interface usando papel e caneta sem compromisso com a fidelidade de formas, cores e detalhes dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Podem ser muito úteis para validar rapidamente conceitos de produtos e ideias de design com os outros membros da equipe e com usuários.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Sketch manual</li><br />
<li>Sketch digital</li><br />
</ul><br />
<br />
== Wireframe ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um guia visual que representa a estrutura da página, bem como sua hierarquia e os principais elementos que a compõem com maior fidelidade de proporções e posicionamento mais definidos dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Útil para discutir ideias com o time e com os clientes, e também para guiar o trabalho dos Diretores de Arte e Desenvolvedores.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Planejamento</li><br />
<li>Criação de wireframe</li><br />
<li>Validação</li><br />
</ul><br />
<br />
== Mockup ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma representação estática de média a alta fidelidade de um site/app/sistema/etc. Muitas vezes um mockup é um rascunho bem próximo do design final do produto, ou até o próprio produto final.<br />
<br />
'''Importância'''<br />
<br />
Úteis para vender a ideia do produto antes de ele estar pronto. Não possuem a resistência dos entregáveis de baixa fidelidade em apresentações e são ótimos coletores de feedback.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Planejamento</li><br />
<li>Desenvolvimento</li><br />
<li>Avaliação da consistência da Identidade Visual em determinados dispositivos/plataformas</li><br />
<li>Validação</li><br />
</ul><br />
<br />
== Prototipagem ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um protótipo é uma simulação da navegação e de algumas funcionalidades de um site/app/sistema, composto normalmente por sketch/wireframes/mockup clicáveis.<br />
<br />
'''Importância'''<br />
<br />
É uma forma rápida de validar e testar um produto antes de desenvolvê-lo do começo ao fim.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Protótipo sketch</li><br />
<li>Protótipo wireframe</li><br />
<li>Protótipo mockup</li><br />
</ul><br />
<br />
== Telas de ajuda e tutorial ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Montagem de imagens ou animações que mostram um passo a passo para guiar a utilização de um produto.<br />
<br />
'''Importância'''<br />
<br />
Identifica as ferramentas e funcionamento de um produto facilitando seu reconhecimento pelo usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Criação de pranchas que demonstrem o fluxo de navegação pelas telas do produto<br />
Simulações animadas interativas com instruções que guiam o usuário<br />
Telas de ajuda dentro do próprio produto com textos e indicações de como utilizá-lo<br />
<br />
<br />
<br />
<br />
<br />
<br />
== Pranchas de apresentação ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Documento para visualização e entendimento das telas e conceitos aplicados em um projeto ou produto.<br />
<br />
'''Importância'''<br />
<br />
Podem ser utilizadas em apresentações para auxiliar o cliente a visualizar o que foi planejado, por que foi planejado e sua importância para o produto.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Proposta de sketch<br />
Proposta de wireframe<br />
Proposta de mapa de site<br />
Proposta de fluxograma de navegação<br />
Proposta de identidade visual (logotipo, ícones, elementos gráficos etc.)<br />
Proposta de iconografia<br />
<br />
<br />
<br />
<br />
<br />
== Testes de usabilidade ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Entrevista com o consumidor, onde pede-se que ele execute uma série de tarefas em um protótipo ou mesmo no produto final. À medida em que o consumidor interage com o produto, o pesquisador faz anotações sobre seu comportamento, dificuldades e suas opiniões.<br />
<br />
'''Importância'''<br />
<br />
Essencial para atualizações do produto. Ajuda a validar fluxos, layouts e funcionalidades aumentando a qualidade, o desempenho e a empatia pelo produto final.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Análise de resultado dos testes aplicado ao usuário<br />
Planejamento de ações<br />
Produção<br />
<br />
<br />
<br />
== HTML/CSS (front-end design) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Codificação em HTML/CSS/JQUERY do mockup do layout final.<br />
<br />
'''Importância'''<br />
<br />
Traduz o que foi planejado no mockup com fidelidade e estrutura para a equipe desenvolvimento implementar as interações e funcionalidades.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Guia de montagemHTML/CSS (proporções, distâncias, tamanho de fonte, etc)<br />
Montagem HTML/CSS (estruturação, customização de componentes padrão, etc)<br />
<br />
<br />
== Folha de estilos (biblioteca de padrões) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma lista prática com exemplos (e às vezes códigos) dos padrões visuais que serão utilizados em todo o site. É fundamental para a padronização dos elementos da interface, facilitando a produção e reprodução das demais telas.<br />
<br />
'''Importância'''<br />
<br />
Não só ajuda a manter o design consistente em diferentes telas, mas também facilita a vida dos desenvolvedores na hora de implementar os elementos.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Componentes de interação (botões, listas suspensas, setas de navegação, etc.)<br />
Componentes de formatação (fonte, cores, tamanhos, espaçamentos, etc.)<br />
Componentes de marcação (HTML e CSS)<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
== Interface animada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Animações pontuais que têm a intenção de tornar a experiência do usuário mais amigável e familiar aos seus referenciais de interação analógica/digital. Podem ser aplicadas em ícones, transições, menus, janelas, botões, etc.<br />
<br />
'''Importância'''<br />
<br />
Animações de interface ajudam a envolver o usuário e encorajam uma exploração mais profunda de um app ou site. Auxilia na contextualização de uma sequência de ações. Instiga o usuário a questionar “O que vai acontecer se eu tocar isso?”, ”E depois disso?”.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Planejamento de animação<br />
Guia de animação (documento com especificações de execução)<br />
Criação de animação codificada<br />
<br />
<br />
<br />
<br />
== Validação técnica (designer) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Revisão e validação do produto funcional em relação ao que foi planejado.<br />
<br />
'''Importância'''<br />
<br />
Garantir que todo o planejamento, em todas as áreas competentes a equipe, tenha sido executado para que o produto chegue com a máxima qualidade para a análise do cliente.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Validação de montagem HTML/CSS<br />
Validação pós back-end<br />
Validação de usabilidade básica no dispositivo/paltaforma final<br />
<br />
<br />
<br />
<br />
== Interface gamificada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uso de elementos visuais atrativos que auxiliam na exposição dos dados de desempenho do usuário/jogador. Adiciona uma experiência lúdica, mais próxima de um jogo que de um sistema.<br />
<br />
'''Importância'''<br />
<br />
Tem o objetivo de tornar a experiência de uso de um determinado produto diferenciado e instigante.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Estudo de similares<br />
Pesquisa de interesses do público alvo<br />
Planejamento da gamificação<br />
Planejamento e mapeamento do impacto no layout</div>Danilo.pontechellehttp://wiki.mstech.com.br/index.php?title=Designers_da_Informa%C3%A7%C3%A3o&diff=802Designers da Informação2016-06-23T19:27:26Z<p>Danilo.pontechelle: /* Mockup */</p>
<hr />
<div><br />
A equipe de Design da Informação tem como principais responsabilidades arquitetar e realizar fluxos de informação na concepção de produtos, construção de interfaces gráficas e identidades visuais, bem como elaborar soluções criativas no que compete a usabilidade, navegabilidade e facilidade de interação, definir padrões reaproveitáveis e executar procedimentos práticos, assim como a codificação Front End (HTML/CSS), a fim de garantir a melhor experiência entre o produto concebido e o usuário final.<br />
<br />
'''A equipe'''<br />
<br />
Contamos com quatro designers altamente capacitados e versados nas mais diferentes aptidões que são necessárias para desempenhar o papel de Designer da Informação:<br />
<ul><br />
<li>Danilo Martinelli Pontechelle;</li><br />
<li>Lucas Toledo Teixeira Evangelista;</li><br />
<li>Miriam Midori Haga;</li><br />
<li>Samuel de Aguiar Sabino.</li><br />
</ul><br />
<br />
== Planejamento geral ==<br />
<br />
<p><strong>O que é?</strong></p><br />
<p class="ng-binding">Análise de todos os requisitos relacionados ao projeto, tipos de plataforma envolvidas, objetivo do cliente, análise do público alvo, a fim de elaborar o planejamento da produção e também a concepção do produto.</p><br />
<p><strong>Importância</strong></p><br />
<p class="ng-binding">Fase crucial para entendimento do que precisa ser produzido e como será produzido assim como suas características.</p><br />
<p><strong>Atividades relacionadas</strong></p><br />
<ul class="lista-padrao"><br />
<!-- ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise de requisitos</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do objetivo do cliente</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do público alvo</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Concepção do produto</li><!-- end ngRepeat: relacionado in competencia.relacionados --><br />
</ul><br />
<br />
== Identidade Visual ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representa um produto/serviço por meio de símbolos, logotipos, fontes, áudios, animações, elementos gráficos e outros.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia um produto/serviço e é responsável pela comunicação de seus valores ao usuário/consumidor.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Estudos (análise de similares, brainstorm, rascunhos de solução)</li><br />
<li>Moodboard (prancha com paleta de cores e imagens de referência)</li><br />
<li>Elementos gráficos (patterns, ícones, grafismos etc.)</li><br />
<li>Layout (impresso, web, animação etc.)</li><br />
<li>Guidelines</li><br />
</ul><br />
<br />
== Logo do produto ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representação visual de um conceito, cuja forma, cores e fonte dão identidade a um produto.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia o produto em relação aos concorrentes. Também simboliza a sua filosofia e forma de atuação no mercado.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Pesquisa de referências de similares no mercado</li><br />
<li>Definição do conceito principal e criação de um símbolo que traduza essa ideia</li><br />
<li>Avaliação da consistência da identidade em diversos tamanhos e dispositivos/plataformas</li><br />
</ul><br />
<br />
== Iconografia ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
É o conjunto de ícones padrão de uma interface, signos visuais que representam outro objeto por força de semelhança. Ícones são signos substitutivos (podem ser usados no lugar da coisa representada) e fundamentais na interação dos usuários com os computadores, pois indicam as zonas de acionamento de comandos ou reforçam visualmente alguma ação que o sistema apresenta.<br />
<br />
'''Importância'''<br />
<br />
Uma iconografia bem projetada é essencial para qualquer interface. Suas vantagens são impressionantes, pois dispensam leitura, logo podem ser identificadas por analfabetos, estrangeiros, etc. São compreendidos rapidamente diminuindo o tempo de interação, são mais facilmente memorizados e otimizam o espaço nas telas.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Ícones da interface (menus, funcionalidades, alertas, botões...)</li><br />
<li>Ícones do produto (aplicativo, favicon, etc.)</li><br />
</ul><br />
<br />
== Acessibilidade ==<br />
<br />
'''O que é?'''<br />
<br />
Acessibilidade é definida como a possibilidade de qualquer pessoa, independentemente de suas capacidades físicomotoras, perceptivas, culturais e sociais, usufruir os benefícios de uma vida em sociedade, tendo a possibilidade de participar de qualquer atividade, até as que incluem o uso de produtos, serviços e informações, com o mínimo de restrição possível.<br />
<br />
'''Importância'''<br />
<br />
Está ligado intimamente com a experiência do usuário e com toda a produção tanto de código quanto visual. É mais fácil e eficiente planejá-la desde o início para evitar retrabalho.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Seguir os padrões de desenvolvimento Web da W3C (cor, contraste, tamanhos etc.)</li><br />
<li>Seguir diretrizes e recomendações de acessibilidade do WAI, WCAG e WAI-ARIA (navegabilidade, HTML, etc.)</li><br />
<li>Realizar avaliação de acessibilidade</li><br />
</ul><br />
<br />
== Fluxo de navegação ==<br />
<br />
'''O que é?'''<br />
<br />
Uma representação visual do fluxo do usuário para completar tarefas dentro de um sistema. Exemplo: Em um site, o usuário começa pela na página inicial, segue para a página de um produto, depois vai até o carrinho de compras – e assim por diante. É a perspectiva do usuário sobre a organização do site, que ajuda a identificar quais passos precisam ser melhorados ou redesenhados.<br />
'''<br />
Importância'''<br />
<br />
Define a navegação bem como a utilização de botões/menus/listas e outros componentes de interação.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Simplificar processos</li><br />
<li>Redefinir fluxos de interação</li><br />
</ul><br />
<br />
== Mapa do site ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Consiste em um diagrama das páginas/seções de um site/app/sistema/etc organizadas hierarquicamente.<br />
<br />
'''Importância'''<br />
<br />
Ajuda a visualizar e compreender a estrutura básica e a navegação entre as diferentes partes do sistema. A partir dele podemos definir a navegação macro e ideal do usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Listagem de seções</li><br />
<li>Montagem de mapa do site</li><br />
</ul><br />
<br />
== Sketch ==<br />
<br />
'''O que é?'''<br />
<br />
Uma forma rápida de rabiscar uma nova interface usando papel e caneta sem compromisso com a fidelidade de formas, cores e detalhes dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Podem ser muito úteis para validar rapidamente conceitos de produtos e ideias de design com os outros membros da equipe e com usuários.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Sketch manual</li><br />
<li>Sketch digital</li><br />
</ul><br />
<br />
== Wireframe ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um guia visual que representa a estrutura da página, bem como sua hierarquia e os principais elementos que a compõem com maior fidelidade de proporções e posicionamento mais definidos dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Útil para discutir ideias com o time e com os clientes, e também para guiar o trabalho dos Diretores de Arte e Desenvolvedores.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Planejamento</li><br />
<li>Criação de wireframe</li><br />
<li>Validação</li><br />
</ul><br />
<br />
== Mockup ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma representação estática de média a alta fidelidade de um site/app/sistema/etc. Muitas vezes um mockup é um rascunho bem próximo do design final do produto, ou até o próprio produto final.<br />
<br />
'''Importância'''<br />
<br />
Úteis para vender a ideia do produto antes de ele estar pronto. Não possuem a resistência dos entregáveis de baixa fidelidade em apresentações e são ótimos coletores de feedback.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Planejamento</li><br />
<li>Desenvolvimento</li><br />
<li>Avaliação da consistência da Identidade Visual em determinados dispositivos/plataformas</li><br />
<li>Validação</li><br />
</ul><br />
<br />
== Prototipagem ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um protótipo é uma simulação da navegação e de algumas funcionalidades de um site/app/sistema, composto normalmente por sketch/wireframes/mockup clicáveis.<br />
<br />
'''Importância'''<br />
<br />
É uma forma rápida de validar e testar um produto antes de desenvolvê-lo do começo ao fim.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Protótipo sketch<br />
Protótipo wireframe<br />
Protótipo mockup<br />
<br />
<br />
<br />
<br />
<br />
== Telas de ajuda e tutorial ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Montagem de imagens ou animações que mostram um passo a passo para guiar a utilização de um produto.<br />
<br />
'''Importância'''<br />
<br />
Identifica as ferramentas e funcionamento de um produto facilitando seu reconhecimento pelo usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Criação de pranchas que demonstrem o fluxo de navegação pelas telas do produto<br />
Simulações animadas interativas com instruções que guiam o usuário<br />
Telas de ajuda dentro do próprio produto com textos e indicações de como utilizá-lo<br />
<br />
<br />
<br />
<br />
<br />
<br />
== Pranchas de apresentação ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Documento para visualização e entendimento das telas e conceitos aplicados em um projeto ou produto.<br />
<br />
'''Importância'''<br />
<br />
Podem ser utilizadas em apresentações para auxiliar o cliente a visualizar o que foi planejado, por que foi planejado e sua importância para o produto.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Proposta de sketch<br />
Proposta de wireframe<br />
Proposta de mapa de site<br />
Proposta de fluxograma de navegação<br />
Proposta de identidade visual (logotipo, ícones, elementos gráficos etc.)<br />
Proposta de iconografia<br />
<br />
<br />
<br />
<br />
<br />
== Testes de usabilidade ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Entrevista com o consumidor, onde pede-se que ele execute uma série de tarefas em um protótipo ou mesmo no produto final. À medida em que o consumidor interage com o produto, o pesquisador faz anotações sobre seu comportamento, dificuldades e suas opiniões.<br />
<br />
'''Importância'''<br />
<br />
Essencial para atualizações do produto. Ajuda a validar fluxos, layouts e funcionalidades aumentando a qualidade, o desempenho e a empatia pelo produto final.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Análise de resultado dos testes aplicado ao usuário<br />
Planejamento de ações<br />
Produção<br />
<br />
<br />
<br />
== HTML/CSS (front-end design) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Codificação em HTML/CSS/JQUERY do mockup do layout final.<br />
<br />
'''Importância'''<br />
<br />
Traduz o que foi planejado no mockup com fidelidade e estrutura para a equipe desenvolvimento implementar as interações e funcionalidades.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Guia de montagemHTML/CSS (proporções, distâncias, tamanho de fonte, etc)<br />
Montagem HTML/CSS (estruturação, customização de componentes padrão, etc)<br />
<br />
<br />
== Folha de estilos (biblioteca de padrões) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma lista prática com exemplos (e às vezes códigos) dos padrões visuais que serão utilizados em todo o site. É fundamental para a padronização dos elementos da interface, facilitando a produção e reprodução das demais telas.<br />
<br />
'''Importância'''<br />
<br />
Não só ajuda a manter o design consistente em diferentes telas, mas também facilita a vida dos desenvolvedores na hora de implementar os elementos.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Componentes de interação (botões, listas suspensas, setas de navegação, etc.)<br />
Componentes de formatação (fonte, cores, tamanhos, espaçamentos, etc.)<br />
Componentes de marcação (HTML e CSS)<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
== Interface animada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Animações pontuais que têm a intenção de tornar a experiência do usuário mais amigável e familiar aos seus referenciais de interação analógica/digital. Podem ser aplicadas em ícones, transições, menus, janelas, botões, etc.<br />
<br />
'''Importância'''<br />
<br />
Animações de interface ajudam a envolver o usuário e encorajam uma exploração mais profunda de um app ou site. Auxilia na contextualização de uma sequência de ações. Instiga o usuário a questionar “O que vai acontecer se eu tocar isso?”, ”E depois disso?”.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Planejamento de animação<br />
Guia de animação (documento com especificações de execução)<br />
Criação de animação codificada<br />
<br />
<br />
<br />
<br />
== Validação técnica (designer) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Revisão e validação do produto funcional em relação ao que foi planejado.<br />
<br />
'''Importância'''<br />
<br />
Garantir que todo o planejamento, em todas as áreas competentes a equipe, tenha sido executado para que o produto chegue com a máxima qualidade para a análise do cliente.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Validação de montagem HTML/CSS<br />
Validação pós back-end<br />
Validação de usabilidade básica no dispositivo/paltaforma final<br />
<br />
<br />
<br />
<br />
== Interface gamificada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uso de elementos visuais atrativos que auxiliam na exposição dos dados de desempenho do usuário/jogador. Adiciona uma experiência lúdica, mais próxima de um jogo que de um sistema.<br />
<br />
'''Importância'''<br />
<br />
Tem o objetivo de tornar a experiência de uso de um determinado produto diferenciado e instigante.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Estudo de similares<br />
Pesquisa de interesses do público alvo<br />
Planejamento da gamificação<br />
Planejamento e mapeamento do impacto no layout</div>Danilo.pontechellehttp://wiki.mstech.com.br/index.php?title=Designers_da_Informa%C3%A7%C3%A3o&diff=801Designers da Informação2016-06-23T19:27:01Z<p>Danilo.pontechelle: /* Wireframe */</p>
<hr />
<div><br />
A equipe de Design da Informação tem como principais responsabilidades arquitetar e realizar fluxos de informação na concepção de produtos, construção de interfaces gráficas e identidades visuais, bem como elaborar soluções criativas no que compete a usabilidade, navegabilidade e facilidade de interação, definir padrões reaproveitáveis e executar procedimentos práticos, assim como a codificação Front End (HTML/CSS), a fim de garantir a melhor experiência entre o produto concebido e o usuário final.<br />
<br />
'''A equipe'''<br />
<br />
Contamos com quatro designers altamente capacitados e versados nas mais diferentes aptidões que são necessárias para desempenhar o papel de Designer da Informação:<br />
<ul><br />
<li>Danilo Martinelli Pontechelle;</li><br />
<li>Lucas Toledo Teixeira Evangelista;</li><br />
<li>Miriam Midori Haga;</li><br />
<li>Samuel de Aguiar Sabino.</li><br />
</ul><br />
<br />
== Planejamento geral ==<br />
<br />
<p><strong>O que é?</strong></p><br />
<p class="ng-binding">Análise de todos os requisitos relacionados ao projeto, tipos de plataforma envolvidas, objetivo do cliente, análise do público alvo, a fim de elaborar o planejamento da produção e também a concepção do produto.</p><br />
<p><strong>Importância</strong></p><br />
<p class="ng-binding">Fase crucial para entendimento do que precisa ser produzido e como será produzido assim como suas características.</p><br />
<p><strong>Atividades relacionadas</strong></p><br />
<ul class="lista-padrao"><br />
<!-- ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise de requisitos</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do objetivo do cliente</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do público alvo</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Concepção do produto</li><!-- end ngRepeat: relacionado in competencia.relacionados --><br />
</ul><br />
<br />
== Identidade Visual ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representa um produto/serviço por meio de símbolos, logotipos, fontes, áudios, animações, elementos gráficos e outros.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia um produto/serviço e é responsável pela comunicação de seus valores ao usuário/consumidor.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Estudos (análise de similares, brainstorm, rascunhos de solução)</li><br />
<li>Moodboard (prancha com paleta de cores e imagens de referência)</li><br />
<li>Elementos gráficos (patterns, ícones, grafismos etc.)</li><br />
<li>Layout (impresso, web, animação etc.)</li><br />
<li>Guidelines</li><br />
</ul><br />
<br />
== Logo do produto ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representação visual de um conceito, cuja forma, cores e fonte dão identidade a um produto.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia o produto em relação aos concorrentes. Também simboliza a sua filosofia e forma de atuação no mercado.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Pesquisa de referências de similares no mercado</li><br />
<li>Definição do conceito principal e criação de um símbolo que traduza essa ideia</li><br />
<li>Avaliação da consistência da identidade em diversos tamanhos e dispositivos/plataformas</li><br />
</ul><br />
<br />
== Iconografia ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
É o conjunto de ícones padrão de uma interface, signos visuais que representam outro objeto por força de semelhança. Ícones são signos substitutivos (podem ser usados no lugar da coisa representada) e fundamentais na interação dos usuários com os computadores, pois indicam as zonas de acionamento de comandos ou reforçam visualmente alguma ação que o sistema apresenta.<br />
<br />
'''Importância'''<br />
<br />
Uma iconografia bem projetada é essencial para qualquer interface. Suas vantagens são impressionantes, pois dispensam leitura, logo podem ser identificadas por analfabetos, estrangeiros, etc. São compreendidos rapidamente diminuindo o tempo de interação, são mais facilmente memorizados e otimizam o espaço nas telas.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Ícones da interface (menus, funcionalidades, alertas, botões...)</li><br />
<li>Ícones do produto (aplicativo, favicon, etc.)</li><br />
</ul><br />
<br />
== Acessibilidade ==<br />
<br />
'''O que é?'''<br />
<br />
Acessibilidade é definida como a possibilidade de qualquer pessoa, independentemente de suas capacidades físicomotoras, perceptivas, culturais e sociais, usufruir os benefícios de uma vida em sociedade, tendo a possibilidade de participar de qualquer atividade, até as que incluem o uso de produtos, serviços e informações, com o mínimo de restrição possível.<br />
<br />
'''Importância'''<br />
<br />
Está ligado intimamente com a experiência do usuário e com toda a produção tanto de código quanto visual. É mais fácil e eficiente planejá-la desde o início para evitar retrabalho.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Seguir os padrões de desenvolvimento Web da W3C (cor, contraste, tamanhos etc.)</li><br />
<li>Seguir diretrizes e recomendações de acessibilidade do WAI, WCAG e WAI-ARIA (navegabilidade, HTML, etc.)</li><br />
<li>Realizar avaliação de acessibilidade</li><br />
</ul><br />
<br />
== Fluxo de navegação ==<br />
<br />
'''O que é?'''<br />
<br />
Uma representação visual do fluxo do usuário para completar tarefas dentro de um sistema. Exemplo: Em um site, o usuário começa pela na página inicial, segue para a página de um produto, depois vai até o carrinho de compras – e assim por diante. É a perspectiva do usuário sobre a organização do site, que ajuda a identificar quais passos precisam ser melhorados ou redesenhados.<br />
'''<br />
Importância'''<br />
<br />
Define a navegação bem como a utilização de botões/menus/listas e outros componentes de interação.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Simplificar processos</li><br />
<li>Redefinir fluxos de interação</li><br />
</ul><br />
<br />
== Mapa do site ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Consiste em um diagrama das páginas/seções de um site/app/sistema/etc organizadas hierarquicamente.<br />
<br />
'''Importância'''<br />
<br />
Ajuda a visualizar e compreender a estrutura básica e a navegação entre as diferentes partes do sistema. A partir dele podemos definir a navegação macro e ideal do usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Listagem de seções</li><br />
<li>Montagem de mapa do site</li><br />
</ul><br />
<br />
== Sketch ==<br />
<br />
'''O que é?'''<br />
<br />
Uma forma rápida de rabiscar uma nova interface usando papel e caneta sem compromisso com a fidelidade de formas, cores e detalhes dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Podem ser muito úteis para validar rapidamente conceitos de produtos e ideias de design com os outros membros da equipe e com usuários.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Sketch manual</li><br />
<li>Sketch digital</li><br />
</ul><br />
<br />
== Wireframe ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um guia visual que representa a estrutura da página, bem como sua hierarquia e os principais elementos que a compõem com maior fidelidade de proporções e posicionamento mais definidos dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Útil para discutir ideias com o time e com os clientes, e também para guiar o trabalho dos Diretores de Arte e Desenvolvedores.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Planejamento</li><br />
<li>Criação de wireframe</li><br />
<li>Validação</li><br />
</ul><br />
<br />
== Mockup ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma representação estática de média a alta fidelidade de um site/app/sistema/etc. Muitas vezes um mockup é um rascunho bem próximo do design final do produto, ou até o próprio produto final.<br />
<br />
'''Importância'''<br />
<br />
Úteis para vender a ideia do produto antes de ele estar pronto. Não possuem a resistência dos entregáveis de baixa fidelidade em apresentações e são ótimos coletores de feedback.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Planejamento<br />
Desenvolvimento<br />
Avaliação da consistência da Identidade Visual em determinados dispositivos/plataformas<br />
Validação<br />
<br />
<br />
<br />
<br />
== Prototipagem ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um protótipo é uma simulação da navegação e de algumas funcionalidades de um site/app/sistema, composto normalmente por sketch/wireframes/mockup clicáveis.<br />
<br />
'''Importância'''<br />
<br />
É uma forma rápida de validar e testar um produto antes de desenvolvê-lo do começo ao fim.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Protótipo sketch<br />
Protótipo wireframe<br />
Protótipo mockup<br />
<br />
<br />
<br />
<br />
<br />
== Telas de ajuda e tutorial ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Montagem de imagens ou animações que mostram um passo a passo para guiar a utilização de um produto.<br />
<br />
'''Importância'''<br />
<br />
Identifica as ferramentas e funcionamento de um produto facilitando seu reconhecimento pelo usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Criação de pranchas que demonstrem o fluxo de navegação pelas telas do produto<br />
Simulações animadas interativas com instruções que guiam o usuário<br />
Telas de ajuda dentro do próprio produto com textos e indicações de como utilizá-lo<br />
<br />
<br />
<br />
<br />
<br />
<br />
== Pranchas de apresentação ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Documento para visualização e entendimento das telas e conceitos aplicados em um projeto ou produto.<br />
<br />
'''Importância'''<br />
<br />
Podem ser utilizadas em apresentações para auxiliar o cliente a visualizar o que foi planejado, por que foi planejado e sua importância para o produto.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Proposta de sketch<br />
Proposta de wireframe<br />
Proposta de mapa de site<br />
Proposta de fluxograma de navegação<br />
Proposta de identidade visual (logotipo, ícones, elementos gráficos etc.)<br />
Proposta de iconografia<br />
<br />
<br />
<br />
<br />
<br />
== Testes de usabilidade ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Entrevista com o consumidor, onde pede-se que ele execute uma série de tarefas em um protótipo ou mesmo no produto final. À medida em que o consumidor interage com o produto, o pesquisador faz anotações sobre seu comportamento, dificuldades e suas opiniões.<br />
<br />
'''Importância'''<br />
<br />
Essencial para atualizações do produto. Ajuda a validar fluxos, layouts e funcionalidades aumentando a qualidade, o desempenho e a empatia pelo produto final.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Análise de resultado dos testes aplicado ao usuário<br />
Planejamento de ações<br />
Produção<br />
<br />
<br />
<br />
== HTML/CSS (front-end design) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Codificação em HTML/CSS/JQUERY do mockup do layout final.<br />
<br />
'''Importância'''<br />
<br />
Traduz o que foi planejado no mockup com fidelidade e estrutura para a equipe desenvolvimento implementar as interações e funcionalidades.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Guia de montagemHTML/CSS (proporções, distâncias, tamanho de fonte, etc)<br />
Montagem HTML/CSS (estruturação, customização de componentes padrão, etc)<br />
<br />
<br />
== Folha de estilos (biblioteca de padrões) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma lista prática com exemplos (e às vezes códigos) dos padrões visuais que serão utilizados em todo o site. É fundamental para a padronização dos elementos da interface, facilitando a produção e reprodução das demais telas.<br />
<br />
'''Importância'''<br />
<br />
Não só ajuda a manter o design consistente em diferentes telas, mas também facilita a vida dos desenvolvedores na hora de implementar os elementos.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Componentes de interação (botões, listas suspensas, setas de navegação, etc.)<br />
Componentes de formatação (fonte, cores, tamanhos, espaçamentos, etc.)<br />
Componentes de marcação (HTML e CSS)<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
== Interface animada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Animações pontuais que têm a intenção de tornar a experiência do usuário mais amigável e familiar aos seus referenciais de interação analógica/digital. Podem ser aplicadas em ícones, transições, menus, janelas, botões, etc.<br />
<br />
'''Importância'''<br />
<br />
Animações de interface ajudam a envolver o usuário e encorajam uma exploração mais profunda de um app ou site. Auxilia na contextualização de uma sequência de ações. Instiga o usuário a questionar “O que vai acontecer se eu tocar isso?”, ”E depois disso?”.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Planejamento de animação<br />
Guia de animação (documento com especificações de execução)<br />
Criação de animação codificada<br />
<br />
<br />
<br />
<br />
== Validação técnica (designer) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Revisão e validação do produto funcional em relação ao que foi planejado.<br />
<br />
'''Importância'''<br />
<br />
Garantir que todo o planejamento, em todas as áreas competentes a equipe, tenha sido executado para que o produto chegue com a máxima qualidade para a análise do cliente.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Validação de montagem HTML/CSS<br />
Validação pós back-end<br />
Validação de usabilidade básica no dispositivo/paltaforma final<br />
<br />
<br />
<br />
<br />
== Interface gamificada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uso de elementos visuais atrativos que auxiliam na exposição dos dados de desempenho do usuário/jogador. Adiciona uma experiência lúdica, mais próxima de um jogo que de um sistema.<br />
<br />
'''Importância'''<br />
<br />
Tem o objetivo de tornar a experiência de uso de um determinado produto diferenciado e instigante.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Estudo de similares<br />
Pesquisa de interesses do público alvo<br />
Planejamento da gamificação<br />
Planejamento e mapeamento do impacto no layout</div>Danilo.pontechellehttp://wiki.mstech.com.br/index.php?title=Designers_da_Informa%C3%A7%C3%A3o&diff=800Designers da Informação2016-06-23T19:26:23Z<p>Danilo.pontechelle: /* Sketch */</p>
<hr />
<div><br />
A equipe de Design da Informação tem como principais responsabilidades arquitetar e realizar fluxos de informação na concepção de produtos, construção de interfaces gráficas e identidades visuais, bem como elaborar soluções criativas no que compete a usabilidade, navegabilidade e facilidade de interação, definir padrões reaproveitáveis e executar procedimentos práticos, assim como a codificação Front End (HTML/CSS), a fim de garantir a melhor experiência entre o produto concebido e o usuário final.<br />
<br />
'''A equipe'''<br />
<br />
Contamos com quatro designers altamente capacitados e versados nas mais diferentes aptidões que são necessárias para desempenhar o papel de Designer da Informação:<br />
<ul><br />
<li>Danilo Martinelli Pontechelle;</li><br />
<li>Lucas Toledo Teixeira Evangelista;</li><br />
<li>Miriam Midori Haga;</li><br />
<li>Samuel de Aguiar Sabino.</li><br />
</ul><br />
<br />
== Planejamento geral ==<br />
<br />
<p><strong>O que é?</strong></p><br />
<p class="ng-binding">Análise de todos os requisitos relacionados ao projeto, tipos de plataforma envolvidas, objetivo do cliente, análise do público alvo, a fim de elaborar o planejamento da produção e também a concepção do produto.</p><br />
<p><strong>Importância</strong></p><br />
<p class="ng-binding">Fase crucial para entendimento do que precisa ser produzido e como será produzido assim como suas características.</p><br />
<p><strong>Atividades relacionadas</strong></p><br />
<ul class="lista-padrao"><br />
<!-- ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise de requisitos</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do objetivo do cliente</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do público alvo</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Concepção do produto</li><!-- end ngRepeat: relacionado in competencia.relacionados --><br />
</ul><br />
<br />
== Identidade Visual ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representa um produto/serviço por meio de símbolos, logotipos, fontes, áudios, animações, elementos gráficos e outros.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia um produto/serviço e é responsável pela comunicação de seus valores ao usuário/consumidor.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Estudos (análise de similares, brainstorm, rascunhos de solução)</li><br />
<li>Moodboard (prancha com paleta de cores e imagens de referência)</li><br />
<li>Elementos gráficos (patterns, ícones, grafismos etc.)</li><br />
<li>Layout (impresso, web, animação etc.)</li><br />
<li>Guidelines</li><br />
</ul><br />
<br />
== Logo do produto ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representação visual de um conceito, cuja forma, cores e fonte dão identidade a um produto.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia o produto em relação aos concorrentes. Também simboliza a sua filosofia e forma de atuação no mercado.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Pesquisa de referências de similares no mercado</li><br />
<li>Definição do conceito principal e criação de um símbolo que traduza essa ideia</li><br />
<li>Avaliação da consistência da identidade em diversos tamanhos e dispositivos/plataformas</li><br />
</ul><br />
<br />
== Iconografia ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
É o conjunto de ícones padrão de uma interface, signos visuais que representam outro objeto por força de semelhança. Ícones são signos substitutivos (podem ser usados no lugar da coisa representada) e fundamentais na interação dos usuários com os computadores, pois indicam as zonas de acionamento de comandos ou reforçam visualmente alguma ação que o sistema apresenta.<br />
<br />
'''Importância'''<br />
<br />
Uma iconografia bem projetada é essencial para qualquer interface. Suas vantagens são impressionantes, pois dispensam leitura, logo podem ser identificadas por analfabetos, estrangeiros, etc. São compreendidos rapidamente diminuindo o tempo de interação, são mais facilmente memorizados e otimizam o espaço nas telas.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Ícones da interface (menus, funcionalidades, alertas, botões...)</li><br />
<li>Ícones do produto (aplicativo, favicon, etc.)</li><br />
</ul><br />
<br />
== Acessibilidade ==<br />
<br />
'''O que é?'''<br />
<br />
Acessibilidade é definida como a possibilidade de qualquer pessoa, independentemente de suas capacidades físicomotoras, perceptivas, culturais e sociais, usufruir os benefícios de uma vida em sociedade, tendo a possibilidade de participar de qualquer atividade, até as que incluem o uso de produtos, serviços e informações, com o mínimo de restrição possível.<br />
<br />
'''Importância'''<br />
<br />
Está ligado intimamente com a experiência do usuário e com toda a produção tanto de código quanto visual. É mais fácil e eficiente planejá-la desde o início para evitar retrabalho.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Seguir os padrões de desenvolvimento Web da W3C (cor, contraste, tamanhos etc.)</li><br />
<li>Seguir diretrizes e recomendações de acessibilidade do WAI, WCAG e WAI-ARIA (navegabilidade, HTML, etc.)</li><br />
<li>Realizar avaliação de acessibilidade</li><br />
</ul><br />
<br />
== Fluxo de navegação ==<br />
<br />
'''O que é?'''<br />
<br />
Uma representação visual do fluxo do usuário para completar tarefas dentro de um sistema. Exemplo: Em um site, o usuário começa pela na página inicial, segue para a página de um produto, depois vai até o carrinho de compras – e assim por diante. É a perspectiva do usuário sobre a organização do site, que ajuda a identificar quais passos precisam ser melhorados ou redesenhados.<br />
'''<br />
Importância'''<br />
<br />
Define a navegação bem como a utilização de botões/menus/listas e outros componentes de interação.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Simplificar processos</li><br />
<li>Redefinir fluxos de interação</li><br />
</ul><br />
<br />
== Mapa do site ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Consiste em um diagrama das páginas/seções de um site/app/sistema/etc organizadas hierarquicamente.<br />
<br />
'''Importância'''<br />
<br />
Ajuda a visualizar e compreender a estrutura básica e a navegação entre as diferentes partes do sistema. A partir dele podemos definir a navegação macro e ideal do usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Listagem de seções</li><br />
<li>Montagem de mapa do site</li><br />
</ul><br />
<br />
== Sketch ==<br />
<br />
'''O que é?'''<br />
<br />
Uma forma rápida de rabiscar uma nova interface usando papel e caneta sem compromisso com a fidelidade de formas, cores e detalhes dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Podem ser muito úteis para validar rapidamente conceitos de produtos e ideias de design com os outros membros da equipe e com usuários.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Sketch manual</li><br />
<li>Sketch digital</li><br />
</ul><br />
<br />
== Wireframe ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um guia visual que representa a estrutura da página, bem como sua hierarquia e os principais elementos que a compõem com maior fidelidade de proporções e posicionamento mais definidos dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Útil para discutir ideias com o time e com os clientes, e também para guiar o trabalho dos Diretores de Arte e Desenvolvedores.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Planejamento<br />
Criação de wireframe<br />
Validação<br />
<br />
<br />
<br />
<br />
<br />
<br />
== Mockup ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma representação estática de média a alta fidelidade de um site/app/sistema/etc. Muitas vezes um mockup é um rascunho bem próximo do design final do produto, ou até o próprio produto final.<br />
<br />
'''Importância'''<br />
<br />
Úteis para vender a ideia do produto antes de ele estar pronto. Não possuem a resistência dos entregáveis de baixa fidelidade em apresentações e são ótimos coletores de feedback.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Planejamento<br />
Desenvolvimento<br />
Avaliação da consistência da Identidade Visual em determinados dispositivos/plataformas<br />
Validação<br />
<br />
<br />
<br />
<br />
== Prototipagem ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um protótipo é uma simulação da navegação e de algumas funcionalidades de um site/app/sistema, composto normalmente por sketch/wireframes/mockup clicáveis.<br />
<br />
'''Importância'''<br />
<br />
É uma forma rápida de validar e testar um produto antes de desenvolvê-lo do começo ao fim.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Protótipo sketch<br />
Protótipo wireframe<br />
Protótipo mockup<br />
<br />
<br />
<br />
<br />
<br />
== Telas de ajuda e tutorial ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Montagem de imagens ou animações que mostram um passo a passo para guiar a utilização de um produto.<br />
<br />
'''Importância'''<br />
<br />
Identifica as ferramentas e funcionamento de um produto facilitando seu reconhecimento pelo usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Criação de pranchas que demonstrem o fluxo de navegação pelas telas do produto<br />
Simulações animadas interativas com instruções que guiam o usuário<br />
Telas de ajuda dentro do próprio produto com textos e indicações de como utilizá-lo<br />
<br />
<br />
<br />
<br />
<br />
<br />
== Pranchas de apresentação ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Documento para visualização e entendimento das telas e conceitos aplicados em um projeto ou produto.<br />
<br />
'''Importância'''<br />
<br />
Podem ser utilizadas em apresentações para auxiliar o cliente a visualizar o que foi planejado, por que foi planejado e sua importância para o produto.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Proposta de sketch<br />
Proposta de wireframe<br />
Proposta de mapa de site<br />
Proposta de fluxograma de navegação<br />
Proposta de identidade visual (logotipo, ícones, elementos gráficos etc.)<br />
Proposta de iconografia<br />
<br />
<br />
<br />
<br />
<br />
== Testes de usabilidade ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Entrevista com o consumidor, onde pede-se que ele execute uma série de tarefas em um protótipo ou mesmo no produto final. À medida em que o consumidor interage com o produto, o pesquisador faz anotações sobre seu comportamento, dificuldades e suas opiniões.<br />
<br />
'''Importância'''<br />
<br />
Essencial para atualizações do produto. Ajuda a validar fluxos, layouts e funcionalidades aumentando a qualidade, o desempenho e a empatia pelo produto final.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Análise de resultado dos testes aplicado ao usuário<br />
Planejamento de ações<br />
Produção<br />
<br />
<br />
<br />
== HTML/CSS (front-end design) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Codificação em HTML/CSS/JQUERY do mockup do layout final.<br />
<br />
'''Importância'''<br />
<br />
Traduz o que foi planejado no mockup com fidelidade e estrutura para a equipe desenvolvimento implementar as interações e funcionalidades.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Guia de montagemHTML/CSS (proporções, distâncias, tamanho de fonte, etc)<br />
Montagem HTML/CSS (estruturação, customização de componentes padrão, etc)<br />
<br />
<br />
== Folha de estilos (biblioteca de padrões) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma lista prática com exemplos (e às vezes códigos) dos padrões visuais que serão utilizados em todo o site. É fundamental para a padronização dos elementos da interface, facilitando a produção e reprodução das demais telas.<br />
<br />
'''Importância'''<br />
<br />
Não só ajuda a manter o design consistente em diferentes telas, mas também facilita a vida dos desenvolvedores na hora de implementar os elementos.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Componentes de interação (botões, listas suspensas, setas de navegação, etc.)<br />
Componentes de formatação (fonte, cores, tamanhos, espaçamentos, etc.)<br />
Componentes de marcação (HTML e CSS)<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
== Interface animada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Animações pontuais que têm a intenção de tornar a experiência do usuário mais amigável e familiar aos seus referenciais de interação analógica/digital. Podem ser aplicadas em ícones, transições, menus, janelas, botões, etc.<br />
<br />
'''Importância'''<br />
<br />
Animações de interface ajudam a envolver o usuário e encorajam uma exploração mais profunda de um app ou site. Auxilia na contextualização de uma sequência de ações. Instiga o usuário a questionar “O que vai acontecer se eu tocar isso?”, ”E depois disso?”.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Planejamento de animação<br />
Guia de animação (documento com especificações de execução)<br />
Criação de animação codificada<br />
<br />
<br />
<br />
<br />
== Validação técnica (designer) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Revisão e validação do produto funcional em relação ao que foi planejado.<br />
<br />
'''Importância'''<br />
<br />
Garantir que todo o planejamento, em todas as áreas competentes a equipe, tenha sido executado para que o produto chegue com a máxima qualidade para a análise do cliente.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Validação de montagem HTML/CSS<br />
Validação pós back-end<br />
Validação de usabilidade básica no dispositivo/paltaforma final<br />
<br />
<br />
<br />
<br />
== Interface gamificada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uso de elementos visuais atrativos que auxiliam na exposição dos dados de desempenho do usuário/jogador. Adiciona uma experiência lúdica, mais próxima de um jogo que de um sistema.<br />
<br />
'''Importância'''<br />
<br />
Tem o objetivo de tornar a experiência de uso de um determinado produto diferenciado e instigante.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Estudo de similares<br />
Pesquisa de interesses do público alvo<br />
Planejamento da gamificação<br />
Planejamento e mapeamento do impacto no layout</div>Danilo.pontechellehttp://wiki.mstech.com.br/index.php?title=Designers_da_Informa%C3%A7%C3%A3o&diff=799Designers da Informação2016-06-23T19:25:55Z<p>Danilo.pontechelle: /* Mapa do site */</p>
<hr />
<div><br />
A equipe de Design da Informação tem como principais responsabilidades arquitetar e realizar fluxos de informação na concepção de produtos, construção de interfaces gráficas e identidades visuais, bem como elaborar soluções criativas no que compete a usabilidade, navegabilidade e facilidade de interação, definir padrões reaproveitáveis e executar procedimentos práticos, assim como a codificação Front End (HTML/CSS), a fim de garantir a melhor experiência entre o produto concebido e o usuário final.<br />
<br />
'''A equipe'''<br />
<br />
Contamos com quatro designers altamente capacitados e versados nas mais diferentes aptidões que são necessárias para desempenhar o papel de Designer da Informação:<br />
<ul><br />
<li>Danilo Martinelli Pontechelle;</li><br />
<li>Lucas Toledo Teixeira Evangelista;</li><br />
<li>Miriam Midori Haga;</li><br />
<li>Samuel de Aguiar Sabino.</li><br />
</ul><br />
<br />
== Planejamento geral ==<br />
<br />
<p><strong>O que é?</strong></p><br />
<p class="ng-binding">Análise de todos os requisitos relacionados ao projeto, tipos de plataforma envolvidas, objetivo do cliente, análise do público alvo, a fim de elaborar o planejamento da produção e também a concepção do produto.</p><br />
<p><strong>Importância</strong></p><br />
<p class="ng-binding">Fase crucial para entendimento do que precisa ser produzido e como será produzido assim como suas características.</p><br />
<p><strong>Atividades relacionadas</strong></p><br />
<ul class="lista-padrao"><br />
<!-- ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise de requisitos</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do objetivo do cliente</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do público alvo</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Concepção do produto</li><!-- end ngRepeat: relacionado in competencia.relacionados --><br />
</ul><br />
<br />
== Identidade Visual ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representa um produto/serviço por meio de símbolos, logotipos, fontes, áudios, animações, elementos gráficos e outros.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia um produto/serviço e é responsável pela comunicação de seus valores ao usuário/consumidor.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Estudos (análise de similares, brainstorm, rascunhos de solução)</li><br />
<li>Moodboard (prancha com paleta de cores e imagens de referência)</li><br />
<li>Elementos gráficos (patterns, ícones, grafismos etc.)</li><br />
<li>Layout (impresso, web, animação etc.)</li><br />
<li>Guidelines</li><br />
</ul><br />
<br />
== Logo do produto ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representação visual de um conceito, cuja forma, cores e fonte dão identidade a um produto.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia o produto em relação aos concorrentes. Também simboliza a sua filosofia e forma de atuação no mercado.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Pesquisa de referências de similares no mercado</li><br />
<li>Definição do conceito principal e criação de um símbolo que traduza essa ideia</li><br />
<li>Avaliação da consistência da identidade em diversos tamanhos e dispositivos/plataformas</li><br />
</ul><br />
<br />
== Iconografia ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
É o conjunto de ícones padrão de uma interface, signos visuais que representam outro objeto por força de semelhança. Ícones são signos substitutivos (podem ser usados no lugar da coisa representada) e fundamentais na interação dos usuários com os computadores, pois indicam as zonas de acionamento de comandos ou reforçam visualmente alguma ação que o sistema apresenta.<br />
<br />
'''Importância'''<br />
<br />
Uma iconografia bem projetada é essencial para qualquer interface. Suas vantagens são impressionantes, pois dispensam leitura, logo podem ser identificadas por analfabetos, estrangeiros, etc. São compreendidos rapidamente diminuindo o tempo de interação, são mais facilmente memorizados e otimizam o espaço nas telas.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Ícones da interface (menus, funcionalidades, alertas, botões...)</li><br />
<li>Ícones do produto (aplicativo, favicon, etc.)</li><br />
</ul><br />
<br />
== Acessibilidade ==<br />
<br />
'''O que é?'''<br />
<br />
Acessibilidade é definida como a possibilidade de qualquer pessoa, independentemente de suas capacidades físicomotoras, perceptivas, culturais e sociais, usufruir os benefícios de uma vida em sociedade, tendo a possibilidade de participar de qualquer atividade, até as que incluem o uso de produtos, serviços e informações, com o mínimo de restrição possível.<br />
<br />
'''Importância'''<br />
<br />
Está ligado intimamente com a experiência do usuário e com toda a produção tanto de código quanto visual. É mais fácil e eficiente planejá-la desde o início para evitar retrabalho.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Seguir os padrões de desenvolvimento Web da W3C (cor, contraste, tamanhos etc.)</li><br />
<li>Seguir diretrizes e recomendações de acessibilidade do WAI, WCAG e WAI-ARIA (navegabilidade, HTML, etc.)</li><br />
<li>Realizar avaliação de acessibilidade</li><br />
</ul><br />
<br />
== Fluxo de navegação ==<br />
<br />
'''O que é?'''<br />
<br />
Uma representação visual do fluxo do usuário para completar tarefas dentro de um sistema. Exemplo: Em um site, o usuário começa pela na página inicial, segue para a página de um produto, depois vai até o carrinho de compras – e assim por diante. É a perspectiva do usuário sobre a organização do site, que ajuda a identificar quais passos precisam ser melhorados ou redesenhados.<br />
'''<br />
Importância'''<br />
<br />
Define a navegação bem como a utilização de botões/menus/listas e outros componentes de interação.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Simplificar processos</li><br />
<li>Redefinir fluxos de interação</li><br />
</ul><br />
<br />
== Mapa do site ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Consiste em um diagrama das páginas/seções de um site/app/sistema/etc organizadas hierarquicamente.<br />
<br />
'''Importância'''<br />
<br />
Ajuda a visualizar e compreender a estrutura básica e a navegação entre as diferentes partes do sistema. A partir dele podemos definir a navegação macro e ideal do usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Listagem de seções</li><br />
<li>Montagem de mapa do site</li><br />
</ul><br />
<br />
== Sketch ==<br />
<br />
'''O que é?'''<br />
<br />
Uma forma rápida de rabiscar uma nova interface usando papel e caneta sem compromisso com a fidelidade de formas, cores e detalhes dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Podem ser muito úteis para validar rapidamente conceitos de produtos e ideias de design com os outros membros da equipe e com usuários.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Sketch manual<br />
Sketch digital<br />
<br />
<br />
<br />
<br />
== Wireframe ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um guia visual que representa a estrutura da página, bem como sua hierarquia e os principais elementos que a compõem com maior fidelidade de proporções e posicionamento mais definidos dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Útil para discutir ideias com o time e com os clientes, e também para guiar o trabalho dos Diretores de Arte e Desenvolvedores.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Planejamento<br />
Criação de wireframe<br />
Validação<br />
<br />
<br />
<br />
<br />
<br />
<br />
== Mockup ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma representação estática de média a alta fidelidade de um site/app/sistema/etc. Muitas vezes um mockup é um rascunho bem próximo do design final do produto, ou até o próprio produto final.<br />
<br />
'''Importância'''<br />
<br />
Úteis para vender a ideia do produto antes de ele estar pronto. Não possuem a resistência dos entregáveis de baixa fidelidade em apresentações e são ótimos coletores de feedback.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Planejamento<br />
Desenvolvimento<br />
Avaliação da consistência da Identidade Visual em determinados dispositivos/plataformas<br />
Validação<br />
<br />
<br />
<br />
<br />
== Prototipagem ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um protótipo é uma simulação da navegação e de algumas funcionalidades de um site/app/sistema, composto normalmente por sketch/wireframes/mockup clicáveis.<br />
<br />
'''Importância'''<br />
<br />
É uma forma rápida de validar e testar um produto antes de desenvolvê-lo do começo ao fim.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Protótipo sketch<br />
Protótipo wireframe<br />
Protótipo mockup<br />
<br />
<br />
<br />
<br />
<br />
== Telas de ajuda e tutorial ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Montagem de imagens ou animações que mostram um passo a passo para guiar a utilização de um produto.<br />
<br />
'''Importância'''<br />
<br />
Identifica as ferramentas e funcionamento de um produto facilitando seu reconhecimento pelo usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Criação de pranchas que demonstrem o fluxo de navegação pelas telas do produto<br />
Simulações animadas interativas com instruções que guiam o usuário<br />
Telas de ajuda dentro do próprio produto com textos e indicações de como utilizá-lo<br />
<br />
<br />
<br />
<br />
<br />
<br />
== Pranchas de apresentação ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Documento para visualização e entendimento das telas e conceitos aplicados em um projeto ou produto.<br />
<br />
'''Importância'''<br />
<br />
Podem ser utilizadas em apresentações para auxiliar o cliente a visualizar o que foi planejado, por que foi planejado e sua importância para o produto.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Proposta de sketch<br />
Proposta de wireframe<br />
Proposta de mapa de site<br />
Proposta de fluxograma de navegação<br />
Proposta de identidade visual (logotipo, ícones, elementos gráficos etc.)<br />
Proposta de iconografia<br />
<br />
<br />
<br />
<br />
<br />
== Testes de usabilidade ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Entrevista com o consumidor, onde pede-se que ele execute uma série de tarefas em um protótipo ou mesmo no produto final. À medida em que o consumidor interage com o produto, o pesquisador faz anotações sobre seu comportamento, dificuldades e suas opiniões.<br />
<br />
'''Importância'''<br />
<br />
Essencial para atualizações do produto. Ajuda a validar fluxos, layouts e funcionalidades aumentando a qualidade, o desempenho e a empatia pelo produto final.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Análise de resultado dos testes aplicado ao usuário<br />
Planejamento de ações<br />
Produção<br />
<br />
<br />
<br />
== HTML/CSS (front-end design) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Codificação em HTML/CSS/JQUERY do mockup do layout final.<br />
<br />
'''Importância'''<br />
<br />
Traduz o que foi planejado no mockup com fidelidade e estrutura para a equipe desenvolvimento implementar as interações e funcionalidades.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Guia de montagemHTML/CSS (proporções, distâncias, tamanho de fonte, etc)<br />
Montagem HTML/CSS (estruturação, customização de componentes padrão, etc)<br />
<br />
<br />
== Folha de estilos (biblioteca de padrões) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma lista prática com exemplos (e às vezes códigos) dos padrões visuais que serão utilizados em todo o site. É fundamental para a padronização dos elementos da interface, facilitando a produção e reprodução das demais telas.<br />
<br />
'''Importância'''<br />
<br />
Não só ajuda a manter o design consistente em diferentes telas, mas também facilita a vida dos desenvolvedores na hora de implementar os elementos.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Componentes de interação (botões, listas suspensas, setas de navegação, etc.)<br />
Componentes de formatação (fonte, cores, tamanhos, espaçamentos, etc.)<br />
Componentes de marcação (HTML e CSS)<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
== Interface animada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Animações pontuais que têm a intenção de tornar a experiência do usuário mais amigável e familiar aos seus referenciais de interação analógica/digital. Podem ser aplicadas em ícones, transições, menus, janelas, botões, etc.<br />
<br />
'''Importância'''<br />
<br />
Animações de interface ajudam a envolver o usuário e encorajam uma exploração mais profunda de um app ou site. Auxilia na contextualização de uma sequência de ações. Instiga o usuário a questionar “O que vai acontecer se eu tocar isso?”, ”E depois disso?”.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Planejamento de animação<br />
Guia de animação (documento com especificações de execução)<br />
Criação de animação codificada<br />
<br />
<br />
<br />
<br />
== Validação técnica (designer) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Revisão e validação do produto funcional em relação ao que foi planejado.<br />
<br />
'''Importância'''<br />
<br />
Garantir que todo o planejamento, em todas as áreas competentes a equipe, tenha sido executado para que o produto chegue com a máxima qualidade para a análise do cliente.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Validação de montagem HTML/CSS<br />
Validação pós back-end<br />
Validação de usabilidade básica no dispositivo/paltaforma final<br />
<br />
<br />
<br />
<br />
== Interface gamificada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uso de elementos visuais atrativos que auxiliam na exposição dos dados de desempenho do usuário/jogador. Adiciona uma experiência lúdica, mais próxima de um jogo que de um sistema.<br />
<br />
'''Importância'''<br />
<br />
Tem o objetivo de tornar a experiência de uso de um determinado produto diferenciado e instigante.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Estudo de similares<br />
Pesquisa de interesses do público alvo<br />
Planejamento da gamificação<br />
Planejamento e mapeamento do impacto no layout</div>Danilo.pontechellehttp://wiki.mstech.com.br/index.php?title=Designers_da_Informa%C3%A7%C3%A3o&diff=798Designers da Informação2016-06-23T19:25:33Z<p>Danilo.pontechelle: /* Fluxo de navegação */</p>
<hr />
<div><br />
A equipe de Design da Informação tem como principais responsabilidades arquitetar e realizar fluxos de informação na concepção de produtos, construção de interfaces gráficas e identidades visuais, bem como elaborar soluções criativas no que compete a usabilidade, navegabilidade e facilidade de interação, definir padrões reaproveitáveis e executar procedimentos práticos, assim como a codificação Front End (HTML/CSS), a fim de garantir a melhor experiência entre o produto concebido e o usuário final.<br />
<br />
'''A equipe'''<br />
<br />
Contamos com quatro designers altamente capacitados e versados nas mais diferentes aptidões que são necessárias para desempenhar o papel de Designer da Informação:<br />
<ul><br />
<li>Danilo Martinelli Pontechelle;</li><br />
<li>Lucas Toledo Teixeira Evangelista;</li><br />
<li>Miriam Midori Haga;</li><br />
<li>Samuel de Aguiar Sabino.</li><br />
</ul><br />
<br />
== Planejamento geral ==<br />
<br />
<p><strong>O que é?</strong></p><br />
<p class="ng-binding">Análise de todos os requisitos relacionados ao projeto, tipos de plataforma envolvidas, objetivo do cliente, análise do público alvo, a fim de elaborar o planejamento da produção e também a concepção do produto.</p><br />
<p><strong>Importância</strong></p><br />
<p class="ng-binding">Fase crucial para entendimento do que precisa ser produzido e como será produzido assim como suas características.</p><br />
<p><strong>Atividades relacionadas</strong></p><br />
<ul class="lista-padrao"><br />
<!-- ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise de requisitos</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do objetivo do cliente</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do público alvo</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Concepção do produto</li><!-- end ngRepeat: relacionado in competencia.relacionados --><br />
</ul><br />
<br />
== Identidade Visual ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representa um produto/serviço por meio de símbolos, logotipos, fontes, áudios, animações, elementos gráficos e outros.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia um produto/serviço e é responsável pela comunicação de seus valores ao usuário/consumidor.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Estudos (análise de similares, brainstorm, rascunhos de solução)</li><br />
<li>Moodboard (prancha com paleta de cores e imagens de referência)</li><br />
<li>Elementos gráficos (patterns, ícones, grafismos etc.)</li><br />
<li>Layout (impresso, web, animação etc.)</li><br />
<li>Guidelines</li><br />
</ul><br />
<br />
== Logo do produto ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representação visual de um conceito, cuja forma, cores e fonte dão identidade a um produto.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia o produto em relação aos concorrentes. Também simboliza a sua filosofia e forma de atuação no mercado.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Pesquisa de referências de similares no mercado</li><br />
<li>Definição do conceito principal e criação de um símbolo que traduza essa ideia</li><br />
<li>Avaliação da consistência da identidade em diversos tamanhos e dispositivos/plataformas</li><br />
</ul><br />
<br />
== Iconografia ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
É o conjunto de ícones padrão de uma interface, signos visuais que representam outro objeto por força de semelhança. Ícones são signos substitutivos (podem ser usados no lugar da coisa representada) e fundamentais na interação dos usuários com os computadores, pois indicam as zonas de acionamento de comandos ou reforçam visualmente alguma ação que o sistema apresenta.<br />
<br />
'''Importância'''<br />
<br />
Uma iconografia bem projetada é essencial para qualquer interface. Suas vantagens são impressionantes, pois dispensam leitura, logo podem ser identificadas por analfabetos, estrangeiros, etc. São compreendidos rapidamente diminuindo o tempo de interação, são mais facilmente memorizados e otimizam o espaço nas telas.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Ícones da interface (menus, funcionalidades, alertas, botões...)</li><br />
<li>Ícones do produto (aplicativo, favicon, etc.)</li><br />
</ul><br />
<br />
== Acessibilidade ==<br />
<br />
'''O que é?'''<br />
<br />
Acessibilidade é definida como a possibilidade de qualquer pessoa, independentemente de suas capacidades físicomotoras, perceptivas, culturais e sociais, usufruir os benefícios de uma vida em sociedade, tendo a possibilidade de participar de qualquer atividade, até as que incluem o uso de produtos, serviços e informações, com o mínimo de restrição possível.<br />
<br />
'''Importância'''<br />
<br />
Está ligado intimamente com a experiência do usuário e com toda a produção tanto de código quanto visual. É mais fácil e eficiente planejá-la desde o início para evitar retrabalho.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Seguir os padrões de desenvolvimento Web da W3C (cor, contraste, tamanhos etc.)</li><br />
<li>Seguir diretrizes e recomendações de acessibilidade do WAI, WCAG e WAI-ARIA (navegabilidade, HTML, etc.)</li><br />
<li>Realizar avaliação de acessibilidade</li><br />
</ul><br />
<br />
== Fluxo de navegação ==<br />
<br />
'''O que é?'''<br />
<br />
Uma representação visual do fluxo do usuário para completar tarefas dentro de um sistema. Exemplo: Em um site, o usuário começa pela na página inicial, segue para a página de um produto, depois vai até o carrinho de compras – e assim por diante. É a perspectiva do usuário sobre a organização do site, que ajuda a identificar quais passos precisam ser melhorados ou redesenhados.<br />
'''<br />
Importância'''<br />
<br />
Define a navegação bem como a utilização de botões/menus/listas e outros componentes de interação.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Simplificar processos</li><br />
<li>Redefinir fluxos de interação</li><br />
</ul><br />
<br />
== Mapa do site ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Consiste em um diagrama das páginas/seções de um site/app/sistema/etc organizadas hierarquicamente.<br />
<br />
'''Importância'''<br />
<br />
Ajuda a visualizar e compreender a estrutura básica e a navegação entre as diferentes partes do sistema. A partir dele podemos definir a navegação macro e ideal do usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Listagem de seções<br />
Montagem de mapa do site<br />
<br />
<br />
<br />
<br />
<br />
<br />
== Sketch ==<br />
<br />
'''O que é?'''<br />
<br />
Uma forma rápida de rabiscar uma nova interface usando papel e caneta sem compromisso com a fidelidade de formas, cores e detalhes dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Podem ser muito úteis para validar rapidamente conceitos de produtos e ideias de design com os outros membros da equipe e com usuários.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Sketch manual<br />
Sketch digital<br />
<br />
<br />
<br />
<br />
== Wireframe ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um guia visual que representa a estrutura da página, bem como sua hierarquia e os principais elementos que a compõem com maior fidelidade de proporções e posicionamento mais definidos dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Útil para discutir ideias com o time e com os clientes, e também para guiar o trabalho dos Diretores de Arte e Desenvolvedores.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Planejamento<br />
Criação de wireframe<br />
Validação<br />
<br />
<br />
<br />
<br />
<br />
<br />
== Mockup ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma representação estática de média a alta fidelidade de um site/app/sistema/etc. Muitas vezes um mockup é um rascunho bem próximo do design final do produto, ou até o próprio produto final.<br />
<br />
'''Importância'''<br />
<br />
Úteis para vender a ideia do produto antes de ele estar pronto. Não possuem a resistência dos entregáveis de baixa fidelidade em apresentações e são ótimos coletores de feedback.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Planejamento<br />
Desenvolvimento<br />
Avaliação da consistência da Identidade Visual em determinados dispositivos/plataformas<br />
Validação<br />
<br />
<br />
<br />
<br />
== Prototipagem ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um protótipo é uma simulação da navegação e de algumas funcionalidades de um site/app/sistema, composto normalmente por sketch/wireframes/mockup clicáveis.<br />
<br />
'''Importância'''<br />
<br />
É uma forma rápida de validar e testar um produto antes de desenvolvê-lo do começo ao fim.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Protótipo sketch<br />
Protótipo wireframe<br />
Protótipo mockup<br />
<br />
<br />
<br />
<br />
<br />
== Telas de ajuda e tutorial ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Montagem de imagens ou animações que mostram um passo a passo para guiar a utilização de um produto.<br />
<br />
'''Importância'''<br />
<br />
Identifica as ferramentas e funcionamento de um produto facilitando seu reconhecimento pelo usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Criação de pranchas que demonstrem o fluxo de navegação pelas telas do produto<br />
Simulações animadas interativas com instruções que guiam o usuário<br />
Telas de ajuda dentro do próprio produto com textos e indicações de como utilizá-lo<br />
<br />
<br />
<br />
<br />
<br />
<br />
== Pranchas de apresentação ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Documento para visualização e entendimento das telas e conceitos aplicados em um projeto ou produto.<br />
<br />
'''Importância'''<br />
<br />
Podem ser utilizadas em apresentações para auxiliar o cliente a visualizar o que foi planejado, por que foi planejado e sua importância para o produto.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Proposta de sketch<br />
Proposta de wireframe<br />
Proposta de mapa de site<br />
Proposta de fluxograma de navegação<br />
Proposta de identidade visual (logotipo, ícones, elementos gráficos etc.)<br />
Proposta de iconografia<br />
<br />
<br />
<br />
<br />
<br />
== Testes de usabilidade ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Entrevista com o consumidor, onde pede-se que ele execute uma série de tarefas em um protótipo ou mesmo no produto final. À medida em que o consumidor interage com o produto, o pesquisador faz anotações sobre seu comportamento, dificuldades e suas opiniões.<br />
<br />
'''Importância'''<br />
<br />
Essencial para atualizações do produto. Ajuda a validar fluxos, layouts e funcionalidades aumentando a qualidade, o desempenho e a empatia pelo produto final.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Análise de resultado dos testes aplicado ao usuário<br />
Planejamento de ações<br />
Produção<br />
<br />
<br />
<br />
== HTML/CSS (front-end design) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Codificação em HTML/CSS/JQUERY do mockup do layout final.<br />
<br />
'''Importância'''<br />
<br />
Traduz o que foi planejado no mockup com fidelidade e estrutura para a equipe desenvolvimento implementar as interações e funcionalidades.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Guia de montagemHTML/CSS (proporções, distâncias, tamanho de fonte, etc)<br />
Montagem HTML/CSS (estruturação, customização de componentes padrão, etc)<br />
<br />
<br />
== Folha de estilos (biblioteca de padrões) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma lista prática com exemplos (e às vezes códigos) dos padrões visuais que serão utilizados em todo o site. É fundamental para a padronização dos elementos da interface, facilitando a produção e reprodução das demais telas.<br />
<br />
'''Importância'''<br />
<br />
Não só ajuda a manter o design consistente em diferentes telas, mas também facilita a vida dos desenvolvedores na hora de implementar os elementos.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Componentes de interação (botões, listas suspensas, setas de navegação, etc.)<br />
Componentes de formatação (fonte, cores, tamanhos, espaçamentos, etc.)<br />
Componentes de marcação (HTML e CSS)<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
== Interface animada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Animações pontuais que têm a intenção de tornar a experiência do usuário mais amigável e familiar aos seus referenciais de interação analógica/digital. Podem ser aplicadas em ícones, transições, menus, janelas, botões, etc.<br />
<br />
'''Importância'''<br />
<br />
Animações de interface ajudam a envolver o usuário e encorajam uma exploração mais profunda de um app ou site. Auxilia na contextualização de uma sequência de ações. Instiga o usuário a questionar “O que vai acontecer se eu tocar isso?”, ”E depois disso?”.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Planejamento de animação<br />
Guia de animação (documento com especificações de execução)<br />
Criação de animação codificada<br />
<br />
<br />
<br />
<br />
== Validação técnica (designer) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Revisão e validação do produto funcional em relação ao que foi planejado.<br />
<br />
'''Importância'''<br />
<br />
Garantir que todo o planejamento, em todas as áreas competentes a equipe, tenha sido executado para que o produto chegue com a máxima qualidade para a análise do cliente.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Validação de montagem HTML/CSS<br />
Validação pós back-end<br />
Validação de usabilidade básica no dispositivo/paltaforma final<br />
<br />
<br />
<br />
<br />
== Interface gamificada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uso de elementos visuais atrativos que auxiliam na exposição dos dados de desempenho do usuário/jogador. Adiciona uma experiência lúdica, mais próxima de um jogo que de um sistema.<br />
<br />
'''Importância'''<br />
<br />
Tem o objetivo de tornar a experiência de uso de um determinado produto diferenciado e instigante.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Estudo de similares<br />
Pesquisa de interesses do público alvo<br />
Planejamento da gamificação<br />
Planejamento e mapeamento do impacto no layout</div>Danilo.pontechellehttp://wiki.mstech.com.br/index.php?title=Designers_da_Informa%C3%A7%C3%A3o&diff=797Designers da Informação2016-06-23T19:25:16Z<p>Danilo.pontechelle: /* Acessibilidade */</p>
<hr />
<div><br />
A equipe de Design da Informação tem como principais responsabilidades arquitetar e realizar fluxos de informação na concepção de produtos, construção de interfaces gráficas e identidades visuais, bem como elaborar soluções criativas no que compete a usabilidade, navegabilidade e facilidade de interação, definir padrões reaproveitáveis e executar procedimentos práticos, assim como a codificação Front End (HTML/CSS), a fim de garantir a melhor experiência entre o produto concebido e o usuário final.<br />
<br />
'''A equipe'''<br />
<br />
Contamos com quatro designers altamente capacitados e versados nas mais diferentes aptidões que são necessárias para desempenhar o papel de Designer da Informação:<br />
<ul><br />
<li>Danilo Martinelli Pontechelle;</li><br />
<li>Lucas Toledo Teixeira Evangelista;</li><br />
<li>Miriam Midori Haga;</li><br />
<li>Samuel de Aguiar Sabino.</li><br />
</ul><br />
<br />
== Planejamento geral ==<br />
<br />
<p><strong>O que é?</strong></p><br />
<p class="ng-binding">Análise de todos os requisitos relacionados ao projeto, tipos de plataforma envolvidas, objetivo do cliente, análise do público alvo, a fim de elaborar o planejamento da produção e também a concepção do produto.</p><br />
<p><strong>Importância</strong></p><br />
<p class="ng-binding">Fase crucial para entendimento do que precisa ser produzido e como será produzido assim como suas características.</p><br />
<p><strong>Atividades relacionadas</strong></p><br />
<ul class="lista-padrao"><br />
<!-- ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise de requisitos</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do objetivo do cliente</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do público alvo</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Concepção do produto</li><!-- end ngRepeat: relacionado in competencia.relacionados --><br />
</ul><br />
<br />
== Identidade Visual ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representa um produto/serviço por meio de símbolos, logotipos, fontes, áudios, animações, elementos gráficos e outros.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia um produto/serviço e é responsável pela comunicação de seus valores ao usuário/consumidor.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Estudos (análise de similares, brainstorm, rascunhos de solução)</li><br />
<li>Moodboard (prancha com paleta de cores e imagens de referência)</li><br />
<li>Elementos gráficos (patterns, ícones, grafismos etc.)</li><br />
<li>Layout (impresso, web, animação etc.)</li><br />
<li>Guidelines</li><br />
</ul><br />
<br />
== Logo do produto ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representação visual de um conceito, cuja forma, cores e fonte dão identidade a um produto.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia o produto em relação aos concorrentes. Também simboliza a sua filosofia e forma de atuação no mercado.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Pesquisa de referências de similares no mercado</li><br />
<li>Definição do conceito principal e criação de um símbolo que traduza essa ideia</li><br />
<li>Avaliação da consistência da identidade em diversos tamanhos e dispositivos/plataformas</li><br />
</ul><br />
<br />
== Iconografia ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
É o conjunto de ícones padrão de uma interface, signos visuais que representam outro objeto por força de semelhança. Ícones são signos substitutivos (podem ser usados no lugar da coisa representada) e fundamentais na interação dos usuários com os computadores, pois indicam as zonas de acionamento de comandos ou reforçam visualmente alguma ação que o sistema apresenta.<br />
<br />
'''Importância'''<br />
<br />
Uma iconografia bem projetada é essencial para qualquer interface. Suas vantagens são impressionantes, pois dispensam leitura, logo podem ser identificadas por analfabetos, estrangeiros, etc. São compreendidos rapidamente diminuindo o tempo de interação, são mais facilmente memorizados e otimizam o espaço nas telas.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Ícones da interface (menus, funcionalidades, alertas, botões...)</li><br />
<li>Ícones do produto (aplicativo, favicon, etc.)</li><br />
</ul><br />
<br />
== Acessibilidade ==<br />
<br />
'''O que é?'''<br />
<br />
Acessibilidade é definida como a possibilidade de qualquer pessoa, independentemente de suas capacidades físicomotoras, perceptivas, culturais e sociais, usufruir os benefícios de uma vida em sociedade, tendo a possibilidade de participar de qualquer atividade, até as que incluem o uso de produtos, serviços e informações, com o mínimo de restrição possível.<br />
<br />
'''Importância'''<br />
<br />
Está ligado intimamente com a experiência do usuário e com toda a produção tanto de código quanto visual. É mais fácil e eficiente planejá-la desde o início para evitar retrabalho.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Seguir os padrões de desenvolvimento Web da W3C (cor, contraste, tamanhos etc.)</li><br />
<li>Seguir diretrizes e recomendações de acessibilidade do WAI, WCAG e WAI-ARIA (navegabilidade, HTML, etc.)</li><br />
<li>Realizar avaliação de acessibilidade</li><br />
</ul><br />
<br />
== Fluxo de navegação ==<br />
<br />
'''O que é?'''<br />
<br />
Uma representação visual do fluxo do usuário para completar tarefas dentro de um sistema. Exemplo: Em um site, o usuário começa pela na página inicial, segue para a página de um produto, depois vai até o carrinho de compras – e assim por diante. É a perspectiva do usuário sobre a organização do site, que ajuda a identificar quais passos precisam ser melhorados ou redesenhados.<br />
'''<br />
Importância'''<br />
<br />
Define a navegação bem como a utilização de botões/menus/listas e outros componentes de interação.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Simplificar processos<br />
Redefinir fluxos de interação<br />
<br />
<br />
<br />
<br />
== Mapa do site ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Consiste em um diagrama das páginas/seções de um site/app/sistema/etc organizadas hierarquicamente.<br />
<br />
'''Importância'''<br />
<br />
Ajuda a visualizar e compreender a estrutura básica e a navegação entre as diferentes partes do sistema. A partir dele podemos definir a navegação macro e ideal do usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Listagem de seções<br />
Montagem de mapa do site<br />
<br />
<br />
<br />
<br />
<br />
<br />
== Sketch ==<br />
<br />
'''O que é?'''<br />
<br />
Uma forma rápida de rabiscar uma nova interface usando papel e caneta sem compromisso com a fidelidade de formas, cores e detalhes dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Podem ser muito úteis para validar rapidamente conceitos de produtos e ideias de design com os outros membros da equipe e com usuários.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Sketch manual<br />
Sketch digital<br />
<br />
<br />
<br />
<br />
== Wireframe ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um guia visual que representa a estrutura da página, bem como sua hierarquia e os principais elementos que a compõem com maior fidelidade de proporções e posicionamento mais definidos dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Útil para discutir ideias com o time e com os clientes, e também para guiar o trabalho dos Diretores de Arte e Desenvolvedores.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Planejamento<br />
Criação de wireframe<br />
Validação<br />
<br />
<br />
<br />
<br />
<br />
<br />
== Mockup ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma representação estática de média a alta fidelidade de um site/app/sistema/etc. Muitas vezes um mockup é um rascunho bem próximo do design final do produto, ou até o próprio produto final.<br />
<br />
'''Importância'''<br />
<br />
Úteis para vender a ideia do produto antes de ele estar pronto. Não possuem a resistência dos entregáveis de baixa fidelidade em apresentações e são ótimos coletores de feedback.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Planejamento<br />
Desenvolvimento<br />
Avaliação da consistência da Identidade Visual em determinados dispositivos/plataformas<br />
Validação<br />
<br />
<br />
<br />
<br />
== Prototipagem ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um protótipo é uma simulação da navegação e de algumas funcionalidades de um site/app/sistema, composto normalmente por sketch/wireframes/mockup clicáveis.<br />
<br />
'''Importância'''<br />
<br />
É uma forma rápida de validar e testar um produto antes de desenvolvê-lo do começo ao fim.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Protótipo sketch<br />
Protótipo wireframe<br />
Protótipo mockup<br />
<br />
<br />
<br />
<br />
<br />
== Telas de ajuda e tutorial ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Montagem de imagens ou animações que mostram um passo a passo para guiar a utilização de um produto.<br />
<br />
'''Importância'''<br />
<br />
Identifica as ferramentas e funcionamento de um produto facilitando seu reconhecimento pelo usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Criação de pranchas que demonstrem o fluxo de navegação pelas telas do produto<br />
Simulações animadas interativas com instruções que guiam o usuário<br />
Telas de ajuda dentro do próprio produto com textos e indicações de como utilizá-lo<br />
<br />
<br />
<br />
<br />
<br />
<br />
== Pranchas de apresentação ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Documento para visualização e entendimento das telas e conceitos aplicados em um projeto ou produto.<br />
<br />
'''Importância'''<br />
<br />
Podem ser utilizadas em apresentações para auxiliar o cliente a visualizar o que foi planejado, por que foi planejado e sua importância para o produto.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Proposta de sketch<br />
Proposta de wireframe<br />
Proposta de mapa de site<br />
Proposta de fluxograma de navegação<br />
Proposta de identidade visual (logotipo, ícones, elementos gráficos etc.)<br />
Proposta de iconografia<br />
<br />
<br />
<br />
<br />
<br />
== Testes de usabilidade ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Entrevista com o consumidor, onde pede-se que ele execute uma série de tarefas em um protótipo ou mesmo no produto final. À medida em que o consumidor interage com o produto, o pesquisador faz anotações sobre seu comportamento, dificuldades e suas opiniões.<br />
<br />
'''Importância'''<br />
<br />
Essencial para atualizações do produto. Ajuda a validar fluxos, layouts e funcionalidades aumentando a qualidade, o desempenho e a empatia pelo produto final.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Análise de resultado dos testes aplicado ao usuário<br />
Planejamento de ações<br />
Produção<br />
<br />
<br />
<br />
== HTML/CSS (front-end design) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Codificação em HTML/CSS/JQUERY do mockup do layout final.<br />
<br />
'''Importância'''<br />
<br />
Traduz o que foi planejado no mockup com fidelidade e estrutura para a equipe desenvolvimento implementar as interações e funcionalidades.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Guia de montagemHTML/CSS (proporções, distâncias, tamanho de fonte, etc)<br />
Montagem HTML/CSS (estruturação, customização de componentes padrão, etc)<br />
<br />
<br />
== Folha de estilos (biblioteca de padrões) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma lista prática com exemplos (e às vezes códigos) dos padrões visuais que serão utilizados em todo o site. É fundamental para a padronização dos elementos da interface, facilitando a produção e reprodução das demais telas.<br />
<br />
'''Importância'''<br />
<br />
Não só ajuda a manter o design consistente em diferentes telas, mas também facilita a vida dos desenvolvedores na hora de implementar os elementos.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Componentes de interação (botões, listas suspensas, setas de navegação, etc.)<br />
Componentes de formatação (fonte, cores, tamanhos, espaçamentos, etc.)<br />
Componentes de marcação (HTML e CSS)<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
== Interface animada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Animações pontuais que têm a intenção de tornar a experiência do usuário mais amigável e familiar aos seus referenciais de interação analógica/digital. Podem ser aplicadas em ícones, transições, menus, janelas, botões, etc.<br />
<br />
'''Importância'''<br />
<br />
Animações de interface ajudam a envolver o usuário e encorajam uma exploração mais profunda de um app ou site. Auxilia na contextualização de uma sequência de ações. Instiga o usuário a questionar “O que vai acontecer se eu tocar isso?”, ”E depois disso?”.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Planejamento de animação<br />
Guia de animação (documento com especificações de execução)<br />
Criação de animação codificada<br />
<br />
<br />
<br />
<br />
== Validação técnica (designer) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Revisão e validação do produto funcional em relação ao que foi planejado.<br />
<br />
'''Importância'''<br />
<br />
Garantir que todo o planejamento, em todas as áreas competentes a equipe, tenha sido executado para que o produto chegue com a máxima qualidade para a análise do cliente.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Validação de montagem HTML/CSS<br />
Validação pós back-end<br />
Validação de usabilidade básica no dispositivo/paltaforma final<br />
<br />
<br />
<br />
<br />
== Interface gamificada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uso de elementos visuais atrativos que auxiliam na exposição dos dados de desempenho do usuário/jogador. Adiciona uma experiência lúdica, mais próxima de um jogo que de um sistema.<br />
<br />
'''Importância'''<br />
<br />
Tem o objetivo de tornar a experiência de uso de um determinado produto diferenciado e instigante.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Estudo de similares<br />
Pesquisa de interesses do público alvo<br />
Planejamento da gamificação<br />
Planejamento e mapeamento do impacto no layout</div>Danilo.pontechellehttp://wiki.mstech.com.br/index.php?title=Designers_da_Informa%C3%A7%C3%A3o&diff=796Designers da Informação2016-06-23T19:24:58Z<p>Danilo.pontechelle: /* Iconografia */</p>
<hr />
<div><br />
A equipe de Design da Informação tem como principais responsabilidades arquitetar e realizar fluxos de informação na concepção de produtos, construção de interfaces gráficas e identidades visuais, bem como elaborar soluções criativas no que compete a usabilidade, navegabilidade e facilidade de interação, definir padrões reaproveitáveis e executar procedimentos práticos, assim como a codificação Front End (HTML/CSS), a fim de garantir a melhor experiência entre o produto concebido e o usuário final.<br />
<br />
'''A equipe'''<br />
<br />
Contamos com quatro designers altamente capacitados e versados nas mais diferentes aptidões que são necessárias para desempenhar o papel de Designer da Informação:<br />
<ul><br />
<li>Danilo Martinelli Pontechelle;</li><br />
<li>Lucas Toledo Teixeira Evangelista;</li><br />
<li>Miriam Midori Haga;</li><br />
<li>Samuel de Aguiar Sabino.</li><br />
</ul><br />
<br />
== Planejamento geral ==<br />
<br />
<p><strong>O que é?</strong></p><br />
<p class="ng-binding">Análise de todos os requisitos relacionados ao projeto, tipos de plataforma envolvidas, objetivo do cliente, análise do público alvo, a fim de elaborar o planejamento da produção e também a concepção do produto.</p><br />
<p><strong>Importância</strong></p><br />
<p class="ng-binding">Fase crucial para entendimento do que precisa ser produzido e como será produzido assim como suas características.</p><br />
<p><strong>Atividades relacionadas</strong></p><br />
<ul class="lista-padrao"><br />
<!-- ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise de requisitos</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do objetivo do cliente</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do público alvo</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Concepção do produto</li><!-- end ngRepeat: relacionado in competencia.relacionados --><br />
</ul><br />
<br />
== Identidade Visual ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representa um produto/serviço por meio de símbolos, logotipos, fontes, áudios, animações, elementos gráficos e outros.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia um produto/serviço e é responsável pela comunicação de seus valores ao usuário/consumidor.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Estudos (análise de similares, brainstorm, rascunhos de solução)</li><br />
<li>Moodboard (prancha com paleta de cores e imagens de referência)</li><br />
<li>Elementos gráficos (patterns, ícones, grafismos etc.)</li><br />
<li>Layout (impresso, web, animação etc.)</li><br />
<li>Guidelines</li><br />
</ul><br />
<br />
== Logo do produto ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representação visual de um conceito, cuja forma, cores e fonte dão identidade a um produto.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia o produto em relação aos concorrentes. Também simboliza a sua filosofia e forma de atuação no mercado.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Pesquisa de referências de similares no mercado</li><br />
<li>Definição do conceito principal e criação de um símbolo que traduza essa ideia</li><br />
<li>Avaliação da consistência da identidade em diversos tamanhos e dispositivos/plataformas</li><br />
</ul><br />
<br />
== Iconografia ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
É o conjunto de ícones padrão de uma interface, signos visuais que representam outro objeto por força de semelhança. Ícones são signos substitutivos (podem ser usados no lugar da coisa representada) e fundamentais na interação dos usuários com os computadores, pois indicam as zonas de acionamento de comandos ou reforçam visualmente alguma ação que o sistema apresenta.<br />
<br />
'''Importância'''<br />
<br />
Uma iconografia bem projetada é essencial para qualquer interface. Suas vantagens são impressionantes, pois dispensam leitura, logo podem ser identificadas por analfabetos, estrangeiros, etc. São compreendidos rapidamente diminuindo o tempo de interação, são mais facilmente memorizados e otimizam o espaço nas telas.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Ícones da interface (menus, funcionalidades, alertas, botões...)</li><br />
<li>Ícones do produto (aplicativo, favicon, etc.)</li><br />
</ul><br />
<br />
== Acessibilidade ==<br />
<br />
'''O que é?'''<br />
<br />
Acessibilidade é definida como a possibilidade de qualquer pessoa, independentemente de suas capacidades físicomotoras, perceptivas, culturais e sociais, usufruir os benefícios de uma vida em sociedade, tendo a possibilidade de participar de qualquer atividade, até as que incluem o uso de produtos, serviços e informações, com o mínimo de restrição possível.<br />
<br />
'''Importância'''<br />
<br />
Está ligado intimamente com a experiência do usuário e com toda a produção tanto de código quanto visual. É mais fácil e eficiente planejá-la desde o início para evitar retrabalho.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Seguir os padrões de desenvolvimento Web da W3C (cor, contraste, tamanhos etc.)<br />
Seguir diretrizes e recomendações de acessibilidade do WAI, WCAG e WAI-ARIA (navegabilidade, HTML, etc.)<br />
Realizar avaliação de acessibilidade<br />
<br />
<br />
<br />
== Fluxo de navegação ==<br />
<br />
'''O que é?'''<br />
<br />
Uma representação visual do fluxo do usuário para completar tarefas dentro de um sistema. Exemplo: Em um site, o usuário começa pela na página inicial, segue para a página de um produto, depois vai até o carrinho de compras – e assim por diante. É a perspectiva do usuário sobre a organização do site, que ajuda a identificar quais passos precisam ser melhorados ou redesenhados.<br />
'''<br />
Importância'''<br />
<br />
Define a navegação bem como a utilização de botões/menus/listas e outros componentes de interação.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Simplificar processos<br />
Redefinir fluxos de interação<br />
<br />
<br />
<br />
<br />
== Mapa do site ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Consiste em um diagrama das páginas/seções de um site/app/sistema/etc organizadas hierarquicamente.<br />
<br />
'''Importância'''<br />
<br />
Ajuda a visualizar e compreender a estrutura básica e a navegação entre as diferentes partes do sistema. A partir dele podemos definir a navegação macro e ideal do usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Listagem de seções<br />
Montagem de mapa do site<br />
<br />
<br />
<br />
<br />
<br />
<br />
== Sketch ==<br />
<br />
'''O que é?'''<br />
<br />
Uma forma rápida de rabiscar uma nova interface usando papel e caneta sem compromisso com a fidelidade de formas, cores e detalhes dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Podem ser muito úteis para validar rapidamente conceitos de produtos e ideias de design com os outros membros da equipe e com usuários.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Sketch manual<br />
Sketch digital<br />
<br />
<br />
<br />
<br />
== Wireframe ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um guia visual que representa a estrutura da página, bem como sua hierarquia e os principais elementos que a compõem com maior fidelidade de proporções e posicionamento mais definidos dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Útil para discutir ideias com o time e com os clientes, e também para guiar o trabalho dos Diretores de Arte e Desenvolvedores.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Planejamento<br />
Criação de wireframe<br />
Validação<br />
<br />
<br />
<br />
<br />
<br />
<br />
== Mockup ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma representação estática de média a alta fidelidade de um site/app/sistema/etc. Muitas vezes um mockup é um rascunho bem próximo do design final do produto, ou até o próprio produto final.<br />
<br />
'''Importância'''<br />
<br />
Úteis para vender a ideia do produto antes de ele estar pronto. Não possuem a resistência dos entregáveis de baixa fidelidade em apresentações e são ótimos coletores de feedback.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Planejamento<br />
Desenvolvimento<br />
Avaliação da consistência da Identidade Visual em determinados dispositivos/plataformas<br />
Validação<br />
<br />
<br />
<br />
<br />
== Prototipagem ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um protótipo é uma simulação da navegação e de algumas funcionalidades de um site/app/sistema, composto normalmente por sketch/wireframes/mockup clicáveis.<br />
<br />
'''Importância'''<br />
<br />
É uma forma rápida de validar e testar um produto antes de desenvolvê-lo do começo ao fim.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Protótipo sketch<br />
Protótipo wireframe<br />
Protótipo mockup<br />
<br />
<br />
<br />
<br />
<br />
== Telas de ajuda e tutorial ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Montagem de imagens ou animações que mostram um passo a passo para guiar a utilização de um produto.<br />
<br />
'''Importância'''<br />
<br />
Identifica as ferramentas e funcionamento de um produto facilitando seu reconhecimento pelo usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Criação de pranchas que demonstrem o fluxo de navegação pelas telas do produto<br />
Simulações animadas interativas com instruções que guiam o usuário<br />
Telas de ajuda dentro do próprio produto com textos e indicações de como utilizá-lo<br />
<br />
<br />
<br />
<br />
<br />
<br />
== Pranchas de apresentação ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Documento para visualização e entendimento das telas e conceitos aplicados em um projeto ou produto.<br />
<br />
'''Importância'''<br />
<br />
Podem ser utilizadas em apresentações para auxiliar o cliente a visualizar o que foi planejado, por que foi planejado e sua importância para o produto.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Proposta de sketch<br />
Proposta de wireframe<br />
Proposta de mapa de site<br />
Proposta de fluxograma de navegação<br />
Proposta de identidade visual (logotipo, ícones, elementos gráficos etc.)<br />
Proposta de iconografia<br />
<br />
<br />
<br />
<br />
<br />
== Testes de usabilidade ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Entrevista com o consumidor, onde pede-se que ele execute uma série de tarefas em um protótipo ou mesmo no produto final. À medida em que o consumidor interage com o produto, o pesquisador faz anotações sobre seu comportamento, dificuldades e suas opiniões.<br />
<br />
'''Importância'''<br />
<br />
Essencial para atualizações do produto. Ajuda a validar fluxos, layouts e funcionalidades aumentando a qualidade, o desempenho e a empatia pelo produto final.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Análise de resultado dos testes aplicado ao usuário<br />
Planejamento de ações<br />
Produção<br />
<br />
<br />
<br />
== HTML/CSS (front-end design) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Codificação em HTML/CSS/JQUERY do mockup do layout final.<br />
<br />
'''Importância'''<br />
<br />
Traduz o que foi planejado no mockup com fidelidade e estrutura para a equipe desenvolvimento implementar as interações e funcionalidades.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Guia de montagemHTML/CSS (proporções, distâncias, tamanho de fonte, etc)<br />
Montagem HTML/CSS (estruturação, customização de componentes padrão, etc)<br />
<br />
<br />
== Folha de estilos (biblioteca de padrões) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma lista prática com exemplos (e às vezes códigos) dos padrões visuais que serão utilizados em todo o site. É fundamental para a padronização dos elementos da interface, facilitando a produção e reprodução das demais telas.<br />
<br />
'''Importância'''<br />
<br />
Não só ajuda a manter o design consistente em diferentes telas, mas também facilita a vida dos desenvolvedores na hora de implementar os elementos.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Componentes de interação (botões, listas suspensas, setas de navegação, etc.)<br />
Componentes de formatação (fonte, cores, tamanhos, espaçamentos, etc.)<br />
Componentes de marcação (HTML e CSS)<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
== Interface animada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Animações pontuais que têm a intenção de tornar a experiência do usuário mais amigável e familiar aos seus referenciais de interação analógica/digital. Podem ser aplicadas em ícones, transições, menus, janelas, botões, etc.<br />
<br />
'''Importância'''<br />
<br />
Animações de interface ajudam a envolver o usuário e encorajam uma exploração mais profunda de um app ou site. Auxilia na contextualização de uma sequência de ações. Instiga o usuário a questionar “O que vai acontecer se eu tocar isso?”, ”E depois disso?”.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Planejamento de animação<br />
Guia de animação (documento com especificações de execução)<br />
Criação de animação codificada<br />
<br />
<br />
<br />
<br />
== Validação técnica (designer) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Revisão e validação do produto funcional em relação ao que foi planejado.<br />
<br />
'''Importância'''<br />
<br />
Garantir que todo o planejamento, em todas as áreas competentes a equipe, tenha sido executado para que o produto chegue com a máxima qualidade para a análise do cliente.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Validação de montagem HTML/CSS<br />
Validação pós back-end<br />
Validação de usabilidade básica no dispositivo/paltaforma final<br />
<br />
<br />
<br />
<br />
== Interface gamificada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uso de elementos visuais atrativos que auxiliam na exposição dos dados de desempenho do usuário/jogador. Adiciona uma experiência lúdica, mais próxima de um jogo que de um sistema.<br />
<br />
'''Importância'''<br />
<br />
Tem o objetivo de tornar a experiência de uso de um determinado produto diferenciado e instigante.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Estudo de similares<br />
Pesquisa de interesses do público alvo<br />
Planejamento da gamificação<br />
Planejamento e mapeamento do impacto no layout</div>Danilo.pontechellehttp://wiki.mstech.com.br/index.php?title=Designers_da_Informa%C3%A7%C3%A3o&diff=795Designers da Informação2016-06-23T19:24:37Z<p>Danilo.pontechelle: /* Planejamento geral */</p>
<hr />
<div><br />
A equipe de Design da Informação tem como principais responsabilidades arquitetar e realizar fluxos de informação na concepção de produtos, construção de interfaces gráficas e identidades visuais, bem como elaborar soluções criativas no que compete a usabilidade, navegabilidade e facilidade de interação, definir padrões reaproveitáveis e executar procedimentos práticos, assim como a codificação Front End (HTML/CSS), a fim de garantir a melhor experiência entre o produto concebido e o usuário final.<br />
<br />
'''A equipe'''<br />
<br />
Contamos com quatro designers altamente capacitados e versados nas mais diferentes aptidões que são necessárias para desempenhar o papel de Designer da Informação:<br />
<ul><br />
<li>Danilo Martinelli Pontechelle;</li><br />
<li>Lucas Toledo Teixeira Evangelista;</li><br />
<li>Miriam Midori Haga;</li><br />
<li>Samuel de Aguiar Sabino.</li><br />
</ul><br />
<br />
== Planejamento geral ==<br />
<br />
<p><strong>O que é?</strong></p><br />
<p class="ng-binding">Análise de todos os requisitos relacionados ao projeto, tipos de plataforma envolvidas, objetivo do cliente, análise do público alvo, a fim de elaborar o planejamento da produção e também a concepção do produto.</p><br />
<p><strong>Importância</strong></p><br />
<p class="ng-binding">Fase crucial para entendimento do que precisa ser produzido e como será produzido assim como suas características.</p><br />
<p><strong>Atividades relacionadas</strong></p><br />
<ul class="lista-padrao"><br />
<!-- ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise de requisitos</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do objetivo do cliente</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do público alvo</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Concepção do produto</li><!-- end ngRepeat: relacionado in competencia.relacionados --><br />
</ul><br />
<br />
== Identidade Visual ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representa um produto/serviço por meio de símbolos, logotipos, fontes, áudios, animações, elementos gráficos e outros.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia um produto/serviço e é responsável pela comunicação de seus valores ao usuário/consumidor.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Estudos (análise de similares, brainstorm, rascunhos de solução)</li><br />
<li>Moodboard (prancha com paleta de cores e imagens de referência)</li><br />
<li>Elementos gráficos (patterns, ícones, grafismos etc.)</li><br />
<li>Layout (impresso, web, animação etc.)</li><br />
<li>Guidelines</li><br />
</ul><br />
<br />
== Logo do produto ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representação visual de um conceito, cuja forma, cores e fonte dão identidade a um produto.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia o produto em relação aos concorrentes. Também simboliza a sua filosofia e forma de atuação no mercado.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Pesquisa de referências de similares no mercado</li><br />
<li>Definição do conceito principal e criação de um símbolo que traduza essa ideia</li><br />
<li>Avaliação da consistência da identidade em diversos tamanhos e dispositivos/plataformas</li><br />
</ul><br />
<br />
== Iconografia ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
É o conjunto de ícones padrão de uma interface, signos visuais que representam outro objeto por força de semelhança. Ícones são signos substitutivos (podem ser usados no lugar da coisa representada) e fundamentais na interação dos usuários com os computadores, pois indicam as zonas de acionamento de comandos ou reforçam visualmente alguma ação que o sistema apresenta.<br />
<br />
'''Importância'''<br />
<br />
Uma iconografia bem projetada é essencial para qualquer interface. Suas vantagens são impressionantes, pois dispensam leitura, logo podem ser identificadas por analfabetos, estrangeiros, etc. São compreendidos rapidamente diminuindo o tempo de interação, são mais facilmente memorizados e otimizam o espaço nas telas.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Ícones da interface (menus, funcionalidades, alertas, botões...)<br />
Ícones do produto (aplicativo, favicon, etc.)<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
== Acessibilidade ==<br />
<br />
'''O que é?'''<br />
<br />
Acessibilidade é definida como a possibilidade de qualquer pessoa, independentemente de suas capacidades físicomotoras, perceptivas, culturais e sociais, usufruir os benefícios de uma vida em sociedade, tendo a possibilidade de participar de qualquer atividade, até as que incluem o uso de produtos, serviços e informações, com o mínimo de restrição possível.<br />
<br />
'''Importância'''<br />
<br />
Está ligado intimamente com a experiência do usuário e com toda a produção tanto de código quanto visual. É mais fácil e eficiente planejá-la desde o início para evitar retrabalho.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Seguir os padrões de desenvolvimento Web da W3C (cor, contraste, tamanhos etc.)<br />
Seguir diretrizes e recomendações de acessibilidade do WAI, WCAG e WAI-ARIA (navegabilidade, HTML, etc.)<br />
Realizar avaliação de acessibilidade<br />
<br />
<br />
<br />
== Fluxo de navegação ==<br />
<br />
'''O que é?'''<br />
<br />
Uma representação visual do fluxo do usuário para completar tarefas dentro de um sistema. Exemplo: Em um site, o usuário começa pela na página inicial, segue para a página de um produto, depois vai até o carrinho de compras – e assim por diante. É a perspectiva do usuário sobre a organização do site, que ajuda a identificar quais passos precisam ser melhorados ou redesenhados.<br />
'''<br />
Importância'''<br />
<br />
Define a navegação bem como a utilização de botões/menus/listas e outros componentes de interação.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Simplificar processos<br />
Redefinir fluxos de interação<br />
<br />
<br />
<br />
<br />
== Mapa do site ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Consiste em um diagrama das páginas/seções de um site/app/sistema/etc organizadas hierarquicamente.<br />
<br />
'''Importância'''<br />
<br />
Ajuda a visualizar e compreender a estrutura básica e a navegação entre as diferentes partes do sistema. A partir dele podemos definir a navegação macro e ideal do usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Listagem de seções<br />
Montagem de mapa do site<br />
<br />
<br />
<br />
<br />
<br />
<br />
== Sketch ==<br />
<br />
'''O que é?'''<br />
<br />
Uma forma rápida de rabiscar uma nova interface usando papel e caneta sem compromisso com a fidelidade de formas, cores e detalhes dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Podem ser muito úteis para validar rapidamente conceitos de produtos e ideias de design com os outros membros da equipe e com usuários.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Sketch manual<br />
Sketch digital<br />
<br />
<br />
<br />
<br />
== Wireframe ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um guia visual que representa a estrutura da página, bem como sua hierarquia e os principais elementos que a compõem com maior fidelidade de proporções e posicionamento mais definidos dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Útil para discutir ideias com o time e com os clientes, e também para guiar o trabalho dos Diretores de Arte e Desenvolvedores.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Planejamento<br />
Criação de wireframe<br />
Validação<br />
<br />
<br />
<br />
<br />
<br />
<br />
== Mockup ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma representação estática de média a alta fidelidade de um site/app/sistema/etc. Muitas vezes um mockup é um rascunho bem próximo do design final do produto, ou até o próprio produto final.<br />
<br />
'''Importância'''<br />
<br />
Úteis para vender a ideia do produto antes de ele estar pronto. Não possuem a resistência dos entregáveis de baixa fidelidade em apresentações e são ótimos coletores de feedback.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Planejamento<br />
Desenvolvimento<br />
Avaliação da consistência da Identidade Visual em determinados dispositivos/plataformas<br />
Validação<br />
<br />
<br />
<br />
<br />
== Prototipagem ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um protótipo é uma simulação da navegação e de algumas funcionalidades de um site/app/sistema, composto normalmente por sketch/wireframes/mockup clicáveis.<br />
<br />
'''Importância'''<br />
<br />
É uma forma rápida de validar e testar um produto antes de desenvolvê-lo do começo ao fim.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Protótipo sketch<br />
Protótipo wireframe<br />
Protótipo mockup<br />
<br />
<br />
<br />
<br />
<br />
== Telas de ajuda e tutorial ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Montagem de imagens ou animações que mostram um passo a passo para guiar a utilização de um produto.<br />
<br />
'''Importância'''<br />
<br />
Identifica as ferramentas e funcionamento de um produto facilitando seu reconhecimento pelo usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Criação de pranchas que demonstrem o fluxo de navegação pelas telas do produto<br />
Simulações animadas interativas com instruções que guiam o usuário<br />
Telas de ajuda dentro do próprio produto com textos e indicações de como utilizá-lo<br />
<br />
<br />
<br />
<br />
<br />
<br />
== Pranchas de apresentação ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Documento para visualização e entendimento das telas e conceitos aplicados em um projeto ou produto.<br />
<br />
'''Importância'''<br />
<br />
Podem ser utilizadas em apresentações para auxiliar o cliente a visualizar o que foi planejado, por que foi planejado e sua importância para o produto.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Proposta de sketch<br />
Proposta de wireframe<br />
Proposta de mapa de site<br />
Proposta de fluxograma de navegação<br />
Proposta de identidade visual (logotipo, ícones, elementos gráficos etc.)<br />
Proposta de iconografia<br />
<br />
<br />
<br />
<br />
<br />
== Testes de usabilidade ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Entrevista com o consumidor, onde pede-se que ele execute uma série de tarefas em um protótipo ou mesmo no produto final. À medida em que o consumidor interage com o produto, o pesquisador faz anotações sobre seu comportamento, dificuldades e suas opiniões.<br />
<br />
'''Importância'''<br />
<br />
Essencial para atualizações do produto. Ajuda a validar fluxos, layouts e funcionalidades aumentando a qualidade, o desempenho e a empatia pelo produto final.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Análise de resultado dos testes aplicado ao usuário<br />
Planejamento de ações<br />
Produção<br />
<br />
<br />
<br />
== HTML/CSS (front-end design) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Codificação em HTML/CSS/JQUERY do mockup do layout final.<br />
<br />
'''Importância'''<br />
<br />
Traduz o que foi planejado no mockup com fidelidade e estrutura para a equipe desenvolvimento implementar as interações e funcionalidades.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Guia de montagemHTML/CSS (proporções, distâncias, tamanho de fonte, etc)<br />
Montagem HTML/CSS (estruturação, customização de componentes padrão, etc)<br />
<br />
<br />
== Folha de estilos (biblioteca de padrões) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma lista prática com exemplos (e às vezes códigos) dos padrões visuais que serão utilizados em todo o site. É fundamental para a padronização dos elementos da interface, facilitando a produção e reprodução das demais telas.<br />
<br />
'''Importância'''<br />
<br />
Não só ajuda a manter o design consistente em diferentes telas, mas também facilita a vida dos desenvolvedores na hora de implementar os elementos.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Componentes de interação (botões, listas suspensas, setas de navegação, etc.)<br />
Componentes de formatação (fonte, cores, tamanhos, espaçamentos, etc.)<br />
Componentes de marcação (HTML e CSS)<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
== Interface animada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Animações pontuais que têm a intenção de tornar a experiência do usuário mais amigável e familiar aos seus referenciais de interação analógica/digital. Podem ser aplicadas em ícones, transições, menus, janelas, botões, etc.<br />
<br />
'''Importância'''<br />
<br />
Animações de interface ajudam a envolver o usuário e encorajam uma exploração mais profunda de um app ou site. Auxilia na contextualização de uma sequência de ações. Instiga o usuário a questionar “O que vai acontecer se eu tocar isso?”, ”E depois disso?”.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Planejamento de animação<br />
Guia de animação (documento com especificações de execução)<br />
Criação de animação codificada<br />
<br />
<br />
<br />
<br />
== Validação técnica (designer) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Revisão e validação do produto funcional em relação ao que foi planejado.<br />
<br />
'''Importância'''<br />
<br />
Garantir que todo o planejamento, em todas as áreas competentes a equipe, tenha sido executado para que o produto chegue com a máxima qualidade para a análise do cliente.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Validação de montagem HTML/CSS<br />
Validação pós back-end<br />
Validação de usabilidade básica no dispositivo/paltaforma final<br />
<br />
<br />
<br />
<br />
== Interface gamificada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uso de elementos visuais atrativos que auxiliam na exposição dos dados de desempenho do usuário/jogador. Adiciona uma experiência lúdica, mais próxima de um jogo que de um sistema.<br />
<br />
'''Importância'''<br />
<br />
Tem o objetivo de tornar a experiência de uso de um determinado produto diferenciado e instigante.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Estudo de similares<br />
Pesquisa de interesses do público alvo<br />
Planejamento da gamificação<br />
Planejamento e mapeamento do impacto no layout</div>Danilo.pontechellehttp://wiki.mstech.com.br/index.php?title=Designers_da_Informa%C3%A7%C3%A3o&diff=794Designers da Informação2016-06-23T19:24:24Z<p>Danilo.pontechelle: /* Logo do produto */</p>
<hr />
<div><br />
A equipe de Design da Informação tem como principais responsabilidades arquitetar e realizar fluxos de informação na concepção de produtos, construção de interfaces gráficas e identidades visuais, bem como elaborar soluções criativas no que compete a usabilidade, navegabilidade e facilidade de interação, definir padrões reaproveitáveis e executar procedimentos práticos, assim como a codificação Front End (HTML/CSS), a fim de garantir a melhor experiência entre o produto concebido e o usuário final.<br />
<br />
'''A equipe'''<br />
<br />
Contamos com quatro designers altamente capacitados e versados nas mais diferentes aptidões que são necessárias para desempenhar o papel de Designer da Informação:<br />
<ul><br />
<li>Danilo Martinelli Pontechelle;</li><br />
<li>Lucas Toledo Teixeira Evangelista;</li><br />
<li>Miriam Midori Haga;</li><br />
<li>Samuel de Aguiar Sabino.</li><br />
</ul><br />
<br />
== Planejamento geral ==<br />
<br />
<p><strong>O que é?</strong></p><br />
<p class="ng-binding">Análise de todos os requisitos relacionados ao projeto, tipos de plataforma envolvidas, objetivo do cliente, análise do público alvo, a fim de elaborar o planejamento da produção e também a concepção do produto.</p><br />
<p><strong>Importância</strong></p><br />
<p class="ng-binding">Fase crucial para entendimento do que precisa ser produzido e como será produzido assim como suas características.</p><br />
<p><strong>Atividades relacionadas</strong></p><br />
<ul class="lista-padrao"><br />
<!-- ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise de requisitos</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do objetivo do cliente</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do público alvo</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Concepção do produto</li><!-- end ngRepeat: relacionado in competencia.relacionados --><br />
</ul><br />
<br />
<br />
== Identidade Visual ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representa um produto/serviço por meio de símbolos, logotipos, fontes, áudios, animações, elementos gráficos e outros.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia um produto/serviço e é responsável pela comunicação de seus valores ao usuário/consumidor.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Estudos (análise de similares, brainstorm, rascunhos de solução)</li><br />
<li>Moodboard (prancha com paleta de cores e imagens de referência)</li><br />
<li>Elementos gráficos (patterns, ícones, grafismos etc.)</li><br />
<li>Layout (impresso, web, animação etc.)</li><br />
<li>Guidelines</li><br />
</ul><br />
<br />
== Logo do produto ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representação visual de um conceito, cuja forma, cores e fonte dão identidade a um produto.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia o produto em relação aos concorrentes. Também simboliza a sua filosofia e forma de atuação no mercado.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Pesquisa de referências de similares no mercado</li><br />
<li>Definição do conceito principal e criação de um símbolo que traduza essa ideia</li><br />
<li>Avaliação da consistência da identidade em diversos tamanhos e dispositivos/plataformas</li><br />
</ul><br />
<br />
== Iconografia ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
É o conjunto de ícones padrão de uma interface, signos visuais que representam outro objeto por força de semelhança. Ícones são signos substitutivos (podem ser usados no lugar da coisa representada) e fundamentais na interação dos usuários com os computadores, pois indicam as zonas de acionamento de comandos ou reforçam visualmente alguma ação que o sistema apresenta.<br />
<br />
'''Importância'''<br />
<br />
Uma iconografia bem projetada é essencial para qualquer interface. Suas vantagens são impressionantes, pois dispensam leitura, logo podem ser identificadas por analfabetos, estrangeiros, etc. São compreendidos rapidamente diminuindo o tempo de interação, são mais facilmente memorizados e otimizam o espaço nas telas.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Ícones da interface (menus, funcionalidades, alertas, botões...)<br />
Ícones do produto (aplicativo, favicon, etc.)<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
== Acessibilidade ==<br />
<br />
'''O que é?'''<br />
<br />
Acessibilidade é definida como a possibilidade de qualquer pessoa, independentemente de suas capacidades físicomotoras, perceptivas, culturais e sociais, usufruir os benefícios de uma vida em sociedade, tendo a possibilidade de participar de qualquer atividade, até as que incluem o uso de produtos, serviços e informações, com o mínimo de restrição possível.<br />
<br />
'''Importância'''<br />
<br />
Está ligado intimamente com a experiência do usuário e com toda a produção tanto de código quanto visual. É mais fácil e eficiente planejá-la desde o início para evitar retrabalho.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Seguir os padrões de desenvolvimento Web da W3C (cor, contraste, tamanhos etc.)<br />
Seguir diretrizes e recomendações de acessibilidade do WAI, WCAG e WAI-ARIA (navegabilidade, HTML, etc.)<br />
Realizar avaliação de acessibilidade<br />
<br />
<br />
<br />
== Fluxo de navegação ==<br />
<br />
'''O que é?'''<br />
<br />
Uma representação visual do fluxo do usuário para completar tarefas dentro de um sistema. Exemplo: Em um site, o usuário começa pela na página inicial, segue para a página de um produto, depois vai até o carrinho de compras – e assim por diante. É a perspectiva do usuário sobre a organização do site, que ajuda a identificar quais passos precisam ser melhorados ou redesenhados.<br />
'''<br />
Importância'''<br />
<br />
Define a navegação bem como a utilização de botões/menus/listas e outros componentes de interação.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Simplificar processos<br />
Redefinir fluxos de interação<br />
<br />
<br />
<br />
<br />
== Mapa do site ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Consiste em um diagrama das páginas/seções de um site/app/sistema/etc organizadas hierarquicamente.<br />
<br />
'''Importância'''<br />
<br />
Ajuda a visualizar e compreender a estrutura básica e a navegação entre as diferentes partes do sistema. A partir dele podemos definir a navegação macro e ideal do usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Listagem de seções<br />
Montagem de mapa do site<br />
<br />
<br />
<br />
<br />
<br />
<br />
== Sketch ==<br />
<br />
'''O que é?'''<br />
<br />
Uma forma rápida de rabiscar uma nova interface usando papel e caneta sem compromisso com a fidelidade de formas, cores e detalhes dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Podem ser muito úteis para validar rapidamente conceitos de produtos e ideias de design com os outros membros da equipe e com usuários.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Sketch manual<br />
Sketch digital<br />
<br />
<br />
<br />
<br />
== Wireframe ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um guia visual que representa a estrutura da página, bem como sua hierarquia e os principais elementos que a compõem com maior fidelidade de proporções e posicionamento mais definidos dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Útil para discutir ideias com o time e com os clientes, e também para guiar o trabalho dos Diretores de Arte e Desenvolvedores.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Planejamento<br />
Criação de wireframe<br />
Validação<br />
<br />
<br />
<br />
<br />
<br />
<br />
== Mockup ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma representação estática de média a alta fidelidade de um site/app/sistema/etc. Muitas vezes um mockup é um rascunho bem próximo do design final do produto, ou até o próprio produto final.<br />
<br />
'''Importância'''<br />
<br />
Úteis para vender a ideia do produto antes de ele estar pronto. Não possuem a resistência dos entregáveis de baixa fidelidade em apresentações e são ótimos coletores de feedback.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Planejamento<br />
Desenvolvimento<br />
Avaliação da consistência da Identidade Visual em determinados dispositivos/plataformas<br />
Validação<br />
<br />
<br />
<br />
<br />
== Prototipagem ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um protótipo é uma simulação da navegação e de algumas funcionalidades de um site/app/sistema, composto normalmente por sketch/wireframes/mockup clicáveis.<br />
<br />
'''Importância'''<br />
<br />
É uma forma rápida de validar e testar um produto antes de desenvolvê-lo do começo ao fim.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Protótipo sketch<br />
Protótipo wireframe<br />
Protótipo mockup<br />
<br />
<br />
<br />
<br />
<br />
== Telas de ajuda e tutorial ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Montagem de imagens ou animações que mostram um passo a passo para guiar a utilização de um produto.<br />
<br />
'''Importância'''<br />
<br />
Identifica as ferramentas e funcionamento de um produto facilitando seu reconhecimento pelo usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Criação de pranchas que demonstrem o fluxo de navegação pelas telas do produto<br />
Simulações animadas interativas com instruções que guiam o usuário<br />
Telas de ajuda dentro do próprio produto com textos e indicações de como utilizá-lo<br />
<br />
<br />
<br />
<br />
<br />
<br />
== Pranchas de apresentação ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Documento para visualização e entendimento das telas e conceitos aplicados em um projeto ou produto.<br />
<br />
'''Importância'''<br />
<br />
Podem ser utilizadas em apresentações para auxiliar o cliente a visualizar o que foi planejado, por que foi planejado e sua importância para o produto.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Proposta de sketch<br />
Proposta de wireframe<br />
Proposta de mapa de site<br />
Proposta de fluxograma de navegação<br />
Proposta de identidade visual (logotipo, ícones, elementos gráficos etc.)<br />
Proposta de iconografia<br />
<br />
<br />
<br />
<br />
<br />
== Testes de usabilidade ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Entrevista com o consumidor, onde pede-se que ele execute uma série de tarefas em um protótipo ou mesmo no produto final. À medida em que o consumidor interage com o produto, o pesquisador faz anotações sobre seu comportamento, dificuldades e suas opiniões.<br />
<br />
'''Importância'''<br />
<br />
Essencial para atualizações do produto. Ajuda a validar fluxos, layouts e funcionalidades aumentando a qualidade, o desempenho e a empatia pelo produto final.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Análise de resultado dos testes aplicado ao usuário<br />
Planejamento de ações<br />
Produção<br />
<br />
<br />
<br />
== HTML/CSS (front-end design) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Codificação em HTML/CSS/JQUERY do mockup do layout final.<br />
<br />
'''Importância'''<br />
<br />
Traduz o que foi planejado no mockup com fidelidade e estrutura para a equipe desenvolvimento implementar as interações e funcionalidades.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Guia de montagemHTML/CSS (proporções, distâncias, tamanho de fonte, etc)<br />
Montagem HTML/CSS (estruturação, customização de componentes padrão, etc)<br />
<br />
<br />
== Folha de estilos (biblioteca de padrões) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma lista prática com exemplos (e às vezes códigos) dos padrões visuais que serão utilizados em todo o site. É fundamental para a padronização dos elementos da interface, facilitando a produção e reprodução das demais telas.<br />
<br />
'''Importância'''<br />
<br />
Não só ajuda a manter o design consistente em diferentes telas, mas também facilita a vida dos desenvolvedores na hora de implementar os elementos.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Componentes de interação (botões, listas suspensas, setas de navegação, etc.)<br />
Componentes de formatação (fonte, cores, tamanhos, espaçamentos, etc.)<br />
Componentes de marcação (HTML e CSS)<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
== Interface animada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Animações pontuais que têm a intenção de tornar a experiência do usuário mais amigável e familiar aos seus referenciais de interação analógica/digital. Podem ser aplicadas em ícones, transições, menus, janelas, botões, etc.<br />
<br />
'''Importância'''<br />
<br />
Animações de interface ajudam a envolver o usuário e encorajam uma exploração mais profunda de um app ou site. Auxilia na contextualização de uma sequência de ações. Instiga o usuário a questionar “O que vai acontecer se eu tocar isso?”, ”E depois disso?”.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Planejamento de animação<br />
Guia de animação (documento com especificações de execução)<br />
Criação de animação codificada<br />
<br />
<br />
<br />
<br />
== Validação técnica (designer) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Revisão e validação do produto funcional em relação ao que foi planejado.<br />
<br />
'''Importância'''<br />
<br />
Garantir que todo o planejamento, em todas as áreas competentes a equipe, tenha sido executado para que o produto chegue com a máxima qualidade para a análise do cliente.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Validação de montagem HTML/CSS<br />
Validação pós back-end<br />
Validação de usabilidade básica no dispositivo/paltaforma final<br />
<br />
<br />
<br />
<br />
== Interface gamificada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uso de elementos visuais atrativos que auxiliam na exposição dos dados de desempenho do usuário/jogador. Adiciona uma experiência lúdica, mais próxima de um jogo que de um sistema.<br />
<br />
'''Importância'''<br />
<br />
Tem o objetivo de tornar a experiência de uso de um determinado produto diferenciado e instigante.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Estudo de similares<br />
Pesquisa de interesses do público alvo<br />
Planejamento da gamificação<br />
Planejamento e mapeamento do impacto no layout</div>Danilo.pontechellehttp://wiki.mstech.com.br/index.php?title=Designers_da_Informa%C3%A7%C3%A3o&diff=793Designers da Informação2016-06-23T19:23:54Z<p>Danilo.pontechelle: /* Identidade Visual */</p>
<hr />
<div><br />
A equipe de Design da Informação tem como principais responsabilidades arquitetar e realizar fluxos de informação na concepção de produtos, construção de interfaces gráficas e identidades visuais, bem como elaborar soluções criativas no que compete a usabilidade, navegabilidade e facilidade de interação, definir padrões reaproveitáveis e executar procedimentos práticos, assim como a codificação Front End (HTML/CSS), a fim de garantir a melhor experiência entre o produto concebido e o usuário final.<br />
<br />
'''A equipe'''<br />
<br />
Contamos com quatro designers altamente capacitados e versados nas mais diferentes aptidões que são necessárias para desempenhar o papel de Designer da Informação:<br />
<ul><br />
<li>Danilo Martinelli Pontechelle;</li><br />
<li>Lucas Toledo Teixeira Evangelista;</li><br />
<li>Miriam Midori Haga;</li><br />
<li>Samuel de Aguiar Sabino.</li><br />
</ul><br />
<br />
== Planejamento geral ==<br />
<br />
<p><strong>O que é?</strong></p><br />
<p class="ng-binding">Análise de todos os requisitos relacionados ao projeto, tipos de plataforma envolvidas, objetivo do cliente, análise do público alvo, a fim de elaborar o planejamento da produção e também a concepção do produto.</p><br />
<p><strong>Importância</strong></p><br />
<p class="ng-binding">Fase crucial para entendimento do que precisa ser produzido e como será produzido assim como suas características.</p><br />
<p><strong>Atividades relacionadas</strong></p><br />
<ul class="lista-padrao"><br />
<!-- ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise de requisitos</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do objetivo do cliente</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do público alvo</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Concepção do produto</li><!-- end ngRepeat: relacionado in competencia.relacionados --><br />
</ul><br />
<br />
<br />
== Identidade Visual ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representa um produto/serviço por meio de símbolos, logotipos, fontes, áudios, animações, elementos gráficos e outros.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia um produto/serviço e é responsável pela comunicação de seus valores ao usuário/consumidor.<br />
<br />
'''Atividades relacionadas'''<br />
<ul><br />
<li>Estudos (análise de similares, brainstorm, rascunhos de solução)</li><br />
<li>Moodboard (prancha com paleta de cores e imagens de referência)</li><br />
<li>Elementos gráficos (patterns, ícones, grafismos etc.)</li><br />
<li>Layout (impresso, web, animação etc.)</li><br />
<li>Guidelines</li><br />
</ul><br />
<br />
== Logo do produto ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representação visual de um conceito, cuja forma, cores e fonte dão identidade a um produto.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia o produto em relação aos concorrentes. Também simboliza a sua filosofia e forma de atuação no mercado.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Pesquisa de referências de similares no mercado<br />
Definição do conceito principal e criação de um símbolo que traduza essa ideia<br />
Avaliação da consistência da identidade em diversos tamanhos e dispositivos/plataformas<br />
<br />
<br />
<br />
== Iconografia ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
É o conjunto de ícones padrão de uma interface, signos visuais que representam outro objeto por força de semelhança. Ícones são signos substitutivos (podem ser usados no lugar da coisa representada) e fundamentais na interação dos usuários com os computadores, pois indicam as zonas de acionamento de comandos ou reforçam visualmente alguma ação que o sistema apresenta.<br />
<br />
'''Importância'''<br />
<br />
Uma iconografia bem projetada é essencial para qualquer interface. Suas vantagens são impressionantes, pois dispensam leitura, logo podem ser identificadas por analfabetos, estrangeiros, etc. São compreendidos rapidamente diminuindo o tempo de interação, são mais facilmente memorizados e otimizam o espaço nas telas.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Ícones da interface (menus, funcionalidades, alertas, botões...)<br />
Ícones do produto (aplicativo, favicon, etc.)<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
== Acessibilidade ==<br />
<br />
'''O que é?'''<br />
<br />
Acessibilidade é definida como a possibilidade de qualquer pessoa, independentemente de suas capacidades físicomotoras, perceptivas, culturais e sociais, usufruir os benefícios de uma vida em sociedade, tendo a possibilidade de participar de qualquer atividade, até as que incluem o uso de produtos, serviços e informações, com o mínimo de restrição possível.<br />
<br />
'''Importância'''<br />
<br />
Está ligado intimamente com a experiência do usuário e com toda a produção tanto de código quanto visual. É mais fácil e eficiente planejá-la desde o início para evitar retrabalho.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Seguir os padrões de desenvolvimento Web da W3C (cor, contraste, tamanhos etc.)<br />
Seguir diretrizes e recomendações de acessibilidade do WAI, WCAG e WAI-ARIA (navegabilidade, HTML, etc.)<br />
Realizar avaliação de acessibilidade<br />
<br />
<br />
<br />
== Fluxo de navegação ==<br />
<br />
'''O que é?'''<br />
<br />
Uma representação visual do fluxo do usuário para completar tarefas dentro de um sistema. Exemplo: Em um site, o usuário começa pela na página inicial, segue para a página de um produto, depois vai até o carrinho de compras – e assim por diante. É a perspectiva do usuário sobre a organização do site, que ajuda a identificar quais passos precisam ser melhorados ou redesenhados.<br />
'''<br />
Importância'''<br />
<br />
Define a navegação bem como a utilização de botões/menus/listas e outros componentes de interação.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Simplificar processos<br />
Redefinir fluxos de interação<br />
<br />
<br />
<br />
<br />
== Mapa do site ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Consiste em um diagrama das páginas/seções de um site/app/sistema/etc organizadas hierarquicamente.<br />
<br />
'''Importância'''<br />
<br />
Ajuda a visualizar e compreender a estrutura básica e a navegação entre as diferentes partes do sistema. A partir dele podemos definir a navegação macro e ideal do usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Listagem de seções<br />
Montagem de mapa do site<br />
<br />
<br />
<br />
<br />
<br />
<br />
== Sketch ==<br />
<br />
'''O que é?'''<br />
<br />
Uma forma rápida de rabiscar uma nova interface usando papel e caneta sem compromisso com a fidelidade de formas, cores e detalhes dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Podem ser muito úteis para validar rapidamente conceitos de produtos e ideias de design com os outros membros da equipe e com usuários.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Sketch manual<br />
Sketch digital<br />
<br />
<br />
<br />
<br />
== Wireframe ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um guia visual que representa a estrutura da página, bem como sua hierarquia e os principais elementos que a compõem com maior fidelidade de proporções e posicionamento mais definidos dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Útil para discutir ideias com o time e com os clientes, e também para guiar o trabalho dos Diretores de Arte e Desenvolvedores.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Planejamento<br />
Criação de wireframe<br />
Validação<br />
<br />
<br />
<br />
<br />
<br />
<br />
== Mockup ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma representação estática de média a alta fidelidade de um site/app/sistema/etc. Muitas vezes um mockup é um rascunho bem próximo do design final do produto, ou até o próprio produto final.<br />
<br />
'''Importância'''<br />
<br />
Úteis para vender a ideia do produto antes de ele estar pronto. Não possuem a resistência dos entregáveis de baixa fidelidade em apresentações e são ótimos coletores de feedback.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Planejamento<br />
Desenvolvimento<br />
Avaliação da consistência da Identidade Visual em determinados dispositivos/plataformas<br />
Validação<br />
<br />
<br />
<br />
<br />
== Prototipagem ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um protótipo é uma simulação da navegação e de algumas funcionalidades de um site/app/sistema, composto normalmente por sketch/wireframes/mockup clicáveis.<br />
<br />
'''Importância'''<br />
<br />
É uma forma rápida de validar e testar um produto antes de desenvolvê-lo do começo ao fim.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Protótipo sketch<br />
Protótipo wireframe<br />
Protótipo mockup<br />
<br />
<br />
<br />
<br />
<br />
== Telas de ajuda e tutorial ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Montagem de imagens ou animações que mostram um passo a passo para guiar a utilização de um produto.<br />
<br />
'''Importância'''<br />
<br />
Identifica as ferramentas e funcionamento de um produto facilitando seu reconhecimento pelo usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Criação de pranchas que demonstrem o fluxo de navegação pelas telas do produto<br />
Simulações animadas interativas com instruções que guiam o usuário<br />
Telas de ajuda dentro do próprio produto com textos e indicações de como utilizá-lo<br />
<br />
<br />
<br />
<br />
<br />
<br />
== Pranchas de apresentação ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Documento para visualização e entendimento das telas e conceitos aplicados em um projeto ou produto.<br />
<br />
'''Importância'''<br />
<br />
Podem ser utilizadas em apresentações para auxiliar o cliente a visualizar o que foi planejado, por que foi planejado e sua importância para o produto.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Proposta de sketch<br />
Proposta de wireframe<br />
Proposta de mapa de site<br />
Proposta de fluxograma de navegação<br />
Proposta de identidade visual (logotipo, ícones, elementos gráficos etc.)<br />
Proposta de iconografia<br />
<br />
<br />
<br />
<br />
<br />
== Testes de usabilidade ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Entrevista com o consumidor, onde pede-se que ele execute uma série de tarefas em um protótipo ou mesmo no produto final. À medida em que o consumidor interage com o produto, o pesquisador faz anotações sobre seu comportamento, dificuldades e suas opiniões.<br />
<br />
'''Importância'''<br />
<br />
Essencial para atualizações do produto. Ajuda a validar fluxos, layouts e funcionalidades aumentando a qualidade, o desempenho e a empatia pelo produto final.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Análise de resultado dos testes aplicado ao usuário<br />
Planejamento de ações<br />
Produção<br />
<br />
<br />
<br />
== HTML/CSS (front-end design) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Codificação em HTML/CSS/JQUERY do mockup do layout final.<br />
<br />
'''Importância'''<br />
<br />
Traduz o que foi planejado no mockup com fidelidade e estrutura para a equipe desenvolvimento implementar as interações e funcionalidades.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Guia de montagemHTML/CSS (proporções, distâncias, tamanho de fonte, etc)<br />
Montagem HTML/CSS (estruturação, customização de componentes padrão, etc)<br />
<br />
<br />
== Folha de estilos (biblioteca de padrões) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma lista prática com exemplos (e às vezes códigos) dos padrões visuais que serão utilizados em todo o site. É fundamental para a padronização dos elementos da interface, facilitando a produção e reprodução das demais telas.<br />
<br />
'''Importância'''<br />
<br />
Não só ajuda a manter o design consistente em diferentes telas, mas também facilita a vida dos desenvolvedores na hora de implementar os elementos.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Componentes de interação (botões, listas suspensas, setas de navegação, etc.)<br />
Componentes de formatação (fonte, cores, tamanhos, espaçamentos, etc.)<br />
Componentes de marcação (HTML e CSS)<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
== Interface animada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Animações pontuais que têm a intenção de tornar a experiência do usuário mais amigável e familiar aos seus referenciais de interação analógica/digital. Podem ser aplicadas em ícones, transições, menus, janelas, botões, etc.<br />
<br />
'''Importância'''<br />
<br />
Animações de interface ajudam a envolver o usuário e encorajam uma exploração mais profunda de um app ou site. Auxilia na contextualização de uma sequência de ações. Instiga o usuário a questionar “O que vai acontecer se eu tocar isso?”, ”E depois disso?”.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Planejamento de animação<br />
Guia de animação (documento com especificações de execução)<br />
Criação de animação codificada<br />
<br />
<br />
<br />
<br />
== Validação técnica (designer) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Revisão e validação do produto funcional em relação ao que foi planejado.<br />
<br />
'''Importância'''<br />
<br />
Garantir que todo o planejamento, em todas as áreas competentes a equipe, tenha sido executado para que o produto chegue com a máxima qualidade para a análise do cliente.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Validação de montagem HTML/CSS<br />
Validação pós back-end<br />
Validação de usabilidade básica no dispositivo/paltaforma final<br />
<br />
<br />
<br />
<br />
== Interface gamificada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uso de elementos visuais atrativos que auxiliam na exposição dos dados de desempenho do usuário/jogador. Adiciona uma experiência lúdica, mais próxima de um jogo que de um sistema.<br />
<br />
'''Importância'''<br />
<br />
Tem o objetivo de tornar a experiência de uso de um determinado produto diferenciado e instigante.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Estudo de similares<br />
Pesquisa de interesses do público alvo<br />
Planejamento da gamificação<br />
Planejamento e mapeamento do impacto no layout</div>Danilo.pontechellehttp://wiki.mstech.com.br/index.php?title=Designers_da_Informa%C3%A7%C3%A3o&diff=792Designers da Informação2016-06-23T19:23:06Z<p>Danilo.pontechelle: /* Cardápio de competências */</p>
<hr />
<div><br />
A equipe de Design da Informação tem como principais responsabilidades arquitetar e realizar fluxos de informação na concepção de produtos, construção de interfaces gráficas e identidades visuais, bem como elaborar soluções criativas no que compete a usabilidade, navegabilidade e facilidade de interação, definir padrões reaproveitáveis e executar procedimentos práticos, assim como a codificação Front End (HTML/CSS), a fim de garantir a melhor experiência entre o produto concebido e o usuário final.<br />
<br />
'''A equipe'''<br />
<br />
Contamos com quatro designers altamente capacitados e versados nas mais diferentes aptidões que são necessárias para desempenhar o papel de Designer da Informação:<br />
<ul><br />
<li>Danilo Martinelli Pontechelle;</li><br />
<li>Lucas Toledo Teixeira Evangelista;</li><br />
<li>Miriam Midori Haga;</li><br />
<li>Samuel de Aguiar Sabino.</li><br />
</ul><br />
<br />
== Planejamento geral ==<br />
<br />
<p><strong>O que é?</strong></p><br />
<p class="ng-binding">Análise de todos os requisitos relacionados ao projeto, tipos de plataforma envolvidas, objetivo do cliente, análise do público alvo, a fim de elaborar o planejamento da produção e também a concepção do produto.</p><br />
<p><strong>Importância</strong></p><br />
<p class="ng-binding">Fase crucial para entendimento do que precisa ser produzido e como será produzido assim como suas características.</p><br />
<p><strong>Atividades relacionadas</strong></p><br />
<ul class="lista-padrao"><br />
<!-- ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise de requisitos</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do objetivo do cliente</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do público alvo</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Concepção do produto</li><!-- end ngRepeat: relacionado in competencia.relacionados --><br />
</ul><br />
<br />
<br />
== Identidade Visual ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representa um produto/serviço por meio de símbolos, logotipos, fontes, áudios, animações, elementos gráficos e outros.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia um produto/serviço e é responsável pela comunicação de seus valores ao usuário/consumidor.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Estudos (análise de similares, brainstorm, rascunhos de solução)<br />
Moodboard (prancha com paleta de cores e imagens de referência)<br />
Elementos gráficos (patterns, ícones, grafismos etc.)<br />
Layout (impresso, web, animação etc.)<br />
Guidelines<br />
<br />
<br />
<br />
<br />
== Logo do produto ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Representação visual de um conceito, cuja forma, cores e fonte dão identidade a um produto.<br />
<br />
'''Importância'''<br />
<br />
Caracteriza e diferencia o produto em relação aos concorrentes. Também simboliza a sua filosofia e forma de atuação no mercado.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Pesquisa de referências de similares no mercado<br />
Definição do conceito principal e criação de um símbolo que traduza essa ideia<br />
Avaliação da consistência da identidade em diversos tamanhos e dispositivos/plataformas<br />
<br />
<br />
<br />
== Iconografia ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
É o conjunto de ícones padrão de uma interface, signos visuais que representam outro objeto por força de semelhança. Ícones são signos substitutivos (podem ser usados no lugar da coisa representada) e fundamentais na interação dos usuários com os computadores, pois indicam as zonas de acionamento de comandos ou reforçam visualmente alguma ação que o sistema apresenta.<br />
<br />
'''Importância'''<br />
<br />
Uma iconografia bem projetada é essencial para qualquer interface. Suas vantagens são impressionantes, pois dispensam leitura, logo podem ser identificadas por analfabetos, estrangeiros, etc. São compreendidos rapidamente diminuindo o tempo de interação, são mais facilmente memorizados e otimizam o espaço nas telas.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Ícones da interface (menus, funcionalidades, alertas, botões...)<br />
Ícones do produto (aplicativo, favicon, etc.)<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
== Acessibilidade ==<br />
<br />
'''O que é?'''<br />
<br />
Acessibilidade é definida como a possibilidade de qualquer pessoa, independentemente de suas capacidades físicomotoras, perceptivas, culturais e sociais, usufruir os benefícios de uma vida em sociedade, tendo a possibilidade de participar de qualquer atividade, até as que incluem o uso de produtos, serviços e informações, com o mínimo de restrição possível.<br />
<br />
'''Importância'''<br />
<br />
Está ligado intimamente com a experiência do usuário e com toda a produção tanto de código quanto visual. É mais fácil e eficiente planejá-la desde o início para evitar retrabalho.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Seguir os padrões de desenvolvimento Web da W3C (cor, contraste, tamanhos etc.)<br />
Seguir diretrizes e recomendações de acessibilidade do WAI, WCAG e WAI-ARIA (navegabilidade, HTML, etc.)<br />
Realizar avaliação de acessibilidade<br />
<br />
<br />
<br />
== Fluxo de navegação ==<br />
<br />
'''O que é?'''<br />
<br />
Uma representação visual do fluxo do usuário para completar tarefas dentro de um sistema. Exemplo: Em um site, o usuário começa pela na página inicial, segue para a página de um produto, depois vai até o carrinho de compras – e assim por diante. É a perspectiva do usuário sobre a organização do site, que ajuda a identificar quais passos precisam ser melhorados ou redesenhados.<br />
'''<br />
Importância'''<br />
<br />
Define a navegação bem como a utilização de botões/menus/listas e outros componentes de interação.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Simplificar processos<br />
Redefinir fluxos de interação<br />
<br />
<br />
<br />
<br />
== Mapa do site ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Consiste em um diagrama das páginas/seções de um site/app/sistema/etc organizadas hierarquicamente.<br />
<br />
'''Importância'''<br />
<br />
Ajuda a visualizar e compreender a estrutura básica e a navegação entre as diferentes partes do sistema. A partir dele podemos definir a navegação macro e ideal do usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Listagem de seções<br />
Montagem de mapa do site<br />
<br />
<br />
<br />
<br />
<br />
<br />
== Sketch ==<br />
<br />
'''O que é?'''<br />
<br />
Uma forma rápida de rabiscar uma nova interface usando papel e caneta sem compromisso com a fidelidade de formas, cores e detalhes dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Podem ser muito úteis para validar rapidamente conceitos de produtos e ideias de design com os outros membros da equipe e com usuários.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Sketch manual<br />
Sketch digital<br />
<br />
<br />
<br />
<br />
== Wireframe ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um guia visual que representa a estrutura da página, bem como sua hierarquia e os principais elementos que a compõem com maior fidelidade de proporções e posicionamento mais definidos dos elementos visuais.<br />
<br />
'''Importância'''<br />
<br />
Útil para discutir ideias com o time e com os clientes, e também para guiar o trabalho dos Diretores de Arte e Desenvolvedores.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Planejamento<br />
Criação de wireframe<br />
Validação<br />
<br />
<br />
<br />
<br />
<br />
<br />
== Mockup ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma representação estática de média a alta fidelidade de um site/app/sistema/etc. Muitas vezes um mockup é um rascunho bem próximo do design final do produto, ou até o próprio produto final.<br />
<br />
'''Importância'''<br />
<br />
Úteis para vender a ideia do produto antes de ele estar pronto. Não possuem a resistência dos entregáveis de baixa fidelidade em apresentações e são ótimos coletores de feedback.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Planejamento<br />
Desenvolvimento<br />
Avaliação da consistência da Identidade Visual em determinados dispositivos/plataformas<br />
Validação<br />
<br />
<br />
<br />
<br />
== Prototipagem ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Um protótipo é uma simulação da navegação e de algumas funcionalidades de um site/app/sistema, composto normalmente por sketch/wireframes/mockup clicáveis.<br />
<br />
'''Importância'''<br />
<br />
É uma forma rápida de validar e testar um produto antes de desenvolvê-lo do começo ao fim.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Protótipo sketch<br />
Protótipo wireframe<br />
Protótipo mockup<br />
<br />
<br />
<br />
<br />
<br />
== Telas de ajuda e tutorial ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Montagem de imagens ou animações que mostram um passo a passo para guiar a utilização de um produto.<br />
<br />
'''Importância'''<br />
<br />
Identifica as ferramentas e funcionamento de um produto facilitando seu reconhecimento pelo usuário.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Criação de pranchas que demonstrem o fluxo de navegação pelas telas do produto<br />
Simulações animadas interativas com instruções que guiam o usuário<br />
Telas de ajuda dentro do próprio produto com textos e indicações de como utilizá-lo<br />
<br />
<br />
<br />
<br />
<br />
<br />
== Pranchas de apresentação ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Documento para visualização e entendimento das telas e conceitos aplicados em um projeto ou produto.<br />
<br />
'''Importância'''<br />
<br />
Podem ser utilizadas em apresentações para auxiliar o cliente a visualizar o que foi planejado, por que foi planejado e sua importância para o produto.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Proposta de sketch<br />
Proposta de wireframe<br />
Proposta de mapa de site<br />
Proposta de fluxograma de navegação<br />
Proposta de identidade visual (logotipo, ícones, elementos gráficos etc.)<br />
Proposta de iconografia<br />
<br />
<br />
<br />
<br />
<br />
== Testes de usabilidade ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Entrevista com o consumidor, onde pede-se que ele execute uma série de tarefas em um protótipo ou mesmo no produto final. À medida em que o consumidor interage com o produto, o pesquisador faz anotações sobre seu comportamento, dificuldades e suas opiniões.<br />
<br />
'''Importância'''<br />
<br />
Essencial para atualizações do produto. Ajuda a validar fluxos, layouts e funcionalidades aumentando a qualidade, o desempenho e a empatia pelo produto final.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Análise de resultado dos testes aplicado ao usuário<br />
Planejamento de ações<br />
Produção<br />
<br />
<br />
<br />
== HTML/CSS (front-end design) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Codificação em HTML/CSS/JQUERY do mockup do layout final.<br />
<br />
'''Importância'''<br />
<br />
Traduz o que foi planejado no mockup com fidelidade e estrutura para a equipe desenvolvimento implementar as interações e funcionalidades.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Guia de montagemHTML/CSS (proporções, distâncias, tamanho de fonte, etc)<br />
Montagem HTML/CSS (estruturação, customização de componentes padrão, etc)<br />
<br />
<br />
== Folha de estilos (biblioteca de padrões) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uma lista prática com exemplos (e às vezes códigos) dos padrões visuais que serão utilizados em todo o site. É fundamental para a padronização dos elementos da interface, facilitando a produção e reprodução das demais telas.<br />
<br />
'''Importância'''<br />
<br />
Não só ajuda a manter o design consistente em diferentes telas, mas também facilita a vida dos desenvolvedores na hora de implementar os elementos.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Componentes de interação (botões, listas suspensas, setas de navegação, etc.)<br />
Componentes de formatação (fonte, cores, tamanhos, espaçamentos, etc.)<br />
Componentes de marcação (HTML e CSS)<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
== Interface animada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Animações pontuais que têm a intenção de tornar a experiência do usuário mais amigável e familiar aos seus referenciais de interação analógica/digital. Podem ser aplicadas em ícones, transições, menus, janelas, botões, etc.<br />
<br />
'''Importância'''<br />
<br />
Animações de interface ajudam a envolver o usuário e encorajam uma exploração mais profunda de um app ou site. Auxilia na contextualização de uma sequência de ações. Instiga o usuário a questionar “O que vai acontecer se eu tocar isso?”, ”E depois disso?”.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Planejamento de animação<br />
Guia de animação (documento com especificações de execução)<br />
Criação de animação codificada<br />
<br />
<br />
<br />
<br />
== Validação técnica (designer) ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Revisão e validação do produto funcional em relação ao que foi planejado.<br />
<br />
'''Importância'''<br />
<br />
Garantir que todo o planejamento, em todas as áreas competentes a equipe, tenha sido executado para que o produto chegue com a máxima qualidade para a análise do cliente.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Validação de montagem HTML/CSS<br />
Validação pós back-end<br />
Validação de usabilidade básica no dispositivo/paltaforma final<br />
<br />
<br />
<br />
<br />
== Interface gamificada ==<br />
<br />
<br />
'''O que é?'''<br />
<br />
Uso de elementos visuais atrativos que auxiliam na exposição dos dados de desempenho do usuário/jogador. Adiciona uma experiência lúdica, mais próxima de um jogo que de um sistema.<br />
<br />
'''Importância'''<br />
<br />
Tem o objetivo de tornar a experiência de uso de um determinado produto diferenciado e instigante.<br />
<br />
'''Atividades relacionadas'''<br />
<br />
Estudo de similares<br />
Pesquisa de interesses do público alvo<br />
Planejamento da gamificação<br />
Planejamento e mapeamento do impacto no layout</div>Danilo.pontechellehttp://wiki.mstech.com.br/index.php?title=Designers_da_Informa%C3%A7%C3%A3o&diff=791Designers da Informação2016-06-23T19:13:17Z<p>Danilo.pontechelle: /* Design da Informação */</p>
<hr />
<div><br />
A equipe de Design da Informação tem como principais responsabilidades arquitetar e realizar fluxos de informação na concepção de produtos, construção de interfaces gráficas e identidades visuais, bem como elaborar soluções criativas no que compete a usabilidade, navegabilidade e facilidade de interação, definir padrões reaproveitáveis e executar procedimentos práticos, assim como a codificação Front End (HTML/CSS), a fim de garantir a melhor experiência entre o produto concebido e o usuário final.<br />
<br />
'''A equipe'''<br />
<br />
Contamos com quatro designers altamente capacitados e versados nas mais diferentes aptidões que são necessárias para desempenhar o papel de Designer da Informação:<br />
<ul><br />
<li>Danilo Martinelli Pontechelle;</li><br />
<li>Lucas Toledo Teixeira Evangelista;</li><br />
<li>Miriam Midori Haga;</li><br />
<li>Samuel de Aguiar Sabino.</li><br />
</ul><br />
<br />
== Cardápio de competências ==<br />
<br />
'''Planejamento geral'''<br />
<br />
<p><strong>O que é?</strong></p><br />
<p class="ng-binding">Análise de todos os requisitos relacionados ao projeto, tipos de plataforma envolvidas, objetivo do cliente, análise do público alvo, a fim de elaborar o planejamento da produção e também a concepção do produto.</p><br />
<p><strong>Importância</strong></p><br />
<p class="ng-binding">Fase crucial para entendimento do que precisa ser produzido e como será produzido assim como suas características.</p><br />
<p><strong>Atividades relacionadas</strong></p><br />
<ul class="lista-padrao"><br />
<!-- ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise de requisitos</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do objetivo do cliente</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do público alvo</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Concepção do produto</li><!-- end ngRepeat: relacionado in competencia.relacionados --><br />
</ul></div>Danilo.pontechellehttp://wiki.mstech.com.br/index.php?title=Designers_da_Informa%C3%A7%C3%A3o&diff=790Designers da Informação2016-06-23T19:12:31Z<p>Danilo.pontechelle: /* Cardápio de competências */</p>
<hr />
<div><br />
== Design da Informação ==<br />
<br />
A equipe de Design da Informação tem como principais responsabilidades arquitetar e realizar fluxos de informação na concepção de produtos, construção de interfaces gráficas e identidades visuais, bem como elaborar soluções criativas no que compete a usabilidade, navegabilidade e facilidade de interação, definir padrões reaproveitáveis e executar procedimentos práticos, assim como a codificação Front End (HTML/CSS), a fim de garantir a melhor experiência entre o produto concebido e o usuário final.<br />
<br />
'''A equipe'''<br />
<br />
Contamos com quatro designers altamente capacitados e versados nas mais diferentes aptidões que são necessárias para desempenhar o papel de Designer da Informação:<br />
<ul><br />
<li>Danilo Martinelli Pontechelle;</li><br />
<li>Lucas Toledo Teixeira Evangelista;</li><br />
<li>Miriam Midori Haga;</li><br />
<li>Samuel de Aguiar Sabino.</li><br />
</ul><br />
<br />
== Cardápio de competências ==<br />
<br />
'''Planejamento geral'''<br />
<br />
<p><strong>O que é?</strong></p><br />
<p class="ng-binding">Análise de todos os requisitos relacionados ao projeto, tipos de plataforma envolvidas, objetivo do cliente, análise do público alvo, a fim de elaborar o planejamento da produção e também a concepção do produto.</p><br />
<p><strong>Importância</strong></p><br />
<p class="ng-binding">Fase crucial para entendimento do que precisa ser produzido e como será produzido assim como suas características.</p><br />
<p><strong>Atividades relacionadas</strong></p><br />
<ul class="lista-padrao"><br />
<!-- ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise de requisitos</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do objetivo do cliente</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do público alvo</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Concepção do produto</li><!-- end ngRepeat: relacionado in competencia.relacionados --><br />
</ul></div>Danilo.pontechellehttp://wiki.mstech.com.br/index.php?title=Designers_da_Informa%C3%A7%C3%A3o&diff=789Designers da Informação2016-06-23T19:11:57Z<p>Danilo.pontechelle: Criou página com ' == Design da Informação == A equipe de Design da Informação tem como principais responsabilidades arquitetar e realizar fluxos de informação na concepção de produtos...'</p>
<hr />
<div><br />
== Design da Informação ==<br />
<br />
A equipe de Design da Informação tem como principais responsabilidades arquitetar e realizar fluxos de informação na concepção de produtos, construção de interfaces gráficas e identidades visuais, bem como elaborar soluções criativas no que compete a usabilidade, navegabilidade e facilidade de interação, definir padrões reaproveitáveis e executar procedimentos práticos, assim como a codificação Front End (HTML/CSS), a fim de garantir a melhor experiência entre o produto concebido e o usuário final.<br />
<br />
'''A equipe'''<br />
<br />
Contamos com quatro designers altamente capacitados e versados nas mais diferentes aptidões que são necessárias para desempenhar o papel de Designer da Informação:<br />
<ul><br />
<li>Danilo Martinelli Pontechelle;</li><br />
<li>Lucas Toledo Teixeira Evangelista;</li><br />
<li>Miriam Midori Haga;</li><br />
<li>Samuel de Aguiar Sabino.</li><br />
</ul><br />
<br />
== Cardápio de competências ==<br />
<br />
<h2>Planejamento geral</h2><br />
<br />
<p><strong>O que é?</strong></p><br />
<p class="ng-binding">Análise de todos os requisitos relacionados ao projeto, tipos de plataforma envolvidas, objetivo do cliente, análise do público alvo, a fim de elaborar o planejamento da produção e também a concepção do produto.</p><br />
<p><strong>Importância</strong></p><br />
<p class="ng-binding">Fase crucial para entendimento do que precisa ser produzido e como será produzido assim como suas características.</p><br />
<p><strong>Atividades relacionadas</strong></p><br />
<ul class="lista-padrao"><br />
<!-- ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise de requisitos</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do objetivo do cliente</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do público alvo</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Concepção do produto</li><!-- end ngRepeat: relacionado in competencia.relacionados --><br />
</ul></div>Danilo.pontechelle