Guia detalhado para criar quadros de fio usando maquetes de balsamiq

1. Sobre mim: Oi. Bem-vindo ao meu curso. Meu nome é Sadat e tenho vindo a projetar produtos e soluções há quase uma década. Eu comecei na indústria automobilística projetando novas ferramentas e tecnologias que tiveram um resultado direto na segurança, confiabilidade e eficiência fora da linha de produção e no usuário final tanto que eu entrei no espaço de tecnologia em tempo integral onde fiz parte da construção de soluções e serviços de tecnologia integrada de ponta para grandes organizações de idee. As soluções que implantei envolviam aprendizado de máquina, automação, tecnologias de nuvem e muito mais. Mais tarde, comecei meu próprio formulário e criei um aplicativo móvel baseado na nuvem e uma plataforma de aprendizado de música. Aprendi muitos conceitos novos sobre design, prototipagem, empreendedorismo ao longo do caminho. Adoro criar produtos e soluções de design para dispositivos móveis, web e até mesmo o mundo real. A viagem até agora tem sido divertida, envolvente e revoltante. Finalmente, e se não o aspecto mais importante é o fato de que eu amo ensinar. Então, juntem-se a mim nesta maravilhosa jornada para transformar suas idéias em vida. 2. Por que fazer este curso: Por que ele deveria fazer este curso? Bem, deixe-me começar por dar-lhe alguns fatos e números de acordo com o ponto de salário com, você um projeto para nós hoje com um salário médio em torno de US $72.000. A baixa da escala de pagamento é de cerca de US $50.000, enquanto os tops high-end de US $90.000 Eu sou um trabalho de tamanho. Publicar análises indicam que há cerca de 9000 anúncios de emprego exclusivos para você estão em seus ex-designers por mês em 2017 nos EUA, e a liderança está programada para crescer. As principais empresas globais são todas projetadas, centradas e têm equipes de design dedicadas encontram florescimento e enriquecimento da experiência do cliente em vários estágios para a variedade de produtos. Eu projetei este curso, mantendo todos os fatores duplos em mente. No final das pontuações, você saberá sobre várias metodologias de design, como personas de usuários usam à tona e muito mais. Você saberá como construir plantas de nos escrever e transformá-los em belas armações de arame . Você seria capaz de traduzir quadros de fio em quadros interativos sem escrever uma única linha. Claro, você seria capaz de compartilhar esses sobrenomes interativos com clientes, potenciais empregadores ou até mesmo investidores anjo. Cimentando suas ideias, produtos clicáveis tangíveis, acelerando seu crescimento e ambição. Então venha se juntar a mim neste curso, que é uma unidade fina informação concisa fora da indústria, conceitos relevantes e tubos cheios de ótimos visuais para tornar todo o processo de aprendizagem divertido e um idiota e, o mais importante, para obter Você começou rapidamente. Meu nome é Sadat. Por favor, suba a bordo. 3. Como obter as ferramentas prontas de Balsamiq: precisamos obter algumas ferramentas que o ajudarão a trazer sua imaginação para a tela digital . O primeiro banquinho é balsâmico. É uma ótima esposa. Framing para isso permitiria que você construísse incrível por quadros. Os quadros de arame permitem que você obtenha um fluxo e se sinta fora do seu site. Vá para a www. Aquele balsâmico não vem fazer o download. As boas pessoas do BALSAMIC têm um período de teste de 30 dias e a licença custa $89 para comprar. Eu sinto que é um grande investimento que lhe traria grandes benefícios a longo prazo. Ele tem um Mac em uma versão Windows, e por favor baixe a versão específica para seu sistema operacional. 4. Ojetivo do curso de seção: o objetivo fora das pontuações é projetar seu site. Retomando como designer de aplicativos web e móveis, você estará projetando este site do zero. Você vai começar por construir armações de arame de seu site e no processo, entender vários conceitos básicos de design, como fluxo de usuário e usar um personas culminando com o design de sintonia fina pronto para ser entregue a qualquer Aleppo. Então, sem mais delongas, vamos começar. 5. Por aprender design primeiro: uma pergunta frequente que me fazem é: Por que devo aprender? Projetado? Primeiro, quero começar com a codificação. E para isso, eu digo, como um empreendedor, não há mais ninguém que conheça sua idéia. E o que você quer construir melhor do que você? Você seria capaz de falar a maneira como o usuário acessa seu site, como ele ou ela e acompanha com seu site como o serviço é entregue a eles. Qualquer produto é um resultado final de uma série de iterações em. Ao projetar primeiro, você seria capaz de prever design, latidos pescoços, limitações de serviço e vários outros desafios que você poderia não ter conseguido no início em si. Se isso surge em um estágio posterior de desenvolvimento, ele irá definir você de volta substancialmente em relação ao tempo e dinheiro, acrescentou a maioria dos desenvolvedores cobrados por hora. Se você fizer alterações no design, são o produto durante o desenvolvimento, ele vai custar-lhe muito. Também tenha em mente que os desenvolvedores podem lhe dar feedback e informá-lo sobre os obstáculos de design de produtos ou sites, mas não é da responsabilidade de resolvê-lo para você. Os proprietários de resolvê-los repousam apenas em você. E por último, se você der a um desenvolvedor um design completo, ele seria capaz de trabalhar mais rápido e muito mais fácil de resumir. Projetado, primeiro desenvolvido O princípio seguinte ajuda você a construir um ótimo produto muito mais rápido a um custo muito otimizado. 6. Noções básicas de design: vários aspectos diferentes, como tipografia, paleta de cores, design gráfico, persona do usuário, fluxos de usuário, layout de página e muitos mais fazem parte do Web design. Enquanto o Tom Web design e desenvolvimento Web são frequentemente usados de forma intercambiável, Web design é tecnicamente um subconjunto. Fora da categoria mais ampla, fora da Web desenvolvimento codificação, ou programação, vem sob a categoria de desenvolvimento Web. Há uma relação mais branca entre representam e desenvolvedores de desenvolvimento Web. Pegue o design que você cria e recriou em um idioma que os computadores podem entender. Então, temos o site A varas em uma extremidade e a usabilidade e funcionalidade do site na outra . O objetivo do Web design é encontrar um equilíbrio entre ambos. O usuário deve ser capaz de encontrar o que ele está procurando da maneira mais fácil possível, e o design deve ser visualmente atraente. Pode parecer como tentar encaixar uma cavilha quadrada em um buraco redondo, mas não é difícil e muito possível. Então deixe-me usar você para alguns Jagan. A primeira cúpula é chamado você I ou design de interface de usuário. No nível mais básico, a interface do usuário é uma série de telas, páginas e elementos visuais, como botões ou ícones que você usou para interagir com o dispositivo ou uma tela. A interação geralmente desligada atualmente é por meio de um toque ou um clique. Sim, interação de voz está aumentando, mas vou levar um tempo para me convencer de que tirar meu telefone em público e falar com ele. O outro termo que eu quero apresentá-lo é chamado de experiência de usuário ou você experiência de usuário X , Por outro lado, é a experiência interna que um usuário tem, como ele ou ela interage com todos os aspectos de uma empresa produto e serviço. Você é é um subconjunto fora de você x, você excesso mais amplo e tem um monte de ciência cognitiva é aplicada a ele. É um interesse de processo, resultado de pesquisa e análise. Por exemplo, Candy esmagar o popular jogo móvel. Você vê as pessoas brincando em todos os lugares tem seu design de UX de uma forma que você continue voltando para mais. UX é um domínio totalmente novo e está atualmente fora do escopo deste curso, então vamos conferir alguns exemplos de site e analisar seu design. Ah, site altamente funcional com design realmente ruim é aquele que você está vendo aqui em sua tela. Este é um site regional fora dos maiores provedores de telecomunicações da Índia. Este site é repleto de funcionalidade, mas recebe uma enorme atualização e design. Você pode dar uns amassos na barra lateral esquerda. Há uma enorme quantidade de informações e ferramentas para baixo. Temos os ícones das redes sociais, mas infelizmente eles têm pouco ou nenhum impacto. Este site em geral, com todos os bling bling, ícones de estrelas e tudo mais, pode ser descrito em uma palavra. Repulsivo. Este é um exemplo do que seu site não deve ser. Agora vamos dar uma olhada no site da empresa-mãe e ver como seu design está indo muito melhor. Você pode ver os detalhes relevantes e parece bom também. Você pode observar isso na página de destino. Há um belo controle deslizante de tempo. O controle deslizante tem anúncios importantes e informações importantes sobre onde seus serviços e ofertas. Este vai ser um dos aspectos mais importantes do seu site. Notou que usei um novo termo chamado Landing Page? Bem, uma página de destino, uma página na qual os usuários chegam primeiro ao clicar em um link aqui neste caso. A página inicial é a página inicial abaixo. Você pode observar links que abordam claramente os requisitos imediatos dos usuários. O cabeçalho do site geralmente contém o logotipo da empresa, informações de contato e vários outros links. Estes itens são chamados de itens de menu, e cada um fora do item de menu tem um item de submenu, que iria redirecionar o usuário para a página relevante abaixo. Temos o rodapé fora do site. Geralmente, você encontrará informações rápidas links rápidos no mapa do site fora de todo o site. Você pode ver esta flecha aqui. Estou a clicar nele. Ele imediatamente leva o usuário para a parte superior do site. Eu gostaria de trazer seu aviso para este link em particular aqui, o portal BS em El Hindi. Isso basicamente redireciona o usuário para uma versão fora do site na língua regional. Por que isso é importante? Bem, acordo com o British Council, apenas 25% da população mundial pode falar inglês. Isso significa que há mais 75% da população mundial que não consegue ler o conteúdo do seu site. Sim, Google Chrome faz um excelente trabalho na tradução de sites, mas não está longe de construir um site regional totalmente construído nativamente. Vamos olhar para outro exemplo fora grande design de site. MIMO é um excelente aplicativo que gamma Phi repreendendo apenas por curiosidade. Gamification é o conceito de aplicação de mecânica de jogo e técnicas de design de jogos para envolver e motivar os usuários a alcançar seus objetivos. Geralmente, este é um vôo em um ambiente não jogo. Você pode ver que este site tem apenas um propósito, e esse propósito é obter os usuários para Donald App. Aquela batata extra diz que é o que o Abdo é e há uma marca na tela inicial do ar , bem na praia de pouso. Baixar links para a maçã claramente mencionado, juntamente com o belo sinal dizendo, Seja notificado quando o APP está disponível para Android abaixo podemos fazer para fora. Existem ícones de mídia social que são fáceis de seguir. Este é um exemplo de excelente site de design mínimo verdadeiramente construído para o propósito 7. Sites dinâmicos responsivos: você teria ouvido o termo site totalmente responsivo sites estáticos etcetera para a água por dia. Um site responsivo é um único site que se adapta a qualquer tamanho de tela, por isso é fácil de usar em um tablet móvel e dispositivo desktop. Não é necessário beliscar ou rastreamento de sites. O design se adapta instintivamente ao dispositivo em que está sendo visualizado, então fica ótimo em todas as plataformas. Um site dinâmico ou responsivo usa tecnologias de site prata e bancos de dados. Estaremos tocando neles muito em breve. Alguns benefícios do site Responsive incluem atualização de design mais fácil e atualizações de conteúdo mais fáceis . Um site estático concerta fora de um número de páginas web com conteúdo fixo onde cada base exibe as mesmas informações para cada visitante. Páginas estáticas do site continha código HTML fixo no conteúdo de cada página não muda menos que seja atualizado manualmente pelo designer ou um web master. É assim que os sites foram feitos há alguns anos antes da explosão do smartphone. Um site estático não se adapta ao tamanho da tela. Se você estiver visualizando o site em um dispositivo móvel, você precisará beliscar o carrinho lateral se estiver criando um site de blog onde você criaria novos conteúdos regularmente. Sites estáticos não são o caminho a seguir. Vejamos alguns exemplos reais. Então vamos revisitar nosso site favorito para inspiração de design e tentar verificar se este site é responsável, não quais são suas suposições? Bem, podemos verificar se um site é responsável ou não simulando um tamanho de tela móvel na distributiva. Isso pode ser feito brincando com a janela do navegador, por exemplo, que reduziria o tamanho da janela do navegador para um tamanho real de um dispositivo móvel. Você pode ver que eu tenho que citar Scroll para chegar ao outro lado fora da página web e também ampliar para ver conteúdo que é relevante para mim. Este não é um site responsivo. Vamos visitar o site da empresa-mãe e verificar se este site é um site responsivo ou não. A fim de fazer isso, deixe-me apenas ir para as bordas na janela do meu navegador e tentar simular um tamanho de tela móvel Ah ha você pode ver este site é um site responsivo. O conteúdo do objeto o alinhou claramente para o tamanho da tela. Ele está sendo exibido em você também pode fazer o menu. Os itens foram todos comprimidos em algo que chamamos de menu de hambúrguer porque ele praticamente parece um hambúrguer agora. Deixe-me tentar verificar se ele pode funcionar para um tablet. Então eu estou mudando o tamanho da tela para trabalhar para um dispositivo tablet. Sim, podemos ver que o conteúdo é automaticamente responsável. Alinhar-se à tela diz que está sendo exibido neste é um exemplo de um responsivo site responsivoe dinâmico. 8. Estudo de caso em moldura de arame: Vamos tentar entender mais usando um exemplo da vida real fora de um quadro de arame ganhando vida no formulário para site. Esta é uma armação da expedição de Hemingway, cortesia de Aaron da Follow Bright Consulting Partners. Hemingway's é uma empresa que organiza expedições na África, então vamos analisar isso. Onde livre, você pode notar que o canto superior esquerdo começou com o logotipo e no canto superior direito. Eles têm seu número gratuito imediatamente abaixo de seu reforço de sua experiência em credibilidade, mostrando uma caixa de texto mostrando o número de anos que eles têm estado no negócio . Eles estão se certificando de que o cliente sabe que a Hemingway's é uma marca confiável e que é a hora de entrar em contato com ele. O sistema de menu é limpo, e tem todos os links importantes, cada um levando o visitante para uma página diferente no site com informações relevantes desde que há uma empresa de expedição, eles estão no negócio de venda experiências. Ter imagens visuais que induzem um fator de parede em seus potenciais clientes é muito vital. Por isso, eles têm um set off imagens deslizantes. Clicando em uma imagem deslizante específica levaria o usuário a uma página diferente, com mais detalhes em relação a essa imagem em particular, Hemingway's quer que seus usuários saibam o que a empresa pode oferecer. Muito, muito claramente. A caixa de decks no lado esquerdo do controle deslizante. Verifique se isso é comunicado de forma muito eficaz abaixo do controle deslizante. Temos uma nota pessoal do proprietário. Isto é para impor a dívida imagem. Hemingway's não é uma organização grande e opaca de viagens corporativas, mas é uma empresa personalizada que se preocupa com as experiências pessoais de um indivíduo. Blocos recentes cobrindo em profundidade informações sobre viagens ou como fazer guia ou deve ver sites seria apresentado abaixo a nota proprietários com grandes miniaturas. Abaixo dos posts do bloco estão depoimentos de clientes reais. Mesmo ao lado desta seção está o mapa fora da região onde eles operam e auto abaixo. Toda a seção principal do corpo fica na seção do rodapé. Este segundo comprador tem informações de Keeling e contato. Isso para a região é persistente. Isso significa que esta foto será mostrada em todas as páginas do site. Não só a página inicial. Pense nisso como sua assinatura de e-mail. Agora vamos analisar a versão final fora do site. Você pode ver que a versão final do site é quase semelhante à inicial por quadro . algumas pequenas mudanças, os anos de experiência se moveu sobre o contato a menor seção com parecem como projetado no quadro de arame abaixo do controle deslizante. Temos a mensagem do proprietário colocando um nome por trás do negócio, juntamente com o mapa à direita, representando as regiões em que servem. Temos bloqueado possui uma linha em um layout ligeiramente diferente com miniaturas menores ficar no quadro direito. Os depoimentos de clientes mudaram completamente para uma nova seção. Como você pode ver, há algumas modificações feitas na comida ou abaixo. Eles incluem alguns links de mídia social, que não foram fatorados no quadro de arame original. Para concluir, o produto final é 90% semelhante à versão inicialmente conceituada. Este é o poro das armações de arame. Ele tem você, disse o presidente no site superior, ou APP vai olhar como e quais funções ele vai satisfazer. Os quadros Y dão uma noção dos desafios que precisam ser superados se você estiver construindo um site orientado por funções. quadros Y também dão aos desenvolvedores clareza sobre o que precisa ser feito. Para resumir todos os quadros de arame. Dê sua base sobre a qual você pode construir seus sonhos e idéias. Lembre-se sempre, nosso prédio é tão forte quanto seu alicerce. Se a fundação é fraca do que o edifício colapsa, o mesmo fantasma, seu site ou produto. Se a base for fraca, você pode ter a melhor ideia ou aplicativo em mente, mas não terá sucesso. 9. Entendendo personas de usuários: Estamos nos aventurando um pouco em território UX agora, mas eu sinto que é crucial que você conheça o essencial desse conceito. Então, o que é uma personalidade de usuário? Ah, usuário persona como um usuário hipotético que tem ouro e comportamentos semelhantes fora do seu usuário-alvo , AH, personagem fictício que representa os traços essenciais e características de seus clientes compram de. Assim, NAS ou personas de usuários são criados através de pesquisas de pesquisa e entrevistas fora do seu público-alvo . Em termos leigos, personalidade do usuário está identificando quem seus usuários principais serão e mapeando suas personalidades. Vamos supor que você está construindo um pequeno site de poupança. Vamos nomear este site benny put dot com Este site debitar automaticamente um preset alguns de sua conta bancária a cada mês e investir o mesmo em fundos mútuos. Quem seriam os usuários-alvo da Penny Parte B. Serão crianças? Vai ligar para os alunos ou para os avós? O fator mais importante para Penny Porter livro é que seu segmento-alvo, ou grupo-alvo deve ter uma fonte de renda regular crianças são dependentes de seus pais, então eles não são o grupo-alvo. Os estudantes universitários são parcialmente dependentes dos pais, mas ainda trabalham a tempo parcial. Eles ainda não são o grupo-alvo porque os avós esporádicos e sazonais de renda são mais velhos. As pessoas geralmente vivem de uma pensão ou investimentos que já fizeram no passado. Então, eles não são o seu grupo-alvo ideal para garantir novos investimentos indo por tentativa e erro, você pode isolar o grupo-alvo para Penny Port vai ser pessoas que têm um ganho constante e têm um trabalho que paga-los regularmente. O segmento-alvo seria casais jovens mais frescos que estão namorando ou se casando mais uma vez. Isso é baseado em uma pesquisa de vareta e é uma questão de fato uma suposição, já que todos os erros supostos podem se infiltrar. E a maneira mais recomendada de fazer a validação do segmento Stargate é validar. Sua suposição é fazendo uma pesquisa de amostra e conversando diretamente com seus clientes finais. Para este exemplo, vamos supor que o segmento alvo vai ser homens e mulheres entre os 20 e 30 anos com renda constante querendo investir para o futuro. Eles têm um diploma universitário e nossa cura segura na Internet de Tyre, duas cidades inteiras de um determinado país. Deixe-me mostrar-lhe uma amostra de usuário. Conheça no Eire em Iowa, trabalha como treinamento na divisão de recursos humanos fora de uma startup. Ela começou a carreira há apenas um ano. O arranque para o qual ela trabalha, levantou uma boa quantidade de capital de risco e tem um bom potencial de sucesso. Relacionamento sábio, ela está em um relacionamento sério e comprometido . O casamento está definitivamente em nossa mente em Iowa, esta fêmea em seu retorno de idade, 22 a 28 anos. Sua renda média é de cerca de 15.000 dólares americanos, ou eu em nossos 10 milhões. E ela tende a levar um estilo de vida normanda. Ela tem um comportamento calmo e tem uma região para qual é o futuro? Ela entende o valor do dinheiro e tem o desejo de economizar. Ela tem hobbies ativos como viajar, escrever e jardinagem que n mais rico, emocionalmente e mentalmente. Ela é ativa nas redes sociais, mas está consciente da reputação dela. Ela compartilha artigos de notícias vinculados a um campo de trabalho ou hobby. Ela não compartilha nada. Ela considera isso falso para até mesmo fotos de cães, gatos e celebridades. Seu ouro inclui construir um corpus decente quando é hora de começar uma família ou viver com um parceiro que ela quer maximizar bem durante os primeiros anos fora de um trabalho que ela enfrenta problemas na compreensão do jargão técnico sobre investimentos em é bombardeado com o conselho gratuito que recebe de seus colegas. Ela quer uma solução simples e fácil de usar que atenda ao seu estilo de vida, mesmo que ela queira que a solução seja automatizada. Ela gostaria de ver os painéis sobre como seus investimentos estão sendo executados. Isto é o que muitos port dot com faz. Ele automatiza o investimento com base em metas e apetite pelo risco. Ele dá relatório conciso, tem painel bonito com métricas relevantes e é acessível mesmo em dispositivos móveis, um produto e cliente jogo feito no céu. 10. Analisando o site de referência: quando você tem uma idéia de design, sempre procure por referências pesquisando outro site semelhante. Você começa a conhecer as águas lá fora e o que você pode fazer de forma diferente. Além disso, pode funcionar do outro jeito para você. Conheça o que está funcionando e você pode implementar o mesmo. Eu recomendo o primeiro do que o último? Um dos melhores lugares para conferir referências? Interesse do ISP. Pinterest dá-lhe um monte de inspiração de design. Você pode ver o que outros designers estão fazendo lá fora. Tenho um barco chamado Industrial Light and Magic. O que aconteceu? Todas as coisas incríveis que eu encontrar na Internet, eu encontrei um site que vamos analisar posteriormente no Pinterest. Eu encontrei um currículo, um modelo de site por pixel mind para ser a melhor plataforma para você começar. O site tem uma abordagem limpa e minimalista para ele. Este site está seguindo um design de página única. Basicamente, todas as várias seções podem ser acessadas por rolagem. Esta é uma ótima técnica de design. Se você estiver visualizando este site em um dispositivo móvel, é muito mais fácil rolar do que clicar com o botão direito. Qualquer site que sua conta tem que ser móvel amigável, pois ele pode permitir que você mostre seu trabalho para uma planta em potencial imediatamente em seu smartphone. Então vamos analisar o layout. Há uma imagem de capa grande imediatamente colocando um rosto para o nome do hambúrguer. Manu é usado aqui, vez que dá um lado esquerdo real com todas as seções importantes do site no lado direito , você pode ver as mídias sociais. Os ícones são exibidos predominantemente. Isso é importante porque, como freelancer, você está encarregado de gerar seu próprio negócio , e não há melhor maneira do que as mídias sociais. Logo abaixo da imagem da capa está o nome. Junto com o conjunto de habilidades. Isto é crucial. Longe vão os dias da Quaresma ouvidos humanos em enormes volumes de texto. A atenção humana é vermelha, usando drasticamente a cada dia. Você precisa colocar palavras-chave se quiser se comunicar de forma eficaz. Se a pessoa quiser saber mais, há um botão Para baixar um CV detalhado, certifique-se de verificar a seção de dicas e truques fora do curso para diretrizes e como fazer um CVI pago atraente ou Izumi. Isso culmina a seção de desembarque ou, neste caso, a seção de boas-vindas uma página de destino é a primeira página do Sr. Sees quando eles pousam em seu site. Existem diferentes tipos de páginas de destino. Vamos discutir sobre eles na seção posterior. A próxima seção é a seção sobre mim. Uma breve seção sobre mim é a melhor maneira de se apresentar com algumas linhas limitadas de texto. Há uma foto em miniatura com alguns detalhes de contato relevantes e algumas métricas credíveis, como o número de projetos concluídos. Quantos clientes foram atendidos, e se você pode notar o número de xícaras de café terminadas, esta não é uma métrica relevante em tudo, mas isso é usado para definir um tom mais leve e não corporativo para todo o site. Isso é feito para humanizar o freelancer e tentar fazer com que o visitante se sinta. O freelancer é um trabalhador dedicado porque o café é geralmente o estimulante usado quando as coisas ficam difíceis e é preciso queimar o óleo da meia-noite direito. A próxima seção é a seção de resumo de carreira. Novamente, há um cabeçalho que captura a seção Titan, juntamente com algumas linhas que resume as realizações de carreira. Esta seção pode ser usada para destacar quais são suas qualificações educacionais e se você já teve alguma experiência de trabalho anterior. A próxima seção é a seção de habilidades em um mundo quando você precisa ser um valete de todos os negócios, é baseado para ser honesto em que força você tem. Isso é denotado por um gráfico circular, mesmo que eu tenha visto pessoas julgar seu conjunto de habilidades para dar-se melhores pontuações para todos. Sugiro que não faça isso. Isso é melhor preenchido por meio de uma pesquisa de seus clientes. Depois de concluir um projeto, pense nisso como um conjunto C ou uma pontuação de satisfação do cliente. Certifique-se de conferir a seção Dicas e Truques para descobrir a melhor auto-estrada para fazer uma pesquisa de satisfação do cliente ou cliente. A seção após a seção de minhas habilidades é o núcleo fora da página da Web, a seção de portfólio. A seção tem o mesmo layout de antes, com o cabeçalho anunciando o nome da seção e algumas linhas de texto para resumir o trabalho abaixo que você tem uma classificação Barton que inicia o tipo diferente de trabalho que você fez. Se eu estivesse construindo um site de retomada, eu poderia ter meus cursos on-line classificados aqui com base em tópicos. Talvez isso possa ser UX que você está desenhando. Que desenvolvimento de mama, empreendedorismo? Curso intensivo, etc. Aqui imagens originais Great off é usado com funções adicionais, tais como marcá-los como favoritos ou abrir uma visão mais detalhada fora do mesmo. A última seção é a seção Fale comigo. Esta é uma das seções mais importantes do seu site. Isto é o que vai gerar um lead para você realmente acompanhar. Este formulário de contato tem todos os campos relevantes e também tem todos os detalhes de contato relevantes para garantir que sua planta perspectiva pode certamente chegar até você em sua maneira preferida . Vamos trazer nosso foco de volta para o topo da página e para o menu de hambúrgueres ao clicar nele . Você pode fazer um tipo de secador de animação aparece da esquerda. Também observado, há uma sombra na esquina do Destruidor. Isto é para criar uma sensação de profundidade fora da sensação de que este menu é sobre uma página web em um plano diferente. Você pode ver os cabeçalhos da seção estão presentes nesta gaveta, Manu, e passar o mouse sobre eles destaca, e uma animação subjacente aparece logo abaixo deles para clicar em qualquer título de seção leva o visitante dessa seção específica na página da Web. Isso é feito usando âncoras. Basicamente, você está soltando uma âncora no início de uma determinada seção e atribuindo-a ao cabeçalho da seção Oh, mas no site de desenvolvimento. Mas eu senti que você deveria saber sobre isso. Há também certas animações, como o menu de hambúrgueres, transformando-se em um menu de hambúrgueres. Novamente, você pode notar as seções. Siga um formato padrão. Há um cabeçalho e abaixo que você tem algumas linhas de texto. É o mesmo para todos os tipos de seções. Por aqui. A cor do texto é principalmente gree, e o fundo é grande e branco. Há uma sensação de uniformidade no design, e isso é chamado de sistema de design de tipografia, layout e grãos, duas cores, ícones, ícones, componentes e até mesmo convenções de codificação para voz. E não o estilo, guias e documentação. Um sistema de design está reunindo todos os de uma forma que permite que toda a equipe aprenda, construa aprenda, e cresça. Estaremos aprendendo mais sobre sistemas de design nas futuras lições. Agora que entendemos o site, vamos construir nosso quadro de arame 11. Introdução às Mockups de Balsamiq: estômago bola é um aplicativo incrível que permite que você tanto bonito por quadros. Ao abrir o IQ inferior, você é recebido com a janela do aplicativo. A interface de usuário inferior do IQ é composta por cinco áreas primárias. A barra de ferramentas, a biblioteca U I, a tela, o painel Navegador e o painel de propriedades. A barra de ferramentas consiste em uma série de ícones, cada um para executar ações em outras áreas da interface do usuário. Você pode ver uma posição manual de hambúrguer no canto superior esquerdo não estão clicando nisso você recebe um menu suspenso. Este menu suspenso consiste em algumas opções. O 1º 1 é simulação. O 2º 1 é Ativo, os símbolos da Terceira Unidade, e o último é lixo. As marcações são aquelas que você estará enquadramento direito na tela. Aqui, os ativos são as imagens que ele usaria nos quadros da sua esposa. Se tudo o que você está usando, pode ser uma imagem particular ou até mesmo um logotipo que você quer incorporar em sua esposa. Para ele, os símbolos 3 1 são um conceito importante no campo do design. Um símbolo é um grupo fora de você. Os objetos Y são controlados que representam uma única peça de funcionalidade. Ele é frequentemente usado para partes da interface do usuário que aparece repetidamente em várias telas diferentes. Outros programas de software às vezes se referem a esse recurso como modelos, páginas-mestre, componentes personalizados ou até mesmo widget. Por exemplo, se você usar o aplicativo Gmail em seu smartphone, o flutuante mais Barton é visto em quase todas as telas. O designer, ao criar uma simulação fora do mesmo, teria criado um símbolo fora do ícone de adição para reutilizar várias vezes. Construir fornos, reutilizar como e quando necessário. Em essência, os símbolos permitem criar elementos comuns reutilizáveis que podem ser usados em diferentes telas de marcação . Lixeira é basicamente todos os itens que você excluiu, e você pode querer recuperar. O grupo de ícones no centro da barra de ferramentas é para funções de tela executadas com frequência . Estas são as ações que você provavelmente usou antes em editores de texto como Copiar, Colar, Colar, Agrupar, Alinhar e Zoom. A seção final da barra de ferramentas está na extrema direita e contém o rápido em duas alternâncias para o painel de informações do projeto do Inspetor de propriedades da Biblioteca U.Y e alternar o osso de apresentação em tela cheia, a Biblioteca U Y. ou o U I Control Elements Library é uma longa faixa de Y. controles U. Y.logo abaixo da barra de ferramentas. Ele lista todos os elementos de controle U Y ou objetos que podem vir com as simulações, bem como ativos, ícones e símbolos. O objetivo principal da biblioteca dos EUA é deixá-lo atrapalhar você. Eu controlo elementos para a tela de marcação agora chegando à área de tela de maquete. Esta é a área de trabalho mais importante fora de simulações finais. Aqui é onde sua marcação ganha vida. Depois de adicionar, você se opõe a ele, você pode movê-los, redimensioná-los, brincar com eles para o conteúdo do seu coração até que seus elementos de marcação pareçam corretos. O painel Navegador no lado esquerdo mostra a lista fora das telas ou telas de marcação. O objeto selecionado no momento é realçado. Você pode fazer muitas coisas legais com o painel Navegador, como configurar telas filho, etc. Vamos explorar o mesmo nas próximas lições. O painel no lado direito do aplicativo, propriedades deslocadas para um controle ou objeto selecionado, dependendo do ícone selecionado. Ele mostra o inspetor de propriedades ou o piano info do projeto. O inspetor de propriedades permite que você defina algumas propriedades comuns, como alinhamento , posição , tamanho , etc, por exemplo. Deixe-me soltar um botão aqui, e você pode ver que estou recebendo várias funcionalidades aqui para transformar esse botão em particular. O painel Informações do projeto contém uma área para adicionar algumas notas sobre o projeto e também selecionar o tipo de capa. Vou explicar os diferentes tipos de peles e onde usá-los um pouco à frente no curso. Agora que você entendeu os vários painéis do balsâmico, vamos construir essa armação de arame. 12. Tela de enquadramento - 1: ao abrir Balsâmico, vá para a barra de ferramentas U A para a guia comum e arrastou para baixo uma janela do navegador. Então vamos dar um nome a este site. Meu incrível currículo um site, certo? E então vamos para o tamanho e o Inspetor e mudá-lo para 10 para 42 576 Vamos diminuir um pouco. Fantástico. Isso nos dá uma boa representação de tela branca fora de uma janela do navegador que estamos construindo para dispositivos de tela branca. Longe vão os dias de monitores de sucata. Eu estou correto? Então, antes mesmo de começarmos a transformar um anúncio, vocês elementos. Há um conceito importante que gostaria de apresentar a vocês. E isso é chamado de bloquear um determinado elemento você. Vamos apenas à direita como e clique em bloquear navegador. Basicamente, o que acontece é que uma vez que você bloqueou este elemento você em particular, isso não se move livremente. Isto é muito crucial. Se você está construindo muito fora, você é elementos. Você não quer que eles se confundam enquanto você está trabalhando tão sistematicamente. Sempre que você está construindo quadros de sua esposa, bloqueou os elementos que você não vai interagir ativamente. Menta. Vamos voltar para o site. Podemos ver que temos um menu de hambúrgueres aqui à esquerda, seguido por alguns ícones de redes sociais à direita. Então vamos tentar replicar a costura no balsâmico. Vamos para contêineres e selecionar retângulo na barra de ferramentas U I. Vamos arrastá-lo até aqui e transformá-lo para que pareça um menu de hambúrgueres . Isso é o que costumava dimensionar um pouco. Excelente. Agora eu quero que você mantenha Option e Mac e Old e Windows e arrastado para baixo, criando assim outra cópia fora do elemento U. Podemos repetir os mesmos passos e criar a terceira linha para selecionar todos os três retângulos e criar um grupo fora do mesmo. Você pode fazer o mesmo pressionando Comando G. Este é um conceito muito importante, e grupos de design permitem que você, bem, um grupo de definir alguns elementos e, em seguida, operá-los como um grupo em vez de operar em eles individualmente. Agora eu estou movendo mais velho para seus emaranhados ao mesmo tempo, eu estou um pouco desconfortável com o comprimento, então deixe-me tentar reduzir o comprimento um pouco e também o capitão. Entre eles, podemos ver que há alguns ícones de mídias sociais aqui no fundo direito. Isso torna muito fácil para nós incorporar ícones de mídia social. Vamos para o campo de anúncios rápidos e procurar o Facebook na barra de ferramentas. Isto parece muito bom. Vamos arrastá-lo até aqui, e também podemos selecionar o tamanho. Eu sinto em é melhor ou alinhado para refletir como o site original se parece. Também podemos adicionar os outros elementos para gostar do Twitter. Eu estava arrastando para cima com você e novamente pronto, usado para Seiss nós temos ligado em Strung it Up Again. Bonita. Isso é gelo e eu estou recebendo o último foi Instagram novamente? Fiz seus estudos de gelo e arrastá-lo até aqui. Vamos trazê-los todos em uma única noite. Sim. E agora selecione todos esses ícones e movido para os inspetores e selecione espaço verticalmente . Isso trará um espaçamento igual entre os ícones. Podemos ver que há uma enorme imagem de capa abaixo dos ícones de mídia social, então vamos até a guia de mídia na biblioteca você e arrastamos para baixo imagem que é nomeada esta imagem de capa e arrastá-la por todo o caminho, você pode me perguntar, Por que arrastamos uma imagem e uma palha arrastando para baixo um retângulo que você pode estacionar que pensou que eu iria chegar a ela em uma fase posterior? Vamos voltar ao nosso site de referência. Nós admitimos que há um enorme livros didáticos apenas em cima da imagem da capa. Então vamos voltar para os contêineres e selecionar retângulo e colocá-lo em cima da imagem da capa . Antes de começar a fazer qualquer coisa. Eu só quero voltar e olhar. A imagem da capa tal que qualquer tipo de ação que eu faço aqui não afeta a posição da imagem da capa atrás dela. Vamos transformar o tamanho das caixas de texto um pouco para que ele esteja melhor alinhado com o que o site de referência tem. Temos um título de cabeçalho, seguido de um subtítulo e um botão. Vamos tentar replicar o mesmo em Balsâmico, então deixe-me ir ao texto e digitar um grande título. Agora vamos pegar uma legenda e digitar o texto que você olhos cortar sua barra X. Que imprensa aborreceu Android? Essa é a posição. Isso apenas um pouco para o grande título que está no botão com arrastar para baixo o Barton e posicioná-lo logo abaixo do subtítulo que aumenta o tamanho um pouco. Siri Tallow. Parabéns. Acabou de completar o primeiro verde em Balsâmico. 13. Tela de enquadramento de arame - 2 parte 1: vamos rolar um pouco para baixo e foram recebidos com sobre mim seção. A seção sobre mim consiste em nosso título ou, neste caso, política este é um cabeçalho, juntamente com algumas linhas de texto abaixo dele. Ele também tem alguns retângulos colocados em cima um do outro, com algumas métricas também mencionadas no topo. Então vamos voltar para Balsâmico. Vamos clicar com o botão direito e duplicar a tela anterior. Então, vamos excluir as coisas que não precisamos. Deixe-me desbloquear a imagem da capa e excluir o mesmo. Deixe-me apagar o retângulo, o texto no botão. Nós precisamos do grande título, então vamos levá-lo para o centro abaixo do grande título. Temos um bloco de texto, então vamos arrastar o texto para baixo. Você compra elemento. Vamos ao nosso site copiar este texto. Vamos trazê-lo de volta ao Mick volátil e colá-lo. Excelente reabilitação são linha de legendas quase pronto. Vamos posicioná-lo no centro usando o texto. Ferramentas de transformação no inspetor que vamos aprender são conceitos muito importantes chamados símbolos e como criar alguns construídos em Baltimore. Neste momento, um símbolo é um conjunto de elementos que podem ser reutilizados. O economiza muito tempo quando você está construindo um monte de telas com o mesmo elemento reparador , e neste caso é o título neste pequeno parágrafo texto abaixo dele. Então vamos selecionar o título grande e o elemento de texto e agrupá-los. Agora vamos convertê-lo em um símbolo, então vá para a hora do inspetor, e aqui você pode nomeá-lo como símbolo de título e você pode clicar em converter em símbolo. A cor mudou de Popo para verde. Símbolos podem ser acessados usando o símbolo. Passo por aqui. Vamos reutilizar isto numa fase posterior. Agora vamos adicionar um novo retângulo aqui, então vamos para os contêineres e clique no retângulo e vamos redimensioná-lo. Vamos arrastar outro retângulo para cima. Então, criamos a base para a exibição de métricas. Lembre-se sempre que todos os elementos estão em planos diferentes. Por exemplo, o retângulo alongado está no topo do retângulo esticado. Deixe-me pegar o retângulo alongado e mandá-lo para trás. Você pode perceber que o retângulo esticado está sentado em cima do alongado. Deixe-me trazê-lo de volta, e agora você pode ver que o alongado está em cima do retângulo esticado. Bem, a fim de colocar as coisas em perspectiva, deixe-me dar-lhe outro exemplo. Vamos supor que você está em um helicóptero chique, certo? E você está olhando para baixo para um quarteirão particular da sua cidade. Todos esses edifícios diferentes são como diferentes você por elementos. Alguns edifícios são mais altos, alguns edifícios são mais curtos, mas quando vistos de cima, todos parecem estar na mesma altura, mesmo que existam em planos diferentes. Então vamos fingir os detalhes restantes nos retângulos. Nós não temos imagem de um subtítulo, uma linha de texto, alguns ícones em alguns, tanto texto quanto feminino dentro desses retângulos. Então vamos voltar para Balsâmico. O rápido em dois de nossos torna realmente fácil para nós ideo elementos, Então vamos rastrear esta imagem. Vamos procurar legendas. Arraste-o até aqui. Vamos digitar texto. Vamos selecionar o rótulo. Deixe-me selecionar o mesmo. Deixe-me segurar a opção e duplicar o mesmo. Deixe-me mover isso um pouco para que seja melhor posição. Deixe-me segurar o turno e reduzir o tamanho da imagem para que tenhamos mais espaço. Deixe-me arrastar estes elementos. Deixe-me trancar este retângulo. Muito seletivo, disse Título e algum texto e puxar em outra cópia fora do mesmo. Isso é centro de re. Tudo isso parece bom. 14. Wire-framing fio - Questão de desafio: Eu mostrei como usar a biblioteca e o rápido na barra de ferramentas rapidamente no resto dos ícones para completar a tela. 15. Importação de arame - Solução de desafio em tela 2: Parabéns. Se você fez isso com sucesso agora vamos procurar os ícones na Biblioteca U. Y. O primeiro ícone é um ícone semelhante, então vamos tentar encontrá-lo. Sim, temos um polegar para cima delineado que está arrastando até este ponto em particular aqui. O próximo ícone que temos é um ícone de usuário mais, então vamos voltar a usá-lo. De Vito. Não adicionamos o ícone do usuário. O próximo desaparecido é uma xícara de café. Vamos ver se Baltimore tem para nós agora. Tem um troféu. Sim, excelente. Podemos notar que há alguns números de título aqui. Vamos para o campo rápido e tipo de grande título 10. E para que o subtítulo vá para o nível, vamos colocar isso no centro usando as ferramentas de transformação de texto. Vamos manter a opção e copiar os números novamente. Vamos manter a opção e copiá-lo. Legendas abaixo. Agora vamos alinhar isso um pouco. Podemos usar as diretrizes automáticas como uma referência Deborah, permitindo-nos alinhar objetos anteriores na tela com muita facilidade. Excelente. Nós completamos a tela, também. Espero que estejas a divertir-te 16. Encaixamos de arame - Tela 3: a tela de resumo da carreira é um pouco mais longa na natureza. Segue-se a mesma estrutura à frente. Oh, e um texto abaixo. Então vamos duplicar tela, também, em excluir os elementos que não precisamos. Vamos transformar este retângulo e adicionar o chapéu de formatura. Sim, vamos rastrear isso na tela e mudar o tamanho também. Duplo X. Agora vamos adicionar um subtítulo. Posicione-o logo abaixo do ícone que está. Estenda este retângulo um pouco e posicione-o ao lado do ícone. Vamos voltar a um representante de referência. Podemos notar que há um número seguido por um título com um subtítulo, outro subtítulo em um monte de texto Então podemos voltar para Balsâmico e deixar o título do anúncio mudar isso para um número que adicionou outro título. Mude isso. Teoh String Bass são título baseado em texto Isso é um pouco grande demais. Vamos descer para 24. Posicione isso ao lado do número. Vamos para uma legenda sobre outro assunto. Vamos adicionar algum texto. Vamos selecionar elementos e reduzido a Seiss. Vamos alinhá-lo no lugar, selecione todo o elemento e criar um grupo extensor emaranhado um pouco e manter velho são opção em duplicado sobre set off elementos que criamos. Clicar duas vezes sobre o grupo irá permitir que você edite elementos individuais fora do mesmo e bater escape irá levá-lo de volta para a tela. Vamos selecionar todos os elementos no retângulo e criar um grupo para que possamos alinhá-los um pouco melhor no site. Você pode perceber que há um Aramark que está apontando para o ícone de formatura. Então vamos ver se conseguimos encontrá-lo. Arraste o ícone até o ponto e coloque-o para que ele esteja em contato com o retângulo. Excelente. Completamos a tela três. 17. Enfeitando fio - Tela 3 - Parte 2: podemos ver que o segmento de experiência fora do site está alinhado de forma bastante diferente do segmento anterior. Aqui, você pode perceber que todos os elementos estão mentindo para a direita e o ícone está para o lado direito da tela. Então vamos voltar para Balsâmico e duplicar a tela. Vamos excluir os elementos que não precisamos. Vamos selecionar o ícone de formatura no subtítulo e movê-lo um pouco para fora da tela. Mais tarde, selecione o ícone do Aramark e mova-o um pouco para fora da tela de desenho. Agora vamos mover este segmento inteiro para a direita e posicioná-lo aqui. Vamos selecionar o ícone de graduação no subtítulo e muito mais para o lado direito da tela . Isso é clicar duas vezes no ícone e procurar uma Nikon que se assemelhe a um empate. Excelente. Nós substituímos o ícone por outro novo ícone e digite o subtítulo Excluir este Adam Mark e vamos encontrar outro Aramark apontando para nós à direita. Arraste o ícone e posicione-o bem no centro para que ele esteja entrando em contato com o retângulo que é uma linha Icahn um pouco. Precisamos alinhar o conteúdo para o lado direito do retângulo. Então vamos voltar para a alface balsâmica no grupo todos os elementos dentro deste retângulo particular . Nenhum emaranhado lachter agora que bloqueou este retângulo. Agora vamos selecionar todos os elementos dentro deste retângulo particular e ir para a seção de controle e deslizar em uma linha. Neste momento, todos os elementos se mudaram para o lado direito. Mas eles pareciam um pouco confusos, então vamos arrastá-lo de volta para a borda e deixá-los arrastá-los para fora. Agora deixe-me tomar esta posição para o centro e alinhá-lo de tal forma que ele está a par com o subtítulo Deixe-me fazer o mesmo com o próximo parágrafo formatado para o centro e, em seguida alinhá-lo para que ele esteja em linha com as legendas. Selecione o título e reduza o tamanho para que ele esteja a par com legendas muito Excelente. Se você me seguiu até agora, isso é ótimo. Você completou a tela três. Parabéns 18. Encaixamos de arame - Tela 4: Então vamos começar a construir tela para nós temos um gráfico de métrica de conhecimento. Então vamos ver como podemos duplicar o mesmo em balsâmico. Vamos voltar para Balsâmico e duplicar a tela. Vamos excluir itens que não precisamos. Desbloqueie este retângulo e exclua o mesmo. Agora vamos para o rápido ativo e procurar um círculo. Isto parece bom. Por que não alcança a droga até o centro e segure o turno e amplie-o. Podemos ver que temos um título junto com algum texto, Então vamos voltar para uma página anterior. Copie este símbolo e colado novamente. Agora isso é rapidamente adicionar algum título. Traga-o para o centro e mude-o para números. Posicione-o no centro. Volte para o gado rápido e procure um rótulo. Insira o conjunto de habilidades. Neste caso, vou tentar o meu conjunto de habilidades. Isto é, seco. Humor posicionou-nos para o centro usando as ferramentas de formatação de texto. Vamos mover isso um pouco para o centro da borda do seletor de tela e alterá-lo para um cinza claro que aumenta o tamanho do rótulo para 20 em. Posicione-o em conformidade. Sim, agora vamos eleger todos estes três. Andi, coloque-os juntos e pressione Ault ou opção e criar duplicatas do mesmo que você pode notar nas armas que temos. Imaginações de paginação permitem que o usuário acesse outra página ou uma seção fora do site . Vamos supor que você tenha mais que o dobro para o conjunto de habilidades. Isso permite que o usuário percorra as habilidades que você possui. Você pode aprender mais sobre como fazer esses protótipos altamente interativos no meu curso de digitação de pérolas . Então vamos voltar para Balsâmico e adicionar os dois círculos e algumas formas para denotar a paginação, selecionar todos esses grupos e apenas reduzir o tamanho um pouco e alinhá-los para dissidente. Agora vamos para o riacho na barra de ferramentas e procurar o Arrow com um círculo. Klein é excelente? Vamos trazê-lo para o centro. Isso é em alguns círculos. Estamos acostumados com o tamanho 2. Vamos voltar ao rápido para procurar o Circle delineado e trazê-lo. Teoh s na posição direita ao lado do outro círculo que disse Opção e criar outro . E vamos voltar para o rápido na barra de ferramentas e procurar por outra seta, que está apontando para o outro lado. Fantástico. O círculo preenchido basicamente denota ao usuário qual página ele está vendo atualmente, e todo ou o grande círculo fora denota as outras páginas para o usuário pode navegar dentro do site. 19. Enfeitando fio - Tela 5 -Parte 1: Vamos duplicar a tela e excluir tudo o resto, exceto o título e uma pequena linha fora do texto. Excelente. Se você visitar o site, podemos descobrir que há uma interface tabular. Isso é como uma função de classificação, então vamos voltar para Balsâmico e procurar a barra de botões U Element. Vamos arrastá-lo para cima logo abaixo da pequena linha de texto. Vamos voltar ao nosso representante de referência Side e títulos de cedro, todos Web design imprimir um design APP. Então vamos voltar aqui e o antigo representante Design impressão AP decidir. Você pode notar que eu estou separando as guias usando o coma. A barra de botões por padrão tinha apenas três guias, mas eu adicionei outra vez. Vamos ver se ele vai chegar. Excelente. Para adicionar mais colunas, você deve ter um sinal de vírgula ao lado do elemento que você está treinado inserir. Então, após o design de impressão, eu tinha uma vírgula e entrou design, assim Balsâmico entendeu que ele precisa de uma coluna adicional. Vamos voltar para um site de portfólio e você pode ver que há uma série de imagens aqui , então vamos voltar para a nossa barra de ferramentas rápida e procurar por imagem agora segurar a tecla de opção Ault e duplicar thes, assim criando um formulário fora de um grande vamos aliar em todos os é um pouco para o centro e mantenha a opção novamente e arraste para baixo e crie outro mais cedo, maioria uma grade. Agora selecione todos os e crie um grupo. Parabéns, sua tela completa cinco. 20. Enfeitando fio - Tela 5 - Parte 2: Vamos voltar para o próximo verde. Você pode ver que esta tela está particularmente fora de lugar, seu suporte não na gripe. Mas esta tela é como uma tela de chamada à ação. Imaginemos que o visitante realmente se excita. Olhando para todo o trabalho que você fez e realmente quer entrar em contato com você, você deve dar a ele ou ela o provisionado para fazê-lo. A próxima ação possível para o usuário, depois de ficar animado por um trabalho, deve ser contratar você ou entrar em contato. E é isso que este site está tentando fazer com o botão Big Blue Hire me. A colocação fora deste grande botão azul é perfeito, então vamos voltar para Balsâmico e tentar recriar isso que é duplicar a limpeza anterior e excluir todos os elementos que não precisamos. Vamos para o U I para barra e procurar por legendas que está arrastando o centro e o para voltar para um site e copiar este texto. Clique duas vezes no comando ou controle. Ser recheado. Espero que tenha notado uma ligeira diferença em nosso site. Você pode fazer para fora que há uma quebra de linha que IHS me contratar começa em uma pista diferente , mas em Balsâmico quer basted isso. Você pode perceber que está em uma única linha, você pode corrigi-lo e inferior. É incrível nesses termos. Por que você acabou de entrar na fila e você tem que entrar? Barra invertida são e aperte Enter e você poderia fazer para fora que balsâmico entendeu que me contratar deve começar a partir de uma nova linha. Vamos chegar ao centro e garantir que tudo pareça. Então vamos voltar para a primeira tela e copiar este botão de download de CV e trazê-lo de volta aqui e colá-lo. Isso é por favor no centro. Excelente. Agora vamos para a barra de imagens e baixar. Vamos para o rápido na barra de ferramentas e procurar por Imagem. Agora isso é arrastá-lo completamente e colocá-lo bem abaixo do eu mais alto. Mas parabéns. Você completou a tela 5.5, e há apenas uma última tela para conquistar, e então vamos passar para a construção do sistema de menus 21. Encaixamos de arame - Tela 6: então vamos duplicar a tela anterior e remover todo o conteúdo. Agora você vai usar o símbolo que criamos. Então vamos para a biblioteca e seleciona símbolo e arrastar título no texto para a tela U. S. S. Você pode editar elementos individuais de um símbolo da mesma forma que faz com os grupos. Tudo o que você precisa fazer é clicar duas vezes e realinhar a parte do texto um pouco. Você também pode editar a fonte desativada. Um símbolo para as alterações que você fizer refletirá em todos os símbolos anteriores. Isto. Certifique-se de que você não precisa fazer o dobro do trabalho, ir para o riacho na barra de ferramentas e procurar a área de entrada de texto e inserir campos relevantes porque estamos criando um formulário de contato. Vamos duplicar os campos que criamos, ir para a última parte e tinha área de entrada de texto e arrastá-lo para cima para criar a parte da mensagem do formulário de contato. Mesmo que no site você pode ver que os nomes fora dos folhetos são sobre o campo de texto fora recomendar que você coloque o nome do campo dentro da própria caixa de texto em deixá-lo desaparecer quando o usuário começa a inserir algum texto no mesmo. Isso é chamado de texto de espaço reservado. Vamos inserir a mensagem mais antiga da polícia porque essa é uma área de mensagens. - Não. Vamos voltar para a barra de ferramentas mais rápida e adicionar um botão. Vamos arrastar o botão para baixo abaixo dos quadros esposa relevantes do campo de texto e deslocado um pouco para cima e alinhar todo o campo corretamente. Isso mudou o nome para contato, e nós temos nosso formulário de contato. 22. Emoldurando com arame - Desafio da Tela 6: Agora que você sabe como construir quadros de esposa incríveis, eu gostaria que você completasse a tela colocando os ícones relevantes e todo o conteúdo restante . 23. Wire-framing Wire-framing fio - Solução de desafio 6: Então vamos Berlim, um pequeno título legenda e arrastá-lo para cima e digite o texto. Entre em contato comigo Agora temos um ícone de localização, seguido de algum texto, então vamos apenas copiar este local de texto. Um marcador de mapa. Excelente. Então vamos soltar o marcador do mapa e colar este texto ao lado dele. Temos um telefone celular para frente por alguns números representando Contacte-me via celular, embora eu recomendo altamente. Não coloque seu número de celular em um e-mail E de domínio público. Este é um envelope fechado e, em seguida, com o fechado deve, também, que é baseado um texto novamente ao lado do ícone e um número de fax. Ou, vamos dar ao benefício da dúvida um número de telefone fixo. Não, é fax e cole os números ao lado. Você pode perceber que estamos perdendo uma parte importante da tela, e que é a comida da seção. A dissecção do pé é um lugar que irá abrigar vários dados, tais como os seus links de redes sociais, se você quiser ou pode ter, por exemplo, ou outros sites podem ter suas postagens recentes. Geralmente é a última seção da última página. Vamos adicionar rapidamente um rodapé vinculado e apenas copiar este texto para que as letras desbloqueado o navegador e ligeiramente alongado Vamos tomar um retângulo. Coloque-o direito. Aqui está e vamos ao texto. Troque-o um pouco muito ousado, mas para tomar o centro e arrastando ao longo Excelente, você completou todas as telas. Agora vamos para o homem que seção. 24. O que é um Menu de Hamburger?: vamos estar construindo o menu de hambúrguer, disse Duplicar o primeiro verde e criar em seu emaranhado Vamos zoom para fora um pouco e arrastá-lo para que ele preenche uma seção fora da tela, cabeça para a equipe de tecnologia e arraste o elemento lista para o emaranhado deles. O que é Ir para o nosso site de demonstração e abrir para retângulo e ver a forma como esta lista elementos que temos. Bem-vindo sobre mim. Habilidade de carreira. Coloque enganar você e contato. Então vamos um por um e editar isso. Dêem-me as boas vindas à Coreia. Chegue você e contato. Por isso, deixe-nos sentar-nos aqui e arrastá-lo para cima. Você pode perceber que as lacunas entre os elementos da lista não são suficientes, então precisamos aumentar isso. Então, vamos voltar para nossas propriedades de lista e aumentar o comprimento entre esses elementos. Eu acho que isso é bom o que precisamos para aumentar um pouco o tamanho. Então, isso é aumento de tamanho um pouco 24 e aumentar a diferença entre os elementos. Deixe seus tratores um emaranhado fora deste exuberante com a tela e e que é adicionar a marca de cruz . Excelente. Concluímos o item de menu. Agora precisamos fazer isso interativo 25. Entendendo pontos de Entorno: quando você está inicializando de cabeça são especialmente um único site de página como este item principal que você sabe depois de lembrar é chamado de pontos de ancoragem. Os pontos de ancoragem são basicamente âncoras, que direcionam o usuário para uma seção específica do seu site. Por exemplo, deixe-me verificar sobre mim. Vai me levar para a seção sobre mim. Deixe-me ver a seção de contato. Isso vai me levar até a seção de primeiro ato porque nós criamos ou melhor, designer aqui criou pontos de ancoragem para o mesmo. 26. Fazendo a Wireframe interativo - Parte 1: Agora vamos fazer isso por quadro interativo sem escrever uma única linha de código. Mas antes disso, precisamos ter certeza de um item muito importante. E isto é, precisamos renomear nossas telas. Então, vamos renomear isso rapidamente para receber About Me. Cardia Curry são um contato porta habilidades Folio e renomear a tela anterior Pergunte a todos para Vamos excluir isso. A última tela que não precisamos, e voltar para o item do menu e criar nossas ligações. Então, bem-vindo vai para a tela de boas-vindas sobre mim. Vai para o sobre a minha carreira na tela vai para a tela da carreira. Habilidade vai para a tela de habilidades habilidades. Ah, isso é um portfólio de twister língua vai para o portfólio tela contato vai para a tela de contato. Não, vamos ver este projeto e vamos vê-lo em tela cheia. Agora vamos ver o quão interativo esta espingarda M iss. Sim, temos voltado para a tela de carreira é apenas voltar, que é ir para a tela de contato e chegamos à tela de contato. Agora vamos voltar, deixe-me ver se posso ir para a tela de habilidades. Excelente. Então nós basicamente mapeamos as telas para os elementos Bavis e criamos uma experiência interativa sem escrever uma única linha de tribunal. Emocionante, não é? Então vamos tornar isso por quadro ainda mais interativo, permitindo que ele abra novos links. Então vamos para o ícone do Facebook aqui e selecione. Adicione um novo pensamento ou link para um endereço da Web. Deixe-me ir às notas e copiar o link para os meus grupos do Facebook, que se chama Lone Log. Por Sadat. Você será capaz de aprender um monte de coisas novas se você se juntou ao grupo também. Tenha acesso a promoções e cupons, treinador. Então vamos voltar para Balsâmico. E nisso, vamos voltar ao Twitter. Isso é correto. A nude e copiar meu identificador Twitter que tratou ou com barra. Então isso é 89. Copie isso e como o capaz de adicionado aqui vinculado a Novo representante. Atriss baseou isso. Vamos voltar ao Lincoln Icon. Copie meu perfil alongar. Você pode perceber que havia um estreito com o perfil do Facebook porque não havia nenhum ícone aqui indicando um hiperlink. Então vamos voltar às anotações. Copie meu perfil do Facebook novamente. Volte para as taxas. Ícone Livro, Selecione Link para Endereço do Representante . Eu bati em OK, exatamente. Nunca consertei. E vamos voltar para o último, que é o meu Instagram, mas apenas o Instagram Dot com Slash Log de Empréstimos. Então aqui você estará tendo muitos vídeos e fotos, bem como vídeos de um minuto de várias técnicas de design. Excelente. Vamos voltar para a exibição política retal apresentação em tela cheia e ver se conseguimos obter esses ícones de mídia social para fazer o que queremos que eles façam. São páginas abertas nas redes sociais. Então vamos tentar o Facebook. Excelente. Isso mesmo, Ritter. Fantástico. Isso é tentar Lincoln. Excelente. Vamos tentar o Instagram. Excelente. Então você também pode vincular este botão para realmente habilitar um download de CV para um pouco fora da caixa, pensando que você pode realmente usar um quadro de arame em si como seu currículo 27. Como criar WireFrameInteractive - Parte 2: Se você prestou atenção, você poderia fazer com que nós estamos faltando um aspecto importante. E esse aspecto está construindo interatividade entre as telas para que possamos construir interatividade entre a tela espalhada rapidamente tendo uma marca de seta, o que é muito simples. Então vamos baixar o ângulo. Um. Copie isto para todas as telas. As coisas apenas copiam e colam o Aramark, também. Todas as várias telas que projetamos para que possamos construir a interatividade MAWR no quadro de arame. Não precisamos disso porque é aqui que a tela termina. Então precisamos de uma flecha que nos leve para cima. Vamos apenas copiar esta seta para que possamos adicionar um nível diferente de interatividade para que a IHS leve a tela para cima duas nas outras telas, também. Fantástico. Eu estava apenas rapidamente salvá-lo. E agora vamos construir a interatividade. Então isso vai para a seção sobre mim. A seção sobre mim vai para a seção de carreira. A seção de carreira vai para a carreira uma seção e Coréia. Uma seção vai para baixo para a seção Habilidade. seção de disquete vai descer para o barco, encher a sua seção. A seção de portfólio vai para as ações cult Green e a tela de ação cultural vai para a tela de contato e a tela de contato vai voltar todo o caminho de volta. Teoh a tela de boas-vindas que a tela de ação cult vai voltar para a seção anterior que é a seção de portfólio. Quando pegamos o Arrow, o portfólio vai voltar para a seção de habilidades. As seções de habilidades de Pyro vão voltar para a carreira. Uma seção, a da Coreia vai voltar para Teoh, a seção da Coreia e a seção de cardio vai voltar para Teoh sobre mim seção vai voltar para a seção de boas-vindas ? Pode parecer um pouco confuso agora, mas vamos ver como este livros quando entramos em modo de apresentação em tela cheia Excelente, bonito. Estamos tendo uma experiência coesa e interativa. Uh huh. Atingimos um bloqueio aqui. Esta seção está indo para o portfólio de seção. A seção de portfólio está voltando para a seção de habilidades em vez de voltar para a ação de cultura. Agora vamos verificar as ligações. Excelente. Mas vamos voltar à vista. Fizemos muitos elementos sobre este assunto através da directiva Freeman. Há um pequeno elemento que ainda resta e você adivinhou. Esse é o menu de hambúrgueres. Antes de fazermos isso, precisamos fazer tudo o que é importante e isso é renomear nossas telas. Então isso renomeou isso para Maio novo no menu de hambúrguer selecionado aqui e vinculá-lo ao nosso menu para fora da tela para que você possa ver o ícone de cor vermelha, que indica ligação. Agora sabemos que ao clicar neste hambúrguer, Manu, vamos abrir o menu de hambúrgueres e fazer como várias hiperligações para o raio ancoram na Praia Vermelha. Agora precisamos habilitar o sinal cruzado aqui para que possamos voltar para a tela anterior e que vai ser a tela de boas-vindas. Eu tinha um salvá-lo. Vamos voltar para a exibição da apresentação e ver nossas ligações ao clicar no hambúrguer. Manu, vamos pegar o menu do hambúrguer e eu estou clicando na cruz verde. Vamos voltar ao menu principal. Parabéns. Você realmente fez essa esposa de interativo sem sequer escrever uma única linha de código e, assim, você será capaz de demonstrar isso para seus investidores. Seus líderes de projeto, seus pais, seus amigos, seus clientes, quem quer que seja e eles serão capazes de obter uma melhor sensação abrangente. O que exatamente você está tentando construir para eles ou para si mesmo. Mas há um último truque na minha manga. Deixe-me mostrar para você no próximo vídeo. 28. Como criar o WireFrame Professional: você completou o quadro de sua esposa com grandes níveis de interatividade. Você precisa apresentar isso ao seu cliente de gestão ou mesmo investidores faria. Você pode apresentar o mesmo? Eu disse, apenas saiba. Mesmo que quadros de aquisição inferior são feitos para ser como esboços, ele pode definitivamente colocar um terno Para deslumbrar pessoas diretas cabeça sobre o painel de propriedades e selecionar detalhes do projeto. É sempre uma boa prática dar uma pequena descrição do seu projeto. Vamos inserir algumas palavras. Minha incrível bota Folio uvas, certo? Terríveis capitalistas Teoh Rencher. Isto é muito útil. Quando você enviar esta moldura de esposa para outra pessoa e uma leitura rápida do projeto, informação vai trazê-los para acelerar o que exatamente eles estão olhando agora. Vá até a seção da pele e mude-a para armação de arame. Hoje você converteu um esboço, cartoony, nível off arame frame toe profissional olhando surpreendentemente projetado quadro direito, e você fez isso. Se você veio ao palco, você deve estar orgulhoso de si mesmo. Agora você está pronto para exibir suas habilidades para o mundo e mostrar como construir um site incrível . Vamos dar uma olhada neste quadro de fio de nível profissional bonito na visualização de apresentação em tela cheia Parece incrível. Estou te dizendo, estou muito, muito feliz e gostosa. Venha e você deveria estar também. Isso está pronto para ser exibido em um enorme projetor para quem você quiser. Excelente trabalho. Parabéns. 29. Compartilhando frames interativos para o mundo: Agora que completamos todo o seu quadro de arame, você gostaria de compartilhar com o mundo. Mas nem todo mundo tem Malcolm balsâmico instalado no sistema, e a melhor maneira de compartilhar marcações para comentários para discussões para sugestões e comentários é exportar o mercado como um PDF. Então, vamos para a janela do projeto e clique em exportar para PDF. Agora temos todas as marcações selecionadas todas as telas otimizadas para o seu ing na tela, e você também pode adicionar várias personalização. Você também pode incluir notas de marcação, mostrar as dicas de vinculação para que eles possam entender qual deles vincula a qual . Então vamos habilitar isso e clicar em exportar para PDF, e eu vou levá-lo para a minha área de trabalho. Vamos esperar que ele exporte as telas. Excelente. Vamos dar uma olhada no nosso destino. Vou usar o Auto Acrobat Reader porque é isso que a maioria das pessoas vai ter e vamos para tela cheia. Você pode fazer para fora que as ligações são claramente mencionadas sobre as ligações já estão destacadas e também ativas. Lindo. A pessoa é capaz de interagir em um pdf. Ele nem precisa do mercado de estômago do Bart. Excelente. E como eu disse, se você quiser pensar fora da caixa, você pode realmente programar o botão de download do CV para baixar seu currículo A. 30. Recap: que jornada incrível tem sido até agora. Vamos recapitular rapidamente o que você aprendeu que você aprendeu o que são quadros Y e por que eles importantes. Você aprendeu a entender as necessidades do cliente e construir armações de arame com base nisso. Usando um estudo de caso em profundidade, você entendeu o que eu uso uma bolsa proprietários e como você deve construí-los. Você analisou um site de portfólio e entendeu por que os quadros de arame são importantes. Quando você está construindo um em seu quarto, você baixou balsâmico e entendeu as várias duas barras fora do balsâmico e quais funções eles trazem para a mesa. Você criou belos quadros de arame fora das telas mais cansadas do site do portfólio e no processo aprendeu onde seus bancos e técnicas como grupos, símbolos, etc. Você criou interatividade entre as telas e os elementos U sem sequer escrever uma única linha fora do código. Eugene é a pele de toda a moldura da esposa para parecer profissional e carne. Por último, você aprendeu a criar PDFs interativos para compartilhar os quartos de sua esposa com amigos, investidores e clientes. Essa foi uma jornada incrível até agora, e eu gosto de te ensinar. Estou ansioso para ensinar aqui novamente em vários cursos e várias outras oportunidades no futuro