Como criar um site - parte 1

1. Olá: Então precisamos da Christine. Eu não tenho que continuar projetando minha faculdade Flatiron e eu tenho uma formação em design visual, treinamento, estratégia, marketing e publicidade. E eu deixei o Parlamento ensinei-me a programar. Tudo o que vejo fontes, claro, é uma paixão que ainda compartilhou a academia de código Connick cabeça abaixo de mim e muitos outros. Se você quiser saber mais sobre meus pensamentos sobre design tecnológico, você pode ver o link abaixo do qual meu blog está. E se você quiser saber mais sobre mim e meus projetos no trabalho que eu faço, você pode visitar meu site. Não desça junto com Jacob para ver uma sexta-feira do meu povo. Obrigado por fazer este curso. Espero que aprenda mais. Sobre o design de desenvolvimento. Vamos pegar 2. Apresentação do curso: Olá e bem-vindo a como projetar um site. Este é o meu primeiro ensino custos em compartilhamento seguro, Então eu espero que eu compôs-lhe o melhor conhecimento e habilidades sobre o que projeta com o design de dois mentolos. Como parte desta classe, você aprenderá sobre o processo de design. Ajudou a criar um perfil de marca. Por que as técnicas de prototipagem Freeman e quais layouts de página através de um design responsivo, o total usando nosso B X D concebido e Google draw? Todos são equipas livres. Assine-o com acesso ao Adobe Creative Cloud Toe. Vai ser X'd. Vamos usar esta ferramenta para projetar nossos arames e protótipos. Se você está interessado em aprender como e, em seguida, ele será obras de software. X'd seria uma ótima introdução. Adobe é o fabricante, loja flutuante e outros problemas impressionantes. Desde Photoshopped e outros APS vêm com o preço, X'd é completamente gratuito. Tudo o que você tem a fazer é clicar neste botão aqui neste site. Vou levá-lo ao Adobe Creative chamado Sign of Age. Por favor, inscreva-se para vislumbrar em Los Well, estaremos usando esta ferramenta. Tribunais de comida distante. É completamente gratuito e visão tem uma ferramenta para prototipagem, mas para este curso vai ficar com o negócio. BXC, para prototipagem e visão seria usado para nossas placas de humor. É muito simples, embora já tenha uma conta uma vez que eu clique neste botão e ele vai me levar para a minha home page. Então, enquanto isso, inscreva-se no Adobe Creative chamado e veja que último, mas não menos importante, Scougall sorteio. Se você ainda não tem uma conta do Google, limpe. Vamos usar o Google. Sorteio rápido. Desculpe-me, Google Drawing. É mais parecido com ele e a partir daqui estará jogando com nossas ferramentas de mapa do site a partir de materiais. Vamos começar a usar formulários que eu mesmo criei. Então, se você pode, por favor, baixar os formulários de processo de Web design e eu criei esses formulários para ajudá-lo junto com este curso, por favor, sinta-se em tudo à medida que passamos por cada lição para ajudá-lo a projetar seu site e design Resource is I created a lista de pesquisas de sites úteis para ajudá-lo a escolher fundos, imagens, imagens, cores e outras ferramentas de design. Se preferir, é como Matt, seu site à mão. Você pode imprimir que sites de design mapeamento site começar arquivado que eu tenho aqui. É um arquivo piscar de olhos e você pode iniciar seu conjunto. Minha coisa. A minha mão. Este é o site de design como nada acabado arquivo Aqui é a ferramenta finalizada não miking do nosso projeto. Isto se você Condell isto vai ser uma maneira de você entender o quão triste meus trabalhos serão discutidos mais tarde. Por último, mas não menos importante, eu pediria que baixasse o XT dopey arquivado aqui. Temos que começar o arquivo que vai começar a trabalhar em nossos projetos de classe juntos. E então este é o trabalho dos olhos finais que seremos vistos o que estamos terminando nosso projeto. Assim que você tiver suas ferramentas e materiais configurados, começaremos o processo de design. Vemo-nos no próximo vídeo. 3. Processo de design: o processo de concepção. O processo de design ajudou-nos a sair Um problema através de vários estágios a partir da superfície do processo de design pode ser assim. Começamos por encontrar um problema. Para resolver o problema. Nós criamos muitas idéias tem sido a troca de plano. Nós moldamos essas idéias que as estruturam através de arames de protótipos. Então trazemos essas ideias. Ainda assim, a vida usa cocaína. E, como sempre, testamos essas ideias ou soluções para o problema para obter feedback. Quais são os processos projetados? Mais complexo? Na verdade, pode parecer assim. Há muitas colaborações entre designers, desenvolvedores e pesquisadores. Juntos, eles dão vida a ideias com base em como os usuários se comportam, sentem e pensam. Áreas-chave envolveram pesquisa do usuário, experiência do usuário e estratégia e teste do usuário. E um monte de pensamento de design faz. Eu acho que ele tem um processo para resolver problemas criativos pensamento de design lobo e que o processo de design muda constantemente. Em resposta ao feedback, Aprendemos com usuários e protótipos de ajuda, redefinir o problema inicial, criar novas idéias ou modificar as existentes. Então, agora que você tem uma idéia melhor do que é o processo de design, vamos começar a planejar nosso projeto. Vejo você no próximo vídeo 4. Usuários: durante a fase de planejamento, falaremos sobre contornos de projetos,perfis de marca, perfis de marca, jornada do usuário, mapeamento do site e design visual. Quanto mais for o plano pesquisado, mais eu acho que podemos ganhar o que devemos ter em mente. É o Quem e por quê, o que e como das interações do usuário com o nosso site durante os estágios Quem e por que estavam pensando em nossos usuários. Estamos perguntando quem pode estar visitando. Serão fãs, funcionários em potencial? Clientes potenciais? Números ou curiosos? As pessoas também perguntavam, por que estavam desaparecidas? Poderia ser orientado para objetivos ou exploratório? Significado? Eles estão procurando informações, precisando de serviços específicos, querendo ser um potencial empregado ou empregador? Ou eles só se preocupam com a pessoa, produto, empresa ou marca? E eles querem aprender mais sobre algo ou alguém. Bem, para o seu 1º 2 dio, pense em seus usuários e por que eles estão visitando seu site. Depois de determinar que seus usuários começarão a delinear nosso site, nos vemos na cidade de 5. Esboços do projeto: na face oeste. Já usou suas interações? Nós montamos nossos esboços de projeto aqui nós respondemos as perguntas sobre o que é os parceiros da existência dos sites? Quais são os objetivos de ação para nossos usuários e quais são as prioridades ou objetivos que temos? Onde sites tipo de objetivos de ação incluem contato se inscrever novamente, comprar algo, obter informações, ouvir música, assistir vídeos e mais ação vai para encontrar o propósito de seus usuários querendo interagir para o seu site. Por exemplo, este é um artista que eu gosto. O nome dela é Selena Child. Eu amo suas obras de arte e objetivo bashing para mim, quando eu olho para sua situação Web é descobrir mais para obras de arte indo para sua galeria aprender mais sobre ela como uma pessoa e artistas. Se eu quiser entrar em contato com ela, esse é o meu objetivo de ação. À medida que vamos para a página de contato dela, nós concebemos-lhe uma pequena imagem fofa, uma pequena lista de e-mails de assinatura que eu posso me inscrever para um contato pessoal, você sabe mais para representação, junto com uma lista de mídias sociais contas das quais ela faz parte. Então, para entrar em contato com Alina criança, eu posso entrar em contato com ela diretamente se inscrever para sua lista de e-mails de assinatura ou segui-la em qualquer uma dessas plataformas de mídia social. Então o objetivo para mim como um objetivo de facção de usuário seria entrar em contato olhando uma criança e qualquer caminho ou para o meu acampamento. Outro exemplo seria o Spotify. Então, digamos que, como usuário, queremos nos inscrever no Spotify. Então, vamos clicar neste botão assim que visitarmos o site e nos entregarmos com Facebook ou nos inscrevermos com um e-mail, mas atriz de nossa escolha. Uma vez que você se sentir em que a informação, rápido, a caixa de capítulo podemos clicar em se inscrever. Então isso é uma ação ir. Outro objetivo de ação para o site Spotify entre usuários seria, se o usuário já foi conta, eles podem simplesmente fazer login. Assim que você estiver na página de login, você pode fazer login com o Facebook ou o endereço de e-mail e senha. Você criou outro objetivo de ação que é muito comum para ser capaz de chocar. Então, o que eu estou fazendo? Digamos que estou procurando um item específico rolando para baixo. Eu vejo o item de escolha que eu quero fazer sua avaliação. É como a quantidade que eu quero primeiro para o cartão. Eu tenho o item para o carrinho, então vamos prosseguir para check-out agora. Assim que eu proceder ao check-out, eu vou ser rápido. Esta é a perfeição de citar em conta. Isso acontece porque atualmente não tenho uma conta ou não estou entrando para realizar a meta de ação de fazer uma compra. Isso foi pelo menos outro comentário. Na verdade, ir seria procurar algo. Voltando aos nossos objetivos de ação aqui, podemos ver que tudo o que nos deparamos online tem um propósito. objetivos de ação aqui, Aqui está um exemplo do nosso projeto de classe. Quando cortarmos através de um slide de site como este, isso significa que estarei guiando você através do que acabamos de aprender e aplicá-lo ao nosso projeto de classe . Então, vamos começar a nossa aula. O projeto estará construindo um livro. Há um site, então estas são as informações dela para o esboço do projeto. O propósito dela é vender alguns livros. Pode oportunidades mostrar seu trabalho e compartilhar sua experiência por escrito. Seus objetivos de ação são vender livros, contato para oportunidades, comunicação direta e conectar-se através de mídias sociais, ou ter sido um seguido prioridades ou objetivos incluem mostrar livros para vender, ligar e enviando um e-mail para a mãe se conectar ou para seguir o pai. Então, para você usar o seu processo de design para isso, eu forneci uma resposta perguntas para o seu projeto. Esboços e objetivos. Escreva qualquer que você conhece, você acha que será benéfico para você. Então, quando ela delinear a carreira, falaremos sobre conteúdo. Próximo vídeo de Siyuan. 6. Conteúdo: conteúdo. Outra parte do estágio das interações do usuário é o conteúdo do conteúdo. Faça as perguntas. O que o site precisa incluir? Como o conteúdo será categorias e quais serão as principais categorias de conteúdo? Pode ser qualquer coisa. Podem ser imagens de texto, ícones, vídeos e muito mais. O conteúdo varia de site para site, mas deve sempre ser relevante para seus objetivos de ação. Basta dar uma olhada em alguns exemplos. O conteúdo do texto deve ser incluído em um documento do Word. Docas agradáveis. Quanto mais conteúdo de contexto você incluir, melhor. Podemos descobrir o que deve ou não ser incluído em nosso site. Ele também ajuda você a organizar seu conteúdo de texto para suas categorias principais. Então aqui estão o meu conteúdo de texto para o meu site pessoal. Como você pode ver, eu joguei-o as principais categorias home page em cerca de, e eu também tê-lo para o trabalho. Eu tenho um monte de outros conteúdos de texto que eu categorizei em minhas categorias principais. Então, como você pode ver, mais eu concluir, mais posso entender sobre o meu site e o que eu quero comunicar. Então, a outra parte do conteúdo, incluindo imagens, temos que ter em mente que muitas imagens no mundo têm direitos autorais . Isso significa que você precisa obter permissão. Felizmente, sites como unspool ash nos permitem usar imagens de alta qualidade para política livre. Olhe para um exemplo. Digamos que queremos olhar para uma imagem para o cão uma vez que entramos em nossa busca. Como você pode ver, temos algumas qualidades incríveis de cães. Digamos que queríamos baixá-los enquanto temos dois Duis Hubbard. Clique nesta seta e nós a teremos. Faça o download. Certifique-se de creditar o artista também. Outra informação de conteúdo. Podemos incluir seria ícones e elementos gráficos. Muitos sites fazem uso de pequenos visuais, como ícones e símbolos. Links de prisão com flat I ícone alguns elementos e eu concerto livre fez para baixar e usar. Então vamos dizer que queremos olhar para cima o foguete tem algumas imagens incríveis de foguete porque você pode ver alguns destes são livres. Se nos depararmos com uma multidão, isso significa que ela faz parte de uma conta de assinatura, portanto, esses ícones não precisarão ser comprados. Mas vamos apenas dizer vocal com este em particular para que possamos clicar neste botão. Uma vez queríamos baixar. Vamos ver algum PNG e vamos clicar no maior tamanho de pixel de 120. Vamos repassar isso mais à medida que trabalhamos em nosso site no projeto da classe. Como você pode ver, conteúdo do nosso projeto de classe incluirá através de artigos de nome de texto sobre contatos e livros. As imagens seriam imagens atuais do livro. Aparência auto-retrato, imagens em imagens de artigos. Asas seriam mídias sociais, asas, setores, Twitter, instagram e Facebook. Elementos gráficos incluem logotipo, mídia social, iPhones e um toque no texto. Vamos usar algo chamado Lauren Gibson e esses textos de enchimento de ar. Então, Lauren, é, na verdade, um, um texto de espaço reservado. E o que aconteceu é que para o nosso site, já que não temos texto relevante em nossas informações, então vamos usar algum texto de preenchimento. E como podem ver, posso gerar a Laura Epsom. Então, se eu digo que eu quero parágrafos uma soma maior, obviamente gerar porque eu rolar para baixo, eu vou ser capaz de café todo esse texto e copiar colar no meu site então vamos falar mais sobre isso enquanto começamos a construir o site, nosso primeiro a fazer no conteúdo. Vamos coletar e organizar seu conteúdo usando o formulário pdf que eu criei para você. Por favor, preencha o formulário e preencha as suas principais categorias. Quanto mais você pode incluir informações de texto, melhor. Assim, depois de coletar seu conteúdo, podemos criar nosso perfil de marca. Vemo-nos no próximo vídeo. 7. Perfil de marca: perfil da marca. Um perfil de marca define como sua marca deve ser e se sentir e definir. Que mensagem você quer dizer? Branding descreveu quem somos, o que gostamos e o que representamos. Como expressar essas características é queimar diretrizes. Running constrói a identidade visual de uma pessoa ou empresa através da linguagem, estilo , personalidade, imagens, interações e linguagem visual. Ao projetar um site para si mesmo, você usa sua própria voz enquanto projetar para um cliente significa projetar lá. Meninos, a descoberta de um estilo de personalidade significa foram moldar traços de caráter ou algo que os usuários querem possuir, imitar, abraçar ou auto identificado através de fotos, desenhos e símbolos e outros , podemos refletir esses traços da forma como você interage com o usuário. Expressa seus traços de caráter muito bem. Sua interação ser Hume orelhas animadas. Você vai fazer perguntas, ou você vai ser rigoroso? linguagem visual é a parte divertida da impressão. Podemos criar paletas de cores, escolher telefones e encontrar elementos gráficos e ícones. Vamos dar uma olhada no nosso projeto de classe com seu perfil de marca. Ao trabalhar no perfil da sua marca, certifique-se de que você pode fazer um resumo de toda a sua marca. Por exemplo, em nosso projeto. Nossos autores disseram que ela gosta, certo, então este é o resumo dela. Ela disse que gosta de escrever seus estilos espirituosos, assim como sua personalidade. Ela é criativa, mas ela gosta de mostrar um lado legal e minimalista de si mesma para ser menos sobre os detalhes extravagantes, e ser mais sobre o conteúdo é o que importa para ela. Então este é um exemplo muito curto, mas espero que isso traga o ponto para casa. Quando você estiver criando seu perfil de marca, certifique-se de consumir, surgir quem você é e o que você gostaria de trazer para a mesa. A parte Miller do perfil da marca onde falamos sobre o nosso personagem tratar para refletir seus deleites de personagem, temos que chegar a uma frase ou uma palavra que realmente resume toda a marca para este exemplo são autores e ela é espirituoso, então seu caráter é espirituoso, e estamos tentando descobrir o que isso significaria para ela. Por enquanto, diz que ela é legal na cor, mas não tem olhos legais na cultura pop. Legal. Ela é minimalista, suave, mas não quieta, e é simples, mas não simples, para refletir nossos traços de caráter. Podemos realmente encontrar imagens, cores e itens que nos inspiram para que possamos usar unspool, ash ou qualquer outro serviço de imagens visuais para que possamos encontrar itens que nos ajudarão a encontrar nosso caráter ou traços doentios. Então, digamos, por exemplo, que estamos procurando espirituoso, para o nosso autor se esguichando. Você pode encontrar essa imagem, e isso é algo que ela poderia corrigir dieta. Eu comi isso? Então esta seria uma imagem divertida que podemos coletar para um quadro de humor. Então, uma vez que você clicar neste botão de download, podemos salvar as imagens em uma pasta que vai ajudar foi construir o nosso quadro de humor. Então, para o nosso projeto de classe, eu já forneci as imagens estarão usando e sob o topo do recurso. Nós vamos ter certeza de baixar isso e colocá-lo em uma pasta em seu projeto de classe. Então, para fazer, vamos ótimo um resumo da marca. Pense em seus traços de personagem e encontre algumas imagens que podem ajudá-lo a se inspirar. Depois de definir o resumo da sua marca e traços de caráter, podemos começar em nosso design visual, ver quando o próximo vídeo 8. moodboards: Assim que você tiver sua marca em algum lugar com traços de caráter definido, podemos começar a colocar nosso perfil Bram juntos em um quadro de humor. O objetivo é encontrar padrões, cores e idéias. Podemos usar um movimento para através do Pinterest ou visão. Mas para este projeto de classe, vamos começar a trabalhar na visão, e eu vou te mostrar como criar seu quadro de humor. Vamos começar. Uma vez que você entrar em sua visão, vamos clicar neste botão aqui e vamos começar a criar a bordo do nome inteiro. É o projeto “Kill Share”. Vamos ficar com o estilo de alvenaria. Vamos começar. Então aqui temos o nosso relatório e esta é a nossa seção aqui, então vamos começar a adicionar algumas imagens que foram inspiradas. Lembra-se desta foto aqui? Decidimos incluir vamos voltar para remover a placa e eu já baixei para nossas pastas. Então o que vou fazer é pegar todas as fotos que me inspiraram. A e eu vou clicar em secá-lo no tabuleiro aqui. Vai levar algum tempo, mas estas são todas as imagens que serão incluídas com as nossas imagens carregadas. Vamos criar um título aqui, imagens de cada pergaminho, eu estou para baixo. Você pode ver todas as imagens que carregamos com alguns que ainda estão tomando seu tempo. Então vamos voltar aqui para cima e, em seguida, chegar que nós estávamos mais inspirados. Você pode usar isso para nos ajudar a encontrar nossa paleta de cores, e eu gosto desta foto em particular. Então vamos voltar para a nossa pasta e encontraremos essa foto. Aqui vamos nós. Então vamos começar a usar essa foto para nosso próximo passo fora das cores. Então, para que você tenha que configurar seu próprio quadro, você pode usar o Pinterest ou a visão, mas o objetivo era encontrar imagens e ver se você pode encontrar algum padrão, cores e idéias que você gosta com o seu no quadro configurado, podemos então começar a criar nossas paletas de cores. Vemo-nos no próximo vídeo 9. Cor: escolher cores pode ser divertido. As cores são mais do que parecem, e isso faz você sentir e pensar. As cores podem vir com muitos símbolos e, ao coletar várias cores , cria uma paleta. Essas paletes são como palavras para encontrar um humor ou sentimento, então vamos dar uma olhada em alguns exemplos de geradores de cores. Um gerador de paletas de cores que eu realmente gosto é para Canda. É um dos meus favoritos porque eu posso segurar uma foto que eu gosto. E tudo vem cinco milhões de cores que foram povoadas a partir da imagem. Lá, podemos obter um número frio de texto e um nome, Então esta é uma maneira de gerar uma paleta de cores fazendo imagem que você está inspirado. Outra ferramenta de cores é chamada de refrigeradores. Aqui no gerador de cores, você comprime a barra base e os resultados. Um monte de outras cores que surgem usando cores é bastante simples. Você pode arrastar uma barra de cores de sua escolha. Você pode ajustá-lo conforme necessário. Obrigado saturação e brilho. Se você gosta de uma determinada cor, você também pode mantê-la trancada no lugar enquanto gera novas outras cores. Como você percebe. Nós também temos o número de código hexadecimal para a cor, bem como um nome que será útil em um pouco. Vamos seguir em frente com o nosso projeto. Vou ao Silicon Image que me inspirou do nosso conselho de invasão. Então vamos começar com isso. Salvei a imagem no meu computador. Vou tirar essa imagem. Vou arrastá-lo. O que vem as cinco cores principais. Então, vamos preencher isso em nossa visão A, bem como nosso arquivo B X D aborrecido. Então vamos começar com o Envision at Honor Report irá criar uma nova seção, e aqui podemos adicionar uma amostra de cor. Vou mover isto de lado. Eu clico neste botão para copiar Colar. Faremos a mesma cura. E aqui temos a nossa cor. É percenter. Voltou ao nosso forte. É o mesmo para todas as outras cores. Agora que temos a nossa placa de cores configurada no nosso quadro de humor, vamos atualizar o nosso arquivo dopey X'd estas ações abertas de compartilhamento de habilidades. Você vai começar. Como você pode ver, você terá um piscar vazio. Uma página de cores do sistema onde todos os blocos de carne grande. Então, vamos atualizar nossa paleta de cores. Uma cópia. Aqui, estique isso de volta. Vamos clicar nesta caixa. Uma vez que você clicar nessa caixa, vamos clicar neste botão um pouco colar nosso código. Agora que a mudança de cor que salva uma amostra de turnê, certifique-se de atualizar seu nome de código hexadecimal aqui. Nomeie nossa cor aqui. Agora RGB, como mencionamos, significa vermelho, verde e azul. Então vamos encontrar o nosso código de cor RGB azul da meia-noite que permite que a Internet faça isso. Vamos para códigos hexadecimais coloridos. Então vamos esticar isso de volta e eu posso mostrar a vocês como nós confinamos para que possamos colar o código de café . Aqui eles entram no reboque. Aqui temos nossa lista de outros códigos de cores. Passo RGB para a nossa cor cozinheira é 9 59 e 74. Selecione e coloque isso agora que o arquivo salvar Vamos passar pelo resto para todas as outras cores . Então aqui temos as cores do nosso sistema todas configuradas. Foi guardado no nosso ficheiro, e guardado na nossa nova corte. Para que você faça em seu próprio projeto pessoal, encontre sua paleta de cores que você pode usar em visão ou Pinterest ou qualquer outra ferramenta que você achar muito útil para suas próprias necessidades. Então, vamos avançar para aprender sobre como escolher nossos fundos. Vemo-nos no próximo vídeo 10. Tipografia: Assim que você tiver suas cores escolhidas, podemos começar a escolher fontes. Agora. Tipografia é um estudo de tipos de letra, e há toda uma ciência por trás disso. Agora. Um tipo de letra é como um texto parece, sente e lê. É a arte do texto criado por um artista ou artistas, e é basicamente o que vemos quando lemos textos. Agora. Ah, diversão é um arquivo que contém um tipo de letra, e usamos fontes em um computador impostos o tipo AIDS. Vejamos um exemplo. O monstro da frente seria instalado em seu computador, e quando escolhermos usar, esta fonte terá acesso a seus tipos de letra. E esses tipos são leves, normais, médios, semi velhos, velhos, pretos e alguns outros. Agora, um tipo de taxas também pode ser categorizado. tipos de sensores e da Sarah. Existem outras categorias, mas Sarah e Sand Sarah são as duas mais comuns. Agora Sarah Air, as meninas que ficam fora das letras, enquanto San Sears, o enquanto San Sears que significa não, Sarah tem um olhar mais simples que é comumente usado para texto. Alguns tipos de letra são melhor usados em itens impressos, enquanto outros fazem bem na Web. E se você olhar para este exemplo, podemos ver algo chamado emparelhamento apertado. Temos um tipo San Serif e um certo tipo. Tudo o que importa é que possamos ver um equilíbrio e que o texto e todo o conteúdo possam ser lidos com muita facilidade. Então vamos olhar para alguns exemplos de pais que podemos acessar ponto com do meu telefone My hans dot com tem um dos mais altos profissionalmente design e qualidade fontes e tipos de letra. Então, ao trabalhar através deste site, também podemos ver uma etiqueta de preço, mas algumas dessas fontes. Mas, felizmente, temos o que é como o Google Farm que nos permitirá acessar fundos de graça , e podemos acessar através de suas categorias. E nós também podemos editar a frase para que possamos testar como estão a frase Will pode olhar em nosso site. Ouça, queremos mudar nossa frase para algo que possamos no nosso site. Então vamos fazer isso. Você pode aplicar essa frase a todos os fonds, e à medida que rolamos para fora, podemos ver como a fonte ficará longa para a nossa frase. Este é um grande exemplo de como contestamos pensamentos e tipos de letra. Se você decidir escolher um lote, você pode apenas clicar neste botão aqui e depois abaixo. Ele pode dizer este botão e podemos baixar em nosso computador para acessar os diferentes tipos de faces e estilos. Então vamos antes do nosso projeto de classe. Então, felizmente, quando eu estava trabalhando em nosso projeto, eu decidi escolher o pensamento. Um conjunto rápido foi rápido. Filho, temos quatro estilos. Isso significa que há quatro tipos de letra. Nós vamos. Então vamos aplicar Quick Santo nossa prancha. Vamos para a nossa visão e nos comprometemos em outra seção em ST. Então o que eu já fiz foi tirar algumas capturas de tela de nossos tipos de fontes de títulos locais. O que? Vou fazer a sua cabeça de volta a pasta dela sobre tipografia, pegar todas as imagens aqui e clicar e soltar uma cura. A maioria dos crimes como se não pudéssemos começar a mudar o tipo para o nosso idiota x d cinco. Bem, eu já fiz é que eu já tenho areia movediça carregada. Então, digamos que eu peguei esse item em particular que vamos ver quicks ele. E agora é enviado para o ritmo normal. Então o que eu vou fazer, eu selecionar todos esses textos em particular muda para areia movediça e o mesmo vai para esses itens aqui, o pré resumido. Mas só temos velhos. Então vamos segurar que isso me disse dessa maneira. Ter regular definido como regular e a próxima coisa que podemos fazer é atualizar nossas cores de texto. Então o que eu já fiz é que nós já temos as grandes cores. Então, o que podemos dio mudou três cores principais de diferentes tons. Então vamos apenas para esse clique em que escolher peça de cópia não iluminada agora de volta para nossas formas de cores. Agora podemos atualizar todos os textos, e queremos ter coloridos. Ela era a maior sombria. Vamos mudar o corpo do texto para algo um pouco mais leve. Então, o que isso resolveu? Podemos realmente salvar o estilo clique direito para cima. Você pode ver que os ativos de estilos de caractere. O que isso significa é que não podemos acessar esses tipos de caracteres mais tarde à medida que trabalhamos em nosso protótipo , quando você faz o mesmo para cores mais. Enquanto isso, eu gostaria que você escolhesse sua diversão. Nos encontraremos no próximo ano. Vamos começar a falar sobre navegação no site, furto 11. Navegação: depois de definir nossos usuários e seu propósito de interagir com nosso site, queremos saber como, embora navegar para o site e quando eles estão no site Olá navegar dentro dele. Na verdade, a navegação pode ser dividida para externa e interna externamente. Queremos saber como os usuários encontram seu site, como os usuários antigos acessam seu site. Quais pontos de acesso enquanto eles tomam tipos de pontos de acesso podem ser durante o e-mail, onde um link dentro do e-mail e quando você clica nele e usar o site. Uma pesquisa básica como o Google sendo ou jovem um link direto, significa que os usuários visitam o site com freqüência para que eles se lembrem do seu restante. Então tudo o que eles têm a fazer é inserir o nome dos sites na senha da parte de pesquisa, não site protegido por senha significa que você só tem acesso ao site se você criar uma senha para que estes possam ser como uma conta bancária ou uma conta de mídia social. Uma mídia social lenta através de uma pesquisa de perfil ou mensagens de amigos. Você pode realmente ver informações sobre o site da Web ou a empresa ou o indivíduo. Então, quando você passa pelas mídias sociais, há uma abundância de moedas de acesso dentro do próprio post ou da própria página através de publicidade paga . É um ponto de acesso comum para o qual muitos usuários são direcionados. Assim, quando você vê um anúncio e está interessado sobre esse item específico ou informação ao clicar, ele o levará diretamente para esse site. Há um exemplo de acesso. Esta é a minha jornada de usuário, que falará mais tarde no curso. Mas, em termos de navegação, como os usuários chegarão ao meu site e concluirão uma tarefa depende de quais ações serão tomadas. Por exemplo, eu tenho um potencial empregador curioso sobre mim através de sua ação de visualizar meu currículo carta de apresentação YouTube, vídeos de um projeto. Obter seu perfil, Twitter ou meu blogueiro defina-me diretamente através de pesquisa básica. Assim como o Google, eles podem ser direcionados para o meu site. Então, há muitas vias que você pode acessar um site, e uma vez que você está dentro do site, há outro tipo de navegação, e isso é chamado de interno. Então, enquanto estamos no eterno, você está fazendo perguntas sobre como os usuários passam de uma categoria de conteúdo para outra. Quantos abusos sexuais levam para completar uma tarefa? Legal. Então vamos dar uma olhada no nosso projeto de classe agora projeto de classe. Quando estamos falando de navegação, estamos falando sobre a notificação interna. Portanto, nosso site de autores Navegação Interna são os seguintes. Temos categorias principais, como home sobre looks, artigos e páginas de contato. Então, dentro de cada categoria média, temos os seguintes itens que serão, incluindo nessa página específica. Está na página inicial. Vamos ter uma página de rosto, um livro de título de livro, espreitadela com formulário de pré-encomenda e outros livros listados na página sobre a página terão auto-retrato e uma biografia dentro dos livros. Página terá uma galeria de livros com o título e sua descrição, juntamente com o comprimento para levar os usuários a essa página de livros em particular sobre artigos terá lista de artigos. O artigo, Imagem, artigo, título e a descrição do artigo e, por último, no contato por idade terá informações sobre como os usuários podem entrar em contato com outros Então, estaremos incluindo seu e-mail, uma conta de mídia social e de conselho curto. Assim, para que você faça o ripper, sua navegação externa e interna, revise suas categorias de conteúdo para determinar sua navegação interna Up. Em seguida, vamos começar a discutir sobre o mapeamento do site. É aqui que vamos começar a mapear nossa navegação interna. Veja no próximo vídeo 12. Sitemapping: site Mint descreve uma navegação da página inicial para as diferentes páginas da Web foram pedaço de conteúdo do nosso site. De certa forma, um mapa do site é como um fluxo de conteúdo. Como queremos que os usuários passem de um conteúdo para outro e mapeie o caminho dos usuários ao interagir com o site inteiro? Então, em termos de navegação interna, isso significa que estamos conectando nosso conteúdo. Queremos ter certeza de que a conexão com a navegação interna faz sentido. Então, como os usuários obtêm um conteúdo para outro. Como você usará seu skiffle de uma categoria de conteúdo para outra categoria? Então, aqui está um exemplo de mapeamento do site. Este é o meu ligeiro. Meu para o meu site pessoal. Usando o Google dry foi capaz de mapear meu conteúdo e blocos. No canto inferior esquerdo, você pode ver uma lenda. Amarelo significa a página Forro nas várias cores abaixo representa guias, conteúdo da guia, páginas secundárias em sites de terceiros. Então aqui está o colapso. Quando um usuário acessa minha página inicial, aqueles que têm um borrão Nobel na galeria de projetos mais recente de seu usuário podem navegar para a página de contato. Uma página de trabalho sobre o blawg agora o sangue não será uma página separada, mas vai estar ligado ao meu tronco médio, que usaria seus cliques nesse link. Vai levá-los direto para o bloco no meio. Agora, quando eu usar seu acesso à página do projeto de trabalho, eles verão uma variedade de projetos. Mas esses projetos são listados com as guias. Então, quando um usuário clica em qualquer uma dessas guias, seja estratégia de desenvolvimento de amor projetado ilustração nas artes do livro será navegado para separar páginas bem para quais estratégias de desenvolvimento estarão navegando em sua página web, significando se suas curas sobre um projeto específico dentro dessa guia. Uma vez que eles clicam sobre essa informação ou que o projeto será levado para isso. O que projeta página pessoal a partir daí, o alerta ou sobre esse projeto, incluindo quaisquer links externos que estão conectados a ele agora para ilustrações de design de Foot Bart, esses projetos individuais não serão navegou para a nova página da Web. Ele permanecerá dentro das guias, e você poderá ver quaisquer outros links externos relacionados a ele. Lá em baixo estaria o meu rodapé. Aqui estão mais ícones de mídia social, então vamos ver como isso funciona. Navegando para o meu site pessoal. Esta é a página inicial. Como você pode ver, temos o plug de trabalho em categorias principais de contato. Está na página inicial. Se rolarmos para baixo, você verá em sobre Blurred e meu último projeto. Então vamos ver se clicamos na idade de trabalhar. Como você pode ver aqui, temos uma variedade de guias que podemos clicar em. Então, se ainda estamos na guia Desenvolvimento Web, digamos que olhamos para o Projeto t criar ao clicar em T Crate foram direcionados para a página principal de comércio de chá. Aqui. Podemos aprender mais sobre esse projeto em particular, mas vamos voltar atrás. Então decidimos ir em ilustrações. Pegue um relógio. Olá. Aqui está. Podíamos ver o nosso projecto em particular. Como você pode ver, Eu não posso clicar em cada projeto para nos levar para sua própria página pessoal, porque eles terão ganho suas próprias informações é definido dentro deste site particular. Mas podemos peneirar imagens para obter mais informações. Se você acessar a página de contato, temos quaisquer informações de contato abaixo. Aqui você pode ver o flutuador pé, que eu incluí meus ícones de mídia social como eu mencionei Quando clicamos bloco, ele vai nos direcionar para o meu blawg no meio, o que levaria um segundo Duque de So. Como você pode ver, cada pequena coisa importa. A maneira como você interage com seus usuários é extremamente importante. Aqui temos o logotipo, que uma vez clicado, pode levá-lo de volta para a página inicial, então você quer torná-lo o mais simples possível para seus usuários. Quanto mais eles puderem navegar em seu site com facilidade, melhor eles retornarão e apreciarão nós individuais ou seu projeto de classe. Vamos começar a trabalhar no mapeamento do site de nossos sites de autores, por favor, abra número um site projetado definir início no Google desenhar Harold projetado como nosso site irá operar a partir da tartaruga na aplicação. A primeira coisa que precisamos para Dio é colocar para fora blocos de nossas principais categorias. Então vamos fazer isso. Isso foi em um quarteirão. Bem, digamos casa para home page. Vamos ter certeza de que tudo centrado e para tornar o texto um pouco mais fácil sobre os olhos. Vamos mudar isso. Farei a luta um pouco pequena Perfeita. Então é pelo menos um pouco a Ísis aqui. Vou colocar isso no centro do nosso documento servido com casa é uma das nossas principais categorias, mas porque é a página principal, ele vai ser direcionado para nossas outras categorias principais. Então vamos construir isso. Teremos uma cópia colada. Eu uso atalhos no teclado que, no entanto maneira que você quer uma cópia colando seus elementos, por favor, fazer maneira tem um total de outros quatro. Pode Grécia. Isso é o que Jesus pedalando até então mudou isso para sobre livros, artigos e contato para todos esses elementos. Vamos dar-lhes uma fronteira. Mudou para graça é o que é mais fácil para os olhos. Use-o para esta capa. Isso é uma linha. Estas categorias bem, mesmo meio. Vamos destruir tudo. Uniformemente horizontal. Vamos apenas ser alinhá-lo assim agora nós também temos nossa manteiga onde vamos incluir nossos ícones de mídia social. Então vamos usar esses dois que copiamos colar mais cedo. Que cara de café? Mais uma. Você está mentindo. Esses caras eram, digamos, Instagram, Twitter e Facebook. Vamos distribuir estes um pouco uniformemente puxar as coisas aqui para baixo. Também está em algumas fronteiras para esses caras. Apanha-o. Isso entra? Aqui vamos nós. Então, em seguida, vamos descobrir como nosso conteúdo estava se conectando. Então nós dissemos na página sobre, nós vamos ter uma biografia em livros auto-retratos. Page, no entanto, teríamos uma galeria de livros para cada livro seria levado à sua própria página do livro. Então vamos fazer isso. Essa é uma página secundária. Então vamos mudar isso para livro. E porque a galeria está redirecionando para várias páginas da Web, vamos fazer um símbolo para nos notificar que a página de livros está conectada a várias páginas secundárias . Então o que vamos fazer é copiar colar, descobrimos. Apague esse imposto. Vamos dar as nossas categorias principais. É de cor branca. Poderíamos fazer o mesmo. A página inicial dela era amarela, então, voltando aos livros, tudo mudou a ordem para trás. Mova isto para cá. Só um pouco faz um pouco de carne. Você também pode fazer outro irá copiar colar. Altere o pedido novamente. É até trás. Você apenas ajusta assim. Então vamos agrupar esses itens, e então vamos dar a isso uma borda de DOT para pontos. É uma página secundária e lhe dará a cor de pêssego e teste agora na página do livro. Mencionamos que o livro terá um link externo para um site que permite que um usuário compre um livro. Então vamos construir isso. Isso é ritmo de cópia, mas o elemento arrastar isso para baixo vai dizer site para comprar um livro. E vamos mudar uma cor para cinza porque dissemos links externos são ótimos, mas vamos re mudou a borda do dedo um sólido. Vou mudar o tamanho da fonte também só para facilitar os olhos. Lá temos uma seção do que página feito. A conexão que temos com os artigos é que a autora terá um blurb de artigos que ela escreveu para freelancing. Assim, cada um dos blurts será capaz de vincular ao artigo principal no outro site. Então isso é um link externo. Então vamos copiar o ritmo. Outro item aqui, apenas uma luz que gosta para que você possa usar as linhas vermelhas para ajudá-lo. Diremos que o contato do artigo Queen só tinha o e-mail, então vamos desenhar isso também. Mas não é um bom link externo, mas ainda é uma forma de contato. Então aqui temos, é a nossa conexão de conteúdo para o nosso mapeamento de site. Em seguida, temos que ter certeza de que o que queremos para Dio é apontar para o que um usuário pode navegar. Mas primeiro, vamos agrupar certas coisas. Como mencionamos, as principais categorias serão a nossa navegação principal para o site, modo que normalmente é colocado no cabeçalho. Então vamos fazer um símbolo, então vamos mudar. Isso muito transparente mudou a fronteira. Falar com Deus mudará a ordem na parte de trás. Podemos usar o gráfico na parte de trás do documento para nos ajudar a gostar das coisas um pouco mais limpas e avançar. Você pode fazer o mesmo dizendo aqui que este é um cabeçalho e este clique ir para longe de outras páginas que um usuário vai tomar. Vamos mudar o tamanho. Certifique-se de que as coisas estão centradas. Então vamos dizer que o mesmo para o nosso rodapé irá copiar ritmo. Durante isso abaixo, vou dizer que este é o rodapé, então vamos limpar o arquivo apenas um pouco. Faça as coisas um pouco Niedere, reduzindo alguns dos tamanhos. Ainda assim ele poderia ser o mesmo para o nosso conteúdo. Aqui seco, esses caras levemente home page está um pouco bem, então vamos fazer a conexão. Vamos usar a nossa linha. lágrima usará o conector do tio para que a página inicial possa ser navegada para ser cerca de. Então tudo que você tem que fazer é tocar esse ponto roxo com sua boca. Segure aí, botão e arraste. Podemos fazer o mesmo com todos os outros quarteirões, mas vamos fazer os barris para estes tipos. Então, o que definimos de livros Galeria nos leva a uma página do livro, mas uma página do livro também pode voltar para a nossa galeria de livros, então vamos precisar de uma canção em particular. Então vamos trocar e colocar a seta segurando o mouse loiro e segure o botão de mudança. Você pode apenas arrastar para baixo liberar. Faremos o mesmo indo para cima, dissemos um livro. Obter ao lado de um dedo leve, permitir que os usuários por ele. Mas então vamos fazer isso. E então os artigos realmente fazem o mesmo para os artigos principais. Ângulo de contato para o e-mail também. Então, quando você está neste site para comprar um livro, há uma referência para levá-lo de volta à página inicial. Então você não poderia ler mais sobre o autor se você não fez isso. Então vamos fazer uma conexão lá. Não toque nisso. Basta arrastar pressionado irá para o topo clicando nesta tecla de seleção. Como pode ver, temos diamantes. O que você pode fazer é pairar sobre este diamante. Arraste-o todo aqui assim porque é uma conexão externa. Vamos mudá-lo para adotar um ponto Podemos fazer o mesmo para o artigo principal. Vamos fazer outro como aquele cão aqui em cima. Aqui vamos nós. Vamos mudar o ponto para ponto Clique na tecla de seleção, mouse sobre o diamante. Basta movê-lo como para que você também possa arrastá-lo para baixo. Então é um pouco mais fácil para os olhos porque este tipo de fronteiras de que estamos conectando. Então vamos mudar isso e isso de volta só para torná-lo um pouco mais limpo. Vamos fazer algumas anotações sobre esta seção em particular. São porcos de cópia, e diremos quando estiver a um clique de distância dos livros. Calorie, quem quer? Outra cópia paga para dizer aqui que estes são livros externos e lá você tem o mapeamento do site. Então, agora concluímos o mapeamento do site do projeto de custo. Espero que isso faça sentido para você, e que o Google draw pode realmente nos ajudar a construir nosso site, mapeando através de fácil e intuitivo. E é uma ótima prática se você quiser apenas aprender mais sobre a ferramenta ou apenas aprender a criar diagramas. Assim, para que você construa seus diagramas de mapa do site uma vez concluído, podemos falar sobre suas viagens. Vê o próximo vídeo? 13. Jornada do usuário: usuário use sua jornada é o fluxo que ele costuma passar ao interagir com um site inteiro . Ele gira em torno de um objetivo de ação. Isso nos ajuda a descobrir o que os usuários farão e em que ordem. Qual é o caminho deles do ponto A para me apontar para completar uma tarefa ou objetivo. A parte complicada é limitar o número de passos. Use suas tomadas para ir de um ponto para outro. Clicando em vários botões apenas para obter informações foram para ser capaz de comprar algo vai irritar um usuário. Você deve atribuir de forma proposital para que o usuário tenha uma experiência agradável e retorne ao seu site. Alguns invólucros de união de usuários podem ser simples ou complexos. Como este. A jornada do usuário idéia é conhecer a resposta emocional de um usuário, seus pensamentos e experiência geral. A partir dessas respostas, podemos obter feedback para melhorar nossas ideias ou para criar novas ideias. A partir deste exemplo, podemos ver uma experiência de usuários de encontrar um novo visual para novo caiu de ser capaz encontrar um serviço que irá fornecer-lhe do que você olha e em que ela tem uma grande experiência e ela vai defender isso empresa em particular. A experiência geral dos usuários contêm muitos níveis em é que vários passos? Mas esse é o ponto de uso da jornada é conhecer mais de seus usuários, porque eles são os únicos que vai ser o seu site. Você como designer terá que projetar para suas necessidades e para suas experiências até. Próximo. Vamos falar sobre o nosso projeto de aula, então vamos começar a construir nossos sonhos de autores. Abra o arquivo um usuário do site de design para mim Iniciar arquivo no Global Drop. Vamos mudar nossos objetivos de ação para nosso usuário. Na verdade ir para um usuário seria comprar um livro para obter informações sobre o autor ou livro foram para entrar em contato. Estique o quarteirão aqui. Então, digamos que nosso usuário, é qualquer potencial. O que tem no trailer? Vamos mudar o tamanho da frente apenas para ficar muito mais fácil nos olhos. Certifique-se de que tudo está no centro. É dado uma fronteira. Facilitar os olhos. Ainda é só uma cidade, tudo bem, então um cliente potencial pode acessar o site de algumas maneiras. Então vamos copiar, pagar e dizer uma pesquisa básica É um pouco demais pesquisa do Google e isso é rastreado. Durou um pouco em andamento. Copie buracos de colar mais logo acima. Eu vou ver o bem. Vou remover o frio da fronteira. Transparente. Você altera a pesquisa do Google em uma borda pontilhada. Vamos descer um pouco mais, por isso é um pouco mais perto. Então eu vou copiar Colar isto para o próximo ponto de acesso, e isso pode ser agora. Use o riso daqui. Console para, mas misturar. Podemos começar a construir a rede social neste momento. Prove que vamos ver. Então, Sean, vamos arrastar os pontos um pouco porque dissemos centralizar este quarteirão. É por isso que protege o centro. Então vamos mudar isso para nós temos Twitter. Estou no Facebook agora. O outro poderia ser parte de muitos outros escritores e grupos de livros grosseiros. Então, digamos que bom lê este deles. Outra. Vamos apenas dizer que até clube apenas coragem em Herrick. Mais uma semana, , no YouTube. Talvez alguém se deparou com uma página do YouTube onde ela está falando sobre seus livros. Então eu acho que o último lugar por agora. Vamos fazer um exemplo rápido de todos os nossos pontos de acesso. Pontos X podem ser muito complexos. Então, hum, o que você precisa fazer para construir o ponto do seu site para determinar sua jornada de usuário irá ajudá-lo com o design do seu site. Mas para este exemplo deste projeto de classe, vamos torná-lo o mais simples possível. Centralize tudo aqui e vamos construir Ah, site. Eu só vou copiar colar nossos elementos ajudar a economizar algum tempo, empurrar isso aqui para baixo. Religião em nossa página inicial do nosso site é que ela tem uma lista de outras galerias de livros. Mas enquanto isso, vamos expor apenas as categorias principais para obter a página inicial que tínhamos sobre quais livros. Também tivemos nossos artigos na página de contato. Agora, dissemos que os livros têm uma galeria de livros que levaria a uma página de livro, o mesmo para artigos que seriam levados a um link externo estendido de sites de TI. Agora, os artigos também serão tratados da mesma forma onde tem um link externo para o artigo principal . Então vamos construir um bloco extra. Use o ponto para ponto Eu vou dizer livros aqui, outra cópia da paz. O livro dela. Então, essencialmente, estamos construindo nosso mapeamento do site dentro do site. Não precisa ser exato, mas é algo simples. Ainda parece para artigos aqui médicos para que estamos tentando construir um pequeno exemplo de nosso site napping. Mencionamos que o artigo principal nos encontraria no site da Harmony. Então esse é outro ponto de acesso. Então vamos fazer isso acontecer. Então é este Copiar colar esses indivíduos aqui e vamos dizer links externos. E isso pode ser artigo, página de história. Vamos ver isso. Ou também pode ser o site de compra de livros. Vamos voltar à nossa página interna. Vou remover artigos e livros. Kristen tornaria um pouco mais limpo. Vamos voltar para o topo e o que vou fazer aqui. Vamos conectar esses blocos individuais. Então eu vou fazer um Y e conectar os pontos aqui usando minha mudança de objeto selecionado para linha de borda de doca , e vamos usar os círculos para denotar que a besta está conectada, e eu vou encolher isso só para ficar um pouco mais limpo mudou a forma do nosso site . Bem, vamos limpar isso um pouco. Havia frio. A ação que temos aqui. Seria comprar um mas obter contato, obter informações em contato. Então vamos voltar para baixo. Eu não sei. Este é o local. Ajude a limpar as coisas aqui em cima. Bem, agora vamos conectar a nossa navegação externa e interna usando o conector Hubble. Bem, o cliente em potencial para uma busca básica. Talvez tenhamos um longo boletim informativo. Rede social onde eles se deparam com links externos. Vamos limpar isso só um pouco. Eu levantei a Miss Uppers Wall. Só vamos. Isto é um pouco mais. Vamos dar a esses caras meses de flecha. Não, o ponto de acesso sempre nos levará de volta ao site, então vamos fazer isso. Ele está no conector do cotovelo, ligações externas. Vamos colocar essa parte aqui. Rede social. Basta andar, você sabe, a mesma e cirurgia básica para o site. Em suma, o site sempre nos levará para Oops, ele tocou este roxo em particular ficou passo. Compre um livro. Então, vamos selecionar todas essas marcas. Dê um estreito. Agora mencionamos a necessidade artigo para os ings externos. Então, o que? O com o site de compra de livros. Então, é ótimo. Eu tenho que ponto estreitar com o cotovelo. Bem, não importa, e o artigo voltará aqui para enfraquecer as antenas selecionadas. Aqui, escolheremos a fronteira. Esse cara vai. Deixe-me ver se consigo o diamante que eles têm. É isso que faz uma flecha. É escolher um L. diferente até agora, é assim que nossa jornada de usuário pode parecer um cliente em potencial. Conecta nosso site através de quatro pontos de acesso básicos. Boletim básico da Pesquisa Inglaterra. Uma rede social ou fazer várias molduras de fixação que se conectam ao nosso site. Dentro do site Oeste, o usuário pode navegar internamente na página inicial sobre página, contato, contato, cliques na página, página e página do artigo sobre os livros e artigos. página pode atender ao secundário qual página ou um link externo. Em suma, o objetivo de ação pode ser completado agora o potencial canal do cliente, seja por um livro recebendo para major ou entre em contato com o Arthur. Então é assim que você usa sua jornada pode parecer. Agora é a sua vez de fazer isso pelos seus sonhos de usuário. Certifique-se de conectar seu conteúdo com sua navegação Charles e pense em como seus usuários navegarão em seu site e o que você deseja que eles experimentem. Quando isso estiver completo, podemos começar a falar sobre design responsivo. Veremos no próximo vídeo 14. Design responsivo : design responsivo do X. Como nossos layouts de página da Web serão projetados porque há tantas telas na bola do seu telefone celular para a área de trabalho do seu computador. Que layouts de página tem que ser uma reestruturação e responde a mudança de tamanhos de tela. Tudo é colocado em um assunto muito limpo, organizado e proposital. O conteúdo será projetado para se estender para fora, mas não definido para um tamanho de tela específico. Por que creme de protótipos ajudar a estruturar este layout. Então, o que? Páginas projetadas por blocos de empilhamento o conteúdo de uma página da Web é dividido para baixo no corpo , onde temos o cabeçalho, rodapé principal e algumas outras loiras semânticas. Uma vez que temos que projetar contato, esticar para fora. Podemos usar os layouts do Greg. Alinhamos blocos CERN às páginas da Web. Grão. Aqui estão alguns exemplos deste artista Chris Bannister. Ele criou uma sala de fios responsiva, Jif. Eu não acho que este será um ótimo exemplo para mostrar a vocês a Web Responsive Constable. Então vamos dar uma olhada se você clicar na área de trabalho. Como você pode ver, as áreas de trabalho crescer aqui é bastante branco sobre o conteúdo que se estendeu para fora. A galeria de produtos tem quatro colunas e se olharmos abaixo. O rodapé também tem quatro Collins, e está alinhado como tal. Então é uma mentira para se tornar em uma grade, e isso faz com que seja para um site limpo, a navegação e o groeller comum ou outra parte do conteúdo que é meio dividido . Mas se dermos uma olhada no tablet, eles podem ver o produto. Gallery mostrou que levou três colunas, então essencialmente uma área de trabalho pode estringir seu verde para se tornar um tablet. Então, uma garota média de navegação, ainda meio que permanece a mesma. Mas a galeria de produtos e o flutuador sua grade tem trunfo para um estilo de três colunas, e isso não é tão ruim. Mas isso é porque manter uma mente removeria de dispositivo para dispositivo. Especialmente estamos indo de uma vista de desktop para um tablet. O conteúdo está diminuindo, então outra maneira de pensar sobre isso é que o conteúdo deve ser capaz de se espalhar para fora. Então, isso significa que quando trabalhamos com uma configuração móvel, o conteúdo deve apenas confiar na própria tela, tem que ser flexível. Então, na configuração do telefone dela, notamos que nossa galeria de conteúdo agora se reduziu a uma grade de uma coluna. E isso não é tão ruim, porque com o telefone, quando estamos rolando de cima para baixo, ele está em uma seção de uma coluna. Você notou a navegação? Está embebido em um menu de hambúrguer para que essa navegação agora possa ser acessada por um menu suspenso. Como você cria sua capacidade de resposta depende de você, mas existem alguns padrões de design para que possamos seguir. Mas isso é para outro vídeo no futuro. Eu só quero salientar este relato, informativo, web design responsivo. Blawg aqui, e eles têm ótimos exemplos onde eles tocam em sites da vida real. Então aqui está a comida. Desde que eu realmente gosto da forma como eles estilizaram, eles são design responsivo. Então, se você olhar de perto, esta é a exibição da área de trabalho. Eles têm seus ícones de mídia social no flutter e sua navegação à esquerda como um menu de barra lateral. Eles têm a imagem principal aqui no centro e uma grade de quatro colunas de outros artigos também . Mas quando você move para uma exibição de tablet, a navegação da barra lateral se move para cima para o topo. A imagem principal moveu o centro para a página, e as quatro colunas boas se estendeu para fora sobre esta informação aqui permaneceram as mesmas. Movendo-se para um layout de telefone ou celular, percebemos que a navegação foi empurrada para cima sem os ícones. O local centrou-se no meio. A Galeria Mitch ainda está no centro, mas tudo o resto se tornou uma grade de chamadas. Então este é um exemplo de Web design responsivo. É uma ótima maneira de pensar em como você deseja colocar seus quadros de arame e protótipos antes de um projeto de classe. Vou ficar com um tamanho de tela de 1024 pixels. Falaremos mais sobre isso quando chegarmos ao nosso fio. Liberte-me, mas vemo-nos no próximo vídeo. 15. Continue a mensagem 2: obrigado por tomar como projetar uma parte do site O que? Nós cobrimos muito sobre o processo de design, especialmente a fase de planejamento. Em seguida, continue na segunda parte para saber mais sobre o quadro de arame e os estágios de digitação do portal. Por que vai colocar tudo o que aprendemos em nossas estruturas de nosso aplicativo Web? Vejo você lá.