Smart Interface Design Patterns
Smashing Magazine is the leading resource for people who want to learn about the latest web technologies.
Under this brand, founder Vitaly Friedman has built a strong, vibrant community with a wide variety of meeting points, from in-person conferences and online workshops, to books and inspiring articles.
In February 2022, he finally launched a course to teach the best UI practice on the web, using examples that have been carefully hand-selected over 15 years.
Competencies
Art Direction
UI/UX Design
Design System
Illustrations
The Project. The Story.
The Protagonists
Vitaly and I had previously collaborated on a fantastic adventure; the design of Smashing Book 6.
In the light of this beautiful collaboration, he asked me to join the launch of a prized project he had been working on for long time: the Smart Interface Design Patterns courses.
His busy schedule, and later the pandemic, delayed the publishing of this personal project.
Now, however, he felt the time had finally come, and that I was the person who could help make it happen!
The Plot
For the landing page design, Vitaly requested that the interface should feel like a part of the Smashing Magazine brand.
This meant that part of the UI (fonts, buttons and forms) already used on the leading platform would be seamlessly integrated into the course website.
After reviewing the material he shared with me, I couldn't help but notice that all of the videos had been recorded in a beautiful kitchen, and that each course opened with a handwritten title on a blackboard.
I liked this setting, and felt that I could smartly develop a beautiful story using the kitchen as a metaphor.
I kept the dark colour of the blackboard, on which the entire story takes place. Then I imagined each video as a ‘recipe’, packed with useful advice and examples (aka, ingredients!) knowledgeably presented by the master ‘web-chef’, Vitaly Friedman.
In light of this analogy, all of the landing page illustrations followed the same storyline.
The page opens with a huge plateful of delicious UI ‘ingredients’ available from the course: cookies, navigation, accordions, filters, etc...
Each piece of content is then presented with a carousel of ‘recipe’ books to choose from the shelf.
An engaging animation allows the user a ‘sneak peek’ of the content, while the button invites them to review the whole collection. The illustrations in each chapter are by Guillaume Kurkdijan.
The course content is presented in a ‘bowl’ full of delicious ingredients: fish cakes, ravioli, beetroot slices, fresh herbs and salad.
Throughout the site, the illustrations refer to the world of gastronomy, while for a more consistent experience, the copy reflects the food theme.
The Results
The captivating design was elevated to an entire new level when Cassie Evans added her animation to my illustrations, and Trys Mudford developed the landing page to pixel perfection.
When the site was ‘cooked’ to succulent precision, Vitaly launched the course in February 2022.
