Cómo iniciar el diseño de un sitio web

En este artículo te mostraré cómo iniciar el diseño de un sitio web.
Conocerás los pasos a seguir en el desarrollo y cómo debes recopilar la información de los contenidos para presentarlos a tu webmaster.

Una vez que hayas reunido los Requisitos para tener un sitio web que te expliqué en mi artículo anterior, ya estarás en condiciones de avanzar para concretar tu website
Quizás no sepas por dónde empezar y es por eso que te presento una guía de organización que podrás seguir muy fácilmente.

 

>>>  QUIERO MI WEBSITE <<<

Sitio web responsivo

Asegúrate que tu diseñador desarrolle un sitio web responsivo, también llamado diseño web adaptable, diseño web adaptativo o web responsive.
Esta es una normativa de desarrollo web cuyo objetivo es adaptar la apariencia de las páginas al dispositivo que se esté utilizando para visitarlas.

responsive web design

Hoy día las páginas web se ven en multitud de dispositivos como tabletas, teléfonos inteligentes, libros electrónicos, portátiles, PC, etc.
Además, cada dispositivo tiene sus características concretas: tamaño de pantalla, resolución, potencia de CPU, sistema operativo o capacidad de memoria entre otras.
Esta tecnología pretende que, con un único diseño web, todo se vea correctamente en cualquier dispositivo, priorizando siempre la legibilidad de los textos e imágenes.
Google exige que los sitios sean responsivos para ser indexados en sus buscadores, de modo que si tu web no lo es, te quedas afuera…

La siguiente imagen muestra un esquema de visualización en un teléfono entre un sitio no responsivo y otro responsivo, donde se observa la priorización de la legibilidad.

comparacion responsive

¿Qué información debes proveer a tu webmaster?

Es necesario que sepas de antemano qué es lo que quieres comunicar y mostrar a través de tu website.
Cuáles son los valores que deseas transmitir, a qué target de público te diriges, quiénes son tus competidores y qué imagen quieres mostrar acerca de tu negocio, actividad, o de tu propia persona.

Debes tomarte un tiempo previo de análisis, que te permitirá “filtrar” los contenidos de tu web, definir la estética y esencia de tu proyecto, y también en nivel de lenguaje que utilizarás en los textos e imágenes.

estrategias y organizacion web

Observar a tu competencia

Seguramente no eres la única persona o empresa en el mundo que realiza determinada actividad y quiere mostrarla en la web.
Te aconsejo que veas sitios similares de tus posibles competidores, y hagas un listado con las direcciones web de sus respectivos sitios.
Esto no es para imitarlos o copiarlos, sino para “innovar” los conceptos comunicacionales y obtener un mejor resultado.
Innovar significa “mejorar lo que ya existe” para obtener un nuevo estándar de calidad.

La siguiente imagen muestra distintos websites de empresas del rubro «aberturas y cerramientos» en Argentina.

observar a tu competencia

Cada desarrollo web requiere de un análisis previo para obtener un “know-how” (saber cómo hacer algo).
Por eso suponemos que cada sitio que hayas visitado ya lo ha realizado previamente (bien o mal).
Eso te permite tomar puntos de partida ya testeados y adaptarlos a tu propia identidad y necesidades.

Realizar una crítica y evaluar los aciertos y desaciertos de tus competidores te permitirá optimizar los resultados buscados.
No olvides siempre consultar a tu webmaster acerca de los contenidos, ya que seguramente tendrá mucha más experiencia que tú y sabrá asesorarte correctamente.

 

Recopilar información para tu website

Esta puede ser quizás la parte más compleja para ti, ya que requiere de tu participación y el trabajo en equipo con el webmaster.
No te desanimes si no sabes cómo empezar, ya que muchas veces es muy difícil hablar acerca de uno mismo.
Pero tampoco pretendas delegar todo el trabajo en tu diseñador, ya que no conoce tu historia, tu empresa, tus objetivos, ni tus ideas.
En ese caso te sugiero que le cuentes tus necesidades para que elabore un organigrama y puedan ir resolviendo juntos cada etapa del desarrollo web.
Una vez que hayas superado esta etapa inicial todo estará encaminado y tu participación será mínima.

contenidos web

A continuación, te muestro algunos ítems que deberás tener antes de encargar tu website.

organigrama diseño web

1. Estructura de organización del sitio web (Secciones)

Tu website debe estar dividido en secciones para facilitar su navegación online y organizar los contenidos.
Estas secciones presentan temáticas muy generalizadas, de modo que el usuario pueda encontrarlas con facilidad.
Suelen ser bastante similares en todas las webs, y es bueno que así sea, ya que los usuarios están acostumbrados a dichas estructuras.

Dependiendo del tipo de sitio que tengas, una organización básica podría ser la siguiente:

 

  • Home Page: Presentación, bienvenida, descripción general, ofertas, promociones, etc.
  • Acerca (Institucional): Quiénes somos, Staff profesional, Historia, Misión, Visión, etc.
  • Servicios: Descripción de servicios ofrecidos al cliente.
  • Productos: Catálogo de productos con descripciones específicas.
  • Publicaciones: Dossiers, folletos, revistas, etc.
  • Media: Galerías de Fotos y/o videos
  • Agenda de actividades: Eventos, presentaciones, etc.
  • Novedades: Lanzamientos de nuevos productos, servicios, ofertas, promociones, etc.
  • Noticias: Relacionadas con tu actividad o tu mercado.
  • Prensa y Comunicación: Notas de prensa, gacetillas y flyers en medios gráficos, radiales, web y TV.
  • Social media: Acceso a redes sociales. Todos los contenidos se podrán compartir directamente desde el sitio web.
  • Blog: Artículos informativos o temáticos, información destacada para clientes, etc.
  • Atención al cliente: Servicio de post venta, asesoramiento técnico, etc.
  • Descargas: Permite al usuario descargar documentos, publicaciones, audios, videos, planillas, etc.
  • Contacto: Modos de contacto, teléfonos, mail, formulario, geolocalización mediante Google Mapas y código QR.
  • WhatsApp Chat: Permite chatear directamente desde el sitio web mediante un botón siempre visible.
organigrama web

Cada sección conforma una página independiente dentro de tu sitio que puede contener uno o más temas relacionados.
Te sugiero que los títulos de las secciones sean muy breves, ya que estos definen los nombres de los botones del menú principal.

En la siguiente imagen se muestra el menú principal con las secciones del sitio, y un menú desplegable para secciones relacionadas.

menu principal

2. Información textual

Es muy importante que dediques un tiempo a redactar los textos que describen tu negocio o actividad que incluirás en tu website.
De ellos dependerá que tu sitio sea encontrado en los buscadores de contenidos como Google.
Si quieres tener contenidos realmente efectivos en tu web, te aconsejo contratar un servicio de “copywriter”, un profesional que se dedica a redactar textos persuasivos para captar el interés de tus usuarios.
Sabrá plasmar en las palabras correctas la información textual para tu sitio y redes sociales, y obtener el mejor provecho orientados a favorecer el SEO.

copywriter

Textos generales descriptivos

Aún si no contratás a un copywriter y decides redactar tus textos personalmente, te aconsejo que lo hagas conscientemente y con criterio.
Los textos descriptivos definirán cada sección de tu website que hayas creado en el ítem anterior.
Te aconsejo que sean breves y concisos. No te extiendas demasiado en contar toda tu historia a menos que lo creas imprescindible.
La gente no tiene tiempo de leer textos demasiado extensos, sobre todo si los visualizan en dispositivos móviles.

Estos textos no deberían incluir más que uno o dos subtítulos y algunos párrafos breves con información generalizada.
De esta manera, le estás mostrando al usuario un panorama general de lectura rápida acerca de lo que puede encontrar en tu website, e invitarlo a encontrar información más detallada en otras secciones específicas del sitio.
Asegúrate de usar un lenguaje claro y sin demasiados tecnicismos, que no sea aburrido y que pueda comprenderse por un amplio sector de la comunidad.

textos generales descriptivos

Textos de contenidos o informativos

A diferencia de los textos descriptivos, los textos de contenidos o informativos deben ser más extensos, minuciosos y detallistas.
Pueden contener conceptos técnicos específicos y un lenguaje más apropiado si lo consideras necesario.

Estos textos van apuntados a un target más selectivo que tiene la necesidad de obtener información precisa acerca de algún tema en particular.
Se pueden incluir en la sección de blog, detalles de productos, modos de uso, información técnica, etc.

Los textos deben incluir frases y palabras clave para favorecer el SEO y es muy importante que consideres este concepto desde el inicio del trabajo.
Estas frases claves o conjuntos de palabras son las que los usuarios escriben en un buscador como Google para obtener resultados y así acceder a tus propios contenidos, así que deberías pensarlas “desde el punto de vista del usuario” más que desde tu propia mirada.

Todos los textos deben entregarse en formato digital (Word o similar) ya redactados, corregidos y en su extensión final, y podrán ser revisados y corregidos por el webmaster para optimizar el SEO.

En la siguiente imagen se muestra la descripción técnica de un producto específico en una página de catálogo.
Los textos en amarillo representan las frases clave SEO (palabras que un usuario escribe en Google al realizar una búsqueda)
Los textos en celeste indican los resultados obtenidos por el buscador según la relevancia de esas palabras clave.
Este es el motivo de la redacción minuciosa de los contenidos orientados a favorecer el SEO.

textos de contenidos seo

3. Imágenes y Videos

Te aconsejo incluir fotografías, gráficos y videos de tu actividad, empresa, productos o servicios entre los textos antes mencionados.
Las imágenes fotográficas y multimedia (video y audio) son muy importantes para la composición de tu website.
Resulta aburrido y tedioso para el usuario, leer grandes extensiones de textos sin la presencia de imágenes descriptivas.
Te sugiero que siempre uses fotos originales propias de buena calidad.

También puedes usar imágenes obtenidas de la web que no estén sujetas a derechos de autor, ya que podrías enfrentarte a reclamos legales de terceros.
El hecho que puedas descargar fotos gratis de la web no significa que tengas el derecho de usarlas libremente.
Asegúrate de comprobar el uso libre de derechos de autor en las imágenes.
Existen varios sitios que permiten descargar de forma gratuita este tipo de imágenes, y están identificados como tales.

En la siguiente imagen se muestran obras originales de una artista plástica argentina en su propio website.

Imagenes originales

La mirada profesional del fotógrafo experimentado

Procura contratar un fotógrafo especializado, quien tendrá una mirada mucho más efectiva y profesional para mostrar tu trabajo de la mejor manera y crear buenos contenidos originales.

Si no quieres un profesional, trata de hacer tus propias fotos con la mejor calidad posible y teniendo en cuenta el contexto y el entorno.
Evita que se vean elementos innecesarios en el fondo y cuidando siempre la iluminación y el encuadre.

Siempre aconsejo a mis clientes que una vez que tengan su website, obtengan contenidos visuales de calidad de sus actividades, producción, eventos, etc.
Esto será de gran utilidad para tu sitio web y tus redes sociales.

Lee mi artículo Cómo obtener la mejor rentabilidad de las fotos de tus productos para conocer más acerca de fotografías para web

 

fotografo

Nomenclatura de las fotos

En pos de facilitar el trabajo a tu diseñador y favorecer el SEO te sugiero nombrar los archivos digitales de manera lógica y concisa, por ejemplo: smartphone-samsung-galaxy-s10-negro.jpg

Jamás dejes el nombre por defecto tal cual sale de la cámara (ej. pic0024585.jpg)

Tu diseñador no conoce tus contenidos y a Google no le simpatizan esas denominaciones y las ignora o penaliza.

Todas las imágenes deberán entregarse en formato digital (JPG o PNG) en buena resolución y tamaño.
Los logos se prefieren en formato vectorial (AI, EPS, CDR o similar) o en su defecto en JPG o PNG de alta resolución.

4. Optimización de contenidos para SEO

Tal como mencioné anteriormente, el SEO (Search Engine Optimization) consiste en la optimización consiente y estratégica de los contenidos textuales de un website para que puedan ser reconocidos por motores de búsqueda como Google.
Es un servicio adicional al diseño web pero absolutamente necesario y te recomiendo no prescindir del mismo.

Se configurarán todos los contenidos mediante palabras clave y definiciones textuales que favorecen al desempeño inteligente de las búsquedas.
Por tal motivo, es probable que el diseñador adapte la redacción de los textos a dichos requerimientos.

Esto no implica la aplicación de estrategias de marketing online ni campañas publicitarias mediante enlaces patrocinados en Google.

Lee mi artículo Cómo mejorar el SEO en tu website para obtener información y consejos para optimizar tu web.

En la siguiente imagen se muestra un esquema sobre cómo funciona un buscador de contenidos como Google.

como funciona un buscador

5. Redes Sociales

Es importante que tu empresa o emprendimiento tenga además del website, sus perfiles y canales en redes sociales, y que estas tengan el mismo criterio de diseño, estética y comunicación.
Tener redes sociales multiplica las posibilidades de visualización y presencia de tu website.
Todos los contenidos de tu sitio web pueden compartirse directamente en todas las redes sociales con un solo click, permitiendo acceder a tus páginas desde los mismos posteos.

En la siguiente imagen podemos ver cómo compartir una pagina en Facebook desde un website y el resultado obtenido.
Nótese que el posteo hace referencia directa al website, de modo que al clicar sobre el mismo se redirige al usuario a la web de origen.

sahre en redes sociales

Si tu web incluye videos, te aconsejo que los mismos estén previamente subidos a tu propio canal de YouTube o Vimeo y no a canales de terceros, ya que favorecerán el tráfico de usuarios hacia dichos canales y no al tuyo.

youtube canal

Te recomiendo que contrates a un buen «comunity manager» capaz de crear contenidos propios y originales en tus redes sociales, cuidando la estética y manteniendo la coherencia grafica de todas tus publicaciones, para favorecer tu presencia institucional.

6. Google Mi Negocio

Si tu website cuenta con atención al público y un domicilio postal, te aconsejo que tengas un perfil de Google Mi negocio, donde podrás definir días y horarios de atención y geolocalización mediante Google Mapas, que te brindarán nuevos canales de acceso a tu web y facilitará tu posicionamiento SEO.
Además podrás integrar la geolocalización a tus redes sociales y tus seguidores podrán agregar tu ubicación en sus posteos.

El uso de mapas ayuda mucho a la localización de tu web orientada en zonas geográficas y son muy efectivas en dispositivos móviles (teléfonos y tabletas)

mapa geolocalizacion

7. Actualizaciones de contenidos

Por último, te aconsejo que siempre tengas los contenidos actualizados, eliminado información obsoleta, renovando imágenes y agregando nuevas secciones de contenidos.
Esto hará que tus visitantes se sientan atraídos por tu sitio, regresen periódicamente y que tu sitio crezca.

No hay nada más negativo para los usuarios que regresar a una web y ver siempre lo mismo. Eso habla de estancamiento, de rutina tediosa, de falta de creatividad y de motivación.
Y no sólo tus usuarios se aburrirán y no regresarán. Google también bajará tu ranking y tu SEO, ya que sus “spiders” dejarán de indexar tu sitio al no registrar actualizaciones y no será considerarlo relevante para los resultados de sus búsquedas.

actualizacion de contenidos web

Conclusión

Espero que hayas disfrutado este artículo y te haya sido de utilidad.
Ahora ya conoces todo lo que necesitas tener para inciar tu sitio web y cómo encarar unpoiryecto con tu webmaster

Si te dieron ganas de tener tu website y considerás que soy un profesional idóneo, no dudes en contactarme que te asesoraré con mucho gusto.

En la sección de Artículos relacionados que está más abajo, vas a econtrar muchos artículos con temas específicos que complementan el que acabas de leer.
Te invito a leerlos, compartirlos y a dejar tus comentarios si lo deseas.
Muchas gracias.

>>>  QUIERO MI WEB SITE <<<

adrian pablo conti director

Adrián Pablo Conti

Soy Diseñador Gráfico y Web egresado de la Universidad de Buenos Aires (FADU-UBA)
Desde 1993 dirijo Web4, mi propio estudio creativo freelance de Diseño Gráfico y Web, ubicado en la Ciudad de Buenos Aires (Argentina)
Me especializo en el desarrollo de identidad visual, comunicación institucional, web sites y tiendas online, diseño editorial, catálogos, revistas y diseño de packaging, entre otros.

Todas las imágenes mostradas en este artículo son propias, o fueron obtenidas de la web con fines ilustrativos y pertenecen a sus respectivos autores.

Compartir:

Artículos relacionados