Como diseñadores web, buscamos la perfección en nuestros procesos diarios. Aunque somos humanos, muchas de nuestras tareas diarias consisten en manejar proyectos de diseño y desarrollo hasta el último píxel. En el camino, a veces pasamos por alto los detalles que preferiríamos no mantener para mantener nuestra ventaja profesional.
A continuación hay una lista de 10 errores que probablemente estés cometiendo como diseñador web. Usa estos errores como un medio para corregir malos hábitos o superar los obstáculos de los que todos somos culpables.
Flash es increíble, pero ya no es lo que solía ser. Si bien Flash ofrece algunas experiencias animadas increíbles, también viene con algo de equipaje. Los largos tiempos de carga, la falta de soporte móvil o tener que aprender otro idioma completo es lo que ha causado su reciente desaparición. Actualmente, solo un puñado de dispositivos móviles admiten flash con soporte adicional de complementos.
El soporte futuro para Flash parece un poco sombrío a medida que surgen nuevas bibliotecas. Las bibliotecas basadas en JavaScript como jQuery o AngularJS están cambiando la forma en que usamos Internet y a velocidades increíbles para arrancar.
Varias bibliotecas de JavaScript disponibles para introducir todo tipo de funcionalidad en sus diseños web y aplicaciones.
2. Imágenes masivas
Una tendencia común en estos días es usar imágenes más grandes en un sitio web. Si bien esto se suma a la experiencia y brinda a los usuarios mucho que ver, también agrega algunas complicaciones a la mezcla.
Un gran resultado del uso de imágenes más grandes es el aumento del tiempo de carga de la página. Varias herramientas ayudan con la optimización de imágenes como GruntJS-ImageMin (para todos los Grunts), ImageOptim (a través de la línea de comandos o GUI) y aplicaciones como CodeKit y PrePros que optimizan las imágenes automáticamente dentro de la aplicación. Estas herramientas ayudan a nuestros flujos de trabajo, pero no resolverán por completo esos temidos problemas de tiempo de carga.
Últimamente, muchos diseñadores han adoptado la tendencia SVG y han utilizado código para dibujar o animar gráficos en el navegador. El resultado equivale a una carga de página acelerada y todavía muchos elementos llamativos para mirar.
Otra razón por la que las imágenes complican las cosas es su falta de capacidad de respuesta. Una imagen tiene un ancho y alto establecidos y eso nunca cambiará. Un navegador puede sesgar y escalar una imagen, pero el tamaño del archivo no se ve afectado.
El W3C está abordando este problema actualmente para incluir el nuevo <picture>elemento en nuestro marcado HTML5 actual. Agregar este elemento permite llamar a diferentes tamaños de imagen dentro del elemento según el ancho de la pantalla. El resultado final es la mejor experiencia para cualquier usuario en cualquier dispositivo.
Capturas de pantalla de útiles ejecutores de tareas y optimizadores de imágenes para diseñadores y desarrolladores web.
3. Altos y anchos fijos
Los tamaños fijos restringen la adaptación para todos los usuarios. Si bien existen soluciones alternativas, estos principios deben evitarse para permitir un patrón de diseño web verdaderamente receptivo. Establecer una altura fija en su CSS, por ejemplo, limita lo que el usuario puede ver a menos que esa altura se ajuste más tarde con una consulta de medios. Tener este código adicional conduce a problemas de rendimiento e hinchazón que, de otro modo, no sería necesario. Hay excepciones a esta regla, pero como base siempre se debe evitar establecer tamaños fijos si es posible.
4. Suponiendo que su diseño se ajuste a todos los tamaños de pantalla
Los diseñadores que trabajan dentro de Photoshop, Sketch o cualquier otro editor gráfico, diseñan para puntos de interrupción específicos en su flujo de trabajo receptivo. Si bien estos anchos de pantalla cubren muchos dispositivos, no siempre los cubre a todos. Con tantos dispositivos en el mercado, es realmente difícil diseñar para todo.
Pensar en el futuro y una planificación adecuada pueden ofrecer el mejor resultado con su diseño en ciertos anchos. Asegúrate de tener esto siempre en mente y definitivamente prueba en los dispositivos a los que tienes acceso. Si bien la mayor parte del diseño se puede hacer en un editor gráfico, gran parte se diseñará dentro del navegador una vez que se alcance esta etapa.
5. Uso excesivo de animaciones o efectos
Muchos sitios web son impresionantes de experimentar. Algunos ofrecen experiencias únicas, mientras que otros ofrecen contenido increíble. La clave y el verdadero secreto del diseño web es combinar ambos principios. Muchos sitios web quieren impresionar tanto al usuario que se olvidan de por qué el usuario llegó al sitio web en primer lugar, el contenido.
Las animaciones populares o los trucos se interponen en el camino de la experiencia, como elementos que se desvanecen, suben, bajan, giran, etc. o piratean desplazamientos, por ejemplo. El uso de estos tratamientos definitivamente puede mejorar la experiencia, pero debe estar atento al implementarlos en sus proyectos.
6. Mal trato de los enlaces
Asegúrese de apreciar lo que es un enlace y lo que hace. Un hipervínculo permite que la web exista si lo piensa de manera integral. Para pasar de una página a otra fácilmente se requiere un enlace. Los usuarios necesitan un acceso rápido a los enlaces para obtener la información que buscaban. ¡Asegúrese de que sus enlaces se vean como enlaces y no como esos subrayados azules predeterminados también!
7. No usar el enfoque DRY con tu CSS
Utilice el enfoque DRY para beneficiarse a sí mismo y a sus usuarios. SECO significa Don’t Repeat Yourself. Este método ayuda a mantener su código limpio y conciso mientras usa solo el código necesario para darle estilo a su sitio web.
El CSS tradicional requiere mucha repetición al diseñar elementos específicos dentro de otros elementos. Sus selectores comúnmente aumentan de tamaño y terminan tomando más tiempo para escribir. Use clases a lo largo de su diseño en lugar de diseñar cada elemento que tiene en su HTML de forma independiente.
Los lenguajes de preprocesamiento de CSS como Less y Sass son lo último y lo mejor en tecnología CSS. Estos lenguajes aceleran el proceso de diseño y desarrollo al ofrecer características como anidamiento, variables, mixins, funciones y más. El código producido se compila luego en el código CSS normal que todos conocemos y amamos. Less y Sass permiten a los diseñadores y desarrolladores web escribir menos líneas de código sin repetición.
8. Degradación elegante y mejora progresiva
La degradación elegante es la práctica de construir su funcionalidad web que proporciona un cierto nivel de experiencia de usuario en los navegadores más modernos, pero degrada de forma elegante a un nivel más bajo de experiencia de usuario en los navegadores más antiguos.
Un ejemplo común de esto es el soporte para Internet Explorer 7 y 8. Muchos usuarios simplemente no actualizan sus navegadores y, como resultado, se requiere algún nivel de soporte para sucumbir a este factor.
A veces, desarrollar un sitio web moderno parece un paseo por el parque hasta que te das cuenta de que tienes que admitir algunos navegadores más antiguos que tienen sus propias dependencias específicas.
La mejora progresiva es similar a la degradación elegante pero hace las cosas a la inversa. Comience con un nivel básico de experiencia de usuario compatible con todos los navegadores. Luego, también incorpora más funciones disponibles automáticamente para los navegadores que pueden usarlas.
Ambos enfoques son difíciles y son lo que distingue a algunos buenos sitios web de los malos. Hay muchos navegadores diferentes disponibles para admitir diferentes escenarios. Muchas veces, los diseñadores web y sus clientes deben decidir qué será y qué no será compatible con sus usuarios. En el mejor de los casos, debe intentar usar ambos enfoques en sus proyectos para brindar la mejor experiencia a los usuarios más activos que pueda.
La navegación es un componente clave para la funcionalidad de un sitio web. Los diseñadores deben encontrar una manera de hacer que la experiencia del usuario sea casi natural al navegar por un sitio web proporcionando una experiencia de usuario común. La mayoría de los usuarios adquieren conocimiento de la experiencia al instante si está bien diseñada y pensada.
Si la experiencia del usuario es deficiente, el usuario se sentirá frustrado y es probable que no vuelva a visitar el sitio para buscar una mejor solución en otra parte. Ten siempre en cuenta la usabilidad. Su diseño puede verse increíble, pero si no es funcional y fácil de usar o aprender, entonces el diseño se vuelve inútil.
El diseño reciente de Denny’s muestra una gran cantidad de contenido, pero se basa en el desplazamiento horizontal y vertical, lo que dificulta la navegación.
10. Centrarse más en el diseño que en el contenido
Un principio común que sigue a la función se hizo popular en el siglo XX durante la fase de diseño industrial de la arquitectura moderna. Este principio se destaca junto con cualquier forma de diseño en la historia reciente.
Las mismas reglas se aplican para todo, desde la arquitectura hasta el diseño gráfico y web. La forma de un objeto debe basarse primero en su función o propósito previsto.
Los sitios web son como cubos de información recopilados a través de Internet. Los usuarios utilizan todos y cada uno de los sitios web que visitan para digerir los datos de su elección. Si el usuario no puede obtener la información que necesita debido a una mala experiencia de usuario, pasa a otra fuente. La gente quiere información rápidamente, lo cual es una de las principales razones por las que Internet es tan grande y poderoso.
La forma sobre la función juega un papel importante en el éxito de muchos sitios web diseñados correctamente. Estos sitios web son estéticamente agradables y naturalmente funcionales.
Craigslist se enfoca primero en el contenido en lugar del diseño. Los usuarios probablemente reaccionarían negativamente a un rediseño completo de la experiencia del usuario.
Solo hemos cubierto un puñado de errores que los diseñadores web suelen cometer. Hay muchos más errores que todos hemos experimentado. Comparta los errores que ha cometido a continuación y cuéntenos qué hizo para corregirlos.
Imagen en miniatura del artículo de Ingka D. Jiw / shutterstock.com