por Omar Benyakhlef | Diseño Web, HTML5, jQuery
Un buen diseño web debe tener como primer objetivo su target. Si además estamos al tanto de las últimas tendencias y técnicas de diseño web, aumentaremos las posibilidades de éxito.
Hoy en día «prácticamente» no tenemos límites a la hora de diseñar, de un modo u otro, casi todo se puede hacer, por eso mismo es obligatorio ser conocedor de estas técnicas, conociéndolas podremos acudir a ellas en función del diseño al que nos enfrentemos.
En este post vamos a ver en qué consiste el Scroll Parallax, vais a poder descargar código gratis y ver algunos ejemplos de efectos que podemos conseguir con esta técnica.
Parallax Scrolling es sin duda un enorme paso hacia adelante y un tremendo reto para diseñadores, ya que ahora no nos limitamos a pensar en cómo rellenar el dichoso papel en blanco. Diseñar una web parallax es en cierto modo, jugar a ser «director de cine». Una sucesión de escenas van a cambiar por completo el escenario que mostramos al usuario, además, tendremos que pensar de qué modo pasamos de una escena a otra, movimientos, máscaras, transparencias, vídeos y fotografías se suceden uno tras otro o simultáneamente, para situarse en su posición correcta cada vez que el usuario se detiene a examinar cada pantalla. Además, tendrás que pensar en cómo conservar la usabilidad de esta web, fijando el menú en una posición absoluta, haciendo que se mueva con el resto de la web… En definitiva es un reto a la imaginación, mucho mayor que cualquier otro tipo de web, es pura creatividad, esta creatividad es la que va a diferenciar una web espectacular de una normal, aunque esta normalidad va a estar acentuada por la vistosidad de esta técnica.
(más…)
por Omar Benyakhlef | Diseño para móviles, Diseño Web, HTML5, iPhone, jQuery, jQuery Mobile, Mobile
La última tendencia de diseño web es el Responsive Design o «Diseño Adaptativo». Con la ayuda del HTML5 y CSS3, ahora podemos adaptar los diseños de páginas web en función del tamaño de pantalla del usuario. La característica fundamenteal de este tipo de diseño web, es que se adapta perfectamente a cualquier resolución, basta con ir cambiando el tamaño de la ventana del navegador, para ver cómo se van recolocando los módulos que forman la web.
Gracias a esta técnica no tenemos que hacer distintas web o utilizar distintas CSS para hacer un diseño para web, smartphone o tableta. El mismo diseño se verá correctamente en cualquiera de los distintos dispositivos y lo más importante, se reducirán los costes de creación y mantenimiento.
La idea de implementar esta técnica viene de lejos, del año 2008, recomendado por W3C en «Mobile Web Best Practices» bajo el subtítulo «One Web«.
Hoy en día la disparidad tan grande que hay en tamaños de pantalla (sobremesas, portátiles, smartphones, tablets…), ha provocado que finalmente los diseñadores web nos planteemos esta práctica como indispensable en todos nuestros diseños. (más…)
por Omar Benyakhlef | Diseño Web
Web Recomendada
Hay diseños web que no pasan desapercibidos, este sin duda es uno de ellos.
Además de disfrutar del sitio y de su interactividad, os recomiendo que echéis un vistazo a los formularios. Otra curiosidad es la máscara que muestra y esconde a los mecánicos manipulando los coches o el «drag» para levantar las puertas de los garajes.
Una vez más HTML5 y jQuery nos ayudan a olvidar a Flash 😉
por Omar Benyakhlef | jQuery
Retina display con jQuery
Hoy os dejo una adaptación de la retina display de iPhone para adaptarla a web. Se trata de un efecto lupa que se acciona con el ratón, realizado con jQuery.
La lupa nos muestra la imagen a tamaño original y lo que queda fuera es una reducción de la misma. El efecto resultante es muy vistoso.
por Omar Benyakhlef | Ajax, Diseño de páginas web, Diseño Web, HTML5, jQuery
Scroll Parallax
En este blog de diseño web, hemos visto como a lo largo de los años las tendencias del diseño web siguen sorprendiéndonos y alcanzando niveles que hace años eran difíciles de imaginar.
En esta última década hemos sido partícipes como diseñadores, de una constante evolución. Desde las web más básicas, que simplemente parecían un documento word metido en una pantalla, pasando por aquellas horrorosas webs, en las que todo parpadeaba y en las que era necesario llenar la web de botones con el mensaje «pulse aquí», para posteriormente pasar a una época en lo que todo parecía que iba a ser flash y acto seguido abandonar la idea al darnos cuenta de que lo que verdaderamente era importante, era el SEO y la USABILIDAD.
En todo este tiempo, hemos vivido muchas mejoras en las conexiones de los usuarios, lo cual se ha visto obviamente reflejado en los diseños. Esto nos permitió empezar a utilizar grandes imágenes y backgrounds, a no estar tan pendientes del peso de la página. Nuevos dispositivos desde los que visualizar las webs, como los smartphones, iPhones, iPads,… Y en los últimos años, la implantación de una tecnología que ha dado un vuelco al diseño web y que como diseñadores nos ha permitido abrir la imaginación para poder realizar diseños con los que nunca antes nos habríamos atrevido, todo gracias a la implantación del jQuery.
(más…)
por Omar Benyakhlef | Diseño Web, Google, Redes Sociales
Google +: la nueva red social
Después de unos días probando Google + (google plus), vamos a hacer un pequeño análisis de las primeras impresiones.
Nada más entrar, la primera impresión es muy familiar. Una interface muy parecida estructuralmente a Facebook, lo cual parece haber suscitado un montón de críticas en este aspecto. Personalmente, no estoy de acuerdo con estas críticas. Haber diseñado Google + con una interface muy parecida a Facebook hace que el usuario pase sin problemas la primera barrera, la usabiliad.
Facebook lleva ya años entre nosotros, ha sufrido varios cambios hasta llegar a ser una aplicación fácil de usar, ¿por qué volver a inventar la rueda?
Vamos a ver las principales características de esta nueva red social.
(más…)
por Omar Benyakhlef | HTML5
Plantilla HTML5
Si vas a empezar a migrar tu web o tu blog a HTML5, lo ideal es que te vayas familiarizando con esta nueva forma de escribir código, y para ello nada mejor que descargarte gratuitamente este template que te ofrece HTML5 Reset
Se trata de la versión 2, de una estructura de carpetas con todo lo necesario para comenzar a maquetar en HTML5.
Además de traer todos los archivos necesarios, incluso un robot.txt, han tenido el detalle de incluir jQuery y Modernizr, una biblioteca que hace compatible HTML5 y CSS3 en navegadores antiguos. Además el código está comentado, lo cual también nos servirá de guía a la hora de interpretar las diferentes etiquetas.
por Omar Benyakhlef | jQuery
grooveshark
He encontrado una web que me ha sorprendido.
Se trata de una web para escuchar y compartir música online, una especie de Spotify gratuito, en el que haces tus listas, compartes, subes al facebook….
Sin embargo a diferencia de otros, no tienes que instalarte nada en tu máquina, es más, ni siquiera te piden que te registres para escuchar música.
Lo verdaderamente sorprendente ha sido comprobar que es todo HTML, CSS y jQuery a destajo… Una pasada !!
por Omar Benyakhlef | Diseño de páginas web, Diseño para móviles
Futuro del Diseño Web
El Futuro del Diseño Web tiene una cita en Londres del 17 al 19 de Mayo en el «Future of Web Design», uno de los certámenes más importantes en lo que se refiere al Diseño Web.
Conferencias y talleres dedicados al CSS3, al HTML5, jQuery, accesibilidad, diseño de interfaces emocionales, diseño para iPhone, Google Analytics,.. En definitiva una enorme oportunidad para quien tenga la suerte de poder asistir.
Para más información, http://futureofwebdesign.com/schedule/
por Omar Benyakhlef | Ajax, Diseño de páginas web, jQuery, Mootools, Usabilidad
LightBox
Bien, como todos sabéis los popup hace tiempo que pasaron a la historia del diseño web.
Afortunadamente y debido a varios motivos (usabilidad, y popup killers en navegadores) esta práctica ha desaparecido y ha dejado paso a otro tipo de popups, menos agresivos y más vistosos.
Hoy, buscando un LightBox para un proyecto nuevo, me he dado cuenta de que no tenía material en el blog, así que aquí os dejo unas cuantas reseñas que seguramente os puedan ayudar.
(más…)
por Omar Benyakhlef | Diseño de páginas web
Utilidades y ayudas para el diseñador web
Son numerosas las aplicaciones y sitios webs para ayudas al diseño web. Podemos conseguir todo tipo de pinceles, fuentes, fondos, iconos,… Pero el diseño web no es sólo photoshop o flash. Un buen diseñador web tiene que saber usabilidad, usar bien las CSS, conocer las últimas aplicaciones tipo Ajax (jQuery, Mootools,…), saber qué diseño es el más apropiado para lanzar un buen ataque SEO, en definitiva, un buen diseño web debe de tener en cuenta todos estos factores.
Cada proyecto es distinto al anterior y nos obliga a estar al día tanto de las tendencias como de la tecnología a aplicar.
Este blog está lleno de utilidades para diseño web, aquí os dejo enlaces que os serán de mucha utilidad:
(más…)
por Omar Benyakhlef | Ajax, Diseño de páginas web, jQuery, Mootools
cambiar font-size con javascript
En diseño web cada vez encontramos más diseños en los que se combinan distintos tamaños de fuente. Esta práctica tan utilizada en diseño impreso, ahora y quizás debido a los blogs, se ve reflejada en muchos de los mejores diseños que vemos por la red.
Echando un vistazo a CSSTricks he encontrado un interesantísimo artículo en el que nos cuentan como cambiar el tamaño de la fuente de un párrafo en función de la cantidad de letras que contiene.
Chri Coyier, el autor de esta idea, nos cuenta cómo hacerlo usando javascript y nos deja dos ejemplos, uno usando Mootools y el otro usando jQuery.
A continuación os dejo los dos ejemplos, y os recomiendo que echéis un vistazo al post, porque de los comentarios también podréis aprovechar más de una idea que simplifica el código.
(más…)
por Omar Benyakhlef | Diseño de páginas web
Tendencias web 2009
El diseño no deja de evolucionar, cada vez vemos cosas más asombrosas, diseños que enriquecen los contenidos y que nos ayudan cada vez más a hacer más usables las webs.
Eso pasó por ejemplo con los nuevos diseños de pies de web, en los que hemos pasado de tener una zona «inhóspita» a ser un lugar con un alto contenido visual en el que el usuario se fija y navega. Esta es una solución que sin duda seguiremos viendo este año.
También hemos podido ver como cada vez son más los diseñadores que utilizan grandes imágenes de fondo. Las conexiones son cada vez más rápidas y esto hace posible poder usar fondos reales en lugar de colores. El uso de png también ha favorecido mucho lograr buenos diseños. Los navegadores actuales los leen sin problema y existen soluciones para solventar los problemas de transparencia que aparecen en los antiguos.
La tipografía grande también seguirá dejando atrás a los pequeños titulares. Las resoluciones de pantalla ahora permiten usar mayores espacios de trabajo en los que las fuentes grandes brillan con luz propia. Inlcuso he comenzado a ver cada vez más, webs que usan sIFR para meter todo tipo de fuentes, con lo que los resultados son geniales. De todos modos habría que estudiar detenidamente el tiempo de carga que supone esto.
Seguimos viendo en todos los diseños las esquinas redondeadas, con o sin sombra, creo que este tipo de cajas seguirán acompañándonos este año, así como las cabeceras que ocupan el 100% de la pantalla (tipo wordpress).
Por supuesto que las redes sociales están influenciando mucho en los diseños, la posibilidad de añadir o de que el usuario añada tus contenidos a estas redes, hace que se le de mucha importancia al espacio que ocupan las entradas a flickr, Twitter,… Desarrollando diseños cada vez más grandes y vistosos.
Las dos columnas tipo blog se imponen. Una principal más ancha con el contenido principal y otra más estrecha a la derecha con un contenido secundario. Aunque he de decir que empiezo a ver sitios con múltiples columnas como es el caso de http://labs.mozilla.com (en este caso el diseñador ha querido dar igual importancia a las 4 noticias, y la mejor manera era meter 4 columnas verticales de iguales dimensiones)
Hace años el diseño de páginas web era al revés. Las webs estaban diseñadas en dos columnas la izquierda más estrecha a menudo con el menú de navegación y luego a su lado la principal más ancha. Cuando se empezó a dar importancia al SEO, se vio que esa distribución nos perjudicaba seriamente, ya que el navegador leía primero todo el contenido de la primera columna, lo que provocaba que los textos y titulares importantes quedaban relegados detrás de cientos de líneas de código.
Así como las fuentes han aumentado de tamaño, lo mismo ocurre con las ilustraciones. Son más grandes, muy coloridas y consiguen llamar mucho la atención del usuario. Los grandes fondos ilustrados conviven con los fondos grunge, collage, blocs de notas, acuarelas,… Estos diseños aunque pudiera parecer lo contrario, han devuelto la importancia del espacio en blanco al diseño web. Todo ahora tiene más «aire», por fin nos hemos dado cuenta de la importancia que tienen los espacios en los diseños para crear un camino a la fácil lectura.
Pero sin duda alguna las herramientas que van a condicionar los nuevos diseños son las bibliotecas de Ajax, JQuery, Mootools,…
Las posibilidades son enormes, ya que simulan todo tipo de efecto y no recargan las páginas. Proporcionan muchas facilidades a la hora de navegar por la página, diseño, velocidad y usabilidad, ¿que más se puede pedir?
Y para acabar, mi profecía…
De todos es sabido la gran influencia que ha ejercido la web de apple en los diseños web. En esta ocasión mi apuesta viene dada por la navegación y gráficos de las webs creadas para móviles iphone, estoy convencido que empezaremos a ver similitudes en muchas páginas dentro de nada, el tiempo lo dirá….
Espero vuestros comentarios y sugerencias.
por Omar Benyakhlef | Ajax, Diseño de páginas web
Ajax para formularios
Poco más tengo que decir de las virtudes del Ajax, quien quiera saber más que vea los post relacionados con Ajax.
En este caso traigo código muy útil para webs con buscadores. Se trata de códigos para hacer más usable los formularios a los usuarios o por ejejmplo, para ordenar los resultados de una búsqueda por columnas (precio, nombre,…)
(más…)
por Omar Benyakhlef | Ajax, Diseño de páginas web, Usabilidad
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,….
por Omar Benyakhlef | Ajax, Diseño de páginas web
Hasta ahora las animaciones en web eran exclusivas del flash, pero con la entrada del Ajax y de bibliotecas como jQuery, ahora podemos ver animaciones que nos hacen dudar sobre cual de las dos tecnologías ha sido la elegida para realizar la animación.
Esto fue lo que me ocurrió al ver esta web, jwhanif.net La carga es muy rápida y las animaciones tienen una fluidez increíble, como no podía ser de otra manera, mi primera reacción fue pulsar el botón derecho del ratón para comprobar que se trataba de flash… pero no!!
(más…)
por Omar Benyakhlef
Aquí iré dejando toda clase de enlaces para que podáis bajaros o consultar utilidades dirigidas al diseño de páginas web, espero que os sirvan.
Cada diseñador necesita un buen arsenal de pinceles para su photoshop. Estos pinceles son además muy grandes, por lo que nos van a servir para todo tipo de trabajos, la mayoría son de 1800 pixels de ancho.
>> Posts con más información y lugares donde descargar pinceles para photoshop
Otras webs para descargarse pinceles:
Una magnífica web en la que te podrás descargar buenísimos dibujos vectorizados, desde botones a siluetas humanas en todo tipo de posición, manchas, animales, plantas,…. Imprescindible en tu biblioteca.
Una web en la que podrás descargar cientos de logotipos en distintos formatos. Cuenta con un buscador en el que casi seguro que encuentras el logo que buscas.
BitNami: Aplicaciones web empaquetadas y listas para instalar!
BitNami Stacks te permite instalar directamente en tu PC/Mac aplicaciones de código abierto.
Entre otros incluye blogs como el WordPress o Roller, programas de CMS, gestores de proyectos, encuestas, foros,….
Una magnífica ayuda que además de dar un resultado estético bueno, nos reducirá el peso de nuestras cabeceras.
Iconos GRATIS para tu web, ¿quien no ha necesitado alguna vez un icono?, aquí os dejo unas cuantas direcciones de sitios en los que puedes bajarte gratis buenos iconos.
Retoque de imágenes, un montón de trucos para retocar y crear imágenes. Photoshop, Ilustrator,…
>> Posts relacionados con Photoshop, manuales, ejemplos….
Fondos, ideales e indispensables para tus mejores diseños
Templates, plantillas web GRATIS
Cabeceras GRATIS para tu blog
Fuentes GRATIS para tus diseños. Cada vez resulta más difícil encontrar buenas fuentes «GRATIS«, aquí está la prueba de que no hace falta gastar dinero para usar buenas fuentes.
Si conoces alguna otra dirección que pueda resultar últil, por favor, envíamela para que todos puedan disfrutarla.
>> Post relacionados con fuentes. Lugares de descarga, trucos,…
A continuación algunas direcciones en las que podrás encontrar todo lo necesario para realizar tus combinaciones de colores con paletas que te servirán de inspiración.
Ajax es una tecnología asíncrona, los datos adicionales se requieren al servidor y se cargan en segundo plano sin ralentizar la carga de la página. Los efectos son increibles, pero además de suponer un adelanto en diseño, también y no menos importante, es un gran avance en usabilidad y SEO.
A continuación enlaces tanto de Ajax como de sus librerías JQuery y Mootols.
por Omar Benyakhlef
A continuación iré dejando enlaces a páginas que me han parecido muy interesantes, tanto por su diseño como su utilidad relacionada con el diseño web. Espero que os sean de ayuda.
CSS
- CSSmenumaker Elige tu menú CSS y llévatelo puesto.
- CSS3.info Interesante sitio para aprender CSS con la posibilidad de ver online los distintos tipos de órdenes.
- Thenoodleincident.com Código CSS para maquetar con capas.
- 456bereastreet.com Código CSS para simular frames y sin los consiguientes inconvenientes.
FONTS
ÚTILES – Html, Javascript, Ajax, Dhtml, imágenes, videos…
- Dynamicdrive.com Sitio de referencia para todo tipo de «código listo para llevar».
- Script.Aculo Muy buenos ejemplos en Ajax.
- Ajax Rain Más ejemplos en Ajax.
- SXC Biblioteca de imágenes con una amplia oferta de fotos libres de copyright.
- DhtmlGoodies Código libre para usarlos en tu web.
- Countinglinks ¿Cuántos links linkean a tu web?.
- Flowplayer Muestra videos en tu web sin tener que recurrir a youtube.
- Malsup Galerías de imágenes con JQuery.
- Phatfusion Galerías de imágenes y más utilidades para descargar. Muy bueno y rápido.
- Accordion V2.0 Efecto acordeón para mostrar y ocultar contenido en tu web.
SEO
- Seotester.com Diversas herramientas para controlar el posicionamiento.
- Google Trends Representa la frecuencia con la que se realiza una búsqueda particular en varias regiones del mundo y en varios idiomas.
- LinkVendor Más herramientas SEO.
PHOTOSHOP
INTERESANTES
POR SU DISEÑO
- Jandaco Desde Los Angeles una de las principales agencias de diseño gráfico.
- Getthegass Mejor verlo. Impresionante juego realizado en flash.
OTROS ENLACES DE INTERÉS