1. Optimizar los gráficos web para mejores tiempos de carga de la página
Aprenda a optimizar sus gráficos web seleccionando el formato adecuado y asegurándose de que sea lo más pequeño posible. A pesar de que la gente está avanzando hacia las conexiones de banda ancha, todavía hay bastantes que usan conexiones de acceso telefónico a Internet. Además, con la aparición de tecnologías de dispositivos móviles que no necesariamente tienen velocidades similares a la de banda ancha, el hecho de tener tiempos de carga de página lentos debido al tamaño de los archivos de imagen puede hacer que los usuarios se desactiven.
Aquí, una regla general de los pulgares para elegir el formato de archivo correcto: las imágenes que tienen colores sólidos se guardan mejor como PNG y GIF, mientras que las imágenes con colores continuos (como las fotografías) se guardan mejor como JPG.
Hay muchas herramientas disponibles a tu disposición que te ayudarán a optimizar aún más tus imágenes y reducir el tamaño de sus archivos; consulta esta lista de herramientas para optimizar tus imágenes.
- ¿Se puede aprender un arte?
- ¿Cuál es la armónica más adecuada para principiantes?
- ¿Cuáles son los consejos más importantes para un principiante que aprende a soldar?
- ¿Debo aprender código, o código y aprender a medida que avanzo?
- Soy un pequeño emprendedor y necesito ayuda para diseñar y comprar empaques, ¿dónde es un buen lugar para comenzar?
Al limitar la cantidad de imágenes que usa al mínimo, ser inteligente en el uso de imágenes y reducir el tamaño de los archivos lo mejor que pueda, reducirá significativamente los tiempos de respuesta de una página web y mejorará el rendimiento de su página web.
2. Mantenlo limpio y simple
Un buen diseño web no solo es atractivo a la vista, sino que también es fácil de usar. Un diseño web simple y limpio generalmente termina siendo un diseño web de alta usabilidad que no es confuso interactuar con él.
Al tener demasiadas funciones y componentes del sitio en una página, corre el riesgo de distraer a los espectadores del sitio web del propósito del sitio web. Asegúrese de que cada elemento de la página tenga un propósito y hágase las siguientes preguntas:
- ¿El diseño realmente necesita esto?
- ¿Qué hace este elemento y cómo ayuda al usuario?
- Si elimino este elemento de repente, ¿la mayoría de la gente lo volverá a pedir ?
- ¿Cómo se relaciona este elemento con la meta , el mensaje y el propósito del sitio?
Además, aunque puede ser súper asombroso crear un nuevo concepto o patrón de diseño de interfaz para su sitio web, asegúrese de que el diseño sea accesible e intuitivo para sus usuarios. La gente está acostumbrada a los patrones comunes de interacción, las características del sitio y las interfaces web, y si su diseño es realmente único , asegúrese de que no sea demasiado oscuro y desconcertante. Sea creativo, pero también sea sencillo .
3. La navegación es lo más importante que diseñará
La característica más esencial del sitio es la navegación del sitio web: sin él, los usuarios se quedan atascados en cualquier página en la que lleguen. Con ese hecho obvio fuera del camino, hablaremos sobre algunos puntos importantes a considerar al construir un esquema de navegación.
Primero, es muy importante dedicar suficiente tiempo y mucha planificación a la estructura de navegación de un sitio. Esto es de sentido común, pero sigue sorprendiendo la cantidad de diseños web que dan por sentado la navegación del sitio.
La ubicación, el estilo, la tecnología (¿utilizará JavaScript o simplemente CSS?), La facilidad de uso y la accesibilidad a la web son solo algunas de las cosas que debe tener en cuenta al crear el diseño de navegación.
Su diseño de navegación debería funcionar sin CSS debido a los navegadores basados en texto. Diviértase con los navegadores de texto todo lo que desee, pero aún prevalecen en muchos dispositivos móviles. Quizás lo más importante es que la navegación que funciona con CSS deshabilitado es accesible (99.99% del tiempo) a través de lectores de pantalla.
La navegación debe ser accesible y utilizable sin la necesidad de tecnologías del lado del cliente como JavaScript o Flash, que los usuarios pueden no haber habilitado o instalado por varios motivos, como la seguridad o la política de la empresa.
Es imperativo que tenga un buen sistema de navegación ubicado en un lugar altamente visible. Una buena navegación es detectable tan pronto como se carga la página web sin tener que desplazarse hacia abajo en la página web. Aquí es donde mantenerlo limpio y simple juega un papel importante: un diseño complejo y poco convencional puede llevar a la confusión del usuario.
Los usuarios nunca deben preguntarse, ni siquiera por una fracción de segundo, ” ¿Dónde está la navegación del sitio?”
Para los sitios organizados de manera jerárquica y multinivel, asegúrese de que sea fácil navegar entre las páginas web principales y secundarias. Además, debería ser fácil llegar a las páginas de nivel superior (como la página principal del sitio) desde cualquier página web.
El objetivo principal de la navegación de su sitio es permitir que los usuarios accedan al contenido deseado con la menor cantidad de acciones y con el menor esfuerzo posible en su nombre.
4. Usa las fuentes sabiamente y metódicamente
Aunque hay miles de fuentes por ahí, realmente solo puedes usar unas cuantas (al menos hasta que CSS3 sea totalmente compatible con los principales navegadores). Conviértase en un punto para atenerse a las fuentes seguras para la Web. Si no le gustan las fuentes seguras para la web, considere un diseño web progresivamente mejorado que aproveche sIFR o Cufon.
Mantenga el uso de la fuente consistente . Asegúrese de que los encabezados sean visualmente diferentes del texto del párrafo. Use las propiedades de espacio en blanco, ajuste de altura de línea, tamaño de fuente y espaciado entre letras para hacer que el contenido sea fácil de leer y se pueda escanear sin esfuerzo.
Quizás una de las cosas que los diseñadores web a menudo se equivocan es el tamaño de las fuentes. Debido a que queremos encajar tanto texto como podamos en una página web, a veces establecemos tamaños de fuente en tamaños incómodamente pequeños. Trate de mantener los tamaños de fuente en y por encima de 12 px si es posible, especialmente para el texto del párrafo. Si bien muchas personas no tienen dificultades para leer textos pequeños, piense en los usuarios mayores y en las personas con baja visión y otros tipos de discapacidad visual.
5. Comprender la accesibilidad del color
Después de hablar sobre las fuentes, también debemos señalar la importancia de usar los colores correctos.
Debe considerar el contraste de color de los colores de fondo y de primer plano para facilitar la lectura y para los usuarios con baja visión. Por ejemplo, el texto negro sobre fondo blanco tiene un alto contraste, mientras que el texto naranja sobre fondo rojo hará que te esfuerces.
Además, use colores que sean accesibles para usuarios con formas particulares de ceguera al color (consulte una herramienta llamada Vischeck que le ayudará a evaluar ciertos tipos de ceguera al color).
Algunas combinaciones de colores funcionan bien solo cuando el color se utiliza como color de primer plano en lugar de un color de fondo. Tomemos, por ejemplo, el texto azul oscuro sobre un fondo rosa versus el texto rosa sobre un fondo azul, los mismos colores pero diferentes niveles de legibilidad y comodidad de lectura. Es importante no solo obtener una buena combinación de colores sino también aplicarla a los elementos correctos de la página.
Usted necesita saber cómo escribir el código usted mismo
Con varios editores WYSIWYG inundando el mercado, se ha vuelto tan simple como 1-2-3 diseñar un sitio. Sin embargo, la mayoría de estos editores insertan código basura innecesariamente, lo que hace que su estructura HTML esté mal diseñada, sea más difícil de mantener y actualizar, y hace que el tamaño de sus archivos se incremente.
Al escribir el código usted mismo, obtiene un código limpio, nítido y conciso que es un placer leer y mantener; Código que puede estar orgulloso de llamar tuyo.
Saber cómo usar un WYSIWYG o un IDE con una vista previa visual no le exime de aprender HTML y CSS. Debe saber qué sucede para crear diseños web eficaces, semánticos y altamente optimizados.
7. No olvide la optimización del Search Engine
Un buen diseñador siempre debe recordar tener en cuenta los conceptos básicos de SEO al diseñar un sitio. Por ejemplo, estructurar el contenido web para que el texto importante se represente como encabezados (es decir, el título de la página y el logotipo). Aquí es donde aprender cómo codificar correctamente es útil. Al conocer HTML / CSS correcto, semántico y basado en estándares, se dará cuenta rápidamente de que los divs son mejores que las tablas para los diseños web, no solo para una representación precisa del contenido del sitio, sino también para las clasificaciones de los motores de búsqueda; También sabrá que el reemplazo de la imagen de texto de fondo CSS es una buena idea.
8. Comprender que las personas son impacientes
En promedio, las personas pasan solo unos segundos antes de decidir si desean leer más o navegar a otro sitio. Por lo tanto, usted, como diseñador web, tiene que crear una manera de alentar a los usuarios a elegir la primera opción en esos preciados segundos.
Tenga en cuenta que no muchos visitantes se desplazarán hacia abajo para ver todo el contenido de la página si lo que ven en la parte superior no les interesa. Recuerde mantener sus elementos importantes en la parte superior donde sean fácilmente visibles, pero tampoco sobrecargue la mitad superior de la página, ya que puede intimidar a los usuarios y hacer que desactiven la lectura más abajo en la página. Considere la mitad superior de un diseño web como un punto de venta: sea un vendedor, haga que la gente acepte la idea de que quieren ver qué más hay en su sitio.
9. Aprende sobre (y ten en cuenta) las peculiaridades del navegador
Una de las cosas que debe saber como diseñador web es que su trabajo funciona en un entorno delicado e impredecible: los navegadores web. No es suficiente que sus diseños funcionen en algunos navegadores web, necesitan trabajar en tantas situaciones de navegación como le sea posible. Antes de la producción: pruebe sus prototipos utilizando herramientas como Browsershots.
Hacer diseños que sean flexibles y mantenibles.
Un buen diseñador web se asegura de que el sitio pueda actualizarse o modificarse fácilmente en el futuro. Diseñar sitios web que sean maleables y fáciles de mantener es un signo de un gran diseñador web. Haga su trabajo lo más modular posible separando el estilo de la estructura.
Sepa que nuestra industria es dinámica y aún es joven: las cosas cambian en muy poco tiempo. Mantener este pensamiento en mente promoverá la creación de diseños web flexibles.
