Transcrições
1. Introdução: Esta semana, estaremos
procurando criar uma linguagem visual para nossos sites ou nosso aplicativo
da web. Começaremos escolhendo fotografias que se
complementem e funcionem bem juntos
e como podemos editar essas fotos um pouco também. Identificaremos as formas que já existem dentro do seu
tipo de letra, seu logotipo ou qualquer outro elemento para que
possamos reutilizar ou utilizar essas formas
para outros elementos. Escolheremos um estilo de
ilustração que complementa
as formas existentes que temos. Em seguida, tentaremos
descobrir texturas que funcionam bem com esse
estilo e padrões de ilustração também. Vamos dar uma olhada nos
gradientes e como escolher ou selecionar um gradiente efetivo
para trabalhar com seus projetos. E, finalmente,
escolheremos um conjunto de ícones e falaremos
sobre como podemos alterar um conjunto existente para trabalhar com nossos projetos, em vez sempre criar um conjunto totalmente novo. A linguagem visual normalmente
será muito,
muito sutil em uma
interface de usuário ou design de site, mas pode realmente adicionar personalidade
e está sempre lá. Então, precisamos estar cientes disso e trabalhar com ele em
vez de contra ele.
2. fotos: Então você elaborou suas
cores e sua composição, mas assim que você adicionar uma foto, ela mudará tudo. Tem suas próprias cores e também tem sua
própria composição. Se você não tem um fotógrafo
profissional ou um bom conjunto de fotos, provavelmente
vale a pena
nem usar fotos. Você pode comprar um conjunto
de fotos relativamente baratas como as que
tenho na tela aqui. Mas eles não vão
ter muito caráter. Eles vão usar uma paleta de cores muito
padrão, composições
muito, muito padrão. Não haverá
muito único nisso. E a menos que você possa
gastar dinheiro louco em um fotógrafo profissional, isso
causará alguns problemas. Aqui. Eu escolhi quase
aleatoriamente nove fotografias de escritório que simplesmente não funcionam juntas. Esses dois têm um estilo semelhante, mas estão
muito orquestrados. Um deles está posando
diretamente para a câmera e a outra imagem
parece dissimulada. Isso faz com que pareça barato ,
falso e não muito confiável. Aqui está outra
foto do nosso conjunto. Isso parece muito melhor. É como se uma foto de ação no meio de
uma chamada importante. Parece mais
credível como se aqui estivesse uma pessoa trabalhadora. Isso é chamado de fotografia de
atirador. Parece que eles não
sabiam que a câmera estava lá. E talvez possamos
construir um conjunto com esse estilo específico como este. Outro desses aqui, este pode ser um conjunto muito
bom na minha opinião, mas gostaríamos de encontrar mais
fotos nesse estilo. Talvez pudéssemos criar um tipo
de conjuntos de pessoas conversando, pessoas
conversando pelo escritório. E, novamente, tem uma sensação
mais genuína. Não parece que eles estão
posando para a câmera. Infelizmente, esse conjunto
de fotos provavelmente não vai ficar bem em nenhum site
porque é bastante caótico. Há muita coisa acontecendo
na foto e
passamos muito tempo tentando equilibrar o caos e a conformidade
e o nosso site. Não queremos adicionar
uma camada extra de caos em um lugar onde ela
não esteja necessariamente ótima. No entanto, poderíamos
coletar um conjunto de fotos nesse estilo,
mas cortá-las. Portanto, há um único ponto
central de interesse, ou pelo menos menos
acontecendo na foto. Ao ter um certo estilo ou regras sobre como
cortamos as fotos, podemos fazê-las se sentirem alinhadas
sem realmente ter obter fotos que
originalmente pareciam alinhadas. Ambas as fotos têm
um truque visual semelhante. Eles têm essas fortes linhas
repetitivas, repetindo linhas como uma técnica muito comum
na fotografia. E embora isso faça com que
essas fotos pareçam muito legais e as faça
funcionar bem juntas, pode ser
um
truque visual muito forte para ir
e colocar em nosso site sob essas linhas
verticais fortes pode ser mexendo bastante com nossa
grade existente. Seria melhor
criar um conjunto de fotos usando uma versão muito mais sutil dessa técnica
de fotografia. Ambas as fotos têm linhas
contínuas
e também têm o bônus adicional de que
ambas as fotos dependem de um
pilar central no meio. Seria muito mais fácil trabalhar essas fotos em nossa composição
existente e ainda assim ser capaz de alinhar essa linha central de alguma
forma à nossa grade existente. Então, fora das opções que
criei para criar um conjunto a partir
das fotos que eu tinha. Eu escolhi esse estilo aqui. Normalmente temos cerca de 2,5
pessoas em uma conversa sem olhar para a câmera com
uma baixa profundidade de campo E, o fundo está embaçado. Há menos caos
em segundo plano. E as poses parecem
naturais o suficiente para que isso pareça um conjunto de fotografias razoavelmente
premium. Então eu voltei e
procurei alguns sites de
fotografia stock, e encontrei quatro
fotos e as cortei para ter
esse mesmo estilo. Todos eles têm duas
pessoas na foto. Nenhuma das pessoas está olhando
diretamente para a
câmera ou posando. Todos eles têm uma baixa profundidade
de campo e estão todos profundamente em uma conversa
importante. O problema é que eles
não foram todos levados no
mesmo escritório ao mesmo tempo. Então, parte do
balanço de branco está errado. Parece que há iluminação
diferente nas diferentes imagens. Agora, não se preocupe se você não é um especialista em fotografia,
nem eu. Mas o que eu fiz aqui
é que acabei de ajustar
o balanço de branco e fiz um balanço de branco um pouco mais frio. Eu adicionei alguns tons azuis. Não corrige tudo, mas foi muito simples
e agora faz com que todas as imagens
pareçam um pouco unificadas. É claro não é particularmente
interessante e
pode ser que essas não sejam
minhas cores de marca. Não sei por esse conjunto
exato de fotos. Vamos tentar novamente, mas desta vez com um balanço de branco mais quente. Então, desta vez, estamos adicionando
alguns tons amarelos. Então isso parece bom,
mas acho que posso torná-lo um pouco mais interessante. Então o que eu fiz aqui
é que esfriei
as sombras e
aqueci os destaques. Chama-se tonificação dividida. Também adicionei uma tonalidade roxa
sutil. Talvez agora eu olhe para
ele, na verdade, não é tão sutil, mas pelo menos você pode
ver no vídeo. E agora acredito que essas
fotos estão todas boas, mas também acreditavam que
pertenciam e talvez pertenciam a uma marca. Acabei de criar
uma simples maquete aqui que
parece um banco. Mais uma vez, se eu for honesto. E agora você pode ver que essa imagem parece
muito boa com esses botões, o texto
e as outras cores. Mas eu poderia mudar isso
com qualquer uma dessas fotos. E não
vai ficar apenas bom, vai sentir uma linha
como se fosse parte
do mesmo site. Se não conseguirmos obter fotos de boa
qualidade, podemos evitar o uso fotografia em nosso aplicativo
web ou em nosso site, geralmente
queremos evitar qualquer coisa que pareça
um pouco inventado demais, mas também qualquer coisa que
pareça muito complexa. Nós só queremos
fotografias muito, muito simples em nosso site
porque já
trabalhamos duro para
garantir que não houvesse muito caos ao escolher
nossos conjuntos de fotografias, provavelmente
queremos ter coisas semelhantes
acontecendo nas fotografias, assim
como estariam
dentro de um estilo semelhante. Podemos criar regras para como uma fotografia
deve ser cortada, e também para filtros específicos podemos querer colocar sobre ela. Vamos fazer isso em seguida.
3. Formas: Então, aqui estão algumas formas, nós vimos essas anteriormente. Eles têm algumas características, ou o triângulo tem esses pontos
muito precisos e pode ser usado mais
em um site de engenharia. Um quadrado é muito equilibrado e
talvez os usaria mais no setor bancário ou algo
que queira parecer seguro ou autoritário. Os círculos são, em geral, muito
mais suaves e parecem um todo. Provavelmente usado mais
em bem-estar ou sites que um para parecer
calmo de alguma forma. Mas eu não leria muito
sobre nada disso. Semelhante a acreditar em cores
significam coisas diferentes. Há níveis de
subjetividade aqui. E, obviamente, essas
não são as únicas formas. Existem aqueles com mais pontos, há aqueles com ângulos
diferentes. Praticamente um
número infinito de formas que poderíamos usar para criar ícones ou apenas
texturas diferentes em nosso site. Cada forma tem
centenas de variantes. A espessura da linha. A linha parece mais espessa
em uma extremidade que a outra? Tem bordas arredondadas? As bordas são cônicas? Existem muitas outras
variantes aqui. Então, como decidimos
qual forma e quantas formas podem ser usadas em nossos ícones e nossas ilustrações? Bem, semelhante a como o ponto de partida
para nossa grade básica deve ser nosso tipo de letra porque compõe a maior parte do site. Possivelmente o ponto de partida para escolher quais formas
funcionam em nossos ícones, em nossas ilustrações
também deve ser o tipo de letra escolhido. Isso já é
milhares de lugares ao redor do design do meu site
sem eu nem tentar. Então, vamos garantir que tudo o
resto funcione bem com ele. Então, com minha fonte específica
escolhida, podemos ver que há um forte
contraste na largura de linha. Há muito grossos e muito finos usados
em todo o tipo. Se eu fosse criar
um ícone que eu acreditava que funcionaria bem
com esse tipo de letra. Eu garantiria que ele tenha esse forte contraste nas larguras da
linha também. Este tipo de letra também utiliza
um ângulo muito específico ao longo desta curvatura muito
específica que você pode ver na
parte inferior do T aqui, que estou apenas
demonstrando com esta forma de ovo que
segue essa mesma curva também usa ao longo
deste tipo de letra é esse tipo de cone
de espessura a fina. Ele não se transfere
diretamente de uma linha grossa para uma linha fina. Ele afunila e
nunca termina em um ponto. Ele sempre tem uma borda
ligeiramente plana. À medida que olhamos todos
os glifos, vemos que eles usam
principalmente todas as mesmas formas e ângulos de
largura de linha. Esse tipo de letra realmente usa muito
a forma de cunha. É uma
forma muito específica para esse tipo de letra. Assim, poderíamos usar essa mesma forma em nossos ícones ou ilustrações ou qualquer outra
linguagem gráfica para manter tudo
um pouco unificado. Falaremos sobre a
criação de ícones e ilustrações mais adiante
neste vídeo. Mas essas são as
formas que
poderíamos usar para ajudar a
criar essas coisas. Mas lembre-se, sempre que
paramos as coisas em nosso design, sempre queremos que haja
um elemento de conformidade e um
elemento de contraste. Se tivéssemos apenas um
único tipo de letra ou se tivéssemos rostos de tipo que
não contrastavam muito, poderíamos querer ir para o
outro lado e usar formas e um estilo de ilustração geral que pareça completamente diferente. Este site, por exemplo, tem textos de
cabeçalho muito semelhantes, mas tem um estilo de
ilustração. Parece quase desenhado à mão. É uma ilustração muito simples e não há
mais nada na página, é apenas um fundo completamente simples de uma
cor. O forte contraste entre as faces
do tipo e o estilo de
ilustração funciona completamente bem nesse
contexto porque há tão pouco outro contraste
na mesma página. Se tivermos um tipo de letra bastante complicado,
podemos querer
que os elementos visuais na página contrastem isso sendo
particularmente simples. Então, vamos supor que eu tenho
esses dois tipos de letra aqui. Agora, o tipo de letra do cabeçalho
é bastante complexo. Então, neste caso, eu gostaria que a linguagem visual anulada fosse bem simples, mas vamos pegar algumas
dessas formas que identifiquei anteriormente
do tipo principal e usar eles para esta janela
pop-up modal aqui. Então, antes de tudo, em vez
de cantos arredondados, achei
interessante
ter esses cantos ligeiramente
afunilados usando o mesmo
ângulo que é usado a
partir da cunha no tipo de letra. Em seguida, adicionei uma
cruz como um tipo de botão de fechamento para
este pop-up modal. E eu optei por usar
um contraste semelhante em pesos de
linha que também é usado na fonte de título, com a linha mais fina usada
como recorte no x. E, finalmente, adicionei
um tipo de cinza swoosh no canto inferior esquerdo
deste pop-up modal, que é o mesmo ângulo swoosh que é usado na parte inferior
do t minúsculo, a, e, e muitas
das outras letras que
identifiquei neste tipo de letra. Agora, acredito que esse pop-up
modal se encaixa mais com o estilo
do tipo usado sem torná-lo muito
complicado ou adicionar muito
contraste adicional ao design. Este é apenas um exemplo
muito simples de como posso usar essas formas que identifiquei a
partir do tipo de letra um elemento
de interface do usuário simples. Semelhante a como, quando
falamos de cor, não estamos falando apenas um punhado de
nomes de cores que temos. Quando falamos de formas. Não são apenas quadrados,
triângulos e círculos. Há todos os tipos de
formas para as quais
nem temos nomes
conhecidos. As qualidades dessas formas
podem mudar drasticamente alterando a largura da linha e
as qualidades da linha. À medida
que escolhemos formas que podemos usar dentro da
linguagem visual de nossos designs, queremos estar cientes de
quão complexas as formas são nas fontes que já
escolhemos. Se o tipo de letra
já escolhemos, tenha muito contraste dentro deles e muitos tipos de formas
diferentes. Não queremos apresentar muitas formas novas
em nossos designs. Se começarmos com algumas faces de tipo muito
mais simples, provavelmente
podemos adicionar muito
mais contraste nas formas. E veremos alguns exemplos disso
quando olharmos para a
ilustração e a criação de ícones.
4. Ilustrações: Como a topografia
deste site é tão simples, significa
que eles podem ter um
pouco mais de um jogo com as ilustrações e até mesmo
esse fundo swoosh, essa ilustração
é bastante grande, é bastante complexa, e usa alguma textura lá também. Nenhuma dessas coisas
seria possível se tivesse um tipo de
letra muito complicado no topo
e, claro, uma paleta de cores razoavelmente
pequena. E aqui está outro exemplo de uma topografia muito simples, muito espaço em branco,
o que nos permite
brincar com a ilustração
um pouco mais. Estou ciente de que estou mostrando
muitas páginas iniciais aqui. Então, apenas para rolar para baixo
e você pode ver muita iconografia e animações
sutis são muito mais complexas
nisso porque ele tem muito espaço em branco
e tem um tipo de letra
tão simples. E por último exemplo, este também tem fontes muito,
muito padrão. Então, ele pode usar esse
estilo de ilustração muito
arranhado, muito realista e
desenhado à mão, e parece ótimo. O contraste entre
essas duas coisas funciona perfeitamente porque não
há muita cor, já não
há muita complexidade na página. Portanto, é um bom exemplo
contrastante para o último que vimos. Isso tem uma tipografia um pouco mais
complicada, uma
paleta de cores um pouco mais complexa com a cor de
fundo aqui. E, portanto, tem um estilo de ilustração um pouco menos complexo. Então, aqui está um design
que criei anteriormente. Você me viu criar isso, e eu não estou particularmente
feliz com a ilustração. Eu apenas enfiei um aqui
sem pensar demais, vou tirar essa
ilustração para que possamos tentar colocar algumas
diferentes aqui. Mas antes de eu fazer, uma
coisa que eu quero sugerir é que suas cores não
precisam ser realistas. Lembre-se, anteriormente,
dissemos que o valor é muito
mais importante do que o matiz quando
se trata de escolher cores
que é especialmente verdadeiro quando estamos descobrindo
como escolher nossos Hughes, esse cara tem um verde laptop, o que é um pouco estranho. Você provavelmente pode ver
isso no mundo real, mas você também pode ter uma ilustração onde
o céu é laranja, onde a
pele da pessoa é verde, onde a água é vermelha. E enquanto tivermos
os valores corretos, eles ficarão bem. Mas ao brincar com os tons, podemos torná-lo mais interessante. E é claro que podemos obter nossas cores de marca
em sua maneira não pode. Então, como acabamos de falar
quando se trata de formas, podemos querer criar
uma ilustração que seja apenas um padrão de formas. E então talvez eu tenha esses
triângulos e círculos coloridos aleatórios aqui. Agora eu me dei um
desafio porque o tipo de letra que estamos usando para
o texto de exibição aqui, é um grande complexo, mas também é um pouco geométrico. Essas formas geométricas que
adicionei como ilustração aqui. Não acho que
funcione muito bem. E isso porque não
temos nenhum contraste entre o texto de exibição e
a ilustração. Embora isso signifique que
parece bonito e uniforme, significa que há
ilustração não adicionando nada
ao design e não
há realmente nenhum interesse visual aqui. Assim, semelhante a um dos
exemplos que acabamos de ver, vou usar uma ilustração
desenhada à mão, mas vou mantê-la um pouco
contida dentro de um círculo. Tem um
lugar muito específico em que vive. Agora eu escolhi essa ilustração de
gato por nenhuma razão real além
do fato de que ele
tem essa cunha é, e esta cunha pé esquerdo e o peixe em seu
quadro branco tem um rosto de cunha. E há
muitas cunhas nele, semelhante a como meu tipo de letra
tem muitas cunhas. Então, estou consciente das
formas do tipo, mas não estou
copiando-as no mesmo estilo, então ainda há
o contraste lá. Agora vamos dar uma olhada nesse design. Um novo, mas desta vez
mudamos o tipo de rostos
para algo que realisticamente como mais parecido com
o que você provavelmente estará trabalhando com uma agência de web design
moderna. O tipo de letra é
muito mais padrão. É muito boxy, é sans serif, e mais do que
isso, é uso excessivo. Então, todos estão acostumados
e potencialmente embarcam vendo esses
tipos de letra em todos os lugares. Isso apresenta um desafio muito
diferente agora porque para nós criarmos uma ilustração que
funcione com esses tipos de letra, pode ser muito mais complexo obter algum
contraste lá. Mas também tem que ser porque, de outra forma, esse
design corre o risco de ser visualmente monótono e fazer nossos
usuários adormecerem. Esta é uma ilustração usamos anteriormente no
curso que poderia funcionar muito bem aqui, tem esse estilo 3D legal que está
muito na moda agora. E acrescenta muito
interesse visual, proporciona muito contraste com
o tipo de letra e se encaixa muito
bem nesta seção. Uma grande desvantagem é
que, como eu não tive tempo para criar minhas
próprias ilustrações, e você raramente tem. É uma
ilustração muito usada em excesso, é um
estilo de ilustração muito usado em excesso, no mínimo. Então, eu realmente não
quero usar isso junto com um tipo de letra muito
usado em excesso. Você pode ser perdoado
por
pensar que já
viu esse design. Podemos querer
criar
algo selvagem e caótico. Caso contrário, nossos
designers apenas olhando para se
conformar e chato. Então, para contrastar que
acabei de criar algumas formas malucas e
sem motivo real consciente para elas. E, pessoalmente,
acredito que isso faz um contraste
muito melhor
com a topografia. Podemos fazer isso parecer mais
interessante em um vídeo posterior. Mas quando estamos
falando de texturas padrões
e gradientes, semelhante à correspondência de
diferentes tipos de letra. Quando estamos escolhendo um estilo de
ilustração, queremos que haja algum
nível de contraste entre nossos elementos existentes
e o tipo de letra, mas queremos que eles se sintam conectados e alguma
forma de conformidade. Quanto mais limpo e
simples o resto dos elementos em nosso design, mais maluca e louca
a ilustração pode ser. E
se já tivermos muito contraste nos elementos
existentes, vamos querer uma
ilustração um pouco mais contida e um
pouco menos louca.
5. TEXTURAS: A maioria dos web designers
vai
olhar para a tipografia e a cor e talvez pensar
na composição ou aprender a melhorar
um pouco suas composições. Mas raramente eles vão
pensar em qual linguagem
visual. E mesmo que o
façam, normalmente está no
contexto das formas, como acabamos de falar. No entanto, a
linguagem visual está sempre lá, quer pensemos
nisso ou não. E assim como se
tentássemos escolher um tipo de letra sem personalidade, apenas na esperança de que
não vamos comunicar nada apenas
usando cores planas,
por exemplo, ainda era
muito comunicante alguma coisa. Isso significa que a maioria dos sites
evitará mesmo considerar texturas,
padrões ou gradientes. Portanto, podemos querer, pelo menos considerar adicioná-los
aos nossos sites ou aplicativos, porque
será muito fácil para nós criar uma personalidade única e um aplicativo web memorável. Poderíamos potencialmente
torná-lo mais utilizável talvez chamando mais atenção para um elemento
interativo. Como por exemplo, quando
usamos gradientes em um botão para que pareça
um pouco mais 3D. Talvez pudéssemos usar
uma textura. Então, às vezes podíamos
usar uma textura para fazer algo parecer mais
realista ou eskeumórfico. E talvez às vezes as pessoas
queiram interagir com ele. Eu não acho que os designers
falem sobre isso o suficiente, mas eu tenho uma caneta na minha mesa
agora e muitas vezes clico no botão na parte de trás quando
eu realmente não preciso. Tipo, ninguém nunca
precisa clicar nesse botão só porque algo
sobre isso é bom. E veremos isso
no próximo módulo sobre animação muito mais. Mas se o botão parecer melhor, vamos
querer clicar nele. Vamos passar algum
tempo procurando uma textura que achamos que
funciona com nossa marca. Agora, podemos ser tentados a
copiar apenas um que tenha uma
boa aparência em outro site, mas estamos tentando criar uma experiência única para o
nosso site de marketing aqui, ou dar personalidade única
a um painel. Então, vamos tentar encontrar
um padrão único. Podemos pesquisar
algo como o Pinterest. E as pessoas realmente
carregaram todos os tipos de texturas
e padrões diferentes aqui. E poderíamos usar isso
para inspiração, ou talvez pudéssemos
copiar algumas texturas que encontramos. Falaremos um pouco
sobre a diferença entre uma textura
e um padrão em breve. Mas primeiro, vou olhar
para as texturas. Agora aqui está o design que
criei um pouco antes. E se eu mudasse
essa linha reta em uma textura
fresca pintada à mão na tela assim. Agora, pessoalmente, acho que instantaneamente faz com que
pareça super legal. Havia uma
linha chata em toda a página, e agora parece
muito interessante, mas esse interesse
chama nossa atenção. Ele cria uma enorme quantidade de contraste em um lugar
que não é muito importante e é quase agora a primeira coisa que eu noto
nesta página, lembre-se, a única razão pela qual temos uma cor diferente
o plano de fundo à medida que rolamos para baixo a página para
quebrar a monotonia visual, hum, idealmente, fazê-lo com
algum tipo de ritmo. Portanto, a linha reta no fundo
onde mudamos de branco para roxo não é particularmente importante
ou interessante. E se alguma coisa, queremos chamar menos atenção para isso, não mais. Então, talvez este seja um lugar muito
ruim para usar uma textura. Algo como a topografia pode ser muito mais importante. Provavelmente, o mais
importante é que
podemos aprender de
qualquer lugar, a qualquer momento. Então, na minha opinião, o melhor lugar para desenhar
mais contraste seria palavras
muito específicas
neste título, fazendo um pouco
de textura aqui, provavelmente o melhor lugar
que poderíamos colocar alguns. Poderíamos também adicionar algumas texturas interessantes a essa ilustração estranha
de um gato que eu tenho. Porque já temos uma certa quantidade de
interesse visual nesta ilustração. Provavelmente não queremos
uma textura muito dura, uma
muito complicada como essa. Talvez pudéssemos
suavizar ou simplificar essa textura, por isso é um
pouco menos dura. Mas, novamente, é um círculo
de fundo aqui. Talvez este não o
lugar mais importante para colocar textura. Então, o que eu fiz
aqui é que
adicionei diretamente alguma textura
à ilustração. Dá uma sensação um pouco mais
tátil, torna-o
visualmente mais interessante. Eu realmente fiz
isso diretamente em um programa de desenho para que
ele pareça muito único. Simplesmente abro a ilustração
no Procreate no iPad, escolhi uma textura e
apenas rabisquei algumas
das cores em algumas
áreas um pouco. Mas isso
adiciona facilmente uma textura única. E isso agora é uma bola novinha em folha. Tenho algumas outras
ilustrações menores aqui,
quase ícones, mas um pouco grandes e complexas
demais para
serem considerados ícones. Agora posso adicionar os mesmos
pincéis e as coisas são usadas nessa ilustração superior para adicionar um pouco de
textura a eles, que faz com que eles
se sintam mais alinhados. Considerando que eu não criei
nenhum dos conjuntos de ilustrações, isso faz com que eles se sintam um pouco mais como se estivessem juntos. Claro, já
ajustei as cores
dessas ilustrações para que elas pareçam com o mesmo tipo
de cores. As texturas podem ser usadas
quando queremos fazer com que nosso aplicativo web ou
site pareça muito único. Podemos até encontrar uma textura muito
personalizada,
pintada à mão , ou
até mesmo criar a nossa própria e importá-las e
usá-las em nossas imagens. Provavelmente parece um pouco
exclusivo demais para ser usado para uma marca
muito corporativa. No entanto, para algo
que é um pouco corporativo, ainda
poderíamos usar
texturas sutilmente como eu fiz com a
ilustração do gato neste mesmo vídeo. E como a
linguagem visual é tão única, significa unir
todos os nossos elementos de marca, todos os nossos diferentes
visuais em todo o site se
tornam realmente fáceis. Cada parte do nosso site parece
instantaneamente que pertence
à mesma marca
porque está usando uma textura que não é realmente usada em nenhum
outro lugar da Internet.
6. Padrões: Agora, um padrão é ligeiramente
diferente de uma textura ou um padrão é algo que
se repete em uma área grande. Isso significa que eles podem
ser usados muito mais sutilmente no fundo
de algo. Isso significa que eles podem cobrir
uma área maior, obviamente, mas também tem uma vantagem de
desenvolvimento, que é que poderia ser
uma imagem particularmente pequena ou SVG que se
repete em uma área grande. Portanto, a imagem original é muito, muito pequena e
muito rápida de carregar. Por exemplo, se
quiséssemos adicionar um padrão a esse mesmo design acabamos de
adicionar texturas também. Realisticamente, provavelmente não
faria isso porque talvez haja
muita complexidade no design em geral. Talvez eu vá novamente para
essa forma de cunha triangular, que agora é usada
na minha ilustração, bem
como na minha fonte de exibição. Então eu poderia ter um padrão de
repetição simples usando os triângulos
coloridos ligeiramente diferentes. Agora, neste caso, eu
sugeriria que esse padrão não
funciona porque há muito pouco contraste entre o padrão
e o tipo de letra. Eles não só
usam formas de cunha, mas também são
muito geométricas. E por esse motivo,
sinto que
precisaria de um pouco de contraste para fazer com que o padrão realmente
adicione algo ao design. Porque atualmente, eu não
acho que isso esteja adicionando algo além de alguma complexidade
desnecessária, talvez semelhante à forma como escolhemos esse gato desenhado à mão no topo, queremos alguns triângulos um pouco mais
desenhados à mão . Em vez disso, se tivéssemos escolhido um tipo de letra um pouco mais
humanista ou algo mesmo desenhado à mão, então os triângulos geométricos
poderiam funcionar um pouco melhor. Mas com todos os
triângulos afiados na fonte, acredito que os triângulos
desenhados à mão no fundo aqui
vão funcionar melhor aqui. E observe que eu adicionei uma pequena caixa roxa
atrás do texto também, então não temos
a distração
do padrão estar
diretamente atrás do texto. Então, um padrão
normalmente será muito mais sutil. Será menos distrativo para um usuário porque será
o mesmo cobrindo a área. Também é tecnicamente menos trabalho. É mais fácil de manter, é mais fácil para a página
da Web carregar. Normalmente, podemos nos safar mais com isso em algo
mais corporativo ou profissional
até mesmo painel de controle do nosso aplicativo web. Apenas para
diferenciá-lo de alguma forma, torná-lo mais único e dar-lhe uma sensação um pouco mais premium.
7. Gradientes: Os gradientes podem ser uma maneira muito
fácil de criar alguma linguagem visual
que é um pouco mais complicada do que as cores básicas. Se as cores da sua marca
eram laranja e azul, provavelmente
há muitas
empresas por aí com uma laranja muito semelhante
e um azul muito semelhante. Mas quando criamos um gradiente laranja a azul em apenas
um determinado nível, podemos ser a
única empresa que
existe usando esse gradiente exato, o que fará com que
nossos aplicativos pareçam um pouco mais único e seja
um pouco mais memorável. Eu criei esse design mais cedo quando estávamos
falando de formas. Temos esse tipo de letra
sans serif muito boxy. Então, nós realmente queremos que as
formas, as outras formas, os padrões ou texturas
que usamos com ela
sejam muito fluidos e fluidos. Trabalhar com um tipo de letra como esse pode realmente ser
bastante divertido quando você chega a este estágio porque
escolhemos esses tipos
simplistas, podemos nos divertir um
pouco mais com o visual idioma. Então, é claro, podemos adicionar alguns gradientes sutis a
essas formas e a todo o plano de fundo. E é menos distrativo
por trás desse tipo de letra porque temos muito mais
espaço para criar contraste. Observe que esses gradientes
estão basicamente entre tons de azul ligeiramente
diferentes. Muito raramente queremos
escolher cores em extremidades opostas
da roda de cores. Na verdade, se eu, por exemplo, quisesse criar um gradiente
amarelo a azul, já
sabemos que o meio termo
vai ficar cinza e queremos evitar ficar cinza em nossos projetos
sempre que possível. Nossos gradientes idealmente não devem se mover muito ao redor da roda de
cores como um todo. Isso significa que os
gradientes que criamos
exigirão um pouco menos de
atenção de nossos usuários. Mas também significa que a
cor no meio
do gradiente ainda
será meio vibrante. Uma boa solução se
quiséssemos criar um
gradiente um pouco mais complicado para áreas menores, é que você pode, naturalmente, colocar uma terceira parada no
meio do seu gradiente. E isso criará
algo um
pouco mais exclusivo para a nossa marca, mas também garante que
a cor no meio
ainda seja bastante vibrante
e não cinza. É claro que, no meu exemplo aqui, pode
haver
alguns problemas de legibilidade. Estamos lidando apenas
com três linhas de texto são tão acima do gradiente. Portanto, é menos importante aqui. Mas sempre queremos
estar conscientes de que, mesmo que o contraste de cores entre o primeiro plano e o
fundo seja bom, se houver muita
complexidade em segundo plano, isso ainda vai dificultar para ler o texto. Algo como um gradiente não é tão complicado quanto um padrão. E, portanto, normalmente está tudo bem. Toda
combinação de cores imaginável já foi usada para uma marca
em algum lugar online. Isso torna muito difícil
para você criar um esquema de cores exclusivo
para sua marca se você não for usar
a outra linguagem visual em todo o resto
deste módulo. Uma coisa que você pode fazer
é criar um gradiente. gradientes são instantaneamente
mais exclusivos do que apenas uma cor plana
e não são muito trabalho técnico
para adicionar a um site. Ainda queremos que
sejam sutis, então quase sempre
queremos usar cores próximas umas das outras
na roda de cores, o que também nos impedirá de obter uma cor cinza horrível
em algum lugar no meio do nosso gradiente. E se estivermos usando um gradiente excessivamente em nossos designs, especialmente se for um plano de fundo, queremos reduzir a
quantidade de complexidade de outras cores e imagens
que estão sendo usadas no design. E podemos querer aumentar o espaço em branco em outras áreas.
8. Ícones: Ícones podem fazer uma grande diferença
para um aplicativo da web. Sei que estamos
mais tarde neste curso, mas não subestime o
quão importantes os ícones podem ser. Eles poderiam facilmente ter toda a personalidade de
um logotipo para comunicar a mensagem da
sua marca e, no
entanto, resumir o que algo significa em
um único símbolo. Isso significa que as pessoas
podem percebê-lo muito rapidamente antes de começarem a
ler qualquer coisa em uma página. Normalmente, você pode encontrar o botão Salvar e o botão
anexos. E os ícones normalmente
traduzem idiomas e dialetos
mais rápido do que qualquer outra coisa. Ajude as pessoas a identificar
onde há um ícone. E para manter uma mensagem coerente, queremos que nosso ícone
seja definido para todos sentir como se eles
pertençam. Agora, a menos que tenhamos um orçamento
particularmente grande, normalmente vamos
comprar um conjunto de ícones e provavelmente
ajustá-los um pouco. Existem alguns
ícones muito fáceis de
usar completamente gratuitos , como
Font Awesome e ícone de herói. Nós só vamos
usá-los para prototipagem. Eles realmente não têm as características únicas que queremos para nossos conjuntos de ícones. Se usarmos esses
aplicativos muito rapidamente, parece que dez outros aplicativos que
você já viu. Mas criar nossos próprios
conjuntos de ícones é realmente difícil. Queremos que eles pareçam
consistentes em nosso site. Queremos que eles trabalhem em tamanhos
diferentes às vezes. E precisamos que eles
comuniquem algo facilmente. Então, você raramente
criará um do zero também. Enquanto estamos
procurando um conjunto de ícones, queremos sempre manter essas palavras-chave de
marca em nossos cérebros, mas também queremos estar cientes de como
é nosso tipo de letra. Novamente, porque eles sempre
vão
ficar ao lado de alguns textos. Queremos que eles realmente não tenham muito contraste com
a topografia. Quase como eles pertencem
à tipografia. Então, se nossa tipografia
for bastante geométrica, podemos querer um ícone
geométrico ao lado dela. Se parecer desenhado à mão ou
tem um elemento humanista, podemos querer um ícone um pouco mais
humanista ao lado dele. Ou se, como esses dois tipos de letra que
eu tenho usado aqui, um deles tem
muito contraste, linhas
grossas e finas. Podemos querer manter esse
contraste nos ícones. Enquanto que se estivéssemos usando
o outro tipo de letra para nossos botões e coisas
gerais da interface do usuário, talvez
queiríamos ter um ícone com um peso de linha
consistente. Na minha opinião pessoal, ao procurar conjuntos de ícones, você quer
olhar para as formas e características da
sua tipografia, especificamente aquela que
será usada nos próximos dois ícones. E isso provavelmente é mais importante do que suas palavras-chave de
marca. Depois de comprar um
conjunto de ícones que você escolheu, um conjunto gratuito de ícones. Muitas vezes você terá 200 ícones ou algum número louco
como esse no conjunto. Você realmente não
quer usar todos eles. Você deseja selecionar
aqueles que serão
úteis para o
aplicativo específico que você está criando. Você usará um subconjunto desses
ícones que compartilhará com outros designers ou desenvolvedores
ao criar coisas novas. Ao decidir o que
cada ícone significa, normalmente
acho útil ir
ao Google Images e escrever anexos,
ícone, por exemplo. Agora, para isso, é
relativamente fácil. Cada imagem que
volta é de um clipe de papel. Às vezes, um clipe de papel com um pouco de mais ou uma
cruz ao lado dele, o que provavelmente significa algo
um pouco diferente. Se você for ao Google
Images e procurar algo
como ícone de aviso, e pelo menos metade das
imagens são do mesmo ícone. Você meio que sabe que é um
símbolo universalmente aceito para essa coisa. Porque é assim que
as pessoas
marcaram suas imagens em
seus próprios sites. Não consigo pensar em
um único exemplo que fiz
isso e não encontrei um resultado bastante conclusivo para qual ícone devo
usar para alguma coisa. Assim que tivermos nosso
subconjunto de ícones e
decidimos o que cada
ícone significa para nós. Provavelmente vamos querer
fazer alguns ajustes. Você raramente recebe um conjunto de ícones
que funciona perfeitamente com seu tipo de letra e com
sua mensagem de marca. Talvez você precise arredondar
as bordas um pouco ou ter
linhas mais finas ou algo assim. Um problema comum,
especialmente se eu tivesse um conjunto de ícones
bastante exclusivo
como o que tenho, é que em algum momento
vou precisar um ícone que eu simplesmente
não tenho neste conjunto. Então, por exemplo, talvez
eu precise de um ícone de salvamento. Este conjunto não
tinha um ícone de salvamento. Fiz uma pesquisa de
imagens do Google para ícone
Salvar e descobri que
normalmente é um disquete antigo. Agora eu passei pelo conjunto de ícones
original procurando algumas formas
lá que eu poderia usar para criar um disquete. Então eu posso fazer
algumas edições sutis, cortando os
bits que eu quero manter e fazer alguns pequenos
ajustes neles para criar uma nova forma de um disquete sem
criar novas linhas, curvas, ângulos ou qualquer
um desses tipos de coisas. Você também vai querer criar
algumas regras específicas sobre qual cor elas podem ser e
que tipo de tamanho elas podem ser. Isso é uma coisa muito útil para
documentar em seu sistema de design. Portanto, outros designers que trabalham
no mesmo aplicativo, não vão e colem ícones
no tamanho errado ou
na cor errada. Um erro muito comum que
vi em diferentes designs de
aplicativos da Web são as pessoas que usam ícones
para o tamanho errado. Se você tem um ícone, isso é muito simplista e
você o explode muito grande, vai ficar ruim. Isso é como obter um tipo de letra muito simplista e
torná-lo um cabeçalho grande. Um pequeno ícone muito simples
não funciona grande. Ele não tem a personalidade e as características
para conseguir isso. Da mesma forma, um ícone muito
complicado, um com mais de uma cor, por exemplo, não ficará muito bom quando você o
torna realmente pequeno. Se você tiver um ícone e tiver
apenas 30 pixels por 30 pixels, não
poderá ter larguras de
linha diferentes lá. Só vai
parecer uma pequena bagunça estranha. Portanto, precisamos ter
restrições sobre como nossos conjuntos de ícones podem ser usados. E sou casos muito raros
em alguns aplicativos, podemos querer que uma
versão grande do ícone e uma pequena versão
do mesmo ícone sejam usadas
em lugares diferentes. Queremos escolher um conjunto de
ícones que corresponda às nossas palavras de marca e
nossa marca existente. Mas também queremos que nosso
conjunto de ícones corresponda à
topografia que ele será usado ao lado ao
escolher nossos tipos de letra, preferimos escolher um que você paga para obter
algo mais único e isso é um
pouco mais profissional e funciona em mais circunstâncias. Com ícones. Isso é ainda mais verdade porque
você não precisa tanto dinheiro para obter um conjunto
decente de ícones. Queremos criar regras
muito específicas sobre quais tamanhos e cores esses ícones podem ser usados em toda a nossa
aplicação ou em nosso site. Portanto, outros designers
e desenvolvedores não vão torná-los muito grandes ou muito pequenos quando já sabemos que
eles não funcionarão assim.
9. Resumo: As ilustrações,
fotos, texturas ou padrões que usamos
em todo o nosso design, todos
comunicamos a mensagem da
marca ainda mais. Queremos ter um estilo
coerente que
usamos em todos os nossos
designs para uma única marca. Se escolhermos um tipo de letra
forte, temos uma grade única e uma paleta de cores
interessante. Só devemos
usar nossa linguagem visual com muita moderação
em todo o nosso design. Os principais lugares em que usaremos a linguagem
visual são em nossos sites de marketing ou em nosso
aplicativo, a página inicial, onde precisamos de
trabalho adicional para chamar a atenção das
pessoas
e comunicar os valores da nossa marca. Para um painel ou uma seção de
administração do nosso site, usaremos a linguagem visual com
muito mais moderação, mas isso não
significa que ela não existirá. estilo de ícone, por exemplo, pode ser bastante exclusivo para se adequar à nossa marca e funcionar bem
com nossa tipografia. Cada aplicativo tem algum
tipo de sites de marketing ou página inicial e Sobre nós
pagina uma página de contato. São páginas que as pessoas
veem quando ainda não
lidaram muito com sua empresa
ou marca. Há menos familiarizados com a personalidade ou o
significado da marca. No entanto, essas são as áreas onde nossa linguagem visual
será mais importante. E vamos querer
obter ilustrações ou fotografias que
não são apenas únicas, mas que realmente
comuniquem quem somos.
Rob Sutcliffe, UI Designer / Developer
