Share
¿Tiene problemas para elegir el icono correcto para un problema específico? ¿Trabajar con su desarrollador para obtener el mejor resultado posible para su cliente? Este artículo le dará una idea de los principios, la resolución de problemas y la colaboración necesarios para encontrar algo que se ajuste a!
Los iconos se encuentran entre los aspectos visuales más importantes del diseño web. El nivel de detalle, el estilo y la aplicación dependen de una serie de cosas diferentes. Recientemente he estado trabajando en varios sitios web que requieren iconos muy específicos para comunicar metáforas sutiles.
Esta publicación pasará por un ejemplo reciente, donde se me pidió que creara un ícono de advertencia para un estado de error de documento. Será una guía lineal de mi proceso de pensamiento y colaboración con el desarrollador, pero también abordará las siguientes etapas de guía: -
Se supone que esta publicación no es exhaustiva, pero te beneficiará al recorrer un ejemplo del mundo real..
A veces construirá su sitio web desde cero y necesitará generar una serie de íconos para comunicar ciertas cosas visualmente. A menudo, recibirá una solicitud de un desarrollador o cliente para un icono único. La solicitud en este ejemplo provino de un desarrollador. Necesitaba un icono de estado de error para un documento. Al principio, sugirió un ícono de página oscura con una X detrás para usarlo en los casos en que un tipo de documento no es compatible o si un documento no se carga por algún motivo. Tenía algo como esto en mente:
No esta mal verdad Me lo quité un poco y le envié esto ...
Pero, acordamos que era necesario hacer referencia al icono del documento de alguna manera, ya que era específicamente para un error de carga del documento.
Necesitamos considerar el conjunto de íconos como un todo, así que discutimos algunas otras ideas.
"¿Qué pasa con el icono de 'alertas'?"
nosotros pensamos Pero eso ya estaba en uso para alertas clínicas..
Cuando se trata de un conjunto completo de iconos, es importante tener una comprensión del conjunto de iconos. De lo contrario, podría reutilizar accidentalmente una metáfora que ya se ha utilizado en otro lugar..
Luego consideramos el icono del documento con un triángulo alrededor de él:
Esto fue solo una sugerencia del desarrollador, pero la experiencia me dijo que era demasiado compleja. Se hizo para una metáfora torpe que no se comunicaba lo suficientemente directamente.
A continuación, hice la sugerencia de que deberíamos usar una 'X' grande dentro de un círculo..
Esto tampoco era óptimo, ya que el mensaje comunicado era uno de peligro! Probablemente fue demasiado exagerado.
La lección aquí es considerar el contexto de su icono. El color y el peso visual es una forma importante de comunicar esto. Por ejemplo, el rojo se usa tradicionalmente para advertir a las personas, mientras que los colores más claros como el gris son más neutros y sub - comunicarse que todo esta bien!
La sub - comunicación es un lenguaje semiótico; algo que también es eminente en la tipografía.
Por ejemplo, una fuente decorativa sub-comunica a un personaje femenino, mientras que una fuente dibujada a mano puede sub-comunicar algo más lúdico e infantil..
¿Qué estás tratando de sub - comunicar con tu icono??
Por ejemplo, con el ícono de error del documento traté de recuperar los mensajes de error que se sub-comunicaron de una manera que no creó mucho pánico.
Recordé los mensajes de error que recibía cuando mi conexión a Internet se caía; fueron perfectos No demasiado exagerado, pero le avisa sutilmente al usuario que algo está mal..
Definitivamente la dirección correcta..
¡Este último ejemplo del navegador Chrome fue perfecto para lo que necesitaba! Sutil, pero dejando que el usuario sepa que algo está mal. Todo, desde el tamaño del ícono hasta el color gris utilizado, ayuda al usuario a comprender la gravedad del problema, pero no es tan exagerado como para causar pánico..
El ícono final creado en esta instancia fue simple, pero también comunicó el mensaje correcto.
El arte de usar iconos es algo que necesita un poco de experiencia y un ojo para el diseño, pero se puede abordar siguiendo ciertos principios como los que hemos discutido. Si su ícono es demasiado ambiguo, pero la metáfora se ajusta, considere usar una etiqueta como una señal visual para ayudar a los usuarios a identificar la información. Gracias por leer, siéntase libre de compartir sus propias experiencias de diseño de iconos en los comentarios!
Accentsconagua