¿Páginas web bonitas?

¿Qué factores determinan la belleza de una página web? ¿Cómo podemos conseguir una web atractiva, innnovadora y funcional sin volvernos locos con la programación?

En primer lugar, vamos a estudiar los trabajos de la competencia para empaparnos de ideas y buenas praxis: Hemos rescatado algunas de las mejores webs comerciales del mundo para mostraros cómo en un entorno sobresaturado de información y competencia aún se pueden hacer cosas diferentes para sorprender y enamorar al internauta… ¿Preparados?

 

Marabelia | Agencia Creativa en Valencia: Marabelia. Diseño web

Queremos que veáis nuestra propia web pues nuestra agencia creativa es puntera en diseño web creativo en la Comunidad Valenciana. Además nuestras tarifas de diseño web están al alcance de todos los bolsillos.

__

Chaptr | Creative Agency: https://chaptr.studio/

Minimalismo en blanco y negro, con grandes bloques y asimetría en una propuesta interactiva y sorprendente.

__

Basic Agency: https://basicagency.com/

En la misma línea que la propuesta anterior pero apostando por la simetría en la estructura.

__

Pollen London: http://pollenlondon.com/

Vídeo, movimiento y nuevamente asimetría.

__

Drop Tokio: http://droptokyo.com/

Color block e interferencias en una página sin scroll basada en imágenes y múltiples grids.

__

IFly50: https://www.ifly50.com/es_es/50

Impecable doble exposición. Visualmente impactante.

__

Aquest: https://www.aquest.it/en

Los grandes bloques de imagen asimétricos en grid funcionan y este es otro gran ejemplo. Atención a la página de equipo: https://www.aquest.it/en/about

__

Size agency: http://www.size.agency/

Otro ejemplo de minimalismo y block color.

__

Octavo Design:https://www.8vodesigns.com/

Una buena imagen dice más que mil palabras. Simple y efectiva.

__

Kasra design: https://www.kasradesign.com/

El retrofuturismo es vanguardia. Aquí una muestra de ello.

__

Waaark: https://waaark.com/

Si a unas excelentes infografías les añadimos una interactividad original este es el resultado.

__

Deux huit: https://deuxhuithuit.com/en/

Fondos pastel en transición, grandes bloques y fantásticas transiciones.

__

Brian Hoff Design:http://brianhoffdesign.com/#/work

__

Born Group: https://www.borngroup.com/

Nos encanta esta web. Conceptualmente es muy Marabelia.

__

Siyelo: http://www.siyelo.com/

Más claro agua. Toda la info en portada.

__

Isadora Digital Agency: http://wakeup.isadoradigitalagency.com/

Sin palabras. Una propuesta original y transgresora. Si después d eun par de minutos sigues intentando despertar a esta web es que han conseguido el objetivo de captar tu interés.

__

Have a nice Day: http://www.haveanicedayonline.nl/

Estos diseñadores/programadores web no dejan indiferente a nadie y son garantía de excelencia para sus clientes.

__

Just Bespoke: http://www.just-bespoke.com/

Sorprendente parallax de inicio con efecto slider y repleta de detalles que marcan la diferencia: como los separadores de bloques en zig-zag y el rombo como elemento icónico por excelencia de la web.

__

Root Studio: http://www.rootstudio.co.uk/

Porque después de ver esta sencillísima web se nos queda una estúpida sonrisa en la cara… No dejes escapar la figura del ilustrador, a veces, la magia de una web puede estar en bonitas ilustraciones con un poco de programación.

__

 

Una vez vistos estos ejemplos tan inspiradores vamos a enumerar algunos de los factores a tener en cuenta a la hora de realizar un proyecto web y cómo estos determinan la armonía final del site.

Si después de leer el artículo tienes alguna aportación que se nos ha pasado por alto, no lo dudes y déjanos tu comentario.

[ … ]

 

1. Materia prima

El material textual y gráfico (y/o audiovisual) con el que contamos es el punto de partida de un proyecto web. A más calidad del material gráfico y textual que proporciona el cliente, más sencilla resulta la tarea de estructurar y programar una web con armonía y estilo.

Obviamente, no es lo mismo diseñar una web para un fotógrafo de moda que para un vendedor de neumáticos. Mientras que el primero nos va a entregar un enorme portafolio con material gráfico de gran calidad entre el que podremos elegir, el segundo probablemente apenas cuente con un par de dossiers de sus proveedores. Por tanto, el primer trabajo a realizar por el diseñador web es analizar la materia prima con la que se cuenta y darle un feedback al cliente con las siguientes cuestiones:

– ¿Tenemos suficiente información textual para cubrir las áreas básicas de la web (Información para las páginas: Portada- La empresa- Productos/Servicios- Noticias- Contacto)?

– ¿Tenemos suficiente material gráfico para cubrir las áreas básicas de la web (Slider, destacados de portada, páginas, blog)?

Si la respuesta para ambas preguntas es sí, no va a haber ningún problema y podremos saltar directamente al punto 2. Pero si el material que nos ha proporcionado el cliente resulta escaso o de baja calidad debemos reportar esta incidencia y proponerle al cliente alguna o varias de las siguientes soluciones:

a) Contratar un servicio de fotografía o ilustración profesional para proporcionarle materia prima de calidad que represente su empresa y sus productos

b) Comprar fotografías y/o gráficos de stock en algún banco de imágenes. Informarle del coste que tiene este servicio o, en su defecto, decirle que él mismo puede realizar esta acción.

c) Ilustrar su web con fotografías y vectores gratuitos (Freepick, Pixabay..) (Sólo recomendable para empresas basadas en servicios que se puedan conceptualizar,  por ejemplo: asesorías, consultorías, gabinetes jurídicos…) e informar al cliente del coste adicional que va a tener el servicio de búsqueda de imágenes y/o vectores.

d) Solicitarle al cliente un esfuerzo extra para conseguir de sus proveedores más material gráfico y textual para cubrir las áreas pobres de la web y ofrecerle el servicio de redacción web y de rediseño (si nos aportan el dossier de un proveedor o un enlace a otra web vamos a tener que extraer las fotografías, catalogarlas y estructurar toda esa maraña de información)

e) Solicitarle al cliente que realice él mismo el trabajo de fotografiar y/o redactar para cubrir las áreas pobres de la web.

O, en caso de que el cliente no esté dispuesto a realizar este esfuerzo extra o no quiera pagar más, informarle de que el resultado final de su web no va a cumplir con las expectativas del diseñador/programador web y que, una vez finalizado el trabajo, las mejoras web se cobrarán aparte.

Esta es una parte importante que muchas veces los diseñadores web olvidamos: educar al cliente para que no se convierta en un cliente tóxico: un cliente que marea y cambia de opinión cada día, un cliente que exige irracionalmente o un cliente «pasota» que no aporta el material  y nos retiene con una web durante meses.

Las páginas web no se hacen por inspiración divina del diseñador/programador web. Se necesita información estructurada, se necesita material gráfico de buena calidad y se necesita la colaboración e implicación del cliente.

 

2. Estructura y contenidos

«Menos es más» es un lema que debería llevar por bandera cualquier diseñador que se precie. Abarrotar la web con información gráfica y/o textual y llenarla de elementos y colores variopintos por doquier no es sinónimo de web completa… es, más bien, sinónimo de barullo y caos.

Cuando un internauta busca «algo», espera encontrarse con una información directa, clara y concisa, lo que en lenguaje web significa: estructura lógica, información bien definida y, en términos generales, web armoniosa y clara (sin estridencias, con coherencia, sin tipografías extrañas, sin aglutinamiento de la información…).

Por tanto, repasa el contenido de la web y elimina las imágenes y textos que resulten repetitivos. Quédate con lo esencial y enfatiza en párrafos H1. H2, lo fundamental. Recuerda que para una perfecta armonía la parte gráfica frente a la textual deberá estar en un porcentaje de 50%-50%.

 

3. Innovación y originalidad

Una vez pensada la estructura básica llegará la mejor parte: dotar de innovación y originalidad a nuestra web.

Lograr el efecto sorpresa en un entorno con millones de competidores no es una tarea sencilla y dependerá de la creatividad, habilidad y experiencia del desarrollador web.

Tanto si trabajamos el entorno web desde cero como si utilizamos plantillas debemos adecuar la web al cliente, buscando una buena combinación de colores  dentro de la gama de  corporativos y trabajando ad hoc el CSS de la web.

Recordemos que los pequeños detalles de estilo marcan la diferencia y que una buena idea es mejor que cien ideas mediocres:

• Creemos una página de inicio atractiva y con un toque innovador:

En función de la materia prima con la que partamos podemos optar por adornar nuestra web con un bonito slider que muestre una selección de las mejores fotografías y lemas y dotarlo de transiciones con distintos movimientos, o un sencillo parallax efectista con una imagen atractiva y representativa, o un vídeo en portada o una galería de destacados con un efecto mouse-over sorprendente… ¡Todo vale, pero no mezclemos todo!… Intentemos definir qué nos puede representar mejor, qué puede resultar más armonioso e integrarlo sin que esto represente un tiempo de carga excesivo para nuestra página de inicio.

• Busquemos la tipografía más idónea, la combinación de colores más adecuada (sin abusar: mejor emplear dos o tres colores para definir el estilo de la web, no más) y los efectos más resultones para el mouse-over de nuestros enlaces e imágenes (siempre tenemos que indicar al internauta dónde se encuentra un enlace… y qué mejor que un efecto mouse-over!)

• Iconos gráficos, elementos embebidos (videos, mapas…), shortcodes de plantilla y plugins.

Si sabemos jugar bien con estos cuatro elementos podemos hacer cosas realmente bonitas sin complicarnos demasiado la existencia.

Estudia bien los shortcodes del template y si ninguno cumple la función requerida prueba a buscar un plugin (gratuito de repositorio WordPress o de pago como los de Codecanyon) que realice la función. Si bien es cierto que, en algunas ocasiones,  encontrar un buen plugin puede resultar una auténtica locura, una vez lo encontremos será  nuestro mejor aliado. Cuando ya lo tengas, cúrratelo un poquito y modifica su CSS para que sea coherente con el de la web.

Integra de forma lógica y armoniosa elementos gráficos (iconos, dibujitos, gráficas, etc) que proporcionen información intuitiva. Siempre quedan elegantes y dan un toque especial a la web.

Juega con los títulos (H1, H2, H3) y con los separadores (líneas, áreas de diferente color) de forma coherente, sin abusar y aplicando el mismo criterio en todas las páginas.

Embebe elementos siempre que resulten necesarios, no pesan mucho, son interactivos y suelen gustar al internauta.

4. Investigación y reciclaje

El  hecho de haber llegado hasta aquí es prueba irrefutable de tu capacidad de investigación y reciclaje. Tan sólo es un consejo que siempre debemos tener presente: renovarse es la única forma de aprendizaje constante, si dejas de investigar dejarás de innovar y no podrás hacer nada nuevo. Cada vez que acabes un proyecto web asegúrate de que en el proceso has innovado y aprendido… Tu siguiente proyecto será mejor y así sucesivamente…

Dicho esto, gracias por llegar hasta aquí.

Si te ha gustado coméntanos, comparte y echa un vistazo a mira nuestra sección de diseño web!! 😉