Con las tendencias actuales de diseño, opino que la atención a los detalles es quizás la parte más importante de cualquier diseño, ya sea en la web o en la impresión.
En este artículo, voy a exhibir algunos ejemplos de diseños en la web que carecen de algunos detalles que harían de los sitios web un lugar mucho más agradable para explorar.
Renuncia
? De ninguna manera estoy diciendo que soy perfecto?Debo señalar que no estoy criticando nada de lo que alguien haya hecho en el pasado, simplemente le digo lo que haría para que el diseño sea más detallado y una mejor experiencia para el usuario cuando usa el sitio. De ninguna manera estoy diciendo que soy perfecto, todavía estoy aprendiendo y estas técnicas pueden no ser las mejores soluciones, pero los pequeños detalles aquí o allá mostrarán que has hecho el esfuerzo de hacer que el sitio sea tan bueno como sea. ¡Crees que podría ser!
Por ejemplo:
La sección de comentarios de Dribbble no tiene un ancho máximo, por lo que puede manipular el aspecto del sitio web sin problemas. Sé que es solo un pequeño detalle, pero creo que la atención al detalle es el aspecto más importante del diseño.
¿Te gusta el artículo? Asegúrese de suscribirse a nuestro feed RSS y síganos en Twitter para mantenerse al día con el contenido reciente.
Areas de texto
Las áreas de texto fueron el primer elemento que llamó mi atención y me dio la idea de escribir este post, así que comenzaré aquí.
Este ejemplo es un tanto irónico, ya que proviene del popular sitio web de diseño compartido, Dribbble.
Si accedes al tiro de cualquier jugador en el sitio, verás un cuadro de comentarios en la parte inferior. Ahora porque soy un poco violinista, siempre juego con elementos en los sitios web cuando los descubro por primera vez y me di cuenta de que podía "romper". éste:
La solución
Con el textarea Elemento, la mejor práctica es utilizar. ancho mínimo / máximo & min / max-height. El código actualmente en uso es:
Yo convertiría esto a:
Este código mantiene el ancho del cuadro de comentario fijado en 424px en todo momento, pero le permite al usuario aumentar la altura de la casilla dependiendo de cuánto escriban allí.
Gracias a Chris Allwood que me dirigió al post 'Textarea Tricks' por Chris Coyier de CSS Tricks en el textarea Elemento sobre las diferentes cosas que puedes hacer para manipularlo.
Hover & Active States en Enlaces
Los estados activo y activo son probablemente el detalle y la funcionalidad más fáciles que puede agregar a un diseño.
Cuando se trata de enlaces, los diseñadores suelen cambiar el color al pasar el mouse, agregar un subrayado o ponerlo en negrita. Usar estas técnicas simples será una buena opción para ciertos diseños, pero hay un par de otros detalles que no creo que se usen con la frecuencia suficiente.
La solución
Sangría desde la izquierda:
Añadiendo un fondo:
Presione hacia abajo al hacer clic:
Consejo de bonificación
Todos los detalles que mencioné anteriormente se pueden hacer un poco más agradables con el uso de las transiciones CSS3. A menudo utilizo el siguiente código para animar el efecto ligeramente, lo cual es un detalle agradable:
Hay una serie de variables diferentes que podría usar, esta es solo la propiedad principal que uso regularmente. NetTuts + tiene un buen artículo sobre las transiciones fundamentales de CSS3 que es muy útil.
Si realmente quieres irte todo el rato, te recomiendo que visites Animate.css de Dan Eden. Lo usé en Cardinal Menswear y creo que hace una gran diferencia en la experiencia al ver el sitio.
Cuidado con los estados negativos
Cuando los diseñadores usan negativo flotar y activo estados
Harry Roberts, de CSS Wizardry, escribió un artículo sobre los hovers negativos en 2011 que me hizo pensar en algunos de los detalles que había aplicado a los sitios en los que he trabajado en el pasado. Me di cuenta de que era culpable de crear un: enlace con un subrayado y, luego, hover eliminaría ese subrayado y, después de leer el artículo de Harry, se me ocurrió que esto podría confundir a un visitante.
Color de selección de texto e imagen
A pesar de que este es un detalle muy pequeño, es muy fácil de hacer, así que siempre creo que muestra que el diseñador se preocupa cuando agrega este código para las personas que lo notarán y lo apreciarán.
La solución
Conclusión
Espero que hayas aprendido uno o dos trucos con este artículo, estaré atento a los nuevos y pequeños detalles que puedo aplicar a mis diseños en el futuro.
¿Tienes algunos consejos o trucos que crees que me he perdido o que deberías considerar usar? Siempre estamos aprendiendo como diseñadores y creo que es importante mantenernos atentos para que los usuarios de nuestros sitios web obtengan la mejor experiencia posible.
Deje un comentario a continuación con cualquier sugerencia de fragmentos de código que haya usado en sus diseños.