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 para móviles, iPhone, Mobile
Interfaces para iPhone y iPad
En esta pequeña muestra, podemos ver todo tipo de tendencias y soluciones muy creativas en lo referente a interfaces de usuario. Echadle un vistazo porque seguro que de aquí sacareis buenas ideas para próximos diseños.
(más…)
por Omar Benyakhlef | CSS, jQuery
Animaciones jQuery y CSS3
25 animaciones jQuery con sus correspondientes tuturiales. Sliders, parallax, landscapes animados, menús, etc…
Seguro que encuentras algo que se adapte a lo que andas buscando.
por Omar Benyakhlef | CSS, Diseño Web, HTML5, Trucos CSS
Notificaciones tipo iPhone con HTML5
El diseño web está muy ligado al resto de diseños tecnológicos, sobre todo al diseño realizado para smartphones. Hoy os dejo algo que seguro que os gusta. Se trata de la notificación que aparece en el iPhone (por ejemplo), cuando tenemos mensajes pendientes de leer.
Realizado en CSS3 y HTML5, aquí os dejo una demo y el código listo para descargar. Espero que os sea útil.
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 para móviles, Diseño Web, iPhone, Mobile
diseño para iPhone, iPad
En este blog de diseño web, hemos tratado alguna vez el diseño enfocado a Smartphones, en concreto a iPhone. En esta ocasión pretendo hacer un post que pueda ser un recopilatorio y fuente de documentación para el diseño para iPhone e iPad.
Además de consejos de diseño, podréis descargaros plantillas para diseñar tanto en iPhone como en iPad.
(más…)
por Omar Benyakhlef | CSS, jQuery, Usabilidad
TopScroll con CSS y jQuery
Los blogs supusieron un cambio radical en el diseño web. Las páginas pasaban a ser mucho más largas de lo que hasta ahora habían sido.
La navegación vertical se hace interminable en numerosos blogs, en la mayoría de las ocasiones no perjudica al usuario, ya que navegamos viendo pasar los encabezados de los post por curiosidad o en nuestra trayectoria para llegar hasta un contenido que sea de nuestro agrado.
Siempre es preferible usar la rueda del ratón para hacer scroll a través de los post o productos de una tienda, que tener que ir paginando y cargando nuevas páginas. Incluso ahora, tenemos la posibilidad de ir cargando contenidos de manera controlada para hacer la página menos pesada en origen, dando así mayor rapidez de navegación al usuario.
(más…)
por Omar Benyakhlef | accesibilidad, Google, HTML5, SEO, Usabilidad
Etiquetas HTML5 que favorecen el SEO
En este blog de diseño web hemos hablado ya de la importancia que tiene el flujo del Html sobre el posicionamiento de la web, así como la importancia que da Google a la velocidad de carga de una página para mejorar su posicionamiento.
El HTML5 facilita la clasificación de los motores de búsqueda así como la descripción de tu sitio a los usuarios. Además permite realizar una navegación mucho más rápida a través de tu web. Vamos a ver cómo…
(más…)
por Omar Benyakhlef
En estos momentos estoy revisando por completo este post.
Debido a la antigüedad de muchos de los recursos web que tenía esta página, muchos de ellos estaban rotos.
Todos los que veis a continuación están actualizados. Iré añadiendo más, permaneced atentos. En caso de que veáis algún enlace roto, por favor decídmelo para corregirlo.
Espero que os sean de utilidad.
Manuales de Diseño Web
MANUALES DE DISEÑO WEB
Pinceles para Photoshop
PINCELES PARA PHOTOSHOP
Vectorial
RECURSOS VECTORIALES
Iconos
ICONOS
Recursos Mobile
PLANTILLAS MOBILE
Backgrounds y Patterns
BACKGROUNDS Y PATTERNS
Fuentes
FUENTES
por Omar Benyakhlef | CSS
Herramientas CSS
Conocer bien las tecnologías web, nos ayuda a tener una mejor perspectiva a la hora de poder realizar con éxito un buen diseño web.
El uso de CSS así como Ajax son hoy en día fundamentales en un buen diseño web. Existen herramientas que además nos pueden ayudar a la hora de optimizar y aplicar nuestros conocimientos de una manera más eficaz.
En este post vamos a ver varias herramientas CSS que nos van a ayudar a conseguir mejorar nuestra web. Compresores de CSS, generadores, programas que nos ayudan a limpiar la CSS, validadores, etc…
(más…)
por Omar Benyakhlef | Diseño de páginas web
Buscador de iconos Gratis
Todos sabemos cómo ayudan unos buenos iconos en nuestros diseños web y lo complejo que es a menudo crear un icono que represente correctamente su función en un tamaño tan pequeño.
Un buen icono puede mejorar sin duda además del diseño de la página, la navegación y cuando por cualquier motivo, no podemos o no tenemos el tiempo de hacer nuestro propio diseño, nos encontramos con la dificultad de encontrar el icono adecuado y sobre todo, saber si está o no libre de derechos.
Icon Finder, es un buscador de iconos gratuito con una base de datos (en el momento de escribir este post) de más de 167.000 iconos. Podemos encontrar lo que buscamos bien por palabra clave o por paquetes temáticos. Icon Finder es una dirección indispensable para todos, así que añadidla ya a vuestros favoritos, merece la pena.
Y MÁS DE 290.000 ICONOS GRATIS CAMBIANDO DE ORDEN LAS PALABRAS…
Pues si, resulta que al día siguiente de subir este post, un amigo (Carlos Delgado) me comenta que si en lugar de Icon Finder, entro en FindIcons.com me encuentro con otro buscador de iconos igual de bueno que el anterior, que presume de tener la base de datos de iconos gratuitos más grande del Mundo, así que aquí lo os lo dejo, ya me contaréis cual os ha parecido más completo.
por Omar Benyakhlef | Diseño de páginas web, Usabilidad
Primer pantallazo
Como todos sabéis, hoy en día en diseño web, la resolución más común, es 1024×768 px, eso significa que pensando en que lo normal en un usuario es que tenga un par de barras extras colocadas en el navegador, nos deja una resolución en vertical visible de unos 560 px, es decir, todo contenido que quede por debajo de este área, tendrá que ser visto haciendo scroll.
(más…)
por Omar Benyakhlef | Diseño de páginas web, HTML5, Trucos CSS
HTML5 y CSS3
TUTS+ es uno de los mejores sitios (conjunto de sitios) que existen en la red relacionados con el diseño web. En este caso el artículo es de net tuts +
En él podréis aprender a montar una estructura de página típica para blog, es decir, cabecera, menú de navegación, cuerpo principal, columna lateral y pie. Veréis cómo se utiliza el HTML5 en compañía de CSS3.
Desgraciadamente todavía existen navegadores que no reconocen el uso conjunto de estas dos tecnologías, sin embargo parece ser que todos los esfuerzos se encaminan a que un día podamos dejar de la do el «parcheo» de las CSS para cada navegador, y dedicarnos a lo que verdaderamente nos ocupa, diseñar un sitio web para sus usuarios.
En cualquier caso, el artículo me parece muy útil, ya que todas las tendencias nos encaminan al uso de HTML5 con CSS3.
En este post, nos enseñan a estructurar una página en HTML5, y a usar etiquetas como <article>, que sirve para denotar la entrada independiente en un blog.
Respecto al CSS3, en este post se analiza cada contenido del blog por separado y nos introduce en «nuevos trucos», como son los degradados, sombras o esquinas redondeadas.
por Omar Benyakhlef | Ajax, Diseño de páginas web, Diseño para móviles
Usabilidad Web para Móvil
No podemos hablar de un diseño de web para móvil estándar, porque la disparidad de posibilidades que pueden ofrecer los distintos terminales móvil es enorme.
Nada tiene que ver la experiencia de navegación entre un terminal estándar, no tactil de pantalla pequeña al uso de un iPhone, por ejemplo. Y lo peor de esto es que frenta la inmensa comodidad de navegación que ofrece un iPhone o un Android táctil, la mayoría de los usuarios (alrededor del 80%) tiene terminales del tipo estándar, con una horrible usabilidad web.
Además de esto, tenemos una gran franja diferencial entre velocidades de descarga.
También podemos hablar de la incompatibilidad existente entre la visualización de un sitio web en un sobremesa y en un dispositivo móvil. No podemos hacer webs para móviles con imágenes tan grandes y pesadas como se están haciendo hoy en día en webs y blogs. La limitación del tamaño de la pantalla choca frontalmente con la tendencia de grandes fuentes e imágenes.
Otro factor diferencial es el técnico. Terminales que no muestran flash o vídeo, que no ejecutan scripts,…
Entonces, ¿qué es lo correcto?, ¿debemos hacer una web para cada tipo de terminal?, ¿no vale la web que tengo para ser vista en el móvil?,…
(más…)
por Omar Benyakhlef | Diseño de páginas web, SEO, Trucos CSS
Usar CSS para optimizar el SEO
A la hora de afrontar el «diseño de una página web«, un diseñador debe tener en cuenta muchos factores, se trata fundamentalmente de elaborar un proyecto que sea atractivo y útil para el cliente y sobre todo para sus usuarios, pero para llegar hasta «meta», tenemos que plantearnos muchas otras «etapas».
Mi experiencia me dice que un buen diseñador web, no puede quedarse sólo en el aspecto general y superficial de la web. Tenemos que conocer a la perfección cómo maquetar una web, si no expertos, saber bastante de SEO y tener alguna noción de al menos, cómo influye el código de programación en la estructura de la página.
Los conocimientos de maquetación son importantes a la hora de diseñar, ya que nos dirán si es más o menos conveniente hacer un diseño de una forma u otra. El SEO, nos dirá dónde es más conveniente colocar los títulos por ejemplo, y conocer algo de programación, nos ayudará a plantear por ejemplo colocar aquí o allá un menú css, o una galería ajax. Todo en su conjunto, contribuye a realizar un buen trabajo, una buena página web.
Desgraciadamente esta práctica no es muy habitual, y desgraciadamente en España, el trabajo del Director de ARte o diseñador, esta muy infravalorado, no hay más que ver los sueldos aquí y en el resto de los países y las «chapuzas» que invaden la red.
Hoy vamos a comentar la importancia que tiene el flujo del Html a la hora de posicionar bien una web e incluso de que cargue con mayor rapidez.
(más…)
por Omar Benyakhlef | Diseño de páginas web, Trucos CSS
CSS3
En este blog de diseño web, hemos visto en numerosas ocasiones los problemas que origina la «batalla entre navegadores», la cantidad de puertas traseras que tenemos que buscar para que el resultado se visualice igual en uno que en otro.
Con la llegada del CSS3, tendremos muchas más posibilidades de controlar el diseño del blog o de la web que estemos construyendo. CSS3 tiene un mayor control sobre la maquetación, permitiéndonos diseñar sin pensar en las dificultades que nos van a originar los distintos navegadores.
Este es uno de los problemas de ser diseñador y además maquetador, ya que a menudo te condiciona el ser conocedor de los problemas que luego te vas a encontrar en la maquetación, aunque habrá quien lo vea como beneficioso…
CSS3 incorpora muchas novedades, vamos a destacar algunas de las que me parecen más impactantes, por su resultado visual y sobre todo por lo difícil que ha sido conseguir ese mismo resultado hasta la fecha.
(más…)
por Omar Benyakhlef | Diseño de páginas web
Gloobs, diseño web profesional.
Gloobs.com es mi página personal, en la que ofrezco mis servicios como diseñador web freelance. Con esta será posiblemente la 6ª vez que la rediseño y seguro que no es la última.
En este post de diseño web, voy a intentar destripar la nueva web para contar cómo está hecha, tanto estructural como funcionalmente. Espero vuestros comentarios y críticas. Gracias.
(más…)
por Omar Benyakhlef | Diseño de páginas web, Fotografía
Fotografías gratis, libres de derechos
Cualquier diseño web necesita buenas imágenes con las que ilustrar sus contenidos.
A menudo nos vemos obligados a pagar unos derechos abusivos para poder hacer uso de ellas.
Lo cierto es que aunque pensemos que no, las multas existen y son muy elevadas. «Robar» una imagen y mostrarla en tu sitio puede suponer una multa que puede llegar a hundirte. Dicen, que existen rastreadores que buscan concordancias en la información de los pixels, cuando la coincidencia supera un x%, salta la alarma y la revisan detenidamente, el resto ya podéis imaginarlo.
También existe la «leyenda urbana» de que si modificas una imagen ya no pueden exigirte derechos, pero os aseguro que yo he vivido en un anterior trabajo, cómo nos multaban por haber usado una fotografía que posteriormente había sido tratada y modificada.
De todos modos, existen muy buenas imágenes gratis, con una calidad suficiente para nuestros diseños web, Dzineblog nos muestra una relación de 30 sitios en los que podemos descargarnos fotografías gratis.
- Pikwizard
- StockXchange
- StockVault
- Photocase
- Dreamstime
- Open Photo
- MorgueFile
- Every Stock Photo
- Studio 25
- Woophy
- DexHaus
- Photogen
- About Pixels
- FreeFoto
- Free Photos Bank
- Bancoimagenes
- Pixel Perfect Digital
- Pixelio
- Pixel Galerie
- Nations illustrated
- Vintage Pixels
- Free Picture Click
- 9×13
- Design Packs
- Image* After
- MIcro Shots
- Turbo Photo
- Free Digital Photos
- Bluevertigo
- FontPlay
- Digital Dreamer
por Omar Benyakhlef | Diseño de páginas web, Usabilidad
Usabilidad de una página web
¿Qué entendemos por un diseño web usable?.
La usabilidad es un valor empírico, ya que sus resultados son obtenidos a través de unos test realizados a una muestra de usuarios. Estos valores obtenidos no son ni buenos ni malos, sino que dependen del propósito que nos hayamos marcado o de con qué lo estemos comparando. Se trata pues de evaluar si el diseño web es válido para el propósito para el que ha sido construido.
¿Es usable tu diseño web?, para contestar a esta pregunta hay que evaluar varios factores, por separado y en conjunto, ya que todos y cada uno de ellos han de tenerse en cuenta si verdaderamente queremos que nuestra página web sea usable. Para evaluar la usabilidad de una web, deberemos de verificar la accesibilidad, la identidad, navegabilidad y contenido.
(más…)
