Hoy en día si tienes un negocio y no tienes una página web, NO EXISTES, es una realidad y debemos de asumirla, por suerte disponer de una web corporativa no es demasiado caro, y existe la opción de hacerla nosotros mismos, aunque si no prestamos atención a los conceptos básicos de diseño de sitios web podemos hacer más mal que bien a nuestro negocio. Yo recomiendo huir de sitios como 1&1 o Wix, el resultado no será nada profesional y te aseguro que en un par de años ya habrás pagado más que si te la hubiera hecho un profesional o incluso tu mismo con un poquito de lectura y paciencia. Por ello quiero compartir esta guía básica con pautas fundamentales para el diseño de páginas web.

Comienza con un Esquema de tu Página Web

Si no tienes demasiada experiencia diseñando páginas web, una buena base para comenzar es con un Wireframe que no es otra cosa que un boceto esquemático de cómo serían las secciones nuestro sitio web. De manera sencilla se estructuran los elementos de la web para definir su posición y tamaño, incluyendo el menú, los bloques de contenido, imágenes y bloques de texto, vídeos, galerías y demás contenido web. En estos bocetos no se suelen usar colores ni tipografías, las imágenes son representadas con cuadros con una cruz y poco más, en el boceto nos centramos en la colocación de los elementos, la funcionalidad de los mismos y la experiencia de usuario.

De esta manera, antes de comenzar a diseñar y desarrollar tu web tendrás una idea más o menos clara de en donde ira colocado el contenido y que función tendrá cada elemento, en el caso de tener que realizar algún cambio te será todo mucho más fácil.

Si te quieres dedicar profesionalmente al mundo del diseño y desarrollo de páginas web, a medida que vayas adquiriendo experiencia y portafolio, dejarás de usar las herramientas de creación de Wireframe, con una sola conversación telefónica con el cliente, un par de mails o tras a ver recibido en un Word el texto de la web, tendrás un esquema en tu cabeza que en menos de una semana serás capaz de plasmar en una página web. Los clientes dejarán de pedirte los bocetos porque tu portafolio hablará por sí solo.

Yo siempre he sido más puritana a la hora de hacer cualquier boceto, utilizo el lápiz y papel, pero entiendo que los haya que prefieren aplicaciones para tal fin, aquí te dejo algunas para que les eches un vistazo.

Zurb Responsive Sketchsheets

Con este pack de descarga obtendrás diversas plantillas que te te permitirán crear bocetos de tus páginas web de forma responsive, estas te vendrán genial si necesitas aclarar ideas sobre la estructura de tu web o presentar un prototipo a un cliente.

Si lo tuyo son las aplicaciones, ya sean web o de escritorio, Mockflow seguro que te encantará. Esta aplicación te permite crear wireframe en la nube. Solo necesitarás crearte una cuenta y empezar a trabajar online. Dispone de una versión gratuita y otra premium. A pesar de que la gratuita tiene sus limitaciones cumple bastante bien con su función, aunque si tu objetivo es dedicarte profesionalmente a esto y además eres de prototipar todo antes de diseñarlo sería recomendable que adquirieras su versión premium.

También puede interesarte esta otra aplicación para el mismo fin, visita su web y juzga por ti mismo. Balsamiq

Consigue un diseño perfecto

Una vez que tienes tu boceto en papel o con una de las herramientas que te he indicado más arriba puedes pasar a crear tu diseño en Photoshop. Cuando estás empezando en el diseño web esquematizar tu plantilla en papel y posteriormente crear el diseño en Photoshop te ayudará a crear un diseño único e impactante. Además podrás entregar la plantilla al programador web el cual podrá desarrollar la web más fácilmente. De esta manera te aseguras que el desarrollo final de la web se mantenga fiel a tu diseño.

Cuando trabajas con WordPress, cosa que de no hacerlo en los tiempos que corren no entendería, todo se simplifica mucho más, puedes pasar de tu boceto o wireframe en papel a directamente empezar a montar tu web. Si sabes diseñar y además sabes usar WordPress puedes saltarte el paso de crear tu diseño en PSD y pasar directamente de tu wireframe a WordPress. Pero ojo, saber instalar WordPress y un tema no es saber usarlo, hay otros muchos detalles para los que quizás necesites ayuda, tales como la implantación de seguridad web, mejoras del rendimiento, anti spam y algunas cosas más, visita este enlace si necesitas más información. Servicios WordPress

En el caso de que no sepas usar esta tecnología siempre puedes recurrir a la ayuda de un desarrollador especializado en WordPress el resultado final siempre será profesional y además al ser un sistema autoeditable siempre podrás gestionar tu contenido sin necesidad de pagar por cada cambio en tu web.

Prototipado y Diseño Web

A la hora de entregar el Psd al Desarrollador

  • Se amable si quieres obtener lo mejor de tu diseño
  • Expon tu idea como si se lo explicaras a un niño
  • Aun que te gusten todos los elementos, prepárate para cambiar algo.
  • Realiza el seguimiento de tu diseño durante el desarrollo

Tipografías Adecuadas para Diseño Web

Tal y como hemos hablado en el blog en publicaciones anteriores, más abajo te dejaré los links, hay muchos tipos de fuentes pero no todas son correctas para según qué trabajos, a continuación te mostraré un resumen sobre tipos de fuentes y conceptos básicos sobre tipografías.

 

A la hora de diseñar para web debes tener en cuenta que la fuente debe ser legible, los títulos deben diferenciarse bien, huye de fuentes tipo script a menos que sea para algún título concreto, esas fuentes en móviles no serán muy legibles.

Si quieres saber más sobre tipografías visita estos post:

Si quieres descargar tipografías gratuitas para Windows, Mac y Linux visita estos post:

Conceptos Básicos del Diseño Web Responsive

A fecha de hoy el diseño web responsive es una obligación, grids fluidos, imágenes flexibles y bien optimizadas, separaciones y márgenes, serán detalles que deberás tener muy en cuenta a la hora de realizar el diseño de tu página web. El desarrollador Web deberá aplicar MediaQueries correctas en los estilos CSS3, ¿Qué son las MediaQueries? Son órdenes que se incluyen en la hoja de estilos CSS3 que indican al documento HTML cómo debe comportarse en las diferentes resoluciones de pantalla. Por este motivo si vas a diseñar tu web o la web de un cliente y necesitas un buen desarrollador, no te la juegues, pide referencias y comprueba su portafolio de trabajos.

Si trabajas con WordPress, cosa que como he dicho antes recomiendo encarecidamente, el ir creando tu web y comprobando el responsive a medida que vas trabajando en el diseño será algo más cómodo, los navegadores te permiten ir comprobando las distintas resoluciones de pantalla, por ejemplo:

En Google Chrome, si pulsas F12 se abrirá una ventana de inspección de código, en la esquina superior izquierda verás dos iconos, si pinchas en el segundo (es el icono de un móvil y una tablet) verás que la pantalla se reduce.

Arriba podrás elegir el tipo de dispositivo y la resolución. Al cambiar de una resolución a otra recuerda pinchar F5 que sirve para actualizar la página o pinchar en el icono de actualizar el navegador, como prefieras.

Como ya sabemos casi todos, España lidera el ranking mundial de teléfonos móviles por usuarios únicos, no es de extrañar por tanto que el uso de este terminal para visitar páginas web, consultar y realizar operaciones bancarias, realizar compras online o simplemente visitar nuestras redes sociales este a la orden del día, lideramos muchos rankings mundiales pero sin duda este es el que nos atañe a la hora de diseñar una página web 100% responsive.

Problemas relevantes de páginas web No Responsive.

  • Tardan más en cargar, consumo excesivo de datos móviles.
  • No se verán y leerán correctamente en dispositivos móviles
  • Según las directrices de Google no aparecerán en los resultados de búsqueda móvil.

Si tenemos en cuenta que hoy en día casi el 100% de las gente usa el teléfono móvil para todo, que tu web sea responsive debe ser tu mayor prioridad.

Flat Design (Diseño Plano)

El diseño web a experimentado muchos cambios a lo largo de su historia, al igual que la moda (me refiero a la ropa) lo que hace unos años se llevaba y era trending ahora ya no lo es, diseñar una web y mantenerla actualizada también será algo que deberás tener en cuenta. Yo recomiendo que la elegancia y la experiencia de usuario primen sobre cualquier tipo de moda y tendencia, de esta manera tu web durará más en el tiempo.

Aquí te dejo algunos post interesantes sobre cómo ha evolucionado el mundo de la web, los blogs e Internet en general a lo largo de su historia, realmente interesantes.

Seguro que has oído hablar sobre el Flat Design, o diseño plano en castellano. Esta tendencia en diseño gráfico y web no es otra cosa que el lema de «menos es más» llevado al diseño, crear publicidad gráfica o diseño web minimalista.

Esto no solo es bueno porque el ojo humano puede centrarse en lo realmente importante sino que además gracias a la tendencia del Flat Design las páginas web cargan más rápidamente en dispositivos móviles lo que nos ayuda a un diseño web responsive más eficiente e incluso a mejorar el posicionamiento SEO. Recuerda que en diseño web, todo está conectado. Para el usuario el minimalismo le ayuda a usar la web de forma más cómoda, no se pierde entre tanto movimiento, la apariencia moderna y sencilla le hace que confíe más en el sitio web por lo que se percibe de manera más honesta.

Cosas que la gente asocia con el diseño plano. Sencillo | limpio | colorido | moderno

Principio Básicos de UI/UX
(Interfaz de usuario y experiencia de usuario)

Parece que todo en Ingles suena mejor y seguro que has visto mil veces los acrónimos UI (User Interface) y UX (User eXperience), pero ¿qué son?
UI, Interfaz de usuario, es lo que el usuario ve de una aplicación, sistema, o web, lo que le permite interactuar de manera eficiente con ello, es la suma de una buena arquitectura de la información, un buen diseño de elementos visuales y unos buenos patrones de interacción.

A la hora de realizar un buen UI, o un buen diseño de interfaz de usuario, debes tener en cuenta que deberás crear una buena interfaz del producto para que vaya en sintonía con la experiencia del usuario al interactuar con ella. Deberás crear elementos interactivos que sean 100% responsive, que respondan igual en todos los dispositivos y resoluciones. Para ello también deberás contar con un buen desarrollador web que te ayude y de soporte en las tareas de programación.

Tus principales tareas en UI (interfaz de usuario) serán:

  • Diseño y guías de interacciones entre elementos.
  • Diseño de elementos, formularios, botones, etc..
  • Diseño Visual, cabeceras, imágenes, iconos, etc..
  • Paletas de color, tipografías, tamaños de fuentes.

UX, Experiencia de Usuario, es lo que el usuario percibe o siente al interactuar con la aplicación, web, o producto. Siempre que nos enfoquemos en diseñar páginas web útiles, usables y eficientes lograremos la satisfacción del usuario. En todo hay UX la diferencia es que con una buena UI podemos influir en el resultado final y que la UX, experiencia de usuario, sea buena o muy buena.

¿Cómo podemos lograr una buena experiencia de usuario, UX? Centrándonos mayoritariamente en las personas y no en los buscadores de Internet, un error muy común que cometen mucho principiantes o aquellos que dicen ser profesionales y no lo son, es centrar el diseño en los buscadores porque creen que así mejorarán el posicionamiento SEO. como ya he dicho anteriormente, en diseño web todo está conectado, céntrate en una buena interfaz de usuario que garantice la experiencia de usuario y además cumpla con los estándares sobre posicionamiento web SEO.

Si quieres saber más sobre posicionamiento SEO visita estas publicaciones:

Qué hacer y no hacer para un diseño web perfecto

Qué hacer en Diseño Web:

  • Mantén tu página web bien estructurada
  • Céntrate en lo realmente importante
  • Elige un esquema de colores correcto para tu marca
  • Recuerda menos es más
  • Elige fuentes y tamaños correctos
  • Haz que tu web sea visualmente atractiva
  • No copies el texto de internet
  • Optimiza la navegación de tu web
  • Optimiza los tiempos de carga con caché
  • Títulos y descripciones SEO
  • Facilita el acceso a los buscadores

Qué NO hacer en Diseño Web:

  • No coloques cajas por todos lados
  • No uses demasiados colores diferentes
  • Cuida los textos de tu web, ni demasiado extensos ni demasiado cortos
  • No obligues al usuario a hacer clic en sitios que no llevan a ningún lado relevante
  • No coloques anuncios irrelevantes en tu página
  • No uses 5 fuentes diferentes en 10 tamaños distintos
  • No rellenes tu página de palabras clave sin sentido
  • No crees páginas con solo una imagen
  • No hagas que sea necesario rebuscar para encontrar algo en tu web
  • Evita los PopUps o ventanas sin botón de cerrar

Si a pesar de haber leído todo esto, no te animas a crear por ti mismo una web, te recomiendo esta oferta que tenemos para emprendedores, diseño de página web corporativa WordPress, diseño de logotipo y tarjeta de visita, pincha en la imagen para más info.