1. Outros
1.1. Proposto
1.1.1. Capa
1.1.2. Sumário
1.1.3. Apresentação da Equipe
1.1.4. Pesquisa
1.1.4.1. Similares
1.1.4.2. Análise
1.1.5. Rough Inicial
1.1.6. Design Thinking
1.1.7. Wireframe final
1.1.8. Layout
1.2. Realizado
1.2.1. Proposta impressa do site – Formato A4 + Arquivo PDF (em forma de relatório) contendo: CAPA SUMÁRIO BREVE HISTÓRICO DO TRABALHO ANÁLISE DE SIMILARES ROUGH´S UX DESIGN / DESIGN THINKING MOCKUP LAYOUT FINAL CONSIDERAÇÕES FINAIS Obs.: Atentar à formatação, originalidade, design e atendimento ao que se pede
2. Outros II
2.1. Trabalho em 07/03/2017
2.1.1. a) Atividade em grupo de 3 pessoas. b) Analisar um site e propor melhoria (escrita) sob o ponto de vista da usabilidade e do design. c) Entregar folha
2.2. Trabalhos 30/05
2.2.1. Redes Sociais
2.2.2. Protótipo
2.2.2.1. Wix
2.2.2.2. Invision
2.2.3. Apresentação
3. Giovanni
3.1. Design
3.1.1. Paleta de Cores
3.1.1.1. http://colorsupplyyy.com/app/
3.1.1.2. http://www.colourlovers.com/
3.1.1.3. https://color.adobe.com/pt/create/color-wheel/
3.1.2. Banco de Imagens
3.1.2.1. https://www.pexels.com/
3.1.2.2. https://pixabay.com/
3.1.3. Banco de Vetores
3.1.3.1. http://br.freepik.com/
3.1.4. - Skeuomorphic - Metro design (Windows) - Material Design (Android) - Flat designUx e UI design o que são?
3.1.4.1. Design Flat vs Skeumorfismo sob uma perspectiva analítica
3.1.5. Interface
3.1.5.1. Skeumorphic
3.1.5.2. Metro Design (Windows)
3.1.5.2.1. 15 Flat Metro Design Examples
3.1.5.2.2. Metro UI – Wikipédia, a enciclopédia livre
3.1.5.3. Material Design (Android)
3.1.5.3.1. Material Design – Wikipédia, a enciclopédia livre
3.1.5.3.2. https://lockerdome.com/7408605917885761/9211274190045204
3.1.5.4. Flat Design
3.1.5.4.1. A Nova Tendência do Flat Design. O que? Por que? - Des1gn ON
3.1.5.4.2. Flat design é o nome dado a um tipo de design voltado ao estilo minimalista, comumente utilizados nas interfaces gráficas de utilizador, especialmente em materiais gráficos como cartazes, artes, guia de documentos, publicação de produtos e sites.
3.1.6. UI Design - User Interface Design - Chief of Design
3.2. Exact Sales
3.2.1. Desafio Técnico - UX Designer
3.2.1.1. Problema
3.2.1.1.1. Criamos um exercício com o objetivo de avaliar a solução de problemas com base na escolha da metodologia, solução da proposta e artefatos gerados. Problema: A empresa “MarsTech” precisa resolver o problema de seus funcionários que viajam frequentemente a trabalho. Geralmente, o departamento de compras da empresa fica sobrecarregado ao pesquisar tudo o que envolve a viagem. Com o intuito de facilitar o cruzamento de dados de companhias aéreas, serviços de transporte, restaurantes e hotéis, a fim de encontrar as opções mais baratas em todos esses serviços, foi solicitado o desenvolvimento de um sistema multiplataforma que ajude o departamento financeiro a organizar as viagens de seus colaboradores. Utilize as histórias abaixo para ajudar na solução:
3.2.1.1.2. 1 – A empresa precisa comprar passagens a cada dois meses para viagens de negócios, de dois a oito colaboradores; 2 – A empresa quer traslado para seus funcionários entre aeroporto-hotel e hotel-aeroporto; 3 – A empresa deseja que os funcionários fiquem em quartos duplos, tipo standard; 4 – A empresa possui programa de fidelidade com a companhia aérea FlyHigh; 5 – Os colaboradores desejam ter opções de restaurantes próximos ao hotel; 6 – A empresa quer o melhor custo-benefício na compra das passagens aéreas e precisa identificar a melhor oferta; 7 – Os colaboradores querem receber alerta ou mensagens de texto com informações sobre o voo, como número do voo, data, hora, portão do embarque e, caso aconteça, atualizações como atrasos e cancelamentos sobre todos os seus voos.
3.2.1.2. Histórias
3.2.1.3. Público Alvo
3.2.1.3.1. ● Estratégia de Pesquisa ● Metodologia utilizada ● Dois exemplos de persona, um homem e uma mulher ● Fluxograma da solução proposta ● Wireframes de pontos de vista importantes dentro do sistema proposto ● Protótipo de baixa fidelidade
3.2.1.3.2. Homens e Mulheres, entre 25 e 45 anos, das áreas de Negócios, Engenharia da Computação e Design
3.2.1.4. Entregáveis
3.2.1.5. Estrategia
3.2.1.5.1. Falamos insistentemente que para uma boa experiência do cliente é necessário pesquisar, conhecer as necessidades e dificuldades dos clientes, alterar processos internos, entender os funcionários, quer dizer, pensar estrategicamente em UX. Mas como fazer isso? Como criar uma estratégia de UX consistente e viável reunindo as visões do mercado, do negócio e do usuário? Grande parte do problema é a confusão a respeito do termo “estratégia”. Muitas pessoas focam em fazer um planejamento detalhado. Outras consideram estratégia uma investigação aprofundada com pesquisas de mercado e benchmarkings super completos. Tem até aqueles que confundem com a “visão” ou a ambição da empresa. Nada disso é estratégia. Estratégia consiste em descobrir quais são os principais desafios em alguma situação e criar maneiras de coordenar os esforços necessários para alcançar o resultado desejado. Estratégia é um conjunto de escolhas interconectadas que alinham atividades: “ao fazer isso, esperamos ver isso”. As respostas para nossas perguntas, infelizmente, não surgem magicamente dos dados. Análise e planejamento, enquanto insumos necessários para criar um plano de estratégia, não são o núcleo da estratégia. Roteiros de planejamento detalhados não fornecem os motivos das atividades que eles organizam. Estratégia é fazer. Estratégia é conectar análise e planejamento de forma lógica, que orientem a tomada de decisões. Construir uma estratégia de UX depende muito da criatividade. É preciso explorar diferentes opções, sempre perguntando “E se?” e “O que é realmente necessário?”. Quando se cria um Plano de UX ao iniciar um projeto não há riscos: escrever e apagar no quadro, mover post-its, reformular ideias, amassar tudo e começar de novo. A estratégia se projeta assim mesmo. Comece sempre pensando em quais são seus desafios e quais são suas principais aspirações, depois comece a pensar em quais áreas ou serviços você quer focar (quem usará, em quais países, quais produtos, serviços, tecnologia, casos de uso etc), quais são os princípios que orientam a equipe (como você se destacará no mercado?), que tipo de atividades de UX são necessárias para alcançar os objetivos e, por fim, como medir (como saber se a estratégia está no caminho certo?). Uma vez que todos os elementos foram definidos e acordados, é importante consolidar a estratégia de forma sucinta e visual. Crie formatos diferentes de acordo com o público da empresa, use: apresentações, gráficos, exposições, panfletos, o que for necessário para compartilhar a estratégia com a maior frequência possível. Coloque uma frase ou uma imagem representativa no primeiro slide de todas as apresentações, use como papel de parede para os computadores da empresa… faça de tudo para que ela seja sempre lembrada. Desenvolver uma estratégia envolve exploração, escolha e pensamento sistemático. É preciso encontrar um modelo que te guie e te ajude a ver todas as conexões num quadro geral. Ao fazer isso, a estratégia se torna mais simples de ser alcançada e torna um conceito abstrato mais tangível para todos os envolvidos.
3.3. Ecoboot
3.3.1. Objetivo
3.3.1.1. Tornar-se Mercado Líder
3.3.1.2. Vender onde houver Market Place
3.3.1.3. Desenvolver o melhor produto
3.3.2. Pesquisa
3.3.3. Estratégias
3.3.3.1. Fortalecer Unidade Visual da Marca através de diversas aplicações
3.3.3.1.1. Briefing
3.3.3.1.2. Manual de Identidade
3.3.3.1.3. Wallpapers
3.3.3.2. Criar ícones (macros) de detalhes dos produtos
3.3.3.3. Vender Benefícios
3.3.3.4. Buyer Persona
3.3.3.5. Mensuração
3.3.3.6. Divulgar Vale Presente
3.3.3.7. Fortalecer Reputação nas Mídias Sociais
3.3.3.8. Cercar as reclamações no SAC e no Reclame Aqui
3.3.4. Redes Sociais
3.3.4.1. Facebook
3.3.4.1.1. Prós
3.3.4.1.2. Contras
3.3.4.1.3. Oport. Melhoria
3.3.4.2. Instagram
3.3.4.2.1. Trabalhar fotos
3.3.4.3. Youtube
3.3.4.3.1. Unboxing Eletroporti: Bota Motociclista Impermeável Cano Longo Ecoboot
3.3.4.3.2. Criar Unboxing Ecoboot
3.3.4.3.3. Criar Review Ecoboot
3.3.4.4. Twitter
3.3.4.4.1. Conseguir seguidores
3.3.4.5. MLABS
3.3.4.5.1. Gestão de Redes Sociais
3.3.5. Mercado Livre
3.3.5.1. Atualizar as informações dos Produtos
3.3.5.1.1. Código Universal
3.3.5.1.2. SEO e Titulos
3.3.5.1.3. Fotografias
3.3.5.2. Tornar-se MercadoLíder Platinum
3.3.5.3. Obter template específica do site
3.3.6. Rakuten
3.3.6.1. Atualizar a loja
3.3.6.1.1. Produtos
3.3.6.1.2. Banners
3.3.6.1.3. Benchmarking Altenburgh
3.3.7. Concorrentes
3.3.7.1. Macboot
3.3.7.2. Mercado Livre
3.3.7.2.1. Azimute
3.3.7.3. MD Fiel
3.3.7.4. Rafarillo
3.3.7.5. Sandro Moscoloni
3.3.8. Softwares
3.3.8.1. Creative Cloud
3.3.8.2. Mindmeister
3.3.8.2.1. Criar pelo email mkt ecoboot
3.3.8.3. Gestão de Redes Sociais
3.3.8.3.1. Mlabs 155,00 Anual
3.3.9. Equipamentos
3.3.9.1. Nikon D5300
3.3.9.1.1. Fototec Fotografias Rua Libero badaró, 1584 (16) 3724-3607
3.3.9.2. Tripé Universal 1,70
3.3.9.2.1. Fototec Fotografias Rua Libero badaró, 1584 (16) 3724-3607
3.3.9.3. Estúdio Portatil Pop Up 60x60
3.3.9.3.1. Mercado Livre
3.3.10. Mkt Relacionamento
3.3.10.1. Datas Estratégicas
3.3.10.1.1. Dia do Cliente 15 de Setembro
3.3.10.1.2. Volta às Aulas
3.3.10.1.3. Black Friday
3.3.10.1.4. Dia dos Namorados 12 de Junho
3.3.10.1.5. Dia Internacional da Mulher 8 de Março
3.3.10.1.6. Dia das Mães 2º Domingo de Maio
3.3.10.1.7. Dia dos Pais 2º Domingo de Agosto
3.3.10.1.8. Sazonais Estações do Ano
3.3.10.1.9. Dia das Crianças 12 de Outubro
3.3.10.1.10. Natal 25 de Dezembro
3.3.10.2. Email Mkt
3.3.10.2.1. Brinde: Cupom de Desconto
3.3.10.2.2. Pop up de saída
3.3.10.3. Por que comprar conosco?
3.3.10.3.1. Analisar concorrentes
3.3.10.3.2. Tenho que ser a LOJA
3.3.10.3.3. Trabalhar o expediente
3.3.11. Market Place
3.3.11.1. Netshoes
3.3.11.2. Dafiti
3.3.11.3. Walmart
3.3.11.4. B2W
3.3.11.5. Objetivo: Estar em todas as plataformas
3.3.12. História
3.3.12.1. Fundada em 20xx
3.4. Aula de quinta
3.4.1. UOL - O melhor conteúdo
3.5. Aula de sexta
3.6. Abordagens
3.6.1. UX Design
3.6.1.1. Princípios
3.6.1.1.1. Questões:
3.6.1.1.2. 25% usuarios aplicativos nao voltam a segunda vez
3.6.1.1.3. Abordagem Chat Nubank
3.6.1.1.4. Exemplo Netflix captação de rate (taxa) filmes, comportamento, cruzamento de informações
3.6.1.1.5. Exemplo inicializacao da LG https://www.youtube.com/watch?v=SnZnK7qaebU
3.6.1.1.6. Empatia: colocar no lugar de outra pessoa
3.6.1.1.7. Tornar intuitivo
3.6.1.1.8. Feedback: responder às ações
3.6.1.1.9. Framework: Sprint
3.6.1.2. Referência: Don Norman
3.6.2. Etapas
3.6.2.1. Time Heterogêneo
3.6.2.1.1. 3 pessoas
3.6.2.2. Briefing
3.6.2.3. Estudo Personas
3.6.2.4. Perguntas
3.6.2.4.1. Objetivo: Explicitar o aplicativo
3.6.2.4.2. 1) Por que estamos fazendo este produto?
3.6.2.4.3. 2) O que queremos do produto?
3.6.2.4.4. 3) O que os usuários querem dele?
3.6.2.4.5. 4) O que faremos?
3.6.2.4.6. 5) Como funcionalidades e dados se encaixam?
3.6.2.4.7. 6) Como monetizar?
3.6.2.5. Pesquisa e Similaridade
3.6.2.5.1. É o ato de investigar, através de várias fontes, o potencial de um produto ou serviço, seus usuários e ambientes existentes.
3.6.2.5.2. De posse do briefing, persona e das informações partir para as etapas (cada caso é um caso)
3.6.2.5.3. Entrevistas com stakeholders, especialistas, clientes ou usuários
3.6.2.6. Mapa Mental
3.6.2.6.1. www.mindmeister.com
3.6.2.7. Diagramas
3.6.2.7.1. Online Diagram Software & Visual Solution | Lucidchart
3.6.2.8. Sketch Manual
3.6.2.9. Canvas
3.6.2.10. Hotjar
4. Abordagens
4.1. UX Design
4.1.1. Princípios
4.1.2. Princípios
4.1.2.1. Questões:
4.1.2.1.1. A culpa é do usuário?
4.1.2.1.2. E se fosse seu produto?
4.1.2.2. 25% usuarios aplicativos nao voltam a segunda vez
4.1.2.3. Abordagem Chat Nubank
4.1.2.4. Exemplo Netflix captação de rate (taxa) filmes, comportamento, cruzamento de informações
4.1.2.5. Exemplo inicializacao da LG https://www.youtube.com/watch?v=SnZnK7qaebU
4.1.2.6. Empatia: colocar no lugar de outra pessoa
4.1.2.7. Tornar intuitivo
4.1.2.8. Feedback: responder às ações
4.1.2.8.1. Qual retorno dou para meus usuarios?
4.1.2.9. Framework: Sprint
4.1.2.9.1. Etapas: 1 Map 2 Sketch 3 Decide 4 Prototype 5 Test
4.1.2.9.2. Prototipo Baixa Fidelidade (wire)
4.1.2.9.3. Prototipo Alta Fidelidade Celular com animaçao
4.1.3. Referência: Don Norman
4.2. Responsividade
4.2.1. Mobile
4.3. Estudo de caso
4.4. Etapas
4.4.1. Time Heterogêneo
4.4.2. Briefing
4.4.3. Estudo
4.4.3.1. Objetivo
4.4.3.1.1. Explicitar o aplicativo
4.4.3.2. Perguntas
4.4.3.2.1. 1) Por que estamos fazendo este produto?
4.4.3.2.2. 2) O que queremos do produto?
4.4.3.2.3. 3) O que os usuários querem dele?
4.4.3.2.4. 4) O que faremos?
4.4.3.2.5. 5) Como funcionalidades e dados se encaixam?
4.4.3.2.6. 6) Como monetizar?
4.4.3.3. Briefing
4.4.3.3.1. De posse do briefing, persona e das informações partir para as etapas (cada caso é um caso)
4.4.4. Pesquisa e Similaridade
4.4.4.1. É o ato de investigar, através de várias fontes, o potencial de um produto ou serviço, seus usuários e ambientes existentes.
4.4.4.2. Pesquisa online Google Forms
4.4.4.2.1. Grupos Redes Sociais, Mobile
4.4.4.3. Canvas Buyer Persona
4.4.4.3.1. Mediador para criação Perguntas
4.4.4.4. Objetivo
4.4.4.4.1. Entrevistas com stakeholders, especialistas, clientes ou usuários
4.4.5. Personas
4.4.5.1. Foco no comportamento do Público Alvo
4.4.5.2. Construtor
4.4.5.2.1. O Fantástico Gerador de Personas de Marketing: Crie buyer personas e compartilhe com os colegas!
4.4.5.3. Persona: Como e por que criar uma para sua empresa - Resultados Digitais
4.4.6. Ferramentas
4.4.6.1. Trello
4.4.6.2. Mapa Mental
4.4.6.3. Diagramas
4.4.6.3.1. Online Diagram Software & Visual Solution | Lucidchart
4.4.7. Sketch
4.4.7.1. Painel semântico / moodboard
4.4.7.2. Manual
4.4.7.2.1. Identidade Visual
4.4.7.2.2. Telas
4.4.7.3. Software
4.4.7.3.1. Axure
4.4.7.3.2. Ilustrator
4.4.8. Metodologias
4.4.8.1. Business Model Canvas
4.4.8.2. Matriz Swot
4.4.9. Design
4.4.9.1. Paleta de Cores
4.4.9.1.1. http://colorsupplyyy.com/app/
4.4.9.1.2. http://www.colourlovers.com/
4.4.9.1.3. https://color.adobe.com/pt/create/color-wheel/
4.4.9.2. Banco de Imagens
4.4.9.2.1. https://www.pexels.com/
4.4.9.2.2. Beautiful Free Images & Pictures | Unsplash
4.4.9.3. Banco de Vetores
4.4.9.3.1. http://br.freepik.com/
4.4.9.4. - Skeumorfismo - Metro design (Windows) - Material Design (Android) - Flat designUx e UI design o que são? - - - Neomorfismo
4.4.9.4.1. Design Flat vs Skeumorfismo sob uma perspectiva analítica
4.4.9.5. Interface
4.4.9.5.1. Skeumorphic
4.4.9.5.2. Metro Design (Windows)
4.4.9.5.3. Material Design (Android)
4.4.9.5.4. Flat Design
4.4.9.5.5. Neomorfismo
4.4.9.6. UI Design - User Interface Design - Chief of Design
4.4.9.7. Adobe XD
4.4.10. Testes
4.4.10.1. Hotjar
5. Equipe Criativa
5.1. Definição
5.1.1. 3 pessoas
5.2. PROBLEMA Vamos trabalhar com uma empresa fictícia e para isso vamos desenvolver todo um processo que vai desde a criação, planejamento e execução de ações publicitárias que se darão através de meio digital no decorrer do semestre. Para isso, peço que façam as seguintes tarefas: 1) Crie uma empresa fictícia 2) Dê nome a ela 3) Descreva um pouco sobre a empresa, abordando tipos de serviço, meios como vende seus serviços e público alvo interessado em consumir esse serviço. 4) Descreva de forma bem simples um exemplo de persona para essa ação que faremos. 5) Escolha um representante para o grupo e entregue tudo num arquivo Word, com o nome de todos os integrantes do grupo, via Blackboard.
5.3. Pesquisa
5.3.1. Formularios Google
5.4. Persona
5.4.1. Canvas Buyer Persona
5.4.2. O Fantástico Gerador de Personas de Marketing: Crie buyer personas e compartilhe com os colegas!
5.4.3. Criar um persona no corel ou outro software mais detalhado
5.5. Ferramentas
5.5.1. Trello
5.5.2. Lucidchart
5.5.3. Mindmeister
5.6. Brand Persona
5.6.1. Trello
5.7. Redes Sociais
6. Trabalho
6.1. Landing page promocional
6.1.1. Ficha de inscrição
6.2. Email Marketing
6.3. Blog
6.4. Redes Sociais
6.4.1. Facebook
6.4.1.1. Capa e Avatar
6.4.1.2. Posts
6.4.1.3. Gifs
6.5. Novo
6.5.1. Design de Interface Mobile Elaboramos um conteúdo programático focado na praticidade do aprendizado, pois transformamos a sala de aula em um laboratório experimental com exercícios práticos e de fácil compreensão. As aulas foram elaboradas para que gradativamente a teoria seja assimilada através da prática. Conteúdo Programático CAPÍTULO 1 - INTRODUÇÃO AO TREINAMENTO - Design e Designer - Quem é quem? - Quais são as atividades e o perfil de um Designer - Design mobile através dos tempos - Ferramentas, mercado e o dia-a-dia do designer CAPÍTULO 2 - FLUXO DE UM PROJETO - Aplicativo Pizza Digital: Apresentação, explicação e verificação dos erros no fluxo do projeto CAPÍTULO 3 - CONCEITOS E APLICAÇÕES PARA DESIGN DE INTERFACE MOBILE - Skeuomorphic - Metro design (Windows) - Material Design (Android) - Flat designUx e UI design o que são? CAPÍTULO 4 - DESENVOLENDO PROTÓTIPOS - Desenvolvendo um protótipo no papel - Validando o protótipo no papel do outro grupo CAPÍTULO 5 - ARSENAL DE FERRAMENTAS PARA INTERFACE MOBILE - Photoshop - Illustrator - Sketch CAPÍTULO 6 - REFERÊNCIAS - Referências e Modelos - Definir cores e tipos - Desenvolvimento do layout com Sketch CAPÍTULO 7 - PRICIPAIS GUIDELINES Guides: Apple, Android & Windows Continuação do desenvolvimento do layout com Sketch CAPÍTULO 8 - TÉCNICAS E DICAS PROFISSIONAIS - Transições, animações e coisa para explodir a cabeça - Continuação do desenvolvimento do layout com Sketch CAPÍTULO 9 - "PERCHÉ NON PARLI?" - Como desenvolver protótipos funcionais com Marvel CAPÍTULO 10 - XCODE, IOS / SWIFT - PRIMEIROS CONTATOS - Abordagem prática do aplicativo desenvolvido no treinamento no Xcode
6.5.2. Ferramentas de Design Elaboramos um conteúdo programático focado na praticidade do aprendizado, pois transformamos a sala de aula em um laboratório experimental com exercícios práticos e de fácil compreensão. As aulas foram elaboradas para que gradativamente a teoria seja assimilada através da prática. Conteúdo Programático Photoshop - Overview - Novo arquivo - Introdução - Texto - Seleção - Layers - Transformação - Ajustes e Filtros - Saída Illustrator - Overview - O que é vetor - Ferramentas - Edição - Compatibilidade - Vetorização - Saída Sketch - Créditos - História - Introdução - Novo Arquivo - Text - Shapes - Imagem - Pages - Artboard - Symbol - Layer Style - Exportação