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…)
por Omar Benyakhlef | Diseño de páginas web, Diseño para móviles, Diseño Web, Google, Usabilidad
Cada vez son mayores las exigencias de las páginas web que diseñamos. Imágenes más grandes y pesadas o efectos que hacen más atractiva la experiencia usuario, hacen que sea indispensable comprobar si esa experiencia que estamos buscando no nos devuelva justo lo contrario, es decir, una página que tarda mucho en cargar y que como resultado nos da una tasa de abandono cada vez mayor. Nos gusta navegar y la oferta es inmensa, si un sitio nos hace esperar acabamos por abandonarlo antes de que cargue.
(más…)
por Omar Benyakhlef | Android, Diseño para móviles, Diseño Web, iPhone, Mobile, Usabilidad
Una de las especificaciones técnicas que tenemos en cuanta al analizar un teléfono es la densidad de píxeles de su pantalla. La densidad de píxeles es una unidad que se mide en píxeles por pulgada ppp o ppi en inglés (pixels per inch), nos indica la calidad de una pantalla y es fundamental a la hora de realizar un diseño para móviles.
Las pantallas de alta densidad tienen más píxeles por pulgada que las de baja densidad. Esto provoca que los elementos de una interfaz de usuario de las mismas dimensiones de píxeles, aparecen más grandes en las pantallas de baja densidad y más pequeños en las pantallas de alta densidad.
(más…)
