por Omar Benyakhlef | CSS, Diseño de páginas web, Diseño para móviles, Diseño Web, responsive, Taller Web, Trucos CSS
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.
por Omar Benyakhlef | Diseño de páginas web, Diseño para móviles, Diseño Web, Mobile, SEO, Usabilidad
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
por Omar Benyakhlef | CSS, Diseño de páginas web, Diseño para móviles, Diseño Web, Trucos CSS, Usabilidad
¿Por qué seguir haciendo aburridos formularios cuando podemos usar impresionantes efectos CSS?. A veces tendemos a lo fácil, y no hay nada más aburrido en una web que rellenar un formulario, añade estos efectos y verás que aumentarán los usuarios que lo utilizan.
Es exagerada la cantidad de aburridos formularios que además piden campos totalmente innecesarios que encontramos en internet. Tu máxima como diseñador ha de ser pedir los datos justos, y si es posible, hacerlo dinámico, divertido incluso, usando iconos, efectos, o estos fantásticos efectos CSS que puedes descargar gratis en tympanus.
Además de vistosos son muy útiles, por ejemplo a la hora de ahorrar espacio, nada mejor que meter el texto dentro del input y que al pinchar sobre él salga y se coloque en un lugar que no moleste, son muchos los efectos que vais a encontrar, espero que os sean útiles.
Ver y Descargar Efectos Input con CSS
por Omar Benyakhlef | Descargas, Diseño para móviles, Mobile, Photoshop, Redes Sociales, Utilidades
Como diseñadores, en numerosas ocasiones debemos realizar propuestas para clientes relacionadas con las redes sociales, entre ellas Instagram es una de las más activas a la hora de proponer nuevas ideas de negocio, a través de sus stories o publicaciones. En el caso de los stories no hace falta ningún tipo de template, pero si para las publicaciones, cuando queremos enseñar al cliente cómo quedará su post.
En esta ocasión he preparado un PSD que podréis descargar de modo gratuito, en resolución grande, con un tamaño de 1125x2436px. Todo guardado en capas para que podáis editar vuestros contenidos, con todos los elementos necesarios. Espero que os sea útil.
Veréis que en el ejemplo he utilizado mi perfil de Instagram, si os gustan mis post, podéis seguirme en Instagram @designgloobs
Instagram Template PSD
SÍGUEME EN INSTAGRAM DESCARGAR PSD GRATIS
por Omar Benyakhlef | Diseño para móviles, Diseño Web, Fuentes, UI, Usabilidad, UX
Cuando hablamos de diseñar para web o app, una de las preguntas que me suelen hacer es ¿cuál es el tamaño correcto que debo usar?.
La proliferación de pantallas HD lleva tiempo dándonos dolor de cabeza a los diseñadores. Lo que en un principio sólo era un simple «Pixel (px)» ahora se ha convertido en «puntos (pt)», «píxeles escalables (sp)» o «píxeles independientes de la densidad (dp)» como para no preocuparse !!
En este post no nos vamos a meter en temas de programación, vamos a enfocarlo sólo desde el punto de vista del diseñador, si se te escapan estos términos o la densidad de pantalla, o los factores de escala, lee este post de Densidad de pixel, tamaño de diseños para HTML, Android e iOS
Pues bien, para definir el tamaño correcto de fuentes, como es evidente, habrá que diferenciar si se trata de web, de web-mobile, de iOS o de Android, vamos a ello:
NOTA: Todas estas pautas están definidas por Google y Apple developer.
Pautas de tipografía de iPhone
| Títulos de página, títulos modales (el mayor tamaño para título será de 34pt) |
17pt |
| Texto de párrafo, enlaces |
17pt |
| Texto secundario |
15pt |
| Texto terciario, subtítulos, botones segmentados |
13pt |
| Botones, entradas de texto |
17pt |
| Barra de acciones (leyenda de iconos de acción) |
10pt |
Pautas de tipografía de Android
En este caso tomamos como referencia la fuente roboto
| Títulos de página |
20sp |
| Texto de párrafo, enlaces |
14sp |
| Lista de títulos |
14sp |
| Lista de títulos de elementos, fragmentos de texto importantes |
16sp |
| Texto secundario, subtítulos |
14sp |
| Botones, pestañas |
14sp |
| Entradas de texto |
16sp |
Pautas de tipografía para Web
| Títulos de página |
20px – |
| Texto de entrada |
16px |
| Tamaño de cuerpo |
16px |
| Texto secundario |
13 – 14px |
Los títulos a partir de 20px, luego ya queda a criterio del diseñador si quiere usar títulos extra grandes.
Equivalencias entre pt, px, em, %, sp
Para ver la equivalencia de sp o dp con px, accede aquí: Equivalencias px dp
| Pt |
Px |
Em |
Porcentaje |
| 6pt |
8px |
0.5em |
50% |
| 7pt |
9px |
0.55em |
55% |
| 7.5pt |
10px |
0.625em |
62.5% |
| 8pt |
11px |
0.7em |
70% |
| 9pt |
12px |
0.75em |
75% |
| 10pt |
13px |
0.8em |
80% |
| 10.5pt |
14px |
0.875em |
87.5% |
| 11pt |
15px |
0.95em |
95% |
| 12pt |
16px |
1em |
100% |
| 13pt |
17px |
1.05em |
105% |
| 13.5pt |
18px |
1.125em |
112.5% |
| 14pt |
19px |
1.2em |
120% |
| 14.5pt |
20px |
1.25em |
125% |
| 15pt |
21px |
1.3em |
130% |
| 16pt |
22px |
1.4em |
140% |
| 17pt |
23px |
1.45em |
145% |
| 18pt |
24px |
1.5em |
150% |
| 20pt |
26px |
1.6em |
160% |
| 22pt |
29px |
1.8em |
180% |
| 24pt |
32px |
2em |
200% |
| 26pt |
35px |
2.2em |
220% |
| 27pt |
36px |
2.25em |
225% |
| 28pt |
37px |
2.3em |
230% |
| 29pt |
38px |
2.35em |
235% |
| 30pt |
40px |
2.45em |
245% |
| 32pt |
42px |
2.55em |
255% |
| 34pt |
45px |
2.75em |
275% |
| 36pt |
48px |
3em |
300% |
Nielsen sugería un tamaño mínimo de 10 puntos correspondiente a 13px o bien 12 puntos que corresponde a 16 px si el público objetivo eran personas mayores.
Si nos fijamos en alguno de los sitios más visitados, Twitter, Amazon o Wikipedia, utilizan 14px y Google 13px
Todas estas tablas y medidas significan más tiempo a la hora de desarrollar un trabajo, pero son indispensables si queremos que el resultado de nuestros diseños sea perfecto en cualquier pantalla. Pero además de los tamaños de fuente, hay otros factores que son muy importantes y que ayudan a que la usabilidad sea mejor, un ejemplo es el interlineado, de nada sirve utilizar buenos tamaños si luego hacemos denso el texto. Como norma general se usa un mínimo del 120% del tamaño de la fuente para el interlineado, siendo 1.5em, 150% lo ideal- Tenemos que hacer que la lectura sea fluida, que no cueste diferenciar el renglón, pero que tampoco haya que pegar grandes saltos de una línea a otra.
Otra de las recomendaciones, se refiere a la cantidad de texto por línea. El ancho óptimo va de los 45 a 75 caracteres, estableciéndose que una línea de 66 caracteres se puede considerar ideal para obtener una buena experiencia de lectura.
Si lo que te preocupa es el contraste, hay una herramienta muy útil que nos indica si es o no correcta la elección que hemos designado a nuestro fondo y tipografía. Contraste fondo-tipografía
Más abajo tienes más artículos que te pueden ayudar también a la hora de elegir la fuente correcta.
por Omar Benyakhlef | Diseño de páginas web, Diseño para móviles, Diseño Web, Fuentes, Usabilidad
La tipografía siempre ha ocupado un lugar preferente en el diseño gráfico. Además de ser básica para destacar el mensaje que queremos comunicar, también nos sirve para establecer una jerarquía dentro de ese mensaje.
Esta guía pretende dar indicaciones básicas para poder hacer un uso correcto enfocado al diseño web y de web Apps.
(más…)
