O uso da ilustração no web design
A ilustração é uma ferramenta incrivelmente versátil que pode encontrar muitos usos diferentes no design. E quando se trata de web design, podemos encontrar uma variedade extremamente ampla de implementações.
Hoje, quero investigar algumas das principais maneiras pelas quais essa ferramenta foi colocada em prática, para que possamos criar novas ideias para inspirar e desafiar os projetos que produzimos.
Vamos começar em algum lugar que raramente faço, com uma definição básica: Ilustrado: 1) Para deixar claro ; 2) Para tornar claro , dando ou servindo como um exemplo ou instância; 3) Para fornecer recursos visuais destinados a explicar ou decorar .
Parece que no mundo real do web design, a ilustração tende a executar ambas as funções ao mesmo tempo. Ela embeleza enquanto esclarece. E se estiver fazendo apenas um desses você pode se perguntar por quê. Talvez colocar a ilustração para trabalhar, cumprindo os dois papéis, é a maneira de realmente alavancar o elemento de design para tudo o que vale a pena.
Obviamente, isso não quer dizer que um design não pode ser bem-sucedido se ele apenas manuseia um ou outro; certamente pode. Mas, para tirar o máximo proveito do nosso trabalho, acho que desafiar nosso pensamento é sempre útil. Como de costume, vamos investigar alguns agrupamentos de amostras para ver o que pode ser feito com esse dispositivo visual. Ao longo do caminho, considere se cada abordagem fornece clareza ou decoração, ou ambos.
Ilustração temática
A primeira abordagem à ilustração que quero abordar aqui é o uso desse estilo para produzir uma abordagem temática geral. Nesta situação, as ilustrações são postas em prática para estabelecer um tema geral. Estamos subindo montanhas, visitando uma estação espacial ou explorando o escritório de uma empresa?
Embora essa abordagem não precise nos levar a um local, isso acontece com frequência. Em outras situações, o estilo simplesmente estabelece um motivo geral que o site segue.
A razão pela qual estamos interessados nisso aqui é que ele está sendo usado para conduzir o design geral de uma maneira radical. A ilustração não é um pequeno elemento de suporte. Em vez disso, é o elemento de design mais proeminente e controla todo o layout.
Pegue meu chefe em North Cape
Nesta amostra, a abordagem não poderia ser mais clara. O design do site reflete claramente seu propósito mais básico. A ilustração fornece uma referência visual ao que o indivíduo fará. E em termos de definir a ilustração, a obra de arte fornece decoração e beleza à página.
Neste caso, o tema estabelece com firmeza a finalidade do site e ajuda o usuário a aceitar o conceito.
Kit de lançamento
Uma abordagem temática não precisa ser tão contundente de uma maneira. Às vezes, pode ser uma parte mais natural de um site mais tipicamente estruturado. Nesse caso, o site é um pouco diferente em seu layout, e o tema não força uma interface exagerada baseada em naves de foguetes.
Em vez disso, o tema é entrelaçado no design de tal forma que comunica seus toques decorativos sem interferir no conteúdo. Aqui a ilustração serve para decorar, mas não esclarece muito. Isto não é de todo surpreendente e, claro, demonstra que não existe uma fórmula a seguir.
Atelier Anonyme Design
Em outras situações como essa, a ilustração temática é literalmente o site. Não é um elemento de apoio, mas torna-se completamente o próprio design.
Aqui, o uso da ilustração desempenha claramente um papel decorativo. Mas eu diria que também fornece um grande nível de clareza para o visitante. Este é um site para uma agência de design. O design e a natureza deste site comunicam muito aos seus visitantes. Como tal, tenho a certeza que serve como um enorme filtro para a sua base de clientes. Você quer ser atraído e amar sua abordagem lúdica e criativa, ou, você será totalmente desligado por isso. Então, até este ponto, acho que fornece muita clareza sobre a agência e sua mentalidade.
Design Gráfico Allure
Neste site, o uso da ilustração também tem uma clara abordagem temática. Embora o site siga algumas fórmulas de layout padrão, todo o design é envolto em um layout temático. Esses elementos impulsionam não apenas o design do site, mas também se fundem com o logotipo principal e a cópia usada no site. O tema é imersivo e direciona toda a mensagem que o site apresenta.
Amostras Temáticas Adicionais
Aqui estão alguns sites adicionais que fazem uso de ilustrações temáticas para estabelecer um ambiente ou tema para um site.
Esquilo
Drift Boys
Iutopi
Chandu4u
Mascotes
Como eu poderia cobrir a idéia de usar ilustrações sem revisar uma das mais óbvias: mascotes? Com esse elemento visual, os designers tendem a personificar o site, seu produto ou propósito com um personagem. Não apenas a implementação de tal elemento varia, mas o poder e o raciocínio por trás disso também.
inkFinder
Neste design, o mascote ilustrado desempenha um papel bastante claro. Claro que ecoa o nome do produto. Não só fornece alguma vida para o design, mas coloca uma cara para ele. Desta forma, o público tem algo um pouco mais exclusivo para arquivar em seu cérebro. Esperançosamente, o mascote ajuda a fazer uma experiência mais memorável e única que ajudará o produto a se destacar do ouvido.
Talvez esse seja o propósito mais poderoso por trás de um mascote, para ajudar algo a se destacar. A grande coisa sobre um mascote ilustrado como este é que ele pode ser totalmente único e específico para este produto. Supondo que tenha sido feito sob medida para este projeto, este deve ser o único local onde exista essa ilustração exata.
The Evnt
Ironicamente, encontramos aqui outro mascote ilustrado de polvo (o que é uma criatura marinha de três patas?). Neste caso, o mascote é obviamente um passo muito maior da realidade: uma criatura robô de três pernas com um cérebro em uma bolha.
Embora possa ser uma escolha estranha, ela fornece um belo elemento distintivo para o evento. Este mascote exclusivo oferece um elemento visual interessante para se conectar ao evento. Ela assume uma vida própria e realmente conecta as pessoas com algo concreto. Eu suponho que este é exatamente o propósito de um mascote.
O design deste site é lindo, mas considere o quão sem graça seria sem esse mascote louco no lugar. Produzir tal elemento não é fácil, mas é extremamente eficaz nesta situação.
Big Eye Criativo
Para um exemplo de um mascote não baseado em octopus, dê uma olhada no Big Eye Criativo local. Aqui o mascote não desempenha um papel predominante no design. No entanto, acrescenta muita personalidade a ele. Obviamente, as outras ilustrações e o estilo geral do site contribuem para uma apresentação menos formal. Mas o mascote no logotipo está presente em todo o site. Isso garante que o estilo leve deles permeie o design.
Ilustrações adicionais de mascote
Aqui estão algumas amostras extras de mascotes no trabalho em design. Incluindo ainda outro polvo um; parece que é um popular para usar.
Gerenciamento de Registros Pioneiros
Polvo Argyle
Coucou
Konsebt
Decoração ilustrada
O próximo tipo de uso que eu gostaria de considerar é o que eu chamo de decoração temática. É quando a ilustração é colocada para funcionar de uma forma decorativa que não fornece uma referência física específica. Por exemplo, na maioria das vezes a ilustração inclui fotos de pessoas, animais, objetos ou lugares. Mas, neste caso, a ilustração não representa muito nada real, mas apenas fornece decoração para embelezar o design de uma maneira que apenas a ilustração pode. Como sempre, vamos esclarecer isso através de algumas amostras.
1000 temas WP
Para o nosso primeiro exemplo, considere o 1000 temas WP local na rede Internet. Neste site, o uso da ilustração fornece uma estrutura e um estilo subjacentes para o site. Mas faz isso no que é mais puramente decorativo. O estilo geral parece uma ilustração e, no entanto, não possui os elementos humanísticos típicos.
Agora quero me contradizer totalmente. Eu acho que o estilo é predominantemente decorativo. Mas eu posso realmente ver como podemos argumentar que isso fornece um nível de esclarecimento para o site. O estilo que o design está usando se conecta a um determinado público. Ele diz algo sobre o estilo do site e os temas que eles podem produzir. De muitas maneiras, a qualidade do layout ilustrado demonstra a qualidade do trabalho que você espera ver neste site. Dessa forma, o esclarecimento é talvez mais sutil e menos na sua cara, mas presente, no entanto.
História da Coca-Cola
Neste site, encontramos outro design impulsionado pela ilustração. Existem alguns elementos ilustrados aqui que demonstram coisas reais, mas a maior parte da abordagem temática é estabelecida com pura decoração. Este exemplo não apenas demonstra a abordagem, mas também mostra que quase nenhuma técnica é usada de maneira purista. A realidade é que você provavelmente mesclará esses elementos de várias maneiras.
Metafizitas
Neste último exemplo de ilustrações decorativas você encontra alguns excelentes elementos de fundo. Algumas delas são mais tangíveis do que outras, mas no geral são mais sobre elementos de suporte estilístico do que qualquer outra coisa. É notável como esses desenhos simples podem ser lindos quando combinados com texto bonito, cores bem escolhidas e ícones simples. O resultado final aqui é fantástico e incrivelmente bonito.
Mais desenhos com decoração ilustrada
Aqui estão algumas amostras adicionais para completar esse tipo de ilustração no design.
Cupcakes do Moo
Trabalhos de tecnologia
Estádio Pixel
Sacos Personalizados HQ
Texto ilustrado
O texto renderizado à mão não é certamente um conceito novo e é algo que eu cobri muitas vezes antes . No entanto, nunca considerei tal abordagem com uma perspectiva de ilustração.
O texto de renderização manual é uma variação popular do texto ilustrado e uma ótima solução para muitos criativos. Por um lado, é uma ótima maneira de colocar todo esse treinamento de escola de arte hands-on para trabalhar. Em segundo lugar, é uma ótima maneira de produzir algo único. Afinal, se você entregar um texto, ele será 100% exclusivo. Mesmo se você esboçar um tipo de letra existente, ele ainda se tornará uma criação distinta.
Rangus
Este é um exemplo perfeito do tipo ilustrado. O estilo é extremamente lindo, totalmente original e muito convidativo. Mas isso não pára por aí. O tipo de mão renderizada realmente demonstra os talentos dos indivíduos. Ele mostra que ele cria obras de arte com as mãos e se conecta perfeitamente às suas habilidades de animação. Eu particularmente adoro o fato de que tudo é baseado em um tema de quadro-negro, pois realmente une o tema e elementos perfeitamente. Na minha opinião, este site demonstra como a ilustração unificadora pode ser com o propósito e a mensagem do site.
Joey Lomanto
Nesse caso, o texto ilustrado é muito mais sutil. Em vez de dirigir toda a direção do design, ele simplesmente funciona bem. Na verdade, na primeira vez, talvez você nem perceba o estilo do texto grande da página inicial. Concedido, o texto pode realmente ser uma fonte, mas tem sido usado de tal forma que se funde perfeitamente com o estilo do site. Independentemente disso, o estilo é lindamente unificado e a ilustração desempenha muitos papéis no design geral.
Ir viver
O texto ilustrado não precisa ser renderizado manualmente. Como você verá neste exemplo, o texto é estilizado de várias maneiras que transformam o próprio texto em bits da ilustração geral. A beleza dessa abordagem é que ela unifica o texto com as outras ilustrações. Isso evita uma sensação menos unificada onde você simplesmente tem ilustrações sobre texto padrão baseado na web. Este último pode funcionar, mas neste caso o impacto do texto ilustrado é claro.
Amostras adicionais de texto ilustrado
Os exemplos a seguir se encaixam livremente nessa categoria. Eu digo vagamente porque é difícil dizer às vezes como às vezes é uma coisa sutil. Em alguns desses casos, o texto simplesmente parece uma obra de arte, então eu o coloquei nesta coleção.
Rebelião do contraste
Fakta
La Web Shop
Ilustrações informativas
Pela própria definição de ilustração, um de seus propósitos é esclarecer e explicar. Portanto, é justo que encontremos alguns exemplos em que as ilustrações fazem isso com extraordinária clareza.
Livraria
Vamos começar com o Livraria local. Neste layout incomum, descobrimos que as ilustrações simbolizam muito claramente os vários pontos do layout da página inicial. Cada bloco tem um elemento visual que não apenas embeleza, mas, mais importante, explica isso. Tanto que, como leitor, quase nem preciso ler a cópia. A arte dos dispositivos no canto inferior esquerdo demonstra especialmente isso.
Conferir
De um modo muito menos proeminente, a ilustração deste desenho é igualmente informativa. A ilustração simples, sozinha, demonstra o tópico do site. Pode não bater na sua cabeça com a sua mensagem, mas ecoa o propósito do site lindamente.
Ativar
A ilustração neste projeto não apenas comunica informações sobre o evento que ele representa, mas também reflete o propósito do evento. Este evento particular gira em torno da desconexão da tecnologia. É uma chance para pessoas inundadas de tecnologia escaparem de suas garras.
A ilustração aqui mostra o que os participantes farão, por isso é informativo. E por sua própria natureza, a ilustração rompe com a tecnologia e se funda em uma sensação puramente orgânica, uma maneira fundamentalmente ótima de comunicar o propósito dos sites.
Ilustrações mais informativas
Esses sites extras também demonstram a ideia de ilustrações que nos informam. Alguns são ícones pequenos e básicos, enquanto outros são elementos imersivos que definem e representam totalmente o conteúdo.
Cidade da vitalidade
Uklizenodoma.cz
Qubiq
Um antídoto tecnológico
Com o último exemplo (O Ativar site) entramos no que eu quero considerar em seguida, o uso de ilustração para romper com a sensação de tecnologia orientada das coisas. Às vezes, é necessário desconectar-se dos fundamentos tecnológicos da Web e demonstrar uma sensação muito orgânica. A ilustração é uma das ferramentas mais poderosas para realizar essa ideia.
App de envio
Esta página direta e simples em breve é extraordinária. E claramente como isso realiza sua beleza é radicalmente simples. Uma única ilustração enorme nos distrai do fato de que esta é uma página da web. Parece mais uma obra de arte que, por acaso, tem um pequeno elemento interativo, certamente uma ótima maneira de causar um enorme impacto nos usuários e criar uma imagem memorável.
Muziekpark
Embora este site não faça uso de uma abordagem tão radical, a ilustração ainda é grande e proeminente no layout. Aqui a imagem animada dá vida à página. Combine isso com um layout criativo e incomum e ele se sente totalmente desconectado da tecnologia que o impulsiona. Talvez o fato de não parecer um site normal tenha um papel importante nisso também. Considere também que a ilustração, neste caso, realmente ajuda a nos informar sobre o tema do site.
Egopop
Ainda em outro layout atípico, descobrimos que a ilustração foi colocada em ação. Aqui, a obra de arte não apenas nos fala sobre o indivíduo que o site representa, mas também nos separa da mentalidade normal da Web que um visitante pode ter. Mais uma vez, parece mais uma obra de arte interativa do que um website. Se este é o seu objetivo e necessidade, então esta é uma ótima abordagem a ser considerada.
Zaarly
Comparado com os exemplos anteriores, o Zaarly site fica em contraste gritante. Embora o design seja regido por uma única ilustração grande e essa ilustração sirva para definir um tom para o site, a função subjacente é muito mais complexa do que essas outras amostras.
Este site é um aplicativo que deve ser usado. E a ilustração ajuda a estabelecer um certo conjunto de expectativas. Dá uma sensação humanística alegre, que é claramente um sentimento muito orgânico e natural. Imagine isso em contraste com aplicativos semi-minimalistas sem personalidade alguma. O design dá ao site uma sensação de acessibilidade e desloca nossas expectativas.
Conclusão
O uso da ilustração no design é uma prática milenar e sua aplicação na web é clara. Como acontece com qualquer elemento de design, gosto do processo de reconsiderar seu propósito e uso. Através de tal esforço, eu inevitavelmente descobri que eu entendo melhor como isso funciona, como usá-lo para um propósito intencional e, em última análise, algumas idéias novas e inspiradoras.
Como você usa ilustração em web design? Por favor, compartilhe suas próprias experiências abaixo ...