The Gin Admin Theme: Facelift your Drupal administrative experience

Sascha Eggenberger
Unic
Published in
4 min readNov 12, 2020

The default Drupal administration interface looks dated in terms of modern design standards. It’s time to change that.

The Gin Admin Theme

Gin is based on Claro and delivers an all-new admin experience for Drupal 8 & 9. Gin brings a refreshed, more modern and fully customisable experience onto the table.

A radical new design

“Is this really Drupal?” is one of the most often heard reactions I usually get when I present the Gin Admin Theme to people. A radical redesign which will delight content editors, site builders and site admins. The editorial experience is at its core of Gin’s adjustments.

New Content overview

A more focused editing experience

The design for the content is oriented at classic powerful editing tools which users know best like MS Word or Google Docs. The most important functions like the published state, Preview & Save are always on hand as they’re sticky at the top of the node edit form.

The new node edit form
New node edit form with the Layout Paragraphs module

New navigation concept

With the introduction of a new default vertical navigation we wanted to ensure users get faster access. If your editors are already used to the horizontal toolbar in Drupal we got you covered, too.

Gin’s new navigation concept

Always on hand call-to-actions

A small but rather powerful change is the introduction of a sticky content navigation bar which helps with orientation by always showing where you are and providing you a contextual CTA.

Sticky content navigation helps orientation and provides CTAs which are always visible

Layers

With the introduction of “layers” the design can distinguish elements better visually. This allows surfaces to move in front which helps the eye to better focus on the important information.

Example: The configuration overview
Example: The media library

A lot of customisation options

Choose from a variety of customisation options. All with the goal to personalise the experience for your (clients) brand.

Toolbar

You can choose between the new default sidebar approach, a more minimal “modern” toolbar or the “legacy” one.

Sidebar, Vertical Toolbar (Default)
Horizontal, Modern Toolbar
Legacy, Classic Drupal Toolbar

Better blend in with your (clients) corporate identity

As Gin Version 1.x began as an customisation layer for Claro, Gin has all kind of customisation options to ensure a better integration with your company’s CI/CD. Choose from a preset of accent colors or use your own. You’ll also be able to use your own company logo to make it an even more personalised experience.

The Gin Theme Settings

Darkmode

Finally there is also a Darkmode available for Drupal. If you prefer to live on the dark side of the moon like I do, this might suit you quite well. It’s currently in an Experimental state but it already supports a wide range of modules.

Gin’s Darkmode

Note: With the upcoming Gin Permissions module it will be possible to allow different users to override Gin theme settings like accent color, toolbar style and others.

Create a seamless experience

With the optionally available Gin Login module you can make it a seamless experience for your editors/administrators from the login screen to the finish touches of the interface.

Gin Login – supports a lot of customisation options from Gin including accent color, etc.

Learn more about Gin

If you want to learn more about Gin, there is a series of talks and information available online.

You’ll find the slides of my latest talk about Gin at DrupalGov 2020 below (video follows once available):

There is also a recent podcast from Lullabot available as well:

Sascha is a Zurich-based Designer working at Unic. He is one of the Lead Designers of the Drupal Design System & Claro and the creator of the Gin Admin Theme.

--

--

Sascha Eggenberger
Unic
Writer for

Sascha Eggenberger. Staff Product Designer @GitLab. Drupal Core Maintainer. Drupal Design System, Claro, Gin. #OpenSource https://sascha.is/