Principios básicos fundamentales del Diseño Web

Principios básicos fundamentales del Diseño Web

Al igual que la frase «la belleza está en el ojo del espectador», la eficacia de un diseño web será  juzgada por los usuarios de la página web y no por los propietarios. Hay muchos factores que afectan a la usabilidad de un sitio web, y no se trata sólo de la forma (lo bien que se ve), sino también el funcionamiento, ¿es fácil de usar?, esta respuesta la encontramos por los principios básicos fundamentales del diseño web.

Introducción

Los sitios web que no están bien diseñados tienden a funcionar mal y tienen métricas de Google Analytics pésimas (por ejemplo, altas tasas de rebote, bajo tiempo en el lugar, pocas visitas por página y bajas conversiones).

¿cómo se hace un buen diseño web?

A continuación exponemos un decálogo muy resumido con los principios básicos de diseño web que harán que tu proyecto sea estéticamente agradable, fácil de usar, atractivo y eficaz.

El propósitoPrincipios básicos fundamentales del diseño web

Un buen diseño web siempre responde a las necesidades del usuario. Hay que conocer muy bien que interacción realizarán los visitantes, por ejemplo en busca de información, entretenimiento, algún tipo de interacción especial, o para realizar transacciones con tu  negocio. Cada página de tu sitio web debe tener un propósito muy claro, y así satisfacer una necesidad específica para sus usuarios de la manera más eficaz posible.

La comunicación

Los internautas tienden a querer la información de forma rápida, por lo que es importante comunicar con claridad, y hacer que su información sea fácil de leer y digerir. Algunas tácticas eficaces que incluir en tu diseño web son: organizar la información usando títulos y subtítulos, utilizando viñetas en lugar de oraciones largas con mucho texto, y por favor, suprimir la paja con la que hacer ratio de texto.

Que tipografía aplicar

En general, las fuentes Sans Serif como Arial y Verdana son más fáciles de leer en línea (tipos de letra Sans Serif son fuentes de apariencia contemporánea sin acabados decorativos). El tamaño de letra ideal para leer fácilmente en línea es entre 14px y 16px y se adhieren a un máximo de 3 tipos de letra en un máximo de 3 tamaños de punto para mantener tu diseño aerodinámico.

Uso de colores

Una paleta de colores bien pensada puede recorrer un largo camino para mejorar la experiencia del usuario. Colores complementarios crean el equilibrio y la armonía. El uso de colores contrastantes para el texto y el fondo hará que la lectura más fácil en el ojo, además cumpliremos objetivos de cara a la accesibilidad web. Colores vibrantes crean emoción y deben utilizarse con moderación (por ejemplo para los botones y acciones). Por último, pero no menos importante, el espacio en blanco y espacio negativo es muy eficaz para dar a tu sitio web un aspecto moderno y ordenado.

Uso de imágenes

Una imagen vale más que mil palabras, y elegir las imágenes correctas para tu sitio web puede ayudar con el posicionamiento de marca y conectar con su público objetivo. Si no tienes fotos profesionales de alta calidad en la mano, considera la compra de fotos, hay muchas empresas que tienen miles de fotos en stock, a que aparten la mirada de tu sitio web. Considera también inclusión de infografías, videos y gráficos, verás cómo éstos pueden ser mucho más eficaces en la comunicación que incluso el fragmento de texto mejor escrito.

Muy importante es realizar un correcto tratamiento de las imágenes a subir. Si bien buscamos buena calidad, esta hay que compensarla con una velocidad de carga efectiva. No solo hay que confiar la carga a un plugin que nos auto convierta la imagen a un formato y peso determinado, es fundamental dedicar tiempo a una revisión manual de cada imagen.

Usabilidad o Navegación

Se trata de analizar lo fácil que es para la gente tomar acción en tu sitio web y comprobar cómo se mueven. Algunas tácticas para la navegación efectiva incluyen una jerarquía de página lógica, usando migas de pan, el diseño de los botones que facilite el encuentro con el clic, y aplicar la ‘regla de los tres clic «, que significa que los usuarios podrán encontrar la información que están buscando dentro de tres clics como máximo.

Diseña basándote en el uso de ​​cuadrícula

Colocar contenido al azar en tu página web puede terminar con un aspecto desordenado que además es desordenado. Diseños basados ​​en cuadrícula organizan el contenido en secciones, columnas y cajas que se alinean y proporcionan armonía y equilibrio, lo que conduce a un diseño con un aspecto optimizado y que además proporciona confianza al visitante.

El patrón de diseño «F»

Estudios de seguimiento de los ojos han identificado que la gente explora las pantallas de ordenador en forma de «F». La mayor parte de lo que la gente ve es en la parte superior e izquierda de la pantalla y el lado derecho de la pantalla se ve raramente. En lugar de tratar de forzar el flujo visual del espectador, sitios web diseñados con eficacia trabajarán con el comportamiento natural de un lector y mostrarán la información en orden de importancia (de izquierda a derecha, y de arriba abajo).

El tiempo de carga

Todo el mundo desprecia un sitio web que tarda mucho tiempo en cargar. Sigue los consejos de los expertos para que los tiempos de carga de tus páginas sean más eficaces, estos se ven afectados desde por el tipo de imágenes, procesos, consultas o interacciones con las bases de datos y mucho más hasta por el servicio del alojamiento contratado (pilar de tu sitio web).

Para que la página responda con eficacia es importante tener un buen mantenimiento web constante. De esta manera aseguramos siempre el funcionamiento y tendremos actualizados nuestros sistemas de caché para la optimización del tiempo de carga.

Diseña para que sea amigable a móviles  Diseño web móvil

Es ya un lugar común para sitios web de acceso desde múltiples dispositivos con múltiples tamaños de pantalla, por lo que es importante tener en cuenta si tu sitio web es amigable a móviles. Si tu sitio web no tiene versión para móvil, puedes reconstruirlo en un diseño adaptable (esto significa que tu sitio web se ajustará a diferentes anchos de pantalla) o se puede construir un sitio móvil dedicado (un sitio web independiente optimizado específicamente para los usuarios de móviles). Otra técnica muy recomendada es ofrecer la versión móvil a través de técnicas CSS.

Mantenimiento web

Mantenimiento web

Mantenimiento web y su importancia

Cuando damos por finalizado el proceso de diseño y creación de un nuevo sitio web no debemos relajarnos porque en ese preciso momento comienza una nueva etapa que resulta crucial para el funcionamiento de tu web: el mantenimiento web.

Cuando hablamos de mantenimiento web no solo hablamos del mantenimiento y actualización del contenido (texto, imágenes, vídeos, enlaces rotos, etc) sino que también hablamos del mantenimiento de código HTML o CSS.

Mantenimiento web, imagenMantenimiento código HTML, CSS

La revisión del correcto funcionamiento de tu página web pasa por analizar y controlar la parte de código, es un factor muy importante del que cuidan los webmasters.

En algunas ocasiones, resulta necesario modificar alguna configuración a nivel de código, revisarlo y analizarlo para detectar problemas de seguridad e incluso configurar a nivel de servidor para mejorar algún aspecto interno, como puede ser el tiempo de carga.

Además, revisar periódicamente el conjunto de archivos contenidos en tu página web y las bases de datos que lo conforman también resulta especialmente importante a la hora de detectar cualquier anomalía.

Actualización de plugins en WordPress

En el caso de las páginas web creadas a partir de la plataforma WordPress, la más popular en la actualidad, el mantenimiento web pasa necesariamente por la actualización de los plugins, plantillas y de la versión WordPress que se actualiza cada cierto tiempo. Este tipo de actualizaciones previenen brechas de seguridad y vulnerabilidades que pueden poner en peligro tu sitio web y, además, suelen incluir mejoras reales respecto de versiones anteriores.

Algunos de los plugins que destacan sobre el resto y que resulta primordial mantener actualizados son aquellos que tienen como función mejorar el SEO de nuestros contenidos. Los más conocidos son SEO by Yoast y All in One SEO Pack.

Ventajas del mantenimiento de contenidos web

  • Puedes eliminar los enlaces rotos que resultan tan molestos para el lector.
  • Puedes mantener temas actualizados. Si escribiste sobre ellos en el pasado y se produce una novedad normativa o similar, lo actualizas y lo adaptas para que el posicionamiento se vea afectado y puedas atraer nuevas visitas hacia un artículo antiguo.

En definitiva, el mantenimiento de contenidos web es muy importante para mantener el posicionamiento web e incluso para mejorarlo ante determinadas novedades.

Mantenimiento web: las claves de su eficiencia

En definitiva, y resumiendo todos los temas tratados, un mantenimiento web de excelencia debe pasar necesariamente por el control y análisis estricto de la web. Para ello, es necesario:

  • Realizar copias de seguridad que nos servirán en el caso de que se produzca algún fallo. Es muy importante conservar todo el contenido web.
  • Actualizar y controlar todos los componentes de tu web: plugins y plantilla, sobre todo.
  • Analizar el funcionamiento general de la web: número de visitas, tiempo de carga, anormalidades en posicionamiento, etc.
  • Mantener actualizados los contenidos. Por ejemplo, si aparece una nueva normativa de la que has hablado anteriormente y se producen novedades respecto de lo que escribiste en su día no está de más incluirlo en tu artículo.

En este punto también es de vital importancia analizar los enlaces salientes para comprobar que no existan enlaces rotos a páginas web que ya no existen.

Realizar un mantenimiento web de código y un mantenimiento web de contenidos es una tarea que todo webmaster debe implementar pero, a veces, por falta de conocimientos o experiencia, no se lleva a cabo y terminan apareciendo los primeros problemas. Si es tu caso, consulta con un especialista y déjate aconsejar para que tu página web no deje de funcionar correctamente en ningún momento.

Asociación Europea de Economía y Competitividad (AEDEEC)

Asociación Europea de Economía y Competitividad (AEDEEC)

La Asociación Europea de Economía y Competitividad (AEDEEC) ha premiado a WebReunidos desarrollo y diseño S.L. con La Medalla de Oro al Mérito en el Trabajo, en reconocimiento a su trayectoria profesional en el sector del diseño de páginas web, marketing online y posicionamiento Web.

La ceremonia de imposición de medallas tuvo lugar, en una Cena de Gala celebrada en el Hotel NH Collection Eurobuilding de Madrid.

Una de las mejores empresas de diseño web en España

El presente galardón reconoce a WebReunidos como una de las mejores empresas de diseño web en España. El premio concedido supone un reconocimietno especial a la gestión realizada.

WebReunidos es una empresa que apuesta por la calidad del trabajo así como de la formación integral de sus componentes.

Las fundadoras de la empresa, reciben premio

Medalla de Oro al Mérito en el Trabajo

La AEDEEC reconoce con dicho galardón ‘el éxito de las empresas con una trayectoria ejemplar a nivel nacional y/o europeo y que realizan prácticas e iniciativas que apoyan el espíritu y conciencia empresarial. Además de la concesión del galardón, la asociación hace entrega de un certificado y un sello de calidad que refleja la ética, profesionalidad y resultados de la empresa.’

El solemne evento fue conducido por la periodista Ana García Lozano y el galardón fue impuesto por el Vicepresidente de la Asociación D. José Luis Barceló Mezquita (El Mundo Financiero).

Además, dio la coincidencia de que este año ha sido nombrado como Consejero de Honor de la Asociación Europea de Economía y Competitividad a D. Kike Sarasola, por su brillante trayectoria como Empresario y Fundador de la cadena hotelera Room-Mate Hoteles.

Incluimos a continuación palabras de agradecimiento de WebReunidosUna de las CEO durante la gala

“En primer lugar dar las gracias a la prestigiosa Asociación Europea de Economía y Competitiva por este galardón del que nos acaban de hacer entrega.

Para WebReunidos, como pequeña empresa que somos, nos honra este reconocimiento a la labor que venimos realizando desde que iniciamos este proyecto, y nos anima a seguir en esta línea.

Bajo nuestro lema ‘tu éxito, nuestro objetivo’, lo que pretendemos es que tanto empresas como profesionales que contratan nuestros servicios, tengan su mejor presencia en internet.

Porque entendemos, que la mejor tarjeta de presentación de una empresa, y más hoy en día, es su marca digital, su posición en internet a través de su web  o redes sociales.

Estamos en la era de las tecnologías, en la era de Internet, en donde si no estás no existes. Por ello, creemos que es muy importante tener de una página web dinámica, accesible, posicionada y con un diseño atractivo. Ese es nuestro trabajo, a lo que nos dedicamos con empeño y tesón.

Y ya, por último, y no por ello menos importante, agradecer a nuestro personal  y colaboradores su profesionalidad, dedicación y entrega en el desarrollo de sus tareas y proyectos. Y, sobre todo, a nuestros clientes por la confianza depositada en nosotros a lo largo de este tiempo.

Muchas gracias.”

Mª Carmen Hernández – Belén Recuero

Socias Fundadoras WebReunidos S.L.

Certificado AEDEEC

Cómo hacer una página web popular

Cómo hacer una página web popular

Muchas son las preguntas y dudas que surgen cuando un emprendedor decide tener presencia en internet. Por supuesto lo primero que piensa es: ‘necesito una página web’. Pero, ¿cómo hacer una página web popular?, ¿qué tiene que tener un sitio web para ser exitoso?

Vamos a dar respuesta de forma muy concisa a esta pregunta. Nos vamos a apoyar en 5 factores como pilares principales de una buena web.

Cómo hacer una web popular

5 Factores para una página web exitosa

SEO

Lo situamos en primer lugar, ya que en internet como ya es popularmente conocido, ‘si no apareces no existes‘. Y hoy por hoy, la existencia pasa por aparecer en los primeros puestos de Google. Si bien es imposible tener todo el proyecto en las primeras posiciones, por lo menos tenemos que tener algunas páginas.

Así que es importante encontrar a un desarrollador que programe desde la estructura pensando en posicionamiento SEO. Así es como se ahorrarán esfuerzos y costes en el futuro.

Como base del posicionamiento web hay que tener muy claro que lo primero que tiene que dar una respuesta optima es el alojamiento web o hosting.

Responsive Web Design (RWD)

Al igual que se busca presencia en los resultados de Google, es deseable llegar al máximo público. Cada vez más los internautas usan distintos dispositivos móviles.

Un diseño web optimizado debe responder a las exigencias de cada dispositivo además de evolucionar la adaptación a las futuras demandas.

Es muy importante elegir un sistema que facilite la evolución según avanza la tecnología.Web exitosa. Imagen

Accesibilidad

Al igual que en SEO es recomendable que tanto desarrollador como diseñador tengan amplios conocimientos en accesibilidad. Al igual que queremos tener presencia en buscadores y que nuestra web se muestre en dispositivos móviles, es imprescindible llegar a todo el público y ahí es donde tenemos que prestar atención a la accesiblidad.

Como ya hemos dicho en otras ocasiones, una web accesible tiene unos tiempos de carga muy buenos y su estructura a nivel lógico y de información va a ser impecable.

Es deseable que una web cumpla con los requisitos de accesibilidad AA.

Usabilidad

La usabilidad tiene que ser tenida en cuenta como parte de la experiencia que el usuario va  tener a la hora de visitar una página web.

Se tiene que facilitar la navegación, tiempos de carga rápidos, llegar a la información rápidamente, para lo cual la profundidad de navegación tiene que ser muy reducida.

Aquí además el contenido juega un papel muy importante, al igual que en SEO, tiene que ser sencillo y práctico.

Atractivo

Por supuesto, por mucho que cumpla con los anteriores requisitos, una web tiene que ser atractiva. Como dice nuestro lema: ‘diseños que atraen’, una web construida con gusto y elegancia reportará tiempos de visita óptimos.

Aquí es donde es importante contar con la pericia y experiencia de un buen diseñador capaz de hacer una página web popular.

Herramienta AMP de Google

Herramienta AMP de Google

Se ha lanzado la herramienta AMP de Google con su actualización más novedosa desde el año 2016. Un gran empujón para la herramienta de pruebas de páginas en versión AMP (Acelerated Mobile Pages). El acceso sigue siendo en la url habitual para validar página AMP, también se pueden probar los resultados de búsqueda directamente.

Formulario de validación de la herramienta AMP de Google. Imagen

INDEXACIÓN DE PÁGINAS AMP

Tras la ejecución de una dirección URL en versión AMP en el formulario de la herramienta, se mostrarán los resultados. Lo mejor es que ahora se puede enviar la versión AMP directamente a la indexación de Google. Asegúrese antes de enviar que lógicamente todo está correcto. La vista previa de los resultados de búsqueda está disponible y nos da una visión real del resultado.

Resultados de validación AMP. Imagen

Ni que decir tiene que la herramienta AMP de Google, no solo está para analizar las urls propias. Así que si quieres espiar a la competencia y ver cómo es su código fuente, es una oportunidad muy buena.versión AMP. Imagen

Si estás interesado en implementar el sistema AMP en un blog, aquí te presentamos un tutorial muy sencillo de como instalar versión AMP en WordPress.

Configurar la base de datos en WordPress

Configurar la base de datos en WordPress

La creación de la base de datos en WordPress para una instalación de WordPress va estar muy condicionada por el entorno o plataforma donde se va a llevar a cabo.

Por ejemplo, hay alojamientos que condicionan el nombre de la base de datos, normalmente aplicando un prefijo, esto puede ser un problema a la hora de realizar ciertos procesos como un cambio de hosting, recomendamos elegir un hosting fiable y de calidad. Dicho prefijo puede ser aplicado también al nombre de usuario.

Si su caso es como el descrito anteriormente, recopile la información en cuanto al nombre de la base de datos, usuario y contraseña proporcionado por su proveedor y téngalo localizado. Es necesario para realizar los trabajos oportunos así como para solucionar posibles problemas que surjan.

La experiencia y la teoría dicen que la configuración de MySQL en WordPress es muy sencilla:

  1. Comprobar que MySQL se está ejecutando correctamente.
  2. Crear un usuario para WordPress en la base de datos MySQL
  3. Con el usuario anterior crear la base de datos para guardar las tablas de WordPress

El proceso descrito se puede realizar, bien desde la línea de comandos del propio MySQL, desde PhpMyAdmin o bien desde cualquier programa que facilite la gestión de la base de datos, hay una amplia variedad en el mercado.

Base de datos en WordPress

¿Existen problemas en la base de datos en WordPress con MySQL?

Cómo hemos dicho anteriormente la configuración es muy trivial, no obstante le mostramos las tres causas principales que pueden surgir en cuanto a fallos de instalación. Recalcamos que debe de existir una estructura básica en MySQL que incluya el usuario ‘admin’ antes de poder arrancar la sesión como administrador.

  1. El servidor no encuentra la base de datos. Revise el archivo wp-config.php que se encuentra en la raíz del alojamiento, es posible que el nombre de la base de datos no esté bien indicado.
  2. Si localiza la base de datos MySQL pero es imposible iniciar sesión. Probablemente el nombre de usuario o la contraseña asignada a la base de datos no son los correctos. Revise su archivo wp-config.php y contraste con los datos proporcionados por el hosting.
  3. Se realiza la conexión con MySQL pero no se puede seleccionar la base de datos correcta. Es importante resaltar que no por el hecho de poder establecer la conexión, esta esté disponible para ese usuario. Este caso se puede diagnosticar incluyendo la función mysql_error() en el archivo wp-db.php para identificar el fallo en la selección. Así comprobaremos si los permisos de ejecución son los correctos o cualquier otro error.

RECOMENDACIÓN DE SEGURIDAD

Como ya hemos comentado en otros artículos, sobre todo haciendo énfasis en la diferencia entre un desarrollo web a medida y otro con CMS, WordPress es un popular gestor de contenidos que conocen muy bien los hackers y otros programadores con propósitos nada amigables, por esto en la medida de lo posible hay que salir del estándar que trae WordPress.

Por defecto el prefijo que se asigna a las tablas de WordPress es ‘wp_’, este prefijo es conocido por los mencionados hackers con el propósito de extraer información. Así que a la hora de realizar la instalación es muy importante cambiar el conocido prefijo por otro distinto, por ejemplo usar tres caracteres que no contengan w o p es una buena idea.