Una colección de sitios web ilustrados espléndidos
Las adiciones ilustradas a sitios web pueden brindarle al tema más simple un nivel extra de interés visual y complejidad.
Las ilustraciones varían ampliamente de un sitio a otro. Algunos se ven dibujados a mano (ya sea que lo sean o no) mientras que otros son renderizados digitalmente.
A continuación hay más de treinta excelentes diseños de sitios web con ilustraciones.
Las más comunes son ilustraciones en encabezados y fondos, a menudo de mascotas o personajes del sitio.
Pero las ilustraciones se usan de otras maneras también. Si tiene un sitio ilustrado favorito que no se menciona aquí, háganoslo saber en los comentarios.
Sitios con ilustraciones digitales
Estos sitios tienen ilustraciones que son obviamente digitales. Las líneas suaves y los colores brillantes son los sellos distintivos de este estilo, aunque no todo lo que se muestra a continuación cumple con estos estándares.
F5
El sitio web de F5 utiliza una ilustración digital caprichosa para su fondo. Los colores brillantes y los personajes caricaturescos son típicos de las ilustraciones digitales. Lo que no es visible aquí es que la ilustración continúa en la página, revelando diferentes capas.
Wireframe Plus
Wireframe Plus usa una ilustración de fondo monocromática para su sitio. Es sutil, pero realmente agrega un empuje visual adicional y hace que el sitio se destaque aunque el esquema de color y la tipografía son bastante estándar.
Diseño de Tom Bradshaw
Tom Bradshaw Design utiliza una tipografía de estilo ilustrado en todo el sitio, así como una mascota de personaje de dibujos animados, que aparece en cada sección de la página (es un sitio de una página).
Mediocore
Las ilustraciones digitales brillantes como esta no se ven muy a menudo, y se destacan de otros sitios. Este se destaca aún más ya que está posicionado sobre un fondo negro y utiliza los únicos colores brillantes en la página.
htmlMafia
Las ilustraciones aquí son una especie de mezcla entre estilos digitales y dibujados a mano, aunque los gradientes utilizados los colocan con más firmeza en la categoría digital. Este es un gran ejemplo de cómo las ilustraciones animan un sitio y dan una impresión más dramática.
CreativeSwitch
El robot ilustrado aquí está realmente animado en el sitio web en sí, aunque sutilmente. Se usan ilustraciones adicionales en todo el sitio.
690 Diseño
Atar las ilustraciones en la copia de un sitio web es una estrategia fantástica. Aquí, el texto del eslogan discute la armonía, y se usa un conductor de orquesta para la ilustración.
Kipu
Las ilustraciones simples, de estilo vectorial, tienen un gran impacto. El uso de una paleta de colores más atenuada para ellos, como la anterior, hace que se fundan más uniformemente en el resto del sitio.
Siringa 1
Estos personajes son otro ejemplo de ilustraciones digitales que tienen un sentimiento dibujado a mano por ellos. Combinado con el esquema de color, estas ilustraciones le dan al sitio web una sensación relajada y amistosa.
PixelBaecker
Están sucediendo muchas cosas en esta ilustración de estilo vectorial, desde los chicos que trabajan en el pozo subterráneo hasta el pájaro en el árbol. Estilísticamente, es una ilustración vectorial bastante típica, aunque la ejecución es maravillosa.
Pieoneers
Usar ilustraciones para hablar sobre los beneficios u ofrecer otra información, sin convertirlo en un gráfico de información, es una gran estrategia. Es una forma divertida e interesante de transmitir información que es más probable que involucre a sus visitantes. Además, la combinación de un pastel y un platillo volador aquí es simplemente excepcional.
Jacob Lee
El pingüino que se ilustra aquí casi parece dibujado a mano, pero es un poco pulido y liso. La coloración blanca rígida (o la falta de ella) realmente se destaca contra el fondo colorido.
Edición en la casa del árbol
El fondo ilustrado aquí cambia de página a página, y tiene animaciones sutiles. Pero es una hermosa obra de arte, digna de una segunda mirada.
Crunchers de código
Las ilustraciones digitales más comunes son personajes simples o monstruos como este. Y como mascota, funciona perfectamente con el nombre del sitio.
Forrst
Los fondos ilustrados como este se están volviendo más comunes. La integración completa entre el contenido y el fondo es lo que realmente hace que este se destaque.
Coo / Coo Core
Las ilustraciones más abstractas como esta dan a un sitio una sensación más moderna. Este es lo suficientemente abstracto como para hacerlo, siendo aún reconocible como un árbol.
Joystick Generals
La repetición del carácter básico en el fondo del encabezado agrega una capa adicional de interés visual a lo que es una ilustración relativamente simple. El esquema de colores utilizado aquí es simple, pero cuando se combina con el fondo sucio, se ve fantástico.
Haz que la película funcione
Las ilustraciones se ven con menos frecuencia en los sitios de estilo grunge, probablemente porque corre el riesgo de crear un desorden visual. Pero la ilustración simple aquí, con su combinación de colores apagados y textura sutil, funciona muy bien en un diseño grunge más minimalista.
Los estudios sólidos
Otro gran ejemplo de monstruos digitales simples utilizados en un diseño. Estos chicos son informales y divertidos, y hacen que el sitio web se sienta igual.
Olive Crush
Los encabezados son una de las áreas más infalibles para usar ilustraciones. Mediante el uso creativo de sombras paralelas, esta ilustración de encabezado casi parece 3D.
Sara Tusar
Otro gran ejemplo de monstruos, esta vez en un diseño de encabezado. Son sutiles, repiten los colores del resto del sitio web, pero dan un toque más personal.
Arbel-Designs
El sitio web Arbel-Designs utiliza un fondo ilustrado de varias capas, comenzando en el espacio en la parte superior de la página y progresando bajo el agua. Este estilo de fondo ilustrado funciona muy bien en sitios de una sola página.
Mining Monsters
Estos son algunos de los personajes de vectores más simples en esta publicación. Sin embargo, son muy lindos y están totalmente incorporados en el diseño del sitio. De hecho, son el punto principal del sitio.
Sitios con ilustraciones dibujadas a mano
Las ilustraciones dibujadas a mano son menos comunes en el diseño web, pero todavía hay algunos ejemplos fantásticos. Van desde dibujos de bellas artes hasta garabatos, y todo lo demás.
Steve Schoger
Los bocetos simples como este funcionan muy bien para cualquier sitio, pero especialmente cuando reemplazan una foto típica de diseñador (o cualquier profesional). ¡También son una gran alternativa para aquellos que son tímidos ante la cámara! Dejar que la textura del fondo se muestre para dar un tono de piel es un buen toque.
Kenny Meyers
Una ilustración de un superhéroe en lo que de otro modo sería un sitio bastante minimalista puede ayudar a infundir confianza en sus visitantes sin recurrir a un diseño de sitio "corporativo". Haciendo eco de los colores de otras partes del sitio, asegúrese de que la ilustración se mezcle perfectamente.
Andy Ward
Solo tiene sentido que un ilustrador incluya ilustraciones en su sitio. Andy Ward usa una presentación de diapositivas de sus ilustraciones en su encabezado, pero están incorporadas de tal manera que se vuelven parte del diseño en sí.
Kilian Muster
Un dibujo lineal más formal, de estilo fino, como este, ofrece un guiño a la tradición; en este caso: métodos tradicionales de composición tipográfica. Es simple pero lo suficientemente audaz para realmente tener un impacto.
ADN a Darwin
Otro gran ejemplo de un sitio que utiliza dibujos de líneas formales para crear un sentido de la historia. Las ilustraciones en capas lo hacen aún más interesante.
Corbata de moño
Un sitio dibujado a mano más informal, completo con monstruos dibujados a mano (¿o es un extraterrestre?). El sitio utiliza una ilustración de fondo de varias capas, comenzando en el espacio y terminando en el mar.
xhtmlCafe
Una ilustración dibujada a mano combinada con acuarelas crea un encabezado fantástico e informativo en el sitio xhtmlCafe. Los elementos esbozados dentro de la pintura le dan una sensación más estilizada que la que tendría una acuarela recta.
Ataque de la web
¿Qué sería una publicación en sitios web ilustrados sin un ejemplo de ilustración de estilo cómic? Todo, desde el grosor de la línea hasta el coloreado texturizado, es una reminiscencia de tu novela gráfica o cómica favorita.
Janko en Warp Speed
Una ilustración simple en el encabezado aquí es sutil y discreta, pero agrega una enorme cantidad de atractivo estético al diseño del sitio.
Escrito exclusivamente para WDD por Cameron Chapman .
Si tienes otros sitios web ilustrados favoritos, ¡compártelos en los comentarios!