Crea tu web responsive online !!!

Crea online tu web responsive

Crea online tu web responsive

El presente y futuro del diseño web es el «responsive design«.

34Grid es un sistema de red sensible formado por columnas y que nos permite adaptar nuestra web a todo tipo de resoluciones.

El procedimiento es simple. Definimos online la cantidad máxima de columnas que vamos a necesitar por fila y los márgenes entre celdas. Hecho esto, no queda más que descargar el paquete zip en el que podremos encontrar dos carpetas, «CSS» y «DEMO».

La carpeta «DEMO» contiene un archivo html que nos muestra las posibles configuraciones.

 

DESCARGA TU WEB RESPONSIVE

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…)

Tendencias Web. Responsive Design.

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…)

Diseño de Interfaz de Aplicaciones para Móviles

Diseño de Interfaz de Aplicaciones para Móviles

Un buen diseño de interfaz de usuario (UI) es esencial para el éxito de una aplicación móvil, ha de ser fácil de usar, atractiva y responsive.
En este artículo, compartiré algunos consejos para diseñar una interfaz de usuario para aplicaciones móviles.

1. INVESTIGACIÓN

Antes de empezar a diseñar, es importante realizar una investigación para comprender las necesidades y expectativas de los usuarios. Esto te ayudará a crear una interfaz que sea realmente útil y atractiva para ellos.

2. USABILIDAD

La usabilidad es lo más importante en el diseño de una interfaz de usuario. Una interfaz debe ser fácil de usar, incluso para usuarios que no están familiarizados con ella.

Para mejorar la usabilidad, utiliza los siguientes principios:

  • Simplifica: La interfaz debe ser lo más simple posible. No utilices elementos innecesarios o confusos.
  • Evita la sobrecarga de información: No presentes demasiados datos a la vez.
  • Utiliza un diseño consistente: Utiliza los mismos elementos y patrones en toda la interfaz.
  • Proporciona retroalimentación: Informa a los usuarios de lo que está sucediendo.

3. INTERFAZ ATRACTIVA

Una interfaz atractiva puede ayudar a captar la atención de los usuarios y hacer que tu aplicación sea más memorable.

4. SÉ RESPONSIVE

Las pantallas de los dispositivos móviles varían en tamaño y resolución. Por ello, tu interfaz debe ser responsive para que se adapte a diferentes tamaños de pantalla.

5. PRUEBA TU DISEÑO CON USUARIOS REALES

Una vez que tengas un prototipo de tu diseño, es importante probarlo con usuarios reales. Esto te ayudará a identificar posibles problemas y mejorar la experiencia del usuario.

Conclusiones

Siguiendo estos consejos, podrás crear una interfaz de usuario para aplicaciones móviles que sea fácil de usar, atractiva y responsive.

Tendencias en el diseño de interfaces para móviles

El diseño de UI para móviles está en constante evolución. A continuación, se presentan algunas tendencias que están ganando popularidad:

1. Diseño Neomórfico

El diseño neomórfico es una tendencia que se ha popularizado en el último tiempo. Se caracteriza por imitar la apariencia de objetos físicos en la interfaz digital, utilizando sombras suaves y realismo para crear un aspecto tridimensional. Este enfoque busca generar una experiencia más táctil y realista para los usuarios. Un ejemplo es la aplicación de Apple Music en iOS, que ha adoptado algunos elementos del diseño neomórfico, especialmente en su uso de sombras suaves y efectos de luz que crean un aspecto tridimensional para los elementos de la interfaz. Por lo general, si andáis perdidos, fijaros en qué está haciendo Apple, porque sus diseños siempre son vanguardia y tendencia.

2. Diseño con Espacios en Blanco y Minimalismo

El minimalismo sigue siendo una tendencia fuerte en el diseño de interfaces móviles. El uso de espacios en blanco, colores suaves y tipografías legibles se enfoca en la simplicidad y la elegancia. Esta estética no solo mejora la estética de la interfaz, sino que también permite a los usuarios concentrarse en el contenido esencial.

3. Diseño Oscuro (Dark Mode)

El modo oscuro ha ganado popularidad en aplicaciones móviles debido a su apariencia atractiva y a su capacidad para reducir la fatiga visual, especialmente en entornos con poca luz. Ofrece un contraste más bajo, lo que puede disminuir el consumo de energía en pantallas OLED, contribuyendo así a una mejor eficiencia energética.

4. Diseño Orientado al Usuario (User-Centric Design)

El enfoque centrado en el usuario implica diseñar la interfaz en función de las necesidades, preferencias y comportamientos reales de los usuarios. Esto se logra a través de la investigación en profundidad y la comprensión completa del usuario final, permitiendo la creación de interfaces más personalizadas y relevantes.

5. Interactividad y Animaciones Significativas

Las animaciones y la interactividad bien diseñadas añaden un elemento de dinamismo y atractivo a la interfaz. Estas no solo hacen que la experiencia sea más agradable, sino que también ayudan a guiar al usuario, proporcionar retroalimentación y comunicar información de manera efectiva.

6. Integración de Tecnologías Emergentes

El uso de tecnologías emergentes como la realidad aumentada (AR) y la realidad virtual (VR) en las interfaces móviles está en aumento. Estas tecnologías ofrecen experiencias inmersivas y altamente interactivas, transformando la forma en que los usuarios interactúan con las aplicaciones.

7. Interfaces de Usuario Basadas en Gestos

Con la eliminación de botones físicos en muchos dispositivos, los gestos se han convertido en un método popular de navegación. Los usuarios pueden deslizar, pellizcar, tocar y hacer gestos para interactuar con la aplicación, lo que permite una experiencia más fluida y centrada en el contenido.

Conclusión

El diseño de interfaces para aplicaciones móviles está en constante evolución, impulsado por avances tecnológicos y cambiantes expectativas de los usuarios. Adoptar estas tendencias puede ayudar a crear interfaces atractivas, intuitivas y altamente funcionales que satisfagan las necesidades de los usuarios y brinden una experiencia móvil excepcional. Sin embargo, es fundamental recordar que cada aplicación es única y debe adaptarse a su audiencia y contexto específico.

Cómo Utilizar el Tamaño de Tipografías en Dispositivos Móviles para una Experiencia Óptima

Cómo Utilizar el Tamaño de Tipografías en Dispositivos Móviles para una Experiencia Óptima

El diseño web para dispositivos móviles se ha convertido en un aspecto crucial para garantizar una experiencia de usuario satisfactoria. Uno de los elementos más importantes del diseño móvil es el tamaño de la tipografía, ya que influye en la legibilidad, la accesibilidad y, en última instancia, en la retención de los visitantes. Aquí te brindamos pautas esenciales para utilizar el tamaño de tipografías de manera efectiva en dispositivos móviles. (más…)

Diseño de una Landing: ¿Cómo Crear Páginas de Aterrizaje Efectivas?

Diseño de una Landing: ¿Cómo Crear Páginas de Aterrizaje Efectivas?

¿Estás buscando una forma efectiva de captar la atención de tus visitantes y convertirlos en clientes potenciales? El diseño de una landing puede ser la respuesta que estás buscando. En este artículo, exploraremos los fundamentos del diseño de una landing y cómo puedes crear páginas de aterrizaje efectivas que impulsen el éxito de tu negocio en línea.

(más…)

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.

Alinear capas sin salto de línea con CSS

Alinear capas sin salto de línea con CSS

Existen varias maneras de alinear capas sin que se produzca salto de línea. Para mi esta es la más sencilla, y además es responsive, por lo que no tendrás ningún problema independientemente de la resolución de pantalla que esté usando el usuario de tu sitio.

Este es el único código que tienes que usar en tu CSS en el contenedor que va a alojar las distintas capas, como verás es bien sencillo:

.box {display: flex; align-items: stretch; flex-wrap: wrap;}

Con esto ya estaría, pero vamos a darle un poco de estilo a las capas que van dentro, para que no quede feo:

.uno, .dos, .tres, .cuatro, .cinco, .seis {padding:50px; color: #fff; width: 150px; font-family: ‘Bebas Neue’, cursive; font-size:30px}
.uno {background-color: #fdd129}
.dos {background-color: #c91818}
.tres {background-color: #2d4f62}
.cuatro {background-color: #498356}
.cinco {background-color: #f18f39}
.seis {background-color: #000}

Simplemente hemos dado a cada capa un color y a todas unas características de ancho, tipo de fuente y padding.

En el HTML, colocamos la capa principal y contenedor (box) y dentro las capas que van a ir alineadas.

<div class=»box»>
<div class=»uno»>Uno</div>
<div class=»dos»>Dos</div>
<div class=»tres»>Tres
<br>tiene
<br>texto
<br>extra
</div>
<div class=»cuatro»>Cuatro</div>
<div class=»cinco»>Cinco</div>
<div class=»seis»>Seis</div>
</div>

Y ya está !!!

Ahora entra en el siguiente enlace para verlo funcionando y prueba a hacer más grande y pequeña la ventana del navegador, para comprobar cómo se va adaptando automáticamente a cualquier resolución de pantalla, colocando las que no entran en la siguiente línea.

VER EJEMPLO FUNCIONANDO

 
 

Efectos sorprendentes sobre tus textos

Efectos sorprendentes sobre tus textos

Hoy traemos un efecto espectacular para tus textos, una composición retro, con luces de neón.
Solo tienes que cambiar los textos y listo, Yoav Kadosh nos ha dejado todo preparado para que simplemente tengamos que copiar la CSS y poder usarlo.
Se trata de puro CSS, con máscaras, inclinación de texto, efecto neón… Y además de ser compatible con Chrome, Edge, Firefox, Opera, Safari, es responsive, lo que significa que lo puedes usar en cualquier proyecto sin miedo a que no se vea en móvil.
Échale un vistazo, cambia los textos en la parte html y sorpréndete !!

VER DEMO Y CÓDIGO

 

 

Comprueba tu sitio web en varios dispositivos. Herramientas Gratis !!

Comprueba tu sitio web en varios dispositivos. Herramientas Gratis !!

Cuando creamos un sitio web, es fundamental recordar que tendrá que verse en todo tipo de dispositivos, con un amplio abanico de distintas resoluciones. Llevar a cabo un buen diseño y maquetación que se adapte a todos estos dispositivos, es muy importante, no sólo por ofrecer una buena experiencia de navegación al usuario, también desde el punto de vista del SEO y la penalización que conlleva no ofrecer un buen responsive.

Por lo tanto es muy importante verificar cómo se ve nuestro site y cómo se comporta en esos distintos dispositivos.

What is my screen resolution

Hoy os dejo What is my screen resolution. Se trata de una intuitiva herramienta excelente para probar cómo se verá su sitio en diferentes dispositivos. Escribes la URL y eliges entre escritorio, móvil, tableta y televisión e incluso la orientación. Verás que al pulsar sobre desktop, mobile, tablet o televisión, te saldrán unas resoluciones por defecto, pero si luego quieres probar una resolución en concreto, puedes introducirla y comprobar la visibilidad del site. Muy interesante y además GRATIS !!!

COMPROBAR RESOLUCIONES

 

 

Introducción al dibujo con SVG

Introducción al dibujo con SVG

Los SVG (del inglés Scalable Vector Graphics), son formatos gráficos vectoriales muy útiles por su flexibilidad y la capacidad de mostrar imágenes en web, sin perder calidad al cambiar de resolución. Los SVG se definen en formato XML. Esto nos permite, además de...

Necesito una web profesional

TU CUÑADO NO SABE HACER WEBS Y LO SABES...8 de cada 10 personas consultan internet antes de consumir un producto. Tu web es tu escaparate, no puedes dejarle esta responsabilidad a cualquiera. ¿Sabías que Google penaliza las webs mal hechas?. Confía en nosotros, somos...

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

Players en HTML5. Audio y Video

Una de las herramientas más útiles que ha aportado HTML5, es la posibilidad de mejorar la reproducción de archivos multimedia en nuestras webs. Además HTML5 nos permite construir reproductores tanto de audio como de video.

Webs tan populares como youtube, vimeo o daylimotion ya hace tiempo que incorporan reproductores en HTML5.

En este post de diseño web, vamos a hacer una breve introducción de las etiquetas <AUDIO> y <VIDEO> de HTML5, y vamos a ver varios tipos de reproductores que nos pueden ser muy útiles a la hora de construir nuestros sitios web.

(más…)