Desarrollo de la página web de Count Binface con Squarespace
Las elecciones para cargos públicos en muchos países pueden tener consecuencias a nivel mundial: en Estados Unidos, por ejemplo, en la Unión Europea y en China. No, un momento. Pero las elecciones en el Reino Unido tienen un toque peculiar, típicamente británico. Aquí, cuando se celebran elecciones para un cargo importante como el de primer ministro, suele haber alguien allí que parece estar fuera de lugar.
Uno de ellos era un candidato serio al cargo de primer ministro británico. Pero no es quien tú crees.
Aunque no se trata de un fenómeno exclusivamente británico, el Reino Unido cuenta con una larga tradición de candidatos parlamentarios habituales y, en ocasiones, extravagantes. En las elecciones generales del año pasado, un candidato destacó con creces sobre los demás, en gran parte gracias a su casco con forma de cubo de basura. Se trata del Conde Binface, el guerrero espacial intergaláctico del planeta Sigma 9 que se presentó contra nuestro anterior primer ministro, Rishi Soon Axed.
Durante una serie de artículos sobre las páginas web de los partidos políticos, escribí sobre mis propuestas para una nueva página web del Conde Binface. Pues bien, podéis imaginaros mi alegría y sorpresa cuando me llegó la noticia desde Sigma 9 de que al Conde Binface le habían gustado mis diseños. Unos días más tarde, el Conde Binface me llamó y me preguntó si podría convertir mis ideas de diseño en su página web de campaña para estas elecciones generales. No pude negarme.
Squarespace es (obviamente) la plataforma preferida de los guerreros espaciales intergalácticos. Así que, menos de una semana antes de que el conde Binface anunciara su manifiesto, el reto consistía en plasmar mis diseños en una nueva página web utilizando Squarespace. Me preocupaba un poco no poder plasmar todos los detalles de mi diseño con Squarespace, pero lo conseguí, y así es como lo hice.
Selección de diseños de página para Count Binface
Elementos visuales de formas orgánicas
La maquetación es un elemento fundamental en la narración visual. Sin embargo, son demasiados los sitios web que utilizan una cuadrícula genérica con doce columnas de anchura igual, lo que da lugar a un mar interminable de diseños web que son calcos unos de otros.
El conde Binface ha elegido Squarespace por su cuadrícula predeterminada de 24 columnas con proporciones iguales. Mi reto consistía en crear un diseño que aprovechara el diseño integrado sin que el resultado pareciera una plantilla genérica. Para lograrlo, diseñé elementos visuales de formas orgánicas y utilicé marcos redondeados para las imágenes y los vídeos con el fin de disimular la estructura de la cuadrícula.
He creado un banner gráfico en orientación vertical que contiene texto y una imagen animada de Count Binface.
El Conde Binface es, seamos sinceros, un personaje poco convencional, así que quería que la primera impresión que causara su página web fuera igual de inusual. Esto significaba evitar las imágenes de banner a ancho completo que han invadido la red como una especie exótica. En su lugar, creé un banner gráfico en formato vertical que contiene texto y una imagen animada del Conde Binface. Junto a él se encuentra su presentación, que actualiza regularmente con nuevos mensajes.
Estructura de los banners en la interfaz de usuario de Squarespace.
He utilizado CSS personalizado para aplicar una imagen de fondo con el fin de suavizar la marcada separación entre el banner de la página de inicio y el panel que hay debajo.
Suavizar las marcadas separaciones entre los paneles.
Dado que Squarespace no permite posicionar con precisión las imágenes de fondo, el CSS personalizado me permitió controlar su posición, repetición y tamaño utilizando el identificador único del banner:
#collection-6661ddfcbac9fa3097a9e21a {
background-image: url(https://images.squarespace-cdn.com/…);
background-position: 0 100%;
background-repeat: no-repeat;
background-size: 100% 50px; }
Para reducir el número de esquinas afiladas en todo el diseño y convertir los vídeos incrustados de Count Binface en pantallas de televisión de estilo retro, apliqué imágenes destacadas personalizadas con formas redondeadas a cada uno de los bloques de vídeo.
Imágenes destacadas personalizadas con formas redondeadas
Añadir archivos de fuentes personalizadas
El diseño tipográfico de la nueva página web del Conde Binface es una parte fundamental de su personalidad. Elegí «Wildwords», una fuente de letras de cómic de Comic Book Fonts, y el Conde Binface ordenó a su equipo de Sigma 9 que adquiriera una licencia. Utilizar una fuente ajena a Squarespace no es complicado.
Utilizar una fuente ajena a Squarespace
1) Ve a «CSS personalizado» y despliega el menú desplegable «Archivos personalizados».
2) Sube los archivos de fuentes en un formato de fuente web, como WOFF2.
3) Añade este fragmento de CSS para cada una de las fuentes que estés utilizando.
@font-face {
font-family: 'FONT-NAME';
src: url('URL'); }
En cada caso, sustituye «FONT-NAME» por el nombre concreto de la fuente al que harás referencia en otra parte de tu CSS. Por ejemplo: «wild-woods-regular».
Elimina el marcador de posición de la URL, mantén el cursor entre las marcas, vuelve a abrir «Archivos personalizados» y pulsa sobre el nombre de la fuente.
Squarespace insertará la ruta absoluta al archivo de fuente, que ahora se encuentra almacenado en su CDN.
@font-face {
font-family: 'wild-woods-regular';
src: url('https://static1.squarespace.com/…'); }
Ahora utiliza el nombre de la familia de fuentes siempre que necesites la fuente personalizada.
body {
font-family:"wild-woods-regular", sans-serif; }
Cómo utilizar SVG con Squarespace
Desde que tengo memoria, he incorporado elementos gráficos en mis diseños utilizando gráficos vectoriales escalables (SVG) por su alto rendimiento, escalabilidad y nitidez, especialmente en pantallas de alta resolución. Desde las ilustraciones abstractas de mi tienda de plantillas de Squarespace hasta el banner animado de la web de mi estudio. Squarespace (todavía) no permite utilizar archivos SVG en sus bloques de imagen, así que, para el banner gráfico que contiene texto y una imagen animada de Count Binface, utilicé un bloque de código para incrustar código SVG en línea. Mi proceso incluye:
Diseño de gráficos SVG con Sketch
Optimización de estos gráficos mediante la reducción de trazos y puntos
Exportación de los archivos SVG
Optimizar aún más los archivos con SVGOMG, de Jake Archibald
Incluso después de subir mis fuentes personalizadas a Squarespace, algunos aspectos de la implementación —como los números en mayúsculas de gran tamaño de la página de inicio de Count Binface— no se podían conseguir utilizando la interfaz de usuario de Squarespace. Para tener un control preciso sobre su alineación y espaciado, creé estos elementos como archivos SVG y los incorporé al diseño mediante bloques de código.
Archivos SVG y los he incrustado en el diseño mediante bloques de código.
Los bloques de código y el CSS personalizado son tus mejores aliados
Squarespace es una plataforma flexible y potente, pero no puedo dejar de destacar la importancia que tienen los bloques de código y el CSS personalizado en mi proceso de desarrollo con Squarespace. Habiendo dedicado toda mi carrera a escribir CSS y HTML, me resulta mucho más fácil y rápido incrustar código HTML y SVG en un bloque de código y, a continuación, aplicarle estilos mediante el CSS personalizado. A veces, se trata de detalles que la mayoría de la gente nota, como ese banner gráfico.
HTML y SVG en un bloque de código.
A menudo son los pequeños detalles los que marcan una gran diferencia en un diseño. Por ejemplo, el pie de página de la web de Count Binface incluye un gráfico de un cohete que enlaza su logotipo con los iconos de sus redes sociales.
El gráfico del cohete vincula su logotipo con los iconos de sus redes sociales.
Las líneas de este separador se expanden para ocupar todo el espacio disponible, lo que constituye una aplicación evidente del diseño de caja flexible de CSS (Flexbox). Por lo tanto, he insertado un bloque de código con el HTML del separador:
<div class="hr-rocket"> <svg xmlns="…"/></svg> </div>
Y utiliza CSS personalizado para darle estilo:
.hr-rocket {
display: flex;
align-items: center;
gap: 10px; }
.hr-rocket svg {
width: 32px;
height: 24px; }
.hr-rocket:after,
.hr-rocket:before {
content: "";
display: block;
flex: 1;
border: 0;
border-top: 3px solid #F93943;
height: 1px; }
Conclusión
El conde Binface no derrotó a nuestro antiguo primer ministro —eso lo hizo Sir Keir Starmer—, pero sí quedó en sexto lugar con su mejor resultado electoral, lo que significa que su campaña fue un éxito. No se sabe hasta qué punto se debió a su nueva página web de Squarepace, pero mis fuentes en Sigma 9 me dicen que fue en gran medida. Sea cual sea la verdad, disfruté muchísimo desarrollando la nueva página del conde Binface con Squarepace y espero que le funcione bien durante miles de años.
Andy Clarke
A menudo considerado uno de los pioneros del diseño web, Andy Clarke ha desempeñado un papel fundamental a la hora de ampliar los límites de esta disciplina y es conocido por sus diseños creativos y visualmente impresionantes. Su trabajo ha inspirado a innumerables diseñadores a explorar todo el potencial del diseño de productos y páginas web.
Andy ha escrito varios libros de referencia en el sector, entre los que se incluyen «Transcending CSS», «Hardboiled Web Design» y «Art Direction for the Web». Además, ha colaborado con empresas de todos los tamaños y sectores para ayudarles a alcanzar sus objetivos a través del diseño.
Visita el estudio de Andy, «Stuff & Nonsense», y echa un vistazo a sus plantillas Premium de edición limitada para Squarespace.