Projeto Digital Web Design

Começar. É Gratuito
ou inscrever-se com seu endereço de e-mail
Rocket clouds
Projeto Digital Web Design por Mind Map: Projeto Digital Web Design

1. Site corporativo

1.1. Ux

1.1.1. Hotjar

1.1.2. Axure

1.1.3. Invision

1.2. Layout

1.3. Mockup

1.4. Mkt Digital

1.4.1. http://viverdeblog.com/usabilidade-conversao/

2. Introdução

2.1. Apresentação

2.2. História da web

2.3. Animação na web

2.4. Peças de web e análise inicial

3. Abordagens

3.1. UX Design

3.1.1. Princípios

3.1.2. Princípios

3.1.2.1. Questões:

3.1.2.1.1. A culpa é do usuário?

3.1.2.1.2. E se fosse seu produto?

3.1.2.2. 25% usuarios aplicativos nao voltam a segunda vez

3.1.2.3. Abordagem Chat Nubank

3.1.2.4. Exemplo Netflix captação de rate (taxa) filmes, comportamento, cruzamento de informações

3.1.2.5. Exemplo inicializacao da LG https://www.youtube.com/watch?v=SnZnK7qaebU

3.1.2.6. Empatia: colocar no lugar de outra pessoa

3.1.2.7. Tornar intuitivo

3.1.2.8. Feedback: responder às ações

3.1.2.8.1. Qual retorno dou para meus usuarios?

3.1.2.9. Framework: Sprint

3.1.2.9.1. Etapas: 1 Map 2 Sketch 3 Decide 4 Prototype 5 Test

3.1.2.9.2. Prototipo Baixa Fidelidade (wire)

3.1.2.9.3. Prototipo Alta Fidelidade Celular com animaçao

3.1.3. Referência: Don Norman

3.2. Responsividade

3.2.1. Mobile

3.3. Estudo de caso

3.4. Etapas

3.4.1. Time Heterogêneo

3.4.2. Briefing

3.4.3. Estudo Personas

3.4.3.1. Objetivo: Explicitar o aplicativo

3.4.4. Perguntas

3.4.4.1. 1) Por que estamos fazendo este produto?

3.4.4.1.1. m pm pmdpto´td

3.4.4.1.2. junujnuijniun

3.4.4.1.3. oimoimm

3.4.4.2. 2) O que queremos do produto?

3.4.4.3. 3) O que os usuários querem dele?

3.4.4.4. 4) O que faremos?

3.4.4.5. 5) Como funcionalidades e dados se encaixam?

3.4.4.6. 6) Como monetizar?

3.4.5. Pesquisa e Similaridade

3.4.5.1. De posse do briefing, persona e das informações partir para as etapas (cada caso é um caso)

3.4.5.2. É 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.4.5.3. Entrevistas com stakeholders, especialistas, clientes ou usuários

3.4.6. www.mindmeister.com

3.4.7. Mapa Mental

3.4.8. Diagramas

3.4.8.1. Online Diagram Software & Visual Solution | Lucidchart

3.4.9. Sketch Manual

3.4.10. Canvas

3.4.11. Design

3.4.11.1. Paleta de Cores

3.4.11.1.1. http://colorsupplyyy.com/app/

3.4.11.1.2. http://www.colourlovers.com/

3.4.11.1.3. https://color.adobe.com/pt/create/color-wheel/

3.4.11.2. Banco de Imagens

3.4.11.2.1. https://www.pexels.com/

3.4.11.2.2. https://pixabay.com/

3.4.11.3. Banco de Vetores

3.4.11.3.1. http://br.freepik.com/

3.4.11.4. - Skeuomorphic - Metro design (Windows) - Material Design (Android) - Flat designUx e UI design o que são?

3.4.11.4.1. Design Flat vs Skeumorfismo sob uma perspectiva analítica

3.4.11.5. Interface

3.4.11.5.1. Skeumorphic

3.4.11.5.2. Metro Design (Windows)

3.4.11.5.3. Material Design (Android)

3.4.11.5.4. Flat Design

3.4.11.6. UI Design - User Interface Design - Chief of Design

3.4.12. Hotjar

4. Equipe Criativa

4.1. Definição

4.1.1. 3 pessoas

5. Trabalho

5.1. Landing page promocional

5.1.1. Ficha de inscrição

5.2. Email Marketing

5.3. Blog

5.4. Redes Sociais

5.4.1. Facebook

5.4.1.1. Capa e Avatar

5.4.1.2. Posts

5.4.1.3. Gifs

5.5. Novo

5.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

5.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

6. Apresentação

6.1. Projeto desenvolvido

7. Outros

7.1. Proposto

7.1.1. Capa

7.1.2. Sumário

7.1.3. Apresentação da Equipe

7.1.4. Pesquisa

7.1.4.1. Similares

7.1.4.2. Análise

7.1.5. Rough Inicial

7.1.6. Design Thinking

7.1.7. Wireframe final

7.1.8. Layout

7.2. Realizado

7.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

8. Outros II

8.1. Trabalho em 07/03/2017

8.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

8.2. Trabalhos 30/05

8.2.1. Redes Sociais

8.2.2. Protótipo

8.2.2.1. Wix

8.2.2.2. Invision

8.2.3. Apresentação

9. AF

9.1. Novo trabalho

9.2. Nova apresentação

10. TESTE TURMA DESIGN

10.1. App Como fritar ovo

10.1.1. Ideias

10.1.1.1. Legais

10.1.1.2. Descartadas

10.1.2. Briefing

10.1.3. Persona

10.1.4. Similares

10.1.4.1. UOL - O melhor conteúdo

10.1.5. Equipe

10.1.5.1. Fulano

10.1.5.2. Beltrano

11. PID

11.1. Marta e Maristela

11.1.1. TCC xxx

11.1.1.1. Redes Sociais

11.1.1.1.1. UOL - O melhor conteúdo

11.2. Simara

11.2.1. CAMISETAS 4 POR R$ 169* *Na compra de 4 itens, aplique o cupom de desconto na página de finalização da campanha para obter o valor final de R$ 169,00. Válido apenas em produtos selecionados para esta campanha, por tempo limitado e/ou enquanto durar o estoque. Frete não incluso no desconto.

11.2.2. Design App

11.3. Lucas

12. Giovanni

12.1. Design

12.1.1. Paleta de Cores

12.1.1.1. http://colorsupplyyy.com/app/

12.1.1.2. http://www.colourlovers.com/

12.1.1.3. https://color.adobe.com/pt/create/color-wheel/

12.1.2. Banco de Imagens

12.1.2.1. https://www.pexels.com/

12.1.2.2. https://pixabay.com/

12.1.3. Banco de Vetores

12.1.3.1. http://br.freepik.com/

12.1.4. - Skeuomorphic - Metro design (Windows) - Material Design (Android) - Flat designUx e UI design o que são?

12.1.4.1. Design Flat vs Skeumorfismo sob uma perspectiva analítica

12.1.5. Interface

12.1.5.1. Skeumorphic

12.1.5.2. Metro Design (Windows)

12.1.5.2.1. 15 Flat Metro Design Examples

12.1.5.2.2. Metro UI – Wikipédia, a enciclopédia livre

12.1.5.3. Material Design (Android)

12.1.5.3.1. Material Design – Wikipédia, a enciclopédia livre

12.1.5.3.2. https://lockerdome.com/7408605917885761/9211274190045204

12.1.5.4. Flat Design

12.1.5.4.1. A Nova Tendência do Flat Design. O que? Por que? - Des1gn ON

12.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.

12.1.6. UI Design - User Interface Design - Chief of Design

12.2. Exact Sales

12.2.1. Desafio Técnico - UX Designer

12.2.1.1. Problema

12.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:

12.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.

12.2.1.2. Histórias

12.2.1.3. Público Alvo

12.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

12.2.1.3.2. Homens e Mulheres, entre 25 e 45 anos, das áreas de Negócios, Engenharia da Computação e Design

12.2.1.4. Entregáveis

12.2.1.5. Estrategia

12.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.

12.3. Ecoboot

12.3.1. Objetivo

12.3.1.1. Tornar-se Mercado Líder

12.3.1.2. Vender onde houver Market Place

12.3.1.3. Desenvolver o melhor produto

12.3.2. Pesquisa

12.3.3. Estratégias

12.3.3.1. Fortalecer Unidade Visual da Marca através de diversas aplicações

12.3.3.1.1. Briefing

12.3.3.1.2. Manual de Identidade

12.3.3.1.3. Wallpapers

12.3.3.2. Criar ícones (macros) de detalhes dos produtos

12.3.3.3. Vender Benefícios

12.3.3.4. Buyer Persona

12.3.3.5. Mensuração

12.3.3.6. Divulgar Vale Presente

12.3.3.7. Fortalecer Reputação nas Mídias Sociais

12.3.3.8. Cercar as reclamações no SAC e no Reclame Aqui

12.3.4. Redes Sociais

12.3.4.1. Facebook

12.3.4.1.1. Prós

12.3.4.1.2. Contras

12.3.4.1.3. Oport. Melhoria

12.3.4.2. Instagram

12.3.4.2.1. Trabalhar fotos

12.3.4.3. Youtube

12.3.4.3.1. Unboxing Eletroporti: Bota Motociclista Impermeável Cano Longo Ecoboot

12.3.4.3.2. Criar Unboxing Ecoboot

12.3.4.3.3. Criar Review Ecoboot

12.3.4.4. Twitter

12.3.4.4.1. Conseguir seguidores

12.3.4.5. MLABS

12.3.4.5.1. Gestão de Redes Sociais

12.3.5. Mercado Livre

12.3.5.1. Atualizar as informações dos Produtos

12.3.5.1.1. Código Universal

12.3.5.1.2. SEO e Titulos

12.3.5.1.3. Fotografias

12.3.5.2. Tornar-se MercadoLíder Platinum

12.3.5.3. Obter template específica do site

12.3.6. Rakuten

12.3.6.1. Atualizar a loja

12.3.6.1.1. Produtos

12.3.6.1.2. Banners

12.3.6.1.3. Benchmarking Altenburgh

12.3.7. Concorrentes

12.3.7.1. Macboot

12.3.7.2. Mercado Livre

12.3.7.2.1. Azimute

12.3.7.3. MD Fiel

12.3.7.4. Rafarillo

12.3.7.5. Sandro Moscoloni

12.3.8. Softwares

12.3.8.1. Creative Cloud

12.3.8.2. Mindmeister

12.3.8.2.1. Criar pelo email mkt ecoboot

12.3.8.3. Gestão de Redes Sociais

12.3.8.3.1. Mlabs 155,00 Anual

12.3.9. Equipamentos

12.3.9.1. Nikon D5300

12.3.9.1.1. Fototec Fotografias Rua Libero badaró, 1584 (16) 3724-3607

12.3.9.2. Tripé Universal 1,70

12.3.9.2.1. Fototec Fotografias Rua Libero badaró, 1584 (16) 3724-3607

12.3.9.3. Estúdio Portatil Pop Up 60x60

12.3.9.3.1. Mercado Livre

12.3.10. Mkt Relacionamento

12.3.10.1. Datas Estratégicas

12.3.10.1.1. Dia do Cliente 15 de Setembro

12.3.10.1.2. Volta às Aulas

12.3.10.1.3. Black Friday

12.3.10.1.4. Dia dos Namorados 12 de Junho

12.3.10.1.5. Dia Internacional da Mulher 8 de Março

12.3.10.1.6. Dia das Mães 2º Domingo de Maio

12.3.10.1.7. Dia dos Pais 2º Domingo de Agosto

12.3.10.1.8. Sazonais Estações do Ano

12.3.10.1.9. Dia das Crianças 12 de Outubro

12.3.10.1.10. Natal 25 de Dezembro

12.3.10.2. Email Mkt

12.3.10.2.1. Brinde: Cupom de Desconto

12.3.10.2.2. Pop up de saída

12.3.10.3. Por que comprar conosco?

12.3.10.3.1. Analisar concorrentes

12.3.10.3.2. Tenho que ser a LOJA

12.3.10.3.3. Trabalhar o expediente

12.3.11. Market Place

12.3.11.1. Netshoes

12.3.11.2. Dafiti

12.3.11.3. Walmart

12.3.11.4. B2W

12.3.11.5. Objetivo: Estar em todas as plataformas

12.3.12. História

12.3.12.1. Fundada em 20xx

12.4. Aula de quinta

12.4.1. UOL - O melhor conteúdo

12.5. Aula de sexta

12.6. Abordagens

12.6.1. UX Design

12.6.1.1. Princípios

12.6.1.1.1. Questões:

12.6.1.1.2. 25% usuarios aplicativos nao voltam a segunda vez

12.6.1.1.3. Abordagem Chat Nubank

12.6.1.1.4. Exemplo Netflix captação de rate (taxa) filmes, comportamento, cruzamento de informações

12.6.1.1.5. Exemplo inicializacao da LG https://www.youtube.com/watch?v=SnZnK7qaebU

12.6.1.1.6. Empatia: colocar no lugar de outra pessoa

12.6.1.1.7. Tornar intuitivo

12.6.1.1.8. Feedback: responder às ações

12.6.1.1.9. Framework: Sprint

12.6.1.2. Referência: Don Norman

12.6.2. Etapas

12.6.2.1. Time Heterogêneo

12.6.2.1.1. 3 pessoas

12.6.2.2. Briefing

12.6.2.3. Estudo Personas

12.6.2.4. Perguntas

12.6.2.4.1. Objetivo: Explicitar o aplicativo

12.6.2.4.2. 1) Por que estamos fazendo este produto?

12.6.2.4.3. 2) O que queremos do produto?

12.6.2.4.4. 3) O que os usuários querem dele?

12.6.2.4.5. 4) O que faremos?

12.6.2.4.6. 5) Como funcionalidades e dados se encaixam?

12.6.2.4.7. 6) Como monetizar?

12.6.2.5. Pesquisa e Similaridade

12.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.

12.6.2.5.2. De posse do briefing, persona e das informações partir para as etapas (cada caso é um caso)

12.6.2.5.3. Entrevistas com stakeholders, especialistas, clientes ou usuários

12.6.2.6. Mapa Mental

12.6.2.6.1. www.mindmeister.com

12.6.2.7. Diagramas

12.6.2.7.1. Online Diagram Software & Visual Solution | Lucidchart

12.6.2.8. Sketch Manual

12.6.2.9. Canvas

12.6.2.10. Hotjar