Infórmate sin compromiso, ¡Te llamamos gratis!

Webbing Barcelona catalán Webbing Barcelona castellano info@webbing.cat - Telf: +34 93 169 65 46
Proceso creativo Design Sprint

¿Qué es el Design Sprint y para qué se utiliza?

El diseño web y el marketing digital son dos mundos en expansión constante y que requieren, por supuesto, de investigación para estar al día y ofrecer lo mejor a todos los clientes, que buscan ganar presencia en la red. En un esfuerzo por conseguirlo, se ha diseñado y afianzado un nuevo concepto, el Design Sprint. Hoy veremos en qué consiste y para qué se utiliza.

¿Qué es el Design Sprint?

El Design Sprint es una metodología a camino entre el Scrum y el Lean Design. Esta se implementa en cinco días (acortable si se dan las circunstancias) en los que se trabaja la idea hasta llegar al producto diseñándose un plan de validación en mercado. Su finalidad es reducir o solventar los problemas de diseño.

Durante este tiempo se llevan a cabo una serie de técnicas que van a determinar su tu idea podría tener éxito y en qué medida. Esto se consigue combinando el diseño estratégico, la innovación y técnicas ágiles.

Metodología Design Sprint

Con ello se busca alinear las necesidades a la vez que cocrearemos una solución a estas necesidades en la que todos los implicados sean partícipes. Para ello, el conocimiento de los integrantes de nuestro equipo, de sus capacidades, de sus aptitudes y de sus mejores y peores puntos es totalmente necesario.

¿Cómo se lleva a cabo un Design Sprint?

Veamos qué debemos hacer día a día.

  • Día 1: Definir la meta. Se comienza por analizar la información con que cuentan todos los participantes en relación al producto y el problema que tenemos. Coge datos cualitativos y cuantitativos de recursos como entrevistas o incluso Google Analytics.
  • Día 2: Inspirarse. En esta jornada debemos esforzarnos por encontrar soluciones dentro de un proceso en el que nos valdremos de técnicas como el prototipado veloz, que consiste en dibujar la solución que tiene en mente y explicarla apoyándose en él.
  • Día 3: Tomar una decisión. Parece un día sencillo, pues “solamente” vamos a tomar la decisión. Eso sí, está claro que hay que pensar en las propuestas detenidamente, analizando cuán viables son, qué potencialidad tienen, en qué medida se cubren las necesidades y qué posibilidades se tiene con cada una de ellas.
  • Día 4: Realizar un prototipado. Un día de mucho trabajo en el que se tendrá que crear un prototipo realista basado en las decisiones que se han tomado en la jornada anterior.

Diseño de prototipado

  • Día 5: Hacer entrevistas. Finalmente, habrá que ofrecer el prototipo a los que serán cinco usuarios ideales, que serán quienes lo prueben. Tendrás que trabajar en los momentos que han vivido con el producto o servicio y conocer sus expectativas para ajustar el modelo de negocio a cada contexto. Tu equipo tendrá que hacer un reporte lleno de reflexiones sobre el aprendizaje durante el proceso. Con ello será fácil establecer cuáles serán los siguientes pasos a dar.

Sin duda, se trata de un recurso, cuanto menos, curioso en su forma, que comporta, en cualquier caso beneficios como la acertada formación de un MVP, el surgimiento de nuevos negocios y el ahorro económico.

Preprocesadores CSS para diseño web

Preprocesadores de CSS: ¿Qué es Sass?

A la hora de programar toda ayuda es buena. Los profesionales de la rama cada vez nos vemos más colapsados pues, por suerte, el comercio digital es el presente y el futuro, de manera que todo el mundo quiere estar en Internet. Esto hace que, por supuesto, nosotros tengamos que utilizar recursos variados que se adapten a las peticiones de cada cliente. Y uno de ellos son los preprocesadores de CSS, de los que hablaremos a continuación.

¿Qué es un preprocesador CSS?

Volviendo con terminología de diseño como las diferencias entre UX y UI, vamos a ver qué es un preprocesador CSS:

Un preprocesador CSS es una herramienta de traducción de hojas de estilo que son comunes, todas ellas, a un código estándar que los navegadores pueden reconocer. Esto es, un útil para escribir en un código más básico, con bucles, condiciones, variables y funciones, que el CSS que después será convertido.

Cuentan con utilidades que no encontramos en el lenguaje CSS y que, por ende, los navegadores no pueden interpretar. Algunas son mixins, anidación de servidores, variables…

Preprocesadores CSS Mixin

Con este economizamos el tiempo gracias a que podemos, simplemente, escribimos menos código. También debemos destacar que tiene un mantenimiento sencillo y que es un recurso fácil de comprender, pues está muy bien organizado.

Como puntos negativos de esta herramienta encontramos el hecho de tener que aprender un nuevo lenguaje y que el código no sea tan común como se ve en otras circunstancias, pues requiere de compilación específica. Este, además, afecta directamente al flujo de desarrollo creado.

¿Qué Sass?

Sass es uno de estos preprocesadores mencionados. Hay otros que también tienen su sitio en el mercado, como es el caso de Stylus o de Less, si bien, queremos hablar en específico de Sass debido a que es el más utilizado de entre los preprocesadores actuales y tiene una demanda altísima.

Sass cuenta con una sintaxis de código que bien se puede dividir en dos grandes partes.

  • Sintaxis Sass. Difiere un poco de la sintaxis de CSS estándar, eliminando puntos y comas en algunos puntos, utilizando indentados…
  • Sintaxis SCSS. Se parece más a las de CSS, incluyendo algunos aspectos extra simplemente.

Código diseño CSS

A priori podría parecer que realizar estas modificaciones, alejándonos del CSS puro para aprender a usar código nuevo puede ser negativo, pues requiere de un mayor tiempo de aprendizaje, si bien, esta es la opción más acerada para el medio (y no tanto) plazo.

La solución pasa con centrarnos en esa parte de la sintaxis de Sass que se da en SCSS y que se acerca, por tanto, al estándar. De esta manera estamos utilizando código CSS validado y mantenemos nuestros conocimientos previos, que siguen siendo útiles en el caso que nos ocupa, así como la posibilidad de integrar códigos de estilo que ya pudiésemos tener.

La sintaxis SCSS nos permite trabajar diferentes aspectos de una variable que CSS no posibilita, pues, simplemente, se trata de declaraciones que aquí no existen. CSS tiene sus propias variables, pero trabajan con otra sintaxis.

Diseño web mobile

¿Cómo tener una página adaptada para móviles?

¿Te has dado cuenta de cómo la gente anda por la calle mirando su teléfono? En autobuses, bibliotecas, en el trabajo, en clase, en el baño… Grandes y pequeños, todos vivimos pendientes del nuestro y ello repercute, por supuesto, en el uso que hacemos de internet y, por ende, en las visitas que tengas en tu web. Ahora debes diseñar para quienes te visitan desde ese autobús y desde esa biblioteca y la manera de hacerlo es tener una página adaptada para móviles. ¡Descubre lo que se lleva para conseguirlo!

Elementos de mejora para tener una web adaptada para móviles

Como no podía ser de otra manera, Google lleva la voz cantante y, a día de hoy, lo que más puede necesitar tu sitio para ser compatible con dispositivos móviles tiene mucho que ver con esta empresa. Ahora descubrirás por qué.

Mobile-First

Se trata de un algoritmo creado por Google que prioriza, cuando se realice una búsqueda, la aparición de webs que dispongan de versión móvil. Esto significa que, por muy bien que te montes tu desktop, si es pobre en contenido mobile, no te servirá de (casi) nada.

Diseño mobile first

Características y consideraciones:

  • Prima la usabilidad, lo cual se calcula con tiempo de permanencia en el sitio y porcentajes de rebote.
  • Facilitar la interacción con las redes sociales, que tanto se utilizan desde los dispositivos móviles.
  • El tiempo de carga debe ser mínimo. Esto no significa sacrificar en calidad sino realizar un trabajo exquisito de optimización tanto de los elementos multimedia como del propio contenido del sitio, su disposición, etc.
  • Trabaja con los tamaños para que sean cómodos de ver y palpar en una pantalla de pequeñas dimensiones.
  • No a los complementos de falsa, deficiente o nula compatibilidad con dispositivos móviles, tipo Flash.
  • Contenido audiovisual sí, pesa, pero es muy demandado; optimizar, optimizar y optimizar; ¡ah, sí! Y escoger aquel que tenga verdadero valor.
  • Popups pequeños para no molestar a la hora de navegar.

Accelerated Mobile Pages

Es un formato de diseño web que busca satisfacer lo que el cambio en las tendencias de búsqueda nos muestra en la actualidad.

Los dispositivos móviles se utilizan ya tanto como los ordenadores para acceder a todo tipo de páginas web, con un incremento que, además, sigue dándose, por lo que las predicciones vaticinan que el acceso desde estos dispositivos sobrepase al que realizamos desde los más convencionales dentro de muy poco.

Por ello, se busca disponer de versiones de los sitios web que, como indican las siglas, sean aceleradas, de manera que ofrezcan el contenido de una manera rápida y con el menor consumo posible de datos, y esto es precisamente lo que defiende este nuevo concepto surgido de la mano de Google, las Accelerated Mobile Pages.

Accelerated Mobile Pages

Características y consideraciones:

  • Saber que se trata de una tecnología de código abierto que se puede mejorar diariamente por cada usuario por lo que resulta ser muy flexible dentro de lo que pide.
  • Requiere de una web nativa de escritorio desde la que se le hará referencia directa a la versión AMP.
  • Su objetivo principal es la optimización de los tiempos de carga, de manera que el usuario navegue rápidamente sin tener que esperar ni un instante.
  • Se elimina todo elemento innecesario, cualquier floritura no será bienvenida.
  • Aunque es agradable para Google, es incompatible con el contenido de ciertos sitios, de manera que no siempre resulta recomendable implementarla.

¡Hasta aquí este post! Esperamos que te haya gustado 🙂 Y recuerda contactar con nosotros para cualquier duda o comentario.

Diseño páginas web para startups

Diseño de páginas web para startups y emprendedores

Tener presencia en internet es algo indiscutible si cuentas con cualquier tipo de negocio, en serio, no importa cuál. No sabemos si tienes que convencerte de ello todavía o si ya lo has asumido y vienes a por todas. Sea como sea, nosotros vamos a hablarte sobre el diseño de páginas web para startups y emprendedores, de manera que comprendas un poquito más lo que se lleva, lo que se busca y lo que tendrás que implementar.

7 consejos para que el diseño web para startups sea todo un éxito

Vamos con 7 aspectos que te ayudarán a hacerte una idea de lo que necesitas y, por supuesto, a empezar con tu proyecto en la red.

Social Design

Las redes sociales son el producto rey de Internet. Por ello, hacer que tu sitio se parezca a ellas en la medida de lo posible te ayudará. Especialmente debes buscar la manera de que tu contenido se pueda compartir fácilmente, pues al usuario le encanta hacerlo y conseguirás atraer mucho más público objetivo de tu target.

Organización sí o sí

Tengas mucho o poco, todo debe estar bien organizado, de manera que sea accesible de manera intuitiva. No te olvides de nada, desde tu catálogo de productos hasta tu blog pasando por la información adicional (de envíos, de empresa e incluso la política de privacidad).

La navegación debe ser sencilla y rápida así que no olvides definir áreas, hacer una clasificación categorizada, asignar etiquetas… ¡Y no te olvides de un buscador! El resultado debe ser un sitio que muestre lo que hay y en un orden de importancia, sin que el usuario tenga duda de lo que va a encontrar y dónde puede estar lo que busca.

Creación páginas web emprendedores

Diseño responsive

Innegociable. El diseño para el usuario es lo que se impone y ello significa, indudablemente, facilitar el acceso a tu sitio desde todo tipo de dispositivos. El acceso a internet es más común hacerlo desde estos, con especial despunte en las compras online.

A favor del feedback

En un momento como el que vivimos, el usuario no sólo valora el poder comunicarse con cualquier marca sino que lo necesita. Ser inaccesible, huir de las opiniones negativas, evitar la atención al cliente… Todo eso ya es cosa del pasado; ahora tienes que estar en todas partes y dar todas las opciones para que este se sienta escuchado y valorado, incluyendo, por supuesto, respuestas; una verdadera comunicación en la que todo el mundo pueda opinar, cara a cara, sobre tu imagen, tus productos, tus servicios postventa y todo lo demás. Tranquilo porque esto tiene su lado positivo, aunque ahora mismo no lo acabes de visualizar.

Blog

Piensa desde ya que tendrás que desarrollar un blog. Hacerlo tiene incontables ventajas, desde aquellas que pasan por ayudar con el posicionamiento en buscadores hasta las que hacen que el usuario tenga una mejor imagen de nuestra marca y nuestro sitio gracias a lo completo que es, a las soluciones que le aportamos, etc. y pasando por muchas otras.

Desarrollo webs para startups

Seguridad para el usuario

El usuario ya no es inocente y, sabiendo cómo funciona Internet (y teniendo otras opciones disponibles), no va a acceder a un sitio con escasa seguridad.

Necesitarás hacerte con firmas digitales, usar el protocolo https, comprar certificados SSL, implementar opciones para no recordar contraseñas…

Uso de calls to action

Las llamadas a la acción son necesarias para aumentar las conversiones, acciones que el usuario realiza en el sitio.

Debemos contar con una por objetivo pero, a su vez, no deben ser demasiadas ni atrapar a quien las percibe; es necesario, por tanto, hacer un buen análisis previo de lo que deseamos y buscar la manera de conseguirlo.

Hasta aquí este post tan interesante, esperamos que os sirva de ayuda a la hora de diseñar vuestra primera página web. Si estáis interesados en más asesoramiento o necesitáis ayuda para realizarla, no dudéis en contactar con nosotros a través de la web 🙂

Nueva actualización WordPress 5

Gutenberg: Cambios en la nueva versión de WordPress 5

Sí, no has escuchado mal, el CMS por excelencia hace un importante update y tenemos que acostumbrarnos porque es, y será, muy diferente. Vamos a ver cuáles son los cambios en la nueva versión de WordPress 5, la llamada Gutenberg.

Nuestro consejo, antes de comenzar, es que no te emociones y desees hacer la instalación de las novedades porque la cosa tiene molla. Mucho se ha hablado y queda por hablar y, sabiendo que disponemos de 3 añitos para hacer el cambio definitivo, más nos valdría esperar un poco, probar la nueva versión en webs que no estén en funcionamiento (ni sean la base de nuestro sustento).

Sea como sea, vamos a contarte de qué va Gutenberg! 🙂

Principales cambios en la nueva versión de WordPress 5

Principalmente se han realizado dos cambios considerables y que son los que van a caracterizar la versión: el editor en bloque y el tema para comprobar cómo es la nueva versión.

Editor de bloques Gutenberg

Este sustituye al editor clásico TinyMCE, con el consecuente y lógico cambio en el modo de trabajo en la plataforma.

De momento, el cambio más evidente se da en el propio espacio para el texto, el cual, desde ya, ahora se divide en bloques que vas creando con cada “Intro”. De este modo, cada párrafo se corresponde con un bloque diferente, como también quedan diferenciados todos los Hs o encabezados. Cada bloque cuanta con sus propias características para dar formato al texto.

Además, paulatinamente irán cambiando el resto de aspectos como son los widgets, los menús o la portada; todo pasará a funcionar mediante bloques.

Editor bloques Gutenberg

De momento, ello implica que:

  • Se tenga que aprender sobre React, la biblioteca de JavaScript.
  • El flujo de trabajo varíe considerablemente, incluyendo nuevas combinaciones de teclado, siendo la curva de aprendizaje algo acusada.
  • Existan muchos plugins, de momento, incompatibles.
  • Se den problemas de accesibilidad que dificulten las actualizaciones.

Tema Twenty Nineteen por defecto

Para acompañar este gran cambio en el mundo del diseño web se ha incorporado un tema completamente compatible con Gutenberg en todos los aspectos, de manera que el usuario ya pueda tener una idea final sobre cómo es la nueva versión y ofreciendo, por supuesto, la posibilidad de contar ya con un tema adaptado.

Tiene un diseño minimalista, un ancho completo en su estructura y una gran cabecera así como una considerable área para los widgets al final de página.

Nuevo tema wordpress gutenberg

Otros cambios en Gutenberg de WordPress

Aunque esto es lo más significativo, hay también alguna otra cosilla que no podemos dejar sin comentar.

  • El resto de temas también se han actualizado en diferente medida para que sean acordes a los estilos de los bloques.
  • Se han incorporado mejoras en la REST API.
  • Ahora hay nuevas APIs de bloques y de avisos, de manera que se pueden incluir mensajes emergentes en los bloques.
  • Se incluyen mejoras a nivel de seguridad, adaptabilidad y en el recorte de imágenes para utilizar en fondos.
  • Estos cambios en la nueva versión de WordPress 5: Gutenberg son compatibles con PHP 7.3.

Estos son algunos de los cambios que incorpora WordPress en su última versión, que no es poco. ¿Tienes alguna duda? ¡Contacta con nosotros para que la solventemos!

0
Connecting
Please wait...
Enviar un mensaje

Lo sentimos, ahora mismo no estamos online. Déjanos un mensaje y te contestaremos lo antes posible.

Nombre
* Correo electrónico
* Mensaje
Teléfono
    Entra en el Chat

    ¿Necesitas ayuda o deseas un presupuesto? Háblanos por el Chat online y te contestaremos al momento.

    Nombre
    * Correo electrónico
    * ¿Qué pregunta tienes?
    * Teléfono
    ¡Estamos Online!
    ¿Qué te ha parecido nuestra atención?

    ¡Ayúdanos a mejorar! ¿Te ha resultado efectivo nuestro chat?

    ¿Cómo nos puntuarías?
      Uso de cookies

      Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra Política de cookies, pinche el enlace para mayor información.

      ACEPTAR
      Aviso de cookies