Web design no Affinity Designer para iniciantes e além | Dawid Tuminski | Skillshare

Velocidade de reprodução


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

Web design no Affinity Designer para iniciantes e além

teacher avatar Dawid Tuminski

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

88 aulas (7 h 28 min)
    • 1. Design na Affinity Designer

      2:08
    • 2. Introdução ao curso

      1:49
    • 3. O que é o Affinity Designer e como configurar para web design

      3:11
    • 4. As habilidades de design da Web do Affinity Designer

      8:43
    • 5. Os 10 melhores princípios do bom Web Design

      3:53
    • 6. Os 10 melhores princípios do bom Web Design - continuados

      4:34
    • 7. O fator mais importante a ser considerado antes de escolher cores

      4:06
    • 8. Como misturar cores para a melhor experiência do usuário

      4:36
    • 9. Como escolher as cores “psicologicamente corretas”

      4:37
    • 10. 7 ferramentas fáceis para escolher esquemas de cores à prova de erros

      6:32
    • 11. Uma super breve história da tipografia na web

      2:41
    • 12. Como misturar cores para a melhor experiência do usuário

      5:18
    • 13. Como escolher as fontes certas para títulos

      3:37
    • 14. Como misturar fontes para títulos e texto do corpo

      4:18
    • 15. A fonte perfeita para o design da interface do usuário

      2:35
    • 16. Cabeçalho, marca, navegação e seções de Herói

      3:52
    • 17. As seções do centro e da parte inferior do seu design de site

      4:13
    • 18. O que são grades e como usá-las

      3:08
    • 19. Como criar sua própria grade

      4:09
    • 20. 7 tendências de design da web que governam o mundo do design da web

      8:58
    • 21. Onde encontrar a inspiração certa para seu próximo design

      2:28
    • 22. Cada design de site precisa de andaimes

      3:13
    • 23. Construir seu próprio wireframe no Designer

      4:41
    • 24. Vamos continuar a criar a biblioteca

      10:08
    • 25. Como usar os ativos para criar um wireframe

      11:19
    • 26. Wireframing online

      4:28
    • 27. Vamos falar sobre imagens e ícones

      5:53
    • 28. Como criar estilos de letra no Affinity Designer

      4:00
    • 29. A visão geral da peça de design

      6:01
    • 30. Vamos criar as amostras de cores

      4:05
    • 31. Vamos criar os estilos de texto

      2:34
    • 32. Vamos dar uma olhada nas imagens e ícones

      2:34
    • 33. Vamos criar o logotipo

      3:25
    • 34. Vamos construir os links do menu

      4:04
    • 35. Vamos adicionar os ícones das mídias sociais

      8:05
    • 36. Vamos começar adicionando a imagem principal

      6:41
    • 37. Vamos começar adicionando a imagem principal

      3:02
    • 38. Como redimensionar a imagem

      3:02
    • 39. Vamos tornar a imagem um pouco mais escura

      3:14
    • 40. Agora vamos adicionar o texto principal

      5:04
    • 41. Vamos adicionar a navegação ao controle deslizante

      3:47
    • 42. Vamos começar a criar o primeiro segredo

      3:35
    • 43. Vamos adicionar os itens em destaque

      10:07
    • 44. Vamos adicionar a seção de segundo item em destaque

      5:40
    • 45. Vamos começar a criar a seção do blog

      8:13
    • 46. Vamos substituir as imagens

      3:05
    • 47. Vamos começar a criar a Galeria de Imagens

      7:13
    • 48. Vamos criar a primeira coluna do rodapé

      4:13
    • 49. Vamos concluir o design e o rodapé inteiro

      3:56
    • 50. Entregar o design ao cliente

      3:39
    • 51. Entregar o arquivo ao desenvolvedor

      2:30
    • 52. Como usar a pessoa de exportação para exportar os ativos em massa

      2:29
    • 53. Obrigado por assistir ao curso

      0:52
    • 54. 1Vamos descobrir o quadro de fio para o design

      6:08
    • 55. 2Vamos descobrir o design do blog

      5:30
    • 56. 3Vamos dar uma olhada nos nossos ativos

      6:06
    • 57. 4Como criar o logotipo e o Nav

      7:38
    • 58. 5Vamos adicionar os ícones das mídias sociais

      6:18
    • 59. 6Vamos adicionar as primeiras imagens

      7:22
    • 60. 7Vamos adicionar a sombra às imagens

      7:57
    • 61. 8Vamos adicionar os botões de navegação

      5:24
    • 62. 9Vamos criar um recipiente para o post do blog

      5:16
    • 63. 10Vamos adicionar as primeiras peças de texto

      4:29
    • 64. 11Vamos adicionar as peças de texto

      6:07
    • 65. 12Vamos começar a criar a Post Grid do Blog

      5:57
    • 66. 13Vamos criar o primeiro Post Card

      5:19
    • 67. 14Vamos adicionar as restantes cartas

      6:35
    • 68. 15Vamos adicionar os posts mais antigos

      4:17
    • 69. 16Vamos explorar o projeto da Barra Lateral

      2:37
    • 70. 17Vamos criar a caixa de pesquisa

      3:54
    • 71. 18let's create the About Me

      6:37
    • 72. 19Vamos criar a seção de texto da barra lateral

      4:48
    • 73. 20Vamos criar o primeiro recipiente para os posts mais populares

      4:06
    • 74. 21Vamos criar a lista dos posts mais populares

      6:29
    • 75. 22Vamos criar a seção de anúncios

      2:50
    • 76. 23Vamos dar uma volta ao rodapé

      4:07
    • 77. 24Vamos explorar diferentes conceitos de rodapé

      2:35
    • 78. 25vamos concluir o projeto e explorar o próximo

      7:08
    • 79. 26Vamos explorar o único Post Design

      3:13
    • 80. 27Vamos criar a imagem em destaque e o recipiente de pós

      5:47
    • 81. 28Vamos adicionar o post do blog

      6:21
    • 82. 29Vamos adicionar os parágrafos e imagens

      10:11
    • 83. 30Vamos adicionar os ícones das mídias sociais

      7:18
    • 84. 31Vamos adicionar o 31Let's

      8:26
    • 85. 32Vamos adicionar a seção de posts relacionados

      7:21
    • 86. 33Vamos começar a criar a seção de comentários

      4:46
    • 87. 34Vamos criar os textos para os comentários

      5:55
    • 88. 35Vamos criar o Post Comment Forms

      9:02
  • --
  • 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.

1.133

Estudantes

2

Projetos

Sobre este curso

Este curso é sobre como usar o Affinity Designer para web design. Se você não está muito familiarizado com o software, primeiro você vai aprender rapidamente o que ele é e como configurar para web design.

Antes de começar a criar qualquer coisa no Affinity Designer, vamos dar uma olhada nos conceitos e boas práticas de web design. Você vai aprender a escolher cores para seu design e onde encontrar inspiração de cores e temas de cores prontos.

Você também vai aprender a tipografia básica do design da web, que é extremamente importante não apenas para um bom design da web, mas para um bom design em geral. Você vai aprender tudo sobre texto do corpo, títulos e como combiná-los para uma ótima experiência do usuário.

Então vamos dar uma olhada na estrutura de um site típico, é claro, ao design. Vamos falar de logotipos, navegação, barras laterais e todos os blocos de construção do outro site.

Depois disso, vamos falar sobre o que está e o que não está no mundo do web design agora. Também vamos procurar alguma inspiração para web design na web.

Com todo esse conhecimento e habilidades, vamos avançar para a parte de design do curso. E observe que você tem que ter pelo menos algumas habilidades básicas para acompanhar sem esforço

Este curso não é sobre aprender tudo o que há para saber sobre as habilidades do Designer. Se você precisar disso, dê uma olhada no meu curso de designer de Affinity para iniciantes.

No final deste curso, você deve ser capaz de criar sites com independência usando o Affinity Designer.

Conheça seu professor

Teacher Profile Image

Dawid Tuminski

Professor

Designer, coder and educational entrepreneur.
Adobe Certified Expert in Illustrator whose courses were listed in the Udemy's TOP 10 best reviewed courses.

Creating online courses on design tools like Adobe Illustrator and Adobe Photoshop, logo design, web design, graphic design freelancing, online teaching and digital marketing .

Teaching +30k students in 160 countries worldwide.

Loves the freedom of creating courses and prides in his teaching method, which is straight to the point and with a smile.

His motto: Boring instructors are worse than boring topics!

His students value his courses for their conciseness, professionalism and actionable tips and techniques they can apply in their day-to-day design tasks and online education businesses.

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. Design na Affinity Designer: Se você está pensando em começar como um freelancer Web designer, você provavelmente tentou aproveitar a loja de fotos em algum momento no passado, e eu sei a dor que eu tenho jantar. Lembro-me de passar dias após dias, mesmo semanas após semanas, tentando apenas lembrar certas ferramentas e efeitos. Mas felizmente vivemos em tempos em que se você quiser começar como um freelancer Web designer. Mas você pode colocar a loja de fotos de lado. Oi, meu nome é David Tyminski, e neste curso você vai aprender a usar uma barbatana em designer para projetar sites de a Z. Este curso é repleto de informações valiosas. Qualquer estreante do Web designer deve saber, como escolher as melhores cores e fundos para seus sites. O que torna um site projetado profissionalmente? Quais são as tendências modernas de Web design que você deve conhecer? E isso é apenas a introdução, porque o verdadeiro pão e manteiga do discurso está dentro de suas partes práticas. Vamos sujar as mãos e explorar todas as ferramentas e técnicas de armas profissionais e recusar-se a projetar um site dentro designer afinidade Isso inclui arame de construção e grãos, que são os blocos de construção de cada usando ativos para tornar o processo de design ultrarrápido, criando estilos de texto que permitem alterar fundos em um piscar de olhos. E, claro, projetando um site, você aprenderá a projetá-lo desde a abertura do arquivo através do local e imagens, adicionando texto e fundos até exportar no design que você acabaria distribuindo a um cliente. Temos um monte de coisas boas para cobrir neste curso, e eu realmente acredito que ele vai ajudá-lo tremendamente na concepção de sites incríveis dentro um encaixe para designer, então eu adoraria vê-lo dentro. 2. Introdução ao curso: este curso é tudo sobre o uso de um ajuste em designer para Web design. Se você não estiver muito familiarizado com o software primeiro, você aprenderá rapidamente sobre o que se trata e como configurá-lo para Web design. Antes de começar a projetar qualquer coisa no Afinitor, Designer vai dar uma olhada em conceitos de Web design e boas práticas. Você aprenderá a escolher cores para o seu design e onde encontrar cores, inspiração e temas de cores prontos. Você também aprenderá armas básicas e topografia, que é extremamente importante não apenas para um bom Web design, mas para um bom design em geral para aprender tudo sobre títulos tributados pelo corpo e como os dedos emparelhá-los para uma grande experiência do usuário. Então vamos dar uma olhada em uma estrutura típica de sites. Design sábio, é claro. Vamos falar sobre logotipos, navegações laterais guerras e todos os outros blocos de construção de sites. Depois disso, falaremos sobre o que está dentro e o que não está nas armas do mundo agora. Nós também vamos procurar alguma inspiração Web design em torno da Web. Com todo esse conhecimento e habilidades passarão para a parte de design do curso quando os projetos feitos darão uma olhada em finalizar seu trabalho, você aprenderá como salvar e exportado corretamente para vários formatos de arquivo. Há um monte de coisas boas para cobrir, e eu realmente acredito que uma vez que você tenha concluído o curso e praticado por conta própria, você vai começar a criar designs de sites incríveis em um ajuste em designer em nenhum momento. Então vamos direto para o curso e começar com os fundamentos. 3. O que é o Affinity Designer e como configurar para web design: Se você é completamente novo em ofender o designer, aqui estão alguns fatos sobre isso. Em primeiro lugar, ofender o designer é, em primeiro lugar, um aplicativo de design gráfico fator. Mas isso não significa que ele não é adequado para Scream e dispositivos design. Na verdade, é uma ótima combinação de ferramentas e habilidades destinadas ao trabalho dentro e fora da tela. No início, ele estava apenas disponível para Mac OS, mas desde o final de 2016 você também pode instalá-lo apenas Windows Machine. Neste curso, usarei uma versão para PC fora do software. No entanto, se você tiver um designer instalado em um Mac, você não deve ter problemas em seguir sozinho. Basta lembrar que sempre que eu vou estar usando o modificador de controle manter, você teria que usar a tecla modificador de comando. E sempre que eu vou estar usando o modificador Olt manter, você teria que usar a tecla modificador opção no seu teclado. A tecla shift é a mesma para ambos os sistemas operacionais. O que é ótimo sobre designer em termos de interoperabilidade é que ele permite trabalhar e exportar para vários formatos de arquivo que vão desde vetor padrão, uma vez como V G e E. P s para arquivos raster padrão como J. P, G, P e G e Gift. Ele permite que você abra arquivos padrão PSD e A. I, e ele faz o trabalho muito bem. Ele também pode exportar sua arte para formatos de arquivo que podem ser lidos por outras peças fora de software de design , como Dobie Photo Shop e Adobe Illustrator. Então, se você precisa salvar seu trabalho como um tiff PDF ou mesmo PSD, você pode fazer isso no Affinity Designer. Então, se eventualmente você estiver enviando seu projetado para um desenvolvedor, você pode fazê-lo usando um arquivo PSD padrão e você não precisa se preocupar que o desenvolvedor não poderá abrir o arquivo. Você produziu suporte de designer de afinidade, camadas , símbolos, loja de fotos como efeitos, guias e grão, e praticamente qualquer coisa que você precisaria para projetar sites com ele. Tenho que te dizer que tudo isso é só uma ponta do iceberg. Quero dizer, o software pode fazer tantas coisas, e há alguns aspectos dele que o tornam mais massa do que ilustrador ou photoshop. Para certos tipos de trabalhos de design, é realmente um balcão único para as necessidades de design. Você pode projetar logotipos com cartões de visita de sites, praticamente qualquer coisa que seu cliente possa querer ser projetado. Mas este curso não é sobre aprender. Tudo o que há para saber sobre desmaiar um designer. Se você precisa disso, dê uma olhada no meu como começar rapidamente com o curso de designer de afinidade onde você pode aprender tudo o que é para saber sobre. O software neste curso vai se concentrar em usar o programa em um cenário de Web design, então eu acho que podemos dar uma olhada nas habilidades de Web design off designer agora. 4. As habilidades de design da Web do Affinity Designer: designer Afinitor está preparado para o grande Você. Eu projeto experiência logo fora da caixa. Não há realmente muito que você tem que fazer para tirar proveito de todas as suas habilidades de Web design , que vai dar uma olhada agora. Primeiro de tudo, ofender. O designer suporta camadas, o que é bastante importante se você quiser tornar seu design ordenadamente organizado. É sempre uma boa idéia colocar seus elementos separados construindo partes separadas de um design de site em camadas distintas. Elementos que compõem o cabeçalho devem ir em uma camada separada. Elementos que compõem a barra lateral devem ir em uma camada separada e assim por diante. É uma boa técnica de produção nomear as camadas corretamente. Em vez de deixar seus nomes genéricos, como camada uma camada para etcetera, você deve renomeá-los e dar-lhes nomes logicamente descritivos que se relacionam com o conteúdo das camadas. Por exemplo, artigo da barra lateral do Hatter Food ER, etc. Eu iria até mesmo ir um passo além e creed sub-camadas vale nomes logicamente descritivos, por exemplo, que cria sub-camadas para apenas a navegação ou blocos Brandon sentados dentro da camada de chapeleiro . há realmente nada mais indicativo de um design desleixado e designer que mantém todo seu conteúdo em apenas uma única camada genérica. Se você é um fã de sombras, Grady INTs e desfoques, você ficará feliz em saber que o designer oferece uma variedade de efeitos que você pode acabar com seu trabalho artístico. Eles não são destrutivos, o que significa que eles não modificam a arte permanentemente, mas estão sendo adicionados dinamicamente à sua e podem ser alterados a qualquer momento que você quiser. Seria muito mais difícil criar projetos de sites sem nossos quadros. Eles são a melhor maneira não só de projetar versões móveis do site, mas também de mostrar seu trabalho. A coisa mais importante que ele precisa ter em mente ao criar sites o suficiente no designer é que, por padrão, quando você cria um novo arquivo, você não criará um quadro de arte. O sul permite que você escolha se deseja criar um trabalho artístico ou simplesmente sair da página padrão. Portanto, lembre-se de que quando você quiser criar em nosso relatório, quando estiver criando seu arquivo, marque a opção criar arte a bordo. Claro, se você simplesmente esquecer ou mudar de idéia, você sempre pode usar a arte a bordo. Ainda para criar um site de placa de arte Designs precisa de perfeição pixel, e você pode usar designers, toda a família de ferramentas e opções. Só por isso. O que é ótimo sobre esse recurso é que você pode simplesmente escolher uma predefinição de encaixe você I e ter certeza de que as opções de encaixe perfeitas para fins de Web design estão ativadas . Ele também irá ativar o alinhamento de pixel de força e mover as opções de pixels de espera apenas para garantir que todos os objetos estão encaixando e se movendo corretamente. Quando tiveres o estalo. design ativado mostrará quando os objetos estão alinhados, mas também indicará a distância em pixels entre objetos específicos. A predefinição de encaixe U I também fará com que seu trabalho artístico encaixe duas guias e encaixe na grade. Então, se houver usá-los em seu fluxo de trabalho, predefinição de ajuste que eu projetei permitirá que você alinhe o trabalho artístico perfeitamente com eles. E se você nunca usou a grade antes porque ela era muito confusa, você ficará feliz em saber que o Designer oferece uma grade automática, que encontra as melhores configurações por conta própria. Você não precisa contar tudo sozinho. A grade mudará dependendo do valor de Zoomer definido. Claro, se você quiser, você pode mudar a grade para manual e inserir seus próprios valores. Você também pode usar o gerenciador de guias para colocar seus guias exatamente onde você deseja que eles vão . Afinitor designer é principalmente um programa de design de fator, mas permite que você imite o ambiente de pixel que seus projetos de site acabarão por viver . Para fins de Web design, você pode usar a visualização de pixels padrão e uma exibição retina de alta densidade de pixels. Isso permitirá que você visualize ou projete como se fosse feito inteiramente de pixels. Um site não pode viver sem texto. É tão importante que muitos designers torná-lo o ponto central de seus projetos, removendo como elementos gráficos Manny quanto possível. E é muito fácil trabalhar com designer de impostos. Além das opções padrão de caracteres e parágrafos, você pode criar estilos de texto que aceleram o processo de troca de fundos. Dentro do seu projeto. Você pode ter dezenas e dezenas de estilos de texto diferentes, e você pode alterar praticamente todos os aspectos deles. Designer conta com a capacidade de criar suas próprias bibliotecas a partir de ativos que você pode usar ao projetar sites. Ele vem com muito encontrar Iowa 10 ativos que você pode apenas arrastar para os ativos pasta placa eram tipo de símbolos. Sobre a diferença entre ativos e símbolos é que você pode criar bibliotecas de ativos que podem ser exportados ou incorporados em um documento específico. E você não pode fazer isso com símbolos suficientes no designer. Então digamos que você está construindo uma armação de arame para o seu site. Você iria querer apenas os elementos esquemáticos para isso, certo? Basta criar suas próprias representações de um sistema de navegação de logotipo. Bloco ostenta etcetera, então selecionado, e no menu do painel, escolha e da seleção. O elemento irá direto para a biblioteca de ativos e estará esperando por você. Se quiser usá-lo de novo. Offend o designer vem com esses espaços de trabalho separados destinados apenas à exportação de elementos do seu design. É chamado para a persona de exportação, e é uma ótima maneira de exportar partes cortadas do seu design. Você pode apenas conceder a ferramenta de fatia, criar uma fatia de um determinado elemento de design e exportado como uma defesa de arquivo separada. Há um monte de ferramentas e opções que permitem que você crie projetos de site lindos em um ajuste em ferramentas de designer e painelistas como as camadas são para encaixar. Gerente etcetera irá ajudá-lo na criação de seus próprios sites. Mas confie em mim que acabamos de desviar a superfície aqui. Há muito mais em projetar sites usando ofensivo para designer e você descobrirá tudo à medida que o curso progride. Eu acho que neste momento nós poderíamos saltar direto para a criação de nosso primeiro design, mas eu quero que este curso seja algo mais do que apenas uma vitrine de técnicas e processos de design . Eu queria adquirir conhecimento Thora sobre Web design contemporâneo. Então, em seguida, vamos dar uma olhada nos princípios do bom Web design, seguido de informações práticas sobre cores, tipografia e elementos usados para montar um site juntos. 5. Os 10 melhores princípios do bom Web Design: Se você é um Web designer inicial, a abundância de informações que você tem que descobrir e aprender pode fazer suas mãos girá-lo. É por isso que eu coloquei uma lista de 10 princípios essenciais de bom Web design que irá ajudá-lo a começar. Olhe para cada um desses princípios é uma espécie de diretriz, mas não uma regra absoluta que você não pode unir. No entanto, segui-los, especialmente se você está apenas começando, permitirá que você evite muitos erros de novato. Portanto, o bom Web design sempre se preocupa com o usuário final. Afinal, como Steve Jobs disse, o design não é como ele parece, mas como ele funciona. E ele deve funcionar perfeitamente em termos de servir o visitante da melhor maneira possível, você deve projetar o site com seu propósito em mente. Você deve pensar, como o usuário pensaria quando ele ou ela estaria visitando o site, pense o que os visitantes estarão esperando encontrar no site informações, entretenimento, talvez produtos. O que isso seduz em termos de design e, em seguida, projetou o site em conformidade? Este é extremamente importante, e eu tenho que admitir que eu tenho uma espécie de viés pessoal em relação ao texto mal executado do lado. Não estou falando de topografia específica, mas de composição tributada. O usuário quer encontrar e consumir as informações de forma rápida e sem esforço. É por isso que é tão importante construir seus parágrafos corretamente. Texto bem composto tem cabeçalhos, parágrafos curtos e marcadores para fácil leitura. Eu acho que até o comprimento fora parágrafos é crucial para projetos orientados para a informação. Nos últimos anos, direitos autorais móveis têm se espalhado pela Internet, tornando os parágrafos inteiros tão curtos quanto uma frase. Um bom número de frases nos parágrafos é geralmente 2 a 3. É geralmente acordado que os tipos de letra serif sentido, ou seja, aqueles sem terminações decorativas em letras, são mais fáceis de ler em telas digitais. Eu não olharia para isso como um dogma, mas eu aconselharia fortemente a não usar mais de dois tipos diferentes dentro do seu projeto . Se você vai para Sand Saref ou Serif Typefaces é subsidiária para manter sua escolha de fundos em todo esse design. Se você decidiu ir para a Sarah cabeçalhos e algum corpo serif, apenas fique com eles. O layout do seu site deve ajudar os visitantes a encontrar as informações em vez fazê-los procurar por elas em frustração. É por isso que é importante construir o design que permite que o olho humano navegue facilmente o conteúdo de cima para baixo e da esquerda para a direita de mais importante para menos importante. Em breve você aprenderá mais sobre a teoria das cores e como usá-la no Web design. Mas, por enquanto, lembre-se de que as cores que você escolher podem fazer ou quebrar sua composição. É essencial criar esquemas de cores que ajudem os usuários a entender a mensagem do site e encontrar as informações que eles estão procurando enquanto torna o design esteticamente agradável. 6. Os 10 melhores princípios do bom Web Design - continuados: imagens podem ajudá-lo em nós, apenas tornando o site mais agradável de olhar, mas também para contar uma história. Eles podem envolver os usuários em um nível mais profundo se escolhido corretamente e emparelhado com o esquema de cores Sites, eles irão ajudá-lo tremendamente na criação de um design bonito e útil. Recentemente, está ficando muito mais comum usar a fotografia do cliente em vez de apenas fotos brega presas baixadas da web. Basta lembrar de otimizar as imagens ao entregar o design a um desenvolvedor e otimizar os meios de comprimir as imagens para que elas fiquem menores. Tamanho ajuda o site a carregar mais rapidamente. A maioria dos sites contemporâneos são baseados em grades, e o que é usado com mais freqüência é a grade de 12 colunas. Pense nisso como as linhas invisíveis da Siri que o ajudam a estruturar o design do seu site e a torná-lo simétrico e fácil de codificar. Essas linhas são uma grande ajuda ao colocar os elementos sobre o design. São só os contentores principais. Aleck off alinhamento é muito perceptível e cria uma impressão desleixada. Você aprende mais sobre grãos e como criar o seu próprio mais tarde nas pontuações. Escusado será dizer que seu design deve ficar bem em dispositivos móveis. Na verdade, você pode até criar seus designs principalmente para dispositivos móveis, especialmente smartphones, e, em seguida, criar projetos de desktop sobre eles. Ele é chamado de Mobile First Approach e é um design em resposta ao fato de que os usuários ficam online muito mais frequentemente usando seus smartphones, não computadores desktop. Em qualquer caso, seu design deve estar pronto para ser exibido em qualquer tela. Não há nada mais destrutivo para um projeto e depois um barulho. Mantenha seu layout simples para que eles sejam fáceis de digerir. Isso significa escolher a quantidade certa de cores, que normalmente não é mais do que cinco. Significa ser consistente com a escolha encontrada. Mas isso também significa tornar a interação entre os elementos de sites fácil de entender o espaço certo e é importante por uma razão importante. Torna o consumo de conteúdo fácil e agradável. Existem diferentes tipos de espaço, e você pode usar e deve estar ciente em seu design. Espaços entre linhas. texto desligado deve ser não muito pequeno, modo que as linhas de texto não se sobrepõem, mas também não muito grandes. Para que o olho humano não se perca. Eu também posso brincar com espaços entre personagens. Mas eu deixaria para grandes títulos se você quiser ir para mais de uma abordagem artística em Web design e desenvolvimento mundo, existem também tipos especiais de espaços chamados estofamento e margem padrão é o espaço entre pedaços de conteúdo dentro de um contêiner, e as margens são espaços entre contêineres. regra geral é esta. Peças fora do conteúdo nunca devem tocar uns aos outros, e você deve sempre ter algum espaço entre eles. O bom Web design moderno não pode viver sem uma quantidade decente de espaço em branco. Espaço em branco significa espaço vazio entre objetos e é necessário para um visual limpo e moderno. O espaço em branco pode direcionar um design específico de uma determinada maneira. Use-o ricamente se você estiver indo para uma espécie de luxo de um visual sofisticado do seu design . Portanto, estes são os 10 princípios essenciais do bom Web design. Há, é claro, outros princípios a considerar, como a navegação clara, usando a relação dourada ou o tempo de carga. Mas a ideia geral é sempre esta. Você deve projetar para o usuário e, tendo seus clientes objetivos em mente, usou esses princípios como diretrizes para a criação de projetos estéticos e bem-sucedidos 7. O fator mais importante a ser considerado antes de escolher cores: apenas na pele de cor certa para o seu próximo site. O design é junto com a tipografia. A maior importância fazer com que as cores que você escolher será a primeira coisa que vai chamar a atenção do visitante e, se escolhido corretamente, não vai fazer seus olhos doer e dedos rapidamente olhar para o botão de fechar. A razão por trás de sua escolha de cor pode ser apenas o fato de que você gosta. É uma parte de toda a estratégia que ajuda a enviar a mensagem que seu cliente deseja enviar. Isso pode parecer estranho, mas lembre-se que você não está projetando o site para si mesmo. Você nem está projetando para o seu cliente. Você está projetando para seus clientes. E isso significa que os carros fora do site deve ajudar os visitantes a entender o que o site é sobre. Navegue no site sem a sensação de confusão e encontre o conteúdo que eles estão procurando . Então, como escolher as melhores cores para um trabalho específico de Web design? Há muito poucas coisas que você deve levar em consideração. Isso ajudará você a entender a mensagem que o site deve estar enviando e entender o que os visitantes estão esperando para experimentar. Primeiro de tudo, você deve saber, o que é que seu cliente faz, se é uma empresa de rua alta, uma loja de mãe e pop, uma organização de caridade, você deve entender esse negócio. Você não iria para o mesmo esquema de cores para uma empresa financeira como você faria para uma loja de brinquedos , certo? Vamos falar sobre psicologia das cores um pouco mais tarde, por enquanto. Basta anotar, também, que as cores transmitem e acendem emoções, e é extremamente importante acender as certas. Às vezes, as empresas, de certa forma, forçam o uso de certas cores. Por exemplo, se você está criando um site para uma loja de canto de alimentos orgânicos, provavelmente você iria para tons de terra, e se você fosse criar um site de jardim de infância, você iria para um pouco mais colorido e encontrado cor paletas. Em segundo lugar, se a empresa já possui um logotipo ou está redesenhando, você deve levar suas cores em consideração. Isso não significa que todas as cores dentro do site têm que ser exatamente as mesmas usadas no logotipo, mas eles definitivamente têm que se complementar. Em terceiro lugar, ouça o seu cliente, mas não sucumba a idéias claramente ruins. Há uma razão pela qual o cliente contratou você em vez de fazer isso sozinho ou pedirao sobrinho para projetar seu site. Há uma razão pela qual o cliente contratou você em vez de fazer isso sozinho ou pedir Mas é claro, você não precisa ser excessivamente esquemático se seu cliente quiser se destacar de alguma forma. E se você der uma olhada em sua presença na Web concorrentes, você pode experimentar um pouco com esquemas de cores. Se, por exemplo, você está projetando um site para um ambiente moderno uma empresa, você não precisa ir para azul escuro e cinza, mas polvilhe as coisas com o marrom claro ou verde. Olhe para o site do cliente Earth Dot Org. Este pode não ser o melhor design do mundo, mas mostra claramente que a mensagem e emoções braço ou importante do que a correção colar ao decidir sobre um esquema de carro que você deseja usar no projeto. Lembre-se sobre o tipo de negócio que seu cliente é e sobre os usuários que visitarão no site. Em seguida, falaremos sobre aspectos mais práticos na escolha de cores para seus designs. Vamos dar uma olhada na preparação das cores para a melhor experiência do usuário 8. Como misturar cores para a melhor experiência do usuário: Há muitos designers que deixam seus olhos julgar uma determinada cor ou paleta de cores será bom para um trabalho específico de Web design. Mas o problema com essa abordagem é o fato de que tantas cores podem parecer lindas. Assim, paletas de cores maney podem parecer apropriadas para esse design específico. Então, como dizer se sua escolha de colar é boa? Existe alguma maneira de julgar as combinações de cores que você escolheu? Bem, provavelmente do Leary. Mas temos que dar uma olhada em algum aspecto fora da teoria das cores, mas prometo que será o mais prático possível. Basicamente, podemos falar sobre quatro tipos fora esquemas de cores, monocromático, complementar e os logotipos e para tentar sótão. Então vamos falar sobre isso para um segundo modelo. O esquema de cores cromático usa uma cor de base e vários tons de tons e situações fora dele. É a melhor escolha se você precisa de um design coeso, mas você pode cair em uma armadilha usando um esquema de cores chato. Aqui, esquemas de cores compostos, às vezes chamados de cortesia de divisão, são baseados em duas cores de tamanho oposto fora da roda de cores. Quando você quiser criar seu próprio esquema de cores complementar, dê uma olhada na roda de cores e imagine que você está desenhando uma ampulheta sobre ela. Essencialmente, você está tirando duas cores de extremidades opostas do espectro de cores, que dá ao seu design mais liberdade do que os esquemas cromáticos motores. Se é consistência que você está procurando em seu design, vá para e logotipo esquema de cores. Dê uma olhada na roda de cores novamente e escolha três cores vizinhas. Esses temas podem criar um campo unificado sem nascer como a cor monocromática torta. Para criar um esquema de cores do sótão tente, desenhe um triângulo cujos lados tenham o mesmo comprimento e escolha as cores nos triângulos. Pontos finais. Isso cria um esquema de cores diversificado, mas equilibrado, com cores igualmente vibrantes. Além desses principais tipos de esquemas de cores, há mais alguns fatores que você deve levar em consideração ao escolher cores para o seu design. Refiro-me à complementação, ao contraste e à vibração. As cores que se complementam se sentam nos pontos de extremidade opostos fora do espectro de cores porque são visualmente significativamente diferentes. É mais fácil para o olho humano distingui-los. É por isso que as pessoas tendem a gostar de massa que desenhos que são fáceis de olhar, que significa que eles fornecem um certo equilíbrio e não forçar o olho a procurar pequenas diferenças entre as cores. Em um esquema monocromático, a complementação é usada nos esquemas de cores Triássico e composto. Uma boa experiência do usuário não pode viver sem o uso adequado do contraste. A escolha mais importante quando se trata de contraste é, claro, a cor grande do chão e do texto. Se você não tiver certeza de quais cores usar, a prática recomendada geralmente é escolher uma cor muito clara para o plano de fundo e uma muito escura para o texto em si, ou vice-versa. vibração é o lado emocional do esquema de cores. mais brilhantes Cores mais brilhantese vivas provocam sentimentos energéticos, enquanto que mais escuras, calmas, calmas, todas as cores relaxaram os visitantes, que os ajuda a se concentrar em outras coisas. Estas são as principais ferramentas teóricas que devem ajudá-lo a fazer mais, bem quarta escolhas para seus esquemas de cores. Claro, há muito mais ferramentas e idéias para usar e escolher em termos de escolha de cores . Mas se você se familiarizar com os que cobrimos, você estará no caminho certo para o manuseio profissional de cores em design gráfico. Como mencionamos emoções provocadas pelas cores, acho que é um bom momento para falar sobre psicologia das cores, que é extremamente importante, não apenas no Web design, mas no design em geral. 9. Como escolher as cores “psicologicamente corretas”: as cores que você escolher para o seu design, criar um humor específico. Você precisa entender a psicologia por trás de cores específicas. A psicologia das cores pode soar excessivamente científica, mas simplesmente descreve os sentimentos e significados que as pessoas costumam associar a cores específicas . Selecionando-os cuidadosamente, você pode reforçar a mensagem geral de um site. Vamos dar uma olhada em algumas das cores base que você provavelmente usará ao projetar seus sites. Vermelho é a cor mais vibrante e agressiva. É o 1º 1 para atrair os olhos dos homens, dependendo de quais cores que o faz com ele pode transmitir poder e coragem, mas também amor e paixão. Uma vez que é usado em muitos sinais de trânsito, ele é freqüentemente usado em sites para alarmar o usuário para informar sobre o perigo. Portanto, é um erro usá-lo para o seu chamado às ações. Tal espartanos ou links laranja é uma das cores mais agradáveis para se olhar. É difícil perder, e pode evocar diversão e atmosfera enérgica. Amarelo é a cor fora, o algum calor e tempo de verão. É também a cor mais visível do espectro, por isso não exagere. Muitas pessoas acharão muito amarelo irritante. É especialmente atraente quando combinado com branco ou preto como ele emite em equipamentos de segurança , ônibus escolares e táxis. Se você perguntar às pessoas sobre sua cor favorita, eles são mais propensos a dizer azul. É agradável olhar para o seu discreto e faz você se sentir confortável. Talvez seja porque é a cor do céu. É também a cor da água, para que as pessoas se conectem azul com refresco e azul de limpeza, especialmente azul escuro, é o mais profissional. A cor, afinal, é a cor do terno presidencial. Então use esta cor quando é profissionalismo que você quer transmitir. Com o seu design, verde é a cor da natureza. Se seus olhos doem ao olhar para uma tela de computador mais longa, olhe para o verde. É uma escolha perfeita e óbvia para produtos orgânicos, ecológicos e saudáveis, apesar de ser uma cor do dólar americano. americano Se você estiver criando um site para uma empresa financeira, não vá ao mar com verde. Em vez disso, fique com o azul escuro, cinza escuro, branco e preto para transmitir confiança e profissionalismo. O roxo é historicamente associado à realeza, que o torna perfeito para marcas de luxo. Além disso, quando combinado com outras cores , perderá parte de sua herança real. Com vermelho, pode se sentir íntimo e romântico. Com brancos e rosa, torna-se brincalhão e infantil. Por que significa pureza e inocência. Mas também é usado para criar minimalismo e sofisticação que é mais provável que você assente em sites. Concentre-se em casamentos, cuidados de saúde e sinais, bem como no preto moderno e mínimo do blog é, sem dúvida, a cor mais elegante. Nunca sai de moda. Isso implica força, luxo, mal, morte e evite. Lembre-se que você pode decidir quais emoções os visitantes sentirão ao olhar para o site que você projetou, que você tenha um papel importante a desempenhar como o designer. Além disso, os significados de cores podem variar drasticamente entre culturas e regiões, por isso é melhor verificar se a cor de Joe é apropriada em uma determinada cultura. Agora você sabe um pouco sobre a teoria das cores, e eu admito que pode parecer esmagador. Felizmente, existem ferramentas que podem ajudá-lo muito na escolha do esquema de cores certo. Então, em seguida, vai dar uma olhada em sete ferramentas fáceis para escolher esquemas de cores à prova de erro 10. 7 ferramentas fáceis para escolher esquemas de cores à prova de erros: escolher cores para o seu próximo design pode ser um processo longo e até mesmo assustador. Para mim, sempre leva muito tempo para encontrar a combinação certa, mas provavelmente todo o seu processo pode ser acelerado com alguns geradores de esquema de cores on-line. Vamos dar uma olhada em sete ferramentas fáceis para escolher nossos esquemas de cores de prova. Vamos começar com Kohler hex um ponto com. Este sinal é ótimo se você é um fanático por cores. Tudo o que você tem a fazer aqui é digitar qualquer cor, valor ou nome de cor para obter uma enorme quantidade de informações possuídas por essa cor mais, claro, esquemas de cores diferentes. Você também obterá exemplos de diferentes usos dessa cor específica, juntamente com alternativas para ela. E se você preferir qualquer fora das alternativas, você pode apenas clicar sobre ele para ver todas as informações necessárias e esquemas de cores. A segunda ferramenta, chamada de ponto de cor, é muito divertida e fácil de usar. Esta ferramenta permite que você crie rapidamente um esquema de cores usando o mouse arrastar para a esquerda e para a direita para alterar a tonalidade, arraste para cima ou para baixo para alterar a luminosidade e role para cima ou para baixo para alterar sua saturação . Se você estiver satisfeito com a cor, clique para salvá-la e repita o processo com outra cor. A ferramenta só mostrará cores que funcionam bem com a que você escolheu antes que você possa repetir o processo quantas vezes quiser. Os próximos dois, chamados Palatable, é particularmente divertido de usar. Você pode escolher sua própria cor ou clicar no botão de antipatia para que o programa escolha as cores para você. Se você gostar, clique em Like e Seve, a próxima cor que deve corresponder à anterior corresponde ao seu gosto. Você também pode remover uma cor específica para encolher toda a paleta na cor. Mente. Você pode escolher suas próprias amostras de cores, e se você gostar delas, você pode olhá-las e bater. Gere para que o programa encontre, imagine cores para as que você escolheu. O que é especial sobre este banquinho em termos de Web design é que você pode escolher a opção de cores do site e a paleta de água que está sendo aplicada a uma página web fictícia. paleta de materiais foi criada principalmente para a finalidade de fundir cores de design de material em seus projetos. Então, o que é design de material? Bem, é o design conceito do Google que é orientado para a experiência do usuário. Ele foi projetado especificamente para funcionar melhor em dispositivos móveis e paleta de materiais está aqui para ajudá-lo na escolha de cores. Se você deseja projetar seguindo os princípios de design de materiais, tudo que você tem a fazer aqui é escolher duas cores e deixar o programa fazer o trabalho pesado para você. Não só criará um esquema de cores para você, mas também mais grandioso. Uma pré-visualização fora do esquema aplicado a uma interface de usuário móvel que você provavelmente já ouviu falar de Can Va ? Mas você já ouviu falar de sua paleta de cores para você? Pode usá-lo para criar esquemas de cores fora de imagens importadas. Dragão imagem na interface e deixar o programa pegar as cores dessa imagem. E por último, mas não menos importante, é o meu gerador de esquema de cores favorito. Isso é totalmente diferente na forma como ele pensa sobre a criação de paletes. Em vez de digitar os nomes das cores, carregar imagens ou arrastar o mouse para criar amostras de cores, digite o evento de tema ou qualquer palavra que descreva seu design. Após alguns segundos, você receberá esquemas de cores relacionados a essa palavra-chave. Muito doce, não é? Todas essas ferramentas geradoras de cores são uma representação humilde de uma área de ferramentas que você pode encontrar online. A maioria deles funcionará praticamente da mesma maneira. Então, se você apenas encontrar seu um ou dois favoritos, isso é realmente tudo que você vai precisar. Em seguida, você aprenderá os fundamentos da topografia em Web design, então não vá embora. 11. Uma super breve história da tipografia na web: quando comparado com os mais de 25 anos de existência da Internet. True Web tipografia parece um jardim de infância. Tem apenas alguns anos de idade. Claro, mesmo os primeiros sites continham texto. Na verdade, o primeiro site não era nada sobre texto, mas a escolha do telefone era limitada, para dizer o mínimo. Antes do nascimento. verdadeiros designers de topografia Web podiam escolher entre cinco tipos diferentes, mas apenas dois deles, verdana e Georgia, foram criados especificamente para uso na Web. Os outros fundos, nomeadamente Aerial, Helvetica e Times New Roman, foram retirados do sistema operacional do computador e carregados em um site. Claro, isso não significa que designers e desenvolvedores tenham concordado educadamente com esse conceito muito limitado de ter apenas cinco tipos disponíveis. A alternativa mais simples era usar imagem como desejos de texto poderia usar os fundos instalados em seus computadores sem dada muita preocupação, licença muito formada em. Mas houve duas grandes desvantagens desse método. Primeiro de tudo, a fim de transformar o design cheio de imagens em um site, você teve que cortá-lo em um número ridículo de imagens em um pedaço de software como Photo Shop. Também não se esqueça que este era o tempo livre. Não é tão rápida ligação à Internet. Assim, o tempo necessário para carregar um lado cheio de imagens foi significativamente maior. Tudo mudou no 2010, quando o Google criou sua própria biblioteca fora dos fundos da Web. Eles são gratuitos, principalmente bem feitos e definitivamente fáceis de usar tanto para designers quanto para desenvolvedores. Isso mudou o mundo da tipografia da Web. Hoje em dia, você encontrará fundos específicos da Web em todas as principais fundições de tipografia, e é difícil imaginar projetar sites. Sem eles. O surgimento do Web design responsivo fez sua tipografia passar por um novo tipo de transformação. O fato de que seu trabalho será visualizado em diferentes dispositivos torna impossível prever como um fundo específico será exibido em um dispositivo específico. No entanto, existem algumas regras básicas para escolher os fundos certos para os tipos certos de empregos, e falaremos sobre eles em seguida 12. Como misturar cores para a melhor experiência do usuário: devidamente escolhidos. Tipografia para o projeto significa que ele ajuda a enviar a mensagem para fora do site. Também é importante lembrar que os tipos de letra, assim como as cores, podem provocar certos tipos de emoções. É por isso que é importante escolher seus amigos com cuidado e com o leitor em mente. As pessoas que visualizam o site passarão a maior parte do tempo lendo o corpo do texto. É por isso que é uma boa ideia escolher primeiro o fundo para o corpo do texto. O tipo de letra que você escolher precisa ser discreto borda um ble e legível. Existem algumas maneiras de escolher fundos com essas características, mas eu prometi mantê-lo o mais regular designer amigável possível. Quero dizer, nem todo designer é super animado com topografia. Então, quais são os recursos de fundos discretos e legíveis para seus projetos de site? Um encontrado legível tem muito fora da altura X, que é a medida vertical de um X minúsculo. Quanto menor a altura X, menor será a última, o que pode fazer com que o tipo se torne ilegível. Por outro lado, demasiada altura X pode tornar as letras M e H difíceis de distinguir. Dê uma olhada na mesma palavra escrita em Lotto e filhos abertos para comparar suas ex-alturas. A segunda coisa a tirar uma nota é como as aberturas estão abertas. Mas o que nossas aberturas aberturas são as lacunas em letras como um C ou s. Quanto mais abertas elas são, mais legíveis as letras se tornam. Você também deve prestar atenção ao A. Remetentes e D centros de passageiros deste último são os traços que se estendem acima da linha média e os centros D são os traços que se estendem abaixo da linha de base. Quanto mais distinguíveis forem, mais legível se torna o texto. A maioria dos tipos de letra Saref são muitas vezes opções ideais para ler passagens de texto mais longas. Devido aos traços visíveis em seus remetentes A e em D remetentes. Sua escolha de tipo de imposto corporal deve conter pelo menos quatro estilos diferentes. Itálico regular. Negrito e negrito itálico. Se o tipo de letra não contiver uma fonte em itálico, os navegadores serão inclinados à força. E se não contiver uma versão em negrito, os navegadores dobrarão a versão normal da frente, tornando o texto difícil nos olhos. A última coisa a tirar uma nota ao escolher tipos de letra para o corpo do texto é o contraste entre linhas finas e grossas dentro das letras. Quando você dá uma olhada em tipos de letra como Play for display, você notará um enorme contraste entre linhas grossas e finas dentro de bandejas separadas. letra como esse podem ficar ótimos em projetos de cabeçalho para blog de moda, mas eles não vão funcionar bem como corpo tributado. Agora você sabe o que os cinco traços cruciais fora de tipos de letra que vai funcionar bem como corpo de texto. Esses tipos de letra terão altura X generosa, aberturas abertas, entradas de bunda distinguíveis e remetentes D, pelo menos quatro estilos e pesos e pequeno contraste entre linhas dentro de escadas. Não, está tudo bem sobre a questão principal ainda permanece sem resposta. E essa pergunta é: Quão grande deve ser o corpo do texto? Bem, a resposta curta é 16 pontos. É o tamanho do texto que os navegadores exibem por padrão. É o tamanho do texto que os navegadores foram destinados a exibir. Geralmente, esse tamanho funciona bem para laptops, desktops e telefones. E quanto à altura da linha, que é claro, significa a distância vertical entre linhas de texto. Uma boa regra de ouro é adicionar seis pontos ao tamanho do telefone de texto do corpo, então, se você estiver usando 16 importância como o tamanho do telefone de texto do corpo, vá com 22 pontos como a altura da linha . Claro, você pode experimentar outros valores de altura de linha. Na verdade, muitos projetos de sangue modernos usam alturas de linha mais generosas, então temos o corpo. fonte de texto é muito bem coberta. Se você seguir todas essas regras, você fará aos usuários um grande favor, tornando a leitura do seu site uma experiência agradável. Você sempre economizará muito tempo e evitará os tipos de letra. Eles não valem a pena terminar no seu projeto. Em seguida, vamos dar uma olhada na criação de captadores de atenção. Falaremos sobre as rubricas. 13. Como escolher as fontes certas para títulos: boas rubricas e sub-rubricas são os elementos de um site de design que atraem os utilizadores e incentivam a leitura posterior. É por isso que é essencial aprender a criá-los corretamente. Se você não tem certeza com tipo de letra para usar em perigo com o fundo do corpo, basta ir para a mesma família de telefone. Por exemplo, se você escolheu areias abertas para ser o fundo corporal, vá para uma versão ousada e ampliada duas ou até três vezes para seus títulos. Isso tornará o design Luke harmonioso e reduzirá o tempo necessário para carregar o site. Essa é a maneira rápida e fácil, mas as chances são de que mais cedo ou mais tarde seu designer assim vai prevalecer e vai pedir-lhe para misturar diferentes tipos de letra. Você vai querer usar um fundo para etiquetas corporais e outros quatro títulos se você quer o melhor de ambos os mundos. Quero dizer, se você quiser ficar no lado seguro e ainda enfeitou a topografia do seu site um pouco acima, você pode ficar dentro de uma super família. Por exemplo, você pode escolher filhos dróides para os títulos e dróide serif. Para o corpo do texto. Você encontrará algumas boas super famílias entre os telefones do Google, por exemplo, Roboto e Roboto Slab Merryweather e Merryweather Sands ou Noto Santas e Noto Saref. A próxima grande questão é, quão grande devem ser os títulos? Primeiro de tudo, lembre-se de que seu lado vai usar um número máximo de seis títulos. Nem todos eles precisam necessariamente ser incluídos no design. Quero dizer, projetos típicos não vão abaixo do título para, mas é uma boa prática desenvolver um conjunto de tamanhos para todos os títulos para colocá-los. Os títulos simples são títulos fora dos componentes dos sites, o título um é normalmente reservado para a marca de pontos turísticos, então, tecnicamente, não precisa ser texto. Ele pode abranger o logotipo da empresa, os títulos que a maioria de seus projetos vai confiar em nossos dois títulos. Esses caras são seus títulos de bloco, títulos de seção principal, etc. Eu recomendaria torná-los com pelo menos 32 pontos grandes, que é o dobro do tamanho de um corpo de texto típico. A linha alta troll de adicionar seis pontos ao tamanho da fonte também se aplica aqui. Todos os outros tamanhos de cabeçalho variam dependendo do trabalho que eles estão fazendo dentro do design. Por exemplo, título três é geralmente usado como título fora elementos cibernéticos. Então seu tamanho deve funcionar bem com todo o conceito de design, em vez de ser apenas uma porcentagem ou algum tipo de derivado fora dos outros títulos. No entanto, se o seu design vai fundo como cabeça em seis, eu não recomendaria torná-lo menor do que o tamanho do corpo do texto em si. Digo, indo menor do que o próprio corpo ataca. Isso é hilariante, não é? Agora você sabe como escolher tipos de letra tanto para o corpo quanto para os títulos. Então agora é hora de olhar para misturá-los juntos. Vamos fazer isso a seguir. 14. Como misturar fontes para títulos e texto do corpo: Sorte para nós. Há uma tonelada de recursos e em lentilhas para mais fácil para os pais. Vamos dar uma olhada em alguns deles agora. O 1º 1 é uma ferramenta incorporada diretamente nos fundos do Google. Quando você escolhe um tipo de letra, vamos dizer areias abertas e clique em Ver espécime. Você verá um colapso na frente. No canto inferior esquerdo, você notará uma lista de emparelhamentos frontais populares. Tudo o que você precisa fazer é escolher um par frontal. E o que deve ser aplicado ao pedaço de texto à direita? Você também pode verificar com a frente vai parecer como título e como corpo de texto. Mas há uma grande desvantagem dessa ferramenta. Você só obtém uma prévia modesta dos fundos em ação. É difícil imaginar apenas olhando para esses pedaços de texto como eles vão se parecer em diferentes cenários. Por exemplo, em uma chamada para cartões Sliders de Action etcetera para ver mais alguns pares frontais. Junto com exemplos estendidos, vá para o telefone iniciar grande simples ponto io. Aqui você vai encontrar alguns Google incomum de Paris que você pode considerar ao projetar o seu próximo site um fora do maior e mais visitado fundo pai, ALS, é par de frente dot co. Aqui você encontrará uma extensa biblioteca fora dos pares frontais divididos em categorias específicas. Transmitir qualquer combinação fora Saref, San Serif e fundos cursivos, e se você gosta de qualquer um dos pares frontais, você pode simplesmente baixá-lo com um único clique. Você receberá um arquivo ZIP que você precisa para descompactar e instalar telefones escondidos dentro. Mas, claro, o maior repositório de pares do Google Front é o próprio Google. Quero dizer, se você apenas Google pares de telefone no Google, você vai encontrar Tom e Thomas fora artigos sobre o pronto feito de peras para você escolher e usar. Então, se você é sempre debatido com você mesmo, quais fundos usar, é uma boa idéia olhar para as sugestões de outros designers que passaram com sucesso por esse processo meticuloso. Uma palavra de cautela aqui Se você notar uma exibição de palavra em um nome de fontes, isso significa que ele é destinado a títulos, não corpo tributado. Então, se um par de fundos sugere um tipo de exibição de fundo para o corpo de texto, isso é apenas mau conselho e ignorância. Portanto, tenha cuidado de que estas são as formas e ferramentas mais comuns para encontrar ótimos pares de telefones do Google . Eles podem ser uma ótima maneira de projetar um site único, apenas muito mente que você não está apenas após o efeito artístico, mas também após a legibilidade. Em seguida, resumiremos brevemente esta seção e nos concentraremos nos três aspectos mais importantes dos fundos bem escolhidos para os projetos do seu site. 15. A fonte perfeita para o design da interface do usuário: Vamos saber que algo está acontecendo e dar uma olhada em três aspectos principais de qualquer fundo que será grato seus projetos Web. Eu acho que agora você entende bem o suficiente para que seus projetos devem servir o público de seus clientes . Se um usuário visitar os sites que você projetou e deixá-lo depois de alguns segundos porque ele ou ela não pode ler nada, isso é um sinal de um design ruim. Os melhores indicadores fora da legibilidade são distinções claras entre letras que podem parecer semelhantes. Por exemplo, tipografia maiúscula I e minúscula L bem escolhida fica fora dos usuários. Espere, por assim dizer. Quero dizer, torna o processo de leitura mais fácil. Mas a leitura não é apenas para a visualização de mensagens em bloco. É também para ler descrições de produtos, ler chamadas Ações nos botões sobre mim seções de sites. Portanto, tipografia é um meio de obter o usuário do ponto A ao ponto B o mais rápido e genuíno possível . Então, dependente do objetivo sites, se é vender, subscrever ou informar fácil de absorver topografia pode ajudar muito ou impedir região desses objetivos, e por último, bom você eu digitar funciona bem em diferentes tamanhos de tela, não importa qual dispositivo ou site está aparecendo na massa tipográfica permanecem legíveis. Algumas pessoas afirmam que os fundos Sarah são mais difíceis de ler em telas de smartphones, em seguida, sem telefones serif. E, de fato, pessoas com distúrbios de leitura ou deficiência visual podem achar menor imposto serif mais difícil ler. Mas se um tipo serif web é bem composto, deve ser fácil de ler, mesmo em parafusos menores, mesmo para pessoas com distúrbios de leitura que já encontraram para escolher. Lembre-se que o propósito de qualquer texto em seu site usado para ajudar seus usuários a alcançar seus objetivos. Considere todo o contexto, vez de apenas confiar em um conjunto de regras quando você faz suas escolhas de design. Até agora, aprendemos bastante sobre cores e tipografia em Web design. Agora é hora de dar uma olhada nos blocos de construção de um site típico. 16. Cabeçalho, marca, navegação e seções de Herói: Ao projetar sites, você deve se lembrar de certos blocos construindo-o. Alguns deles estarão sempre presentes no design, mas alguns deles são opcionais. Vamos dar uma olhada em como um site típico é construído. Vamos dissecar um site começando de cima e movendo-se para baixo. O primeiro bloco de construção de um site seria come Chapeleiro. É um recipiente que geralmente contém as informações Brandon como o logotipo e slogan, algum tipo de sistema de navegação e, por vezes, informações de contato, incluindo asas de mídia social. Um monte de projetos de site, incluindo caixa de pesquisa no cabeçalho também. Normalmente, o Brandon fica à esquerda e a navegação à direita. As informações de contato opcionais e o sistema de busca também podem ir à direita, acima ou abaixo da navegação. Mas esta é apenas uma forma de apresentar o Chapeleiro. Em alguns projetos, especialmente os modernos desenhos de sangue, o conteúdo Heller geralmente fica centralizado, então o logotipo está no centro e a navegação vai abaixo dele, e ele também está centrado. Eu acho que torna o design ainda melhor organizado e mais fácil de entender. O que vai por baixo da urze é opcional. Quero dizer, você pode incluir algo que é chamado de seção de heróis. Então, o que é isso? Basicamente, é um componente que mostra o conteúdo principal do seu lado. Seu objetivo principal é chamar rapidamente a atenção do usuário e explicar o que o site é sobre. Muitas vezes, você pode vê-lo nos insights do mercado onde você é solicitado a inserir seu endereço de e-mail para obter um livro gratuito. Ooh, um relatório ou algo assim. Normalmente, seção Herói contém uma imagem de fundo completa ou um vídeo com sobreposição de conteúdo que topografia é grande e negrito, e na maioria das vezes você vai encontrar algum tipo de uma chamada à ação aqui também. Às vezes, a imagem de fundo completa é compartilhada entre as seções de cabeçalho e herói em resposta a versões do design, especialmente em telefones celulares, uma seção de herói pode se transformar em algo completamente diferente. A imagem de fundo pode ser substituída ou até mesmo completamente removida, tornando o design mais leve. Outra idéia para a seção herói é usar o controle deslizante, que é uma vitrine de imagens ou uma combinação de imagens e texto. Essas imagens são interativas e mudam automaticamente ou na interação do usuário. No entanto, hoje em dia os controles deslizantes estão começando a se tornar redundantes. Primeiro de tudo, eles não são muito s yo amigável. Em segundo lugar, eles são muito pesados e um pouco inúteis nas telas de smartphones pequenas. Mas toda a seção de heróis é realmente opcional. Em alguns casos, ele pode estar realmente obstruindo todo o propósito do site, e eu estou falando de projetos de blocos. Uma loira é principalmente sobre os artigos, então o usuário que visita um site deve ser apresentado com o que ele ou ela está esperando encontrar aqui, que são os artigos exatamente. Claro, os artigos podem ser apresentados de uma maneira mais interessante do que apenas barulho fora do texto, mas vamos falar sobre e sobre outras seções que vão abaixo do herói no próximo vídeo . 17. As seções do centro e da parte inferior do seu design de site: Agora vamos passar o cabeçalho e as seções de herói e parar os artigos e barras laterais . Essas seções parecerão diferentes não só por causa da sua escolha de design, mas principalmente por causa da natureza do site. Eles vão olhar diferente para um blawg diferente site corporativo gratuito ou pessoal. Variações anuais C dentro desses conceitos para tornar as coisas simples. Se não for um blawg, a seção abaixo da imagem do herói parecerá caixas horizontais, separadas por conteúdo e cores que podem conter mixagens de ícones, imagens de texto e links. A principal razão por trás da criação dessas seções de uma maneira específica é torná-las facilmente legíveis em dispositivos móveis. A chave aqui é criar o design do desktop no topo do design móvel. Tudo o que ficará bem em um smartphone também deve ficar bem em um computador desktop em caso de projetos de blocos. Essas seções provavelmente abrangerão os artigos, e eles podem ser apresentados de várias maneiras. Mas um denominador comum é que eles sempre terão os títulos dos artigos que também podem apresentar imagens em destaque, bloquear trechos de postagem, links e outras informações. Às vezes, se é um site de comércio e, artigos podem conter fotos de produtos, descrições preços em outro bloco de construção do site que pode sentar-se ao lado das seções ou artigos é uma barra lateral. Uma barra lateral típica contém informações que, de certa forma, são complementares à mensagem principal fora do site. Pode ser a informação do autor do blog. Feed de mídias sociais mais recentes postagens, tags chamadas para ações , produtos relacionados, etc. A coisa interessante sobre barras laterais é que eles podem sentar-se no lado direito da página no lado esquerdo ou em ambos os lados ao mesmo tempo. Do último bloco de construção central de um site é seus rodapés de rodapé têm realmente crescido ao longo dos anos a partir de simples seções de uma linha contendo principalmente os direitos autorais em folk. Eles evoluíram para caixas sofisticadas com muitos dados adicionais. Rodapés e cabeçalhos são os mesmos em todos os sites e contêm informações que não mudam. Não importa qual página o usuário está visualizando atualmente, eles são um balcão único para todas as informações essenciais que o usuário pode precisar. É por isso que, nas seções de rodapé você verá bios rápidos ou sobre mim links para páginas mais importantes ou gabaritos recentes. Um recente asas de mídia social Commons ou subseções inteiras com feeds de mídia social, como fotos do Instagram. Os rodapés são geralmente facilmente distinguíveis graças ao uso de contraste nas cores em relação a todo o site. Se eles são feitos corretamente, eles fazem todo o site parecer profissional e cuidadosamente projetado. Para resumir, um site típico conterá um cabeçalho. Uma seção herói seções com artigos, às vezes barras laterais e sempre f rodapé. Agora que você sabe como estruturar um site, é hora de olhar para grades. Eles podem parecer assustadores no início, mas eles ajudam na criação de sites simétricos e mais fáceis de codificar, então vamos dar uma olhada rápida neles a seguir. 18. O que são grades e como usá-las: Então, o que é uma grade? Pense nisso como um sério fora linhas invisíveis que ajudam você a estruturar o design do seu site e torná-lo simétrico e mais fácil de codificar. Essas linhas são uma grande ajuda ao colocar os elementos do seu design, não apenas os recipientes principais. A falta de alinhamento é muito perceptível e cria uma impressão de queda. Uma grade típica é construída de unidades, calhas e colunas. Vamos dar uma olhada rápida naqueles que usam uma grade de 12 colunas como um exemplo. As unidades são os blocos básicos de cada grade. Eles se parecem com colunas longas, um pouco estreitas com um pouco de espaço em cada lado deles. As calhas são espaços sentados no lado esquerdo e direito de cada unidade. Não importa se é um centro para unidade direita ou extrema esquerda. Há sempre a mesma quantidade de Ghadir em ambos os lados deles. As colunas têm o nome mais confuso de todos os blocos de construção de grãos. Basicamente, eles são clusters de conteúdo semelhante, espalhados em uma quantidade específica de unidades e tem o dela. A grade mais comum e versátil é uma grade de 12 colunas. É um grande terreno comum. Para designers e desenvolvedores, a maior vantagem é que ele pode ser facilmente dividido em diferentes clusters de unidades. Por exemplo, você pode ter quatro colunas criadas a partir de três clusters de unidade, seis colunas criadas a partir de dois blasters de unidade e assim por diante. A beleza deste sistema é que você pode misturar colunas juntas. Por exemplo, à esquerda, você pode ter um gesso de oito unidades e à direita, um conjunto de quatro unidades e assim por diante. O truque aqui é dividir a grade em colunas cujas algumas serão sempre 12. Você também pode fazer colunas horizontalmente, por assim dizer. Uma seção pode ser dividida em duas colunas, outra em quatro, outra em três e assim por diante. Aconselho a usar a grade o tempo todo. No começo, pode ser um pouco estranho, mas depois de um tempo você ama as grades. Eles irão ajudá-lo tremendamente na criação de projetos coesos e esteticamente agradáveis. Se for mais fácil para você, basta baixar uma versão PSD de uma grade de 12 colunas e usá-la facilmente dentro. Designer de afinidade. Você pode apenas google 12 coluna grão e você vai encontrar muitos e muitos exemplos, mas eu acho que por uma questão de compreendê-lo um pouco melhor, que iria projetar o nosso próprio vamos fazer isso no próximo vídeo. 19. Como criar sua própria grade: Vamos abrir designer e criar um novo documento que vai usar o perfil da Web para a predefinição de página. Eu vou com Full HD e eu vou verificar a opção Creat Art a bordo. Deixarei todas as outras opções intactas. Antes de começar a criar qualquer coisa, certificar-me-ei de que a predefinição de ajuste de design U I esteja ativada. Isso vai me ajudar na criação de uma grade de fatos grande chinelo. Vamos começar com a criação de um ângulo rachado básico que vai ter 1200 pixels de largura. Isso é importante porque vamos criar designs baseados em uma grade de 1200 pixels com e 1200 pixels é o mais típico com sites contemporâneos. Vamos nos certificar de que o retângulo está exatamente no meio da arte a bordo, e agora podemos passar para trazer os primeiros guias. Oprimido o controle, são combinação de teclas no meu teclado e trazer para fora duas guias que irá encaixar em ambos os lados fora do retângulo. Nossa grade vai seguir as diretrizes de bootstrap. Se você não sabe o que é bootstrap, deixe-me apenas dizer-lhe rapidamente que é um framework de desenvolvimento Web que é amplamente adaptado no mundo W W W. Ele usa um sistema de grade de 12 colunas onde todas as colunas têm 15 pixels de tapinhas em ambos os lados . É por isso que agora eu vou divino o retângulo por 12 usando esse painel de transformação, e eu vou me certificar de que para o ponto de partida da transformação está sentado à esquerda. Depois disso, vou subtrair 30 pixels do resultado em retângulo, porque 15 pixels mais 15 deslizamentos grandes de cada lado equivale a 30 pixels. A última coisa a fazer é mover a coluna em 15 pixels para a direita, e a unidade base está pronta. Agora vamos clonar na primeira coluna à direita pressionando e mantendo pressionada a tecla control até que a coluna clonada se encaixe com o original. Depois disso, tudo o que precisamos fazer é mover aquele cara por 30 pixels para a direita. Agora, se nós apenas clonar na segunda coluna à direita, designer irá mostrar-nos a distância entre as colunas e encaixá-los no lugar quando as distâncias são iguais. Tudo o que resta a fazer é pressionar Control mais J no teclado. Para duplicar a última transformação, que era clonagem e movimentação. Precisamos fazer mais nove vezes até termos todas as 12 colunas. Agora você tem sua própria grade de 12 colunas personalizadas para um design de site. Se você quiser, você pode alterar a cor das colunas, alterar sua transparência e, claro, seu tamanho. Uma vez que o design cresce em altura, quando passamos para a parte de design real do curso, você verá essa mesma grade em ação. Mas antes de fazermos isso, vamos dar uma olhada no que está agora em termos de Web design. Vamos descobrir as mais recentes inspirações de Web design. 20. 7 tendências de design da web que governam o mundo do design da web: Nos próximos dois vídeos, vamos dar uma olhada nas tendências modernas de Web design. Isso irá ajudá-lo a entender o design de padrões que os designers estão seguindo nos dias de hoje. Vamos começar com menus que estão escondidos no primeiro Glenn. Eles geralmente se escondem atrás de três barras de chouriço NITEL chamado manual de hambúrguer. Basta clicar sobre eles para ver um sistema de navegação com flash completo. Se você acha que esta é uma maneira de imitar os menus de APP móvel, você está absolutamente certo. Uma vez que cada vez mais pessoas estão navegando na Web usando seus smartphones, faz com que o Papai Noel transfira parte dessa experiência para o site desktop. Os designs, um dos benefícios da navegação oculta, é que ele cria mais espaço na página principal. Ele permite que os conteúdos principais sejam mais destacados. Outro benefício do menu de nome dele é o fato de que você pode combiná-lo com um menu tradicional se esse design precisar dele. Se você tem muitos lugares para levar o usuário, você pode ocultar alguns deles em um menu e mostrar outros no menu visível. Design sábio menus móveis muitas vezes usado cores de fundo contrastam com o esquema de cores geral do site, tornando-o para se destacar do resto. O texto vincula o contraste de cores com o plano de fundo para facilitar a navegação. Parece que os usuários cresceram acostumados a ver os sistemas de navegação como simples três linhas que precisam ser coletadas para ver o que está escondido por baixo. É por isso que você pode experimentar livremente com hambúrguer. Manu está em seus projetos. A experiência do usuário contemporânea está mudando lentamente de visuais duas palavras. É por isso que a tipografia está desempenhando um papel maior do que nunca. Mas o que significa tipografia grande e ousada? Bem, isso certamente não significa que você absolutamente deve usar apenas versões em negrito do tipo e configurá-lo para o tamanho mais alto possível. Isso significa que muitos projetos têm uma quantidade decente de espaço para texto limpo e conciso bem no meio de uma determinada seção. O exemplo mais óbvio disso são, claro, as ações do herói. Com grande tipografia sobre imagens de fundo da pista, o UX moderno muda para slogans que são limpos do tamanho e úteis, o que significa que no futuro, tipografia é papel no design será maior do que nunca. A revolução do smartphone, sem dúvida, mudou. A forma como as pessoas interagem com o mundo da Internet. Mas há um aspecto dessa revolução que muitas vezes é omitido, e que é realmente importante para os designers norte-americanos. Até recentemente, o sistema operacional principal costumava ficar online com o Microsoft Windows. Mas agora é o Android do Google, e o Google surgiu com seu sistema de design, chamado design de material e luz de design de material. É por isso que os designers que querem criar um perfeito você eu experiência para os usuários mão para usar visuais de design de material. Ideias nos Web designs. Design de material não está longe em um design plano Hanson. Ele também se concentra na simplicidade, mas adiciona um toque de três dimensionalidade. Se você quiser usá-lo em seus designs, você ficará feliz em ouvir que ele vem com todo um espectro fora de suas ferramentas, cores, topografia, interações, etc. Você pode verificá-los permitidos sobre o material que eu devo. Sítio Web. Não há como negar o fato de que o crescimento e o desenvolvimento mais rápidos estão no mundo dos dispositivos móveis . Tem repercussões significativas para Web projetado para, com ênfase na palavra design. mudança de comunicação visual iniciada pelo design da APP móvel está fazendo seu caminho para o Web design , bem como, e tudo começou com a mudança de logotipo do Instagram. O design contemporâneo geralmente usa cores mais e mais brilhantes. Juntos, ele tem Grady INTs estão de volta, mas eles são consignos e um pouco sutil. Muitas vezes, eles são orados com ícones simples de design plano e tipografia proeminente. O que é interessante? Radiance estão fazendo seu ícone do dedo do pé caminho e design de logotipo também. Mas como sempre, no caso de Grady INTs, você tem que ter muito cuidado para não ir ao mar com eles. Felizmente, existem ferramentas on-line que podem ajudá-lo a criar ingredientes de boa aparência para seus projetos Web . O melhor exemplo é uma ferramenta chamada U I Grady ints dot com. Aqui você encontrará uma fantástica coleção de lindos Grady INTs, juntamente com os códigos de cores para Easy Implementation, um dos elementos de crescimento mais rápido no design do site. Leste. O uso fora de vídeo de imagens em movimento em tela cheia muitas vezes usado como fundos em vez de imagens para pop-ups e vídeo incorporado de vídeo de mídia social é um deve ter quando se trata de conteúdo. O uso mais difundido de vídeo é que ele está sendo exibido como o fundo nas seções de heróis dos sites. A melhor maneira de usar o vídeo neste formato é torná-lo complementar à mensagem e um apelo à ação que estão sendo colocados sobre o vídeo. Mas às vezes, especialmente em sites pessoais, os vídeos são desobstruídos por qualquer visual. Eles são meio fora apresentação fora do proprietário do site. Há também vídeos que, de certa forma, imitam imagens estáticas. O movimento do site é limitado. Imagine vento soprando nas árvores, tornando-os perfeitos como vídeos de fundo, mas acrescentou que algo especial extra para o design sem ser distraído. Internet diz que o vídeo é o rei nos dias de hoje. É bem possível que em algum momento do seu design, carreira seja solicitada a projetar um site que esteja usando vídeo em algum formato. É por isso que é uma boa ideia dar uma olhada mais de perto nessa tendência. Cada vez mais designers aceitam o fato de que eles realmente precisam pensar sobre seus projetos como sendo vistos com mais freqüência em telas de smartphones em vez de laptops. Isso implica uma mudança total no desenvolvimento de seus projetos. A versão desktop do site torna-se Onley, uma derivada de seu original móvel. Esse designer deve perguntar a ele ou a si mesma. Uma questão fundamental vai ficar bem apenas smartphone. Mas a questão pode eventualmente mudar no futuro com o desenvolvimento fora wearables. Talvez seja hora de começar a nos perguntar, Será que ficará bem em um smartwatch? O que nos leva ao último aluguel da nossa lista, que são cartões que eu desenho. A idéia por trás dos cartões é encher o conteúdo em pequenos contêineres para torná-lo dispositivo cruzado . De smartwatches a desktops grandes. Cada contêiner é um conjunto de informações sobre uma idéia específica. A interface é simplificada e facilmente compreensível. Esta abordagem também é usada em muitos blogs modernos, onde um artigo na página de destino tem seu próprio módulo. Estas são as sete tendências mais importantes em Web design hoje. É uma boa idéia estar ciente deles, pois eles não são apenas sobre visuais, mas eles são conceitos bastante completos fora da entrega de conteúdo eficaz para os usuários. Em seguida, você vai dar uma olhada em alguns lugares ao redor da Web onde você pode encontrar alguma grande inspiração Web design 21. Onde encontrar a inspiração certa para seu próximo design: Neste vídeo, vamos dar uma olhada em alguns lugares ao redor da Web onde você vai encontrar grande inspiração seu próximo projeto de Web design. O primeiro site que eu recomendaria é chamado de palavras ponto com soletrado com um duplo triplo você para www. Aqui, você encontrará muitos exemplos de design diferentes coletados em categorias como ilustração, blogs corporativos, etc. Se você gosta de um design específico, você pode visitar o site de origem e dar uma olhada em como eles são construídos. O que, se houver, tendências lá seguindo e simplesmente aprender com o melhor segundo site que eu recomendaria é um mercado tema WordPress chamado tema floresta dot net. Aqui você vai encontrar não apenas temas WordPress, mas também projetos laterais codificados HTML. É um enorme repositório de desenhos diferentes para sua inspiração. Você pode escolher entre muitas categorias diferentes, e você também pode visualizar como um determinado design funciona no mundo real. Você também pode visitar Web design inspiração dot com aqui, mesmo também apenas tags e categorias específicas que você deseja classificar seus projetos por. É um grande recurso de vários projetos. Eu acho que é a variedade que é o aspecto mais importante deste repositório Web design vilified lotes e lotes fora Web design inspiração repositórios em torno da Web. Se esses três não são suficientes para você, embora eu ache que, para começar, eles vão fazer muito bem, você pode apenas Google Web design, inspiração e imenso no mundo do Web design. Eu acho que agora você tem apenas nenhuma lista suficiente para começar a criar seus próprios projetos. Você conhece os princípios que conhece, as tendências e onde procurar inspiração. A próxima parte é começar a usar o designer de afinidade para fazer suas idéias ganharem vida. 22. Cada design de site precisa de andaimes: a partir de um típico ponto de vista de designers ansiosos. Criar um quadro de arame para um design de site é tão chato quanto redundante. Bem, isso não é verdade. Na verdade, um quadro de arame pode ajudar tremendamente a acelerar seu fluxo de trabalho, e isso pode economizar muito tempo. Muitas idéias que parecem ótimas em sua cabeça quando você está imaginando eles tendem a parecer mal quando colocado em uma tela de computador. E confie em mim, eu sei disso por experiência própria, mas o que é uma armação de arame, e por que estou fazendo um grande negócio sobre isso? Quadros de fio são versões esquemáticas de sites que ajudam na visualização dos blocos de construção dos sites. Há uma tonelada off plugins, ferramentas on-line e recurso é pago e gratuito que para ajudá-lo na criação de arames. Mas em apenas um segundo, vamos projetar nossa própria biblioteca de arame, ou pelo menos os elementos essenciais de um quadro de arame, e então vamos importá-los para nossa biblioteca de ativos. Mas primeiro, vamos dissecar a idéia de enquadramento de arame e sua aplicação prática. Para começar, você pode querer criar caixas simples que correspondam aos elementos dos sites. É uma boa idéia colocá-lo contra um bem que você já está familiarizado com esta fase preliminar é a maneira mais básica de sair. Construindo um andaime site Pense nisso é um simples rabisco que é suposto para mostrar-lhe se o que está em sua cabeça vai ficar bem no papel ou na tela. As caixas mais típicas seriam representando uma seção de heróis de navegação Brandon Element, imagem , banners , rodapé, etc. O próximo passo seria construir para a hierarquia de informações com o tipo. Nesta fase, sua escolha de fonte não é tão importante quanto o uso de diferentes tamanhos de fundos para mostrar as diferenças de importância dos elementos dos sites. Normalmente, os elementos mais importantes serão apresentados para usar em um tamanho de fonte maior, e os elementos menos importantes serão apresentados usando um tamanho de fonte menor. próximo passo para enfatizar a importância dos elementos dos sites é usando diferentes tons de cinza. A regra geral diz que cores mais escuras significam mawr. Elementos importantes e cores mais claras significam elementos menos importantes. Então é assim que um quadro de arame típico se parece. Eu acho que é uma boa idéia ter sua própria biblioteca de arame para que você possa usá-lo sempre que você estiver projetando um site. O Affinity Designer permite que você crie seus próprios elementos de enquadramento de fio e os coloque em grupos separados de ativos. Vamos dar uma olhada no processo de construção desses elementos em afinidade. Designer. 23. Construir seu próprio wireframe no Designer: ao construir seu próprio sistema de arame, eu acho que você deve começar com os elementos que você é mais provável de estar usando em um cenário típico de Web design. Quero dizer, se você quiser você pode um credo, todos os elementos que você pode imaginar. Mas eu acho que se você criar os elementos essenciais primeiro, teremos uma ótima base para construir e expandir armações de arame. Mas quais são esses elementos essenciais? Eu acho que vamos começar com uma marca no bloco de navegação, junto com um menu de hambúrguer, um bloco de seção herói gabar-se, um texto horizontal e divisor de fundo. Icahn Sidebar e um rodapé. Hoje em dia, pode ser uma boa idéia criar um fio de vídeo de elementos para por motivos com os quais você já está familiarizado. Então, vamos construir nossa biblioteca de arame essencial. Quero que considere isso como um ponto de partida para construir sua própria biblioteca. Quero que aprendas o processo e a lógica por trás disso. Isso permitirá que você crie seus próprios quadros de arame extensos. Eu tenho um documento Full HD simples já criado, mas honestamente, quaisquer documentos, sinais que me permitissem criar sua obra de arte confortavelmente ficará bem. Note, no entanto, que eu não decidi criar um quadro de arte para este tipo de trabalho de desenho. Não acho que um quadro de arte seja necessário. Eu também vou me certificar de que o U I Snap em Leste predefinido ligado. Vou começar com a criação de um bloco de imagem. Este será usado em muitos elementos, então eu acho que é bastante lógico começar com ele. Vou pegar a ferramenta de retângulo e criar um retângulo no painel de transformação. Vou inserir 16 para com e 94 altura, e eu estou fazendo isso porque 16 por nove proporção é a taxa de aspecto da tela mais típica. E as imagens em um site geralmente são exibidas dessa maneira, assim como os vídeos. Claro, é muito pequeno tubo utilizável, então eu vou olhar suas proporções no painel de transformação e aumentar o tamanho fora do retângulo. Mas o fato de que começamos com o 16 por nove pixels fará com que o novo inimigo retângulo que 16 por nove proporção. Eu não quero que nós tenhamos nenhum traço, mas eu quero ter um cinza bem mais escuro, Phil uma vez que é criado, eu vou desenhar duas linhas que vão indicar que para isso, na verdade, é um elemento de imagem. Então eu vou pegar a caneta tal e colocá-lo no modo de desenho de linha. Eu vou alegria, linha simples que vai ter um golpe branco de um ponto. E sem Phil, claro, vou baixar a opacidade para cerca de 25 a 30%. Por último, vamos copiar a linha e baseá-la de volta. Então vamos virar horizontalmente, usando o painel de contexto. Tudo o que resta a fazer é trazê-lo para nossa biblioteca de ativos. E, a propósito, se você não tiver a biblioteca de ativos ativada, basta ir para Exibir e, em seguida, Studio e escolher ativos no painel de ativos. Vou criar uma nova categoria, que vou renomear como quadro de arame. Agora eu posso apenas selecionar a imagem e no menu do painel escolher e da seleção para começar a construir sua biblioteca. E assim, criamos o primeiro elemento, e já começamos a construir a biblioteca. Vamos continuar, entanto, no próximo vídeo 24. Vamos continuar a criar a biblioteca: Vou começar criando um elemento de anel de esposa de vídeo. E para isso eu vou clonar o elemento de imagem e me livrar das linhas internas. Agora vamos criar um símbolo de botão de reprodução para isso. Vamos pegar sua ferramenta triângulo e criado triângulo que teremos que girar e re tamanho um pouco. Quando isso acabar, vai dar um Phil branco. Solte a opacidade para 25% e alinhe-a com o retângulo. Vamos agrupar esses caras para que agora possamos adicioná-los à nossa biblioteca de quadros de arame, assim como adicionamos ao elemento de imagem. Agora vamos criar uma imagem e texto elemento combinado. Mais uma vez, vou reutilizar a imagem que já tenho, mas vou adicionar um título e elementos de trecho a ela. Para isso, vou pegar a ferramenta de texto do quadro e desenhar uma caixa de texto que será tão Zweig quanto a imagem. Eu não vou corrigir nenhum texto em, mas eu vou usar a opção inserir texto de preenchimento em vez disso. Claro, é uma boa idéia fazer o título parecer um título real, então eu vou mudar a fonte junto com seu tamanho e estilo. Vou cloná-lo agora e mudar a família da frente, estilo do Sonny e a liderança também. Assim, com esta parte pode parecer mais um trecho de post Blawg. O benefício de criar este elemento dessa maneira específica é que depois de transformá-lo em um grupo e, em seguida, em um ativo e, em seguida, arrastá-lo para a página, eu não posso redimensioná-lo e deixar o software preencher os quadros de texto com texto. E ainda assim, se eu quiser, posso redimensionar os quadros de texto, encolher ou expandir o título e o trecho de texto, e isso é muito útil. Próximo elemento irá criar é que eles vão logotipo novamente. Vou usar o elemento de imagem, mas desta vez vou transformá-lo em um quadrado. Eu também vou adicionar uma palavra no lado direito dela. Agora vou agrupar esses caras e os transformei em um recurso. Em seguida, criará um sistema de navegação. Bem, isso é mais fácil em um pedaço de editor de texto, em seguida, duplicá-lo. Eles são divertidos de usar para o Manual Inc não deve ser muito grande nem ousado. Vamos também criar um menu de hambúrguer. E essas são as três linhas horizontais que cobrem o homem principal. Você se lembra? Ok, ótimo. Vamos agarrar a caneta tal e, em seguida, certifique-se de que está no modo de linha criou uma linha simples que vai ter um dois pontos alguém para acidente vascular cerebral escuro e nenhum Phil. Quando isso terminar, vamos duplicar a linha duas vezes e transformar nosso manual de hambúrguer em um recurso. Nossa próxima ordem de negócios é criar uma seção de heróis, e isso nos dará a oportunidade de aproveitar uma grande flexibilidade quando se trata de criar ativos dentro de um designer. Eu estava preso em emprestar o ativo de imagem e em grande, e isso um pouco. Em seguida, vamos criar um cabeçalho grande e negrito escrito em contraste, em cores claras, seguido por algum corpo de texto menor. O último sotaque aqui seria adicionar uma chamada à ação. Então vamos criar um botão usando a ferramenta de retângulo e a ferramenta de texto, é claro, claro, que irá agrupar os elementos do botão e, em seguida, agrupar peças antigas exceto para o fundo, mas uma linha tudo bem para o meio da imagem de fundo. Se nós sabemos grupo todos esses elementos enfraquecer, transformá-los em um elemento de arame herói, mas se nós mantê-los separados, podemos inseri-los para os ativos separadamente, que nos permite ter um ativo herói e separar elementos como um título inferior qualquer peça fora do corpo tributado. Bem, isso é muito útil, não acha? Com todos esses elementos, agora podemos criar um item de recurso. Você pode arrastar o ativo de imagem para o painel de colagem e, em seguida, o título e seu corpo tributados. Agora é apenas uma questão de transformar o elemento de imagem em um quadrado e mudar na frente do título e corpo tributado para fazer isso enquanto o elemento de quadro funciona. - Não , temos praticamente todos os elementos que precisamos para montar um site de arame. Ocasionalmente, teremos que usar a ferramenta de retângulo para criar um plano por concessão, e se você quiser, você pode criar elementos de arame retangular. Mas vou ficar com os blocos essenciais e criar fundos à medida que vou. Então, vamos realmente fazer isso. Vamos dar uma olhada na adição de fio de elementos para criar uma visão esquemática do nosso site 25. Como usar os ativos para criar um wireframe: Uma vez que todos os seus ativos são criados, eles estão prontos e esperando que você os use para construir sua estrutura de arame. Neste vídeo, vamos dar uma olhada em como praticamente usar seus ativos para criar um quadro de arame. O processo é super fácil e agradável. Eu recomendaria usar uma grade como base para sua armação de arame. É uma boa ideia simular um cenário de Web design real ao criar um quadro de arame. No entanto, se for um quadro de arame muito, muito preliminar, se você quiser apenas tirar a sensação do projeto, você não precisa absolutamente usar a grade. Vamos começar com a criação da seção de cabeçalho. Vou trazer o Brandon e os blocos de navegação e posicioná-los corretamente, deixando uma quantidade decente de espaço em branco em cima e em baixo. Não, ele é rapidamente criar um fundo claro para o nosso chapeleiro primeiro todos os elementos de cabeçalho e inicializou a opção de inserção atrás de seleção na barra de ferramentas. Agora, quando eu começar a criar ângulo ereto esticando toda a página, você pode ver que ele é inserido atrás dos elementos mais pesados. A última coisa a fazer seria alinhar tudo bem ao grupo central todos os elementos e renomeá-los como Cabeçalho No. Vamos entrar na seção de heróis do site. provavelmente este ativo vai precisar de algum ajuste fino. Por exemplo, você pode querer expandir ou contratar. Você pode querer mudar a posição dos elementos e talvez o tamanho do telefone, também. A beleza fora para trabalhar com ativos em effin em designer é que você pode facilmente selecionar elementos dentro de grupos clicando duas vezes sobre eles e alterá-los como você mudaria objetos regulares. Vou começar a próxima seção adicionando outro título e um subtítulo. Esses caras também podem precisar de alguns tweets, dependendo de como você os criou antes. Eles podem precisar de sua cor de fundo para ser alterada. Tamanho ajustado. Talvez nós vamos querer mudar o alinhamento da esquerda para o centro lá realmente flexível e em efeito. Se você decidir que pode precisar deles na biblioteca de ativos de quadro esposa, basta agrupá-los e adicioná-los ao painel de ativos. Sim, você pode criar ativos diferentes fora de ativos já existentes. Ninguém liberando alguns itens em destaque. Vou criar duas linhas com quatro itens em cada um deles Eu vou trazer em um dos itens em destaque e ajustá-lo até que pareça exatamente do jeito que eu queria. E como eu quero ter quatro deles em uma fileira, um item não pode exceder três colunas do nosso grande. Uma vez criado, vou apenas duplicar ele tenta para a direita e, em seguida, todos eles uma vez para o fundo. Por fim, vou selecionar todas as peças, agrupá-las e desenhar um fundo abaixo delas, usando a mesma técnica que com o fundo para o cabeçalho. Agora posso renomear esta seção e chamá-la de algo como destaque. Mas você pode nomeá-lo qualquer coisa que tornaria esta seção facilmente reconhecível. A próxima seção que podemos criar poderia ser um de nosso tipo blawg de uma seção. Então vamos trazer o cabeçalho da seção e ajustado dele para os gabinetes de bloco, podemos usar os itens em destaque, elementos ou artigos blawg. Esta é apenas mais uma prova de quão flexível este programa é. Quero dizer, você pode pegar o item em destaque, fazer a imagem ir à esquerda e o texto à direita enquanto preserva int como um ativo. Eu quero ter apenas para bloquear gabaritos em cada linha, modo que um post não pode exceder seis colunas. Eu também quero ter que levantar orgulho, que possamos apenas clonar o canto superior. - Claro , como antes, podemos saber agrupar todas essas peças e criar um fundo um pouco mais escuro para a ação blocos . Você poderia até experimentar colocar elementos claros em um fundo escuro, mas por enquanto, eu vou mantê-lo simples. - A última parte vai criar é a seção rodapé. Os rodapés geralmente têm um fundo distinto e são feriados bastante grandes. Eles podem manter o logotipo e o slogan da empresa. Alguns links, incluindo Social Media, Ling Instagram, feeds, extractos, etc. Desta vez vou começar com a criação de um fundo mais escuro no qual vou colocar os elementos do rodapé no lado esquerdo. Vou adicionar o bloco de imagem que representaria o logotipo. Ele pode precisar de alguns ajustes de cor, por isso é facilmente visível contra o fundo mais escuro abaixo dele. Vou adicionar alguns tributados que poderia ser o extrato sobre EUA para algumas informações adicionais. Quero dizer, é apenas uma armação de arame, então estamos apenas testando a colocação de certos elementos, não tentando criar o design final. Eu vou criar uma variação de no instagram feed extrato no passeio, e eu vou construí-lo, usando o ativo de imagem que eu posso redimensionar ligeiramente se eu precisar, e eu vou criar duas linhas de imagens aqui Sob ele, eu irá adicionar outro pedaço de texto e alguns pequenos elementos de imagem representando as mídias sociais. Do Aiken. - A última etapa seria agrupar todos os elementos de rodapé e nomear o grupo recém-criado corretamente. E lá vamos nós. Criamos o nosso próprio quadro de arame. Queria mostrar-lhe o processo de construir uma estrutura de arame com ativos que você mesmo pode criar. Imagine o quão intrincados seus quadros de esposa podem ser se você gastasse algum tempo projetando ativos bonitos. À medida que você ficar bom na criação de quadros de arame, você adicionará mais e mais elementos à sua biblioteca. E em breve você terá todos os elementos necessários para criar quadros y, com zero a pouco ajustes necessários. Mas se você não sentir vontade de criar suas próprias bibliotecas de um quadro de fio, você sempre pode procurar algumas ferramentas e recursos estão on-line. Eles têm suas limitações, mas é uma boa idéia saber como eles funcionam e verificar. Se você quiser usá-los em seu próprio fluxo de trabalho de Web design, e nós os exploraremos em seguida 26. Wireframing online: Há um monte de ferramentas, e recurso é on-line que você pode usar para construir seus próprios quadros esposa e protótipos. O problema com eles é que a maioria dos que você provavelmente encontrará são pagos . Eles têm algumas capacidades livres limitadas. Mas para descobrir seu verdadeiro potencial, você tem que pagar na maioria dos casos, uma taxa recorrente. Há um. Até que você pode querer dar uma olhada no que é chamado wire frame dot cc, e ele permite que você crie rapidamente protótipos fora de sites. Se você quiser usá-lo, eu recomendo começar com a alteração de algumas configurações. Em primeiro lugar, você pode optar por exibir um grão 12 Colin, que sempre é uma boa idéia, e em segundo lugar, eu recomendo alterar a largura e a altura do quadro de arame na parte inferior da guia de configurações. A única coisa que você tem que fazer para começar a construir uma esposa a partir daqui é começar a desenhar. A ferramenta mostrará uma caixa de opções para escolher. Você pode transformar o seu desenhado em uma caixa dext imagem lista parágrafo, etc. Você pode agrupar os elementos que você criou e até mesmo organizá-los corretamente, se necessário. Uma grande desvantagem das fezes que só parece ser completamente livre é que, a fim de compartilhar ou para baixo com o quadro da sua esposa, você teria que se inscrever para o seu serviço. E se você quiser fazer isso serão meus convidados. Mas há outras maneiras de acelerar a armação do fio em processo. Se você google modelos de quadro de fio livre, você vai encontrar um monte fora quadro de fio livre. O recurso é baixar e utilizar em suas próprias bibliotecas de arame. Quero dizer, se você não sente vontade de construir o seu próprio, vamos realmente dar uma olhada em criar uma biblioteca de arame a partir desses elementos prontos antes de começarmos. Eu acho que vale a pena gerenciar que, se o arquivo que você baixou for um arquivo PSD, você ficará feliz em descobrir que abrir é um pedaço de bolo para o designer. Mesmo que seja um arquivo ilustrativo. Ofendido, o designer abrirá sem um segundo de hesitação. A maioria destes pronto fez um wire frame repositórios irá conter elementos que você pode usar para construir suas próprias bibliotecas. Você pode grandes aqueles que você gosta e fazê-los juntos para atordoadores. Agarrou o painel de ativos e criar uma nova categoria. Renomeie ao seu gosto. Mas graça nome um pouco descritivo. Não. Você pode apenas um arrastar e soltar os elementos que você precisa e gosta para a biblioteca para que você possa usá-los mais tarde. Claro que todo este processo é opcional. Quero dizer, se você quiser, você pode apenas deixar o arquivo como está e copiar e colar os elementos que você precisa sobre o seu arquivo de arame. Eatherly funciona, e será sua tarefa decidir qual deles se adapta ao seu fluxo de trabalho específico. Eu, no entanto, recomendo usar o painel de ativos, pois você sempre pode mantê-los à mão em seu espaço de trabalho, e você não precisa procurar aqueles enquanto de arquivos de quadro de fio. Então eu acho que nós temos o arame e a matéria muito bem cobertos. Podemos passar para outro aspecto importante em nos prepararmos para começar a projetar, que é escolher e otimizar imagens, e eu vem 27. Vamos falar sobre imagens e ícones: é difícil imaginar um site sem imagens e outros elementos gráficos. É verdade existem alguns projetos que usam a tipografia Onley, mas eles são projetos muito, muito neech. As chances são de que em sua carreira como Web designer, você estará usando imagens em seus projetos e você estará usando-as muito. É essencial saber como lidar com eles em seus projetos. Então vamos explorar o assunto agora. A maneira mais fácil de adicionar uma imagem em afinidade. O designer é dito para usar o lugar. Ferramenta de imagem. Depois de clicar nele, você será solicitado a selecionar uma imagem que deseja colocar. É um, a propósito, o mesmo que escolher o comando place no menu de arquivo. Se você estava usando uma versão mais antiga fora do ilustrador antes dado designers tiro, você provavelmente tem sido frustrado silencioso muito sempre que você quer que ele para cortar uma imagem porque , bem, não havia onde você poderia fazê-lo sem usar uma máscara de recorte. Um designer de móveis vem com uma colheita fatorial. Vai que pode cortar imagens de forma fácil e rápida. Tudo o que você precisa fazer é pegar a caixa delimitadora por qualquer uma de suas bordas e simplesmente arrastar. Mas isso não é tudo que você pode reposicionar livremente a imagem dentro da nova caixa delimitadora, e uma vez que você está satisfeito com a operação, você pode apenas rapidamente proteger apenas esta imagem usando a função de exportação no Aqui. Você pode escolher quais formatos de arquivo você deseja ir com, mas eu recomendaria manter os arquivos. Ex-nativo. Quero dizer, se for uma picareta J, basta escolher J. Pick e talvez baixar a qualidade para cerca de 75%. Este será um bom limite entre um tamanho de arquivo razoável e uma boa qualidade de imagem. Basta lembrar de escolher a seleção sem fundo como a área que você deseja exportar quando as imagens mais antigas estiverem prontas, aconselhar você a compactá-las ainda mais. É extremamente importante para a velocidade geral da página, que afeta a pesquisa e otimização em palavras simples que o Google gosta. Quando as imagens na página são bem otimizadas, há muitas ferramentas on-line que podem ajudá-lo a otimizar suas imagens. Sobre o que eu tendem a usar mais é chamado minúsculo J p g dot com para tirar proveito de suas capacidades de compressão. Simplesmente dragão imagem na janela e letra que ferramenta fazer a sua magia. Agora vamos falar brevemente sobre lugares na Web onde você pode encontrar imagens de boa qualidade gratuitamente . É uma situação perfeita quando seu cliente quer pagar por imagens de ações. Mas, felizmente, existem repositórios online com boas imagens gratuitas que você pode sugerir como uma alternativa. Meu lugar favorito para fotos stock grátis é o sinal chamado pixels dot com. É uma grande fonte de fotos extraídas de outros repositórios de fotos, então você não precisa navegar em todos os serviços de fotos STUCK para encontrar imagens que você está procurando. Basta digitar a palavra-chave que você precisa e escolher entre dezenas de imagens de alta qualidade. Quanto a Aikens, Onley tendem a usar ícone plano ponto com o mais. É um ótimo site gratuitamente para usar ícones de alta qualidade para o seu projeto de Web design. Quando você encontrou uma Nikon, você gosta. Você pode colocá-lo em uma coleção ou visualizá-lo, e se você quiser, você pode baixá-lo neste local com conselhos. Choosen s v. G. Quanto ao tipo de arquivo. É um tipo de arquivo de fator padrão que funcionará muito bem em qualquer tipo de aplicativo de design. Eu também visitar livre pick dot com, que é um enorme repositório fora de todos os tipos off recurso de design é imagens, ícones. Pia são esses vetores, etc. Não, porém, que alguns deles são pagos. Então é assim que você pode trabalhar com as imagens dentro do ajuste no designer. É claro que, à medida que avançamos para a parte de design do curso, você verá alguns exemplos reais de manipulação de imagens em um cenário de Web design. Por enquanto, eu só quero que você lembre que você pode importá-los com a ferramenta de imagem local. Você vai cortá-los com a ferramenta de corte fator, e você pode exportá-los usando o comando export. Vamos agora passar para a última parte do estágio de preparação, que é a criação de estilos de texto. 28. Como criar estilos de letra no Affinity Designer: estilos de texto em designer ofendido são uma ótima maneira de acelerar um processo de Web design. Se você é um fã desligado, altere os conjuntos de fontes muito rapidamente. Visualize diferentes variações do seu design. Você vai adorar estilos de texto. Como criar um estilo de texto com base nas características de um pedaço de texto que você já digitou. Basta selecionar esse texto e, em seguida, ir para o painel de estilos de texto e escolher o estilo que deseja criar. Ter uma caixa de diálogo que aparece imediatamente permite ajustar todas as opções de caracteres e parágrafos que você pode acessar nos painéis de caracteres e parágrafos. É melhor começar com a inserção do nome dos estilos, e eu sugiro torná-lo um pouco descritivo. Seu estilo de texto será mostrado no painel Estilos de texto, portanto, dado um nome facilmente distinguível, tornará o processo de design mais rápido. Uma boa técnica de produção é nomear seu estilo com base em suas características mais importantes. Se, por exemplo, você quiser que o estilo de texto use o fundo Roboto Condensed, tenha ah, somente caracteres verdes com 32 pontos de tamanho colocarão essa informação como o nome do estilo de texto . Quando terminar seu texto, estarei pronto e esperando que você o aplique a qualquer pedaço de texto que desejar. O processo de criação de estilos de texto no designer Afinitor é realmente flexível. Você não precisa absolutamente ter alguns criados anteriormente tributados para criar um estilo de texto fora dele. Você pode simplesmente pressionar qualquer um dos botões de estilo de texto saudação no painel de estilos de texto e escolher seu tipo de desejo na lista. E se você precisa mudar algumas coisas sobre seu estilo de texto, mas você foi para preservar o original, é melhor simplesmente duplicar e para o estilo de texto duplicado, clique com o botão direito sobre ele e escolha duplicar. A mesma caixa de diálogo irá aparecer onde você pode inserir os ajustes que você ish sem um fato no estilo de texto original. Por padrão, o estilo de texto duplicado terá um Suffolk numérico. Então, novamente, é uma boa idéia começar com a mudança de seu nome para excluir um estilo de texto clique com o botão direito sobre ele e escolha, exclua ou pressione o lixo que eu considerei no canto inferior direito do painel. Criar e gerenciar estilos de texto no designer Afinitor é um processo simples, e por isso é ensolarado em estilos de texto para o seu texto. Tenho certeza de que uma vez que você começar a criar muitos projetos de sites fora, você vai achá-los essenciais no seu dia a dia. Estilos de texto de rotina concluíram essa fase de preparação do processo de Web design. Agora você tem o conhecimento sobre todas as ferramentas e técnicas que são essenciais para projetar um site na afinidade Designer. Então vamos começar a parte de design. 29. A visão geral da peça de design: bem-vindo ao design de parte do curso. Nos próximos vídeos, você aprenderá a projetar esta página de destino usando afinidade, designers, ferramentas, técnicas e alguns truques. Mas antes de entrarmos no design e no processo de design, deixe-me quebrar esse projeto rapidamente para você. Então aqui no topo, você pode ver o cabeçalho, e chegamos ao logotipo à esquerda que é basicamente apenas algumas letras, um pedaço de texto com os Grady INTs adicionados a ele. E quando vamos criar este solo, você vai aprender a adicionar ingredientes para a vida Fundo para a vida. Texto no Designer de afinidade à direita. Temos a navegação junto com eles batted um ícones de mídia social. Esses caras aqui são todos como arquivos V g, e logo você vai aprender como em mau como V g rápido, como esses ícones sociais e como trabalhar com eles dentro de um sentimento para designer sob o cabeçalho que temos para esta seção herói aqui, esta grande imagem no fundo, com algum pequeno retângulo sendo colocado sobre o seu para tornar esta imagem um pouco mais escura. Nós, é claro, temos este grande pedaço de tipografia bem aqui. E tiramos essa pequena peça de um controle deslizante. Navegação. Quero dizer, eu pensei que se você quiser criar um controle deslizante para o seu para seus projetos é uma boa idéia para alertar como criar uma pequena navegação para um para uma seção de controle deslizante. Em seguida, temos outra seção com esses itens em destaque aqui. Claro que, antes disso, temos esse grande divisor com algum cabeçalho de seção e algum texto de subtítulo e chegamos a esses ícones de ajuda aqui, divididos em duas linhas. E para colunas bem aqui eu deixei o texto para o mesmo para cada um desses pedaços. As peças em destaque itens porque eu pensei que, hum, você sabe, digitar tudo em ah tipo em novas palavras novas frases seria apenas redundante. Eso eu apenas copiei o texto e, em seguida, apenas substituí-los esses ícones e aqueles dois como apenas como os ícones aqui no cabeçalho. Eles são dois. Eles são como v g elementos embutidos neste documento. Então, novamente você vai aprender a incorporar como V g m ícones como estes em um documento de designer infinito . Em seguida, temos outra seção que seria como um divisor entre os itens em destaque e bem, a próxima seção que está vindo aqui. Como você pode ver que uma grande imagem à esquerda e temos alguns simples tributados à direita com um fundo escuro. Este é um outro talvez não uma tendência inteira, mas um pedaço fora da tendência e que é estar usando Web design agora. Digo, dividindo a página inteira em duas seções e colocando um pouco, bem , uma imagem de um lado e outra parte. Um pedaço de texto do outro lado. Bem, isso é apenas uma das tendências do designer agora. Em seguida, chegamos a algo como um de nossos blocos ação. Então eu criei uma seção mais leve bem aqui com um fundo mais leve. Eu adicionei algumas imagens à esquerda e esses caras, como você pode ver nossos quadrados e adicionar essas imagens nos permitirá aprender outra técnica para trabalhar com imagens dentro. Se gosta de designer com esses caras, esta imagem bem aqui, esta grande imagem na seção de heróis. Bem, esses caras estavam indo usar a ferramenta de cultivo fator. Mas com esses caras, bem, nós vamos usar Bem, é uma técnica ligeiramente diferente na criação de imagens perfeitas para a sua imagem bem destaque no bloco post para o seu bloco Post trechos como esses caras aqui. Então temos um tipo de feed do Instagram que eu queria. Queria fazer com que parecesse um feed do Instagram. E, na verdade, aqui vamos aprender como adicionar imagens e como usar máscara de recorte dentro, ofendendo ao designer. E esta será outra, eu acho, terceira técnica usando imagens dentro de um designer de móveis. Eu prometi a você que, quando chegarmos à parte de design do curso, você aprenderá a usar praticamente imagens dentro do designer de afinidade ao projetar sites. E essas três técnicas, eu acho que será um pensamento vai satisfazer a sua fome por técnicas de manipulação de imagem . Em seguida, temos um rodapé bem aqui que, como você pode ver, tem uma cor de fundo completamente diferente, completamente diferente. Eu queria fazer isso realmente contrastar. Eu queria destacá-lo neste design e nós temos as três seções com algumas com alguns links e algum texto bem aqui. E, claro, essas linhas divisórias, linhas horizontais e todo o projeto é terminado com o poço, uma repetição do nosso cabeçalho, mas é muito menor. O logotipo é menor, a navegação é menor e todo o fundo do Chapeleiro também é menor. Então acho que podemos começar a desenhar. Mas antes de começarmos a projetar, teremos que dar uma olhada nos ativos que temos à nossa disposição. Teremos que criar alguns estilos de texto para facilitar o nosso trabalho. Teremos que criar algumas amostras de cores também, e teremos que dar uma olhada em nossas imagens e eu venho para que saibamos o que temos à nossa disposição e o que usaremos dentro deste design. Então vamos realmente dar uma olhada para dar uma olhada em como dedo se preparar para projetar um site como este 30. Vamos criar as amostras de cores: O documento que vamos usar para o nosso design é exatamente o mesmo documento que criamos quando estávamos aprendendo sobre o grão de 12 colunas. Mas não é apenas a coragem que vamos usar para fazer este projeto acontecer. São também algumas cores, topografia, ícones, imagens, todas as coisas boas que precisamos para fazer dela o site do design acontecer. Então deixe-me esconder a grade por um segundo e deixe-me trazer esses caras para cima. Como você pode ver, eu tenho canções coloridas aqui, e eu tenho um fundo escuro aqui em baixo. Então os quadrados serão uma base para nossas amostras de cores. E aqui em baixo eu tenho um fundo escuro que em um segundo vai ser bem povoado com alguma tipografia. E eu fiz este fundo escuro porque, como você pode ver no design original, maior parte da nossa tipografia aqui é um cheio com uma cor fora de largura. Então eu acho que seria mais fácil para você ver que fora da cor branca contra um fundo mais escuro fora do curso, nós também temos alguns pedaços de texto mais escuros e escuros, mas nós vamos cuidar desses caras mais tarde, então eu sou começará com a criação de uma nova paleta de Amostras. Então, como você pode ver aqui no painel de amostras, podemos escolher anúncio será aplicativo ou uma paleta de documentos. A diferença entre esses dois caras é que se adicionarmos uma aplicação de paladar, as amostras de cores estarão disponíveis. E toda vez que você criar em seu documento, e se você apenas adicionar uma paleta de documentos, esse grupo de amostras de cores estará disponível no Lee com este documento específico. Então, na verdade, eu vou criar apenas uma paleta de documentos assim. E como você pode ver por padrão é, está frio. Bem, na verdade, é chamado no nome, então é assim não está muito frio. Então eu vou renomear essa paleta, e eu vou chamá-la de algo como, talvez nos tenha criado. Este é o nome do site. Vamos colocar assim agora. A parte do conjunto sobre criar as cores dentro, se dentro do designer do quadrado existente para que você possa ter, é que você tem que fazer isso um por um, então eu não posso simplesmente pegar todos esses caras e apenas talvez, como, colocá-los aqui ou escolher alguns, escolha alguma opção no menu para adicionar todos esses caras um amostras separadas. Infelizmente, existem maneiras de criar chamadas de todo o documento. Mas desde que temos um Grady int classificar você aqui, bem, grande infill, se no mundo do designer iria adicionar um monte de diferentes as cores que estão entre a esquerda , parte da tia-avó e o parte direita do grande, e eu realmente não quero que nós queremos apenas cores simples SWAT. Então eu vou pegar este primeiro preenchimento radiante bem aqui. E eu vou simplesmente clicar neste ícone de paleta que diz no Phil para paladar, assim como eu vou ser Eu vou adicionar todas essas cores restantes para minha paleta de amostras , assim como assim. E uma vez que eu terminar, eu tenho minhas amostras de cores que são chamadas Criado, e eu posso usá-las dentro deste documento. Não, claro que não precisarei mais desses retângulos. Posso deletá-los. E agora, se eu apenas criar um poço é retângulo simples. Eu posso usar qualquer fora das minhas cores exatamente como então Ok, então agora que temos nossas cores criadas, agora podemos passar a criar os estilos de texto que vamos usar para o nosso design . E como você pode ver, há o que um monte de cores diferentes significará que cores, mas estilos acontecendo aqui mesmo . Mas acho que podemos começar a criar os têxteis no próximo vídeo. 31. Vamos criar os estilos de texto: este design fora do curso ficaria muito triste se ele não tivesse um monte de imagens e ícones. Então preparei algumas imagens para você. E claro, você vai encontrar esses caras bem em uma pasta que eu vou ligar Teoh dentro deste poço, a descrição do curso. Então, se você quiser seguir só para dar uma olhada nessa pasta e baixar todos os elementos e todas as peças que você vai encontrar lá. Então, na medida em que as imagens vão onde temos o blogueiro excerpt imagens bem aqui, esses pequenos quadrados também temos este instagram feed imagens e também temos algumas imagens maiores para a nossa seção herói herói. Então, se você quiser ir com outra imagem, você não quer ir com a que eu usei você pode escolher. Escolha daqui. Agora vamos adicionar essas imagens usando a ferramenta de imagem lugar e lugar bem aqui. No entanto, quando se trata de ícones, vamos adi