Design em primeiro uso no WebFlow | Riley Jones | Skillshare

Velocidade de reprodução


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Design em primeiro uso no WebFlow

teacher avatar Riley Jones, Coffee Fueled Creative

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

14 aulas (52 min)
    • 1. Apresentação

      0:54
    • 2. A abordagem móvel

      4:44
    • 3. Wireframes

      2:31
    • 4. Moodboards

      0:58
    • 5. Fluxo de Web explicado

      0:46
    • 6. Informações de ajuda para Webflow

      0:34
    • 7. Espaço de trabalho do fluxo Web

      1:21
    • 8. Fundação de página inicial

      7:28
    • 9. Estilos Pt. 1

      7:00
    • 10. Estilos Pt. 2

      7:50
    • 11. Estilos Pt. 3

      7:46
    • 12. Estilos Pt. 4

      6:53
    • 13. Estilos finais

      2:27
    • 14. Observações finais

      1:14
  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

628

Estudantes

--

Sobre este curso

O objetivo deste projeto é ter uma melhor compreensão de como adotar a abordagem móvel primeira quando se trata de projetar conteúdo no Webflow. Vamos considerar práticas de experiência de usuário quando se trata de estruturar conteúdo e decidir como exibir as informações certas em um ecrã móvel. Na plataforma Webflow podemos levar nossos desenhos e colocá-los em um protótipo de trabalho para onde possamos vê-los em um ambiente vivo.

Requisitos

  • Um amor para aprender coisas novas
  • Uma paixão por se envolver com conteúdo

Útil para saber, mas não necessário

  • HTML e CSS básicos

Conheça seu professor

Teacher Profile Image

Riley Jones

Coffee Fueled Creative

Professor

Hello!

I am a web and graphic designer with a passion for making design loud for people and brands of all kind. I live in the U.S, and I am always looking for ways to further my passion for fresh design with today's culture.

I enjoy meeting and hearing about other designer's stories as well as everyone's works in progress. I am always interested in others processes.

Visualizar o perfil completo

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%
Arquivo de avaliações

Em outubro de 2018, atualizamos nosso sistema de avaliações para melhorar a forma como coletamos feedback. Abaixo estão as avaliações escritas antes dessa atualização.

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui cursos curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. Apresentação: Todo mundo. Eu realmente sou Jones e eu sou um designer gráfico de armas. Trouxe-me para a minha classe móvel primeiro projeto Wen Flow Ah, projeto vai ser projetar uma primeira página para um site de restaurante. E, através disso, vou mostrar a vocês uma primeira abordagem móvel para o nosso processo interno de oferta de conteúdo e estrutura vai ser focado em uma plataforma móvel. E a partir daí também criaremos quadros de humor para ter uma sensação melhor e ver como queremos que nossos sites sejam. Uma vez que é embrulhado, bem, eles estão em todo o conteúdo em Web bloom e no fluxo da Web começará. Finalize nossa construção e design para uma página. Se você gosta de algumas idéias legais e integrar algumas coisas divertidas em seu processo, sinta-se livre para participar da aula e podemos começar a se divertir. 2. A abordagem móvel: Quero ir em frente e explicar como vamos implementar uma primeira abordagem móvel em nosso processo. E, na verdade, tudo está centrado em como vemos nosso conteúdo com uma primeira abordagem móvel. Você começa com o menor dispositivo possível. Neste caso, vai ser um smartphone. Portanto, já é um espaço limitado para onde o foco no conteúdo se torna mais importante como faras, onde você o coloca e como você o estrutura. Você pode pensar sobre isso como um dedo do pé de storyboard onde há certos pontos do site com os quais você deseja que seus usuários interajam. Há um começo, um meio e um fim. Cabe a você para tipo de ofício que turnê experiente. Você pode Deus o usuário para obter as informações importantes que você precisa do site. É aqui que as primeiras impressões se tornam realmente importantes porque, como é um espaço limitado , há muito que o usuário pode ver uma frente. Então, quando o usuário chega ao seu site esses primeiros segundos, eles são realmente importantes. Então é bom causar uma primeira impressão como faras. Como você estruturou seu conteúdo toe onde o usuário vê as informações mais importantes primeiro. Então, para o primeiro passo, vamos passar por este processo de descobrir o conteúdo. Então vamos listar categorias ou seções que queremos em nossa página inicial que podem ser uma seção para homens. Use uma seção para uma exibição dos locais, e as horas podem realmente ser qualquer coisa. Como sempre, relaciona-se com a missão da nossa página inicial do restaurante. Assim que obtivermos todas as categorias dos tipos de conteúdo, um em seu site começará a classificá-los por importância. Então você pode escolher tipo de o que é mais importante para o usuário ver primeiro e, em seguida, outros e tipo de escala aqueles, no entanto, ordem que você pode precisar. E então, a partir daí você pode começar a ter uma idéia de como estruturar tudo com esse dedo importante, onde as informações realmente importantes estão no topo para as informações da temporada do usuário. E então, uma vez que você pega esse interesse, você pode tipo de filtrar o resto das informações em todo o site, e a partir daí vamos começar a usar armações de arame para tipo de capturar o que parece e refinar nossa estrutura. Então, aqui estão alguns exemplos da frente você tem uma seção de informações deslizante da Internet. Então eu já sei que tipo de comida este restaurante tem. E então também sei tipo de quem eles são, como um aspecto pessoal, tipo da atmosfera que eles criam, e então você vai ao longo do site. Há informações mais importantes, como reservas e menus. Uma vez que ganhei interesse a partir deste ponto. Este outro lado é interessante porque coloca todo o tipo de informação técnica na frente ou mesmo horas sua localização. E então você pode navegar nos menus, se quiser. Apenas indo outra maneira de pensar como você pode estruturar seu conteúdo. Isso não é certo, um jeito errado. É só com você. O que você decide é importante para o seu restaurante, para o seu usuário, e este lado é interessante porque este é o site móvel. Então você tem a área de trabalho. Parte dois do conteúdo muda completamente em um layout diferente, diz algo interessante que pode acontecer com o primeiro design móvel. Você pode realmente jogar em torno de seu conteúdo e como você deseja estruturar as coisas. Este é o nosso último exemplo, onde eles tomaram a decisão de ter as informações da reserva na frente. Foi quando eles queriam que o usuário se agarrasse quando eles estavam chegando ao site. Assim, as informações de reserva estão fora do caminho, e, em seguida, mais informações sobre para a parte inferior da página, como faras horas, dias e mais informações de contato faria. Dito isto, vocês agora não listam as categorias e tipos de conteúdo que gostariam de incluir na sua página inicial? É realmente até você como faras O que você acha que pode ser uma experiência valiosa para o usuário uma vez que você criou essa lista, em seguida, ir e avaliá-los com base em um amor de importância. Então escreva-os pelo que você acha que o usuário pode ganhar mais valor desde o início do site até o fim, onde o mais importante estará no topo. Depois de criar sua lista e classificá-las, não se esqueça de publicá-las na página do projeto para que você possa ver como outras pessoas classificaram informações importantes dessa forma ou daquela maneira. E a partir daí podemos passar para os nossos arames 3. Wireframes: Há um exemplo de como eu pensei sobre o conteúdo do meu lado e a primeira parte do documento. Eu só fui alistado coisas. Eu pensei que o usuário poderia se beneficiar de visitar o site para que houvesse uma seção de localização, uma seção de chamada à ação, que seria reservar uma seção de mídia social spot, uma seção mostrada horas. Outra seção exibindo itens populares que estão dentro do menu, como o menu de comida no rodapé seria dividido em mais duas seções para onde seria uma espécie de um lembrete dos locais do restaurante e o menu do site foi que foi terminou, Eu disse, Nosso pensamento sobre a ordem de como eles podem se deparar na página inicial. Isto é o que eu acabei com dois onde as horas e locais seções da primeira coisa em uma coisa para os usuários para ver como faras quando os restaurantes abrem e onde eles podem ir para encontrar esse restaurante e, em seguida, abaixo. Esses seriam os itens populares da comida que o restaurante serve e de lá, se olharem para isso, haverá a chamada à ação com um botão para reservar um lugar para aquele restaurante. E depois continuando, haverá uma seção de história dando mais personalidade e introdução ao que está por trás do restaurante. E então, de lá que vai para a seção de mídia social para os usuários se conectarem com o restaurante e, em seguida, no rodapé será locais e, em seguida, outra pequena chamada à ação para reservar e, em seguida, o menu do site. Uma vez que eu pedi tudo, eu fui em frente e esboçou um monte de idéias que como a estrutura e o layout das coisas podem funcionar. Uma vez terminado, voltei e refinei minha armação de arame. Então o que isso parece agora, e eu preenchê-lo com conteúdo para dar mais de uma sensação de como o site pode realmente se parecer . E você começa a ver a história do site e os pontos de interações que os usuários podem fazer. Então, a partir daqui, quero que vocês peguem seus itens que foram ordenados por importância e criem um quadro de arame criativos ameaças que vocês querem. E uma vez que você tenha uma boa idéia em nosso lado status de uma idéia, refinado esse preenchimento de arame. Era apenas um conteúdo genérico. Pode ser conteúdo de enchimento ou você pode ir em frente, mas o conteúdo real que você entrou lá e, uma vez que estiver terminado, poste isso na página do seu projeto para que todos vejam como você quer visualizar sua estrutura. E a partir daí poderíamos começar a descobrir quadros de humor e entrar em um fluxo da Web e criar uma simulação do nosso design. 4. Moodboards: O próximo passo no nosso processo será criar os nossos quadros de humor. Neste exemplo, eu estou usando o Pinterest, mas você pode realmente usar qualquer coisa que você gostaria, desde que seja um lugar onde você reuniu todas as suas imagens e inspiração que com seus quadros de humor não precisa ser especificamente Baseado na Web. É realmente qualquer tipo de inspiração estética que você pode querer incluir em seu site . E assim, com este quadro de humor que eu tenho para a minha loja escolhi ir com uma pizzaria, e as coisas que eu coletei são coisas que envolvem diferentes tipos de tipografia, cores, layout, estética com texturas e ainda mais alguns elementos de design como ícones. Dito isso, sair reunir tantas imagens e recursos é que você gostaria. E uma vez que você se sente como se tivesse reunido suficiente colar uma captura de tela ou arquivado em uma pasta do projeto , e então podemos passar para a próxima etapa, e que é incluindo todo o nosso conteúdo e design, e para iria fluir 5. Fluxo de Web explicado: Se você não tem uma conta de fluxo de trabalho, tudo o que você precisa fazer é obter um ponto com de fluxo da Web e se inscrever para uma conta gratuita. E se você não sabe, arma era. Basicamente, é essa ferramenta que permite codificar e projetar ao mesmo tempo, e isso sou eu terminando simplesmente. Há muito mais a ele, mas basicamente ele fornece esses recursos que permitem que você trabalhe com o design e, em seguida , como você está projetando, , como você está projetando, é colocar o código limpo onde você queria. Depois de terminar, o projeto pode exportar esse código e hospedado no site. Então, se você não tem uma conta, reveja o Web flow dot com, crie um livre e, em seguida, nos próximos vídeos também vocês uma introdução aos recursos básicos que vamos usar para nossa home page. 6. Informações de ajuda para Webflow: Se vocês gostariam de uma explicação mais sobre as ferramentas de flutuação da Web, eu recomendo ir para ajudar esse fluxo da Web com cursos de barra como começar. E eles fornecem lições rápidas e fáceis que explicam um pouco mais detalhadamente as ferramentas e o fluxo da Web e o que eles fazem. E você pode facilmente começar a entender o propósito de cada ferramenta específica que irá ajudá-lo se você decidir visualizar alguns deles no meio de seus projetos. 7. Espaço de trabalho do fluxo Web: Então, depois de criarmos nossa conta, vá em frente para seu painel e podemos começar a criar nosso site no novo, mas novo site. Vamos dar um nome ao nosso site, disse isso ao público e, em seguida, teve que criar site. Este é o espaço de trabalho em que trabalharemos. Eu não vou explicar todos os recursos que ele oferece, porque há muito e você pode fazer um monte de coisas legais. Mas vou explicar que os básicos vão usar para um projeto. Então, na nossa barra superior aqui temos este botão de visualização de alternância que basicamente apenas as visualizações são lado como se fosse em um navegador da Web ao vivo. E, em seguida, na parte do meio da barra serão nossos pontos de quebra para diferentes tipos de dispositivos em uma barra esquerda. Aqui temos o botão de adicionar elementos, e vamos usar todos esses módulos para formar conteúdo e para nos permitir colocar conteúdo em nosso site. E você pode arrastar e soltá-los na página ou você pode simplesmente clicar e nós vamos adicioná-los . Dito isso, vamos agora ir em frente e começar a seção fora da nossa página web 8. Fundação de página inicial: Então agora vamos em frente e traduzir nosso quadro de arame em gripe web para que possamos começar a construir de uma base para um design acabado. Então eu vou começar com a minha seção de cabeçalho e isso será como para a maioria das seções, tanto quanto a rotina para onde vamos adicionar uma seção do painel de elementos. Então vamos adicionar um recipiente, e eu vou adicionar uma barra de valete, que eu rolar para baixo. Tem um cochilo bem aqui. E então estamos bem no meu navegador, o que basicamente mostra. Mas eu incluí na minha página. Vou clicar nesta seção. Diga o nome dele. Cabeçalho Isso deve ser bom para essa seção. E o que faz meu corpo selecionado para Onde estão a próxima seção incluir o recipiente? E no meu caso, eu tenho um cabeçalho. Bem, na verdade, antes de eu fazer isso, certifique-se que meus contêineres selecionaram uma de duas grades. Duas colunas. Se você quiser uma mistura e corresponder à sua grade, você pode usar essas configurações. Mas eu ia guardar estas duas colunas e acabar com a minha coluna. Por isso, vou certificar-me de que a minha coluna é seleccionada. Vou ter um cabeçalho abaixo do cabeçalho. Teria uma lista não ordenada. Então, se eu rolar para baixo aqui, eu pedi uma lista, e eu vou fazer a mesma coisa para coluna para quando um seleto título um. Copie algum motivo, comando, veja ou controle. Veja se você está em um PC, selecione na minha coluna e, em seguida, Colar. Como fez a mesma coisa para a lista de honra. Então, selecione-o. Uma cópia dormiu coluna para colar. E quando escolherem minha seção novamente e quando eu nomear esse local, horário de traço e agora para a próxima seção, Trump dará ao corpo o contêiner selecionado da próxima seção. Quando este eu vou ter e h dois e depois abaixo dos dois anos de idade, vamos ter um botão. Vai ser como a seção de ação. Então, Celeste, minha seção o sem nome realmente ver ta abreviação para chamada à seção de ação. Agora seguindo em frente, vou adicionar outra seção com um recipiente e, em seguida, neste recipiente vai ser semelhante ao meu primeiro 1 Então, quando eu tenho dirigindo a natureza um e, em seguida, abaixo que um dos três blocos de itens de basicamente eu sou tipo de três def blocos, que só vai conter tipos separados de conteúdo. Você precisa de três deles mesmos. Certifique-se de que a cópia selecionada, em seguida, cole duas vezes duas ou há três deles e então eu vou nomear esta seção. Itens de traço em destaque. Certo, passar para a próxima seção será sobre mim. Então, na seção do contêiner dentro desse contêiner e o que tem rumo e, em seguida, um bloco de parágrafos. E por baixo disso eu vou adicionar selecionando minha seção quando, em uma aula para ele chamou sobre nós. Se as últimas seções em uma seção um contêiner e adicionar três blocos de definição, você vai ser meus links sociais. Alguns copiando um ritmo para mergulhar blocos selecionar na minha seção de nome-lo seção tão certo e na seção final na seção no recipiente E dentro desse recipiente, eu só vou ter lista e mantê-lo um Nord errado. E depois, por baixo dessa lista, eu ia ter um bloco de texto para fazer camisas no contentor, não na lista. Então o livro didático e eu realmente quero bloco de texto abaixo dos meus itens sociais quando eu usá-lo como uma área de hash tag. Então, arraste-nos de volta para a minha seção social para aparecer bem ali e depois para esta seção final. Vou chamar-lhe o meu rodapé. Ok, então isso deve ser como faras ter a base para onde um dos meus conteúdos e, em seguida, estilizá-lo ao mesmo tempo. Assim que terminarem a criação de uma base para a sua home page, publique o link de fluxo da Web no seu projeto de classe para que as pessoas possam ver o seu trabalho em andamento e definir a necessidade usada para voltar ao seu painel no botão de configurações do seu site. E neste subdomínio que fluiria ponto io você é l irá diretamente para o site em que você está trabalhando, e agora no próximo vídeo, vamos começar a adicionar nosso conteúdo e estilo para o nosso design. 9. Estilos Pt. 1: Então, agora que criamos uma base para o nosso site, podemos começar a adicionar estilos a ele e puxar esses estilos de alguns elementos que eu gostei do meu quadro de humor como faras tipografia, escolhas e cor. E então eu adicionei algum conteúdo diferente ao que eu coloquei para fora o dedo do vídeo anterior onde eu adicionei um título nesta área de menu. E então, em vez da localização e das horas em uma grade, eu apenas adicionei blocos de def e, em seguida, mantive o título na lista. E então também na seção de mídia social, vez de ter blocos mortos, eu usei blocos de link e isso foi gerencia para um layout mais fácil de como as coisas se movem em torno de Alguém para começar no cabeçalho. Certifique-se de que está sentado aí, OK, e eu vou dar-lhe uma cor de fundo uma indo aqui. Quero uma cor dourada. Lá vai você. E eu quero salvá-lo. Alguém aperte o dedo do pé, adicione o SWAT para que eu possa usá-lo para mais tarde. E eu quero me livrar dessa grande caixa, que vai ser do bar dela. Não clique na minha barra de soneca. Eu quero dar uma aula chamada isso. Quero dizer, sim, bar. E basicamente, você não pode personalizar seus elementos. A menos que tenha um nome de classe. Não tem um nome de classe. Você não poderá acessar esses estilos. Painel Alguém vai para fundo quando eu vou para transparente. Isso tiraria isso. Ok, agora eu vou para o título. Dê a ele um nome de classe do título do logotipo. Vou adicionar pizza de três pontos. Eu vou para o módulo de tipografia quando uma cor de branco e eu estou com a fonte para ser eu era mundo. E depois vou mudar isto para maiúsculas. É tudo boné e nos dê rastreamento e eu quero que o peso seja normal. Perfeito. Então agora eu vou adicionar minha imagem de logotipo alguém para clicar na caixa de marca que configurar quando eu ir para adicionar elementos, eu vou adicionar uma substituição de imagem. Imagine que um gerente de ativos e eu carregamos as imagens e ícones e texturas que eu sei que eu queria no meu design e basicamente para fazer esse uso ir para o seu painel de ativos aqui e fazer upload e você pode carregar todos os seus arquivos e vai mantê-lo nesta biblioteca. Alguém adicione isso e não vai bagunçar nenhuma configuração. Isso é perfeito. Então eu vou para o meu menu e eu vou estilizar esses links. Então eu faço essa dor tem item. Estes iam ser também segurar todas as maiúsculas e então eu vou dar-lhe alguma noite de mentira ou não noite de mentira , mas rastreamento quando você mudar a cor e aumentar o tamanho da fonte realmente quer que isso seja legendas de vôo de encontrar sites de 16 pixels. Então agora eu vou fazer os mesmos estilos básicos do Liam vai para aqui em uma aula, e então o item principal aparece uma cópia sobre seus estilos e eu vou fazê-lo para este também. Perfeito. Então agora eu meio que quero reorganizar o layout aqui em cima, então eu quero voltar para o meu contêiner. E, na verdade, já que o Valete Bar tem seu próprio contêiner, eu ia a este porque eu realmente quero controlar o que está dentro de algo semelhante para continuar, eu faria dizer de contêiner de bar, e Vou conseguir um layout. Vou usar a configuração de exibição da caixa flexível. Você pode usar carros alegóricos se você estiver familiarizado com aqueles que tipo de empurra as coisas para a esquerda e para a direita . Eu realmente gosto do layout da caixa de bandeiras. Isso faz com que seja realmente fácil fazer alguns layouts interessantes. Então este vai ser um básico, tão próprio quer tudo justificado, centrado, e eu não quero que eles empilhados um em cima do outro, alguém que mude a direção da caixa flexível para chamá-lo. E então eu vou para um centro de linha, que coloca tudo lá e, em seguida, apenas uma pequena mudança. Quero colocar minha marca ou meu logotipo em cima disso. Lá vamos nós. Vou entrar agora no meu link de marca. Eu ia chamar isso de te amar, e então vou dar uma margem máxima, 20 pixels. E assim esses botões externos controlarão suas margens. E como eu estou controlando é que eu estou apenas segurando meu mouse, e então eu estou meio que movendo para cima e para baixo. Você pode controlá-lo com isso. Você também pode apenas clicar e digitar a quantidade exata se você quiser Proporcional, mesmo lados em direção a você quer 20 no topo? Tony em baixo, você segura a tecla de opção Ault e arrasta isso e nós faremos os dois. E então esses botões internos serão para dar tapinhas, que é o espaço dentro dessas caixas. Então isso foi bom por enquanto. Agora vamos passar para a seção de horas e locais. 10. Estilos Pt. 2: Agora eu sei que na frente sobre uma imagem de fundo neste alguém vai para esta seção, que é bem aqui. Numere o plano de fundo e adicione uma imagem de fundo. Então, e os meus bens? Quero este aqui. Isso parece bom. Vou usar esta imagem como uma alta. DP Eyes ia ser uma resolução mais alta. Quero mudar isso um pouco. Isto parece bom. E agora o meu tipo og taxa ra vai ser um pouco leve demais para isso. Alguém o escurece quando eu não o tinha sobreposto. Meio que mede a transparência, minha sobreposição. Então isso é bom por enquanto. Agora eu quero que ele faça alguns estilos para o meu corpo em geral. Então, se você selecionar um seletor, você pode ver todas essas páginas. Então estes são estilos muito globais que afetarão certas coisas. Agora, eu só quero mudar meu fundo corporal dois para Sarah fora. Quero que sejam 16 pixels e brancos. Isso deve ser bom por enquanto. Agora eu quero ir para o meu título, que está em minha localização em nossa seção. Quero fazer um estilo para todos os meus títulos H1. Então, clique nisso novamente para selecionar uma classe. E então há uma tag já configurada para todos os cabeçalhos de um. Alguém que mude isto para Oswald Normal todas as maiúsculas, um pixel para o rastreio. E quero que este seja o ouro que temos usado. Agora, eu vou para o meu, a fim de listar o meu ir para as configurações e apenas acertar nenhuma bala. Aquelas balas não estão debaixo da mesma coisa para esta. Então, mas, uh, minha outra lista de bloqueio de conteúdo ordenado. Sem balas? - Não. Quando eu adicionar algumas informações, alguém vai para o meu item da lista Norden, e eu vou apenas adicionar uma cópia de livro didático fez. E então vamos para este outro item da lista e colar o mesmo. E com este item da lista de topo, quero que seja ousado. Então eu apenas destaquei. E isso faz com que um audacioso não consiga este último. E uma vez que este ar semelhante em uma cópia deste item de lista para o próximo bloqueio de diff eu tenho aqui em baixo colar. Lá vai você. Eu quero dar isto. Isso deve ser bom. Na verdade, significava mais dois de novo e depois as minhas mudanças de rumo às nossas horas. Oops. E fazer isso Você pode desfazer as coisas pelo comando Z ou até mesmo apertar os botões desfazer ou refazer. , Isto deve estar bem,por enquanto. Na verdade, não preciso deste texto de botão aqui, então quero voltar ao meu contêiner de horas e localização. E, tipo, nós aparecemos quando ele usa o nome da turma, horas, deslocação, contentor, eles iam usar dinheiro flexível novamente para posicionar isto. Alguém vai apenas justificar o centro e, em seguida, realmente quer justificar espaço ao redor, dar esse espaço e uma última coisa em um bom bloco em minhas seções e apenas dar-lhe alguns pads ings. E quando um hit a tecla de opção antiga ou a tecla de controle no PC puxou isso para baixo, basta dar-nos mais espaço. Na verdade, em muito espaço, cerca de 50 pixels deve ser bom. Ok, isso deve ser bom por enquanto. Não, há uma seção chamada à ação alguém clica na minha seção, seção o nome, e então agora eu quero dar uma cor de fundo e meio que queria cinza escuro, algo como eu não vejo. Isso deve ser bom. Um pouco mais leve, Erica, eu vou guardar este claro cinza escuro mudar isso para então chamar as pessoas a atenção do usuário e como este é um título diferente do que estes, eu vou dar uma aula específica sou eu C T oito título e tudo é diferente é apenas a cor vai ser branco e como estilizar o botão. Eu vou entrar no link Nomeie este c t A beleza em For Botão. Quero que o fundo seja este ouro. Você sabe o que? Remova isso. Vá ao telefone para ser Oswald Oh, tampas quando o rastreamento e então eu realmente quero que isso seja cinza escuro e então o fundo será o ouro perfeito. E quando ir para a borda bem rápido, basta dar-lhe um pouco mais cantos arredondados para cinco pixels deve ser ok e eu vou voltar para o meu c t uma seção Eu tenho uma tipografia e apenas dar-lhe uma linha central em direção empurra tudo no meio e, em seguida, dar-lhe um pouco mais de preenchimento como eu fiz a seção anterior 20 pixels deve ser bom. Parece que há alguma margem para este alguém entrar aqui. Isso é herdar alguma margem superior, uma vez que é um título e todas as tags de cabeçalho têm margem . Algo para entrar aqui. Aquele 20. Lá vamos nós. Ok, isso é bom por enquanto. 11. Estilos Pt. 3: Agora, vou voltar para o mar. Itens em destaque quando eu entrar aqui, itens em destaque e, em seguida, eu tenho os meus blocos de definição com a minha saída da classe para este e vai ser título do item. Eu quero mudar o fundo, outro fundo, mas essa cor da fonte para o grau. E eu também quero escolher, na verdade, só para simplificar as coisas, eu ia ter todas as duas rubricas. Agora, mude isso também, o cinza escuro. E depois aparece nos outros. Então nós não estamos repetindo todos nós mesmos e com um fundo para ser oz varinha normal e, em seguida, um pouco de rastreamento Perfeito. Então isso em alguma informação aqui, você sabe, quando eu adicionar alguns estilos de parágrafo e este estilo de parágrafo novamente tipo de um estilo de parágrafo global , ele vai adicionar essas cores PT Serif é ótimo. 16 pixels está OK por enquanto. Eu ia adicionar mais informações. Está bem, Perfeito. E na seção sobre uma textura no fundo, alguém vá para a minha seção aqui em destaque itens que funcionam e sem um fundo , quando você adiciona uma imagem de fundo, eu não quero adicionar esta textura Apenas muito sutil. Sim, isso funciona. E eu vou querer e sobrepor apenas um branco. Não está muito escuro. Isso deve ser bom em nós. Agora eu vou fazer a mesma coisa quando se trata de posicionar fora do alguém indo para o recipiente e adicionar itens em destaque, recipiente, goto layout, caixa flexível e, em seguida, as coisas vão começar a se mover. Eu quero ser centrado ou espaço seu próprio. E uma vez que está indo, está dentro do recipiente que estava usando ele vai ser um afetado pelo estilo. E eu realmente não quero que alguém tire isso do contêiner por enquanto só para que eu possa me concentrar neste contêiner do Adam em destaque aqui. Agora, tudo deve estar funcionando. Eu vou fazer um centro de linha realmente queria um top linha para os títulos estão todos no topo. E então eu vou entrar individualmente nos blocos div para mudar alguns dos estilos. Então, quando eu chamo este item em destaque e desde que temos a caixa flexível configurada em nosso recipiente thes configurações filho que são os elementos dentro do recipiente, nós definimos caixa flexível sobre estes mostrar até um tipo de reconhecimento de ajustar como ele funciona e alguém aplicar este estilo de item em destaque para esses outros do funcionarão da mesma maneira. Ok, alguns usando o não encolhem e na verdade parece que a expansão funciona muito melhor. Então vamos mantê-lo assim. E agora quatro, o meu contentor ou a minha secção. Eu só vou para a minha topografia e fazer uma linha central. E, na verdade, gosto de ti assim, mas vou entrar na minha chamada “H”. Este destaque não foi apresentado. Sim, título do item em destaque e apenas o Teoh centrado nisso. Isso funciona perfeitamente. Eu vou voltar para esta seção e apenas nos dar um mais preenchimento é que há um pouco mais espaço para respirar dentro da caixa que temos indo em 30 picaretas foi bom para agora. Ótima. E para a história e fotos. Tudo o que eu quero aqui é uma imagem de fundo da minha seção selecionada minimizando que indo para meu fundo, adicionando a imagem um Heidi p. Eu vou querê-lo em um bom lugar e você pode até mesmo controlá-lo ainda mais com o ajuste botões. E novamente, eu estou apenas segurando meu mouse para baixo e arrastando para baixo. Você deve ser bom e então eu também vou querer um escuro, excessivamente de novo. Só um pouquinho. 30. Deve ser bom. Ok, eu vou mudar isso para a nossa história e então apenas adicionar um pouco mais de conteúdo aqui, e então isso vai ser diferente das outras tags de parágrafo que criamos. Então eu vou para a nossa tipografia de conteúdo da história. Mude isso, dedo branco. E eu vou mudar algumas coisas aqui. E então eu vou dar isso um pouco mais de preenchimento na seção de acertar a história para esta seção, indo para fora segurando minha culpa. Tecla de opção. Está dando um pouco mais de espaço. Três pixels devem estar bem. 12. Estilos Pt. 4: e mídias sociais em um pequeno título aqui. Clique duas vezes. Conecte isso. E então, como eu fiz com o logotipo eu vou adicionar Eu quero entrar neste bloco de links e adicionar uma imagem. A maioria das garotas fez aqui. Imagem que eu quero escolher. Clique no bloco Link. E quando adicionado imagem e eu não preciso de outro, eu só preciso de mais um item neste contêiner, e vai ser apenas outro bloco de texto. Isto vai ser conteúdo de hash tag. A tipografia vai ser Oswald para a cor do túmulo da estrela da frente ou tampas, um pixel. Quero que isto seja 28 pixels. Deve ficar tudo bem. Na verdade, 20 forças cagam seção, tipografia. Eu só vou fazer uma linha central que eu vou entrar nesses blocos de ligação. Ligue para este link social. Eu não era uma margem bonita. Então margem direita realmente teria alguma margem esquerda em vez disso. São todos eles. Acho que é melhor alguém ter alguma margem certa. 20 picaretas de parecem estar bem. E a margem inferior normal da marca S e Barda era de 20 fotos. Sim, 20 pixels deve ser bom. E então, assim como com o futuro dos tempos, eu vou adicionar essa mesma textura à seção de mídia social, algumas na seção, e eu vou para a imagem de fundo e há textura no que, Adam excessivamente. É aquele branco sobre laburnum. Vou reduzir a transparência que deve ser boa. E, finalmente, a seção de montagem. Vou entrar na minha própria lista de pedidos, mas vou usar um link de texto. Eu não vou me preocupar com isso agora e que eu meio que quero todos os meus outros itens também. Como este alguém. Eu apago os vazios e, em seguida, copiar e colar isso quando eu acabei de fazer. E então eu quero mudar o tipo de biografias. Isto vai ser rodapé. Quero dizer, você item, exceto para ir para o urso não vai para o link. Então vamos tirar esta classe para remover uma classe que eu preciso fazer é voltar para o seu botão estilos , clique neste e, em seguida, passar o mouse sobre ele e você não pode remover. Então eu vou entrar no link em Name it Footer. Quero dizer, você tem tipografia de mulheres faz um cinza escuro. Na verdade, eu quero branco. Eu não quero isso. Meu pé ou seção do dedo do pé tem o fundo cinza escuro. Mas eu não quero essas balas. Então, vou entrar na minha lista de um Nord. Vou para as configurações e nada de balas. Agora, eu vou voltar a estilizar meu pé de link ou item de menu. Mude a frente. O Oswald. Mantenha-o no normal. Oh, bonés. Eu não quero que isso sublinha em algum lugar. Defina isso para nenhum. Agora eu vou aplicar o mesmo seletor para o resto dos itens. Então eu não gostaria de colocar para fora estes em um layouts diferentes quando um bom no recipiente e neste recipiente rodapé e eu vou dar a caixa flexível Leo tipo do que temos feito e realmente foi Isso não vai funcionar. Podemos deixar isso aí. Mas o que? Preciso de estar na lista. Menu de rodapé. Agora podemos usar a caixa flexível. Está bem. Basicamente, meu pé ou menu precisava de um com, Então eu só adicionei 100%. Por favor, deite assim. Agora eu preciso voltar aqui. Certifique-se de que estes não estão sublinhados. Perfeito. Ok, eu só vi que eu precisava de surdo deste tamanho não estava estragando o layout. Então agora eu vou para o meu rodapé 13. Estilos finais: e dar-lhe este estofamento. 20 fotos devem ser boas. Preciso fazer um pouco mais. 30 pixels é bom. Eu não gosto de como as redes sociais nos dão um pouco de preenchimento para 15 e vai haver este margens de título de mídia social. Eu ia tirar isso. Está bem, Legal. Apresse-se. E depois uma última coisa que vou adicionar no contentor do rodapé. O que? Eu tinha um bloco ou um livro didático, na verdade, eu quero isso. Só não quero isso no contentor, e depois quero pôr o bloco rígido. Vai ser apenas um livro didático. Vai ser apenas um direito autoral. tipografia vai ser centralizada. Adam vai mudar isso, Oswald. E quero que isto seja leve. Isso lhe daria uma margem máxima. Justin pixels perfeito. Então você pode ver o quão rápido é criar home page, apenas as ferramentas que o fluxo da Web nos dá. Então vá em frente e comece a projetar sua home page com base em sua inspiração e estrutura de arame. E depois de terminar de inserir todos os estilos, certifique-se de publicar seu site. Você vai aparecer em sua cópia, o link que você teve no quadro de discussão e nós podemos ver tipo de como seus sites são 14. Observações finais: Então eu espero que vocês tenham gostado de aprender sobre o primeiro processo de design móvel e como nós abordamos isso em nossos projetos e também espero que vocês tenham gostado de se apresentar e aprender o golpe da Web com um amigo. Você pode ver como é legal quando se trata de criar páginas da Web rápidas e obter um empréstimo sites e também criar um design que está ao vivo no navegador que é adaptável ao código. Então, se você estiver interessado em levar seus projetos um passo adiante, eu recomendo vivamente ir ao site de fluxo da Web e entrar em seu painel. Então, nesta barra de ferramentas aqui em baixo, há tutoriais e cursos, e eles oferecem um monte de material incrível, tanto quanto o que você pode fazer com o fluxo sanguíneo. Quando se trata de interações como estados de focalização, transições e outros efeitos interessantes, você pode fazer isso novamente. Espero que tenham se divertido fazendo isso, e espero ver vocês de novo nas aulas futuras. Obrigado.