Web design no Affinity Designer para iniciantes e além

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. 1Introdução no 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. 2.O que é o Affinity Designer e como configurar para design na web: 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 de web do designer 2.2Affinity: 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. 3.1Top 10: 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. 3.2Top 10: 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. 4.1O fator mais importante a considerar antes de escolher as 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. 4.2Como 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. 4.3Como escolher as cores “psicologas: 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. 4.4-7 ferramentas fáceis para escolher de esquemas de cores à de erro: 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. 5.1Uma história super curta 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. 5.2Como 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. 5.3Como escolher as fontes certas para as posições: 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. 5.4Como misturar fontes para fonts e texto de 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. 5.5A fonte perfeita para design do interface de 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. 6.1de cabeçalho, branding, navegação e seções de heróis: 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. 6.2As seções centrais e de baixo do design do seu 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. 6.3O que são grinds 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. 6.4Como 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.1-7 tendências de design que governam o mundo do design de 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. 7.2Onde encontrar a inspiração to 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. 8.1Todo design de site de site de de , precisa de 8.1Every: 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. 8.2Como criar 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. 8.3Vamos 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. 8.4Como 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