Conceitos básicos de design de UX - crie um protótipo responsivo no Axure RP

1. O que é prototipagem?: Bem-vindo ao básico de problemas de toque. Eu sou Sophia Me. Ele realmente parou o homem. É experiente em design de experiência do usuário e seus tipos de problemas tem uma medalha de comunicação com os clientes para levar as pessoas antes do desenvolvimento. Qual é o protótipo? Proteger é uma simulação de como as coisas que o irmão vai parecer, e é uma mensagem comumente usada. Experiência do usuário Design Esposa Total Agindo Tipo de irmão útil Ajuda a limpar os custos de desenvolvimento facilita a comunicação com as partes interessadas e clientes e ajuda a testar ideias e conceitos médicos , para entender seus Desejo. Neste último, vamos ter que criar um protótipo de um site de negócios em tablet, celular e desktop. Não é necessário para este último e nenhuma habilidade de codificação necessária até o final desta aula e deve ser capaz de criar seus próprios protótipos e certamente com seus colegas e clientes. Vamos começar 2. Instalando o Axure RP: antes de começarmos com a criação da nossa primeira esposa, precisamos ter uma avariada para esta aula. Vou usar a terapia de verdade como nosso Salter para criar namorados. Podemos baixar o banco do site deles. Na verdade, esta é a minha ferramenta de prototipagem favorita. Como ele tem muitas capacidades para o trabalho em equipe, para publicação e para a geração de documentação. A ferramenta é muito fácil de usar apenas para trás e soltar recursos do lado esquerdo da tela Ele tem muitos estados diferentes, . então, por exemplo, podemos mudar uma tela com base em diferentes estados. Também podemos criar diagramas de fluxo, por exemplo, condições. Por exemplo. Podemos validar formulários que podemos e as direções no pico. Podemos mudar os EUA. EUA Você pode ver aqui também. Podemos fazer a dinâmica Colton. Podemos ajudar diferentes alimentadores, diferentes listas suspensas. É muito, muito flexível. Também é muito fácil de compartilhar. Isso arquiva os 15 membros porque você pode me publicar na unidade de compartilhamento real on-line. Se você entender que você é um link que você diz respeito vir proteger também ser possível e basicamente, recomendação. Também é bom para porque você pode modelar fluxos de usuário Como o usuário deve navegar no site . Quais são os próximos estados permitidos? Quando os usuários no site do artigo específico e foi um possível significado de documentação geral , por exemplo, você pode gerar documentação em uma ala com todas as telas fora marcações que você fez e , em seguida, alguns explicação em ter debates sobre o que esta página é suposto, e esta pode ser uma ótima maneira. Informar os desenvolvedores como eles têm que ser basicamente site. Portanto, é especialmente útil se você estiver trabalhando com coisas e, em seguida, por último, mas não menos importante, você também pode gerar código HTML, ou seja, se criarmos aqui esta página, por exemplo, podemos gerar portões de marketing e ouro para ele. Então é um futuro muito, muito frio se você quiser criar sites de morte e eu não quero gastar muito dinheiro com isso. É realmente ótimo para colaboração e prototipagem rápida. E é realmente a necessidade de ST Líder como eles dizem. Então eu convido você a ir em frente e baixar o teste, então eu vou agora para baixo. É tão bem que eu vou instalá-lo. Voltar para você com Não comece 3. Primeiros passos com Axure RP: tenho agora em Seul, Doutor, sendo meu computador e eu estou pronto para começar a mostrar-lhe como você pode obter protótipos. Com a primeira vez que você abre. Na verdade, sendo seu computador, você vai ter esse trabalho em meus lugares. Se você estiver usando uma versão de avaliação, veremos que você tem 30 dias restantes para que você possa comprar uma licença ou final da licença Mantenha o seu problema tudo o que você pode olhar para a conta pessoal, . mas você não fazê-lo para esta demonstração e você ainda pode usar para tentar por 30 dias sem quaisquer problemas. Basicamente, aqui você pode criar tanto sabia cinco ou você pode abrir arquivos existentes. No momento em que não temos nenhuma luta, Skip, então nós iria para você lutar e você também está indo para obter este interativo passo a passo tutorial, que explica você, como dá real abusivo ou você, Se decidiste, dizes para não apareceres de perto. Vou clicar em um novo cinco. Então, basicamente, agora esse Sr. Desaparecido e eu podemos dar a você uma explicação sobre como você poderia usar depois Então, por exemplo, no topo da página temos que comprar aqui temos ações sobre a luta. Por exemplo, Fim de Semana 85. Adotar como queremos nossa isca, quais elementos queremos ver quando trabalhamos com ela. Podemos ter um pouco. Provavelmente visto uma amostra de esporte foram publicados na célula após on-line, onde conservamos o link para um ataque cardíaco com diferentes usuários. Podemos gerar os arquivos HTML a partir de que podemos gerar especificação Ward. Estas são ações mais avançadas para esta demonstração. Não precisamos, mas você pode pegar. Também podemos criar a equipe. Cinco. Nós podemos criar um projeto de equipe basicamente, e nós podemos trabalhar com meus colegas de equipe na mesma luta, e nós podemos adotá-los. Isso também é mais adversários configuração, que está fora do escopo deste treinamento. Mas você também pode estar olhando para sua conta salva. Cinco. Abra se eu trazer exportar basicamente todas as configurações padrão de cada software no lado esquerdo dos dois, não temos mais importante nas páginas de seção que podemos editar, excluir ou duplicar. Os salários foram pagos. Se eu clicar duas vezes em um determinado item, eu poderia nomear Então, por exemplo, eu posso nomear este site aparece. Francamente, comentou. Isto está salvo. Então eu posso renomear também pago para o som. Eu posso apagar isca tomando evento como você excluir ou apenas pressionando o fundo. Eu também posso todos não se basear se eu cavar e soltá-los, ou tomando Divide pico e eles vão movê-los para fora. É o mesmo para bebês recuados. Basicamente, você tem falado com cada pavimentado da maneira que você quer criar a estátua do seu tamanho. Também é possível criar uma nova base apenas clicando neste ícone, você pode dar o nome. Você não pode ser assim, todos procurando, por exemplo, regular multi boot. Quais páginas foram seção específica do site enfraquecido nome, por exemplo, thes nossos produtos e, em seguida, podemos arrastar várias páginas sob ele. Assim podemos criar isso. Isso é o que queremos ter mais fácil para você. E se tivermos várias páginas, o que também podemos fazer é usar a função de busca. Então, para algumas pessoas teriam 100 páginas aqui. Eu poderia fazer diários e encontrar mercado baseado digitando. Ele nos procura, garotas. Então é assim que podemos monitorar páginas seção mal pago. Você vai encontrar as bibliotecas sexuais. Bibliotecas são elementos de coleção. Há um monte de bibliotecas diferentes Quem realmente tem isso? Stephen era basicamente nós temos nossas formas teriam formas Goldman. São espaços reservados para imagens. Só que eu posso criar espaços reservados, espaço reservado através de um lugar. Mantenha-se estável na página, mas podemos substituí-la. Nós temos fundos maneira ter aparência. Temos cabeçalhos. Temos nossos altos de trabalhadores de aliança bombardeiros dinâmicos que monetizam se você que pode ser adotado negócios. Então, por exemplo, pessoas Isto é que então isto é algum tipo. Claro que podemos ter na vida. Temos áreas de texto. Próximo. Isso é basicamente isso lá embaixo não fornece. Gosta de uma desculpa? Opções, por exemplo, integra-se com diferentes escolas se ou outros tipos de sites. Você poderia dominar essas bibliotecas importantes e você pode usar portas. E, basicamente, quais tópicos? Teríamos os fundos desta vez. Espere seis. Você pode fazer isso. Mas isso é mais avançado. Não vou precisar de escoceses. Mas você é diferente. Você faz com James Library. Você vê, aquele que perturba mudar de novo. O estilo Basicamente estes são todos com elementos holandeses usados, mas você poderia fluir diagramas tão envolvidos. Este último não é apenas fazer isso para um anel de esposa para sites, então eu gostaria de estar neste. A última é a biblioteca, que é “eu não”. Isto também começou acampamentos de bibliotecas. Ainda neste um oferece com alguns Eichel. Então, por exemplo, se você quiser ter um pouco mais sofisticado para o meu amigo e colar justiça formas básicas, vamos ver Ahmadi de acordo nascido para o costume da explicação dos novos clientes. Então esta é a maneira que você pode fazer isso. Excelente toque. Cinco anos. Você ouve suas múltiplas formas para falar, para usar do jeito que quiser. Vá em frente, espere sob a seção da biblioteca dos mestres. Monstros, componentes muito genéricos podem ser mercado raciocinado. Então, basicamente, criando mestre seu elemento que pode cada site me para algo que eu gostaria de ter um lugar. É um ótimo site. O local sempre vem com o local de trabalho esquerdo. Continue em pé direito, Austin. Então eu diria que seu local e basicamente eu posso selecionar lugar em qualquer lugar que significa que eu posso ou eu posso olhar localização mestre que ele permanece no mesmo local cada vez que eu dou. Então, se eu fizesse isso, agora tenho um mestre. Este é o mestre. Você vai para destinos diferentes e ficar no lugar do estado. Então esta é uma ótima maneira de ter alguns parceiros locais. Já comeu comida ou outras coisas que não mudam de lado? Se você criar a maioria dos mestres na seção do meio, temos nosso principal local de trabalho. Aqui podemos ver as páginas que temos abertas. Podemos clicar através deles para alterar a vista que podemos fechar páginas. Nós não precisamos abrir e como você pode ver aqui, há alguns números à esquerda e a horizontal de cima fora da base. Basicamente, o que o é é que eles mostram quantos pixels os elementos que você está criando. Tome. Isso significaria que o meu logotipo leva cerca de um pouco mais de 150 Escolha, desde que eu posso ver exatamente quantas picaretas é. Isto é, se eu clicar em um elemento. Por exemplo, se eu clicar nesta parte inferior, Eu posso ver nesta seção, mas a largura deste 140 pixels. A altura é de 42 imagens. Isso é muito útil porque quando você é criativo, sites responsivos para dispositivos móveis e tablets usam. Você precisa saber quais são os ossos de ruptura foram, por exemplo, qual é o peso máximo e altura que você pode usar quando você faz uma esposa. Então, a fim de ajudá-lo para isso, você pode fazer todos esses guias clicando Hugh ter sido Dragon Doping um guia. Esta é basicamente uma linha prática que vai ajudá-lo a identificar. Em que você acredita? É o mesmo que você pode fazer clicando no topo aqui, Bates e soltando até aqui. Então isso ajudaria você quando você está criando um quadro de arame para saber qual é o espaço máximo e desta forma ou não excedê-lo. Por último, mas não menos importante, do lado direito da sua página. Temos os elementos de estilo que você pode ver aqui. Três banheiras, propriedades, notas e estilo na propriedade. Pare. Não podemos interações, então basicamente, interações são todas as ações que acontecerão com base em um certo gatilho. Digamos, por exemplo, que cada vez que você clicar no logotipo você deseja navegar para a página inicial. Basicamente, isso aconteceria. Seja uma interação. Ok, este é um mestre, mas vou usar outra imagem desta demonstração. Então, quando você clica nele, você pode dizer no clique. E então aqui nesta lista, você pode ver todas as ações possíveis que você pode programar. Basicamente, há um enorme mínimo que tudo é possível, então brinque com ele e veja o que se adapta às suas necessidades. Mas um dos mais jovens que quer é abrir um link, e nós podemos verdade abrir em uma janela atual na nova banheira ou em um pop-up ou uma janela pai para esta demonstração. Eu estou indo para usar Nova janela e eu vou dizer aqui, Eu nunca vou chegar em casa então basicamente pode vincular a uma página existente no quadro da minha esposa. E então eu também posso ficar, estendendo-se. Agora eu vou escolher a casa, e eu vou clicar. OK, então o que isso vai fazer se eu visualizar clicando em cinco? Então, basicamente, se eu clicar nisso, eu precisaria ir para a casa. Mas então dê uma olhada aqui. Agora estou nesta página. Se eu clicar nesta opção, ele está me levando em uma nova guia como eu disse para a base inicial. Ok, a página inicial está vazia no momento, então é por isso que parece vazia. Mas faz o que é suposto fazer. Então isso era sobre as interações, e você pode ver aqui no mínimo mais eventos. Existem muitas, muitas condições que você pode usar. Por exemplo, quando você clica na página ou quando você rola para cima ou para baixo, ou quando você alterou as bocas da tecla que você está pressionando no teclado. Há muitos eventos e você pode basicamente aprender. Este é o melhor. Você brinca com ele na nota, pare de enfraquecer nossa documentação. Então, por exemplo, se eu quisesse documentar esse cara, eu diria, Oh, este é um lugar para qualquer coisa, por exemplo. Então, se eu novamente visualizar isso e eu iria para a página específica, em seguida, basicamente dobrar. Olhe aqui nas notas Você pode ver aqui que este é um espaço reservado para nomeá-lo. Então isso é algum tipo de documentação que você não pode. Então, quando você está definindo o protótipo de várias pessoas que eles têm uma idéia do que isso é sobre, e então a seção de estilo do fim de semana é realmente chamar-nos uma linha, mudar os formulários, mudar a direção do imagens e tudo mais. Então isso depende realmente do tipo de que você está tendo. Por exemplo, as opções serão diferentes. Por exemplo, o fundo podemos mudar o sentimento que não podemos sombra. Então, nós clicávamos na sombra. Podemos checar esses livros de garotas e então nosso traseiro teria estendido a sombra. Então parece mais algo clicável. Podemos também dizer, fazer o quanto queremos que o dedo do pé sombra seja estendido. Então, por exemplo, se eu não aumentasse esses números para começar seria maior, eu poderia até mudar a chamada da própria sombra. Não podemos pagar uma forma diferente para o fundo. Podemos renomear o fundo aqui de nomeou seu de fundo Mick Geralmente boas práticas para nomear seus elementos porque, como você pode ver aqui no esboço, que é um resumo de tudo, temos isca suficiente. No momento em que você começar a adicionar um monte de coisas, eles mantêm o nome padrão. Então, se você não tem um nome para isso, você não pode saber do que se trata. Basicamente, quero dizer, ele dá uma boa prévia, mas é muito mais fácil rolar ao redor dessas coisas uma vez que você dá a ele um nome representativo , então nós também podemos adicionar a borda ao redor dos livros. Então agora a borda foi adicionada, ou podemos ter reto mais arredondado. Seja adotando os rádios coordenadores, por exemplo. Se eu entrasse aqui , veríamos que meu traseiro se tornasse mais redondo. Então esta é uma maneira realmente você pode estilo, embora diferentes elementos. Então esta foi uma certa produção. O que realmente escapar de um blefe? Sem mais delongas? Vamos limpar nossa mesa e começar a trabalhar no nosso primeiro protótipo. 4. Design de protótipo móvel: nesta classe, vamos criar e site Responsive, a fim de habilitar um site responsivo na verdade, precisamos verificar este talões de cheques adaptáveis. Isso permitirá que adotivo usado em nosso protótipo, a fim de definir as predefinições para o nosso uso adaptativo diferente. Temos que clicar sobre este homem inferior como uso adotivo e, basicamente, aqui vamos ser capazes de definir diferentes pontos de vista que queremos para tablets, site e celular. Eu sou um fã de celular primeiro o que significa que projetamos primeiro para a tela mais pequena e nós gradualmente mover para cima para tablet e site. Você vai ver que este metal tem vantagens como pensar sobre o mais difícil e você está no início ajuda você a se concentrar nas informações mais importantes que você tem que colocar em seu site. E você também verá no resto desta classe desta abordagem basicamente nos ajuda a projetar mais rápido, pois podemos reutilizar elementos para a versão móvel e apenas expandi-los a incluir o tablet e o site. Você Ok, Então, para começar, vamos selecionar primeiro o telefone da porta oito, que é basicamente as predefinições do telefone. Então vemos aqui que o nome é Portrait Phone no banco de testemunhas no 320 vamos adicionar outra visão, que deve ser o combustível do tablet. Como você pode ver aqui, real tem as predefinições padrão para as outras revisões, então podemos apenas selecioná-las. Note também aqui. Este campo que herdou de basicamente isso significa que quando criarmos o tablet poucos isso vai copiar o que está lá no telefone e você vai ver mais tarde o quanto isso vai nos ajudar. Vou querer os últimos. Que é a área de trabalho que você. Então nós selecionamos grande exibição e basicamente agora eu estou feito com o meu uso adotivo para que eu possa clicar em OK, se você quiser ter mais opções para o fusível adaptativo e confira a documentação de acesso sobre este tópico sobre como iniciar um uso produtivo. Então, agora usuário adaptável configurar e você pode ver aqui que temos três diferentes esporte banheira queda tablet porteiro e grande exibição não desculpa isso. Há uma linha prática que é basicamente para você quanto com você tem, você sabe, bom design e você pode ver como isso se estende para o tablet e para o desktop, então isso vai ser realmente útil. Não precisamos desenhar. Uma ordem adicional está na linha porque sua última tendência de design está no reboque. Tem rolagem infinita. Então, basicamente, não precisamos definir um máximo como a maioria dos sites e Mobil continuar rolando como vamos para baixo. Então, para estes curso, Eu me inspirou de um modelo livre que eu encontrei no livre apreende Templates site, que é este modelo. É basicamente um site de negócios com algumas informações básicas, mas eu gosto do design limpo. Então, basicamente, nós vamos inspirar tal a partir disso e grande uma versão equivalente em uma armação de arame. Você pode ver como isso adota para tablet, e se eu tornar meu navegador menor, você pode ver como isso se comporta no celular. Então, basicamente, esta é uma visão móvel. Estou me baseando neste modelo. Eu vou começar. Primeiro começarei com um cabeçalho e rodapé. Então para isso eu vou inserir o logotipo da empresa e eu vou usar um germinal humilde . Então hambúrguer Manu é basicamente essas três linhas que eu usei para navegação para fazer este um pouco maior. E porque eu quero usar essa urze em todos os lugares, eu vou criar o mestre do amor. Então, para criar um mestre, eu vou clicar nesses dois itens e eu vou digitar converter para mestre. E eu vou nomear essa Heather e eu também vou selecionar a opção localização mestre bloqueada porque eu não quero que isso se mova. Ok, então meu mestre agora foi criado. A próxima coisa que eu quero fazer é sair algumas imagens, a fim de ter algum carrossel. Então, basicamente, eu vou deixar isso em muito espaço reservado aqui, e eu vou fazer isso um Bonnel dinâmico. Ok, então preste atenção aqui no Painel Dinâmico. Podemos criar isso dizendo “cover toe dinâmico Parnham “, e eu vou nomear este estábulo dinâmico e Carcelle. Ok, então o que isso vai fazer? Basicamente, isso pode mudar a visão com base em certas condições. Então isso significaria se eu deslizasse, por exemplo, para a esquerda ou para a direita. Eu posso ver isso de forma diferente, então eu posso dizer aqui que eu posso nomear os Estados Unidos. Este é muito, e eu estou usando este. Isso é só um lugar, mas posso duplicar esses estados. Isso é só um lugar, É o caminho mais rápido. Se você está apenas usando imagens e digamos que se eu quiser usar duas ou três imagens, eu posso duplicar isso na reunião. Ok? Eu não quero usar o 3º 1 de fato, então talvez eu apenas o apague. Eu também posso mudar os estados dão uma prioridade diferente passando por eles. Vou ficar com ele. Não, como antes. E em cima disso, não vou sangrar nenhum texto. Então eu vou dizer como eles dizem no site. Somos uma agência de design mínimo. Ok, eu quero que isso entre em duas linhas. Então eu vou “Toe Dragon”. Provavelmente por aí. Posso online no meio, ser deste rei inferior. E basicamente o quê? Eu também posso fazê-lo se eu quiser personalizar o texto. Inglaterra. Aiken, pegue essa mensagem. Eu posso cortá-lo com controle e X, e eu posso colocar isso dentro do muito então se eu colocar isso aqui tudo vai ser visível em um fora dos dois estados. E digamos que no segundo, o quanto eu quero algo diferente era o texto. Então eu estou acrescentando, Aqui estamos eu iria me mover é um pouco mais se eu fizer o controle e subir este movimento ficar fala mais. Se eu apenas fizer para baixo, ele se move por um pixel indo para mover isso também. Certo, Bert. Então agora temos as duas imagens diferentes. Adicione. A próxima coisa que quero fazer é rebocar. Tenha mais informações sobre a empresa. Então, para fazer isso, vou adicionar um pouco de confiança. Olha, porque não queremos que tudo seja completamente branco. Então eu vou usar esses livros, e esta caixa será basicamente usada como um recipiente em direção a algum texto. Então, aqui podemos pegar outro rumo. Somos uma agência de design na Austrália. Isso novamente apenas me baseando no exemplo. E aqui. Ok, não podemos enviar uma mensagem no momento. Isto é apenas um teste pago. Então, eu só vou pegar o parágrafo. Ok, talvez um pouco mais de texto, e então eu vou alinhar isso na melhor maneira de alimentar o bloco. Eu também posso apenas fazer o bloco menor para que eu possa apenas, tipo, fazer o menor apenas ajustando o tamanho. Então desta forma eu também, Eu não sabia alguma informação sobre o Kobani. Ok, a próxima coisa que podemos fazer é rebocar estranho. Alguns dos serviços que fornecemos eventualmente para que possamos expandir este bloco, basicamente e não mais algumas seções. Então, se eu quiser, eu posso apenas copiar colar os rótulos para mais rápido. Então eu estou apenas copiando basting com controle C e controle ser. E eu estou indo para uma seção diferente aqui serviços que oferecemos e eu estou ficando estranho aqui. Alguns outros rótulos que eu vou para Ok, eu gostaria de ter o mesmo telefone, então eu estou indo dedo do pé. Vê? OK, isto está a usar um 14 pontos deste A 13. Vou usar os 14. Eu vou alinhar isso um pouco mais, e eu vou mover isso mais para baixo para ter um pouco de espaço limpo. Então eu vou adicionar uma mensagem de alguém. E é feito otimização, por exemplo? Então estas são todas as ofertas de serviços da empresa, então terminamos com a introdução da empresa. Agora não podemos. Alguns emerge também para torná-lo mais visual. Então o que podemos fazer é arrastar e soltar novamente. O espaço reservado 40 muito é e, em seguida, apenas que multi muito está sob o outro. Eu adoraria para imagens que estava indo colar de cópia do dedo do pé. Isto basicamente com controle C estar indo para deixar um pouco de espaço em branco entre o jogo parece o mesmo. Estou baseando este também. E e eu estamos quase terminando agora. Nós também estamos indo para o pé. Outra citação. Então, basicamente, muitas empresas às vezes citam clientes que estão satisfeitos com eles e dizem que estamos construindo um site de negócios. Podemos fazer isso também. E aqui está o contraste que podemos usar a cor mais escura para que possamos ir na seção de campo e podemos escolher um tom mais escuro de cinza. Algo assim, por exemplo. E eu vou arrastar e soltar o texto. Então, novamente eu vou soltar rótulo MM. Talvez eu esteja indo para o pé. Ou talvez o texto do parágrafo. Vou fazer isto mais pequeno. Eu vou fazer o tamanho dele maior do formado e para um pouco mais de impacto, eu vou colocar isso em itálico, vou mover um pouco do texto, e eu também vou ter os nomes, todas as pessoas que eu vou fazer. Também a cor branca, a cor do texto branca. Eu iria aqui e eu vou mudar o telefone para o colarinho branco e eu vou ter o nome do urso alguns que deu a citação. David Brown. Oh, você gosta de diretores machados, por exemplo. Isso não precisa ser em itálico. Eu só vou adotá-lo. E basicamente outra coisa que podemos fazer é ter várias aspas. Então, a fim de fazer isso, vamos usar o Carcelle em torno de pensamentos para que possamos apenas selecionar nos lábios, fazer este pouco menor, enfraquecer e subir os lados aqui, Vamos começar 15 por 15. Isso parece OK para que possamos ter múltiplos uma vez quando queremos ver a próxima citação. Eu só vou remover a borda para que eu possa fazer isso clicando neste ícone. A borda está completamente removida, e eu só vou copiar colar isso três vezes é. Temos três citações indo para mover isso em torno do meio da página, e vamos dizer que esta é a do meio. Então basicamente isso significaria que este é o ativo, e os outros precisam ser sobre cores diferentes para que possamos distinguir entre qual é o ativo. Em que testemunha não. Então eu vou usar este tipo de cinza, o mesmo para o outro. Então, novamente, esta cópia, o mais frio perfeito. Um pouco mais para recitar. E eu acho que isso é praticamente da reunião. Certo, o mesmo para o outro. Então, Kansas, copie no refrigerador. Perfeito. Um pouco mais para o lado. E eu acho que isso é praticamente da mídia. Ok, a próxima coisa vai fazer isso. O que? Algumas informações de mídia social sobre a empresa. Então não podemos Google Facebook e Twitter Icahn. Então eu vou procurar aqueles nos ícones aqui eu posso. Só procurando corda de dragão no Facebook. Tweeter. Vou reiniciá-los mais tarde. Portanto, não se preocupe com esse ícone do LinkedIn também Precisamos quando habilitado o Google. Além disso, aqui está. Acho que este é o último local. Eu posso deixar cair. Então vamos torná-los um pouco menores novamente. Vou tentar. Este é um julgamento em árabe. Praticamente assim você tem que brincar com os números. Este não parece tão bom. Assim como Dragon Dope-lo quando você está satisfeito com a forma e, em seguida, a coisa link também . Vamos fazer com que o Facebook seja menor. Sim, e vamos mover esses. Mas 12 mais alinhados e enfraquecer o nosso Aqueles foram rótulo em cima do que dizer presença nas mídias sociais, mídia social por presença social poderia fazer isso um pouco maior. E podemos selecionar esses ícones clicando assim. Podemos selecionar múltiplos uma vez, e podemos movê-los com controle e para baixo Arnold. Então eu só estou movendo isso um pouco mais de lei. E também vou adicionar informações sobre a localização do escritório. Espero que este local agora, aqui tem algum endereço de poeira agora, digamos Regent Street, Londres. Não sei se este é o ouro dos penhascos, mas tudo bem. E então nós também precisaríamos idealmente da seção de contato para que as pessoas possam entrar em contato conosco. Então, novamente, eu vou copiar estas etiquetas que eu vou dizer aqui, conduzir informações indo para o meu endereço. Eu sou um telefone. Esta é apenas a tomada para casa. Isto seria basicamente tudo o que precisamos. Deixe-me só um pó, um pouco de espaçamento. Acho que isso bastaria. E, eventualmente, também podemos adicionar algumas informações de direitos autorais. Não mereço os direitos para isto, está bem? É justo e educativo. Em qualquer caso, algo faria com que os direitos autorais envolvessem um pouco menores. Ok, isso pode ser muito pequeno, e eu vou drogar e deixar cair aqui. E acho que a minha versão móvel se foi. Então, agora, a fim de visualizar o protótipo, eu vou para a pré-visualização, tudo bem, como um cinco. E isso abrirá o navegador. E eu posso ver aqui como minha versão móvel do site seria semelhante. Então, se eu manter a maioria de rolagem, eu posso ver aqui que há mais elementos antes de eu começar com o tablet. Você eu só vou fazer esta citação carcelle significado mais então eu vou voltar para o meu protótipo e eu vou converter isso quando painel dinâmico como em tudo o que está incluído lá eu vou dizer painel dinâmico competitivo. E vou citar essas citações. Eu vou dar o nome deste dedo do tribunal porque é o 2º 1 E eu vou duplicar isso duas vezes para que eu possa obter mais dois estados e, em seguida, nome de ouro é citação um e, em seguida, legal basicamente não colocar. Três devem ser o 1º 1 e depois uma citação virá. Então, para a Corte Três, basicamente, vamos clicar duas vezes indo para entrar. Vou mudar o nome. Eu só vou me trocar aqui. Os nomes. Vou inventar algo no dia seguinte. Basicamente, este é o 3º 1 Então eles devem ser os brancos. Então, vou mudar este aqui? Não, o outro, Buck. Então agora eu tenho agora para uma gelada. Vou fazer o mesmo. Não era 108, então eu vou apenas datilografar. E este era um 138 e eu vou mudar de novo. O nome de casa. Esta pessoa vai ser um monitor digital. Como você paga? Então, estes são os clientes mais gratos. Estes três e o que eu vou fazer é eu vou agora. Volte para a casa. Quero fazer com que isto mude o estado. Então, outro painel dinâmico está pronto. Vamos programá-lo para tocar a cada cinco segundos, uma citação diferente. Para fazer isso, vamos para as direções no caso e vamos para as bruxas e depois para a banda lateral do estado. Nós vamos selecionar o painel dinâmico de aspas e eles estavam indo para dizer selecione o estado seguinte . Basicamente, isso só vai mover o painel dinâmico para o próximo estado e vamos vê-la do último ao primeiro. Isso significaria que ele repete os próximos em última análise. E então diremos Repita cada aqui. Vamos mudar isso para cinco segundos e isso também irá desencadear atraso de cinco segundos quando abrimos o site pela primeira vez. Então, se eu escolher OK aqui e eu visualizei isso, você verá que se eu entrar nessa seção, isso vai começar a mudar a cada cinco segundos. Você vê agora que mudou. Portanto, esta é uma ótima maneira de dar algum foco em alguns elementos interativos em nosso site. Poderíamos perfeitamente fazer o mesmo com muito é com este tipo de imagens ou qualquer coisa que gostamos . Então agora que são móveis. Buis terminou. Vamos passar para uma versão tablet do site 5. Design de protótipo de comprimidos: Agora que terminamos com a criação do protótipo móvel, criar o tablet e a versão desktop é um pedaço de bolo. Isto deve-se ao facto de termos definido o uso adoptivo. Então, basicamente, nossos tipos de problemas têm capital marido já nas diferentes versões. Como você pode ver aqui agora, Eu estou no tablet você e isso já é lidar com isso. O mesmo vale para a área de trabalho. Você, como você pode ver aqui, isso também foi corporativo e nós temos a brisa máxima. Está definido. Então, basicamente, a única coisa que temos que fazer é estender esse uso adaptativo para marchar nosso alvo Você. Então, basicamente, eu vou apenas clicar no cabeçalho. Eu vou dizer separatista, então isso significaria que eu iria lançar o projeto inicial da Heather. Assim posso mover isto. Eu só estou indo para lugares à esquerda e basicamente eu vou arrastar e soltar o resto dos elementos, bem como para criar o tablet você. Então o que eu vou fazer é eu vou fazer dentro da célula do carro e eu vou adotar o ver muito vir apenas ir dedo do pé, arrastá-lo e colocar o texto no meio e eu vou fazer exatamente o mesmo para o segundo. O muito e você vai ver o mesmo exatamente aqui. Então, se eu sair agora da ligação clicando em casa herói, Eu já vejo que isso foi expandido. A próxima coisa que queremos fazer é expandir nosso texto. Então vamos expandir esse cara e basicamente outra coisa poderia dar. Isso é demais. Eu vou adotar Isso não atingiu o máximo, mas ter um pouco de espaço em branco. Certo, voltando para casa novamente e adotando esse suspiro desse dedo, passar por toda a inteligência e o que também precisamos fazer é mover nossos elementos para cima, deixando um pouco de espaço branco aqui entre eles. E eu vou apenas arrastar e soltar elementos da lista basicamente, apenas selecionando-os todos juntos e de selecionar o pior. Eu não quero com isso também. Para cima. Torne este bloco um pouco menor. Perfeito. Vamos alinhar isto um pouco melhor, está bem? E então, basicamente, o único ano que temos apenas algumas coisas sobrando. Precisamos fazer com que esta imagem seja um pouco maior. Então eu vou pegar isso assim e isso basicamente vai expandir o tamanho. E eu só tenho duas opções. Ou posso fazer o mesmo manual para os outros dois onde vou apagar estes três . E vou copiar isto mais 30 vezes. Descubro que é mais fácil. Disse que me lembro das dimensões. Então eu só vou fazer isso a partir desta cópia colando-os. Posso até copiar estes dois juntos, tornar-me preguiçoso. Assim não posso decidir conceber Pastor. Então eu já tenho 40 Muito está bem. Vejo agora que o meu quarteirão por trás do marido não fez o que posso fazer porque me lembro onde estava. Eu vou direito Clique aqui e eu vou dizer selecione. Tudo pertence e o que isso faz é selecionar todos os elementos sob minha cela. Uma ótima localização. Eu vou responder como esta imagem, e eu vou apenas mover aqueles com controle e empilhados para baixo Perfeito. Então agora o apareceu novamente, e eu vou apenas arrastar esta citação. Ok? É um equilíbrio dinâmico, ou posso arrastá-lo. Isso significa que eu tenho que entrar nele, e eu tenho que expandi-lo dessa maneira. Eu também gostaria de ter algum espaço, mas não me lembro como parece. Então eu vou novamente fora da perda de cabelo, meu buba, que pode reiniciá-lo indo a visão do dedo do pé. É você? Ok, agora eu tenho o meu Sim. Ok. Perfeito. Parece realmente bom. Então eu vou voltar para o painel. Posso copiar estas dimensões para as outras imagens. Bem, basta arrastar e soltar o texto para expandir toda a exibição. Mova o texto entre mais amor. Aí está você. E então vamos fazer esse retângulo um pouco menor. Não precisamos de muito espaço. E vamos fazer exatamente o mesmo. Então eu vou apenas lidar com essas dimensões para o segundo bloco. O outro foi 743 por engano. Nenhum livro para nós. Eu tirei de novo. Então eu posso ir em todos os quarteirões e o médico corrigir o juízo e a altura porque eu não me lembro de cor. Eu só vou para o primeiro estado. Eu acho que eles estão no retângulo e então eu posso ver aqui as alturas da inteligência. Perfeito. Então isso também está feito agora. E a última coisa são os detalhes de contato que eu posso apenas arrastar e soltar impacto aqui. Não há tanta informação. Segundo, mantenha-o fora disto. Mas o que eu também posso fazer é ter esses blocos para dois significando que eu posso mover isso, contatar a comissão para a direita e criar desta forma Duas colunas sobre no meio da isca. Algo assim. E eu posso mover a presença social aqui e todos os direitos reservados assinados para o lado direito , ou eventualmente roubar sob as imagens. Mas eu posso fazer assim. Desta forma, eu também posso economizar espaço e ter um você mais adaptável. Então vamos visualizar isso e, basicamente, ainda vemos que a visão móvel está aqui. Para a exibição tabla, temos que clicar aqui e, em seguida, selecionar adotivo você e selecionar o tablet retrato correto significando . Isso basicamente nos mostrará o tablet projetado para que possamos ver aqui que são design foi adotado . Na verdade, parece mais com uma visão de tablet. Então era uma garota. Vamos ver as mudanças que fizemos e parece muito bom e eu posso vender com as cotações também está se movendo. No próximo vídeo, vamos continuar com a mesma abordagem e construir a sua mesa. 6. Design de protótipo de desktop: para o design da área de trabalho. Vamos trabalhar exatamente da mesma maneira que trabalhamos para o tablet. Você Nós vamos para o adotivo você para as dimensões desesperadas grande exibição. E basicamente ele vai ver que são elementos estão roubando na página. Mas as dimensões máximas foram aumentadas para 1200 pixels. Nós vamos trabalhar da mesma maneira e expandir esses elementos para tomar a maior parte da página em um telefone celular e tablet você Nós usamos este hambúrguer, Manu para a navegação na área de trabalho. Podemos substituir este hambúrguer Manu por uma navegação completa para que não possamos realmente rotular quaisquer links para nossos usuários na navegação no site. Portanto, vamos excluir essa navegação. Manu, vamos adicionar rótulos de verdade. Vou usar o trabalho em casa para que o usuário possa fumar. Voltamos para as tranças de casa nossos serviços. Basicamente, estou combinando o conteúdo fora da página com um Manu de navegação. Esta é a coisa mais lógica para o usuário navegar dentro do continente. A próxima coisa seria o nosso portfólio. Se você ver que isso entra em linha, isso significa que a bruxa má não é grande o suficiente. Então, apenas caminhe e espero. Então temos nossos depoimentos. Assim, as citações dos clientes melhor rolando sob a página. Vamos mover essas coisas um pouco mais para o site e torná-las um pouco menores. Algo assim. E agora vou alinhar melhor o espaçamento. Eu também vou ter o link para os contatos. Basicamente, eu quero que este seja o mais próximo possível do final da página. Alguém foi provado o espaçamento ainda mais, algo assim. E agora a próxima coisa é o dedo do pé, fazer isso parecer muito máximo com Ok, vamos fazer isso. Temos que entrar na família dinâmica e basicamente usar nossos guias aqui para usar todo o espaço na linha. Isto no meio da mesma maneira para o outro. O que parece. Então, se voltarmos para a casa, Bates, podemos ver que isso está feito agora. Ok, a imagem é um pouco pequena, então o que podemos, de fato, também fazer é torná-la maior. Bem, o espaço prático desde que temos o espaço no disco para cima, lugares têm sido mais abaixo do alto Tous Digamos que nós torná-lo três mancando Por razões práticas vamos fazer o mesmo para o outro. Então, se voltarmos para casa, mas devemos ver que este é realmente maior agora. Sim, Ok, novamente, temos o mesmo problema que existem elementos por trás surgiram em nossa página enfraquecer apenas para o mesmo truque nós antes tão selecionável abaixo. E então com controle e seta para baixo, podemos mover essas coisas para baixo. Ok, então agora eu posso ver novamente de volta o meu muito. Agora você tem que atualizar este texto para tomar também o máximo de espaço. Então vamos arrastar e soltar este bloco para o lado máximo e o texto também pode ser expandido mais. Na verdade, o que podemos fazer é manter isso assim e podemos colocar os serviços que oferecemos exatamente ao lado dele. O que também podemos fazer é inserir para melhorar os telefones. Então devemos fazer os telefones um pouco maiores porque o espaço na tela é maior. Ok, Este texto pode ser também Ingres em tamanho. Então agora temos que melhorar o espaçamento entre esses elementos Vamos movê-los um pouco mais para baixo, ter um pouco de espaço entre eles. Vamos fazer o mesmo com a nossa segunda coluna. Alguém para aumentar de novo. Deformado. Estes outros itens são bem, isso é invisível. Deslocando entre eles. Não, isso deve ser bom. O baixo também pode ser bits menores. Está bem, Perfeito. E agora nós já temos muito é o que nós não vamos fazer é rebocar aumentar as simetrias e colocar realmente em sua linha. Então nós vamos fazer aqueles fora de tamanho igual, e eu vou apenas excluir esses e basicamente apenas copiar colar, como eu fiz na visualização tablet e celular. Muchas Eles estão feitos. Eu copiaria novamente. Então nós não temos seis emerge e, em seguida, a próxima coisa a fazer é rebocar aumentar o tamanho das cotações têm a inteligência máxima. Então eu estou indo novamente para dentro do painel dinâmico, e eu vou fazer este atirador usado inteligente. Eu só quero viver 10 pixels, então este seria sobre o tamanho correto. Vou colocar isso um pouco mais no meio e fazer a linha tomar todo o espaço. Algo assim. Eu vou ser estranho no Magoo. Vou mover essas coisas. E este, o nome da pessoa estava bem no meio. Farei exatamente o mesmo para o segundo estado e voltarei para você. Ok, estou de volta. As citações estão feitas agora. Eu também não responder alguns outros elementos do site para o espaço ideal. Eu vou sair para mover esses casacos dele mais para cima e a última coisa que eu vou fazer é atualizar as informações de contato para todos entrar em uma linha. Então eu vou mover esses elementos. Oh, aqui para estar do mesmo lado. Basicamente meu site está feito, então se você ver isso, parece muito bom. Então vamos revisá-lo. Sim, então temos nossa navegação completa. Manu, já temos nozes. Temos a descrição dos serviços. Temos os exemplos do portfólio. Temos o curso deles se movendo e temos nossa comida. Então, basicamente, nosso site é completo como um passo opcional. Você pode preencher este site com imagens personalizadas ou cores ou telefones e o site vai olhar muito mais realista. E como um resultado real, eu vou preencher este site nos três diferentes usos adaptativos com algumas fotos e telefones, e eu vou voltar para você para mostrar o resultado. 7. Publicação e compartilhando seu protótipo: têm agora as imagens coloridas para o meu protótipo, e eu estou pronto para pré-visualizar isso. Como você pode ver aqui, parece um site real. Eu incomodei imagens, então você poderia mostrar isso a um cliente antes de investir aqui para eles construindo um site real. Nós também podemos olhar uma visão de topless para que você possa ver esses parece exatamente o mesmo. Mas tem o adotivo você tablet e o mesmo vale para o telefone celular. Então você pode ver que grande diferença o colorido que você muito é fazer. Então, basicamente, seu site está pronto. Você pode visualizar isso para um cliente e você pode o cliente e dar-lhe todas as adaptações que ele quer. Mas o esforço que você tem que gastar em mudar isso é mínimo. E esta é uma ótima maneira de realmente desenvolver produtos a partir do zero em uma última vez sem ter que gastar dinheiro adicional. E o recurso está em retrabalho. Outra grande coisa sobre as ações que os comentários é que se você disse isso Toto, isso vai redimensionar com base no tamanho do navegador. Então, basicamente, como você vê aqui, isso se tornou agora o tablet poucos e então se eu torná-lo menor, ele vai encolher o dedo do pé Botham acima de você. Aqui está. Você pode ver aqui o celular de você. Um dos recursos mais úteis que realmente r p fornece é a publicação e recursos sírios . Basicamente, se você é feito com este problema aconteceu, você quer compartilhá-lo com várias pessoas. Há várias maneiras que você pode fazê-lo se a outra pessoa também está usando realmente ser. Você pode exportar o disparo de RPI salvando. Então, basicamente, quando você salvar isso, você vai obter o arquivo real e ele vai ser um arquivo RB. Esta é uma maneira, as outras maneiras de publicá-lo de forma eficaz on-line. Então você vê aqui se você vai para Publix, você tem a opção publicou compartilhamento de corrupção. Então o que isso basicamente faz é se você for derrubado a parte nociva, eu vou te mostrar como fazer isso. Você vai realmente compartilhar ponto com. Então, basicamente, este é o ambiente de linha fora real que lhe dá de graça para um usuário para hospedar seus sites. Eu já tenho uma conta, mas sinta-se livre para ir e se inscrever se você não tem É muito fácil. Então eu vou olhar para dentro e você pode ver aqui que eu tenho meu espaço de trabalho e meus projetos. Basicamente, nesses arquivos, posso enviar meus protótipos e compartilhá-los com a palavra dele com outras pessoas. Então, se eu fizer a opção de publicação aqui depois de um longo verde, então eu preciso olhar aqui novamente. Você tem agora. Acabei de abrir no navegador, então isso é normal. Então você só que usa a mesma conta que você tem, e então ele vai buscar basicamente todas as pastas que você tem em seu compartilhamento para que você possa dar nome. Você pode definir a atividade de configuração. Quem visita a alteração? Você pode definir uma senha. Isso também é muito útil no caso de você não querer que ninguém seja capaz de acessá-lo. E você pode selecionar um dos detentores existentes que você tem. Por exemplo, eu. Eu só tenho o meu titular de projetos, mas eu poderia perfeitamente fazer uma pasta para diferentes projetos que eu trabalho. Então eu só vou usar este aqui. Ok, ele selecionou. Então agora eu apenas clique em publicar e isso vai ser enviado para o Sr. Dive em ele vai me dar este link, então este vai ser o link que eu posso compartilhar. E se você não quiser ter esta barra lateral à esquerda que você tem, uma é gerada. Você pode selecionar essa opção sem a barra lateral. OK, está feito. Eu vou lidar com isso. Então, eu só estou indo para o dedo baseado aqui no navegador. E você pode ver aqui que isso é acessível para todos, então eu posso dizer isso com clientes ou com colegas. Eu posso marcar. É muito fácil se você já publicou o arquivo e você só quer fazer adaptações ou Newton republicado novamente, você só vai publicar o Doctor senhor e, em seguida, atualizar o projeto existente. E, a partir desta lista, você pode selecionar o projeto em que está trabalhando. A última maneira que você pode publicar é gerar arquivos HTML, então isso basicamente geraria o HTML frio. Vamos fazer isto. Você precisa selecionar a pasta que deseja usar, e há algumas opções adicionais, por exemplo, para quais navegadores devem funcionar. Então, se você quiser ter a barra lateral e, em seguida, opções extras como o uso adotivo e, em seguida, você pode até mesmo selecionar as páginas que você quer e algumas coisas adicionais por padrão, tudo selecionado. Mas vá em frente e personalizar é o que você quer. Então, se eu gerar isso, você sente aqui que o caminho é arquivar documentos Sophia. Ou basicamente está publicando isso no meu computador. Então, basicamente, eu só navego por este caminho. Considere a pasta foi criada para HTML. Mas aqui está 15 e você pode ver que eu posso abrir isso. Está bem, Perfeito. Então, para o meu computador pode abrir isso. Então, basicamente, eu posso dar isso a um desenvolvedor. Se eu estiver satisfeito com o projeto dele. O concurso de desenvolvedores. Integrar este uploads em um servidor no site da Web está realmente pronto, para você possa ver que é código simples é feito. Se você abrir isso com uma nota, mas ou com outra ferramenta de desenvolvimento, você vê aqui que todo o código HTML é gerado. Isso é muito, muito útil, porque se você quer apenas um site simples como este, não há razão. Basicamente, dedo do pé desenvolvedor urso fazer as obras até a partir de Scotch para você, se você está satisfeito com seu projetado você mesmo. Então, agora que sabemos como fazer um quadro de arame e publicá-lo on-line, vamos passar para o projeto de classe 8. Projeto do curso: para o projeto de classe. O desafio é criar o seu próprio uso do site, sendo realmente as técnicas que aprendemos nesta classe para criar um site de sua escolha, seja para bloquear um site profissional, uma loja Web ou qualquer outra coisa que você possa vir para cima com. Você pode torná-lo responsivo se quiser, mas não é necessário. Apenas certifique-se de publicá-lo e compartilhar o link conosco. Na seção do projeto da classe, você pode encontrar a seção do projeto da classe sob a classe na seção do seu projeto. Aqui, você pode encontrar mais descrições, e você pode ver alguns sites onde você pode se inspirar para criar o seu próprio. Então, basta postar seu projeto também aqui conosco. E eu também vou fazer upload do disparado real do site que eu criei para ajudá-lo a começar. Boa sorte. 9. Próximos passos: obrigado por investir tempo nesta aula. Agora você pode começar a criar seus próprios tipos irmãos e impressionar seus clientes e colegas . Se você gosta desta aula, por favor, goste e compartilhe e siga-me para ser notificado para novas aulas. Irmão feliz digitando.