Smashing Magazine

A new foundation for the new Smashing Magazine

A new front-end foundation for the 10th anniversary celebration of Smashing Magazine.

Smashing magazine homepage on mobile

Vitaly Friedman, Smashing Magazine editor-in-chief, scheduled a Skype call with me in May 2016 to discuss the redesign of Smashing Magazine in preparation for its 10 year anniversary. He filled me in on the then current state of the project, and told me that the Smashing team had been working with Andrew Clarke for a few months on the redesign.

Using Andy’s designs as a starting point, the team moved on to a bolder creative design direction driven by the results Andy delivered, led by Superfriendly’s Dan Mall.

At that point, Vitaly told me that he was wanting to bring in a front-end developer whose work and code he can trust enough not to have to double-check the quality of that work afterwards. I was humbled to know I was the first person he thought of that met these qualifications.

Vitaly briefed me of the project, and let me know that Dan was getting started with the design in June. Thought I was still involved in the COBI development project at that time, Dan got me involved in the discussion about the redesign from the start. I was following the design discussion and providing feedback in the Trello boards the team set to discuss the project.

In August 2016, I signed the contract with the Smashing team and got officially started with the code. At that point, and after all the frequent discussions with Dan and the team, I had a very clear idea of the direction Dan wanted to set for the design. A couple of months after, I took on some of the UI design of the project with that direction in mind.

“[Sara] basically made it all happen. [..] She’s been incredible.”

— Vitaly Friedman, Editor in Chief, Smashing Magazine
Smashing Magazine homepage

Right from the beginning of the project, Dan talked to everyone on the team and gathered feedback from everyone about what Smashing Magazine is to them and what they expected of it. I believe the most relevant design contribution I made was emphasizing the importance of the community behind the magazine. I always felt that authors were underrepresented on most Web magazines, even though their contribution is the most important one as it is their content that fuels those magazines to begin with. If I were to make any design changes, I’d start with fixing that. So this was the first piece of design feedback I gave to Dan: Giving authors a more prominent place and space on the magazine. Smashing Magazine, being what it is: a magazine by the community, for the community, had better reflect that.

My feedback was incorporated into the main article pages as well as the article lists on the homepage.

Screenshot of the upper part of the Smashing Magazine article page.
each article listing emphasized the author who wrote it

Not only do the avatars have the same tilted square effect as the Smashing logo, but they also come with a very nice hover/focus animation effect as well:

The author avatar hover and focus animation effect

The tilted avatars were intially a part of Andy’s design mockups, and were ported into the new design because they beautifully conveyed the relationship between the magazine and the authors that contribute to its content and therefore its success.

After Dan’s direct contributions to the design came to an end, Marco Digonjic took over the design and designed the Membership Dashboard of the magazine. Marco also contributed throughout the entire project by providing feedback to the design after I took over later in October.

When Marco also became temporarily unavailable and had to focus on other commitments, I took over the design part completely. By the time I did, the Books, Events and Jobs sections of the magazine were left undesigned, so my job was extended to design those sections as well. Following the direction Dan set at the beginning of the project (and this is where the early discussions with Dan showed the most results), I designed those sections, using the same boldness and style Dan started.

Screenshot of the Smashing Magazine Books page
The new Smashing Magazine Books page.
Screenshot of the Smashing Magazine Books page
The new Smashing Magazine single bundle page.
The new Smashing job board.
The new Smashing job board.

I have to admit: the part I'm most proud of designing is the Smashing Conferences page—a.k.a the Events page. I was particularly looking forward to the redesign of this part of the Smashing “Universe” because I never found it the prettiest nor the most intuitive to use of all the Smashing magazine sections. It always took too many clicks to get to the information I needed to get a clear overview of the conference: speakers, talks, locations, and more. Moving from a multi-page structure to a one-page, simple, clear and straight-to-the-point structure was the most satisfying part.

Of course, the Events section also included pages for workshop and speaker details.

Screenshot of the Smashing Magazine Events page
Screenshot of the Smashing Magazine Events page
Screenshot of the Smashing Magazine Events page
Screenshot of the Smashing Magazine Events page

I worked directly with Smashing Magazine’s favourite Illustrator Ricardo who was brilliant at converting my vague ideas into beautiful illustrations. I'm not a cat person but it's very hard not to love the cute Smashing cat he created.

I asked Ricardo for a ticket illustration which I initially wanted to use as a background for the main call to action on the page—the Get Tickets button. However, since Vitaly preferred to keep the button’s style minimal, I ended up using the ticket to represent a... well.. ticket!

Possibly the most challenging of all design requirements was making the new Smashing navigation work for the different requirements we had.

The navigation was initially designed to be collapsible and hidden behind the Menu button. So, the header of the magazine initially only contained the logo on the left, a wide search input field in the middle, and the menu button on the left.

Inside the dropdown, you'd find the main menu items leading to the four main sections of the magazine: Articles, Events, Books, and the Job board. The navigation was also designed to include the different article categories as well as have the search input field animate down into the dropdown when the menu button is clicked.

Then, when you start typing into the search field, you'd get a short list of the most relevant search results, with an option to explore all the other related articles as well.

The tickets page
Screenshot of the initial Smashing Magazine navigation design
The initial navigation was hidden inside a dropdown menu on all screen sizes.
Screenshot of the Smashing Magazine navigation with the live search results activated
The live search results that were designed to be shown beneath the input field, inside the dropdown.

The navigation was brilliant. And I loved it on every possible level. But I was a bit in doubt about the fact that the navigation items were hidden on larger screens as well. I’ve always been a proponent of showing these items when there is enough screen estate to do it. Dan had some reasoning as to why he hid it, and there was long discussion about it. We initially left it as is. I built the navigation as per these mockups. It worked wonderfully and the live search that the back-end team used was so fast that you’d literally not get a chance to even see the fancy loading spinner that Dan had also introduced. There is a video showing how the navigation was meant to work.

However, the navigation had to be changed and tweaked a lot (emphasis on a lot) before we finally decided on a design that we could stick with.

Business as well as other user experience considerations had to be taken into account. The fact that the navigation was hidden behind a dropdown proved not to work with Smashing's business model and revenue sources. Markus, Smashing Magazine CEO, emphasized the need to show the navigation items on larger screens.

But if we were to keep the original design intact and show the items underneath the search field, the header would become too tall. And given that the article pages start with the author bio (which was an intentional design that was not going to change), the article page became problematic because the tall header pushed the article title further down, below “the fold”, which was also unacceptable.

We discussed the different possible solutions for over four weeks. I built different variations for each new desicion and, after testing, each one proved to be problematic in one way or the other, especially after adding a new items to the original four: the Membership link.

So at one point I thought: The only way to make it work for all the requirements was to not keep the initial structure intact. I thought we could shuffle the order, and instead of hiding the items in the dropdown, we could hide the search field in the dropdown.

So the navigation would work as follows: on large screens, the menu items would all be visible next to the logo on the left and the menu button, which was initially a menu button, would become more of a "search and explore" button. Instead of reading "Menu", it would read "[search icon] Topics". Once clicked, the dropdown would animate the search field as well as the topics/categories list. After all, the topics list is usually mainly used to explore or find specific articles, and so is the function of the search field, so it sounded like the perfect way to make this work.

Screenshot of the Smashing Magazine Navigation on desktop
The new Smashing Magazine search + navigation dropdown.

Of course, the menu items were hidden on small screens again, so in that case, the menu button woudl read “[search icon] Menu”. That is, it would make it clear than once clicked, you open the menu as well as the search component. And since both were combined into one dropdown on screens that are usually not tall enough to show everything at the same time, I removed the menu item descriptions altogether and turned the navigation into a simple list that didn't take up much vertical space.

Screenshot of the Smashing Magazine Navigation on mobile
The new Smashing Magazine search + navigation dropdown on smaller screen sizes.

This design was a winner. And I felt quite accomplished after having designed it because, believe me, the navigation took a lot more time to design than any other component in the magazine. After weeks of discussing and tweaking, we finally had a winner we stuck with.

Another design decision I made was to make the Smashing illustrations a main part of the design. Everybody is familiar with the Smashing Conf cat. And more importantly, everybody loves it. (Even those who are not fond of cats, like myself, find it hard not to like it. 😃)

Smashing Magazine has this playful side that needed to be more prominent and the best way to express it was using the Smashing cat more. We had a Smashing cat created for the newsletter component, for the printed and digital books, the Smashing cat greeting you when you first got in to your membership dashboard, and one to give you a high five after you checkout, as well as one in the 404 page.

Vitaly wanted to take the playfulness with the cat even further so he suggested adding some sort of a repsonsive game to the footer, where the illustrations change as the viewport size changes—starting with the bird happily singing in the cage, and ending with the Smashing cat eating it. Or, does it? 😉 You’ll have to find out for yourself!

The Smashing Magazine footer
The Smashing Magazine footer
The Smashing Magazine footer

Adding playfulness to the Smashing design using the Smashing cat was only part of the fun, though!

I wanted the entry point to the Smashing membership to also reflect the fun and quirkiness, so that the user gets that “feel” from the moment they decide to join the Smashing community. So I made the login, password recovery and sign up pages bolder by using the new signature Smashing tilt to the form which would otherwise be boring. Of course, the form will rotate back to a normal position on hover and/or as soon as the input fields are focused. So, whether you're using a pointer or keyboard to navigate to the form, you’ll not have to worry about tilting your head to fill it. 😃

The Smashing Magazine Log In page
The Smashing Magazine Account Creation page

Among the pages I also built were the membership and checkout pages, screenshots of which are shown below.

The Smashing Magazine Checkout
The Smashing Magazine Checkout
The Smashing Magazine Checkout
The Smashing Magazine Checkout

Some Technical Details

I set out to build the front end using no JavaScript frameworks, and I did. I had a fantastic local setup to work with.

Netlify is supplying Smashing Magazine’s entire backend (including CMS, and APIs for authentication, e-commerce, subscriptions and comments). Matt, from Netlify, had a great setup that he moved into a Github repo which I then cloned. All I had to do next was to npm install and npm start for the project to start running smoothly and most notably: blazingly fast.

Matt converted my static components into Preact components. We were both working in the same repository. Any drastic changes were made in separate branches which were only merged once everything was ready and approved to go. Matt’s setup also included Babel, which means that I got to take advantage of some of my favourite ES6 functions.(Array.from() is bae 😍).

Everything else was pretty straightforward. I created static pages but was working on the end product at the same time. Meaning that, the pages didn't need to be “delivered” to another developer who would then have to work with them from scratch. Matt and I were working simultaneously, and everyone on the team was involved with the entire process and progress all the time. Matt plugged the content from the magazine in at some point, all straight into my templates, and it was good to go. The process was incredibly smooth and it's probably the best I’ve worked with among all my projects so far.

I learned a lot in the process of building the magazine. I’ve been challenged to come up with techniques I’d never come up with before, as well as use and modify existing ones that I also thought I’d never have to use. Some techniques are definitely more hacky than anything.

I will be writing a series of short articles about some of the techniques I used instead of a long case study here, because otherwise it would literally be way too long for anyone to read. You'll be able to find the articles on the blog.

In the meantime, you can find some of these techniques in the form of slides linked below. These are the slides for my "A Smashing Case Study" talk that I gave at SmashingConf Freiburg and Barcelona. Both conferences took place while I was working on the project so the slides are in no means exhaustive, but they do cover quite a lot of stuff. Feel free to browse through them.Fair warning: the file size is huge. Feel free to download them slides and view them offline if that's easier for you.

This image takes you to the slides PDF file. The PDF is more than 200MB in size.

If you prefer listening instead of reading, you can watch me talk about some of the challenges and the solutions I used in my SmashingConf talk. I recommend watching the talk because it explains some of the more tricky techniques such as the layout technique we used to build the individual article pages. It was definitely an interesting project on many different levels.

Vitaly Friedman:

It’s very hard to find people doing great work and people you can trust — Sara is one of them. I chose to work with Sara because I knew that I wouldn’t need to double-check and control and revise and remind but instead can rely on the great work being done. I wasn’t disappointed.

Sara brought in not only her technical skills but also her sense of design into the Smashing Magazine’s redesign. Her input was invaluable, and always on spot. [...] she challenged my assessments and thoughts for the best of the project, improving the overall results in terms of usability, accessibility, maintenance and longevity of the project. I like that quality a lot.

Highy recommended.

Like what you read and think your next project could benefit from my skill set? Get in touch. Let’s build something great together! Hire me