Curso básico de web design: criando páginas de marketing que geram resultados

1. Introdução: Meu nome é Dennis Field. Faço parte do Evangelista aqui na InVision, bem como de designer. Nesta aula, vou ensinar-lhe como criar uma página inicial de marketing eficaz para o seu produto. Como designer, você tem que crescer naturalmente de projetar para bonito para projetar para conversões. E através da mudança da indústria, bem como da demanda do cliente, eu me tornei um web designer. Todas essas experiências me levaram ao InVision. Ajudamos designers de todo o mundo e empresas de todo o mundo a aproveitar todo o seu potencial criativo usando recursos como prototipagem, comentários, gerenciamento de ativos, bem como compartilhamento ao vivo. As coisas que eu posso ensinar nesta aula são tudo o que eu aprendi quando eu fiz transição de projetar a página para realmente projetar com a intenção de realmente ajudar meus clientes e empresas a mover a agulha mais. Haverá algo para todos em seu curso. Se você está apenas começando ou se você está projetando por um número de anos. Você pode estar lutando com o layout da página, como realmente obter os resultados desejados. Então, eu acho que essas habilidades fundamentais realmente trarão muito valor para você. 2. Atribuição de projeto: Você foi encarregado de projetar uma página inicial do Mac aplicativo de mídia social constantemente social. Seu objetivo é criar uma nova página inicial que aumente as inscrições. Escolho essa tarefa, porque acho que é importante que você entenda os fundamentos fundamentais que são necessários para oferecer mais valor aos seus clientes na organização à medida que você cresce como designer. Você aprenderá princípios como design, narração e layout são tudo o que você deve considerar e ter em mente, pois você não apenas projetar este projeto, mas também para projetos no recurso. Para o bem deste projeto, as conversões são nossas inscrições, mas a convergência pode ser qualquer coisa que se relacione com o seu projeto. Você também aprenderá como criar um protótipo no InVision como gerenciar o processo de feedback. Para este projeto, você precisará do Photoshop ou do Sketch à sua escolha, bem como de uma conta gratuita do InVision que você pode se inscrever em invisionapp.com. Você pode esperar que este projeto leve de uma hora a uma hora e meia, dependendo da complexidade do seu design. Ao concluir seu projeto, certifique-se de compartilhar seu link de prototipagem do InVision e uma captura de tela do projeto dentro da galeria de projetos do skillshare. Lembre-se, a melhor maneira de aprender é fazendo. À medida que suas metas mudam, medida que seu público muda, você sempre precisa revisitar esse design para otimizá-lo. Vamos começar. 3. Objetivos, história, prova social e conversões: Sempre que você está projetando algo, você precisa ter um conjunto claro de objetivos. Sem isso, você está apenas projetando. Então, a primeira coisa que precisamos fazer é definir nossos objetivos. Para Simply Social, vamos ter três conjuntos de objetivos. O primeiro objetivo é, globalmente, precisamos colocar mais ênfase nas configurações. Número dois, precisamos mostrar visualmente o aplicativo. Número três, preciso fazer um trabalho melhor em explicar a história. Para você, você pode ter um conjunto diferente de metas, mas é importante definir essas metas antes de realmente começar a entrar em seu design. Então, uma vez que temos nossos objetivos estabelecidos, começamos a falar sobre história. História é realmente, muito importante para qualquer homepage ou qualquer tipo de design em geral. Mas quando você pensa em grandes pinturas, quando você pensa em grandes desenhos, há sempre algum tipo de história que está acontecendo lá. A história pode vir na forma de cópia. Pode vir em forma de pistas visuais. Tudo o que você coloca neste design ou na sua página inicial tem que se relacionar com a história que você está tentando contar. É realmente importante pensar na história em uma página inicial de cima para baixo, começando com quem estamos falando, o que queremos que eles pensem e qual é o objetivo pretendido? Tudo isto desce para o claro call-to-action e o payoff essencialmente. Então, quando começarmos a esboçar, falaremos um pouco mais sobre isso. Vamos falar um pouco sobre a cópia. Vamos falar sobre como as imagens que vamos usar. Na verdade, ele desempenha um papel fundamental nesta história deste projeto. A outra parte para isso que queremos falar é obviamente medir e conversões. Há uma tonelada de que podemos falar com conversão que provavelmente é mais adequada para casa, não para uma classe, é claro. Mas por aqui eu só quero que você saiba que conversão deve ser medida com uma série de fatores. Você pode usar excelentes ferramentas, como o Google Analytics, como métricas, todas as formas de medi-las. Mas tenha em mente que há uma série de fatores que afetarão sua conversão. Se você está fazendo muita publicidade, isso vai canalizar muito tráfego, alguns qualificados, alguns não qualificados para sua página inicial. Isso vai distorcer seu número de conversão um pouco. Quando se trata de conversão, gosto de pensar no que acontece depois da conversão. Então, digamos que você obtenha um grande afluxo de absorção em seus números de conversão, mais pessoas estão se inscrevendo no seu aplicativo. Mas então você tem uma outra coisa. Você tem que se preocupar com são aqueles que estão no aplicativo agora realmente qualificar os usuários do aplicativo? Então, você tem um outro conjunto de otimização que tem que acontecer lá. Então, não há grande número de conversão. Você deve sempre estar filmando para um número alto, mas também não há uma conversão ruim porque há tantas coisas que você tem que alavancar e dependendo de onde você está com o seu produto, seus números vão ser um Um pouco diferente. Mas tenha em mente, há uma série de fatores que vão jogar para isso. Então, na próxima parte do projeto vamos começar a esboçar essas idéias e eu vou entrar em esses princípios de história e layout um pouco mais. Mas vamos passar para esboçar algumas idéias, falar sobre essas idéias e ver o que queremos ir com e o que idealmente queremos escolher para então passar para a alta fidelidade. 4. Conceituação e design: Está bem. Então, vamos falar sobre alguns desses conceitos. Vamos entrar em algumas ideias que queremos fazer com o objetivo de aumentar as inscrições para o Simply Social. Então, há uma série de maneiras que podemos fazer e há uma série de fatores que vamos jogar. Para mim, eu geralmente gosto de começar com alguns soltos, eu nem sei se eu quero chamá-los wireframes, mas apenas esboços soltos gerais que começam a colocar alguma ênfase em áreas-chave do projeto antes de eu começar a me mover para o que eu quero fazer no computador. Então, vamos primeiro começar com algumas coisas importantes a ter em mente em relação ao padrão do usuário. Então, obviamente, você tem tradicionalmente uma navegação que fica no topo da página. Em caso de dúvida, é melhor deixá-lo lá. Há coisas que mudaram ao longo do tempo, sendo uma delas o logotipo. A beleza de como evoluímos é que nos afastamos lentamente de precisarmos de um vínculo real. Agora temos o ótimo padrão de usuário de ser capaz de clicar em seu logotipo para levá-lo de volta para casa. Então, todas as coisas que você deseja, mais ou menos, certifique-se de que você tem em seu design em qualquer momento. A outra coisa a pensar é o rodapé e o que vai lá. Rodapés geralmente são usados para algumas das coisas que você realmente não precisa ter distraindo sua história principal. Essas são coisas como links de suporte e coisas que realmente não evoluem fortemente em torno da história do seu design. Então, vamos falar sobre, o padrão de usuário de rolar sua página. É realmente ótimo como aplicativos como Facebook, Twitter permitiram que todos abraçassem a idéia de rolagem. Mobile obviamente jogou muito nisso também. Então, agora não temos que nos preocupar muito com uma dobra. É discutível, mas acredito que quanto mais telas tivermos que contar nossa história, mais devemos usar dela. Então, sabemos que as pessoas vão ficar bem com a rolagem da página, também sabemos que há muitas outras dicas para dispositivos móveis que as pessoas aprenderam. O ícone do hambúrguer é uma coisa para se pensar. Quero dizer, isso é algo que você pode usar em seu design porque agora as pessoas entendem, se eu clicar nisso, eu vou ver mais opções. Então, quando se trata de focar em sua história, mantenha essas coisas em mente. Use-os onde puder, mas nunca tentou necessariamente quebrar esses padrões de usuário porque é quando você perde seu público ou seu visitante. Então, neste design, vamos ter nossa navegação, nosso rodapé. Obviamente teremos um herói, que tende a ser outro padrão de usuário que as pessoas querem ver. E essa é a sua porta da frente, a capa do seu livro. Essa é uma grande história de alto nível que começa lá. Obviamente você tem seus links de navegação. E então tudo aqui e como tudo isso começa a se unir é um pouco mais aberto para onde você pode colocar nessas áreas. Então, para começar, talvez com o nosso objetivo de explicar o aplicativo um pouco melhor. Podemos ter uma idéia de que queremos realmente jogar acima a idéia de que com Simply Social, é um aplicativo que permite conectar todas as suas contas de mídia social em um só lugar e você vai ter toda essa grande atividade de mídia social. Vamos realmente querer mostrar isso visualmente. Então, podemos ter versões gráficas de talvez contas de mídia social sentadas lá atrás. Podemos ter um obviamente algum tipo de manchete que vai viver aqui. Você vai querer, obviamente, nesta fase começar a introduzir a idéia de um apelo à ação. Você pode ter alguém que vem a este site, eles já estão vendidos nele. Eles já sabem do que se trata e estão prontos para agir imediatamente. Então, o que você pode fazer é, obviamente, e você vê isso em muitos sites, você quer começar a adicionar seu, nós vamos chamá-lo de CTA. Isso começa a abrir essa discussão por aí, ok? Então agora temos um número de coisas trabalhando aqui. Temos uma compreensão clara do que o produto vai ser. Talvez, neste caso, tenhamos uma ótima cópia que queremos uma manchete simples e concisa. E a coisa sobre Simply Social é o que fazemos, é tornar as mídias sociais ou redes sociais simples. Talvez seja uma ideia de manchete. Muito direto. Não sei, vamos ter que testar isso, podemos usar aplicativos legais de teste de usuários para fazer isso. Mas vamos começar com algo para que algumas ideias fluam. A próxima coisa que você quer fazer é começar a considerar o que acontece na página, certo? Temos essa ideia de como nossos olhos se movem. Muitas vezes, com páginas iniciais típicas, você vai cair no movimento dos olhos do padrão Z, onde alguém vai começar pelo logotipo, mudar e começar a descer a página. Então, queremos alavancar isso em nosso projeto. Queremos ter certeza de que cada um desses movimentos você está dando em algo importante, algo que realmente vai enfatizar sua história. Se você estiver fazendo algo que é provavelmente mais editorial ou focado em história, talvez seja um layout de blog, você pode começar a entrar em um layout F, onde seu padrão F, onde a maioria das pessoas escaneia a página e se move através de um F como eles estão lendo. Mas para a maioria dos designs visuais da página inicial, você está olhando para uma saída Z aqui. Então, é aí que você vai bater nesta página, atravessar, cruzar a navegação, mover para baixo, e depois sair. Então, tenha esses em mente ao começar a pensar nesse layout em termos de um ponto de vista de digitalização. Está bem. Então, eu tenho esse pensamento áspero em torno de um herói. A outra parte que queremos fazer é mostrar visualmente o nosso aplicativo um pouco mais. Então, talvez aqui se isso é um objetivo nosso, talvez comecemos a introduzir algumas capturas de tela, talvez seja bom quando você puder. Novamente, vamos contar a história de que isso é obviamente um aplicativo, a história obviamente vive dentro da web. Se é um design móvel, este é um ótimo uso de onde você começa a ver desenhos photoshop em dispositivos porque ajuda com essa história. Quando você está digitalizando a página, você imediatamente sabe o que vai acontecer aqui, você sabe o que é isso. Você verá isso com páginas de aterrissagem de livros muito. Mesmo que seja um e-book, é importante que você o coloque no contexto. Então, se é um e-book e está vivendo em um livro, há um layout de livro, ele dá ao público ou ao visitante uma compreensão clara e rápida do que é isso que eles vão baixar. Então, no nosso caso, o que isso é realmente vai ser algum tipo de aplicativo que vive dentro da web. Então, talvez esta seja uma boa oportunidade para se envolver com alguma interatividade. Talvez uma boa maneira de mostrar que existem nossas telas diferentes, usar alguns bons elementos de navegação convencionais que circulam o design. Talvez para a história que você também quer começar a falar um pouco sobre três ou quatro diferentes em elementos-chave que compõem Simply Social. Então, talvez queiras falar sobre isso. Você pode querer trazer isso para esta página um pouco. Isso não é algo em que estamos dizendo que somos um site de mídia social, crie sua conta e comece a postar aqui. Estamos dizendo que nos conectamos com suas contas de mídia social. Então, é realmente claro de frente que, o objetivo aqui é pegar sua rede de mídia social, trazê-lo para este aplicativo, e vamos torná-lo simples para você, estamos unificando as coisas. Você também pode querer falar um pouco sobre como ele é seguro. Eu acho que muitas vezes, há uma preocupação sobre o que você vai fazer com essas informações se eu conectar minhas contas? Bem. Simplesmente social, não é apenas uma ótima maneira de simplesmente gerenciar suas mídias sociais, é também uma maneira segura de fazê-lo. Então eu acho que uma coisa chave aqui é também dizer que agora você pode realmente postar para essas contas de mídia social também. Então, você está recebendo algumas idéias sobre o que você pode realmente fazer aqui sem sequer começar e se inscrever para uma conta ainda. Como você continuar a mover a página, precisamos ter um elemento descritivo agradável. Pode ser um parágrafo de cópia, mas precisamos ter certeza de que estamos contando uma história simples, sobre o que este produto faz. Então, você tem a porta da frente, ou a capa do livro e você está movendo-os. Então, você pode ter uma cópia descritiva simples real que faz backup da instrução acima. À medida que você continua avançando, você vai entrar em elementos como prova social, é realmente importante incluir provas sociais em seu design e quando você está contando sua história, porque essa é a convincente mecanismo. As pessoas estão mais dispostas a se inscrever ou investir dinheiro em um aplicativo ou qualquer coisa, talvez, quando a confiança foi construída. É aí que realmente obter grandes testemunhos ou logotipos entram em jogo que diz: “Nós atestamos por isso, nós investimos nele, e demos o primeiro salto, achamos que você deveria também. Então, quando você pode alavancá-los e alavancá-los de forma eficaz, e você pode exagerar depoimentos, mas se você tem alguns jogadores realmente chave que você pode obter em seu produto e seu aplicativo, faça-os falar sobre isso, definitivamente certifique-se de que você tem aqueles e não tenha medo de usá-lo. Então, vamos querer ter certeza de que temos o aspecto da prova social aqui. O que isso está fazendo agora é, você começa obviamente com o alto nível rápido, mergulhando em alguns recursos se você quiser perguntar “Ok, bem, o que isso significa para mim?” Você começa a entrar bem o que você pode fazer é compor, conectar-se a uma conta segura, e então obviamente hey, essas pessoas ótimas estão usando e eu obviamente deveria estar. Então é isso que isso está fazendo para você e em termos de sua história. Como você está continuando a passar por isso, você pode olhar para esta história e você pode dizer bem, talvez nós precisamos trazer isso para cima um pouco. Talvez faça sentido dizer ok, aqui está o que fazemos, aqui está o porquê de estarmos fazendo isso, e então aqui estão os recursos se você quiser obter um pouco mais para ver a interface, e então você entra nos aspectos de prova social. Então, quando você chegar ao final desta página, adicionar meus dados de rodapé aqui, você deve ter realmente bons livros de ação capturados de algum tipo. Pode ser tão simples inscrição, para ser uma forma, há um monte de coisas que podemos falar quando se trata do mecanismo de conversão real aqui, e há muitos estudos em torno dele, é apenas um botão que abre em um modelo. É quando você toma sua primeira ação, e falaremos um pouco mais sobre isso quando entrarmos na maior fidelidade, aqui mas vamos começar a expor isso. Então, esta pode ser uma opção potencial a considerar. Eu provavelmente gostaria de refinar isso um pouco mais, então vamos ver como podemos fazer isso um pouco melhor. Você pode começar aqui e novamente, você vai continuar com o seu conjunto base de padrões de usuário aqui vamos apenas dizer o suficiente, nós sabemos o que isso vai fazer e nosso rodapé aqui. Achamos que isso está funcionando, mas com nossos objetivos em mente, acho que podemos fazer um trabalho um pouco melhor em talvez misturar esses dois mundos um pouco melhor. Eu acho que você poderia considerar fazer se começarmos a pensar sobre o padrão Z aqui. Talvez seja importante trazer uma foto de dispositivo aqui. No meu esboço, geralmente mantenho-o muito solto porque é o jeito que eu gosto de esboçar. Então temos talvez a nossa grande manchete aqui, e depois o nosso apelo à acção. O que isso vai fazer, talvez navegação, é quando você se move pela página que você gosta.” Ok, isso é simplesmente social”. Isso é um pouco sobre o que você quer que eu faça, é confiante, nós temos algumas informações, então eu vou cavar um pouco mais fundo. Mas imediatamente depois disso, eu vou filmar por aqui, e eu vou ver uau, tudo bem. Isto é o que o aplicativo é. Dependendo do que eu coloquei aqui, se é uma foto do fluxo de atividades, se é uma foto do perfil de uma pessoa, isso vai contar uma grande história. Ele vai realmente dizer o que é isso sem sequer acontecer de lê-lo. Então, é muito mais eficaz do ponto de vista da digitalização. Então eu posso refinar isso e agora esta seria uma boa oportunidade para talvez acompanhar colocando minha cópia descritiva e manchete, talvez aqui. Então eu posso ter uma subcabeça que começa a fazer isso com um pequeno parágrafo. Talvez então eu entrei em minhas três características distintas sobre o produto. É aí que você entra que você compor conectado é uma conta segura et cetera. Você pode começar a ver novamente se vamos para o aspecto de escalabilidade para eles. Como estamos em um mundo muito acelerado, não gostamos de ler muito rápido que você está começando com o sucesso de alto nível do que simplesmente é social. Então, uma vez que você refina isso, você começa a ver que você está condensando essa história na página um pouco. Você está criando um monte de pistas visuais aqui também, com a sobreposição que poderia estar acontecendo aqui com o dispositivo, então você começa a entrar em talvez uma maneira diferente de exibir os detalhes mais finos do simplesmente social. Eles podem neste momento estar fazendo a pergunta, há mais que eu preciso saber sobre isso que eu não sei ainda antes de eu me comprometer a dar-lhe meu endereço de e-mail, e me comprometer a aderir simplesmente social? Isto é quando você pode começar a usar este espaço, e quando eu digo preenchimento, mas isso é quando você começa a tipo de entrar em alguns dos detalhes mais finos do seu aplicativo. Então, para simplesmente social talvez começamos a, talvez ter uma maneira legal de exibir as diferentes capturas de tela do aplicativo. Eu não sei. Talvez eles atravessem a página como uma grade. Ou talvez eles estejam todos empilhados aqui e nós temos alguns elementos interativos aqui que lhes permitem mergulhar mais fundo e quase fazer um passeio rápido antes de se comprometerem. Talvez seja isso que vive aqui. O que isso está fazendo é que agora pegamos partes disso, puxamos para aqui, agora estamos recebendo esse passo opcional refinado para eles para aqueles que querem mergulhar um pouco mais fundo no que simplesmente social talvez. Se tiverem mais perguntas. Então, uma vez que você vai e de, uma vez que você rever isso, pano de fundo para sua história, estamos começando a atingir nossos objetivos, nós obviamente estamos tornando o aplicativo muito mais interface, e alguns aplicativos não precisam se preocupar sobre isso como Facebook, LinkedIn, Twitter, se você olhar para cima suas páginas iniciais, nós sabemos o suficiente sobre eles que nós realmente não precisamos que a história é, na verdade, uma vez que você entrar no aplicativo. Então, eles têm grande luxo de ser capaz de criar homepages que são super eficientes, e se você olhar para eles, é simplesmente criar conta, como se não houvesse muito acontecendo lá além de uma simples declaração, e então eles só quero que você mergulhe no aplicativo, porque é aí que ele começa a realmente ganhar vida. Mas simplesmente social ainda não está lá. A maioria dos aplicativos não são. Leva anos para chegar a esse nível de confiança e compreensão de que o mundo está contando sua história para eles. Então, neste caso, precisamos de muitos desses elementos para garantir que todos entendam o que é simplesmente social. Então você traz o seu, é sempre bom para novamente, se você passo pessoa ainda tem perguntas, você provavelmente vai dizer “Ei, não se preocupe porque essas grandes pessoas realmente usando o nosso e você deve se juntar ao clube” isso é essencialmente o que este elemento de prova social faz. Podemos ainda mais com, talvez alguns ícones de mídia social e quantos seguidores já tivemos e interesses estamos tendo fora de simplesmente social em torno de nossa comunidade? Quão grande é a nossa comunidade? Temos milhares e milhares de seguidores no Twitter? Nossa página do Facebook é super massiva? Como tudo o que são dicas visuais que ajudam os visitantes do seu site a entender que este é um lugar que eu preciso estar e eu deveria estar investindo. Então, talvez, como sempre, você vai acompanhar isso com aquele pagamento. Então, se você começar a percorrer esse conceito, você pode começar a ver onde eu acho que nossos objetivos estão sendo atingidos um pouco melhor. Nós batemos nas dicas visuais agradáveis do que o aplicativo é, nós fizemos um trabalho muito bom, eu acho que eu expliquei isso. Em seguida, também fazer backup dessa história com provas, e, em seguida, claramente levá-los para baixo para a página com um bom apelo à ação, e então você entra no rodapé. Então essas são algumas idéias soltas, eu provavelmente vou agora apenas enquadrar isso um pouco mais, trabalhar através delas como um próximo passo, e então vamos saltar para o computador, e vamos expandir sobre esses princípios e nós vamos falar sobre como a fotografia, desempenha um papel nesta história, dominância e cor, todos os outros elementos que vão começar a trazer talvez este conceito para a vida um pouco mais. 5. Criando o design [Parte 1]: Agora que você tem nossas idéias soltas, vamos começar a mover isso para um design mais de alta fidelidade. Eu acho que fora dos dois, eu sinto que o segundo conceito começa a funcionar um pouco melhor para nossos objetivos em termos de um ponto de vista hierárquico à medida que você escaneia rapidamente como certas coisas já estão surgindo, então vamos seguir nessa direção. Então, sinta-se livre para usar o Sketch ou o Photoshop, é sua escolha para as necessidades deste. Vou usar o Photoshop porque a visão tem algumas integrações realmente legais aqui que podemos usar mais tarde para ajudar a ajustar isso para o pequeno empurrão final. Mas, por enquanto, vamos começar com um documento. Eu já tenho um criado aqui por questão de tempo, mas se você quiser algumas dimensões para trabalhar com, para isso eu tenho esta configuração em 1500 pixels por 4355 pixels. É um lugar para começar. Mais uma vez, temos estes grandes monitores agora. Ele alavancou o tamanho das telas para realmente contar nossa história um pouco melhor. Eu tenho alguns guias que eu já marquei aqui, mas isso é novamente, nós vamos apenas colocar essas idéias aqui na tela e então nós podemos finesse a partir daí. Então, dependendo do seu nível de habilidade, não vamos entrar nas melhores coisas sobre o Photoshop, mas há muitos outros ótimos recursos aqui no Skillshare, tenho certeza que vou ajudá-lo com isso. Então vamos começar primeiro puxando alguns elementos com os quais vamos trabalhar. Temos este design, obviamente precisamos de um logotipo. Eu tenho uma diretriz de marca que eu vou estar puxando algumas coisas que nós já temos são simplesmente sociais. Estes são todos salvos na pasta de ativos do currículo do projeto, então sinta-se livre para pegar isso ou, como eu disse, usar o seu próprio. Então vamos usar esta oportunidade para também falar um pouco sobre algumas imagens. Sabemos que com simplesmente social, estamos falando com um jovem profissional. Alguém que é obviamente muito ativo em vários sites de mídia social. Talvez essa pessoa use LinkedIn, Facebook, Twitter, Instagram. Seu mundo é muito consumido em redes sociais. É um lugar para começar. Eu encontrei esta imagem realmente grande aqui que eu acho que nós podemos usar para começar a contar nossa história um pouco. Então, para trazer isso para dentro, vamos dividir isso para um pouco mais sobre por que eu acho que esta imagem vai funcionar muito bem para nós. Vou virar isso e começar a falar um pouco mais sobre isso. Vou cortar isso bem rápido com uma rápida olhada na massa. Quero que seja por aí. É sobre onde posso encontrar que 800 pixels é um bom ponto para ter esse corte. Então esta imagem que funciona para mim, é que queremos contar uma história que simplesmente social vai simplificar a sua vida nas redes sociais. Há algo muito legal sobre este cara com vista para algo tão ocupado como uma cidade, mas neste espaço tranquilo de sentar do lago aqui. É óbvio que ele se encaixa um pouco na nossa demografia. Que o bom benefício que temos aqui, ele está arqueado no nosso que espero ser a nossa imagem de interface. Ele vai naturalmente trazer seu olho para ele. Normalmente, há muitas coisas boas que acontecem quando você começa a usar imagens ou faces que as apontam para o seu código de ação. Você começará a ver uma captação apenas a partir dessa pequena mudança. Naturalmente, como humanos que seguimos, temos que olhar para os rostos e seguir os olhos, mas isso é muito legal quando você começa a criar esse movimento giratório em sua imagem de interface. Obviamente, este é provavelmente um pouco forte de um tratamento aqui. Você pode ver algumas coisas válidas acontecendo. Então, o que nós vamos querer fazer provavelmente é postar algumas outras imagens aqui e então vamos falar sobre como podemos redefinir isso quando se trata do tratamento de nossas imagens. Deixe-me abrir uma pasta de ativos. Já tenho uma imagem do MacBook aqui. Isso já foi cortado com a interface nele. Vocês provavelmente vão fazer isso sozinhos, mas por uma questão de tempo, senti que seria bom já ter isso aí dentro. Então, você pode ver tão bom quanto isso está olhando ainda há um problema. Temos um problema de dominância aqui. Estamos a tentar fazer demasiado. Precisamos mesmo consertar isso. A grande coisa sobre quando você usa fotos realmente de alta qualidade é que você tem um monte de coisas ótimas com que você pode trabalhar. Essa é a chave para criar uma página inicial realmente eficaz é começar com ótimas fotos. Talvez possamos simplesmente mudar essa questão dominante, colocando ele volta um pouco e você vai começar a ver como ele começa a sair da página um pouco aqui. Agora você está começando a ver essa ênfase aqui que está acontecendo em simplesmente social, mas você também tem essa foto de estilo de vida muito legal que obviamente começa a funcionar com um design. Você já está contando essa história quando nem chegamos aos detalhes das coisas. Deixe-me trazer alguns elementos de navegação aqui. Vou arrastar isto do nosso quadro de marca para aqui. Nós vamos ter um pequeno passeio agradável e então em termos de algo para pensar sobre você vai ver que eu tenho este espaço realmente agradável aqui. Em caso de dúvida, o ar para fora do seu design. As coisas podem ficar um pouco apertadas e sempre você está projetando o que você está fazendo é você está confundindo sua história ou você está tentando fazer com que as pessoas tomem muito em tudo de uma vez, então eu realmente gosto de ar no lado do espaço em torno do seu logotipo. Você quer ter esses momentos de pausas em sua história para que as pessoas possam consumir o que você está tentando dizer a elas, subconscientemente ou diretamente. Então, vamos dar um pontapé em alguns elementos de navegação aqui. Mais uma vez, vamos resolver isto. Vamos finesse isso, isso está longe de ser um projeto final, mas vamos partir daí. Talvez tenhamos um link para Support ou temos um Tour Support pode ir no rodapé, mas nós vamos apenas colocá-lo aqui no topo nav e então eu acho que nós vamos ter a capacidade de alguém para entrar, porque nós vamos obviamente ter um grande apelo à ação, que na verdade está se inscrevendo, então talvez não precisemos necessariamente incluir isso aqui neste momento. Tudo bem. Então, lá vamos nós. Então você está começando a ver como esse design está começando a se desenrolar. Vamos puxar o nosso elemento de manchete padronizado aqui. Nossos estilos de manchete, desculpe. Traga isso. Ainda vendo alguns problemas de valor aqui, então vamos tentar ajustar isso um pouco mais onde pudermos. Ok. Tudo bem, e mais uma vez estamos desgastando as coisas. Então vamos trazer o nosso ativo de botão padrão já que já temos isso da nossa página de destino anterior, e muitas vezes você não precisa redesenhar as coisas para recriar a roda, mas nosso design anterior já tinha um definir diretrizes. Então, vamos apenas reutilizar onde pudermos, mas também mais ou menos fazer melhor trabalho enfatizando certas coisas são nossos objetivos. Portanto, nem sempre significa que você precisa redesenhar toda a sua marca para aumentar suas conversões. Então, você está começando a ver como isso está realmente se formando, eu acho, agradável do ponto de vista hierárquico das coisas. Realmente colocá-los na história já que era para voltar ao nosso conceito aqui. Você tem todas essas peças começando a ficar bem juntas. Esta sobreposição vai ser muito agradável, mas nós precisamos realmente puxar este sinal visual para baixo um pouco , mas vamos chamar o herói em um bom lugar e vamos descer a página um pouco. Quando você pode pensar em seções você vai fazer um pouco melhor em termos de colocar as coisas para fora. Naturalmente, sua mente vai se concentrar neles quando você começar a separá-los versus colocar tudo na página de uma vez. Agora, temos essa coisa visual muito legal acontecendo aqui. Temos essa cor que começa a te mover. Ele realmente começa a aparecer aqui, então sabemos que algo importante vai ter que acontecer aqui. Foi aí que começamos e queríamos começar a explicar a subestrutura do que queremos dizer com redes sociais simplificadas, como explicar isso para mim. É o que vamos fazer aqui. Se você voltar para o nosso esboço nós realmente queríamos enfatizar assim como nossos objetivos o que Simply Social é, uma maneira melhor do que nós fizemos no passado. Então, a maneira de fazer isso é que você pode usar cópia, no nosso caso nós vamos ter uma boa manchete aqui e eu acho que nós vamos ter uma boa declaração simples que não é muito, mas ele apenas define o tom para toda esta seção. Então, eu tenho uma cópia, como eu disse, já trabalhada aqui, mas você vai usar sua cópia. Também sinta-se à vontade para classificar sua própria cópia para Simply Social. O que você faria melhor aqui para tornar este design muito mais eficaz em seus pontos de vista. Eu adoraria ver isso. Então, eu vou puxar alguns outros elementos. Agora você está começando a ver onde temos essa enorme vantagem e estamos começando a quebrá-la, e você já pode dizer apenas do ponto de vista visual que vamos começar a dividir isso em uma história mais profunda em torno da Simply Social. Então, vamos continuar esse tema em torno de imagens, em torno dessa idéia de pegar algo tão complexo e caótico como mídia social, e combiná-lo com essa tranquilidade que Simply Social fará. Fizemos isso com essa ótima foto de um cara calmante olhando para algo tão complexo. Mas acho que podemos fazer isso aqui também e vamos usar esse mesmo tema da natureza para fazer isso acontecer. Então, nós temos essa realmente legal, novamente, uma imagem de fundo muito legal. Isso já foi criado, então vou deixar isso direito. Tem realmente bons valores aqui acontecendo. Então, você tem essa chance muito legal e tempestuosa. Vou mostrar-lhe o revés original agora e moderado. Então, nós temos essa descrição muito clara sobre o que é Simply Social, mas queremos mergulhar um pouco mais em profundidade nessas três áreas de foco. Levei algum tempo para refinar isso um pouco. Essas três áreas devem ser realmente os principais diferenciais que o diferenciam da concorrência. Nós vamos realmente jogar acima a idéia de que você pode postar, você pode conectar todas as suas contas, porque obviamente sempre vai haver perguntas sobre quais contas eu posso conectar ao Simply Social. Nós vamos responder isso muito rapidamente e vamos falar sobre como esse benefício do Simply Social e a idéia de um site de rede social simples como este e puxar isso para um lugar vai realmente aumentar seu compromisso com todos com quem você está se engajando regularmente. Então nós vamos começar com como este é configurado de- Nós vamos ter alguns ícones aqui. Os ícones são uma ótima maneira de, novamente, pequena sugestão visual ilustrando o que se trata. É legal como esse design se sente. Há muitas coisas complexas acontecendo, mas ainda assim parece controlado. Isso ocorre porque definimos claramente nossos objetivos. Nós claramente dissemos que nossa coisa dominante aqui é mostrar o aplicativo um pouco melhor e vamos entrar nesses pequenos pedaços, mas não estamos perdendo a ênfase na exibição real da interface e estamos usando o imagens para, mais ou menos, configurar um cenário agradável que tudo isso vive em cima de. Obviamente, seus visitantes vão dizer: “ Eu me pergunto por que eles usaram esta árvore aqui atrás ou este cenário tempestuoso , mas ele toca no fundo ou no subconsciente um pouco.” Eles podem fazer a pergunta, mas você obviamente quer ter uma resposta e nós temos. Tudo bem. Então, eu tenho uma cópia que vou preencher aqui. Vamos dizer Connect e vamos dizer Envolva-se aqui porque esses são os três benefícios aqui que o Simply Social oferece a você. Isso lhe dá a oportunidade de postar, se conectar e se envolver. Não precisamos contar tudo. Nós não precisamos entrar em cada pequeno detalhe, que eu acho que muitas vezes sites de marketing fazem e eu acho que é onde a conversão começa a cair é porque quanto mais informações às vezes você compartilha, o mais perguntas que são levadas até seus visitantes e quanto mais confusos eles ficam. Então, sempre que você pode mais ou menos manter as coisas realmente, realmente focadas, e você pode ver que o tema chave aqui é definir essas metas, aderir a essas metas, e manter as coisas realmente, realmente focadas quando você pode em controlando essa expectativa. Então, aqui você pode começar a ver que temos essa seção trabalhando para nós e eu gosto disso. Podemos trabalhar com nosso redator, estou apertando tudo isso. Mas para certo, temos alguns diferenciais realmente importantes que estamos atingindo. Ele fica de uma maneira muito agradável de colocá-lo para fora, talvez haja uma oportunidade aqui para criar alguns alinhamentos para conectar estes um pouco. Então, à medida que seus olhos se movem por aqui, você pode ver que estas não são três coisas separadas, mas esta é uma unidade. Podemos apertar isso assim que chegarmos à fase final. 6. Criando o design [Parte 2]: Vamos passar para o tipo de como queremos exibir nossos recursos reais. Se voltarmos ao nosso esboço, temos a oportunidade de destacar algumas partes do aplicativo. Recapitulando, temos o herói trabalhando, ele configura nossa história, vamos atravessar aqui, você entra nos detalhes mais finos, é tipo a próxima hierarquia da nossa história, o que é que ervilhas de alto nível ou o segundo nível I adivinhar o que é simplesmente social. Agora, nós queremos tipo de perfurar um pouco mais fundo. Há sempre outras perguntas, bem, como a tela de composição talvez você se pareça ou como é o meu perfil? Se eu for me colocar aqui. Porque o legal do Simply Social é que você também pode se conectar individualmente com algumas pessoas, tipo de criar seu próprio mini perfil aqui junto com suas outras contas de mídia social conectadas entre si. Então, obviamente há uma questão de como eu vou ser visto on-line? Então, estas são todas as coisas que vamos começar a responder nesta seção. Então, vamos começar com nosso tipo de pano de fundo novamente. Nós já temos uma imagem de fundo muito legal. Agora, estamos olhando de novo, outra coisa que a tempestade precisa ser contida. Ainda tenho esse tipo de estar sentado aqui, vamos apenas trazer isso para dentro Para fazer esses efeitos, é meio que é realmente muito bonito. É só uma questão de brincar com opacidades para fazê-los funcionar da maneira que estão trabalhando. Mas você pode ver, há muitas imagens aqui, mas nada está subjugando o que queremos que as pessoas saiam desta página. Então, eu vou puxar esses elementos, eu tenho todos eles tipo de já criados. Vou trazer estes e ver como eles podem funcionar. Talvez nós queiramos focar em um de cada vez aqui, então talvez nós vamos apenas cortar isso fora, começar a ver como as coisas podem se tornar, talvez nós temos uma manchete, em algum lugar naquela manchete poderia sentar do outro lado do topo, que realmente parece um pouco estranho para ser honesto, e você considera a maneira como você digitaliza a página, meio que quebra esse fluxo, então talvez seja melhor tipo de deslocamento como nós tínhamos esboçado inicialmente. Acho que vou desactivar isso. Porque isso realmente faz isso sair da página. Isso realmente cria uma dimensão aqui que é legal. Então, precisamos de alguns controles, certo? Podemos usar... estes podem pedalar por conta própria ou podemos fazer um pouco dos dois. Talvez eles circulem por conta própria, mas também temos a capacidade de nos conectarmos com aqueles, se quisermos. Então, tenho mais alguns ícones. Vamos destacar algumas outras coisas, certo? Queremos destacar o feed talvez, é que o feed parece para o seu perfil? Esse tipo de alimentação pública, como é a composição? Isto é talvez, como um perfil se parece? Vamos fazer testes em torno desses cenários para ter certeza de que é exatamente o que queremos falar. Mas agora, nós vamos apenas colocá-los em jogo, estes devem ser da Marinha. [ inaudível] aqui. Você poderia clicar sobre isso, você verá essas mudanças, e nós também podemos provavelmente olhar para talvez algum tipo de trabalho de linha que tipo de trabalhar com isso quando nós meio que apertamos as coisas. Então, agora nós temos o terceiro, eu acho que você poderia dizer o terceiro capítulo da história, meio áspero aqui. A próxima parte é voltar ao nosso esboço, a prova social. Este é o tipo de onde você está agora começando a movê-los para o tipo de final do livro ou o fim da história. Você meio que copia esse bom fluxo, liderando-o, puxando-os através. Este é um bom momento de captura, seu olho salta para fora da página muito bom, nós nos deparamos. Então, agora, queremos fazer algo aqui que eu acho que compensa o que estamos fazendo nesta seção, mas também começa a introduzir algumas dessas provas sociais. Então, temos outra coisa legal continuar com esse tema, outra ótima maneira de mostrar alguma agitação. Mas vamos subjugá-lo com alguma opacidade visual. Então, vou deixar isso aí para vocês. Novamente, sinta-se livre para usar qualquer combinação de cores. Achamos que isso funciona, porque eu acho que começa a sanduíche muito bom quando você passa pela página, salta fora, aquele dispositivo muito bem também. Então, quando se trata do modo de teste real, você pode fazer uma série de coisas. Você pode colocá-los em uma grade, apenas deixá-los executar a página, podemos ficar um pouco mais interativos, talvez haja um carrossel que percorra, talvez haja cartões reais, há muito de coisas visuais que você pode fazer aqui. Mas o importante é, realmente, enfatizar a prova social, e vejo que há alguns elementos de prova social na página também. Há depoimentos, e então eu acho que nós queremos começar a fazer um pouco de algumas mídias sociais compartilhadas, provas sociais também. Mas, por aqui, só queremos ter certeza de que deixamos que as pessoas tomem um momento, pausem e consumam esses depoimentos. Então, vamos manter isso em mente enquanto projetamos isso. Temos o bom tema de ir com ícones muito bons, trazer esse cara de volta. É meio que fica na página. Temos outro testemunho aqui, e pode, que vai trazer. Agora, mudando para um layout centrado, funciona aqui, porque nós temos tipo de layout central acontecendo aqui. Nós meio que alternamos isso, então quando se trata de layout, alguns, eles pensam em dividir isso um pouco enquanto você trabalha através da página. Eu acho que o que vamos fazer, é simplesmente mostrar a foto, a descrição de quem essa pessoa é, e vamos deixar isso ficar aqui também. Tenho um par desses já aqui. Talvez tenhamos [inaudível] Eu acho que há outra grande oportunidade para fazer algumas peças visuais interativas aqui. Eu gosto de colocar um pouco de interatividade em qualquer lugar que possamos, mas eu não vou deixar isso sobrecarregar o poder demais. Como eu disse, o objetivo aqui é realmente falar mais sobre o layout, contar histórias versus como exatamente como fazer uma série de tratamentos reais aqui. Então, sinta-se confiante que compor algumas dessas imagens é uma boa maneira de fazer isso por vocês. Então, isso está começando a parecer muito legal. Quero dizer, poderia haver alguns controles aqui, talvez no celular, eu penso sobre a experiência móvel talvez apenas passar por isso com o polegar. Talvez estes sejam outros tipos de gestos, há muitas coisas que podemos fazer aqui, quando você começa a otimizar em torno de dispositivos móveis. Mas, por enquanto, acho que isso está começando a ficar bem. Está bem. Então, enquanto você está passando, você está sempre se perguntando, estamos no gol? Estamos nos distraindo do gol? Porque você vai começar a relaxar agora, e eu acho que, como no esboço, nós fizemos um bom trabalho em diminuir na hora certa, e puxá-los para a ação Goto real. Então, neste design particular, e você pode ter um par de designs, onde o objetivo para sua página inicial talvez também não apenas aumentar as inscrições, mas talvez você queira também aumentar a inscrição no boletim informativo, então há um número de coisas que podem acontecer em uma página inicial, mas é importante sempre enfatizar uma. Esta vai ser uma área onde eu vou te mostrar uma boa maneira de fazer isso. Muitas vezes, é uma questão de como você o configura na página. Então, vamos passar para o tipo de área de contato aqui. Eu acho que para isso, nós vamos apenas manter simples e colorido, versus ficar... porque agora, nós queremos, como eu disse, nós queremos acabar com eles. Eu acho que esta é uma ótima maneira de introduzir um formulário de contato. Mas também vamos ter alguma prova social adicional aqui. Talvez, nós vamos dar a eles a opção de fazê-lo. Se eles não estão prontos para se inscrever, talvez nós vamos dar a eles a opção de agora apenas nos seguir um pouco. Talvez queiramos levá-los a algum tipo de interação com a nossa empresa ou com o produto. Mas se eles não estão prontos para se inscrever, queremos dar a eles outro pequeno toque potencial e uma pequena oportunidade para convertê-los em outra força, em outro funil de algum tipo. Então, eu acho que é o que vamos fazer aqui, é empurrar o contato ou assinar formulário. Mas também, talvez olhar para fazer algo aqui em baixo para promover e mostrar sua prova social, mas também dar a eles uma opção de nos seguir no Facebook ou Twitter. É um tratamento muito simples aqui. Nós só estamos indo para nocautear este formulário aqui muito rápido embora. Novamente, eu tenho um formulário que já usamos em um design anterior, que sabemos que está realmente trabalhando do ponto de vista da formatação e do ponto de vista da conversão real. O problema com este design não era inteiramente sobre se nosso formulário estava convertendo tanto, eles obtivessem toda a história do produto em termos de funcionalidade de nosso plano de ação. Porque há muitas coisas que você pode fazer aqui. Quando se trata de suas conversões, você pode simplesmente ter um botão aqui que é-. Cadastre-se. Isso funciona muito bem. Há muitos estudos por aí. Se você conseguir que eles se comprometam apenas com isso e isso aparecer um modal, você será capaz de tipo de obter o resto da informação para nós. As coisas realmente funcionam muito bem se nós apenas colocá-los no - obter algumas de suas informações no início, e tipo de levá-los direto para o embarque real. Então, nossa forma e o bem disso, é simples formulário de inscrição, e eles vão continuar, e isso vai realmente levá-los direto para o aplicativo real, onde eles podem começar a se envolver mais. Então, eu vou nocautear este formulário rápido. Então, vamos falar sobre nesta seção, e vamos falar sobre como tudo isso vai funcionar juntos. Então agora, nós temos nosso formulário de inscrição, nós equilibramos isso de uma forma que... Obviamente, a primeira coisa que queremos que eles façam é começar. Queremos pegá-los. Se eles não estão prontos para fazer isso, vamos simplesmente ver se eles vão se comprometer com uma dessas duas opções. uma vez, você poderia simplificar isso muito mais se você quisesse, e apenas usar uma chamada à ação que abre um modal ou levá-los para outra página, e tudo o que eles fazem é focar nisso. Mas descobrimos que tivemos algumas boas conversões em torno deles apenas começando lentamente no processo de integração desde o início. Em seguida, vamos embrulhar este design com um rodapé rápido. Então, o próximo passo é, vou encerrar esse projeto e então vamos trazê-lo para a visão e falamos sobre como obter feedback de sua base de usuários existente ou dentro de sua equipe interna. 7. Colaboração e feedback: Está bem. Então, agora, estamos prontos para pegar esse design e estamos prontos para receber algum feedback sobre ele. Vamos fazer isso trazendo-o para o InVision. Estou criando um bom protótipo e mostrando-lhe como partilhá-lo com outras pessoas da sua empresa ou com clientes existentes. Você obtém algum alto nível, feedback rápido antes de começar a refinar sua idéia um pouco mais e entregá-la ao desenvolvimento. Então, a primeira coisa que você precisa fazer é criar uma conta gratuita do InVision se ainda não o fez. Você pode fazer isso apenas indo para se inscrever em invisionapp.com, digitando suas credenciais e, em seguida, você terá uma conta gratuita que é boa para um projeto. Eu já tenho uma conta, então o que eu vou fazer é pegar e criar um projeto. É muito simples. Vou chamar isso de Página Simplesmente Social. Vai ser uma área de trabalho. Há muitas coisas que você pode fazer em dispositivos móveis, mas este é um projeto de desktop, então eu vou apenas criá-lo. A próxima coisa que você quer fazer é trazer seus designs para o InVision. Você pode fazer isso arrastando e soltando-os aqui, navegando no fórum, mas eu gosto de usar a sincronização do InVision, que é muito legal e uma ótima maneira de colocar as coisas no InVision ao fazer atualizações sem precisar arrastar e soltar qualquer coisa praticamente para o resto do projeto, bem como acessar um monte de outros ativos compartilhados com sua equipe. Então, ele funciona com o Dropbox, bem como em sua unidade local. Então, agora temos nossas telas dentro do InVision usando a sincronização do InVision. Agora queremos criar protótipos daqueles que fazem estes clicáveis, que possamos obter algum feedback real deles no contexto sem ter que enviá-los JPEGs através de um e-mail. Então, entre aqui. Vamos fazer algumas mudanças rápidas de configuração aqui. Vamos fazer esse fundo preto só para deixar isso sair um pouco mais, mas estamos prontos para começar a prototipagem. A primeira coisa que você pode querer fazer é começar a vincular isso, muito rápido sem escrever código. Venha aqui e temos esse padrão de usuário que falamos que vai passar por todas as páginas que vai ser simplesmente um modelo e podemos chamar isso de navegação. Como sabemos que isso vai para todas as páginas, vamos fazer isso ir para a página inicial real. Eu faço isso ir para a página inicial e clique em Salvar. Isso vai realmente para um Tour, e talvez nós queiramos realmente levar isso para baixo para o real, ou um ponto na tela. Então, talvez quando eu definir isso para realmente ir para baixo para esta seção, ou ele poderia ir para baixo para um url externo, não importa. Então, agora, temos este botão Inscrever-se. Como, obviamente, queremos levar isso até o formulário de inscrição real. Eu quero fazer essa transição sem problemas, e então nós também vamos fazer protótipos rapidamente. Isso, nós poderíamos protótipo, mas por uma questão de velocidade, nós apenas vamos protótipo rapidamente nesta seção agora mesmo. Então, fácil de fazer é simplesmente hotspot. Vamos levar isto para o Testemunho 2. Vamos manter esse lugar para as páginas e cair, e então vamos fazer isso aqui para ir para o Testemunho 3, e se testarmos isso tudo bem rápido, você vai ver, uma vez que você começa isso indo para a demonstração real, como isso é Todos vão trabalhar. Então, eu estou no meu modo de visualização, apenas clicando no globo ocular, nós podemos chegar aqui, você clica em Inscrever-se e apenas leva você para baixo na página. Se eu clicar em Angela Wells, vai trazê-la para a frente. Bem, na verdade, aplique isso em todas as páginas. Então, o que vamos fazer é, vamos protótipo rapidamente o resto deste sob essas outras páginas e então vamos falar sobre como preparar o cenário para feedback e começar a receber alguns comentários sobre isso. Então, temos tudo prototipado e está pronto para compartilhar. A primeira coisa que quero fazer primeiro, como designer que está se preparando para apresentar isso, quero deixar algumas notas, talvez ter algumas discussões rápidas. Se você tem este recurso legal aqui chamado Tours, que nos permite fazer pequenas notas com nossa equipe sem ter que entrar e deixar comentários necessários. Isso você pode simplesmente chamar ponto de Tour. Então, talvez, eu vou sugerir e eu quero fazer aqui é, nós podemos realmente fazer isso um GIF animado para rolar os pensamentos feed. Estas são todas as coisas que apenas começam alguma discussão. Eles não são comentários acionáveis, mas são coisas que você talvez pense. Também podemos querer fazer isso com outra seção, talvez façamos a mesma coisa aqui onde dizemos: “Esta é a melhor captura de tela? Pode ser melhor?” Vou notar, talvez o redator, conversamos com os que talvez, “Precisamos refinar uma cópia. Podemos puxar o redator?” Para fazer alguns pontos de conversa rápidos antes de nos aprofundarmos nisso, assim com nossas equipes. Então, isso estava no modo de visualização. Estamos prontos para compartilhar isso. Então, para fazer isso, você pode entrar no Photoshop, criar uma sessão realmente legal do LiveShare usando nosso plug-in legal chamado LiveShare PS. Uma vez carregado, você será capaz de criar uma sessão de colaboração virtual que realmente puxa essa visão do seu design para o LiveShare, que você possa colaborar internamente com sua equipe em tempo real na formação este design antes de testá-lo. Ou, você pode simplesmente ir aqui, criar um pequeno URL de compartilhamento simples, definir alguns parâmetros e, em seguida, começar a receber algum feedback. Então, eu vou usar uma rota de compartilhamento e o que vai acontecer é, você vai obter um URL, carregar esta página, e então vamos começar a receber alguns comentários. Aqui está como o link de compartilhamento se parece. Então, você pode ver, nós fizemos essas marcas que surgem um muito bom pouco beacons aqui que ajudam você a ilustrar os pontos reais do Tour que você deixou ou os pontos de discussão que você deixou para o seu projeto. Qualquer um pode entrar aqui, clicar neles, responder a eles, você pode passar por eles. É uma ótima maneira de apresentar suas ideias quando você não pode estar lá. Então, nós enviamos isso fora de um feedback e nós temos alguns comentários que já estão chegando em resposta ao ponto de Tour real fazendo um GIF animado. Você pode dizer: “Ótimo! Vamos fazer isso acontecer”, mas também temos outros comentários que estão começando a cair aqui. “ Podemos mover este botão para cima? Há uma necessidade agora. Há algum espaço extra aqui que não precisamos, então podemos apertar isso?” Este é todo o feedback que está chegando ao seu design em tempo real. Então, como você vê, “Parece ótimo”, ele gerencia feedback rapidamente. Em seguida, dentro da sua conta InVision, você pode começar a ver essas conversas acontecendo. Então você pode responder. “Certeza. Vamos fazê-lo”, e realmente começa a ter essa colaboração interativa que está acontecendo em todo o seu design. A outra coisa boa é que, como temos tudo isso na sincronização do InVision, você pode fazer essas alterações imediatamente no Photoshop. Podemos mover este botão para cima e vamos realmente clicar em Salvar. Assim que sincronizar com o servidor, agora essa mudança será realmente refletida em tempo real. 8. Finalização: À medida que você começa a empurrar seu design para a linha de chegada, provavelmente é um bom momento para começar a trazer seu designer ou você são engenheiros e desenvolvedores para começar a receber seus comentários e deixar algumas notas reais que pertencem a eles Especificamente. Você pode facilmente fazer isso. Você obviamente tem seus 12 pontos, mas você também pode fazer isso com muito legal Dev Notes. Então, aqui, você pode simplesmente dizer : “Isso precisará de algum código adicional que não temos.” Você pode dizer uma nota de desenvolvimento dizendo: “Esta é uma transferência da última página de destino.” Todas as notas que somente os desenvolvedores verão quando escolherem visualizar. Então, o mais bonito sobre o URL de compartilhamento é que você pode compartilhar isso com seus engenheiros e eles, também, podem clicar e interagir com o designer. Eles também podem deixar seus próprios comentários quando necessário. Então, outras grandes ferramentas que temos para trabalhar com seus desenvolvedores são Snaps, que permite que você pegue páginas codificadas ou qualquer página URL e as traga para sua conta InVision. Há também a capacidade de ativos compartilhados onde os desenvolvedores e engenheiros podem entrar e realmente baixar todos os arquivos fonte, imagens e fontes que eles precisam para empurrar isso para a linha de chegada. Então, o InVision começa a assumir o controle. Você meio que muda para uma função de suporte mas tudo ainda está sendo gerenciado por meio da plataforma InVision. 9. Conclusão: Então, aí está. Alguns princípios fundamentais fundamentais que você pode começar a usar para aumentar as conversões ou quaisquer projetos no futuro. Então lembre-se, o feedback é uma parte muito importante do processo criativo, é importante abraçá-lo. À medida que seus objetivos mudam, você terá que mudar seu design. Estou animado para ver o que você cria, por favor, compartilhe comigo em uma galeria de projetos abaixo. 10. Explore cursos de design na Skillshare: maneira.