Categoría: Diseño de Paginas Web

Diseño de Paginas Web – Manual sobre diseño de sitios web – Guia Tutorial del Diseñador Web

Diseño de páginas 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.

Tutoriales sobre diseño 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.

El diseñador deberá analizar estos factores y planificar su trabajo, haciendo un boceto. Este boceto no es más que un borrador de lo que programará posteriormente.

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.

Photoshop o Sketch son muy usados para diseñar una web, pero son de pago, aunque Sketch bastante más barato y asequible que PhotoShop. No obstante, como alternativa gratuita, podemos encontrar Gimp.

Pero, empecemos por lo básico.

¿Qué es el diseño web?

Podría pensarse que es nada más que la aplicación del buen gusto. Sin embargo, el diseño web es una técnica que se basa en una serie de reglas más o menos definidas que sirven para crear algo que resulte útil y atractivo a la vez.

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.

El diseño web tiene dos partes bien diferenciadas: la funcionalidad y la estética. Ambas son imprescindibles.

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 diseño de una página web debe hacer que el usuario que ingresa a la misma sea guiado hacia la información que nos interesa que vea.

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.

Esta atención sobre las partes esenciales del contenido es la meta que debe seguir todo diseño. En los breves segundos que el usuario presta atención antes de irse de la página, el diseño debe lograr que se quede y guiarlo por el contenido de la página para cumplir los objetivos de la misma.

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.

Tenemos un tutorial completo sobre como crear un buen sistema de navegación.

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:

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.

Puedes profundizar más en este tema: usabilidad web.

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:

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.

No añadas elementos intrusivos o uses colores muy agresivos. Videos o audios que se reproducen sin una acción previa del usuario, animaciones muy llamativas o comprimas demasiado el espacio por querer meter mucha información.

Respetas los principios y fundamentos de un buen diseño web y te asegurarás de estar facilitando la vida a tu usuario.

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.

Para ampliar información acerca de como crear una web, en nuestra home tenemos mucha información paso a paso.

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.

modas en diseño web

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.

modas en diseño web 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.

Debes recordar que las tendencias, por su propia naturaleza, no duran, por ello es mejor manejar un diseño apropiado, el cual se adapte a lo que el sitio realmente necesita.

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.

Cuando pensamos en el diseño que estamos por hacer, debemos tener nuestra mira puesta en los objetivos del sitio y la audiencia a la que se desea llegar.

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.

Si recargas la web con gifs animados o le pones un sonido que tus usuarios no puedan quitar si así lo quieren, es muy probable que se marchen.

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.

Diferencia claramente qué es un enlace de lo que no lo es poniendo un color diferente al texto del enlace, así tus usuarios podrán localizarlos con rapidez y visitarlos si les interesa.

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.

La gente en la web lee deprisa, así que procura que la lectura de lo más importante pueda hacerse de un vistazo rápido.

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:

texto poco contrastado texto bien contrastado

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.

fondo sobrecargado fondo claro

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

No les hagas al visitante adivinar donde está cada cosa o a qué página dirige cada enlace. Si el usuario no sabe a donde ir para conseguir lo que venía buscando se marchará sin pensárselo, hay miles de alternativas a tu página.

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.

Tenemos un artículo donde profundizamos en la compatibilidad entre navegadores.

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).

Puedes revisarlos con la herramienta Brokenlinkcheck.

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.

Si tu sitio no cuenta con la funcionalidad necesaria para adaptarse a distintos dispositivos, es tiempo de pensar en un rediseño.

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?

Si tu sitio tiene un problema de carga, es tiempo de sentarnos a planear un rediseño. Recuerda que un carga rápida mantendrá a los usuarios y a Google contentos.

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.

Si tienes un montón de enlaces rotos, imágenes perdidas y mensajes de error, entonces deberías considerar un rediseño completo.

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.

Usamos cookies propias y de terceros para mejorar nuestros servicios, realizar el análisis de la navegación de los usuarios y mostrar publicidad según tus preferencias y hábitos de navegación. Si continúas navegando, las aceptas. Puede cambiar la configuración u obtener más información aquí

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar