Tutorial diseño web - Bikain.studio

Somos una agencia de marketing digital y diseño web en Bilbao y queremos ayudarte a entender como diseñar una página web.

¿Dónde empezar? identidad y estructura del sitio

Para empezar tenemos que hacernos dos preguntas y hacer que nuestra web responda siempre a las dos:

  • ¿Dónde estoy?
  • ¿A dónde voy?

Para responder a la primera, hablamos de branding y en la practica a través de la creación de un logotipo y de una identidad.

Y para responder a la segunda, depende de la estructura que se quiere crear, para que el usuario sepa lo que encontrará y dónde, estudiando un buen sistema de etiquetas (menús y submenús) y una lógica coherente detrás de la organización de la información (también en función del tipo de público al que se refiere).

Elementos esenciales son el logotipo y el menú y deben ser fácilmente identificables.

Pero atención, otro elemento esencial (por ley) en el caso de que sea una web de una empresa es insertar en el footer ( o pie de página) algunos datos sobre la sociedad, aviso legal, privacidad de datos y política de cookies.

Estructura de una página web

estructura diseño web

Hoy en día, la realización del sitio web de la empresa debe cumplir con algunos criterios para no quedar excluido de los juegos ( sobre todo en respecto al posicionamiento web – SEO-). Los elementos esenciales para una web de éxito:

  • Home page: definir inmediatamente los servicios y objetivos. La página principal debe describir de manera breve pero eficaz la empresa, sus puntos fuertes y los servicios ofrecidos. Hay que ser capaz de intrigar al lector en los primeros segundos de impresión, ya que más del 90% de los usuarios decide si continuar la navegación en un sitio en los primeros 10 segundos.
  • Navegación: simple y limpia, para obtener mejores resultados de optimización y legibilidad. Además una web caótica y con mucha información junto en la pantalla hacen que el lector termine la navegación. Los menús deben ser claros e incisivos, sin demasiados pasajes. Por último, hoy en día es necesario que la web sea responsive: adapta la plantilla al dispositivo con el que se muestra (páginas web optimizadas para móvil, pc y tablet).
  • Call-to-action: es uno de los puntos más importantes en el caso de una empresa B2C, pero también B2B; el CTA es un botón “compra”, “subscríbete” o “contáctanos” para convertir a un visitante en un lead, que debe ser siempre bien visible y destacado.
  • Quién somos: es importante disponer de una sección en la que se describa un poco la historia de la empresa y el equipo. Esta página normalmente se usa para acercarse empáticamente al público.
  • Blog y contenidos: esta parte es importante no sólo en cuanto a lo que puede ofrecer como empresa/otro, pero sobre todo en cuanto al posicionamienot SEO.

Lenguajes de programación Web

Antes de entrar en los detalles de cómo crear una estructura web y varias herramientas, veamos cuáles son los diferentes lenguajes de programación web para entender lo que hay en la base de la programación web:

Son lenguajes especiales de programación, pensados para la realización y desarrollo de aplicaciones para el web. Por aplicación se entiende una aplicación accesible a través de una red dentro de un sistema informático a través de la red inernet, es decir, en una arquitectura de tipo cliente-servidor.

programación diseño web

Hay 3 tipologías de lenguajes de programación:

  • Lenguajes estáticos: HTML (Hyper Text Mark-up Language) no es un lenguaje de programación real, se utiliza para describir los documentos hipertextuales disponibles en la Web. Es un lenguaje de mark-up, que describe el contenido de texto y no una página web. También existe CSS, que tampoco es un lenguaje de programación propiamente dicho, que define el formato de los documentos de mark-up.
  • Lenguajes dinámicos: entre estos encontramos PHP, ASP y Python. PHP (Hypertext Processor) es un lenguaje de programación web, el más difundido para el desarrollo de sitios dinámicos. ASP (Active Server Pages) son páginas web que contienen scripts que son seguidos por el servidor modificando el resultado mostrado por el navegador según las entradas enviadas por el usuario. Por último, Python es un lenguaje de programación orientado a objetos, que también permite el desarrollo de páginas web lado-servidor.
  • Lenguajes de Scripting: Javascript, es un lenguaje de scripting orientado a los objetos comúnmente utilizados en los sitios web.

Esta rápida lista de información puede haberte confundido, pero no te preocupes, no tienes que aprender un lenguaje de programación web para aprender a hacer diseño web (gracias a herramientas como WordPress, que veremos ahora).

Aquí entran en juego herramientas como WordPress, que es un CMS (Content Management System) que permite crear sitios web y gestionar su contenido con simplicidad. ¡También es utilizable por quien, como he dicho antes, no tiene conocimiento de ningún lenguaje de programación! ¿Por qué?

Consulta nuestra guía completa su como empezar a utilizar WordPress.

7 Consejos para hacer un buen diseño web

  1. Propósito: Siempre atender las necesidades del usuario. Cada página de la web debe tener un propósito claro, satisfacer una necesidad especifica a los usuarios de manera más eficaz posible.
  2. Comunicación : Los lectores quieren las informaciones rápidamente. La claridad es fundamental, se puede hacer uso de ayudas visuales que puedan ayudar la comprensión del contenido.
  3. Diseño del logotipo: Es importante que el formato del logotipo sea correcto para que pueda adaptarse a diferentes secciones del sitio. Y también que el color del logotipo y los de la web sean coherentes.
  4. Tipografía: hay muchas fuentes diferentes, elige la que tiene más legibilidad por tu web, los usuarios agradecerán.
  5. Colores: los colores pueden mejorar la experiencia del usuario, pero también pueden empeorarla. El equilibrio y la armonía son importantes, y que el fondo y el texto contrasten bien.
  6. Imágenes: una imagen puede hablar más de mil palabras, elegir imágenes adecuadas puede ayudar con el posicionamiento y la conexión con el público objetivo. También es importante el peso de una imagen y su formato, porque puede ralentizar la pagina web.
  7. Responsive: hoy en día el acceso a sitios web se hace desde varios dispositivos con varios tamaños de pantalla, por lo que es importante que la web sea completamente adaptable y amigable con los distintos dispositivos.

Somos expertos en diseño web, danos un toque!