Project

Web and graphic design for an online educational resource covering different aspects of radioactivity.

Client and Idea

Although known more for quite a poor reputation, radiation as a phenomenon is presented by not only tragic but also curious and inspiring stories, facts, and findings. The clients set an objective:

• to experiment with the interweaving and creative retelling of these complex narratives,
• to push the common perception of the radiation phenomenon,
• to diversify and broaden the knowledge about radiation.

They wanted the project to revitalize the collective understanding and embolden people to be responsible custodians of our radioactive world.

As for the client side, Illuminating Radioactivity is generously supported by the Stevens Institute of Technology. It was developed in partnership with the Bombshelltoe Arts and Policy Collective and the Stimson Center. In addition to the website, a part of the project is the book Atomic Sublime by Lovely Umayam and Tammy Nguyen.

Design

The main creative direction the Tubik team got to realize by design and content presentation was changing the perspective of a common vision of the radioactivity phenomenon. In particular, the website had to present a lot of various information from experts and scientists in a comprehensible, digestible, and engaging way for a wide and diverse audience. The content visual performance had to shift the understanding of radioactivity as something negative to a much broader outlook, including the positive side as well.

The first iteration of web design was corresponding to educational needs: airy and elegant, simple and intuitive, somehow looking like a beautiful textbook. And that was the moment when the client got totally sure they wanted something absolutely uncommon and even revolutionary. They strived for the design breaking standards and stereotypes as the project idea in its essence aimed at breaking standard thinking about radioactivity.

So, Tubik designers developed a totally new concept of visual style and interactions.

Interactive Home Page

One of the clients’ wishes was to make the home page interactive. There are many stereotypical associations about radiation, mostly negative. The clients’ idea was to add the interactive form on the home page and offer visitors to input the associations they had about radioactivity. Yet, designers got them quickly convinced that offering a newcomer not knowing much about the website to take some effort was not the best way to go. Instead, they came up with an idea of a super interactive page. It opens the field full of bright tags featuring popular characteristics of radioactivity and hiding the name of the project. Moving the mouse cursor, users remove the tags, as well as the website, is going to erase the common stereotypes about the theme of radioactivity.

Typography

As text content is the core of the informational value of the project and readers have to interact with it much, the choice of typography means was one of the most important stages of the design process. The main font used for the title elements is also symbolic. It is called Opposite, and it was chosen for its original, attractive, and irregular geometry of characters. Amazingly, even the font supported the objective of setting the opposite direction to the global understanding of radioactivity.

Images and Animation

To step aside from the traditional presentation of archive photos and graphics, massive work was done on images. The major type of visual content for the website is trendy and catchy collages with a vibe of brutalism and livened with smooth animation.

Keeping the balance of text blocks and images integrated into the narration, the designers performed such a serious theme and content in a way that wouldn’t let the users feel bored.

Each section of the website also has a theme collage and a specific color solution. Together with the long-scroll structure, all that creates the amazing experience of engaging storytelling.

Details

There are also other design details that are worth mentioning as they added their two precious cents to cool interactions:

• an interactive cursor with dynamic visual effects supports the theme
• the effect of visual noise is added to all the website pages to amplify the atmosphere
• some of the website parts also feature the sound imitating the Geiger counter
• the pages devoted to the findings of particular scientists break the long bulks of information into several bright cards, changing one another in the process of the scroll and making text consumption easier

Technically, the base platform to realize the project was Readymag. When the general stylistic concept of the visual performance was agreed upon, the designers moved right to Readymag and built all the user experience with it from the very start. This way, they could check directly and in no time how the interactions and animation work together with the diversity of text and backgrounds.

The mobile adaptation of the website was also designed to impress visitors independently of their device choice.

No doubt, that was a super informative experience for all sides. The design team had to dive deep into the theme and work in tight collaboration with experts to make the website not only attractive and unique but also readable and trustworthy. This impressive website was recognized as a Site of the Day on Awwwards.

Check the live Illuminating Radioactivity website to find not only useful information but also bright and original design solutions.

More Design Case Studies

Here’s a set of more case studies sharing the design solutions and approaches for some of the UX design projects by tubik.

BlockStock. Brand Identity and Website for Minecraft Models Resource

Roebuck. Mobile Design and Illustrations for Educational App

Lumen. Website for Museum of Mountain Photography

GNO Blankets. Branding and Web Design for Ecommerce

Designer AI. Dashboard and Graphics for Fashion Service

Pazi. UX and UI Design for Vehicle Safety Mobile App

CashMetrics. UX Design for Finance Management Service

Bitex. UX Design for Stock Analysis App

Tasty Burger. UI Design for Food Ordering App

Slumber. Mobile UI Design for Healthy Sleeping

Originally written for Tubik Blog, graphic and video content by tubik

Сообщение Case Study: Educational Website About Radioactivity Phenomenon появились сначала на Design4Users.

So, if you are the one to master 3D art in Blender software, this post will be obviously handy. Here you will find 20+ from Roman Klco’s numerous tutorials showing the process of 3D modeling. This set features 3D artworks inspired by famous movies and cartoons. Here you will find places, buildings, characters, vehicles, objects, and details that will instantly remind you of known stories. Enjoy!

Jurassic Park

The Sopranos

Iron Man’s Garage

Harry Potter’s Patronus

Hogwarts

Hogwarts Express

Simpson’s House

Bumblebee Beetle

Star Wars Stormtroopers

Star Wars Millenium Falcon

Star Wars AT-AT

Star Wars X-Wing

Knight Rider

Friend’s Central Perk

Witcher

Witcher Castle

Avengers HQ

Futurama Ship

Futurama

Rick and Morty’s Garage

Kill Bill Character

Thor Character

Check more projects by Roman Klco on Dribbble

For more inspiration, check the video tutorials on Procreate illustrations, examples of awesome 3D illustrations, black and white illustrations, 3D portraits of famous people, dog illustrations, love illustrations, and other posts from our D4U Gallery in which we gather impressive creatives to share their art with you.

Сообщение 3D Art: Blender Tutorials by Roman Klco Inspired by Movies появились сначала на Design4Users.

Project

Design and animation for an educational website devoted to life and movies of the famous film director Stanley Kubrick.

Idea

The initial idea was to create something extraordinary in terms of design and at the same time insightful in terms of content. It could be a website about a famous photographer, artist or anyone else connected with art.  Stanley Kubrick and his great works eventually matched all our criteria to create an interesting piece of work that would be not only good to look at but also interesting to read. There was no commercial or business goal behind the project: only creativity and the wish to share something cool and useful with the others.

It was Stanley Kubrick’s 90th anniversary when we started to work on Kubrick Life in 2018. It was a great honor for us to be the ones who eternalize his art on a well-designed website. Considering that Stanley Kubrick is one of the most influential filmmakers in history, we thought that there are a lot of admirers who would be thrilled to learn more facts about him and his art. On the other hand, some people might get more interested in Stanley Kubrick once they check kubrick.life.

UX Design Process

The idea was to create a complete and consistent story. Keeping in mind that Kubrick was a great filmmaker, the designers wanted the whole website to feel like a movie, allegorically.

The website features:

• the milestones of Kubrick’s life and career
• chronological filmography
• interesting numbers and facts about the filming process, cast and directors’ nature
• numerous archive photos and film episodes
• gamification elements

The narration was performed in chronological order and featured his films and some interesting facts to make the story of his life more enticing. From one movie story to the other, the readers get familiarized with Kubrick’s traits and techniques as a film director.

Stylistically, the designers added background noise, picked a quite old-school color palette and also worked thoroughly on typography to create this old movie-like feeling.

One of the things to mention is the scroll animations experienced by the readers along all the way. As the website performs as a huge long read, we needed to find a creative way to separate the films so we’ve come up with some unique animations for each film title. Another user-experience aspect is hidden stones like “Escape it” labyrinth that makes the interaction with a website more engaging and fun.

Among the hardest points for designers, there was that all the Kubrick’s films are of different genres and styles, they reveal different times as well. The most challenging aspect was to find a unified style to make all these films look consistent but still unique. They spent almost 3 months choosing the appropriate concept.

To reach “the movie effect” we used the infinite scroll as the main navigation element that takes us through the story of Kubrick’s life and filmography slide by slide. In the end, we found out that our long read is more than 300K pixels long! There is also handy side navigation for a more convenient experience. And some 3D graphics were specially created and integrated into the interface to make some episodes even more atmospheric.

The advantage of the creative team was the absence of time constraints because the project was in-studio and non-commercial. The only issue was to find the needed time and establish the point when the website could be considered done. Anyway, now when the website is live we are still working on polishing it.

The whole website has been built entirely on a Readymag platform with some custom HTML/JS/CSS code injections.

Also, one of our graphic designers Arthur Avakyan, being inspired by the website, created the stylized digital portrait of legendary Stanley Kubrick.

As soon as Kubrick Life was released, the creative team got the recognition from the community: it got the Site of the Day Award on The FWA as well as the Site of the Day and Developer Award on Awwwards. Later, it was also awarded by Webby and Red Dot.

So, welcome to check all the details of Kubrick Life by yourself.

Design Case Studies

If you are interested to see more practical case studies with creative flows for mobile and web design, here is the set of them.

Nature Encyclopedia App. UI Design for Education

Florence App. Illustrations for Healthcare Service

Inspora. Brand and UI Design for Virtual Stylist

Bitex. UX Design for Stock Analysis App

Slumber. Mobile UI Design for Healthy Sleeping

Real Racing. UX and UI Design for Mobile Game

Tasty Burger. UI Design for Food Ordering App

Watering Tracker. UI Design for Home Needs

Originally published in Tubik Blog

Сообщение Design Case Study: Educational Biography Website появились сначала на Design4Users.

Among popular tasks for interface designers, the projects aimed at education include:

• interactive web and mobile encyclopedias
• flashcard apps
• language lessons apps
• apps and websites with a database of formulas
• interactive simulators
• landing pages, apps, and web platforms for educational events and courses, etc.

Check the variety of UI design examples in different styles, all devoted to education needs.

Nature Encyclopedia App by Tubik

Language learning app by 10Clouds

Airy language learning app dashboard by 10Clouds

Minimalist UI concept for a flashcard app by Cuberto

Cheerful learning platform with funny graphics to choose courses and lessons by Black Lead

Web page promoting guitar lessons and featuring bright and catchy hero illustration by Alexandra Glustsenko

Elegant interactive encyclopedia website devoted to Solar system by Tubik

The UI design concept for an educational mobile app by Ramotion

Sports Car Encyclopedia app by Cuberto

Minimalist museum app with the dark background by Tubik

Educational UI concept with bright theme illustrations on Solar system by Kit8

School application screens by Midinventory

Home page for a website of an educational TV channel by Kreativa

Landing page for a Japanese course by Cuberto

Violin lessons app design by Tiffany Stewart

Interactions with education platform designed by 10Clouds

Survey and Quizzes screens for a corporate education app by Selecto

Web platform uniting scientists from different countries by Tubik

Interactions for an educational app by Dimest

Courses and topics screens for a mobile interface of an educational app by Selecto

The UI design concept for a plant encyclopedia app by RonDesignLab

Onboarding screens for an educational mobile app by Johny Vino

For more design inspiration, welcome to review the set of ecommerce app designs, creative logos based on negative space, and impressive packaging design examples.

Сообщение 20+ UI Design Concepts for Education on Web and Mobile появились сначала на Design4Users.