diseño web archivos - Bikain.studio

Tutorial diseño web

    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!

    Manual de ayuda de WordPress

      ¿Necesitas ayuda en WordPress? Hemos redacto un manual que te puede ayudar a diseñar tu web!

      ¿Eres una empresa que necesita servicios de diseño web y marketing digital? –>Danos un toque!

      Esta es una guía completa en la que te explicaremos cómo usar WordPress

      ¿Qué es WordPress?

      Es un CMS ( content management system) que permite crear sitios web y gestionar su contenido con simplicidad. También es utilizado por aquellos que no conocen los lenguajes de programación y hoy en día es una de las plataformas más utilizadas en el ámbito del diseño web.
      Buena lectura!

      Los primeros pasos

      En primer lugar, para utilizar WordPress es necesario haber adquirido un servicio de hosting o haber elegido uno de los servicios que permiten crear sitios web con WordPress listos para su uso. Si no eres una empresa y eres un novato de WordPress, nuestro consejo es que confíes en empresas que ofrecen servicios de hosting (ofrecen espacio web) y dominio, un paquete listo para usar.

      También está disponible una versión gratuita de WordPress, utilizable para experimentar más que nada, ya que está limitado a herramientas muy básicas e insuficientes para una web empresarial.

      Si estás listo para usar WordPress y tu sitio ya está online, todo lo que necesitas para acceder a tu WordPress Web es iniciar sesión con tus credenciales de acceso; pantalla de login, siempre puedes acceder a través de: www.nombresitioweb.es/wp-login.php o www.nombresitioweb.es/wp-admin.

      Wordpress login

      Una vez realizado el login se abrirá una nueva página, llamada dashboard (Escritorio de WordPress), en el que podrás visualizar algunas órdenes rápidas, comprobar las actividades de tu sitio y las actualizaciones. La barra lateral contiene las siguientes funcionalidades de WordPress:

      • Entradas: para crear nuevos artículos para publicar en tu sitio. Además, permite gestionar las categorías y etiquetas.
      • Medios: es el archivo que recoge todos los archivos (imágenes, documentos de texto, archivos de audio, etc.) que se cargan en el sitio.
      • Páginas: para crear las páginas de tu propio sitio.
      • Comentarios: Esta es la sección en la que se recogen todos los comentarios que los lectores publican en el espacio de comentarios de artículos y páginas. El administrador del sitio puede optar por aprobar, tachar o marcar como spam cada comentario.
      • Aspecto: es la sección que permite elegir el aspecto gráfico del sitio (instalando nuevos temas gráficos o plantillas de diseño), realizar modificaciones y administrar los menús.
      • Plugin: para instalar nuevas herramientas que le permiten aumentar la funcionalidad de WordPress. Existen plugins de todo tipo y para todas las necesidades, tanto gratuitos como de pago.
      • Usuarios: es la sección en la que gestionar los usuarios inscritos en el sitio, cambiar el rol (los permisos) y añadir nuevos usuarios manualmente.
      • Herramientas: para acceder a la funcionalidad básica de WordPress, como importar o exportar archivos y eliminar datos personales.
      • Configuración: para establecer el título del sitio y gestionar la configuración general de WordPress, como el idioma, la zona horaria, las categorías y más.
      menu lateral WordPress

      Uno de los puntos clave para el éxito de un sitio es la creación y publicación de nuevos contenidos. Esto ocurre a través de la creación de paginas y entradas.

      Entre estas dos últimas hay una diferencia, porque redactar una entrada y una página son dos cosas distintas y para fines diferentes:

      Las páginas son para contener información estática que no será modificada con el tiempo. Mientras que las entradas son los mensajes que componen un sitio, es decir, el contenido informativo que tiene una fecha de publicación y un tema muy específico, por ejemplo, esta guía sobre WordPress.

      Crear Páginas

      Crear una página es muy simple, en la columna lateral encontraremos la voz Páginas y el botón añadir nueva. Una vez en la pantalla, podremos insertar directamente el título, pulsando Envío se creará por defecto un bloque “párrafo” para insertar texto.

      Es posible insertar diferentes tipos de bloques y hay varias formas de hacerlo, la forma más sencilla es crear un párrafo y cambiarlo haciendo clic en el botón “+” y eligiendo el bloque de texto que necesitas. Si no, en la parte superior lateral encontraremos el mismo botón con la misma función.
      Por último, en base a los plugins y a las plantillas que hemos instalado en nuestro sitio, estarán disponibles otros bloques o un esquema diferente de paginación, pero esto es un discurso más avanzado que ahora no nos interesa.

      Una vez terminada la página, es hora de publicarla (o de verla en el borrador a través del botón lateral de Publica).

      páginas wordpress

      Crear Entradas

      La creación de una entrada es igual a la de una página, siempre partimos del menú lateral y bajo la entrada Paginas agregamos una entrada nueva.

      Desde aquí que el procedimiento es idéntico a las páginas, si no por el hecho de que las entradas se agrupan en categorías según el tema de que tratan (u otros criterios de tu elección cuando creamos la categoría), crear una categoría nueva es muy simple: buscamos la caja categoría en el sub-menú de las entradas y añadir nueva categoría, nombrar y publicar.

      Menú

      Para crear un menú vamos, desde la columna lateral, en Aspecto y luego Menú. Desde aquí, hacemos clic en crear un nuevo menú, ponemos el nombre y podemos crearlo. El menú se compone de todas las páginas y entradas que hemos publicado y podemos añadirlas o eliminarlas del menú.

      Para crear un sub-menú arrastramos a la derecha un bloque en el menú, estando debajo del bloque en el que se quiere crear el sub-menú. Es más difícil explicarlo que hacerlo, en unos minutos entenderás cómo funciona.

      También es posible añadir widgets a nuestro menú, dependiendo del tema gráfico que hemos instalado.

      Una vez terminado de editar el menú lo conservamos y nos movemos al siguiente paso.

      Menu wordpress

      Modificar el Aspecto gráfico

      Cambiar el aspecto gráfico de nuestra web nos permite elegir el aspecto en función de nuestros gustos o necesidades. Se pueden cambiar los elementos gráficos de todo el sitio o sólo de elementos individuales, como menús y widgets (que son los boxes que contienen el enlace a las redes sociales, listas de etiquetas, contadores y mucho más).

      Para elegir el tema gráfico, siempre en la columna lateral buscamos el elemento Aspecto y añadir nuevo tema. En la librería de WordPress hay muchos temas, si estás utilizando la versión gratuita de WordPress muchos de ellos serán bloqueados, pero en otro caso eliges y busque el tema que más te gusta, instalarlo y activarlo.

      Dependiendo de cómo se construya el tema gráfico instalado, podremos gestionar los menús y widgets de forma diferente.

      Los Plugins

      Ahora llegamos a una parte muy importante de WordPress (especialmente en caso de web para empresas), los plugins. Los plugins son simplemente programas que añaden funcionalidad a nuestra web, o pueden ayudar a la optimización, seguridad, etc.

      Para entender mejor, un ejemplo práctico:
      Si quieres poner en tu sitio web un formulario de contacto y no conoces ningún plugin que pueda hacer en su caso.

      Desde el muro de WordPress, hacemos clic en Plugin y añadir nuevo. Desde aquí podemos buscar plugins a través de palabras clave, una vez localizado lo descargamos e instalamos.

      El procedimiento para activar el plugin suele estar contenido en la descripción del plugin en sí.

      Para editar un plugin, por ejemplo, deshabilitarlo o eliminarlo, desde la barra lateral habitual bajo el elemento de plugins encontraremos las diferentes opciones y debajo de los diferentes plugins encontraremos la opción de edición si está previsto.

      plugins

      Y por último, vamos a ver la voz Configuración, donde se puede establecer cierta información como el Título del sitio, dirección de correo electrónico, idioma y mucho más. También hay opciones de lectura, discusión, escritura y medios.

      Esta parte la dejamos a ti para que la escarbe, ya que todo lo que hemos explicado hasta ahora es suficiente como base para empezar a probar WordPress.

      ¿Eres una empresa que necesita de servicios de diseño web y marketing digital? –>Danos un toque!

      Diseño Web Bilbao

        Somos una agencia de marketing en Bilbao y queremos responder a tus preguntas sobre diseño web. Esperamos que al final de este articulo sabrás algo más o habrás aclarado algunas dudas.
        #diseñowebbilbao #diseñoweb #diseñowebbizkaia

        ¿Qué es el diseño web?

        El diseño Web es la actividad que consiste en planificar, mantener y crear páginas web y plataformas digitales. Su definición engloba una gran variedad de aspectos distintos, y se destaca del término tradicional de “diseño”. Algunos de ellos pueden ser el diseño de la interfaz, del material gráfico o la navegabilidad del sitio web.

        Una web para ser funcional debe tener algunas características fundamentales, para que el usuario pueda entender el mensaje que tu web contiene:

        Grado de usabilidad, una web lenta, demasiado compleja y sin posibilidad de interacción no es una buena web.

        Experiencia agradable del usuario, una web tiene que ser simple, interactiva, accesible y compatible para ofrecer una experiencia mejor.

        Diseño atractivo, hablando claro, si tu web no es atractiva y poco navegable un nuevo usuario va a salir de tu web sin mirar lo que ofreces o lo que quieres decir.

        Usabilidad adecuada, adaptativa, indexable y navegable: son otras características que tu web debe tener.

        Experiencia adecuada, suave y atractiva a la hora de moverse por una página en Internet. Es algo capaz de transmitir la imagen de una marca y su mensaje, con el objetivo de una buena experiencia de sus consumidores, o mejor dicho, responder bien a las necesidades del público actual.

        No tienes Web o tu web no tiene estos elementos? Si quieres, nosotros podemos ayudarte!

        Diseño Web, UX Design y UI Design

        El diseño web comprende otros dos aspectos que forman parte de la experiencia del usuario, El UI Design y UX Design, y ahora te explicaremos en que consisten.

        UX Design: es el acrónimo de User Experience Design y se compone de aquellos procesos que acrecen la satisfacción del usuario, mejorando la usabilidad, interactividad y intuición de tu web. La User Experience agrupa todos los aspectos de la interacción entre el usuario final y la empresa, sus servicios y sus productos. El UX Design es complejo, lleno de desafíos y características y su objetivo final es mejorar la experiencia del usuario, proporcionándole lo que desea de la manera más fácil y atractiva posible.

        UI Design: es el acrónimo de User interface Design y es un subgrupo del UX Design y es su “alma Visual”. Mientras que la User Experience es una aglomeración de acciones centradas en la optimización de un producto, la UI Design se ocupa exclusivamente de la presentación del producto, de la marca y del servicio de la empresa.

        La interfaz que se presenta al usuario es muy importante, ya que representa el primer impacto con tu marca, y “la primera impresión es la que cuenta”. Tiene que trasmitir confianza, claridad, orden y seguridad para llegar al objetivo de guiar el usuario dentro de tu web y hacerle encontrar lo que está buscando.

        ¿Cuál de los dos aspectos es más importante?

        Ambas son irrenunciables, las dos disciplinas se completan mutuamente y necesitan atención en igual manera.

        Diseño Web y su importancia en las ventas

        Es crucial tener una buena web hoy en día, tanto por el aspecto económico como por la imagen de empresa y brand, así como también para el tema de la competencia.

        El desarrollo de páginas web tiene que ser orientado a optimizarlas y mejorar los varios aspectos vistos antes. De esta manera, el usuario puede individuar directamente los productos/servicios o ser guiado hasta ahí a través de una buena estructura web.

        Interactividad y accesibilidad son los criterios que más se deben tener en cuenta para asegurarse la satisfacción de los visitantes.

        Las interfaces visuales son tan importantes como el contenido que acompañan; prueba a pensar en todos los factores que influyen en tu propensión a leer como:

        – dimensión y color de la fuente o tipografía,
        – el color y la disposición de los textos,
        – la presencia o no de imágenes para romper los bloques de texto.

        Estos son algunos elementos que tienen repercusiones practicas sobre la capacidad de las web profesionales de convertir los lectores en clientes.

        Todos los factores que influyen en la navegación debe tener un propósito específico, dirigido a la consecución de los objetivos de tu negocio. El contenido tiene que ser fácil de alcanzar y con el menor número de clics posibles.

        Un rendimiento estético satisfactorio, contenidos de calidad y intuitivamente dispuestos ayudan a transformar tu sitio web en una excelente máquina de conversión.

        ¿Estás interesado? Tenemos servicios de marketing a medida para tu negocio. Desarrollamos web a medida, creamos estrategias digitales y más, nos ocupamos de todo lo relacionado al mundo del marketing. Danos un toque!