por Omar Benyakhlef | accesibilidad, Diseño para móviles, Diseño Web, Fuentes, Google, iPhone, Usabilidad
El año 2017 fue denominado por Google como“El año de los móviles” en base a su informe anual Consumer Barometer 2017. Por primera vez en la historia, el uso de Internet en dispositivos móviles registraba un porcentaje superior al 50 % en los 63 países incluidos en el estudio. España es en este sentido uno de los países más “adictos” a su uso, un 91% de los usuarios online se conecta a través de su Smartphone, los mismos que Hong Kong o en Singapore.Un 64% ve vídeos online y un 79% utiliza su móvil para realizar búsquedas, una de las cifras más altas del mundo, muy por encima de la media mundial que es del 65%.
Estos datos son suficientemente relevantes como para prestar una mayor atención al diseño web móvil, especialmente a las tipografías utilizadas. Desgraciadamente nuestra labor como diseñadores web viene condicionada en la mayoría de las ocasiones por las guías de estilo establecidas por nuestros clientes.
El uso correcto de la tipografía en el diseño web móvil es fundamental en la usabilidad y experiencia del usuario, veamos lo que dicen los expertos sobre cómo mejorar este uso en dispositivos móviles. (más…)
por Omar Benyakhlef | Fuentes, Mobile, Usabilidad
Typestrap es un kit de tipo basado en CSS que utiliza una escala modular para ayudarnos a controlar la tipografía en las distintas resoluciones de pantalla, desktop, mobile,… (más…)
por Omar Benyakhlef | Android, Diseño de páginas web, Diseño para móviles, Diseño Web, Google, Usabilidad
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…)
por Omar Benyakhlef | jQuery, Usabilidad
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…)
por Omar Benyakhlef | Diseño para móviles, iPhone, jQuery Mobile, Mobile, Usabilidad
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…)
por Omar Benyakhlef | jQuery, Usabilidad
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.
