Web design: como criar um guia de estilo de web design | Jake Fleming | Skillshare

Velocidade de reprodução


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

Web design: como criar um guia de estilo de web design

teacher avatar Jake Fleming, Designer & illustrator

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

8 aulas (36 min)
    • 1. Introdução

      0:29
    • 2. Seu projeto: crie um guia de estilo de estilo de design na web

      5:00
    • 3. Tipo e tons

      7:56
    • 4. Layout e espaço

      4:06
    • 5. Cor

      3:25
    • 6. Ícones e imagens

      2:43
    • 7. Formulários e botões e

      7:10
    • 8. Página de amostra

      5:27
  • --
  • 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.

5.116

Estudantes

31

Projetos

Sobre este curso

Junte-se a eu neste curso de design de web essencial no design de em criar um guia de estilo. Você vai aprender os blocos de construção para um site bonito e utilizável, e como desenvolver um guia de estilo para seu site que toca todos os elementos necessários: o espaço, espaço, cores, cores, imagens, de formas, e e mais a parte. Este curso vai dar uma a sua parte de que você precisa para criar sucintamente para o seu negócio na Web e você vai terminar o curso com um guia de estilo completo e a página de exemplo para seu site.

Siga meu trabalho no
Instagram |

Conheça seu professor

Teacher Profile Image

Jake Fleming

Designer & illustrator

Professor

Jake Fleming has been a designer and illustrator for most of his life. He currently designs for the web at Appiphony. His passion for design and video games helped fuel the creation of Piasa Games, an indie game studio he co-founded with Corey Warning and Mike Blazek.

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. Introdução: Olá, sou Jake Fleming. Eu sou um designer e desenvolvedor front-end por dia no co-fundador e designer ATP. Eu vi Jogos de noite nesta classe está criando um guia de estilo Web design. Eu vou estar falando primeiro sobre o porquê eo vento para usar um guia de estilo sobre o que exatamente deve ser incluído. Em seguida, vamos mergulhar no processo de realmente criar o guia. Vamos começar. 2. Seu projeto: crie um guia de estilo de estilo de design na web: Então, o que é um guia de estilo, afinal? E por que na janela eu preciso de um. Um guia de estilo é uma coleção de elementos pré design, gráficos e regras a seguir para ajudar a garantir que cada página do site seja consistente com os sites. Os usuários pensam em um guia de estilo é uma caixa de ferramentas, e você mesmo é o faz-tudo. Quando um faz-tudo precisa construir algo, ele sempre vai para a caixa de ferramentas e escolher as ferramentas certas para o trabalho. Ele não vai comprar ferramentas novas sempre que precisar construir uma cadeira. E se aquele faz-tudo tem outras pessoas ajudando e construindo cadeiras, ele vai querer que todas pareçam iguais. Então ele não terá apenas um conjunto de ferramentas para eles usarem, mas um conjunto de regras também. Quando você estiver indo para criar uma página da Web, você vai ter este guia. Você pode fazer referência e escolher a ferramenta certa para o trabalho, exceto que em vez de martelos, pregos e fita métrica, você terá tipografia, componentes e espaçamento. Ter um guia de estilo é importante, especialmente quando você está em uma equipe com vários designers e desenvolvedores, todos trabalhando em um site massivo ou em um aplicativo com muitos estados diferentes. O guia ajudará a garantir que as pessoas não estão apenas inventando coisas à medida que vão. Haverá momentos em que os componentes que você tem em seu guia de estilo não farão o trabalho, e você terá que adicionar outra coisa. Mas não se preocupe. Isso é perfeitamente bom, desde que a adição seja realmente necessária. Se você é capaz de escrever HTML e CSS ou ainda melhor, SAS ou tem um membro da equipe que pode, seria uma ótima idéia. Dakota belie versão do guia de estilo onde os desenvolvedores podem ir em pegar código real enquanto desenvolvem seus projetos. Se você está tentando criar um guia para componentes que já existem, mas que não estão organizados forma específica, este curso pode ajudá-lo a fazer isso. Mas eu acho que você também vai achar este curso útil se você está começando do zero em um novo projeto. Então, agora que você meio que entender o conceito por trás de porque você realmente gostaria de usar um guia de estilo, vamos falar sobre os diferentes componentes do guia de estilo deve conter antes que ele começa . A primeira coisa que você vai querer considerar é a marca. As chances são, se você estiver fazendo este curso, você tem um site em mente que você deseja criar um guia de estilo para o que o site representará? Qual é a visão, a missão, os valores desse site? Essas coisas devem ser mantidas em mente durante todo o processo. Em seguida, com a marca em mente vai querer definir a tipografia. tipografia é uma das, se não a parte mais importante de um site e pode ser difícil de acertar. Não vou entrar nas várias teorias por trás. tipografia neste curso será focada apenas na definição de uma cor de tamanho base e aguardar links de cópia corporal, botões , manchetes etc. tom de voz também é importante. Em vez de usar texto de preenchimento como Laura MIPs, , é melhor escrever conteúdo com o tom que se alinha com o texto de erro de marca em uma entrada. Por exemplo, em vez de usar Laure MIPS um ou simplesmente digitar, isso é um erro. Tente algo como Desculpe, este campo é obrigatório. Criar uma regra geral para espaçamento é uma boa idéia. Isto irá ajudá-lo a encontrar o seu espaço de grade entre os tamanhos de elementos para botões, etc. A cor é muito importante para identificar seu guia de estilo. Você não quer 50 tons diferentes de azul aparecendo em seu enorme site porque os desenvolvedores simplesmente não tinham o código hexadecimal à mão. Definindo cores primárias para itens como botões, links e barras de soneca, bem como cores secundárias para alertas, erros e rótulos. Você pode evitar essa dor de cabeça. Os ícones podem ser uma grande ajuda e comunicar informações aos usuários do site. Algum texto aéreo em uma caixa pode não estar claro para o usuário que algo está errado, mas colocando ícone de alerta ao lado dele e pode ser mais claro. É importante que os ícones que você escolher para o seu site se encaixem na marca. Se você está tentando criar uma relação de confiança e estabilidade com seu site, provavelmente você quer usar ícones simples e limpos. Se você está tentando criar um ambiente moderno, divertido e vibrante, talvez você vá com algo mais ousado e colorido. As imagens podem ser usadas de várias maneiras em uma imagem de herói, acompanhadas por uma chamada à ação acima de um bloco de texto para ajudar a promover o contexto dos leitores ou simplesmente por si só, a imagem pode ser uma foto de estoque, um instantâneo de para a página sobre ou ilustrações ajudando a descrever o produto. Em qualquer caso, imagens devem caber na marca e ser usadas como uma ferramenta para envolver os usuários. É bom ter exemplos dessas situações em seu estilo. formulários de guia permitem que os usuários interajam com seu site, seja preenchendo um formulário de contato ou digitando, e os formulários de informações de cartão de crédito são cruciais. Você quer ter certeza de que todos os diferentes estados são claros para o usuário. Qual é a aparência quando o usuário clica em uma entrada ou insere um endereço de e-mail inválido? Qual é o tom de voz que está sendo usado ao dar feedback a esse usuário? Botões podem ser criados fazendo uso de nossas opções de cor, espaçamento, espaçamento, tipografia e tom. Também precisaremos prestar contas para diferentes estados, assim como fazemos para os formulários. Você pode usar os mesmos princípios usados para criar formulários e botões para criar todos os outros componentes, como alertas e barras de soneca. Então, agora que sabemos o que entra em um guia de estilo, vamos começar a criar um 3. Tipo e tons: neste vídeo vai estar trabalhando em um guia de estilo para um pequeno projeto paralelo que eu tenho trabalhado chamado Quote Boy. A ideia por trás do site era ajudar os freelancers a chegar com mais precisão a uma taxa por hora ou por projeto para cobrar clientes. Aqui está o logotipo do garoto da citação. Você pode ver que ele tem uma vibração divertida para ele. A marca geral é legal, carismática e voltada para designers freelance. Quero citação abordada, sentir-se como um velho amigo a quem se recorre para um conselho realmente sólido. Neste vídeo, falaremos de tipografia e tom. Começamos com a tipografia porque se você estiver fazendo um site ou uma soneca, é provável que você precise que os usuários leiam algum texto. Vamos começar escolhendo uma diversão. Eu quero algo tão simples, resistente, legível, tem muitos pesos e pares bem com o logotipo menino citação. Ao escolher uma diversão, eu costumo ir para a coleção de fontes do Google e ver o que eu posso encontrar que pode atender às minhas necessidades. Google tem uma tonelada de fontes livres para usar. Você pode vê-los em ação. Escolha os diferentes pesos de um fundo específico que você gostaria de usar, baixe-os ou Se você está apenas olhando para usá-los em um site, obtenha um trecho de código para responder na etiqueta de cabeça do seu HT masculino. Tenho uma certa luta em mente, Roboto. É simples, muito legível e tem muitos pesos. Vamos usar a visualização ao vivo para testar tamanhos diferentes para encontrar um tamanho. Achamos que ficaremos bem para a nossa cópia corporal. 16. Parece muito bom. Isso é bastante padrão para sites da Web, então vamos ter isso em mente para mais tarde. Vamos baixar a frente dela agora e instalá-la. Para aqueles de vocês que não sabem como fazer isso, basta ir para a pasta que você acabou de baixar. Abra-o, selecione todos os arquivos de fonte e, em seguida, clique com o botão direito do mouse e abri-los com o livro de fontes. Então você apenas rápido o botão de instalação, e se você já tem instalado, você vai ter este ar estranho. Hum, mas eu vou instalá-los novamente, e lá vai você. Ele está instalado, e agora podemos usá-lo dentro do ilustrador ou qualquer programa que você está usando. Certo, vou tirar isso do caminho. Tudo bem. Agora vamos voltar ao Illustrator e vamos criar um novo documento. Vamos também dar nome a ele, e eu vou definir meu quadro de arte em 10. 24 pixels por 7 68 pixels. Além disso, vou configurar nossa grade de documentos, então vou até Preferências, Guias e Grade do Illustrator . Quando olhamos as fontes do Google e testamos tamanhos diferentes para nossa fonte, chegamos ao número 16. Eu vou cortar esse número pela metade e definir nossa grade para ter uma linha a cada oito pixels e nós podemos visualizá-lo e lá está o nosso controle. Agora que temos uma ótima configuração, podemos começar a tentar alinhar algum corpo de texto e manchetes. E a razão pela qual montamos uma grade foi porque enquanto criamos nosso guia de estilo, queremos tentar manter um ritmo vertical agradável. Isso significa que vamos apontar para que cada objeto ou pedaço de texto caia em uma dessas diretrizes ou muito bem no meio. Ok, então vamos em frente e desenhar uma caixa de texto. E enquanto estamos passando por esses passos, eu realmente não vou estar explicando como usar o ilustrador. Estou assumindo que você já sabe como usá-lo ou você tem algum outro programa que você está usando. Só vou escrever um texto aqui. E vamos ter certeza que nossa fonte é roboto, uh, no tamanho 16 e vamos mantê-lo na taxa normal. Vai mover isto para a nossa rede. Pode ser tentador usar um monte de Lauren Gypsum em seu guia de estilo, mas é uma idéia melhor tentar escrever uma cópia em um tom de voz que se encaixa na marca e realmente informa a pessoa que visualiza o guia de estilo. Então vamos mudar isso de um texto para algo mais significativo, algo que descreve a tipografia para espaços. Entre estão parágrafos. Eu vou escolher um número que é 1,5 vezes o nosso tamanho de cópia corporal, que será 24 e que irá garantir que nossos parágrafos tenham um bom espaço entre eles, mas também que nossas linhas de texto ainda estarão caindo na grade porque 24 é um múltiplo de oito. Tudo bem, então vamos também adicionar um cabeçalho acima disso apenas para dar uma sensação de artigo ah de um blogueiro ou algo assim. E eu vou escolher 32 pixels para o tamanho do nosso tipo de manchete. Basta alinhá-lo para a grade. Vamos também torná-lo ousado. Isso está parecendo muito bom, tudo bem, agora que estamos nisso, vamos em frente e fazer nossos tamanhos de manchetes. Então eu vou apenas duplicar isso e arrastá-lo para o lado da tela. Mude isso um pouco. Chame esta manchete um. Legal. Então vamos fazer uma segunda manchete. Vai duplicar isto e arrastá-lo para baixo. Vou subtrair oito pixels e receber 24 será nosso segundo texto principal. Você pode escolher espaçar essas coisas como quiser, mas lembre-se, é uma boa idéia fazê-las cair na grade para manter um ritmo vertical agradável. Então vá em frente e repita este passo até talvez seis manchetes, se quiser. Você não tem que ter todos os seis, mas sites tendem a ter H um h dois h três h para H cinco h doente. Então eu geralmente gosto de incluir todos esses no meu guia de estilo. Agora, nem todos os números que você escolher tem que ser um múltiplo de oito. Certifique-se de que o espaço que ocupa é um múltiplo de oito. Digamos, por exemplo, esta manchete tem 20 pixels, mas o espaço que ocupa é 16. Eles podem repassar isso com uma letra como um G que desce. Pode cair abaixo da linha da sua grelha. Mas isso é bom. Desde que a linha de base do seu tipo esteja caindo na linha. Você é bom, ou pode escolher movê-lo para baixo entre essas três células da grade. Não é uma ciência exata. Desde que estejas a tentar manter-te fiel à grelha. Ele vai ficar bem. Vamos criar um cabeçalho de seção agora para identificar. Esta é a seção de tipografia do Guia de estilo. Já que vamos identificar um monte de componentes diferentes em uma única página. Então eu vou fazer o título da seção. Não sei a manchete do tamanho três. É meio que colocá-lo aqui em cima. Eu só vou mover isto para baixo, está bem? E quando você terminar com esta seção, você pode ter algo parecido com isso. Quero também mencionar que quando estamos criando nosso guia de estilo, queremos ter certeza de que é super organizado. Se alguém abrir este documento, você quer que ele seja capaz de encontrar rapidamente o que está procurando. Então eu vou apenas agrupar algumas dessas camadas e nomeá-las de acordo. Ok, no próximo vídeo, vamos falar sobre layout e espaçamento. 4. Layout e espaço: neste vídeo irá rapidamente passar sobre como decidir sobre o espaço entre objetos, bem como dimensão geral dos objetos. Vou fazer o nosso quadro de arte um pouco maior. Vamos também duplicar este título de seção. Geralmente é uma boa idéia incluir uma pequena descrição sobre a seção. Isso ajuda a informar outros espectadores do guia de estilo sobre o que é a seção, por que você tomou as decisões que tomou e ajuda-os a manter sua visão. Então, digamos que um dia você não é o designer para este aplicativo ou site, alguém assume o controle. Eles serão capazes de entrar em seu guia de estilo e fazer uso dele. Então eu vou apenas duplicar um pouco deste texto corporal que temos aqui em cima e reutilizá-lo para a nossa descrição. Nesta seção, vamos estar demonstrando espaço entre objetos. Sabe, quando você tem colunas de uma grade, como elas caem um ao lado do outro? O que é que isso se parece? Então eu vou digitar uma pequena descrição sobre isso. Então aqui eu digitei ao decidir sobre a quantidade de espaço entre objetos, bem como suas larguras e alturas usam múltiplos de oito. Então vamos em frente e desenhar alguns retângulos em nossa grade. Vou em frente e ligar a grade de pixels. Você vai me ver fazendo isso de vez em quando para realmente me ajudar a colocar esses objetos na grade . Você sabe, exatamente, vamos fazer essas colunas com 48 pixels de altura. Eu só vou fazer alguns arranjos de diferentes escolhas de coluna. Estou escolhendo colocar 16 pixels de espaço entre cada coluna. Agora estou a basear isto no tamanho da nossa cópia corporal. Se você escolheu um tamanho de cópia de corpo diferente, por exemplo, talvez você tenha escolhido 14. Você pode usar múltiplos de sete em vez de múltiplos de oito para sua grade e tudo o resto. Então, em vez de 16 pixels de espaço entre objetos, talvez você escolher 14 pixels de espaço entre objetos ou até mesmo sete pixels, depende de você. Como eu disse antes, é melhor você ficar com uma grade. Isso garantirá que tudo o que você está criando tenha um ritmo vertical agradável. Depois de terminar, você pode ter algo parecido com isso, e você pode ver que adicionei algum texto aqui para descrever algumas das escolhas de espaçamento que fizemos abaixo Esta seção é mais útil em um guia de estilo ao vivo codificado em HTML e CSS as pessoas podem ver como estes com mudança em telas laterais diferentes, mas para o nosso guia de estilo estático será apenas mantê-lo super simples. Este método de criação de objetos com base no corpo do texto será útil em todos os elementos que tivemos para o guia de estilo. Isso ajudará a garantir que tenhamos um bom ritmo vertical. Cada peça vai se encaixar bem também algo que eu gosto de incluir. Meu guia de estilo é uma camada chamada espaço, e é aí que eu posso colocar pequenos quadrados para me ajudar uma linha coisas para a grade. Como você pode ver, eu tenho esses pequenos quadrados de 48 pixels, e eu estou usando-os para determinar o espaço entre nossas diferentes seções. Além disso, certifique-se de que você organizando esta seção assim como ele fez a seção de tipografia um arquivo enorme como este pode sair de controle muito rápido. Portanto, é importante manter todas as suas camadas organizadas. Tudo bem, então isso é praticamente tudo para esta seção. Em seguida, vamos estar falando sobre cor 5. Cor: Ok. A seção que vamos passar agora é sobre a cor. Eu abri um conjunto de amostras para a nossa marca Boy. Eu os tenho aqui e me lembro no arquivo do logotipo que eu mostrei antes. Temos a cor da tela e esse verde vai ser a nossa cor primária. E eu vou apenas digitar uma breve descrição sobre qual é o objetivo desta seção. Então eu escrevi vai usar a cor verde primária para elementos destacados como botões ou links e cinza escuro para cópia. Cores secundárias serão para coisas como ares e alertas. Então, agora que sabemos o objetivo desta seção para demonstrar as cores, vamos em frente e fazer algumas amostras abaixo. Vou escolher o nosso verde primário e fazer um quadrado. Eu geralmente gosto de exibir legenda abaixo da amostra de cores que mostra o código hexadecimal exato da cor. Então, quando as pessoas visualizam este guia de estilo e estão procurando cores, elas saberão exatamente qual cor escolher. Agora você pode notar que eu tenho vários tons das cores primárias e secundárias que eu não vou adicionar ao guia de estilo, mas eu vou usá-los para coisas como acentos. Por exemplo, vou fazer o código hexadecimal. Legenda. Acabei de fazer um tom mais escuro da cor primária e vamos fazer um fundo para o código hexadecimal e torná-lo um verde claro. Você pode exibir essas cores, relógios como quiser. Não é uma ciência exata. E agora que temos uma cor verde para encontrar é uma amostra, podemos ir em frente e fazer o mesmo para o resto das cores. E como eu disse antes, eu vou estar separando essas cores diferentes em algumas categorias. Então eu vou ir em frente e fazer um subtítulo para esta seção para cada uma das diferentes categorias. Certo, assim que terminar de criar as outras amostras e garantir que os códigos hexadecimais estejam corretos , você pode ter algo parecido com isso. Está parecendo muito bom. Vamos em frente e adicionar um pouco de cor ao resto do guia de estilo. Vou começar com o texto para fazer o título da seção. Destaque-se mais. Vou fazer essas cores primárias. Vamos usar nosso cinza primário para o corpo do texto e tornaremos essas colunas um cinza claro. Sinta-se livre para usar suas próprias cores ao longo do caminho. Em seguida, vamos falar sobre iconografia e imagens. 6. Ícones e imagens: com a marca em mente vai pensar sobre iconografia e imagens. Eu criei um pequeno conjunto de ícones para uma marca de livro de citação, e eu vou ir em frente e abrir isso agora. Se você tem um conjunto Nikon que você mesmo baixou ou criou e que você deseja usar, vá em frente. Também notei que eu dei a esta seção uma pequena descrição para descrever o que são ícone deve parecer se abaixo da estrada alguém quiser vir e estender nosso conjunto de ícones, eles terão uma idéia melhor de como o ícone deve ser parecido. Então eu vou ir em frente e apenas abrir nossas armas I que eu vou apenas selecioná-los todos e colá-los em nosso guia de estilo. Agora podemos simplesmente nos alinhar. Estes dois estão ótimos agora, assim. Você sabe, seu conjunto de ícones pode não estar alinhado à grade. Você pode ter que ajustá-lo um pouco. Às vezes eu gosto de fazer um pouco de pano de fundo para os ícones apenas para separá-los um do outro e fazê-los se destacar um pouco. Então eu vou em frente e faço isso. Agora perceberá que estou sempre a manter-me fiel à nossa grelha. Olha, isso é praticamente tudo para essa seção. Agora podemos pegar ícones como precisamos deles ao criar nossas páginas. Em seguida, adicionaremos exemplos de como nossas imagens devem ser em todo o nosso site. Criei algumas imagens simples com base nas cores da nossa marca. Vamos copiá-los e colá-los no guia de estilo e alinhá-los à grade. Eu também vou redimensioná-los para torná-los um pouco maiores. Tudo bem, isso parece muito bom. Agora, quando precisamos de uma nova imagem, enfraquecer, referenciar o estilo aqui, ou simplesmente usar um desses bem simples. 7. Formulários e botões e: usando todas as coisas que criamos anteriormente. Agora podemos lidar com formulários e botões nesta seção. Queremos mostrar todos os elementos do formulário serão usados para o nosso site e todos os seus diferentes estados. Por quatro momentos. Queremos mostrar seu estado padrão. Eles estão focados no estado e no seu estado aéreo. Vamos começar criando um rótulo. Vou redefinir este título seis para a nossa gravadora. Como eu mencionei antes, nós não queremos apenas usar texto fictício como entrada de texto para o nosso rótulo. Vamos fazer algo como endereço de e-mail. Certo, vamos criar um retângulo para uma entrada de texto e alinhá-lo à grade. Quero ter 40 pixels de altura. Vamos escolher um cinza claro para o seu fundo. Vamos também mostrar como seria o texto do espaço reservado. Vou fazer 16 pixels e também o peso normal. Vamos também torná-lo um cinza claro e apenas por diversão. Vamos adicionar Nike à direita. Vamos pegar na nossa seção de ícones. Este rótulo parece um pouco pequeno para mim, então eu vou ir em frente e aumentá-lo até o próximo tamanho da manchete. Isso parece um pouco melhor legal. Então essa é uma entrada de texto básica. Vamos fazer o seu estado de foco. Agora vamos fazer uma borda verde com base em nossa cor primária e mudar o ícone para essa cor também. Eu também vou largar o grande fundo e apenas torná-lo branco. Também queremos mostrar como é o texto quando você está digitando nele. Então vamos mudar isso para corresponder ao nosso corpo de texto. Vamos também acrescentar valor como se alguém digitasse algo nele. Legal. Vamos repetir o mesmo processo básico para a declaração aérea. Você pode repetir esse processo para todos os outros elementos de formulário que você pode precisar. Optei por incluir entradas de texto, seleciona áreas de texto, caixas de seleção e botões de opção. Adicione os elementos de formulário que você acha que pode precisar, mas certifique-se de que eles estão alinhados à sua grade vertical. Vamos passar para os botões. Este será o mesmo processo básico. Queremos um botão primário que usamos para as ações principais na página e, hum, ou botão plano secundário. Esse tipo de parece um link que usamos para ações menos enfatizadas sugere, como a entrada de texto irá desenhar um retângulo alinhado à grade. Geralmente é uma boa idéia fazer seus botões tão altos quanto suas entradas de texto, então eu vou fazer meu retângulo de botão 40 pixels de altura. Isso ocorre porque botões e entradas geralmente aparecem um ao lado do outro, e você deseja que eles sejam alinhados. Vamos fazer com que os botões de fundo nossa cor primária. Também faremos o texto do botão 16 pixels para corresponder ao texto do corpo, mas vamos torná-lo branco e dourado. Eu também gosto de fazer o texto do botão maiúsculo para torná-lo se destacar do corpo do texto, especialmente no caso em que você tem um botão plano sem fundo. Em seguida, irá duplicar o botão para o seu estado de foco. Eu só vou escolher um verde claro e adicionar uma pequena sombra de gota. Vou fazer o Shadow Light cinza para os relógios Barce. Vamos duplicar novamente e fazer o estado ativo. Vou escolher um verde mais escuro para o fundo e um verde ainda mais escuro para a sombra inserida . Isso faz parecer que está sendo pressionado. Um último estado que você deseja incluir é o estado desativado. Se você acha que pode ter desativado estados para suas entradas acima, também seria uma boa idéia incluir esses estados também. Eu realmente não estou planejando ter nenhum estado deficiente para minhas entradas, então eu vou apenas deixá-los de fora por enquanto. Se precisarmos adicioná-los mais tarde, tudo bem para o estado desativado. Vou escolher um verde claro para o fundo. Eu vou fazer o texto como verde também, mas ainda mais escuro que o fundo. Ok, isso está parecendo muito legal. Podemos repetir o mesmo processo básico para criar nossos botões de aparência plana. Como você pode ver, isso não é ciência de foguetes. Na verdade, é muito, muito simples. Não há nenhuma razão para não criar um guia de estilo. Ele ajuda você a pensar criticamente sobre o que você está incluindo em sua visão e também serve como uma biblioteca para referência e tirar ao criar páginas. Se for um elemento usado com frequência, como alertas ou uma soneca, provavelmente pertence ao guia de estilo. Você pode usar esses princípios para criar qualquer elemento e adicionado ao seu guia de estilo. Em seguida, será aprender como pegar todos esses grandes elementos que criamos e colocá-los em uma página de amostra 8. Página de amostra: Agora que temos todos esses grandes elementos em nosso guia de estilo, podemos montar uma página de exemplo. Vamos tentar criar uma página de inscrição simples para menino citação. Às vezes, ao criar uma página, você pode achar que precisa adicionar coisas que não existem no guia de estilos. Você pode usar seu melhor julgamento para decidir se o elemento que você está adicionando à página pertence ao estilo. Obtenha ou não, apenas tente ser vigilante sobre não adicionar novos elementos. Se já houver um elemento claro para encontrar para esse caso de uso. Certo, então vamos começar. Vamos criar um novo documento com um quadro de arte disse às 10 24 por 768 eu só vou nomeá-lo simulado. Ok, então a primeira coisa que vamos precisar é de um bar de cochilos. Então vamos para o nosso guia de estilo e pegar isso e colado. Vamos alinhá-lo à grade e ajustá-lo para atender às nossas necessidades. Se você quisesse, você poderia mudar esses links, mas eu vou deixá-los como eles estão por enquanto, isso parece muito bom. Acho que quero que o fundo do lado dela seja verde escuro, então vou fazer outro retângulo e colá-lo atrás da barra de sesta dela. Vou trancar esta camada no lugar para não mexer com ela por acidente. Em seguida, quero colocar um formulário na página que permita ao usuário digitar seu endereço de e-mail e senha e apertar um botão para enviar o formulário. Acho que quero que o formulário esteja numa caixa branca. Esta é uma daquelas situações em que vou adicionar algo que não existe no guia de estilo. Se eu acho que podemos precisar deste elemento no futuro, então eu poderia fazer uma nova seção chamada Painéis ou algo em definir seus casos de uso lá. Esta também pode ser uma situação em que eu poderia me beneficiar desses espaçadores rosa que temos em nosso guia de estilo. Vou usá-los para me ajudar a posicionar o painel abaixo da nossa soneca. Parece que quase acertei. Acho que quero que isto seja um pouco maior. Vamos pegar uma imagem do guia de estilo para colocar dentro deste painel para torná-lo um pouco mais emocionante. Eu também vou ajustar o tamanho um pouco e mudar as cores para combinar com a página. Vamos também adicionar um título a este painel para ajudar a indicar que o formulário abaixo é para ajudar os usuários a se inscreverem. Agora vamos pegar algumas entradas do nosso guia de estilo, e vamos também adicionar um botão de chamada à ação na parte inferior que está parecendo muito bom. Vamos também adicionar um link de ajuda na parte inferior, apenas por diversão. Ótima. Então, aí está. Criamos uma página de exemplo a partir de alguns dos elementos do nosso guia de estilo, e você pode ver como ter um guia disponível ao criar páginas é uma grande ajuda. Esperemos que, com essas diretrizes básicas, você possa criar seu próprio guia de estilo da Web exclusivo para cada um de seus projetos futuros para ajudá-lo a manter você e sua equipe unificados Ao projetar novas páginas para seu site, por favor, compartilhe seu trabalho no fórum. Eu adoraria ver o que você inventou. Sinta-se livre para adicionar componentes e sua própria rotação no guia de estilo. Afinal, esta não é uma ciência exata. Obrigado e te vejo na próxima vez