Por qué KomuraSoft crea sitios web con el sistema de diseño de la Agencia Digital de Japón — El bajo coste y la calidad pueden coexistir

Una parte considerable del presupuesto de producción de un sitio web corresponde al tiempo dedicado al diseño. KomuraSoft reduce en gran medida esta fase apoyándose en el sistema de diseño publicado por la Agencia Digital de Japón, con un enfoque que contiene el coste y a la vez estabiliza la calidad.

Al oír «producción de sitios web barata», muchas personas piensan que en algún punto se está sacrificando la calidad. De hecho, reducir el precio omitiendo la entrevista inicial o limitándose a volcar texto en una plantilla suele dar como resultado sitios en los que no se entiende a qué se dedica la empresa.

El motivo por el que KomuraSoft puede mantener bajo el precio de la producción de sitios web no está ahí, sino en la estandarización de la fase de diseño. En este artículo explicamos, en orden, qué es el sistema de diseño de la Agencia Digital en el que nos apoyamos, qué usamos exactamente y cómo, por qué reduce el coste, por qué no baja la calidad y para qué tipo de proyectos no resulta adecuado este enfoque.

De aquí en adelante usamos «producción de sitios web» tanto para referirnos al servicio de KomuraSoft como para el proceso en general, ya que el español no distingue estos dos usos como sí lo hace el japonés.

1. Qué es el sistema de diseño de la Agencia Digital

El sistema de diseño de la Agencia Digital es la especificación de diseño estándar que la Agencia Digital de Japón publica para los sitios web y las aplicaciones de los servicios administrativos. La fuente primaria de información está en el sitio oficial.

• Sitio oficial: Sistema de diseño de la Agencia Digital (versión beta)
• Licencia y condiciones de uso: Avisos sobre el uso

A grandes rasgos, define de manera sistemática elementos como los siguientes.

Lo importante es que se distribuye públicamente bajo condiciones de licencia abiertas y puede utilizarse también en sitios privados. Los sitios de trámites administrativos deben poder ser usados por cualquier persona, sin importar su edad, su entorno o su nivel de familiaridad con la informática, por lo que el contraste, el tamaño de letra y la facilidad de uso se diseñan tras haber sido verificados. Ese conocimiento acumulado puede servir directamente de base también para el sitio de una empresa privada.

Las condiciones concretas de la licencia

Resumirlo todo como «licencia abierta» no basta para tomar decisiones en la práctica. En los Avisos sobre el uso oficiales, la licencia se indica por separado según el tipo de material distribuido.

En la práctica hay dos puntos clave. El primero es que si los datos de Figma o los fragmentos de código se editan o modifican para integrarlos en el sitio propio, no se exige mención de la fuente. Cuando se usa este sistema de diseño para producir el sitio de una empresa, la mayoría de los casos son de este tipo. El segundo es que se indica explícitamente que no está permitido publicar o utilizar el material editado o modificado «de forma que parezca haber sido creado por la Agencia Digital».

Además, el uso del sistema no implica que la Agencia Digital otorgue ninguna certificación ni aprobación. Nuestra posición tampoco es la de estar «avalados por la Agencia Digital», sino la de aplicar a proyectos privados una especificación estándar que está publicada. Las condiciones de licencia anteriores corresponden al momento de redacción de este artículo, así que, antes de decidir adoptarlas, verifique siempre las condiciones más recientes en la página oficial.

2. Qué significa exactamente «tomarlo como base»

Decir «tomar el sistema de diseño como base» es una expresión cómoda, pero el nivel de implementación puede variar mucho. En nuestro caso, lo incorporamos dividido en las tres capas siguientes. Este mismo sitio (comcomponent.com) tiene esa estructura.

Conviene señalar también qué no hacemos de forma deliberada. No incorporamos tal cual el código completo de los componentes que distribuye oficialmente el proyecto ni lo mantenemos como una dependencia externa. Los componentes que necesita el sitio de una empresa son limitados, y traer el conjunto completo aumentaría el tiempo de carga del sitio, además de generar un coste de mantenimiento por tener que seguir las actualizaciones del origen. La decisión es mantener solo los componentes necesarios, implementados por nosotros mismos siguiendo la especificación.

El efecto de esta estructura se aprecia al añadir páginas. Aunque se sume una nueva página de servicio, la forma de los botones, la jerarquía de los encabezados y los espacios coinciden con los de las páginas existentes, de modo que no hace falta pensar cada vez «cómo debe ser el diseño».

3. Por qué reduce el coste — la fase de diseño desaparece del presupuesto

Un presupuesto habitual de producción de sitios web incluye una proporción considerable de partidas relacionadas con el diseño. En la tabla rápida de precios habituales de producción de sitios web para pymes, las configuraciones con diseño propio se sitúan en la franja de 300 000 a 1 000 000 de yenes, y dentro de esa franja, la fase de diseño se compone, a grandes rasgos, de las siguientes tareas.

Lo que incluye la partida «diseño completo» de un presupuesto varía según la empresa, así que, al comparar, lo más seguro es pedir que se desglose hasta este nivel de detalle (esta forma de leer un presupuesto se explica con más detalle en el artículo sobre costes).

Al tomar el sistema de diseño como base, este planteamiento cambia.

• Los criterios de color, tamaño de letra, espaciado y botones ya están decididos desde el principio.
• Por regla general, deja de ser necesaria la ronda de «presentar varias propuestas de diseño, elegir una y corregirla».
• Disminuyen las decisiones que dependen de la sensibilidad de un diseñador, por lo que es menos probable tener que rehacer trabajo.

Es decir, el precio no baja por aplicar un descuento, sino porque se reduce el propio proceso. El tiempo que se libera se destina a las partes que realmente influyen en el resultado — construir una estructura que deje claro a qué se dedica la empresa, redactar los textos y diseñar el recorrido hacia el contacto. En la mayoría de los casos, la causa de que un sitio no comunique bien no está en el diseño, sino en la estructura, tal como explicamos en los tres lugares que hay que corregir primero en un sitio que no recibe consultas.

4. Por qué no baja la calidad — de hecho, se estabiliza

La intuición de que «si se omite el diseño, baja la calidad» parte de suponer que todo diseño se crea desde cero. Al usar un sistema de diseño estandarizado, ocurre lo contrario.

En primer lugar está la accesibilidad. Los componentes del sistema de diseño de la Agencia Digital se han diseñado teniendo en cuenta el contraste de color, el tamaño de letra, la visibilidad del foco y la facilidad de la interacción táctil. Garantizar ese nivel cada vez en el diseño de un proyecto individual exige por sí mismo tiempo de verificación. Usar componentes que ya han pasado esa verificación da como resultado una calidad más estable.

En segundo lugar está la experiencia de uso real. Los servicios administrativos se utilizan en situaciones reales por un abanico de usuarios extremadamente amplio, desde personas poco familiarizadas con el teléfono inteligente hasta especialistas. Las reglas de diseño empleadas allí no se han pulido para que «el aspecto parezca nuevo», sino para que cualquier persona pueda usarlas sin perderse. Esa misma cualidad es justamente la que importa a los posibles clientes que visitan el sitio de una empresa.

En tercer lugar está la coherencia. Un sitio en el que la forma de los botones o las reglas de los encabezados varían de una página a otra resulta difícil de leer solo por ello. Seguir un sistema de diseño evita que la estructura y el tono se rompan aunque se añadan páginas más adelante.

Este mismo sitio está construido sobre este sistema de diseño. Además, el caso de renovación del sitio de Douzu Carry Service se construyó con la misma política. El proceso de renovación en sí se detalla en el artículo del caso.

Para ver qué componentes concretos entran en juego, lo más rápido es comparar páginas reales. Los usos en este mismo sitio son los siguientes.

Douzu Carry Service es el resultado de aplicar los mismos componentes a otro sitio distinto. Los colores, las fotografías y los textos son, por supuesto, completamente diferentes, pero al comparar ambos sitios se aprecia que la facilidad para pulsar los botones y la forma en que se organiza la jerarquía de encabezados siguen las mismas reglas de diseño.

5. La estandarización no produce «el mismo aspecto»

Una preocupación frecuente es: «¿Un diseño estándar no hará que el sitio tenga el mismo aspecto que el de otras empresas?».

Lo que se estandariza son las partes de base: los criterios de color, el sistema de tamaños de letra y las reglas de diseño de los componentes. Lo que determina realmente la impresión de un sitio son el logotipo, las fotografías, el eslogan, la estructura de las páginas y el tono de los textos, y todo esto se crea desde cero para cada sitio. Tener una base coherente y carecer de personalidad son cosas distintas.

Dicho esto, hay algo que conviene decir con honestidad. Este enfoque no es adecuado para proyectos que necesitan una imagen visual propia muy elaborada o animaciones como expresión de marca. Es el caso, por ejemplo, de los sitios de marca o de campaña en los que la creación de una atmósfera concreta es el centro del valor. En esos proyectos, invertir de verdad en diseño y encargar el trabajo a una agencia de diseño especializada suele dar mejores resultados. Si al recibir una consulta detectamos que ese tipo de necesidad es la principal, se lo indicamos con franqueza desde el primer momento.

6. Resumen

• En el coste de producción de un sitio web, el diseño creado desde cero representa una proporción importante.
• KomuraSoft reduce en gran medida esta fase apoyándose en el sistema de diseño publicado por la Agencia Digital de Japón (sitio oficial).
• La licencia se divide según el material distribuido: los datos de Figma están bajo CC BY 4.0 y los fragmentos de código bajo MIT License. Si se editan o modifican para integrarlos en el sitio propio, no se exige mención de la fuente.
• «Tomarlo como base» consiste en tres capas: unificar los tokens de diseño, convertir los componentes en clases CSS e incorporarlos en las plantillas.
• El motivo del menor coste no es un descuento, sino que hay menos proceso; el tiempo liberado se destina a la estructura, los textos y el diseño del recorrido de contacto.
• Al usar componentes estándar diseñados con atención a la accesibilidad y utilizados en la operación real de servicios administrativos, la calidad se estabiliza en lugar de bajar.
• El logotipo, las fotografías y los textos se crean para cada sitio, por lo que no se llega al mismo aspecto. Sin embargo, este enfoque no es adecuado para proyectos que necesitan una imagen visual propia muy elaborada.

Si desea crear un sitio con una estructura que comunique bien y a la vez contener el coste, puede consultar el proceso y los precios en la página de producción de sitios web. Si nos contacta indicando la URL de su sitio actual, le devolveremos un resumen de qué conviene corregir primero para obtener más efecto.

Artículos relacionados

• Costes de producción de sitios web para pymes — tabla rápida de precios y cómo interpretar un presupuesto
• Caso de renovación de sitio: Douzu Carry Service, empresa de transporte de Miyazaki
• Los tres lugares que hay que corregir primero en un sitio que no recibe consultas
• Producción de sitios web

Artículos relacionados

Artículos recientes con las mismas etiquetas para profundizar en temas cercanos.

Temas relacionados

Estas páginas sitúan el tema en un contexto más amplio de servicios y decisiones.

Servicios relacionados con este tema

El artículo está directamente relacionado con los siguientes servicios.

Preguntas frecuentes

Preguntas habituales en las consultas sobre el tema del artículo.

¿Se puede usar el sistema de diseño de la Agencia Digital en el sitio de una empresa privada?

Sí. La Agencia Digital publica su sistema de diseño bajo una licencia abierta, por lo que puede utilizarse también en sitios ajenos a la administración pública. Sin embargo, su uso no concede una certificación ni una aprobación de la Agencia Digital. Nuestra posición es aplicar el sistema de diseño publicado a sitios del sector privado.

¿Un diseño estandarizado no hará que el sitio se parezca al de otras empresas?

Solo se comparten las reglas de base para colores, espacios y componentes. El logotipo, las fotografías, el mensaje principal y la estructura de las páginas se crean para cada sitio. Como estos elementos son los que determinan la impresión real, la estandarización no convierte todos los sitios en uno igual. Su efecto es que las partes que deben ser coherentes —como la legibilidad del texto y la facilidad para pulsar los botones— sí lo sean.

Perfil del autor

Página de presentación del autor del artículo.

Go Komura

Representante de KomuraSoft LLC

Especializado en desarrollo de software para Windows, consultoría técnica e investigación de fallos, sobre todo en proyectos con sistemas existentes y errores difíciles de reproducir.