2020 in review: A year in web design

Profile picture of dana meir

12/14/2020

#hash2

Featured website by Locomotive

These websites are paving the way for our newfound online existence.

7 min read

Best web design of 2020: It's not violent by Locomotive

Stay informed on all things design.

Thanks for submitting!

Shaping Design is created on Editor X, the advanced web design platform for professionals. Create your next project on Editor X. 

Get our latest stories delivered straight to your inbox →

It’s an interesting time for web design. With many of our interactions and everyday activities moving online, web designers across the globe are faced with an exciting challenge. These circumstances have made way for new, thought-provoking online experiences.


To mark this profound shift to the online world, we’ve gathered some of the best web design the internet has to offer. While long hours spent in front of the screen may be an unwelcome change for many of us, it’s these innovative creations that encourage us to stay curious and discover what the future holds.



Best web design of 2020


2°C Earth by Jingqi Fan


After staying in Fiji earlier this year, Vancouver-based graphic and interaction designer Jingqi Fan recalls how Cyclone Sarai tore through its islands. The devastating experience was a wake-up call for climate change, leading her to create “2°C Earth.”


The website takes you on a trip across five different destinations, where you’re exposed to the very tangible threats of climate change and get a glimpse into what life might be like there in the future.


The engaging visuals, audio and interactions craft an easily digestible and immersive experience that further strengthens the message. Jinqi’s hope is that the platform will educate and inspire more people to join the collective fight for our future.


Having started out as an undergraduate degree project, 2°C Earth quickly gained much recognition and has won multiple awards since its launch.


“The project began as a rallying cry for our warming world, a hopefully timely response to a global reality unfolding before our eyes.”



Dear New York… by Pentagram


Noting the many changes that New York City is undergoing due to the pandemic, NY-based Pentagram partner Giorgia Lupi and her team decided to capture this profound moment in time through an online experience. “Dear New York…” invites New Yorkers to share their feelings around Covid-19’s affect on the city.


While locals long to return to the days of chance encounters, new discoveries at every corner and sense of home they feel when wandering through the streets of New York, the team felt this was also an opportunity to look ahead and envision a better future for the city. Two prompts on virtual sticky notes encourage visitors to reflect on what they miss about the city and what they hope it will become.


The website’s simple UI brings attention to the words themselves. Together, the messages paint a picture of nostalgia, bringing up both sadness and comfort, on a backdrop of beloved spots from around the city.


“This year marked the shock of losing what we are mostly here in New York for. But being so emotionally attached and linked to the city, we’ve also found energy in the awareness that it will come back. Creating a collective space for this reflection was a cathartic moment for our team.”

– Giorgia Lupi, Pentagram




It’s Not Violent by Locomotive for SOS Violence Conjugale


“It’s Not Violent” is an awareness campaign aiming to educate young audiences on recognizing signs of violence through text messaging. The website is a collaboration between multi-award-winning Montreal-based web agency Locomotive and SOS Violence Conjugale, an organization that helps victims of domestic violence.


Faced with a complex and sensitive topic, Locomotive decided to adopt a familiar and inviting visual language. The large elements and candy-colored palette add a sense of optimism, in contrast with the more somber background. They’ve also incorporated stickers and emoji-like illustrations, alluding to the subject of text messages while appealing to a younger audience.


Visitors are invited to engage in a game-like text conversation with a fictitious partner. By placing site visitors in a victim’s situation, the site conveys to them what this kind of experience could feel like, in a very realistic and powerful way.


“We’ve always felt the need to collaborate with non-profit organizations that believe that efficient communication and well-crafted digital products can have a positive effect on the outcome of a campaign and its reach, no matter the size or budget.”



At Home by Upperquad


Navigating their way through the pandemic, San Francisco and Berlin-based creative agency Upperquad decided to reach out to other creatives worldwide and invite them to share their personal experiences. They collected the stories of 58 makers in Berlin, San Francisco, New York and London, documenting both the individual and shared issues everyone was facing.


At first, the project took on the form of a simple guide that’s still available on the website. Its initial purpose was to inform people about how they can support their local makers and small businesses. As they progressed, the focus shifted into telling a larger story of the pandemic and its impact, through each personal tale.


The website takes on a sophisticated magazine-like feel, seamlessly merging text with images and videos. Visitors are invited to glide through the content as they would flip through the pages of a magazine, diving into the practice and challenges of creatives from across the globe.


“Our goal is to lift one another up and help people connect, empathize and support each other. It takes courage to speak about such personal experiences and we are grateful to each and every interviewee for sharing their story and contributing to this project.”

– Phil Ruppanner, Upperquad




Glossary of Undisciplined Design by Anja Kaiser and Rebecca Stephany


The “Glossary of Undisciplined Design” is a feminist perspective on the discipline of graphic design. It questions and unpacks the traditional Euro-centric, male-dominated historiography of design, instead suggesting fresh strategies and a contemporary, relevant approach to the discipline.


The project is by Berlin-based designer, researcher and educator Rebecca Stephany, and Leipzig-based designer Anja Kaiser. Bringing together design and activism, both have a long history of dealing with feminist theory in their work, in an attempt to dismantle discriminatory narratives in design. For this initiative, they collaborated to form a glossary of unconventional principles, as well as a three-day conference and a print version of the glossary.


The website itself reflects their nonconformist approach in its design. Deconstructing conventional web design principles, the menu is placed at the bottom of the screen and a daring neon yellow greets you as you enter the site.


"The form of the glossary serves as a supposedly didactic tool with intentional gaps and cracks and is set up for multiple definitions, additions and contradictions."



Gucci Off the Grid


As we spend more time indoors following lockdown guidelines, we’ve also seen the rise in short online games, often with no other functionality but to pass the time. This website design trend offers us a moment of mindless fun and a much-welcomed distraction from real life.


Big brands such as Gucci have also picked up on the thirst for online entertainment, creating a dedicated site for their new collection, “Gucci Off the Grid.” This gamified web experience informs visitors about the sustainable collection in the form of an interactive quiz. The questions bring attention to their environmentally friendly production process and use of sustainable materials in a playful way.


Complete with the sounds of birds tweeting and a satisfying “ding” when clicking on the right answer, the website uses good design and informative content to point visitors to the fashion house’s new collection.




WindowSwap by Sonali Ranjit and Vai Balasubramanian


In the depths of the Singapore lockdown in May, couple Sonali Ranjit and Vai Balasubramanian were scrolling through Instagram when they spotted a video of a friend’s view in Barcelona. Their friend was bored of seeing the same thing every day, but to the couple, the view looked incredible.


Shortly after, they came up with “WindowSwap,” a platform for sharing and experiencing different views from people’s home windows around the world. With everyone in the same boat, stuck at home and looking out the same windows each day, their idea was to offer viewers a momentary escape and to hopefully also instill some calmness into peoples’ lives.


The site began as a project among friends but quickly became viral. With over ten thousand submissions from users worldwide, you can now enjoy the sights and sounds of the Brooklyn Bridge, the Pyramids of Giza, the rolling hills of Austria, and many more corners from across the globe.


“WindowSwap is all about gaining a fresh perspective. It’s about living life in another country, in someone else's shoes, or just about seeing your own life with fresh eyes.”



Alone With Me by The Weeknd and Spotify


Following the tremendous success of The Weeknd’s critically acclaimed album After Hours, Spotify launched an online experience based on AI and each listener’s streaming data. “Alone With Me” invites fans to an intimate, one-on-one performance.


The show begins with a realistic version of The Weeknd greeting you by name and welcoming you to the show. If you’ve listened to their music before, The Weeknd avatar will mention highlights from your Spotify data, including your favorite song, when you first started listening and more.


Despite the performance being remote, this is an example of how data can be used to craft custom-made experiences that feel personal and special to the user. Psychedelic animations flow and transform in time with the music, adding to the captivating experience.




BRANDEMIC by White Brick Creative Studio


With more companies transitioning online, creative studio White Brick saw an opportunity to support local businesses recover and thrive through these challenging times. Based in the Philippines, they gathered local business and marketing experts, creatives and representatives from the government to share their knowledge in a free, two-day online event hosted by publication Black*Press.


The event’s website, built on Editor X, reflects brands’ fight to survive through the pandemic. Bold typography and uplifting words create a sense of empowerment. The copper motif used throughout the design is a subtle nod to research suggesting that coronavirus cannot survive on copper, adding a message of strength and resilience to businesses that are facing a new digital reality.


“The visual style was inspired by dystopian and post-apocalyptic concepts. And like its concept, Brandemic is the aftermath of an unfortunate event that brings everyone together to rebuild and start fresh.”



Check out more from our Design Today series.