24 ingeniosos diseños de sitios web que combinan JQuery y la ilustración
Gracias a la fuerza de JavaScript, las palabras "dinámico" e "ilustración" ya no se aplican exclusivamente a los sitios web basados en Flash.
Ahora que el HTML dinámico es una realidad en los navegadores más utilizados y que existen muchas librerías de JavaScript para facilitar su uso, los sitios web de CSS pueden recuperar parte de la credibilidad de la calle tan apretada por Flash.
De estas nuevas bibliotecas de JavaScript, jQuery se ha convertido en una de las más adoptadas por su facilidad de uso, la amplitud de las funciones y el enfoque inicial en la singularidad visual.
Aquí hay 24 ejemplos ingeniosos de diseños de sitios web que usan jQuery e Illustration .
1.Form Fifty Five
Características: cambiar la ilustración del encabezado; múltiples ventanas pequeñas de diapositivas.
Descripción: Este sitio web no solo tiene un montón de contenido realmente bueno relacionado con el diseño, sino que jQuery se utiliza de diversas maneras para mejorar el aspecto y la usabilidad del sitio web. Agregue un fondo ilustrado que cambia periódicamente y algunos controles de interfaz circular agradables y tendrá un hermoso matrimonio de jQuery e ilustración.
Página de inicio con ilustración de encabezado: 
Columna izquierda con etiquetas activadas: 
Cabezal de cortina de ventana para iniciar sesión: 
2. Frozn
Características: deslizamiento vertical y horizontal.
Descripción: Aparte de los grandes círculos de colores brillantes con números, la característica que noté más fueron las imágenes de perfil ilustradas. Entonces, los hice clic. Ahí fue cuando ocurrió la magia: sombreados de ventanas verticales y horizontales que abrieron un conjunto completo de entradas de blog con videos incorporados de Vimeo. El gradiente de pie de página persistente es un efecto interesante cuando se desplaza hacia abajo.
Grandes círculos e ilustraciones de autor en la página de inicio: 
Contenido que se expande verticalmente: 
Las ilustraciones del autor se expanden para revelar entradas de blog y video: 
3. maqueta de iPhone
Características: Arrastrar y soltar, orientación
Descripción: si alguna vez pensaste en crear una aplicación para el iPhone (¿y qué desarrollador web no?), Este podría ser un sitio web para verificar. Le permite arrastrar y soltar elementos de interfaz dibujados por bocetos o dibujados por computadora en un boceto de iPhone bosquejado o dibujado por computadora. Aunque es bastante básico en el diseño, es un uso innovador de la ilustración que solo se pudo haber arrancado anteriormente con Flash.
Editor de iPhone dibujado por computadora: 
Editor de iPhone bosquejado: 
4. Florida Flourish
Características: Mouseovers con transparencia, presentación de diapositivas
Descripción: Los colores brillantes y los detalles del árbol ilustrado en esta página de bienvenida son captadores de atención inmediata. Haz clic en cualquiera de las categorías que se ramifican desde el árbol y obtendrás no solo contenido descriptivo jQuery sino también un árbol completamente diferente. Desplácese hacia abajo y verá una bonita presentación de diapositivas centrada y un pie de página que toma el motivo natural bajo tierra.
Vista completa de la página de inicio, con gran árbol, presentación de diapositivas y pie de página: 
Árbol de "usabilidad": 
Árbol de "flexibilidad": 
5. Aplicación redonda del té
Características: Presentación de diapositivas, animación menor, objetos deslizantes
Descripción: Tal vez sea yo o una señal de que Apple tiene diseñadores brillantes, pero me gustan los sitios web que tienen fotos de iPhone recortadas. Este sitio web tiene uno animado, con una presentación de diapositivas en pantalla activada al pasar el mouse sobre algunos botones bien diseñados. El tipo redondeado de Helvetica combina bien con el diseño del teléfono y los botones. Las ilustraciones con temas de té en la página y en las capturas de pantalla de la aplicación unen todo.
Animaciones dentro del gráfico de iPhone en la página: 
La ventana emergente muestra la pantalla de la aplicación: 
Otra pantalla de la aplicación Tea Round mostrada en el gráfico de iPhone: 
6. Mejor antes
Características: posicionamiento de pantalla, animación de navegación
Descripción: Si los sitios web pueden tomar esteroides jQuery, este sería el Barry Bonds de la web. Con todas las imágenes dinámicas, este sitio web podría confundirse fácilmente con un sitio web Flash. Sin embargo, después de una inspección cuidadosa, verá que la página no es Flash ni compleja desde el punto de vista de la programación. Pero la realización de que no existe ni rastro de Flash quedará grabada en tu psique.
El menú de inicio: 
Más cosas en llaves: 
Submenú y cartera: 
Animación
Encontrar un diseño de sitio web para el cual se eligió DHTML para crear la animación siempre es una sorpresa. La mejor parte para mí es que puedo verlo en mi iPhone. Estoy seguro de que esa no es la razón principal por la que los diseñadores decidieron ignorar Flash y sus herramientas amigables para la animación. No sé cuánto confiaron en jQuery para codificar sus animaciones, pero tenían que haber tenido tendencias sádicas de algún tipo para llevarlo a cabo.
7. El ojo de Tori
Características: pájaros de origami que vuelan horizontalmente.
Descripción: ¿Quién piensa usar origami en una página web? ¿Y quién piensa usar pájaros azules de origami para representar tweets, en lugar de la ilustración azul estándar? ¿Y quién piensa animar tweets? La respuesta a estas preguntas es, los creadores de Tori's Eye. Cree un sitio web con cualquiera de esas características y tendría algo completamente original. Para estos creadores, tener todas estas características no fue suficiente. ¡Tomaron la decisión contradictoria de hacer toda la animación sin Flash!
Origami Twitter pájaros volando a través de un paisaje: 
8. Bolsas
Características: Presentación de diapositivas y animación de pie de página con iconos de un solo color.
Descripción: el uso de jQuery aquí es más obvio cuando la presentación de diapositivas se desencadena con un clic en el área de navegación. El amplio espacio en blanco, el tipo negro y las ilustraciones de los iconos combinados crean un sitio web agradable. Pero he aquí que una animación en el pie de página no ha dejado de funcionar desde su llegada. Haga clic con el botón derecho en las animaciones en negro sólido y descubrirá el secreto de la película de larga duración del sitio web: Sprites y DHTML.
Página de inicio con mucho espacio en blanco: 
Grandes íconos dispersos por todo el contenido de la presentación de diapositivas: 
La animación de pie de página se ejecuta continuamente, independientemente de dónde se encuentre en el sitio web: 
9. Kidd 81
Características: animación de encabezado viajando horizontalmente.
Descripción: Los dibujos de colores brillantes con temas de invierno aquí llaman su atención de inmediato, y el diseño tiene continuidad hasta el pie de página. Al igual que algunos de estos otros sitios web que usan jQuery para animar objetos, las imágenes en movimiento suave parecen indistinguibles de Flash a primera vista. La guinda del pastel, sin embargo, es el arrastrable "¡Guau! No puedo creer que puedas arrastrar estos "iconos".
Animaciones de encabezado de página de inicio: 
Un pie de página con el mismo tema ilustrado: 
La sección de la tienda tiene el mismo carácter y colores: 
Desplazamiento vertical
Algunas herramientas de JavaScript son capaces de desencadenar un desplazamiento suave entre las secciones de una página. jQuery, por supuesto, es más que capaz de realizar este efecto, y al menos algunos de los sitios web en esta sección toman esa ruta. El desplazamiento dinámico es un efecto agradable, pero combinado con ilustraciones creativas y detalladas, la característica es solo una parte de la imagen más grande.
10. Tomas Pojeta
Características: Cielo, océano, bajo el agua.
Descripción: al igual que algunos otros sitios web en esta sección, Pojeta adopta un motivo que va de gran altura a debajo de la superficie. La parte superior del sitio web está en el espacio exterior, con su cohete y su mono muy detallados. Desplácese hacia abajo y verá extraterrestres y globos en la atmósfera inferior. Más abajo se encuentra un pedazo de tierra que parece una isla de Pascua en el medio del agua, que conduce a una vista submarina con un submarino. Cada ilustración encaja, y las transiciones son casi perfectas.
Cohete y mono en el espacio: 
Isla de Pascua y tucán: 
Submarino bajo el agua: 
11. Morphix
Características: espacio, cielo, tierra, subterráneo.
Descripción: Morphix también comienza con algo de acción atmosférica superior, pero luego pasa a tierra en lugar de mar, y termina con un corte subterráneo. El estilo es obviamente diferente, pero la ilustración de cada capa abarca el ancho de la página, como el último, creando una sensación de horizonte. Y de nuevo, la transición del cielo al subterráneo fluye sin problemas, especialmente con el desplazamiento dinámico.
Alta atmósfera, con cartera: 
Nivel del suelo, con vacas y rascacielos: 
Subterráneo, con raíces de árboles y marmota: 
12. GANDRWeb
Características: Diversas infografías.
Descripción: a diferencia de los dos sitios web anteriores, este usa infografías en lugar de personajes, paisajes y fondos. Cada sección de la página explica el gráfico adjunto. La parte inferior de la página presenta, como era de esperar, un gran formulario web. Un sitio web puramente relacionado con las ventas que utiliza tantas buenas ilustraciones es raro. Las transiciones activadas por jQuery agregan brillo al mensaje.
Infografía explicando beneficios y precios: 
Infografía que explica el proceso de diseño: 
Formulario web: 
13. Orman Clark
Características: nubes, tierra y objetos voladores
Descripción: al igual que los dos primeros sitios web de esta sección, el sitio web de Orman Clark comienza con el cielo, pero la página alta se pega con el cielo nublado hasta el pie de página, donde tocamos el suelo. Una diferencia notable entre esta página y la mayoría de las demás en este artículo es la posición fija de la navegación principal y la ilustración. Esto se ve acentuado por el estallido en la parte superior del fondo que resalta el huevo flotante. El sitio web también presenta una presentación de diapositivas de jQuery bien integrada para la cartera.
Globo, vaca y huevo: 
Presentación de diapositivas de la cartera de Biplane y jQuery: 
Formulario web, pie de página y navegación fija: 
14. Dreamerlines
Características: varios collages.
Descripción: El sitio de Dreamerlines toma un enfoque discreto. Al igual que GANDRweb, cada sección tiene un gráfico distinto que está vinculado a sus secciones vecinas solo por espacios en blanco. Cada sección, sin embargo, es única, detallada, colorida y llamativa. Las ilustraciones pesadas, el texto en negrita grande y el color de fondo marcan la pauta.
Gran texto para comenzar: 
Collage en tu cara: 
Formulario web rodeado de muchos elementos visuales: 
15. Bocadillo social
Características: Alambre, pájaros y tierra.
Descripción: El motivo del cielo nunca envejece, y los diseñadores pueden elegir entre cualquier cantidad de paletas para colorear su horizonte. El horizonte de Social Snack es un poco brumoso, con un pronunciado color verde y marrón. Las aves se sientan en los cables que se encuentran dispersos verticalmente en toda la página para separar las secciones. El sitio web termina con una azotea. Aunque el blog no tiene un desplazamiento jQuery uniforme, el divertido encabezado ilustrado con lindos personajes merece mención.
La paleta de colores y el motivo de pájaro en la parte superior: 
Los marcos para las fotos del equipo cuelgan de un cable de pájaro: 
Lindos personajes en la sección de blog: 
Diapositivas
Uno de los usos más frecuentes y reconocibles de jQuery es para la venerable presentación de diapositivas. Cada vez que ve contenido que se desliza por la pantalla después de hacer clic con el mouse y no se puede encontrar Flash, probablemente sea jQuery. Encontrará presentaciones de diapositivas en sitios web corporativos, páginas de inicio, portafolios de agencias, sitios web de comercio electrónico, en todas partes. Ellos son tan omnipresentes. A continuación hay algunos ejemplos de presentaciones de diapositivas que cobran vida debido a las ilustraciones nítidas.
16. GoSiteWave
Características: Presentación de diapositivas vertical con navegación horizontal e iconos atractivos.
Descripción: la presentación de diapositivas de desplazamiento vertical, combinada con los iconos y las imágenes, es la historia real aquí. Se espera que las presentaciones se desplacen horizontalmente, por lo que lo opuesto aquí es llamativo. Los brillantes azules y naranjas, los botones redondos y redondeados y el fondo oscuro con vetas de luz hábilmente colocadas aumentan el efecto. Por supuesto, si los íconos no estuvieran tan bien hechos, el sitio web podría no haber alcanzado el límite.
Gráficos de diapositivas de la página principal: 
Otra presentación de diapositivas 
17. Sketchen
Características: Presentación de diapositivas horizontal de películas Flash, con contenido precargado, texto grande e ilustraciones.
Descripción: si te gusta el amarillo, te encantará este sitio web. Esta presentación de diapositivas presenta grandes ilustraciones recortadas que mantienen intacto el fondo amarillo. Una presentación de diapositivas adicional en la ventana emergente "lightbox" contiene la cartera. ¿Mencioné que las ilustraciones eran grandes? Toman mucho espacio, pero están muy bien hechos. El color de fondo y las imágenes se acentúan con los elementos de navegación verde y blanco, y el contraste nítido garantiza que la usabilidad no sea una preocupación.
Megáfono: 
Pie de página blanco: 
Manzana: 
Portafolio en "lightbox": 
18. Forma Cincuenta y Cinco
Características: Desplazamiento vertical suave, contenido de blog generado dinámicamente, presentación de diapositivas, resaltado de navegación principal,
Descripción: No deje que la paleta de colores monocromática y los simples dibujos de líneas lo engañen. Este sitio de agencia tiene todo. Desplazamiento vertical suave, un pie de página fijo que se superpone al contenido, una presentación de diapositivas, contenido de blog dinámicamente integrado, etc. Con todas estas funciones, lo que realmente distingue al sitio es el número total de ilustraciones aleatorias y el hecho de que todo es muy gracioso. En ese sentido, una visita al sitio no está completa sin probar el hilarante video "Acerca de".
Muchas ilustraciones en la pantalla de inicio
Las tipografías coinciden con el estilo de ilustración
Presentación de diapositivas de la cartera
Los títulos de navegación de pie de página resaltan mientras se desplaza
Desplazamiento horizontal
A diferencia de la presentación de diapositivas, que generalmente se limita a una sección de un sitio web, el desplazamiento horizontal (como se define aquí) ocurre en el nivel del navegador, o al menos se siente de esa manera. El desplazamiento horizontal dinámico no tiene tantos ejemplos geniales como el desplazamiento vertical; pero como verá, los diseñadores que piensan en forma horizontal tienen una gran imaginación.
19. Corte en serie
Características: grandes ilustraciones para la cartera; desplazamiento horizontal y vertical.
Descripción: esta presentación de diapositivas está diseñada para ocupar el área de visualización del navegador. No puede desplazarse hacia la izquierda o hacia la derecha, pero ¿importa? Las ilustraciones y el diseño son tan extraordinarios que el desarrollador podría haber tenido un método cruzado, al revés o cualquier otro método poco intuitivo de navegación, y las personas aún se esforzarían por averiguar qué vendría después. Lo que realmente ayuda es el tamaño del ícono de navegación y que las fotos y las imágenes de la cartera ocupan toda la pantalla.
Trenes: 
CD Cover: 
3-D chico con zapatos: 
20. Tyler Finck
Características: Transiciones horizontales, con animaciones creadas de fondo.
Descripción: Este es un gran ejemplo del uso de la imagen de fondo para crear un efecto de animación para el desplazamiento horizontal dinámico. La paleta de colores es principalmente en blanco y negro. Las tipografías son en negrita y tienen fondos gruesos en ciertos lugares, y el tipo de imagen tiene un aspecto incompleto. El paquete completo funciona bien.
Una página de inicio minimalista: 
Bio: 
La inyección de dinero: 
Otra Funcionalidad
Algunos sitios web que usan jQuery no son fácilmente categorizables. Pueden tener características poco comunes o hacer un uso sutil de jQuery o adaptar una técnica común de una manera inusual. La precarga, la finalización automática del texto, el desvanecimiento y el desvanecimiento, y la superposición de texto sobre las imágenes son algunos de los trucos que se encuentran en el conjunto final de sitios web de esta colección.
21. Etiqueta naranja
Características: precarga de imagen.
Descripción: la precarga de imágenes es la extensión del uso de jQuery por parte de Orange Label. A medida que se desplaza hacia abajo, los elementos del portafolio se agregan a la página (con un gráfico giratorio que le informa que están precargando). Desde el punto de vista de la usabilidad, esta característica conveniente evita que la página cargue automáticamente el contenido de ancho de banda. La ilustración en la parte superior es grande, colorida, altamente detallada y deliciosa.
La ilustración: 
Ilustración ampliada: 
Artículo de la cartera y pie de página: 
22. Silk Icon Finder
Características: finalización de texto.
Descripción: escriba el nombre de un ícono y este sitio web ordena sus íconos según los posibles resultados de lo que escribió hasta el momento. La calidad de los iconos es bastante buena, y el servicio es bastante conveniente en general. Debido a que el diseño se trata realmente de resultados de búsqueda, tiene poco en el camino de la distracción visual, lo cual es una gran ventaja.
Vista predeterminada: 
Resultados de la búsqueda "light": 
23. Vyniknite
Características: Desvanece.
Descripción: Este sitio web comienza con una gran ilustración de diente de león, un buen diseño y una buena selección de tipos de letra. La única acción notable de jQuery que ocurre es el desvanecimiento y el apagado que ocurre cuando navegas por las pestañas. Otra pequeña porción del cielo es la forma en que los tallos del diente de león se superponen tanto las pestañas activas como las inactivas. Y si observas de cerca el fondo, verás algunos elaborados remolinos de viento que acompañan a la fauna flotante.
Dientes de león en abundancia: 
24. Agencia Halo
Características: Presentación de diapositivas automática con ilustración de fondo; texto sobre imágenes.
Descripción: Fondos, fondos, fondos. Navegue a través de este sitio web y encontrará una gran variedad de ilustraciones decorativas llenas de coloridas ilustraciones tridimensionales. Se puede acceder a una cartera impresionante a través de una presentación de diapositivas de jQuery en la página de inicio. Alternativamente, puede encontrar información sobre cada elemento en la sección de cartera (o "trabajo") desde la superposición de texto en la miniatura.
Página de inicio con presentación de diapositivas: 
La cartera superpone texto en imágenes: 
Otro fondo colorido: 
Escrito exclusivamente para WDD por Maurice Wright. Él es un desarrollador web y diseñador y creador de Moluv.com . Desde 2000, Moluv ha sido una fuente de inspiración de diseño para las mentes creativas que buscan los mejores sitios web en Internet.
¿Cómo ha cambiado jQuery la forma en que diseñas tus sitios web? Por favor comente abajo ...