Uma coleção de sites ilustrados esplêndidos
Adições ilustradas a sites podem emprestar até mesmo o mais simples tema a um nível extra de interesse visual e complexidade.
As ilustrações variam muito de um site para o outro. Alguns parecem desenhados à mão (sejam eles ou não), enquanto outros são obviamente processados digitalmente.
Abaixo estão mais de trinta grandes projetos de sites que apresentam ilustrações.
As mais comuns são ilustrações em cabeçalhos e planos de fundo, geralmente de mascotes ou caracteres do site.
Mas as ilustrações são usadas de outras formas também. Se você tem um site ilustrado favorito que não é mencionado aqui, por favor nos informe nos comentários.
Sites com ilustrações digitais
Esses sites têm ilustrações que são obviamente digitais. Linhas suaves e cores vivas são as marcas desse estilo, embora nem todas as coisas mostradas abaixo estejam de acordo com esses padrões.
F5
O site da F5 usa uma ilustração digital extravagante para seu plano de fundo. As cores brilhantes e personagens caricaturais são típicos de ilustrações digitais. O que não é visível aqui é que a ilustração continua na página, revelando diferentes camadas.
Wireframe Plus
O Wireframe Plus usa uma ilustração de fundo monocromática para seu site. É sutil, mas adiciona um pouco de força visual extra e faz com que o site se destaque, mesmo que o esquema de cores e a tipografia sejam bastante padronizados.
Tom Bradshaw Design
Tom Bradshaw Design usa tipografia de estilo ilustrado em todo o site, bem como um mascote de personagem de desenho animado, que aparece em cada seção da página (é um site de uma página).
Mediocore
Ilustrações digitais brilhantes como essa não são vistas com muita frequência e se destacam de outros sites. Este se destaca ainda mais, pois está posicionado contra um fundo preto e usa as únicas cores brilhantes na página.
htmlMafia
As ilustrações aqui são uma espécie de mistura entre estilos digitais e desenhados à mão, embora os gradientes usados os ponham mais firmemente na categoria digital. Este é um ótimo exemplo de como as ilustrações animam um site e causam uma impressão mais dramática.
CreativeSwitch
O robô ilustrado aqui é realmente animado no próprio site, embora sutilmente. Ilustrações adicionais são usadas em todo o site.
Design 690
Amarrar ilustrações na cópia de um site é uma estratégia fantástica. Aqui, o texto do slogan discute a harmonia, e um maestro de orquestra é usado para a ilustração.
Kipu
Ilustrações simples, em estilo de vetor, causam um impacto muito ousado. Usando uma paleta de cores mais suaves para eles, como acima, faz com que eles se misturem mais perfeitamente com o restante do site.
Siringa 1
Esses personagens são outro exemplo de ilustrações digitais que têm um sentimento desenhado à mão para eles. Combinado com o esquema de cores, essas ilustrações dão ao site um sentimento descontraído e amigável.
PixelBaecker
Há muita coisa acontecendo nessa ilustração vetorial, desde os caras que trabalham no buraco subterrâneo até o pássaro na árvore. Estilisticamente, é uma ilustração vetorial bastante típica, embora a execução seja maravilhosa.
Pieoneers
Usar ilustrações para falar sobre benefícios ou oferecer outras informações, sem transformá-las em um info-gráfico, é uma ótima estratégia. É uma maneira divertida e interessante de transmitir informações com maior probabilidade de engajar seus visitantes. Além disso, a combinação de uma torta e um disco voador aqui é excelente!
Jacob Lee
O pinguim ilustrado aqui parece quase desenhado à mão, mas é um pouco polido e suave demais. A coloração branca austera (ou falta dela) realmente se destaca contra o fundo colorido.
Edição na Casa da Árvore
O fundo ilustrado aqui muda de página para página e tem animações sutis. Mas é uma bela obra de arte, digna de uma segunda olhada.
Crunchers de código
As ilustrações digitais mais comuns são personagens simples ou monstros como este. E como mascote, funciona perfeitamente com o nome do site.
Primeiro
Fundos ilustrados como esse estão se tornando mais comuns. A integração completa entre o conteúdo e o background é o que realmente faz este se destacar.
Coo / Coo Core
Ilustrações mais abstratas como essa dão ao site um sentimento mais moderno. Este é apenas abstrato o suficiente para fazê-lo, enquanto ainda é reconhecível como uma árvore.
Joystick Generals
A repetição do caractere básico no plano de fundo do cabeçalho adiciona uma camada extra de interesse visual ao que é uma ilustração relativamente simples. O esquema de cores usado aqui é simples, mas quando combinado com o fundo sujo, parece fantástico.
Faça o trabalho do filme
As ilustrações são vistas com menor frequência em sites no estilo grunge, provavelmente porque correm o risco de criar confusão visual. Mas a ilustração simples aqui, com seu esquema de cores suaves e textura sutil, funciona muito bem em um design grunge mais minimalista.
The Solid Studios
Outro grande exemplo de monstros digitais simples usados em um design. Esses caras são casuais e divertidos, e fazem o site parecer o mesmo.
Esmagamento De Azeitona
Os cabeçalhos são uma das áreas mais infalíveis para usar ilustrações. Através do uso criativo de sombras, esta ilustração de cabeçalho quase parece em 3D.
Sara Tusar
Outro grande exemplo de monstros, desta vez em um design de cabeçalho. Eles são sutis, ecoando as cores do restante do site, mas dão um toque mais pessoal.
Desenhos de Arbel
O site da Arbel-Designs usa um plano de fundo ilustrado em várias camadas, começando no espaço na parte superior da página e progredindo em águas profundas. Este estilo de fundo ilustrado funciona muito bem em sites de uma única página.
Monstros de Minding
Estes são alguns dos caracteres vetoriais mais simples deste post. Eles são muito fofos e estão totalmente incorporados ao design do site. Na verdade, eles são o ponto principal do site.
Sites com ilustrações desenhadas à mão
Ilustrações desenhadas à mão são menos comuns em web design, mas ainda existem alguns exemplos fantásticos por aí. Eles variam de desenhos de arte para rabiscos e tudo mais.
Steve Schoger
Esboços simples como esse funcionam muito bem para qualquer site, mas especialmente quando substituem uma foto típica de designer (ou qualquer profissional). Eles também são uma ótima alternativa para aqueles que são tímidos! Deixar a textura de fundo aparecer para dar um tom de pele é um toque agradável.
Kenny Meyers
Uma ilustração de um super-herói sobre o que é, de outra forma, um site bastante minimalista pode ajudar a instilar confiança em seus visitantes sem recorrer a um design de site “corporativo”. Ecoando as cores de outras partes do site, certifique-se de que a ilustração se integra perfeitamente.
Andy Ward
Só faz sentido para um ilustrador incluir ilustrações em seu site. Andy Ward usa uma apresentação de slides de suas ilustrações em seu cabeçalho, mas elas são incorporadas de tal forma que elas se tornam parte do próprio design.
Padrão de Kilian
Um desenho de linha de estilo de arte mais formal como este oferece um aceno à tradição; neste caso: métodos tradicionais de composição. É simples, mas ousado o suficiente para causar impacto.
DNA para Darwin
Outro ótimo exemplo de um site que usa desenhos de linhas formais para criar um senso de histórico. As ilustrações em camadas tornam tudo ainda mais interessante.
Gravata-borboleta
Um site mais casual desenhado à mão, completo com monstros desenhados à mão (ou é um alienígena?). O site usa uma ilustração de fundo multicamada, começando no espaço e terminando no mar.
xhtmlCafe
Uma ilustração desenhada à mão combinada com aquarelas cria um cabeçalho fantástico e informativo no site xhtmlCafe. Os elementos esboçados dentro da pintura dão uma sensação mais estilizada do que uma aquarela reta teria.
Ataque da Web
O que seria um post em sites ilustrados sem um exemplo de ilustração em quadrinhos? Tudo, desde a espessura da linha até a coloração texturizada, é uma reminiscência do seu romance cômico ou gráfico favorito.
Janko na velocidade da urdidura
Uma ilustração simples no cabeçalho aqui é sutil e discreta, mas adiciona uma enorme quantidade de apelo estético ao design do site.
Escrito exclusivamente para WDD por Cameron Chapman .
Se você tiver outros sites ilustrados favoritos, compartilhe-os nos comentários!