The Gin Admin Theme: Facelift your Drupal administrative experience

Sascha Eggenberger
Nov 12 · 4 min read

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

Image for post
Image for post
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.

Image for post
Image for post
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.

Image for post
Image for post
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.

Unic

We are convinced that digital services are only useful when…

Sascha Eggenberger

Written by

Sascha Eggenberger. Senior User Experience Designer @unic @Drupal Contributor. Drupal Design System, Claro, Gin. #OpenSource https://sascha.is/

Unic

Unic

We are convinced that digital services are only useful when technology and user needs are truly aligned. Our solutions take users by their hands, understand their needs and guide them on their journey. In this publication our experts share their thougts, beliefs and experiences.

Sascha Eggenberger

Written by

Sascha Eggenberger. Senior User Experience Designer @unic @Drupal Contributor. Drupal Design System, Claro, Gin. #OpenSource https://sascha.is/

Unic

Unic

We are convinced that digital services are only useful when technology and user needs are truly aligned. Our solutions take users by their hands, understand their needs and guide them on their journey. In this publication our experts share their thougts, beliefs and experiences.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store