Diseño de interfaz, menú hamburguesa. Animaciones gratis !!!

Diseño de interfaz, menú hamburguesa. Animaciones gratis !!!

El menú hamburguesa es un botón que suele estar en la parte superior de la web, que muestra o esconde el menú en pantalla.
Lo que en un principio nace para la versión mobile, por la falta de espacio, se ha convertido en un recurso habitual también en los diseños desktop.

Tiene muchos detractores que alegan que ocultar accesos de contenidos perjudica la usabilidad, porque obliga al usuario a hacer un clic más, e incluso que es sólo un capricho de los diseñadores.

Personalmente, no puedo estar más en desacuerdo, os explico por qué.

Hace años quizás podría ser arriesgado, hoy en día cualquier usuario lo tiene perfectamente identificado, todos sabemos que ahí accionamos el menú.

En cuanto al hacer un clic más, creo que hay demasiado «gurú» que se ha aprendido un guión y ha dejado de lado el sentido común. La usabilidad efectivamente se ve favorecida cuantos menos clics necesites para acceder a un contenido, pero creo que tenemos que ver todo en conjunto y no pararnos en pequeños detalles.
En mis diseños siempre tengo en cuenta que el usuario haga los menos clics posibles para llegar al contenido que está buscando, pero tenemos que tener también en cuenta, que esta máxima de la usabilidad viene de cuando para pasar de una vista a otra tenías que cargar una nueva página, con una conexión lenta un solo clic podía suponer varios segundos de espera. Hoy podemos utilizar CSS por ejemplo para mostrar y ocultar ese menú, accediendo de forma instantánea a ese contenido. Así pues, no tengas miedo de lo que dice el «gurú», nadie se marchará de tu web por pulsar en la hamburguesa 😉

En cuanto a que el diseñador busca más la estética que la usabilidad, le pese a quien le pese, el diseño es fundamental sobre todo en la primera impresión, no hay nada más agobiante que una web con una barra repleta de enlaces, iconos de redes, banners,… Los espacios limpios también juegan un papel importantísimo en la usabilidad, una cabecera repleta de enlaces, produce más estrés que el tener que hacer un clic más para llegar a un contenido.
Al tener más espacio para mostrar los enlaces del menú, podemos distribuirlos de un modo que sean más legibles y más grandes que en un menú tradicional, ¿acaso el tamaño de letra no influye en la usabilidad?. Podemos meter textos grandes, acompañados de iconos, …. mil posibilidades que en una barra no es posible. Por supuesto que agradezco encontrarme un menú hamburguesa, incluso porque me apetece ver qué ha pensado el diseñador para sorprenderme.

Una vez acabado este alegato en favor de la hamburguesa, pasamos a animarlo, cosa que seguro que también leeréis por ahí que no es usable…

Aquí podéis ver varias muestras de animación. Simplemente copiad los códigos que necesitéis, es gratis 😉

See the Pen SVG Hamburger Menu Icon Animation Collection by Matthew Main (@matthewmain) on CodePen.dark


Pulsa en los menús para ver la animación.

Si no podéis verlo bien, seguid este enlace.

 

Slide Down Box Menu, un menú completísimo con jQuery y CSS

Menú con jQuery y CSS

Menú con jQuery y CSS

En este blog de diseño web hemos mostrado numerosos ejemplos de menú, y seguiré añadiendo, porque el menú constituye una parte esencial del diseño web, cada proyecto es un mundo y requiere un menú diferente.

La mayoría de las veces, el menú viene condicionado o bien por la cantidad de secciones que vayamos a utilizar o por los absurdos títulos larguísimos que nos pide el cliente. En el segundo caso es casi esencial convencerle que el titular de un menú ha de ser conciso y breve si queremos que funcione.

Hoy os dejo un menú que me ha parecido muy vistoso y útil. Se trata de un menú en el que al hacer rollover sobre la opción la casilla que contiene el titular se abre con un efecto elástico, en la zona superior aparece una imagen y el texto se desplaza hacia abajo, mostrando, cuando es preciso un submenú a su derecha.

Además de poder descargar todo el código de forma gratuita, podréis consultar con amplio detalle todos los pasos del proceso.

VER DEMO Y DESCARGAR MENÚ SLIDE DOWN BOX

Espectacular menú 3D desplegable con CSS y jQuery !!!

Menú desplegable efecto 3D

Menú desplegable efecto 3D

Espectacular, mucho, ¿dónde colocarlo? eso ya es otra cosa…

El caso es que si quieres incorporar a tu diseño web un menú con efecto «persiana 3D», este es el código que necesitas.
Tanto el efecto de desplegar como el de plegar, simulan gravedad. Además, podemos colocarlo de frente o simulando profundidad, creando así aún más sensación de elemento 3D. La fluidez del movimiento es muy buena y eso le hace más real.
Estoy seguro de que más de uno lo va a tener en cuenta para su próximo diseño web, y sobre todo que a nadie dejará indiferente 😉

(más…)

Menú Responsive para tu diseño web

El diseño de una web responsive, adapta su tamaño y arquitectura, a la resolución del dispositivo en el que la estamos viendo. Ya hemos visto como en una web de columnas, al reducir la resolución, las columnas se desplazan para colocarse una debajo de la otra, en el orden que hayamos establecido, pero ¿qué pasa con el menú?.

La mejor solución por diseño y sobre todo por usabilidad es la que presentamos hoy aquí. Se trata de convertir el menú horizontal en un menú desplegable, tal y como podéis ver en las imágenes que encontrareis más adelante.

Para una resolución grande, el menú aparece en horizontal, con una opción a continuación de la otra. Cuando bajamos la resolución de tal modo que no cabe en el ancho de la pantalla, convertimos esa única fila en tres, y si seguimos reduciendo la pantalla, lo que va a ocurrir es que las tres filas se van a convertir en un menú desplegable.

Como podréis comprobar cuando os descarguéis el código, el menú está limitado a 600px de ancho. Son 6 opciones de menú y cada una con un ancho de 100px. Es evidente que entonces, para cualquier soporte que tenga una resolución mayor a 600px, no tenemos que tener ningún problema, es decir, si utilizamos cualquier ordenador o una tablet como puede ser el iPad, el menú se verá tal y como fue diseñado, una lista con todos sus elementos en una misma fila.

A continuación, vamos a ver cómo se construye esta web y cómo se distingue en la CSS las distintas resoluciones.

(más…)

Menús con Animación en CSS3 GRATIS !!!

Menús con Animación en CSS3 GRATIS !!!

Menús con animación en CSS3 Gratis

Menús con animación en CSS3 Gratis

Todo lo que antes era impensable en un diseño web, ahora es fácil con CSS3, y más si te ofrecen el código para que te lo descargues gratuítamente !!

Tympanus.net nos deja 10 ejemplos espectaculares para que hagas tu menú más atractivo para el usuario. Se trata de varios ejemplos que juegan con los tamaños y animaciones de fuentes, colores e iconos, seguro que encuentras el que andabas buscando !!.

SlideMenu con Mootools

SlideMenu con Mootools

SlideMenu con Mootools

SlideMenu con Mootools

Mootools es una de las librerías que más soluciones nos aportan en el diseño web. Su ligereza hacen que podamos hacer las webs más usables y vistosas.

En un post anterior, vimos cómo hacer un SlideMenu con CSS, esta vez el mismo ejemplo pero con Mootools, más fluido y con la posibilidad de añadirle más efectos. Podemos hacerlo tanto horizontal como vertical, activarlo con un clic o con un mouseover, modificar el ancho de expansión de las imágenes activas, dar efecto rebote a las aperturas, …

Pesa sólo 7,83 kb y necesitaremos la librería Mootools v1.2

Ver post completo y descarga en byScripts.info

Menús para tu web o blog

Menús para tu web o blog

Menús gratis en JQuery, Ajax, CSS,...

Menús gratis en JQuery, Ajax, CSS,...

Con el desarrollo de tecnologías como las CSS, JQuery, Ajax, Mootools,… el abanico de posibilidades para diseñar menús ha aumentado hasta llegar a conseguir verdaderas maravillas. Hoy en día podemos diseñar menús en los que habrá que hacer uso del botón derecho del ratón para comprobar si se trata de flash. Movimientos fluidos, cambios de opacidad, desplazamientos de textos,… mil opciones que hasta hace muy poco sólo nos lo podíamos permitir con tecnología flash.

Además de la indiscutible vistosidad que proporcionan, no nos penalizan en los resultados de búsqueda, ya que con muy poco código podemos hacer uso de menús con la misma apariencia para el navegador que si de un simple html se tratase.

Podemos hacer «trucos» con CSS realmente vistosos o llegar a verdaderas complejidades realizadas en Ajax, pero siempre consiguiendo un resultado vistoso, usable y sin perjuicios a la hora del posicionamiento.

En 1stwebdesigner.com, podéis encontrar una recopilación de más de 300 ejemplos de menús con Jquery, CSS,….

Hacer un menú con CSS y más…

Hacer un menú con CSS y más…

Hacer un menú con CSS

Hacer un menú con CSS puede ser igual de vistoso que con cualquier otra aplicación pero con un añadido, es mucho menos pesado.

Gracias a las CSS conseguimos con una misma imágen hacer un rollover, simplemente con modificar las coordenadas de esta al ponernos encima. Un efecto que hasta ahora había que desarrollar con javascript o directamente en flash. Y como estas muchas más formas de hacer un buen menú con CSS.

En esta web podréis ver varios ejemplos de menús, tanto horizontales como verticales. También tienen ejemplos para diseñar galerías de imágenes, maquetar con columnas en CSS,…

dCSSLibray es una sección más de la imprescindible web Dynamic Drive. Una web en la que podréis encontrar cientos de códidos no sólo en CSS, también en Javascript, Dhtml, o Ajax. Desde hacer desaparecer textos en forma de acordeón con Ajax, a crear calendarios para formularios,…. mil formas de hacer tu web o blog más usable y vistoso.

Además se trata de una web muy usable aún sin dominar el inglés. Te indican el código que debes de descargarte, dónde copiarlo y cómo modificarlo.

Sin duda es una web de consulta obligatoria.

Diseño web. Home Full Screen con flecha para continuar navegación.

Diseño web. Home Full Screen con flecha para continuar navegación.

En el diseño web, como en los demás diseños, las tendencias vienen y van. Sin embargo el Full Screen en diseño web se ha mantenido durante varios años, sigue siendo una apuesta segura. En este post, además de comentar algún aspecto de este tipo de diseños, os dejo el código explicado para que podáis hacer la vuestra.

En las web full screen, el contenido llena toda la pantalla del navegador, independientemente de la resolución que estemos usando, son responsive.
Son pantallas con un fuerte impacto visual, ideales para presentar un producto. El menú suele ser de hamburguesa y un icono en forma de flecha o ratón nos indica que la web continúa en navegación vertical.

El diseño full screen suele plantearse solo en el primer módulo de información, pasando luego a una web de navegación vertical, aunque también hay diseñadores que apuestan por hacer todos los módulos de contenido en full screen.

Vamos por partes:

1 BACKGROUND. IMAGEN DE FONDO

Es importante encontrar una imagen que no deje indiferente, que sea impactante y a ser posible «limpia», ya que sobre ella habrá texto, y cualquier detalle pequeño puede no verse. Además aconsejo meter un filtro que oscurezca un poco la imagen para ganar en legibilidad del texto que va encima.
En este ejemplo, he usado dos imágenes con formatos distintos para que veáis la diferencia. La primera (rosa) es vertical y la del segundo bloque apaisada. Si modificáis el tamaño de la ventana del navegador, veréis que el comportamiento de la segunda se adapta mucho mejor a todas las resoluciones desktop, y la primera funcionará mejor en las pantallas mobile.

Vamos al código CSS. Se trata de hacer que la imagen ocupe el 100% de la ventana del navegador:

  • capa1 y capa2; son los contenedores de los dos módulos. En este ejemplo de web he usado dos módulos full screen.
  • height: 100vh;  con esta orden, le decimos a la CSS que el alto de la imagen tiene que ocupar el 100% del alto de la ventana del navegador.
  • background-size:cover; indicamos que la imagen debe ocupar todo el contenedor, incluso si tiene que estirarse.
  • background-position: center top; aquí indicamos que la imagen crezca o encoja desde el punto situado en el eje central de la imagen y desde su punto superior.
  • padding: 200px 0 0 10%; para colocar el texto, he decidido separarlo 200px del top y un 10% del ancho de pantalla del margen izquierdo.

Como decía antes, es conveniente oscurecer un poco la imagen de fondo para hacer más legible el texto, esto puedes hacerlo de dos maneras, la primera con photoshop o el editor de imágenes que suelas utilizar, la segunda forma de hacerlo es con CSS, le aplicamos a toda la capa un gradiente negro con una opacidad que iremos modificando según nuestra conveniencia, en este caso un 60%

2 FLECHA EN EL BOTTOM PARA CONTINUAR NAVEGACIÓN

En la parte inferior de la ventana de navegación, he colocado una flecha que con un movimiento suave vertical, indica que la navegación sigue más abajo. Además he puesto un enlace en la flecha para que al pulsar sobre ella muestre el segundo bloque, vamos a ver cómo se hace esto:

En primer lugar, en lugar de usar una imagen png para la flecha, usamos una fuente, de ese modo no se pixelará y será más nítida en cualquier resolución. Para ello usamos este icono.

En el código, podéis ver todos los parámetros de la flecha. Con translateY movemos la flecha 20px en vertical. La duración de la animación es de 0.7s y es un loop infinito.

A continuación os dejo el código, espero que os sea útil.
NOTA: coloca el visor en 0.5x para ver bien el efecto

 

See the Pen
LANDING FULL SCREEN
by Omar Benyakhlef Domnguez (@gloobs)
on CodePen.

Tendencias Diseño Web 2020, Modo Oscuro «Dark Mode» y Minimalismo

Tendencias Diseño Web 2020, Modo Oscuro «Dark Mode» y Minimalismo

Las tendencias de diseño web están en constante evolución. Las posibilidades técnicas ya no son un obstáculo, lo que invita a experimentar más y encontrar nuevas tendencias. Existen también tendencias que continuarán y que tomarán mayor peso como es el minimalismo y otras que se sumarán a la corriente popular como es el modo oscuro o «dark mode».

MODO OSCURO O DARK MODE

En 2018 tras un estudio, Google reconoce que el modo oscuro aumenta en un porcentaje muy alto el rendimiento de sus baterías, los colores predominantes que muestre nuestra pantalla influyen claramente en el consumo. En concreto, los colores azulados consumen más que los colores rojizos. Esta diferencia se acentúa más en el caso del blanco y el negro, el blanco es un color más brillante, consume mucho más que el negro, que es todo lo contrario.
Este estudio arrojó también que no en todos los móviles se producía el mismo ahorro, mucho más visible en los pixels y menor en los iPhone. En todo caso hablar de ahorro de batería ya es motivo suficiente como para que todas las apps más relevantes sacasen su modo nocturno y que todos corriésemos a instalar actualizaciones para disfrutar de la novedad.
Además al ahorro de batería se le suma el uso habitual de dispositivos de noche, en habitaciones poco o nada iluminadas en las que los blancos llega a hacer daño y el modo oscuro se convierte en un beneficio para la usabilidad.

Los diseños web en modo oscuro no solo se ven ultramodernos, sino que además impactan y son agradables a la vista. Los colores, fotos y elementos de diseño destacan más, usando colores oscuros.

Así pues, esto casi seguro de que una de las principales tendencias de 2020 será el diseño oscuro, centrado seguramente en el diseño de la interfaz de usuario, ofreciendo a los usuarios una opción para habilitar el tema oscuro.

 

DISEÑO MINIMALISTA

El minimalismo, a menudo se subestima o se malinterpreta, no se trata de reducir el diseño a su forma más aburrida, ni tampoco significa usar un fondo blanco, el minimalismo consiste en la simplicidad y énfasis del contenido. Se trata de llegar al usuario con el mínimo peso posible, pero con el suficiente para darle lo que está buscando, a veces será más y otras menos. Nuestro objetivo es darle la mejor experiencia utilizando la menor cantidad de recursos, esa es la esencia del minimalismo.

Evidentemente no es lo mismo diseñar la portada de un periódico digital que una landing para el lanzamiento de un producto, cada caso nos obligará a recurrir a un número diferente de recursos mínimos.

Uno de los beneficios del minimalismo es que crea un diseño elegante y muy atractivo para el usuario. La distracción disminuye y la conversión aumenta.

Los diseños web minimalistas utilizan los elementos de diseños indispensables y lo distribuyen sobre un fondo neutro (espacio negativo) que haga resaltar eso elementos. Debemos crear un equilibrio agradable pero además transmitir el mensaje. La web de Google ya fue hace años un perfecto ejemplo de este minimalismo. En este caso en particular, un espacio blanco que ocupa la mayor parte de la pantalla, hace resaltar lo verdaderamente importante, la caja del buscador. No necesita más, pero tampoco menos. Fijaos como además separa las demás enlaces externos a la búsqueda en los márgenes de la pantalla y en un tamaño de fuente pequeño y con poco peso.

El pantallazo que veis sobre este texto pertenece a boundarysupply.com y hace exactamente lo mismo, tiene los elementos indispensables para su misión, y el mensaje es claro, y si os fijáis el diseñador ha desplazado a la izquierda el texto, de ese modo compensa el peso que provoca la chica (hacia la derecha) sobre fondo casi negro, el resultado es perfecto. Los enlaces salen de la escena principal colocándose en los márgenes de la pantalla, sin demasiado peso pero siendo perfectamente visibles para el usuario.

Según otro informe de Google, los usuarios de un sitio web tardan 17 milisegundos en formar su opinión. Cuanto más simples son las imágenes, más atraen al usuario. Estas imágenes deben ser llamativas, originales y de alta calidad. Estas imágenes son efectivas utilizándolas como elemento principal o como espacio negativo.

Con menos texto en la página, las imágenes grandes se colocan en primer plano y representan el foco principal de la composición. Veréis que en ocasiones el espacio negativo es un video, pero siempre muy sutil, para que siga cumpliendo su misión de hacer resaltar a la imagen o texto que está en primer plano.

En fin, veremos a ver qué nos depara el futuro, ojalá nos sorprenda gratamente 😉

Espectaculares efectos interactivos con el Scroll de una página. Descárgalos !!!

Espectaculares efectos interactivos con el Scroll de una página. Descárgalos !!!

Las animaciones a través del movimiento del scroll de una página, son en mi opinión, una de las herramientas que mejor nos permiten llamar la atención del usuario.

Utilizando estos efectos, podemos hacer todo tipo de animaciones, desde las más complejas, hasta movimientos de lo más discretos, todo siempre dependiendo del producto que tengamos que vender. En cualquier caso, los efectos interactivos con el scroll, lo que nos permiten como usuario, es tener un control sobre la página del que rara vez solemos disfrutar. Los contenidos no se muestran sin más,  gracias a esa interactividad con la profundidad del scroll, podemos controlar la aparición de contenidos, imágenes o animaciones cuando nosotros queramos, incluso echar hacia atrás para ver cómo se ha producido ese efecto.

Esa interacción también promueve la viralización de nuestras páginas, por lo que, como he dicho al principio, siempre teniendo en cuenta el tipo de producto que estamos vendiendo, recomiendo 100% el uso de estas interactividades, al usuario le va a agradar y a nosotros nos permite desarrollar algo más nuestra creatividad.

EJEMPLOS

 

MAKE YOUR MONEY MATTER.

Una impresionante web en el que se cuenta el funcionamiento de un producto a través de una historia.
VER EJEMPLO

 

EVERY LAST DROP

Otro producto vendido a través de una historia bien ilustrada, otro claro caso de cómo la información va a ser mejor aceptada por el usuario y como decía al principio del artículo, muchas probabilidades de que sea compartida tu página.
VER EJEMPLO

 

PORSCHE EVOLUTION

En este caso podemos ver cómo ha solucionado Porsche su web para mostrar la evolución de sus vehículos a lo largo de los años y de la música, todo con un efecto parallax activado por el scroll.
VER EJEMPLO

 

PEUGEOT HYBRID

Si además eres capaz de mostrar tu información con ilustraciones como estas, el éxito está asegurado…
VER EJEMPLO

 

CLOSER

Esta web la puedes navegar como cualquier otra, a través de su menú, o la puedes recorrer entera haciendo scroll. Todo tipo de animaciones para tomar ideas.
VER EJEMPLO

 

COLOR OF THE YEAR

Una web muy visual. A través del color y de tipografías que van cambiando según profundizamos en el scroll.
VER EJEMPLO

 

MELANIE DAVEID

Lo interesante de esta web es observar cómo los contenidos están divididos en dos columnas y cómo una columna espera a la segunda para seguir mostrando contenido, todo ello por supuesto con la ayuda del scroll.
VER EJEMPLO

 

BAGIGIA

Esta web es antigua, pero la coloco en este listado, para mostrar cómo a través del scroll van cargando distintas imágenes para recrear una animación de un objeto, dando una sensación 3D
VER EJEMPLO

 

 

DESCARGAR CÓDIGO

EFECTOS SCROLL
Una de las mejores galerías, podéis ver todos los efectos posibles en http://scrollmagic.io/examples/index.html

 


Todo tipo de efectos con textos

 


Una librería tanto para web y móvil. Permite establecer un easing personalizado, rotaciones 3D, …

 


Librería  JS con timelines para generar animaciones mucho más suaves.

 


Animaciones para transformaciones de escala, rotaciones, animaciones 3D,…

 


Compatible con cualquier tipo de dispositivo, y perfecto para hacer una demostración de un producto realizando un 360 grados cuando el usuario hace scroll.

 


Pasa con el scroll de sección en sección con diversos tipos de animaciones

 


He colocado esta galería porque además de ser un menú muy vistoso y útil, nos muestra cómo van cambiando los puntos según avanzamos en el scroll

 


Detecta la dirección del scroll mostrando una capa arriba o abajo.

 


Muy interesante, permite el desplazamiento desigual entre columnas al hacer scroll.

 

 

 

 

Google te ayuda con el color en tus diseños para Apps

Google te ayuda con el color en tus diseños para Apps

El color es un elemento indispensable a la hora de diseñar una App, una web, publicidad… Puede determinar de modo determinante la usabilidad de tu aplicación o sitio web.

El color ayuda a hacer visible la jerarquía, la navegación o arquitectura de un diseño, hace que el usuario muestre más o menos interés en nuestros contenidos y una vez interesado, puede hacer que la experiencia sea positiva o que no vuelva a usar nuestro diseño nunca más.

(más…)

ascensor.js Código jQuery para navegación web

Navegación web con jQuery

Navegación web con jQuery

La navegación web en una sola página es una forma de dar al usuario una transición entre secciones natural y muy vistosa.

Para ello existen multitud de plugins jQuery que facilitan el uso de este sistema de navegación.

Todas las áreas de contenido se encuentran en la misma página, y gracias al menú nos vamos desplazando por cada una de ellas.

(más…)

Tendencias del diseño web, by Apple…

Imagen tomada de appleweblog.com

Imagen tomada de appleweblog.com

Nadie en este mundillo es ajeno a la tremenda influencia de Apple en el diseño web.

Estoy seguro que aparición del iOS7 en el mercado, volverá a dar un cambio de aires al diseño web.

Es cierto que podemos ver una clara inspiración en el diseño más plano de Windows o Google, pero eso si, con el toque especial que siempre Apple da a sus diseños. El responsable, Jonathan Ive.

El cambio ha sido radical, pasando del skeuomorphism (que representa el arte de imitar la realidad) a un diseño totalmente minimalista, es decir, de Steve Jobs a Jonathan Ive.

(más…)

¿Cómo diseñar una web mobile?

Diseño de Web para Móviles

Diseño de Web para Móviles

El tráfico de los dispositivos mobile empieza a ser un factor decisivo a la hora de replantearte el diseño de tu web. En este post no vamos a entrar en si es mejor un diseño adaptative o crear uno especial para este tipo de dispositivos, vamos a ver cuales son los factores decisivos que deciden entre el éxito y fracaso de un sitio mobile.

Los usuarios esperan que su experiencia mobile sea al menos tan buena como la de escritorio. Es muy fácil perder clientes y muy difícil ganarlos, sin embargo, no tener sitio mobile ayuda a tu competencia, así que parece claro que la opción es adaptarse, pero hacerlo bien.

(más…)

Espectaculares efectos para listas desplegables. jQuery y CSS

Lista desplegable con jQuery y CSS

Lista desplegable con jQuery y CSS

Hoy traemos un espectacular efecto para cuando tenemos que utilizar listas desplegables o incluso un menú.

El despliegue es customizable, totalmente configurable para conseguir efectos únicos. Como siempre ojo con los navegadores, se trata de transformaciones y transiciones CSS que como sabéis no todos los navegadores soportan.

El regalo nos lo trae tympanus y nada mejor que verlo para encapricharnos y descargarlo 😉

 

VER DEMO Y DESCARGAR ARCHIVO GRATIS LISTAS DESPLEGABLES

 

 

Psd’s de Ribbons GRATIS !!!

Seguramente hayáis visto estos «ribbons» o cintas en multitud de diseños, un estilo retro con mucha fuerza en los actuales diseños.
Tanto para cabeceras, titulares, menús o botones, es un recurso al que siempre podréis recurrir.
En este pack podréis encontrar varios ejemplos en diferentes PSD’s, todos los archivos psd de Photoshop están bien repartidos en capas y pueden ser fácilmente editadas. También podréis ver que incluye  variaciones de color. Si queréis más variaciones y más tipos, tocará rascarse el bolsillo…

(más…)

Los 50 jQuery más usados en el 2012

los 50 jQuery más usados en 2012

los 50 jQuery más usados en 2012

He encontrado en speckyboy.com, un artículo que creo de gran utilidad para tener en cuenta en nuestros diseños web. Se trata de 50 plugins jQuery, de todo tipo.

Entre ellos podrás encontrar plugins para distribuir contenido en la página, plugins para crear efectos, parallax, responsive, menús de navegación, sliders, gráficos, fuentes, etc…

Merece la pena echarle un vistazo, muchos de ellos ya los conoceréis porque los hemos tratado aquí.

 

VER LOS 50 PLUGINS JQUERY

Diseño Web con Google Web Fonts

Afortunadamente cada vez existe mayor libertad a la hora de diseñar una web. Hasta hace poco sólo podíamos utilizar las fuentes de sistema, las «arial, verdana,times,…». El uso de una fuente fuera de este grupo podía suponer una catástrofe visual si el usuario que entraba a ver la web no tenía instalada dicha fuente en su máquina. Existía la posibilidad de «hacer trampa» con flash o con imágenes, pero los inconvenientes eran tantos que salvo contadas ocasiones, no merecía la pena contemplarlo.

Ahora como sabeis, existen varias formas de utilizar cualquier fuente en vuestros sitios, @font-face rule, Tipekit, Fonts.com Web Fonts, Fontdeck, Webtype, WebINK,… Hoy sin embargo vamos a ver sólo Google Web Fonts, veremos las mejores fuentes que nos ofrece, sus ventajas e inconvenientes.

(más…)

CSS3 y jQuery !!!. Ejemplos alucinantes.

CSS3 y jQuery. Descubre en este post, alucinantes efectos que te ayudarán en tus próximos diseños web.

En este blog de diseño web podréis encontrar gran variedad de artículos sobre jQuery y CSS3 . 

En esta ocasión, he intentado hacer una selección lo más variada posible, de ejemplos que podemos necesitar, pero sin duda, al que tenga tiempo, le recomiendo que se de un paseo por http://tympanus.net/ para ver la cantidad de ejemplos que nos ofrece esta tecnología.

Se trata de 14 ejemplos de jQuery y CSS3 para mejorar tu web. En algunos casos se trata de ejemplos para integrar en tu web, y en otros, de verdaderos proyectos para generar una web espectacular.

 

(más…)