Logo LiberaForms Logo LiberaForms

Website design

This website’s creative proccess.

Web and font accessibility

Basic considerations when designing accessibility and typography choices.

Accessibility

  • The text is structured into headers and paragraphs.
  • The letter is large with a good line height.
  • Images include descriptions.
  • Pages include hyperlinks to improve site navigation.
  • When pages contains a lot of information, an index is prepended.
  • Colours are suitably contrasted.

Fonts

The website pages use the Luciole font, licensed under the CC BY 4.0. The logo is built with Digitalt and Piscolabis, both licensed under the SIL Open Font License (OFL).

  • Luciole developed explicitly for visually impaired people. Thank you to the Regional Technical Center for Visual Impairment and typographies.fr
  • Digitalt for the letter “LIBERA” in the logo. Thank you gluk (Grzegorz Luk) of Gluk Fonts.
  • Piscolabis for the letter “LIBERA” in the logo. Thank you Ariel Martín Pérez from Tunera Type Foundry.

Go to the index

Graphical elements

The letters “I” and “B” from LiberaForms have been modified to make a butterfly, an organic, lighweight and pollinating creature. Below the butterfly is a corkscrew that suggests movement.

When inclined, the “I” of the butterfly looks like a smile, and the “B” looks like a heart.

Geek trivia

After designing the logo we realised we had seen that butterfly before.

Photo of RMS as a young man playing a flute to a butterfly rested on a server.

What a coincidence!

Items

Logo png 400x120px
Bitmap logo. Transparent background, white letters and yellow butterfly.

Favicon svg 32px
Butterfly made with the I and the B of LiberaForms.

Corkscrew svg 128x72px
Yellow corkscrew from the bottom of the butterfly.

Heart svg 120x104px
Inclined yellow B that looks like a heart.

Smile svg 108x60px
Inclined yellow I that looks like half a smile.

All images are available at the forge.

Other icons

The world globe used to change languages is the work of Scarlab Icons and is licensed under the MIT.

All other icons are the work of Feather Icons and are licensed under the MIT.

Go to the index

People and ecolobits

Design and graphical elements are the work of Rita Barrachina, and the website is hosted by Maadix.

The source code was made by hand and is human readable.

Ecolobits

The Internet consumes energy and every Bit counts. We have made an effort to keep this website small and lightweight.

Go to the index

Digital tools

This web was built using the Debian operating system. The logo and other images were created with Inkscape. HTML and CSS files were compiled with Eleventy.

Go to the index

Go to the index