Categoría: Diseño de Paginas Web

¿Te interesa el diseño web? ¿Quieres aprender a hacer tus páginas web de manera potente y profesional?

Estás en el sitio correcto, en esta sección hemos preparado una selección de contenido de calidad sobre diseño web que te harán convertirte en un entendido en la materia y te dará ventaja a la hora de hacer tus páginas web.

Principios y fundamentos del diseño web

La cantidad de páginas web existentes se pueden contar en miles de millones. Sin embargo, un bajo porcentaje de ellas tienen un buen diseño, debido fundamentalmente a que muchos diseñadores web no siguen los principios básicos del diseño web, y asumámoslo, la mayoría no son profesionales ni saben bien lo que hacen.

El diseño de una página web debe estar acorde con el contenido de la misma. Esto quiere decir que la selección del tipo de diseño que va a llevar nuestra web debe estar acorde con lo que el usuario busca en ella y con el producto o servicio ofrecido por la misma.

Una página destinada a juegos y un periódico digital implican diseños totalmente diferentes, ya que mientras que en la primera prevalecerán los colores fuertes y estará basada en imágenes, el periódico digital deberá ofrecer un aspecto más sobrio, elegante, ordenado y se basará en imágenes y contenidos escritos.

Para hacer un diseño primero se piensan y deciden los contenidos que va a tener el sitio, con papel y lápiz se estructuran y bocetan las secciones principales, posicionando cada elemento de la página en el sitio que se considere apropiado, y una vez se tiene en papel un boceto de como será la página web, se pasa a diseñar la parte gráfica empleando programas especializados.

Pero, empecemos por lo básico.

¿Qué es el diseño web?

Y de la mano del diseño puramente gráfico del sitio, va toda una planificación de los contenidos del sitio, las estructura de los menús, cómo será la interacción con el usuario, rutas de navegación, arquitectura de información y en definitiva, todo un diálogo que ha de establecerse entre el sitio web y el visitante, que debe pensarse y planificarse para que éste ultimo entiende de qué va el sitio y sepa usarlo (puedes leer más sobre esto en el artículo de usabilidad web).

El diseño web es mucho más que darle color y estilo a una página web.

Una página funcional pero con mala estética no atraerá la atención de posibles usuarios o visitantes, mientras que una página muy bonita pero que funciona mal hará que los visitantes que lleguen atraídos por la buena estética del sitio no regresen a él por no encontrar lo que necesitan o les resulte difícil.

¿Cuáles son los principios del diseño web?

Los principios que rigen el diseño web son:

• Balance – Es el equilibrio que debe existir entre los diferentes elementos que componen la página. Imágenes y texto, elementos grandes y pequeños, zonas oscuras y claras, etc., deben estar balanceadas de forma tal que la página no solo resulte atractiva, sino que además logre enfocar la atención del usuario sobre aquellos elementos que nos interesa que lo haga.
• Contraste – El contraste es una forma de distinguir los elementos que deseamos resaltar. Diferencias en la tipografía, color, diferencias en las formas (círculos, cuadrados, rectángulos, etc.), diferencias de tamaño (una imagen más grande con otras más pequeñas, por ejemplo), texturas y fondos diferentes, etc., son algunos de los contrastes que pueden emplearse para enfocar la atención del usuario sobre los elementos más importantes de la página
• Énfasis – Es una forma de distinguir algo dentro de un elemento. Un ejemplo de esto es lo que sucede con este texto, donde los títulos se encuentran resaltados así como algunas palabras o frases, de forma que facilita la comprensión de lo que se quiere transmitir.
• Repetición o ritmo – El ritmo o repetición es una forma de establecer patrones con los que se ordenan los elementos de la página. Si los elementos de una página web siguen un patrón determinado, es mucho más sencillo para las personas comprender el contenido y acceder a la mayor parte del mismo en poco tiempo.
• Proximidad o unidad – Este concepto se refiere a colocar juntos o próximos los elementos que estén relacionados, formando unidades visuales que brindan coherencia al contenido de la página.

Utilidad de los principios de diseño web

El logo de una página web suele colocarse en el extremo superior izquierdo debido a que hay estudios que indican que ese es el sitio que miran los internautas cuando ingresan a la página, y al que vuelven a mirar para saber dónde están.

La atención que prestan quienes navegan por internet a cada página que visitan es apenas de unos pocos segundos, por lo que cada instante que el usuario de la página desvíe su atención de lo que nos interesa comunicar, estaremos perdiendo la oportunidad de mostrarle lo que realmente nos interesa que vea.

Otra misión importante del diseño web es colaborar en convencer al usuario de la página que el servicio o el producto ofrecido es lo que necesita o le conviene.

Todo esto, que parece complejo, resultará mucho sencillo en la medida que se vaya ahondando en el diseño de páginas web, ya que la puesta en práctica de estos principios hará mucho más sencilla su comprensión.

Fundamentos básicos de diseño web

Sistema de navegación fácil de entender

Es uno de los pilares de un buen diseño web.

La navegación va a permitir o impedir que tus usuarios accedan a tus contenidos, por lo que tiene que estar bien pensada para abarcar todos tus contenidos actuales y en la medida de lo posible, tener opciones de abarcar tus contenidos futuros.

Uso apropiado del color

Otro de los aspectos principales del diseño web. El uso del color en tu web tiene que estar en sintonía con el mensaje que quieras transmitir, tu público objetivo (si son niños, adultos, etc.) y la intención de tu web (transaccional, informativa..).

Echa un vistazo a nuestros artículos sobre el tema:

• Empleo del color en diseño web.
• Como seleccionar una paleta de colores para tu web.

Un diseño fácil de usar

Estamos hablando de diseñar una web que la mayoría de personas puedan entender y usar.

Seguir patrones establecidos de navegación, uso de elementos consistentes a lo largo de la web, un lenguaje apropiado al público al que te diriges, etc.

Un diseño accesible

Muy de la mano del anterior punto, se trata de pensar en todos los tipos de personas que van a visitar tu web, y entre esas personas estarán aquellos que tengan algún tipo de discapacidad, o las personas mayores o aquellos que no tengan muchos conocimientos de tecnología.

Pero lo bueno de la accesibilidad web, es que beneficia a todos puesto que implica hacer sitios más fáciles de entender y consultar.

Agradable a la vista y limpio

Tu diseño tiene que cuidar la estética también, no sólo la funcionalidad.

El diseño visual de una web es un aspecto que hay que tratar con detenimiento, y para eso tenemos algunos artículos que pueden ayudarte:

• Equilibrio
• Textura
• La forma
• La línea
• Uso del espacio en blanco

Los elementos de diseño no interfieren en el contenido

Es importante que el diseño de una web sea transparente para el usuario. Con esto quiero decir que tiene que hacer su función pero sin distraer al visitante de sus intenciones.

Diseño consistente

Es necesario lograr que el sitio web obtenga consistencia y una imagen distintiva, algunas técnicas para conseguirlo:

• Fondo y gráficos únicos.
• Color uniforme de texto y enlaces.
• Barras de navegación siempre en el mismo lugar.

Tendencias en diseño web

Las tendencias marcan un estilo el cuál se va difundiendo hasta el grado donde muchos sitios lo toman como base.

Hasta hace unos años, el diseño basado en texturas de materiales reales era lo más utilizado, era común ver como los diseñadores trataban de imitar el color reflejado en un metal o la textura de una madera para colocarla al fondo de la página, los iconos utilizaban sombras, gradientes, luces y en muchas ocasiones se recurría a dar un efecto tridimensional.

En la actualidad, esto ha quedado un poco de lado y la tendencia es el diseño plano, el cual podemos observar en en sitios web como Google y su famosa guía de Material Design.

Lo cierto es que las tendencias mantienen en movimiento a la industria, nos muestran cosas nuevas que se pueden lograr, nos mantienen alerta y siempre con la necesidad de mantenernos actualizados.

Sin embargo, es fácil caer en el hábito de seguir ciegamente una tendencia sin entender las consecuencias que esto puede traer.

Si no tenemos un fundamento lo suficientemente fuerte, el cual respalde la decisión de rediseñar todo un sitio, es mejor evitar las tendencias y buscar lo que mejores resultados nos vaya a dar.

¿Cuál es el mejor diseño web?

Para conseguir el mejor diseño se puede utilizar cualquier tipo de estilo sin importar que no siga ciegamente una tendencia.

De esa manera podremos identificar que elementos serán los adecuados para satisfacer a los visitantes y con eso conllevar a cumplir los objetivos, sin importar que al final este sea plano, realista, retro o de cualquier otro estilo.

La planificación es la partes del proceso más adecuada para definir si un diseño es o no apropiado para un sitio. Durante esta etapa se pueden realizar distintos tipos de actividades que nos permitan identificar lo que tratatamos de transmitir y el tipo de mercado al que se desea llegar.

El seguir las tendencias nos puede dar como resultado un sitio web hermoso, pero poco funcional. El utilizar el diseño adecuado a cada caso nos permitirá idear algo de manera conveniente, significativa, hermosa y a la vez funcional, combinando de esta manera lo necesario para que el sitio progrese en este aspecto.

Consejos para diseñar una página web mejor

Hay algunas ideas que se deben tener en cuenta a la hora de ponerse a diseñar la página web. Algunos consejos:

Usa CSS (hoja de estilos)

Separa el contenido del diseño de tu web usando hojas de estilos (CSS). Es mucho más fácil editarlo después, les gusta más a los buscadores, y las páginas cargan más rápido.

Simplifica

La web soporta multitud de formatos, desde imágenes animadas, hasta sonidos, presentaciones en flash, vídeos… Todos estos recursos deben usarse con cautela.

Es mejor optar por un diseño sencillo que recargarlo en exceso.

Enlaces correctos

Usa palabras que indiquen claramente a donde dirige el enlace, no pongas cosas como “click aquí” o “este sitio” si no va acompañado de un contexto, el visitante no sabrá a donde va.

Estructura del texto

Crea listas de ideas, párrafos, frases en negrita y en cursiva, subapartados y cualquier otra cosa para diferencias partes en tus contenidos.

Tipo de fuente

Intenta usar tipografías comunes como Verdana o Arial, que casi con toda seguridad la tendrán instaladas en sus ordenadores todos los usuarios que te visiten.

Si la fuente que tienes en tu web no está disponible en el ordenador del usuario, mostrará el texto con otro tipo de fuente, lo que puede llegar a desajustar el diseño.

Color del texto y del fondo

Procura usar un color de texto y fondo que haga buen contraste para facilitar al máximo la lectura del texto de tu web.

Si de por sí leer en una pantalla cansa más que hacerlo en papel impreso, imagina lo que debe ser si no distingues bien la letra del fondo. Algunos ejemplos:

Fondos claros

Usa fondos de pantalla sencillos o directamente no los uses. Los fondos complicados, con muchos dibujos o colores pueden distraer al usuario del contenido de tu web o incluso dificultarle su lectura.

Imágenes

Los gráficos son un recurso de diseño útil. Bien utilizadas, pueden ayudar a comprender mejor el contenido de tu web y le permiten tomarse una pausa al usuario, pero no recargues la página con imágenes que no lleven a nada.

Si pones imágenes que sirvan para algo, para decorar, para explicar algo, para poner ejemplos, etc. Optimízalas para que pesen lo menos posible y las páginas no tarden mucho en cargarse (a la gente no le gusta esperar).

Navegación clara

Asegúrate de que los enlaces importante son bien visibles, crea un mapa web, pon enlaces importantes también en el pie de página, incluye un enlace a la página principal en todas tus páginas, etc.

Compatibilidad con navegadores

No hagas una web que sólo se vea en Internet Explorer. Es uno de los errores más comunes de la gente que empieza a hacer webs.

Que se vea bien en un navegador no significa que se vea bien en todos, debes asegurarte que se be correctamente por lo menos en los más importantes (Chrome, Firefox, Safari…). Para comprobarlo puedes usar herramientas como BrowserShots o instalar los navegadores más usados en tu ordenador y probar cómo se ven las páginas web en ellos.

Resolución de pantalla

No todos los ordenadores tienen la misma resolución de pantalla, al igual que con el tema de los navegadores, debes asegurarte de que tu diseño se vea bien a cualquier resolución, para eso lo mejor es que tu web sea responsive.

Revisa posibles fallos

Frecuentemente debes revisar tu web en busca de posibles fallos, éstos no les gustan ni a los visitantes ni a los buscadores. Uno de los más comunes es el tener enlaces rotos (enlaces con una dirección incorrecta).

Páginas en construcción

No llenes el sitio de páginas en construcción. Si todavía no tienes creada una sección no la tienes, no pasa nada, pero es frustrante pinchar un enlace esperando encontrar algo y ver la típica pantalla de página en construcción, no da una buena imagen de tu web.

Como alternativa, puedes anunciar futuros contenidos o productos en la web del tipo, “próximamente herramienta gratuita para…”. A parte de evitar la mala sensación que dejan las páginas en construcción, puedes crear expectativas acerca de novedades y conseguir que tus visitantes vuelvan.

Poner un buscador en tu web

Si tu web tiene muchos contenidos o páginas, puede ser útil incluir un buscador para que tus usuarios encuentren más fácilmente lo que buscan. Es un valor adicional para tu web y mejora mucho la usabilidad.

Para poner un buscador en tu web, puedes utilizar programas gratuitos como Google Coop o Free Find.

¿Cuándo se necesita rediseñar una web?

Existen ciertos factores a considerar, los cuales van a ayudarnos a tomar la decisión sobre si necesitamos o no un rediseño.

Esto lleva a que frecuentemente debamos plantearnos la necesidad de realizar ajustes a nuestras páginas, y así definir si lo que se necesita es una simple adaptación o un rediseño completo.

A continuación, expondremos algunas preguntas que te ayudarán a definir dicha resolución.

¿Tu diseño es responsive?

¿Sabes lo que es el responsive design? Dicho concepto define que una web debe adaptarse al tamaño de la ventana o pantalla del dispositivo con el que se está consultando.

Quizás tú nunca accedas al sitio mediante un dispositivo móvil, pero es muy probable que una gran parte de tus usuarios lo haga.

Y Google está poniendo mucha fuerza en priorizar las webs con una experiencia buena en móvil sobre las que no, así que si te interesa el SEO, es hora de hacer tu web responsive.

¿El sitio carga muy lento?

Quizás cuando empezaste a desarrollar tu sitio, las imágenes que se utilizaron no fueron optimizados para uso en la web, la desorganización en archivos externos y librerías también afecta, así como el uso de elementos HTML para funciones ajenas a las suyas, como utilizar tablas para definir el layout.

En muchas ocasiones el problema de carga está definido por el servidor de hosting que tenemos, en esos casos un rediseño puede ayudar pero no sería la solución total. De ser así es recomendable buscar otro proveedor o contratar otro paquete que se adapte mejor a lo que buscamos.

¿Hay muchos mensajes de error en tu web?

Cuando gestionamos sitios de contenido es muy común realizar cambios de URL, recategorizar entradas, añadir más niveles al árbol de categorías, modificar páginas, etc.

Y es precisamente por esto que el usuario puede llegar a encontrar varias páginas de error 404 al navegar por nuestro sitio, o acceder desde un enlace externo.

Primero que nada debemos tener la costumbre de añadir listas de redireccionamiento, debemos incluir todas aquellas URL de páginas, categorías o entradas que hemos modificado, y agregar su nueva URL, así mediante un archivo htaccess y una sentencia redirect 301, cuando el usuario ingrese a la URL vieja será automáticamente redireccionado a la nueva.

A veces puede haber soluciones rápidas a algunos de estos errores, pero una gran cantidad de ellos puede indicar un problema más grande.

¿El sitio web parece viejo?

Si tu sitio web aún funciona con un diseño muy viejo, debes plantearte si el cambio es necesario desde una perspectiva estética.

El preguntarnos si nuestra web parece viejo, es una cuestión subjetiva. Lo que una persona podría considerar anticuado para otra no lo es.

Aquí va a ser determinante tu experiencia para decidir si ha llegado la hora de rediseñar tu web.

—

¿Te interesa el diseño? no dejes de leer aquí, tenemos un completo manual un poco más abajo para convertirte en un buen diseñador y mejorar tus proyectos online.