Transcrições
1. Nossas boas-vindas: Oi, meu nome é Ronnie Peters da 360 Design. Este é Irving, diretor de atenção, e hoje, vamos criar um protótipo de um aplicativo móvel. O que eu quero fazer é, desenvolver um protótipo antes de eu realmente ir para o estágio de codificação. O que é importante nisso é que vai me poupar muito tempo, e vai me poupar muito esforço,
e eu quero ser capaz de obtê-lo no meu telefone, esse protótipo, e ser capaz de compartilhá-lo com meus amigos e colegas para que possamos olhar para a idéia e prova de conceito. Da mesma forma, quero falar sobre as diferentes ferramentas que vamos usar. Você poderia usar uma miríade de ferramentas diferentes. Há muita coisa lá fora, coisas como Sketch, Illustrator, Photoshop. Você poderia até estar escrevendo e desenhando no papel se quisesse e fazendo protótipos de papel. Na verdade, vamos direto para a tela do computador e usar um conjunto de ferramentas que selecionei. Eu sou um criativo. Eu tive a sorte de estar envolvido com alguns dos primeiros sites para cegos,
e isso me fez pensar sobre o design da interface do usuário e ajudar as pessoas realmente a interagir com mídia digital e comunicações muito. Agora eu lidero uma empresa de design chamada 360 Design, e estamos focados na experiência do usuário e na interseção da marca.
2. Projeto: Na 360 Design, nos concentramos em criar experiências de
usuário que surpreendam e deleitem os problemas da auto-comunicação. Então, o que vamos fazer como esta classe, é construir um aplicativo móvel, um protótipo para um aplicativo móvel para um cliente chamado Metrie. Eles desenvolvem portas e molduras, e nós vamos criar um aplicativo realmente emocionante para eles ao redor de portas. O que estou fazendo é pensar em algumas das coisas que fizemos no passado, algumas das experiências de usuário que tivemos
que foram particularmente bem-sucedidas e pensando em como
poderíamos realmente aplicá-las para criar uma experiência muito interessante e envolvente e útil para este cliente em particular, e este problema. Então, qual é a grande ideia aqui? A grande ideia aqui é que queremos que as pessoas explorem e descubram esta gama de produtos para este cliente e façam isso no seu dispositivo móvel. O grupo-alvo para o qual estamos trabalhando são arquitetos, designers de
interiores e pessoas que estão fazendo reformas em sua casa. O que queremos fazer é usar a mobilidade e o telemóvel como uma forma de permitir que as pessoas explorem portas e as mostrem no seu espaço.
3. A grande ideia: Então, eu estou pensando muito sobre os tipos de coisas tecnicamente que eu posso fazer com este aplicativo, e todos os recursos surpreendentes que ele tem. Coisas como o novo 3D Touch, áudio, vídeo, mobilidade e todas as coisas que acompanham isso. A outra coisa que eu realmente estou pensando é qual é a grande idéia para o meu aplicativo. Pense em aplicativos de sucesso como o Uber, como o Seamless, como o Yahoo Weather. Eles fazem uma coisa e fazem uma coisa muito bem. Então, quando você está pensando e planejando ou aplicativo, que vamos entrar em alguns minutos,
pense sobre qual é a grande idéia qual é
o grande conceito que eu realmente quero ter como a experiência central no meu aplicativo. Como vou encantar as pessoas, surpreender as pessoas, e realmente desenvolver e construir algo que é muito claro, muito conciso e faz uma coisa bem.
4. Dispositivo móvel como meio: Antes de começarmos o processo criativo, eu só quero falar um pouco sobre aplicativos e a grande idéia de qual é o conceito que temos. Quando fomos encarregados de projetar um aplicativo móvel, ou na verdade uma série de aplicativos móveis para a série de livros, o que estávamos realmente interessados em fazer é o que
realmente complementaria a série de livros, não repeti-la. Poderíamos pegar o conteúdo de um livro e você poderia simplesmente colocá-lo em um aplicativo móvel e criar um turner de página e algo que você poderia realmente ler, basicamente o conteúdo do livro. Mas isso não é tirar vantagens deste meio. Então, o que eu realmente quero fazer é olhar para o que os aplicativos móveis são realmente bons em fazer. O que é a mobilidade? Qual é a interação das pessoas? O fato de que eles estão em qualquer lugar quando eles estão realmente usando um
desses e o que podemos fazer para tirar proveito de toda a tecnologia que sai daqui é muito diferente do que você realmente obtém na experiência linear do livro. A vantagem que temos com um dispositivo móvel, eu posso estar em qualquer lugar, é completamente não-linear e tem todas as ferramentas, áudio, câmera, vídeo, toque, etcetera que eles não têm na experiência do livro. Então, como vamos tirar o máximo proveito disso? Então, essas são algumas das coisas que eu realmente estou pensando antes mesmo de começar a construir o aplicativo móvel.
5. Funcionalidade: Então, eu estou pensando sobre este aplicativo e aqui está uma sala. Digamos, que nós realmente entrou e o aplicativo vai ser tudo sobre ser capaz visualizar o que esta sala parece com uma gama diferente de produtos de porta nele. Estou pensando em um dos aplicativos que projetamos Super, Head Esploder X. Neste aplicativo, uma das principais características foi que você poderia realmente tirar fotos de seus amigos e capturá-los. Então você poderia colocá-los no jogo. Tirar uma foto, usar a foto, e então basicamente, eu poderia redimensionar, mover essa foto e, em seguida, salvá-la e, em seguida, usá-lo no jogo. Então, eu estou pensando sobre essa tecnologia e o que eu quero fazer é usar esse conceito neste aplicativo em particular. Então, o que eu quero ser capaz de fazer é abrir o aplicativo porta. Então, eu entro em uma sala e posso ver essa porta em particular, e o que eu quero ser capaz de fazer é trazer as portas do meu cliente por cima desta, tirar uma foto daquilo, compartilhá-la com meus clientes, compartilhá-la com Meus amigos, compartilhá-lo com qualquer um envolvido neste projeto de produtos interiores em particular. Então eu quero saber onde eu posso realmente comprar esse produto em particular. Então, essa é a grande ideia. Vai ser realmente envolvente e agora vamos em frente e descobrir como vamos realmente construir esse aplicativo protótipo específico.
6. Ferramentas e passos: Existem muitas ferramentas diferentes que você pode usar para criar um protótipo de um aplicativo. Poderíamos começar no papel, gerando wireframes, gerando fluxos de usuários
e, em seguida, prototipando telas, poderíamos colocá-los para fora e colocá-los na parede apenas começar criar e visualizar o aplicativo e o que está no telas reais. Podemos usar ferramentas on-line e on-line
temos muita variação e um monte de ferramentas diferentes que estão à nossa disposição. Vou usar Axure RP e vou usar um aplicativo chamado Flinto. Vamos usar o Photoshop e vamos usar o Illustrator. Você não precisa usar essas ferramentas, há muitas outras ferramentas lá fora, mas o que é realmente importante é o processo que vamos passar
hoje para passar da ideia ao protótipo acabado. Isso é o que realmente importa.
7. Introdução ao Axure: Vamos dar uma olhada nas ferramentas que vamos usar para conceber e prototipar nossa ideia de aplicativo. Então, eu tenho Flinto que é o aplicativo que nós estamos indo para realmente constrói o protótipo acabado. Nós vamos ser capazes de compartilhar isso e nós vamos usar o correio para compartilhar isso com outras pessoas e para colocá-lo no meu telefone. Este Axure RP onde vamos construir wireframes, sitemaps e muitos dos elementos que realmente vamos usar no aplicativo Prototype. Também usaremos o Illustrator e o Photoshop para nos dar suporte à criação de ícones e vários componentes diferentes que usaremos. Podemos ver isso em um navegador também. Aqui está o Axure com a navegação à esquerda que mostra várias telas diferentes que eu projetei e arquivos que eu abri dentro do Axure. Preparei algumas coisas com antecedência aqui, e vamos passar por isso. A primeira é que eu fiz uma tela de visão geral. A visão geral só me permite manter o controle de onde estou no projeto, os passos que eu dei, o que eu fiz. Eu costumo colocar uma data ou hora após estes, apenas para que eu possa ver isso, e especialmente se eu estou compartilhando este arquivo com outras pessoas e trabalhando como uma equipe. Podemos ver progressos e manter tudo isto actualizado. Eu tenho um diagrama de fluxo de processo que eu vou mostrar a vocês, que é o processo que vamos passar, vários elementos de design diferentes que eu acumulei, e então algumas das telas diferentes que começamos a colocar juntos, um fluxo de sitemap e, em seguida, as telas que realmente vamos colocar no protótipo. Mas vamos começar com o processo. Então, nós conversamos um pouco sobre a grande idéia, e o conceito, e é isso que vamos começar no processo de descoberta. Para quem é este aplicativo realmente? Você pode até querer anotar a persona, o tipo de pessoa que você está realmente segmentando com seu aplicativo, quem é seu público-alvo para isso? O tamanho do mercado em potencial, qual é o grande problema que você está tentando resolver? Qual é a grande ideia do aplicativo? Qual plataforma o público está realmente usando? Isso deve ir em um telefone Android? Isso deveria ir em um iPhone? Talvez fazer alguma análise competitiva e ver se
alguém mais lá fora tem realmente um aplicativo como este. Então vamos colocá-la na fase de definição. Vamos olhar para alguns dos detalhes do que está no aplicativo, qual é o conteúdo real. Então vamos passar para a fase de projeto propriamente dita. A razão pela qual eu tenho um número de setas por aqui é porque nós vamos começar o processo de design, então nós vamos para uma implantação de protótipos. Vamos testar isso. E, em seguida, com base em testá-lo, vamos voltar e fazer algumas reformulações. Então, você pode ver que este processo aqui pode tomar uma série de diferentes etapas ou testes antes de realmente ir para o processo de design final que vamos, em seguida, para levar em código,
e implantá-lo e, em seguida, uma vez que implementamos que vamos medi-lo e melhorá-lo.
8. Descoberta, definição, design: Para este aplicativo na fase de descoberta, para quem é este? Conversamos um pouco sobre isso. Nosso público-alvo aqui são arquitetos, designers de interiores
e pessoas que estão renovando ou construindo uma casa. Sabemos que a persona muito bem, fizemos muito trabalho com este cliente em particular, fazemos muito trabalho na web e um monte de branding e promoções para eles. Então, eu entendo esse mercado muito bem, e para quem isso é direcionado. O tamanho do mercado potencial, achamos que há pessoas suficientes lá fora, este é um aplicativo viável que vamos construir. O problema que estamos tentando resolver é que realmente queremos
envolver as pessoas quando elas estão em seu espaço, elas estão olhando para este espaço e tipo, “Como? Como isso ficaria com este produto específico nesta sala? Então, esse é o problema que estamos tentando resolver, e a grande idéia é que vamos ser capazes de abrir nossa câmera no telefone, e nós vamos ser capazes de deslizar por essas portas, e escolher muitas portas diferentes, então vamos ser capazes de tirar uma foto daquela porta no meu espaço. Então, vamos ser capazes de compartilhá-lo, se eu estou compartilhando com um arquiteto, se eu estou compartilhando com um designer de interiores, se eu estou compartilhando com alguém que eu quero olhar para o espaço desta sala, ou simplesmente levá-lo comigo para um Home Depot ou Lowe para ser capaz de realmente comprar esse produto em particular. Então, essa é a grande idéia aqui, o núcleo do aplicativo que nós realmente vamos construir. Eu não tenho certeza de que mais alguém fez algo assim, então eu estou muito suiced sobre a concepção deste aplicativo particular, porque isso vai ser bastante único
no mercado para este público-alvo particular neste particular produto. O próximo passo é a fase de definição. Então, vamos definir este aplicativo em particular. Vejamos os recursos e funções particulares que queremos ter aqui e qual é o conteúdo. Mais uma vez, conheço muito bem este conteúdo. Conheço esses produtos de porta. Sei o que temos no caminho das imagens, o que temos no caminho da cópia e do conteúdo. Eu também sei que há um recurso de mapa que temos em nosso site onde eu posso descobrir onde comprar este produto em particular. Eu vou pensar em incorporar todas essas coisas neste aplicativo em particular, e essas serão o núcleo das experiências. Então, primeiro de tudo, é sobre trazer nossas portas para a página, mostrá-las no meu espaço, no meu quarto, então ele vai estar tirando uma foto disso,
então eu quero ser capaz de salvar isso, compartilhar isso, descobrir onde eu posso Compra isso. Esse é realmente o núcleo da experiência. Então, essa é a fase de definição. Agora, você provavelmente quer escrever tudo isso, você pode querer quadro branco isso, você pode querer colocar isso em algum tipo de documento, e compartilhar isso. Então, você vai olhar para isso em detalhes, e você faz algumas iterações diferentes de versões deste. Mas eu pensei nisso e é aí que eu estou com a fase de definição agora. Em seguida, vamos chegar à fase de projeto. Então, é aqui que realmente começamos a entrar na experiência do usuário e mapear, wireframe para fora o que este aplicativo vai ser tudo sobre. Então, vamos entrar em alguns desses detalhes nas páginas, mas vamos falar sobre eles muito rapidamente. Vou desenvolver o que é chamado de sitemap. Então, eu apenas mapeio todas as páginas diferentes que estão lá. Não muito diferente de um sitemap, vou fazer um diagrama de fluxo. Então, eu estou pensando sobre a maneira em que alguém está realmente indo para mover através deste aplicativo. Então, eu vou fazer alguns grampos. Então, eu vou olhar para páginas individuais, e alguns dos elementos ou telas, e os elementos que realmente vão estar lá. Em seguida, vamos começar a colocar esses diferentes componentes juntos
e, em seguida, começar a construir nosso aplicativo. Então, esse é o início da fase de design que vamos olhar agora.
9. Mapa do site: Vamos dar uma olhada em um sitemap. Então, no sitemap, o que eu comecei a pensar são todas as diferentes telas que eu poderia precisar para projetar para esse processo específico. Mais uma vez, eu poderia ter começado isso no papel. Podia ter desenhado isto. Eu estou indo imediatamente para a ação aqui para realmente desenhar esses elementos. Então essas são apenas caixas individuais que eu desenhei na tela e diagrama de fluxo, e então a coisa bonita aqui é que eu posso realmente entrar, e eu posso pegar isso, e eu posso realmente vincular isso a uma de minhas páginas. Mais tarde, eu posso realmente publicar este sitemap como um site, e eu posso fazer com que as pessoas realmente cliquem em torno dele. Então eu posso realmente clicar na tela de carregamento aqui, e eu posso ir para a página da tela de carregamento, e eu vou ser capaz de ver isso, e então eu posso clicar nisso e então ir para outra. Então, esta é na verdade uma maneira de construir um protótipo áspero, apenas uma ação antes mesmo de colocá-lo no meu celular. Então, no que estou pensando aqui? Sei que vai haver uma tela de carregamento. O que acontece quando você toca em um ícone em sua área de trabalho, ele realmente carrega o aplicativo, e enquanto esse aplicativo está carregando, podemos colocar um gráfico lá antes de você realmente chegar ao que eu estou chamando a tela inicial. Então, a partir dessa tela inicial, eu estou pensando em todas as páginas diferentes que eu poderia ter. Então, coleção de portas, onde comprar, página de contato, sobre página que pode estar levando essas portas que eu vou colocar sobre minha tela da câmera, levando a uma página de detalhes da porta que eu vou ser capaz de capturar o porta, e então eu vou ser capaz de compartilhá-lo. Então, isso foi um sitemap. Essa foi uma idéia que eu tive para este aplicativo em particular. Então, aqui está outra, que é uma maneira ligeiramente diferente de abordar isso. Eu vou da tela de carregamento imediatamente para a tela de captura. Então, aqui, eu já estou começando a pensar em diferentes experiências de usuário e diferentes maneiras de passar pelo aplicativo real. Então, o anterior com tipo de dois passos antes de eu chegar ao núcleo da experiência, este entra diretamente nele e começa imediatamente com a captura da câmera que eu estou pensando. Eu capturo uma porta no meu espaço e depois compartilho, então é realmente um processo rápido para chegar a este ponto de compartilhamento onde eu realmente acho que o tipo de encontro das experiências do usuário e onde você terá o maior prazer e o mais tipo de noivado. Então, nós temos os detalhes da porta, que eu posso obter imediatamente fora da página do visualizador, e então eu posso ir para o mapa e descobrir onde eu posso comprar este produto. Posso entrar em contato com a marca, ou saber mais sobre a marca e o aplicativo, et cetera, et cetera. Então, esta é apenas uma maneira alternativa. Então, eu realmente encorajo você a começar a olhar para diferentes maneiras de organizar suas páginas. Este era um deles. Este foi outro. Antes mesmo de nos aprofundarmos no processo de design, estou pensando no usuário e nas páginas com as quais eles serão confrontados, no conteúdo pelo qual eles serão confrontados, na experiência que eles terão. Novamente, você pode querer pensar sobre alguns dos aplicativos que talvez você use, como Uber que eu estava falando, como Yahoo Weather que eu gosto. Nós estávamos envolvidos com o Seamless e o aplicativo Seamless, e projetando elementos de interface do usuário e interface do usuário para isso, e esses são aplicativos que realmente se concentram em aprimorar em obter as pessoas o que elas querem o mais rápido possível através da experiência do aplicativo. Portanto, pense realmente nisso enquanto você está desenvolvendo e projetando seu sitemap.
10. Fluxo: À medida que estou desenvolvendo o sitemap, também
estou começando a pensar sobre o fluxo. Então, este é o engajamento que as pessoas vão ter, é assim que eles vão passar pela experiência do aplicativo, e essas serão as interações que eles têm. Então, é semelhante ao sitemap, mas estou menos preocupado com páginas, e estou realmente preocupado com ações e como agrupo essas ações. Então, eu sei que vou ter uma página inicial de boas-vindas aqui. Eu sei que vou ter algum tipo de tela inicial, então isso está na linha de versão do sitemap que nós olhamos. Então, eu vou dar às pessoas uma escolha que eles querem descobrir como usar o aplicativo, eles
querem ir e começar a olhar para os produtos da porta e tirar fotos? Qual é a ação de lá, ou a próxima seção? Eles podem ir para a página de detalhes do produto. Eles poderiam tirar uma foto. Eles poderiam ir para a página de imagens, então eles poderiam compartilhar através desses diferentes canais de mídia social, eles poderiam escolher cores. Então, eles poderiam descobrir onde comprar, ou eles poderiam entrar em contato com a marca. Então, eu estou pensando sobre esses fluxos e como isso poderia ser arranjado. Mas isso parece um pouco ocupado para mim. Então, ao fazer este, eu comecei a realmente pensar sobre se há uma maneira melhor mais fácil de realmente colocar isso juntos, e foi assim que eu vim para cima com o segundo conceito que se você vê-lo aqui mesmo neste diagrama parece ainda mais simples. Então, eu tenho essas duas versões apenas para que você pudesse ver a diferença entre uma e outra. Então, eu estou pensando sobre a tela de carregamento que nós não temos escolha lá, mas então nós realmente ir direto para o núcleo da experiência
do aplicativo onde eu quero que as pessoas sejam capazes de tirar fotos,
olhar para os produtos da porta, e, em seguida, começar a envolver, compartilhar e fazer todas essas coisas ou aprofundar os detalhes do produto se eles quiserem descobrir onde comprar, entrar em contato com a marca ou aprender mais sobre o aplicativo em si. Então, este eu acho que é um caminho muito mais simples e caminho a percorrer. Só para você saber, só para dar uma olhada em como eu construí algumas dessas coisas. Vamos entrar em algumas das coisas que eu fiz no Photoshop aqui. Aqui estão alguns dos ícones que eu apenas juntei muito grosseiramente. Novamente, este é um protótipo, então eu apenas construí esses ícones para que nós vamos cortar o que nós copiamos e colamos e colocá-los diretamente em ação aqui para que você possa começar
a ver algumas das ações que eu estou pensando as pessoas vão realmente ter.
11. Elementos de design: Então, vamos dar uma olhada em algumas das outras coisas que eu fiz aqui. Eu criei uma página chamada elementos de design, e nesta página aqui, eu acabei de juntar todos os pequenos pedaços, aqueles ícones que olhamos que eu desenhei no Photoshops, alguns botões que eu coloquei aqui. Aqui estão alguns dos produtos de porta, aqui está aquela sala que eu quero usar no fundo, aqui estão algumas cores das diretrizes da marca, da marca e alguns de seus logotipos. Então, eu acabei de jogar todos esses elementos em uma página. Isto é o que eu gosto particularmente na ação, que eu posso ter esse tipo de áreas de retenção, e então eu posso simplesmente vir e pegar esses elementos, e usá-los enquanto eu estou começando a projetar telas e wireframes.
12. Tamanho da tela e resolução: Antes de começarmos a criar wireframing páginas para fora, eu só quero falar um pouco sobre o tamanho da tela e a resolução. Para este aplicativo em particular, eu vou projetá-lo para iPhone 6 plus, esse é o telefone que eu tenho e eu estou usando então é isso que eu vou usar. Agora, durante minha fase de descoberta, olhei para o meu público-alvo, descobri o que a maioria deles está usando em termos do dispositivo que eles
vão estar e estou projetando especificamente para esse público-alvo e para esse dispositivo. Então, eu só vou escolher o iPhone e algumas coisas aqui sobre resolução, agora porque este é um protótipo eu realmente não me
importo muito com ele olhar absolutamente cristalino e afiado. Trata-se de obter a ideia e o conceito lá fora. Este não é o projeto final. Mas se eu olhar para resoluções de tela o iPhone original era 320 por 480 pixels. O iPhone 6 é 750 por 1334, e o 6 mais é 1244 por 2208. É um tamanho enorme para fazer protótipos. Se você realmente olhar para o tamanho
dessa tela em particular é muito pesado e volumoso para o meu gosto. Então, o que eu vou fazer é realmente projetar meus wireframes no tamanho
do iPhone 6 e, em seguida, quando eu colocá-los em meu aplicativo de prototipagem onde eu costurá-los todos juntos e transformar isso em um mini protótipo aplicativo, eu estou vai escalá-los para cima, e eu realmente não me importo com isso de novo. Haverá alguma confusão na resolução, mas eu realmente não pensei muito no projeto final. Este é apenas um protótipo nesta fase. A outra coisa sobre a qual quero falar é sobre a orientação da tela. Então, como você provavelmente sabe ao usar aplicativos, você pode transformar sua tela na horizontal e alguns aplicativos
se reorientam e dimensionam tudo para uma tela horizontal e, em seguida, você a transforma vertical e eles entrarão em um posição vertical. Novamente, este é um protótipo e eu só quero ter essa idéia e conceito na frente das pessoas e
testá-lo para obter meus fluxos indo e para obter o design de telas corretamente e pensar sobre os elementos que vão ser na tela. E por causa disso eu estou decidindo apenas fazer este protótipo em um formato vertical. Então, eu tirei a resolução da tela da foto. Eu vou para um tamanho de tela e resolução que é fácil. Eu estou indo para uma orientação que é apenas vertical, e em terceiro lugar eu vou apenas para ir para o iPhone. Está bem. Então, estou simplificando o mundo em que vou trabalhar, novamente só porque este é um protótipo.
13. Criar wireframes: Então, nós olhamos para o nosso público-alvo. Sabemos que estão no iPhone. Nós só construímos um protótipo, então nós vamos para um tamanho que realmente funciona para nós e novamente, porque a orientação, nós vamos apenas ir para vertical. Novamente, porque este é um protótipo nesta fase, e eu não estou muito preocupado com esta necessidade de trabalhar tanto na horizontal como na vertical. Vamos apenas ficar com uma orientação vertical. Então, aqui está a minha tela de carregamento. Vou ligar para o aplicativo abrir portas por enquanto. Aqui está o logotipo da empresa. Novamente, apenas colocando essas coisas em uma página e então eu estou pensando sobre tela inicial onde isso iria. Então, aqui está a minha tela inicial e eu tenho uma escolha que escolher a porta. Agora, isso está saindo do sitemap número um e foi
aqui que eu coloquei essa tela adicional lá versus a versão dois onde eu estava pensando, por que nós não apenas ir direto para o próprio aplicativo real, e dar às pessoas a experiência de porta que eu quero que eles tenham, e que eles se envolvam imediatamente? Então, aqui estão alguns dos elementos que eu
juntei que vimos na página de elementos de design. Eu só estou pegando algumas dessas coisas, copiando essas, e eu estou trazendo-as para essas páginas. Então, eu posso começar a usar esses elementos como parte deste design para fazer essas telas. Agora, uma das grandes coisas que realmente faz é dominar aqui em baixo. Então, eu posso realmente criar elementos como meus principais caminhos de navegação, e isso pode ser consistente em toda parte, e eu posso simplesmente arrastar e soltar esses mestres em qualquer página que eu estou projetando, e então eles serão consistentes em toda parte. Em seguida, se eu editar o mestre, ele irá editá-lo em todas as diferentes páginas de arame quadro. Então, isso pode ser extremamente econômico e vantajoso. Então, aqui é onde eu estou pensando, eu estou chamando isso de tela inicial, mas isso é basicamente onde eu realmente começar a usar o aplicativo. Em seguida, se eu clicar no link na parte superior, vou para uma página de detalhes. Então, agora, esta vai ser uma página de rolagem longa. Então, há mais informações aqui do que se encaixa em uma página. Então, eu só vou construir isso como uma grande página longa e mais tarde, vamos descobrir como fazer este pergaminho corretamente. Então, o que estou começando a fazer é olhar para este sitemap e usar os elementos que estão nesse sitemap, juntamente com as escolhas que as pessoas fazem no fluxo para começar a pensar no que realmente está nessas telas e páginas. Então, esta foi a idéia original para a página inicial, não muito emocionante e apenas uma grande escolha lá. Então, isso ia levar a esta página da porta e se você se lembrar do sitemap, nós temos portas. Temos onde comprar. Temos contato. Temos cerca de. Então, temos os detalhes do produto. Então, isso é um monte de coisas para ter na minha tela ocupando imóveis o tempo todo, mas eu não vou necessariamente estar usando. Então, eu só queria mostrar a vocês que é o meu ponto de partida, e então por que não pegamos isso, e colocamos isso ao lado disso, e falarei com vocês sobre alguns dos pensamentos que estão acontecendo por trás de onde eu realmente quer acabar com esta página. Então, essa era a página inicial antiga, mas agora, com um nível abaixo e na primeira iteração, mas é aqui que eu realmente estou pensando em ir com essa nova tela inicial. Eu peguei todos esses botões na parte inferior e
os coloquei dentro deste ícone de hambúrguer. Eu vou pensar sobre mais tarde, como eu quero ser capaz de expor essa navegação e levar as pessoas para essas outras páginas dentro da experiência do aplicativo? Mas o que ele fez foi aumentar o meu imobiliário na tela, o que é tão valioso em uma experiência móvel como esta. Então, apenas mostrando essas duas idéias para começar a pensar sobre o processo que eu estou realmente passando enquanto eu fio moldura para fora as páginas que estão no site.
14. Recapitulação do Axure: Então, vamos recapitular de onde estamos. Minha empresa mais de alguns página aqui, então eu estou apenas mantendo o controle e
anotando os passos que eu fiz e o processo que eu passei. A página do processo que foi, eu coloquei isso aqui em cima para seu benefício para
mostrar os passos e etapas que estou passando. Então, que eu normalmente não colocaria no aplicativo. Eu tenho esta página aqui onde eu comecei a colocar todos os meus ícones e elementos de design, logotipos das escolhas de cores da empresa com base nas diretrizes
da marca e, em seguida, esta coleção de elementos que eu vou estar usando para o processo de design. Então, eu tenho isso aqui. Tamanhos de página que falamos eu apenas manter isso lá talvez como uma referência. Passamos por algumas versões diferentes do sitemap e parecem estar mais inclinados para este agora. Este é o ponto em que eu poderia, se eu quisesse realmente pegar ambas as idéias do sitemap e protótipo de ambos e depois testá-los uns contra os outros. Eu estou realmente indo para construir este particular porque eu acho que esta é apenas uma solução melhor, mas o fato de que eu passei por este processo de experimentar algumas coisas
diferentes durante o processo de wireframing foi muito útil para mim. Então, eu fui e comecei a construir algumas das telas, tão simples wireframe de uma tela de carregamento. A tela inicial original para a primeira idéia e , em seguida, as páginas subseqüentes e, em seguida, uma novamente, que eu estou realmente indo para construir que é este um, uma página de detalhes do chão. Desculpe, página de detalhes da porta e, em seguida, eu tenho outras páginas, como onde comprar página. Eu ainda não fiz a página de contato e algumas das outras páginas que, a página sobre, por exemplo, que sabemos que queremos ter no aplicativo final.
15. Conectando seu mapa do site: Eu falei anteriormente sobre como podemos realmente construir um protótipo HTML usando iSare, para que pudéssemos muito rapidamente colocar essas telas juntas antes mesmo de ir para a construção de um aplicativo real para ir para o meu telefone. Então, vamos dar uma olhada em um ou dois dos recursos aqui. No sitemap, temos este nosso lugar para comprar. Vamos entrar aqui e conectá-lo a uma página de referência, então há uma maneira de comprar. Vamos entrar nos detalhes de fazer. Selecione uma página de referência lá. Há a página de detalhes da porta que temos. Então, eu não construí esses outros wireframes ainda. Mas, o que isso vai me permitir fazer é clicar
nisso para aquelas páginas específicas.
16. Conectando e publicando no HTML: Enquanto isso, eu fiz um pouco de limpeza e eu arrumei o lado esquerdo aqui para deixar as coisas um pouco mais claras para mim. Eu vou voltar para o sitemap aqui e eu vou apenas certificar-me de que eles estão conectados aos lugares certos. Esta tela particular aqui, que atualmente é chamada de dupla coleção um, eu estou realmente indo para re-vincular essa página de referência para cima porque agora vai para o novo lugar porque este é o novo esquema que eu vir acima com. Em seguida, detalhe da porta, eu só quero ter certeza de
que a página de referência está indo para o lugar certo, é. Isso vai para a página de detalhes da porta, então está tudo bem. A tela de carregamento, eu só quero ter certeza de
que a página de referência está correta, e é. Então, essas são as telas que eu realmente projetei, e eu vou ser capaz de conectá-las todas juntas. Também poderei entrar em algumas dessas telas e conectá-las também. Agora, esta tela em particular aqui, eu só vou vincular este logotipo
até a próxima página na sequência apenas para que eu tenha isso. Não é um link real que teríamos no
próprio aplicativo porque a tela de carregamento vai para a página inicial. Mas eu vou ligá-lo ao que estamos chamando, coleção de portas. Lá vamos nós. Então, se eu realmente tocar nisso, você vincula isso também. Crie um link. Isso vai para a página da coleção de portas também. Então, quando estou na página de coleta de portas, conectei isso à página de detalhes da porta. Eu sei que queria que isso acontecesse. Então temos uma porta marrom que eu queria ter conectada a essa página. Então, se eu for para a página da porta marrom, podemos ver que posso voltar para a porta branca. Vamos criar um link que vai para a tela inicial. Então, eu só vou pegar isso e eu vou dizer criar um link, e então isso vai voltar para a página da coleção de portas. Então, lá vamos nós. Então, sempre que eu tocar nisso, isso vai voltar para aquela página. Então, vamos costurar todas essas coisas juntos como um protótipo HTML muito rápido. Então, eu vou publicar, e eu vou dizer, “Gerar arquivos HTML”, “Gerar” Como você pode ver, eu estou agora em um ambiente de navegador da web. Eu posso ir aqui e eu posso clicar naquela página particular do sitemap e eu posso ver todas essas páginas diferentes. Então, isso é muito útil para mim apenas como um princípio organizacional, apenas para ver que eu tenho todas essas páginas, ver como elas estão conectadas entre si. Acho que dissemos quando estávamos na tela de carregamento. Nós vamos ser capazes de clicar no ícone que estava indo para ir aqui. Isto ia levar-nos aos marrons, verde. Então, se clicarmos no ícone, ele nos levará de volta para casa. Se clicarmos nisso, ele irá para a página de detalhes. Tudo bem. Então, muito, muito rapidamente lá. Acabei de criar um fluxo e alguns cliques. Então, esta é uma forma de prototipagem, mas não está no meu telefone. Está no site. Agora, eu poderia publicar o URL, eu poderia compartilhar isso. Frequentemente fazemos isso para compartilhar com os clientes ou compartilhar com os programadores depois de ter feito pouco mais de arrumação e um pouco mais de trabalho de design e terminar alguns dos outros quadros de arame para essas páginas. Mas eu quero colocar isso no meu telefone.
17. Introdução ao Flinto: Vou trazer o Flinto. No Flinto aqui, o que comecei a fazer montar todas as telas diferentes que criei no Azure. Agora, como eu disse antes, você poderia ter feito isso no Illustrator, você poderia ter feito isso no papel, e então digitalizá-los e/ou tirar fotos deles, e cortá-los no Photoshop. Há todos os tipos de maneiras pelas quais você pode reunir todos esses elementos. Só te mostrei uma maneira de o fazer. É a maneira que eu gosto de trabalhar atualmente, mas
há muitas maneiras diferentes de realmente chegar a este ponto. Então o que estamos vendo são diferentes telas do iPhone, e o que eu fiz foi colocar todos os diferentes elementos lá, e o que eu estou mostrando são estados adjacentes da tela. Então, esta é a página inicial ou a página de detalhes da porta, e a tela ao lado dela, estou mostrando onde ativei o menu, a navegação de hambúrguer. Você pode ver que eu fiz algumas pequenas mudanças. Mudei a marca para colocar o ícone de hambúrguer no canto superior esquerdo. Eu fiz isso para que eu possa ter este painel
deslizando sobre onde eu posso ver os diferentes estados de navegação. Eu tenho vários tratamentos de portas diferentes aqui que eu vou estar deslizando sobre o fundo. Além disso, você pode ver nossa página de detalhes do produto aqui. Esta é realmente a página inteira, e nós temos um recurso de slide para que possamos deslizar para cima e para baixo, rolar para cima e para baixo essa página, ser capaz de olhar para isso. Então, o que fizemos foi costurado todas essas páginas juntas para que possamos ativar portas coloridas diferentes. Então, havia algumas coisas muito específicas que eu queria fazer, e por que eu quero colocar isso neste aplicativo é porque eles têm algumas transições bonitas aqui e eu posso personalizar essas transições. Um dos mais importantes é como eu realmente deslizo a porta para frente e para trás, e é por isso que eu queria trazer todos esses elementos para Flinto para fazer isso acontecer.
18. Transições: Uma das características mais importantes e centrais para este app que
falamos é como eu quero ser capaz de deslizar essas portas sobre a câmera. Então, eu vou ativar a câmera automaticamente quando
o aplicativo abrir e, em seguida, eu quero ser capaz de deslizar esses produtos sobre esta visão de câmera que eu tenho aberto na minha tela. Então, vamos dar uma olhada nas transições lá, eu vou até aqui e dizer, “Editar Transição”. Esta é uma das grandes características de Flinto, ele me permite mostrar, aqui vamos apenas fazê-lo em câmera lenta, a tela anterior que tem uma porta branca sobre ele e o que eu quero ser
capaz de fazer é deslizar a porta branca e trazer em uma porta de madeira, então vamos apenas olhar para isso novamente. Então, em uma ação muito específica aqui, eu disse que eu quero que a porta esteja em um ângulo e está no lado direito, eu quero que ela deslize e então eu vou posicioná-la, eu estaria fazendo isso com meu polegar como um usuário, mas então ele se forma em uma posição central é absolutamente vertical. Há talvez um zoom de pensão recursos, eu poderia dimensionar isso e quando se trata de realmente desenvolver este aplicativo, eu vou falar com os desenvolvedores, eu vou escrever notas junto com o protótipo para dizer aos desenvolvedores como esse recurso específico funcionaria. Mas este aqui, é algo que eu realmente quero ser capaz de fazer um design personalizado e animá-lo mostrar aos desenvolvedores exatamente como eu quero que essa porta deslize para dentro. Então essa é uma ação muito específica e eu estou emocionado que eu sou realmente capaz de fazer isso usando um conjunto muito simples de ferramentas. Então, vamos apenas olhar para algumas das outras transições. Falamos sobre o ícone do hambúrguer, então essa é outra transição que eu realmente queria fazer especificamente. Esta é a tela antes de clicar no ícone de hambúrguer e, em seguida, se eu clicar nele, esta página desliza sobre e a navegação desliza para dentro. Vamos ver isso de novo, devagar. Então, a ação que eu tenho aqui, isso é antes de eu clicar no ícone de hambúrguer e então eu clicar no ícone de hambúrguer, e você pode ver que a navegação foi realmente reduzida e deslizou para dentro,
estava em ângulo de 20 graus e então tornou-se em uma posição horizontal. Então, vamos sair disso. Então, essas são algumas transições lá, nós temos a mesma coisa acontecendo aqui em baixo, novamente trazendo o ícone de hambúrguer
na navegação primária quando eu estou no recurso de mapa, é claro
que aconteceu com todas essas telas, mas eu não vou passar e animar tudo isso para estes, isso vai me levar muito tempo e eu realmente não preciso fazer isso novamente para este recurso protótipo. Mas uma das outras coisas que eu preciso fazer e que nós conversamos, é poder mudar a cor da porta. Então, esta tela aqui irá realmente vincular a esta página, que você
possa ver a linha vermelha se destaca. Então, se eu clicar no ícone marrom lá, a porta
marrom aparecerá. Se eu clicar na cor rosa, a porta rosa entrará. Então, estas são apenas algumas transações muito simples e eu acabei de fazer um cross-fade como o método de transição para esse recurso específico. Então se trata de página de rolagem longa e sabemos que vamos precisar rolar para baixo, então vamos voltar para ativar, aqui vamos nós, você pode ver que esta é a área de rolagem e eu coloquei em algumas instruções aqui que ele tem um pequeno salto para ele e ele vai rolar verticalmente para cima e para baixo na página. Então, muito rapidamente, eu fui da ideação
conceitual em termos de um sitemap, wire-frames, fiz alguns fluxos breves,
em seguida, criei os projetos de arame para essas telas específicas, eu os puxei aqui, ideação
conceitual em termos de um sitemap,
wire-frames, fiz alguns fluxos breves,
em seguida,criei os projetos de arame para essas telas específicas,
eu os puxei aqui,
copiou e colou-os. Eu comecei a criar alguns elementos de transição e eu tenho o começo de um protótipo aqui. Então, vamos dar uma olhada muito rapidamente em seu modo de visualização, sobre
como isso realmente pode funcionar. Então, aqui está a tela de visualização, vamos apenas para a tela inicial lá, então aqui está e há aquela ação de porta que eu queria, então isso será um dedo polegar no telefone. Então, você pode ver que eu estou na porta branca lá e eu posso deslizar cima e trazer esta porta de madeira, eu posso passar a porta de madeira para cima e eu posso trazer esta porta de vidro. Então, eu tenho minha ação acontecendo lá que parece
estar funcionando exatamente da maneira que eu queria,
vamos olhar para o recurso hambúrguer. Ok, então vá de lá para onde comprar, lá está de volta a esta página.
19. Exportando para seu telefone: Então, agora, que chegamos a um ponto em que temos um número de telas
diferentes e tentamos várias transições diferentes, efeitos
e links, agora eu quero colocar isso no meu telefone para que eu
possa começar a sentir como ele realmente funciona em um dispositivo smartphone. Eu quero enviá-lo para alguns dos meus colegas o mais rápido possível e obter seus comentários, e aprender com eles o que eles vêem está funcionando e o que não está funcionando, e como eles gostam do aplicativo e de toda a experiência do aplicativo. Eu só vou compartilhá-lo e eu vou enviá-lo para mim mesmo como um e-mail, eu posso enviá-lo para outras pessoas também. Então, lá vamos nós. Vou chamá-lo de protótipo de Flinto, e isso vai chegar no meu telefone.
20. Aplicativo finalizado: Então aqui está meu e-mail com o protótipo de Flinto nele, e o que eu tenho aqui é o aplicativo Flinto que eu
baixei que então carrega o protótipo que eu construí nele e aqui está. Então, este é o meu aplicativo com o recurso de furto que eu estava muito interessado em ver como isso realmente funcionaria. Então, isso é ótimo. Isso parece estar indo bem para mim. Aqui está a página de detalhes do produto com o recurso deslizante, a página de rolagem, rolagem longa. Vamos voltar,
voltar para esta página, voltar para a página inicial aqui. Alguns dos outros recursos que estávamos olhando é o lugar onde comprar recurso de modo que esta é esta página aqui. Ainda não fiz nada com o recurso de pesquisa ou alterando meu CEP. Então essas seriam algumas das outras coisas que eu
estaria querendo olhar agora e talvez esta seja uma área de rolagem embaixo com todos esses locais diferentes nele. Isso seria algo que eu gostaria de começar a olhar ou o que acontece quando eu realmente tocar em alguns desses marcadores no mapa. Vamos voltar para a página inicial a partir daqui. A outra característica principal que estamos olhando era a capacidade de ser capaz de realmente colorir ou mudar a cor da porta que eu realmente deslizei sobre a visão da câmera. Tudo bem, então, aí está. Em um período de tempo relativamente curto, passamos por uma série de etapas diferentes, antes de tudo, olhando para os recursos e as funções que queremos ter este app, para
quem ele realmente é, realmente olhando e pensando nesse público-alvo, pensando na plataforma que realmente queremos construir isso, neste caso, iPhone 6 Plus neste caso. Então fomos para o sitemap, fluxos, processo de wireframing, então pegamos os wireframes, colocamos eles em Flinto e depois criamos essas transições e criamos algo que agora podemos compartilhar com outras pessoas e então eu posso agora experimentar e realmente determinar se isso está realmente funcionando para mim da maneira que eu quero? Eu realmente gosto deste recurso de deslizar? Existe, talvez, uma maneira melhor de fazer essa transição? Eu quero ter um fundo branco por trás disso? Talvez não. Talvez estas cores possam realmente estar mais no espaço aqui através da minha visão de câmera neste fundo particular. Eu também não fiz o próximo recurso principal que seria o que acontece quando eu tirar uma foto aqui, clique na câmera e depois compartilhá-lo. Então essas foram algumas das outras coisas importantes que eu quero ser capaz de adicionar a este protótipo e é aí que estamos tão longe neste momento.
21. Finalização: Então, passamos por várias etapas e etapas diferentes e usando diferentes ferramentas para colocar a ideia do conceito prototipada e em seu smartphone. Muito obrigado por fazer este curso, e estou muito ansioso para ver o que você faz e o que você produz e os protótipos que você inventa. Por favor, sinta-se livre para entrar em contato comigo e compartilhar seus conceitos e protótipos. Eu adoraria ver o que você faz, e estou ansioso para ter a conexão e espero ver seu aplicativo na iTunes Store em breve.
Ronnie Peters, Founder and CEO at 360 Design
