The E Club has evolved since its creation in 2009, but its design stayed more-or-less the same: a large banner (sometimes animated) at the top of the page, the menu and content below that, and the footer. That layout worked for the older versions of The E Club - the content didn't take up the whole width of the page since the site was only optimized for bigger screens, and there was lots of space to display images in the background and at the top of the page.
When The E Club 3.0 went live, The E Club was rebuilt from the ground up to be faster, simpler, more secure, and most notably, more responsive. The design of The E Club 2.0 was mostly intact, but it clashed with The E Club's new responsiveness in that the top bar banner wasn't well-optimized for larger displays (there was a bunch of whitespace around it), and there was a disconnect between the desktop and smartphone versions (the top bar banner wasn't shown on the smartphone version, and the content used the full width of smaller screens but not bigger ones). So over the last month, I've been working to create a brand-new experience that merges the best of mobile and desktop, utilizes the latest web technologies, and even adds some content-level improvements and refinements.
This is The E Club's biggest redesign in its eight-year history.
A rethought design
The E Club's new aesthetic is best represented by its redesigned homepage. The first thing you'll notice is the complete lack of clutter and complexity; only the welcome message that's been there since The E Club's creation, along with the Mario and Star Trek GIFs, is initially visible. No large top bar banner pushing some of it below the fold, and everything else - the menu, the search bar, even additional content - has been reorganized and puts the content first. And did I mention that The E Club has an all-new typeface?
That's right - after years of working to make Open Sans and Roboto the official fonts of The E Club Family, it's time for a change. The E Club's redesign incorporates a font called Lato, a unique contemporary of Open Sans and Roboto. With the new font also comes greater incorporation of its various font weights: bold for headings, regular for subheadings and body text, and light for contrast across the design. With one font instead of two, The E Club can become more expressive, more focused, and more intuitive than ever before.
Going back to the homepage, where did the rest of the content go? The intuitive next step after noticing the absence of content other than the welcome message is to scroll down, as you would on every previous version of The E Club. And that still works! The homepage utilizes a parallax effect to display the content in a whole new way, in the form of "cards", that scroll "over" the welcome message as if you weren't scrolling down the page at all. The oft-cluttered homepage of old has been dramatically simplified (and it looks cool), and yet the content is still essentially the same as before! This new design is also being utilized on the What's New page as well as on the E's Blog post permalinks (like this one's).
A lot around the content has changed, too. As The E Club Family's desktop and mobile versions have begun to merge into one, unified experience (The E Club+ being the prime example until now), the best of The E Club on mobile devices has come to the desktop as well: the content now takes up the full width of the page, the bulky top bar banner has been replaced with the mobile-style header bar, and the (redesigned) menu and search bar have been tucked away into the menu icon at the top left corner. But since there's much more usable space on larger screens, NavLogo has been moved from a link in the footer to a prominent spot on the right side of the header, so you can navigate The E Club Family in one click.
Dark Mode
The E Club+'s Dark Mode launched about a year ago, and ever since then a darker color scheme was being planned for The E Club - and now it's live. The E Club's new Dark Mode, inspired by that of The E Club+, makes it easier for people to view the content at night or in dark environments, and its almost all-black background makes it look stunning on many modern devices. It also introduces a new version of The E Club's logo designed for dark environments.
But The E Club's Dark Mode goes one step further than The E Club+'s - while on The E Club+ the page would reload when going into Dark Mode (and back), The E Club's doesn't, so you can switch between the two instantaneously. Just click on the moon icon in the header bar and try it for yourself.
A redefined experience
The E Club's redesign doesn't only go skin-deep; many of its pages and content are being rethought for an even better experience. The most prominent of these (so far) is the Videos page. When The E Club 3.0 went live last year, it became the archive for The E Club's monthly Mario music. Now, having been renamed Music, the page has been redesigned to better serve that purpose. The music (in the form of a video) now takes up the entire width of the screen, creating a sort of cover art display, and the list of months is now more compact and is at the bottom of the screen. It's a fully immersive design visually and auditorily.
The Photo Album hasn't seen much progress since The E Club 3.0 went live; it was a few thumbnails of photos from the original The E Club that couldn't be enlarged, a far cry from the original The E Club's Photo Album with full-size images and dedicated pages for each of them. Today, that all changes - the photos are larger now, and when you click on one, it shows up in its own overlay with a caption, sharing tools (each one technically has its own URL now), a fullscreen mode, and the ability to move/swipe between photos. Only four photos are online at the moment, but there are many more to come.
The E Club has always been rapidly changing, and that will continue for the foreseeable future. But today, The E Club takes another massive step closer towards a unified experience on all screens; modern first-party technologies (like how the Mario theme that plays when you click on the logo in the header bar now picks up where it left off when you go to another page); a professional and intuitive design; and all-new content. The reimagining of The E Club is just beginning.