El arte de construir mejores sitios web

La creación de sitios web se ha convertido casi en una habilidad común en estos días, y hay una abundancia tan grande de sitios compitiendo contra los suyos que cualquier cosa que pueda hacer para destacar entre la multitud será una gran ayuda.

¿Qué podemos hacer para llamar la atención, admirar y prestar atención a nuestros sitios? Requiere un cierto ajuste de la forma en que pensamos sobre el diseño del sitio. En este breve artículo, analizaremos algunas de las cosas clave que son necesarias para crear mejores sitios web.

El contenido debe tener prioridad

Como diseñadores, siempre estaremos muy interesados ​​en crear diseños asombrosos. Por supuesto, esto no se aplica a aquellos que simplemente se llaman a sí mismos diseñadores, porque no permiten que sus almas lloren en la página, consagrando un momento de inspiración eternamente en la gloria electrónica.

Lo que quieren los propietarios de sitios, por supuesto, es que las personas lean su contenido, se involucren con él y quizás incluso compren algo por ello. Es maravilloso tener fotos bonitas, pero no si se estorban con el hecho de que el usuario pueda experimentar el contenido.

Dado que este es el caso, lo que podríamos considerar como "mejoras estilísticas" sin duda debe tener un segundo plano en la presentación principal. Si necesitas soltar algo, siempre debe ser el elemento estilístico.

imagen cortesía de

El diseño sensible es esencial (excepto cuando no lo es)

El diseño receptivo es tan importante en estos días debido a la gran cantidad de personas que utilizan sus teléfonos para navegar por la web, y al hecho de que la mayoría de los navegadores de teléfonos aún hacen un mal trabajo al renderizar páginas web.

Hay algunas excepciones notables, pero son muy raras. Tales excepciones serían cuando algo necesidades que se mostrará en la página para que el contenido tenga sentido, y donde debe ser de un tamaño establecido. Algunas cosas simplemente no funcionan si se reducen demasiado.

Casos como este deben manejarse con cuidado. La forma de hacerlo es utilizar una columna de respuesta especial que se muestra solo cuando se detecta un tamaño de pantalla que es demasiado pequeño para mostrar el contenido, con un mensaje que indica al usuario que vea el contenido en un monitor más grande.

Esto generalmente será algo que debe evitar hacer, pero en circunstancias excepcionales es aceptable siempre que se maneje con tacto.

ilustración cortesía de

El contenido importante debe ser obvio

Si bien debería ser obvio, tan frecuentemente no parece serlo. El diseño no debe hacer las cosas importantes sutiles. Debe hacer resaltar lo que es importante y ser visto por el espectador. primeray, sin embargo, muchos diseñadores intentan ser "creativos" y someter esos elementos importantes.

No cometas este error. Es posible que los usuarios no permanezcan en el sitio por mucho tiempo, por lo que es crucial poner la marca ante sus ojos. Incluso si se van rápidamente, al menos has dejado una impresión. Más adelante, cuando se encuentren con la marca, la reconocerán como familiar, y será más probable que la compren de una marca familiar (es decir, “confiable”).

Lo que sucede es una especie de auto-engaño cognitivo, donde la mente consciente dice: "Si he oído hablar de esto, debe ser bueno". Es por eso que las empresas están dispuestas a gastar millones de dólares solo para obtener su logotipo en un cartel en un evento deportivo

¿Qué más es importante sin embargo? Bueno, la respuesta a esa pregunta depende del tipo de sitio que estés construyendo. Lo que debe hacer es pensar en lo que estaría buscando si visitara este sitio. Por lo general, es muy diferente de lo que dirá un hongo corporativo que quieren mostrar. Las cosas que las personas van a buscar son las cosas importantes que se deben incluir y destacar.

Los elementos estilísticos deben mezclarse fácilmente

Sus adornos de diseño deberían hacer que el espectador se asombre de buena manera. Deben traer deleite en lugar de molestia. Muy a menudo los diseñadores se dejan llevar y agregan cosas a una página para generar el "factor sorpresa" sin asegurarse de que estas cosas no tengan el potencial de ser molestas.

También debe asegurarse de que dichos adornos se degraden con gracia. Cuando no se pueden mostrar correctamente, no se deben mostrar en absoluto, y debe aparecer como si nunca hubieran estado allí.

gif cortesía de

Capas al rescate

Puedes agregar estos adornos mediante el uso de capas. Las personas que crean diseños receptivos parecen haber olvidado que tienen una pila 3D con la que trabajar, y como resultado, se les está perdiendo el verdadero potencial del diseño responsivo.

Un ejemplo de cómo funciona esto ... Imagine que tiene un sitio donde tiene un diseño con múltiples puntos de interrupción. La forma de pensar convencional te haría poner todo en una capa, lo que provocará aglomeraciones en pantallas más pequeñas, obligándote a soltar cosas o (como suele ser el caso), exhibir un diseño horrible.

Esas dos últimas palabras nunca deben ir juntas cuando estás hablando de algo que creaste. Lo bueno es que realmente puedes evitar la situación mediante el uso de capas.

Al apilar elementos estilísticos en una capa separada, puede ocultarlos o mostrarlos a su gusto, independientemente de la capa de contenido, y ambas capas responden por completo.

Supongamos que el usuario está viendo el sitio en un monitor con una resolución de 2560 x 1440. Nuestra capa de contenido inferior abarca todo el ancho de la pantalla, pero podemos establecer márgenes en ella que coloquen el contenido dentro de un borde decorativo que podría ser del tamaño que queramos.

Al colocar ese borde decorativo en la capa superior sin márgenes, podemos establecer el ancho para que sea igual al tamaño de los márgenes en la capa inferior.

A medida que el usuario avanza a través de diferentes puntos de interrupción de la pantalla, las dos capas pueden continuar trabajando juntas de esta manera, y la capa superior incluso puede mostrar bordes completamente diferentes para cada punto de interrupción. Hasta el último punto de interrupción, descartamos completamente la capa superior, solo configurándola para que esté oculta.

El potencial aquí es obvio. ¿Tiene un gran número de anuncios de enlace molestos en la columna derecha? Puede ocultarlos de los usuarios con pantallas pequeñas y, además, puede volver a agregarlos a pedido mediante jQuery.

Finalmente una forma de separar adecuadamente el contenido del diseño.

Así es como se supone que funcionan las páginas web. Al almacenar sus “extras” en una capa completamente separada, obtiene una separación aún mayor entre el contenido y el diseño, ya que la capa superior se puede manipular en cualquier momento sin afectar la capa inferior, y viceversa.

Diviértete experimentando con la libertad que esto te brinda, para que puedas jugar con todo tipo de ideas creativas mientras el contenido en sí no se vea afectado.

Es exactamente el mismo concepto que el uso de máquinas virtuales para el sandboxing. No importa lo que hagas, no puedes afectar el contenido de la página porque está aislada de la capa decorativa.

imagen del encabezado cortesía de Matt Carlson

Bogdan Rancea

Bogdan es miembro fundador de Inspired Mag, habiendo acumulado casi 6 años de experiencia durante este período. En su tiempo libre le gusta estudiar música clásica y explorar artes visuales. También está bastante obsesionado con los fixies. Ya es dueño de 5.