SecuTix online sales has a whole new look! Fresher, simpler and more contemporary, the new graphic grahpics theme is right on trend. We present Equilibrium, a completely seamlessfully harmonised, balanced theme that will revolutionise change the online visitor experience for the better.
A contemporary, balanced theme
Equilibrium is much more than a graphics layer. This new graphic theme is intended to enhance the user experience. We've completely redesigned the relative l'écran a été entièrement repensé pour créer une hiérarchie plus claire, ce qui donne une impression d'équilibre. L'adoption d'un langage visuel plus harmonieux permet de véhiculer toutes ces informations et réduit significativement la complexité des pages. L'espacement inter-éléments a été augmenté afin de mieux souligner le rythme du contenu des pages et de laisser respirer vos contenus. La lecture de l'information s'en trouve facilitée. Cette réflexion a également été l'occasion de rendre le visuel plus sobre, notamment grâce au recours à des zones de blancs. Ces choix permettent de mieux repérer les contenus imbriqués.
Equilibrium se veut donc plus moderne. Il s'inspire de la tendance du flat design et notamment de Material Design, l'ensemble de règles de design proposées par Google. Pour accompagner cette évolution, Equilibrium a été bâti sur la police de caractère Open Sans créée par Steve Matteson et mise à disposition gratuitement par Google Fonts. Optimisée pour le web et les interfaces mobiles, cette interface propose une excellente lisibilité des lettres et se décline en cinq épaisseurs.
Afin de remédier à une largeur de base du thème actuel qui devenait insuffisante, la colonne centrale de contenu passe de 700px à 970px. La mise en page globale utilise désormais 1220px sur les grands écrans.
Au final, c'est un ticketshop plus moderne qui s'offre à vos internautes.
La personnalisation graphique évolue
Tout comme avec le thème classique SecuTix, Equilibrium peut être adapté graphiquement afin de refléter votre charte graphique au plus près .
Durant toute la période de validité de PizBernina V1, vous aurez le choix entre l'utilisation du thème classique et Equilibrium. La sélection s'opère sur la page "Thème internet" du point de vente concerné, où deux radio-buttons permettent la bascule. Pour des raisons de rétro-compatibilité, les champs personnalisables affichés (tels que couleur, image de fond, arrondi des bords, etc.) n'ont pas changé dans l'écran de paramétrage; en revanche, ils ne produisent plus exactement les mêmes résultats. Ainsi, avant de basculer vers Equilibrium, nous vous recommandons de procéder à un reset (lien disponible en haut à droite de la page).
| Info |
|---|
Veuillez noter que le thème classique ne sera disponible que pour une période limitée. Nous vous encourageons donc à procéder à la migration sur le nouveau thème durant PizBernina V1. |
Recommandations d'usage
Voici une liste de recommandations d'usage pour profiter au maximum de l'élégance d'Equilibrium tout en véhiculant votre identité visuelle.
Police de caractère
Avec l'élargissement de la colonne centrale, la mise en page gagne en flexibilité: vous pouvez désormais changer la police pour toutes les textes et pas uniquement les titres.
Unité des couleurs de fond
Un des éléments forts de ce nouveau thème est l'unité dans le choix des couleurs. De ce fait, nous vous encourageons à utiliser la même couleur de fond pour la zone principale et pour le fond des titres. Si vous modifiez la couleur de fond principale mais laissez le fond de titres vides, celui-ci s'adaptera automatiquement au fond principal.
Il est important de comprendre qu'il existe trois couleurs de fond pour les contenus, en anglais, "Body background color", "Background color" et "Embedded area background color". Ces trois variables permettent de définir:
- la couleur de fond principale du contenu
- la couleur utilisée pour les alternances (par exemple: le fond alterne entre deux catégories de places, parfois appelé effet pyjama)
- la couleur de contenus imbriqués.
Pour un résultat optimal, nous pensons qu'il est préférable de choisir trois couleurs différentiées mais qui évoluent dans la même direction: par exemple, les couleurs de base d'Equilibrium sont un blanc pur, un gris très léger et un gris un peu plus appuyé. À noter: la couleur imbriquée sert également de couleur pour les bords dans le thème. Il est préférable qu'elle se distingue un peu de la couleur principale du fond.
Images de fond
Il est toujours possible de choisir la même image de fond pour toute la page. Toutefois, si celle-ci est trop contrastée, ou si vous ajoutez des effets de transparence sur les couleurs de fond internes, vous risquez de réduire la lisibilité des contenus.
L'image de fond sur la zone centrale n'est plus disponible.
Boutons et liens
Equilibrium apporte davantage de granularité aux boutons d'appel à action (Call to action).
Les actions principales sont toujours représentées par des boutons de couleur distinctive. En revanche, les actions secondaires se déclinent désormais en trois niveaux.
- Les plus importantes sont de couleur distinctive et s'accompagnent d'une icône.
- Les actions simples n'ont pas d'icône associée
- Les actions qui ne sont pas souhaitables (par exemple, une annulation) ne sont pas en couleur et apparaissent dans la couleur du texte standard.
Signalons également que la possibilité d'arrondi s'applique désormais à d'autres domaines que les boutons.
Couleur du texte par défaut
La variable de couleur du texte par défaut s'applique à de très nombreux éléments, mais parfois avec de petits effets d'allègement (légère opacité). Ne vous étonnez donc pas si certains éléments apparaissent un peu plus clairs ou plus foncés: c'est un effet de nuance recherché dans Equilibrium.
Mapping des couleurs
L'image suivante décrit précisément les variables qui influencent les aspects visuels dans Equilibrium. Retrouvez ces variables en consultant le document: equilibrium-coloron-screen information for more impact and a clearer hierarchy to achieve a balanced look. The new, harmonised imagery conveys all the information while significantly reducing page complexity. We've increased the spacing between elements to place more emphasis on the pace of the page content and on giving your content room to breathe. The result: improved readability. This line of thinking was also an opportunity to create more minimalist visuals, especially by utilising white space, making embedded content easier to see.
So Equilibriumis more contemporary. It takes its inspiration from flat design and particularly Material Design, the set of design rules expounded by Google. In line with this, Equilibriumis built on Steve Matteson'sOpen Sans typeface which is available free from Google Fonts. Optimised for web and mobile, this interface provides excellent readability and comes with five layers.
To solve the problem of the base width of the current theme, which was becoming increasingly insufficient, we've increased the centre content column from 700px to 970px. The overall page layout is now 1,220px on large screens.
The end result is a more contemporary ticket shop for your online visitors.
Graphic customisation is changing
Just like the Classic SecuTix theme, Equilibrium can be graphically adapted to reflect your corporate identity as closely as possible.
For as long as PizBernina V1 runs, you'll be able to choose between the classic theme and Equilibrium. To make your selection, go to the "Internet theme" page for the point of sale concerned, where you'll find two radio buttons that allow you to switch. To maintain backwards compatibility, the customisable fields shown (such as colour, background image, rounded borders, etc.) are still the same in the settings window. However, they now produce slightly different results, so before switching to Equilibrium, we recommend that you do a reset (link at top right of page).
| Info |
|---|
Please note that the Classic theme will only be available for a limited time, so we'd encourage you to migrate to the new theme during PizBernina V1. |
Usage recommendations
Here's a list of usage recommendations to help you make the most of Equilibrium's elegance while also conveying your visual identity.
Typeface
Layout is now more flexible thanks to the larger centre column: you can now change the font of any text – not just headings.
Unified background colours
One of the best features of the new theme is the unified colour selection. So we'd encourage you to use the same background colour for the main area and the heading background. If you change the main background colour but leave the heading backgrounds blank, they will automatically adapt to the main background.
It's important to note that there are three content background colours: "Body background colour", "Background colour" and "Embedded area background colour". These three variables allow you to define:
- the main background colour for the content
- the colour used for alternation (e.g. where the background alternates between two seat categories, which is sometimes called the pyjama effect)
- the colour of embedded content.
For best results we think it's preferable to choose three different colours that progress in one direction: for example, the Equilibrium base colours are pure white, very light grey and a slightly more solid grey. Note that the embedded content colour can also be used for borders. Ideally this should contrast slightly with the main background colour.
Background images
You can still choose the same background image for the whole page. However, if you use an image with too high a contrast or add transparency effects to the internal background colours, you may find that the content is harder to read.
The background image for the centre area is no longer available.
Buttons and links
Equilibrium also has more granularity in terms of call to action buttons.
Key actions are still represented by buttons in distinctive colours. Secondary actions, on the other hand, are now available with three levels.
- The most important are in a distinctive colour and are accompanied by an icon.
- Simple actions have no icon.
- Actions that you would rather customers avoided (such as cancellation) are not in colour and appear in the default text colour.
We'd also like to highlight that rounding is now applicable to other features as well as buttons.
Default text colour
The default text colour variable applies to lots of elements, but sometimes with a moderate lightening effect (slightly opaque). So don't be surprised if certain elements appear a little lighter or darker – it's a deliberate nuance that we've built into Equilibrium.
Colour mapping
The image below shows a detailed view of the variables that influence Equilibrium's visual impact. You can consult these in: equilibrium-colour-mapping.pdf.
