Iron Website and Web Design · 2023
Talbica Interactive Periodic Table
- A' Design Award 2023 Iron Winner in Website and Web Design
- Awarded April 15, 2023
- CLIENT: Andrew Marcus
- Estimated Number of Design Views: 29,600
- Verification code 8A3F1257BD · Verify this award
About Talbica Interactive Periodic Table
Talbica is a reinvention of the Periodic table. More than 60 properties are provided for each element with rich infographics and neat typography. Users can see animated atomic models, molecular radius scheme, crystal structures and temperature ranges. Heat Maps is a tool for data visualization. Users can see distribution of properties along the table with colorful gradient maps. A hi-res photo is provided for 90 elements. Thousands of compounds are represented with 3D molecules. Talbica also features a photo-mode with beautiful space animation on background.
Press Kit
- Unique Properties
- Interactive chemistry website. Built around the Periodic table, which provides dozens of chemical properties for elements. Click on element opens its card with data, infographics, atomic model. Almost 90 hi-res photos purchased for elements, the biggest collection. Heat Maps visualize property data across the table with vivid gradient of colors. With Smart Field, users can search for compounds and solve reactions. Click through suggestions under the search field to explore 3D models and more.
- Dimensions & Packaging
- I am the designer and the developer myself. The project is built with simple tools like jQuery. I developed my own parsers on node.js to grab elements data from open source chemistry websites. This is a cross-platform software. I enwrap this website into WebView component for iOS and Android apps with some optimizations.
- Tags
- chemistry, interface, science, visualization, data, application, website, periodic table, molecular models
- Production Technology
- HTML/CSS/JavaScript (jQuery). Adaptive design and layout. For iOS app I use WKWebView, for Android it's own WebView component.
- Design Challenge
- The hardest part was to find and prepare the database of compounds and reactions. The first one I got from an open source PubChem. 3D models of compounds I got from there also. What about the reactions, there were no database at all! I was about to digitize the printed reference book manually, but luckily found a god-forgotten website with electronic database. Then I spent a month transferring and fixing all this data.
- Project Duration
- The 1st version started when I was in school, in 2002. The 2nd version was released in 2004. These were Windows applications. This 3rd version had been a dream long until 2019, when I released it as a website. The current version is 3.5, has so many improvements and features and was released in December 2022.
- Operation Flow
- This is a tool for school and university students who study chemistry. It also suitable for some laboratory workers, as it has a built-in database of chemical reactions and can be used as a reference. It exists in the form of website and mobile applications. Click on an element opens its information card. To search for reactions and compounds users must type chemical formulas with keyboard.
- Research
- I decided to try once again to reintroduce my project when I studied UX/UI Research and Design course in Michigan University. I made this project my graduation work. I started with UX Research and investigated rivals on market. Their weaknesses were in design and poor data structure. As a result, I graduated with A grade and the project in beta version. Then I showed it to my friend who is a chemist. He advised me to include a reactions reference into the project, and this has revolutionized the project. There's almost no services that provide this feature.
- Inspiration
- I invented it in school when my favorite subject was chemistry. Parents bought me my first computer and I started learning design and programming. I decided to combine computers and chemistry. Chemistry is a paradise for designers. Periodic table is a piece of data art. Element properties can be visualized across periods, molecules have 3D models, atoms are rotating, and hi-res photos of rare elements are amazing. This is version 3 of my project, released since 15 years after v2.
Colors of Talbica Interactive Periodic Table
Design Interview about Talbica Interactive Periodic Table
The periodic table is a paradise for data visualization. Every element has dozens of properties that can be represented in so many different forms.
I decided to create an interactive chemistry toolset built around the periodic table that would visualize the laws of chemistry in an attractive form. I wanted to introduce an educational tool that could immerse you into chemistry with its outstanding design.
The main principle is the extreme simplicity of the interface. You see the periodic table, plain and clean. If you click on an element, it opens an information card. You type a formula and see a reaction with it. What could be easier? The interface looks obvious and one may not see a designer's work at all. That's what I tried to achieve, actually.
I decided to create an interactive chemistry toolset built around the periodic table that would visualize the laws of chemistry in an attractive form. I wanted to introduce an educational tool that could immerse you into chemistry with its outstanding design.
The main principle is the extreme simplicity of the interface. You see the periodic table, plain and clean. If you click on an element, it opens an information card. You type a formula and see a reaction with it. What could be easier? The interface looks obvious and one may not see a designer's work at all. That's what I tried to achieve, actually.
I started with creating a fully adaptive periodic table. If you resize the window, the table will immediately adapt to the new width. In the mobile version, it switches to a special vertical version. This is my know-how. Originally, the periodic table is so wide you cannot fit it on a vertical screen. I changed its layout but preserved the periods' structure. If you rotate the phone horizontally, you'll see the original table.
Then I developed a navigation system with the keyboard. You can navigate through the table with arrows. That was easy. What was more complex is to develop the smart field, which you can see above the table. If you type a chemical formula there, Talbica will automatically capitalize it: naoh will become NaOH. Sounds easy, but what if I type kco3, should it be KCO3 (Potassium Carbon Oxygen) or KCo3 (Potassium Cobalt)? Talbica has an intelligent input that recognizes formulas.
Overall, the main focus was to create a chemistry toolset that doesn't make users think about those annoying things. Nobody wants to manually capitalize each element, and Talbica does this for you. If you use it as a chemist, you'll see that you don't think about how it works. It simply works.
Then I developed a navigation system with the keyboard. You can navigate through the table with arrows. That was easy. What was more complex is to develop the smart field, which you can see above the table. If you type a chemical formula there, Talbica will automatically capitalize it: naoh will become NaOH. Sounds easy, but what if I type kco3, should it be KCO3 (Potassium Carbon Oxygen) or KCo3 (Potassium Cobalt)? Talbica has an intelligent input that recognizes formulas.
Overall, the main focus was to create a chemistry toolset that doesn't make users think about those annoying things. Nobody wants to manually capitalize each element, and Talbica does this for you. If you use it as a chemist, you'll see that you don't think about how it works. It simply works.
I have plenty of plans. For example, I'm thinking about implementing an interactive nuclear synthesis. I'm also considering connecting a larger database of compounds and reactions, and proofreading it. I believe someday I'll release a paid professional version for students and laboratories.
The original concept was born 15 years ago with the first version of Talbica, when I was in school. I don't remember spending much time thinking about it. It seemed just obvious: you click an element, you see all its data. To my surprise, not every competitor has this obvious mechanic. For some reason, they try to open a sidebar or put all data on the element card.
Speaking about the current version, with its colors, adaptiveness, and seamless navigation, I think it took a month or two to conceive all these concepts and turn them into a working model.
Speaking about the current version, with its colors, adaptiveness, and seamless navigation, I think it took a month or two to conceive all these concepts and turn them into a working model.
The decision to resurrect Talbica was made when I studied UX Research and Design at the University of Michigan. I needed a project for my graduation work, and I chose my old school project for this role.
That version was different from the current one, released in 2022. It lacked the element properties infographic and formula suggestions. It also didn't have element photos and the Photo mode itself. I added all these features to make Talbica less dry and more fun to learn.
This is my own project, so I pursued my personal inspiration and wish to create the best chemistry toolkit.
That version was different from the current one, released in 2022. It lacked the element properties infographic and formula suggestions. It also didn't have element photos and the Photo mode itself. I added all these features to make Talbica less dry and more fun to learn.
This is my own project, so I pursued my personal inspiration and wish to create the best chemistry toolkit.
I'm the sole owner of the product. I don't think I'll ever sell it or even share it with anybody. I have another one for that purpose. However, I'm considering monetizing Talbica by adding a paid subscription for the pro version.
I invented Talbica 15 years ago when I was in school.
Back then, I loved chemistry, and I was really good at it. But I struggled in computer classes. To help me improve, my parents bought me my first computer. It wasn't very powerful, so I couldn't play many games on it. That's when I started learning programming.
Within a year, everything changed. I fell in love with computer classes, while I found organic chemistry more difficult to understand. I wanted to find a way to combine my knowledge of chemistry with my new programming skills.
I came across an encyclopedia of computer software that had a computer version of the Periodic Table. I thought it was a great idea, but the program had a bad design. I believed I could create something much better. So, after a year, I released the first version of Talbica.
Back then, I loved chemistry, and I was really good at it. But I struggled in computer classes. To help me improve, my parents bought me my first computer. It wasn't very powerful, so I couldn't play many games on it. That's when I started learning programming.
Within a year, everything changed. I fell in love with computer classes, while I found organic chemistry more difficult to understand. I wanted to find a way to combine my knowledge of chemistry with my new programming skills.
I came across an encyclopedia of computer software that had a computer version of the Periodic Table. I thought it was a great idea, but the program had a bad design. I believed I could create something much better. So, after a year, I released the first version of Talbica.
Yes, of course. There are many different Periodic tables out there. The concept of opening an element card with detailed information is my own original idea. I borrowed the concept of a smart field from Google, for sure. And the original layout of the table was created by Mr. Mendeleev.
I target school and university students with Talbica.
In schools, students require access to extensive information about elements for solving examples in both chemistry and physics. For instance, they often need data like melting point and resistivity for calculations. They also engage in reaction-solving activities.
For university students and laboratory workers, Talbica serves as a valuable reference book for reactions. They can enter a compound they need to synthesize and find out the required reactants.
In schools, students require access to extensive information about elements for solving examples in both chemistry and physics. For instance, they often need data like melting point and resistivity for calculations. They also engage in reaction-solving activities.
For university students and laboratory workers, Talbica serves as a valuable reference book for reactions. They can enter a compound they need to synthesize and find out the required reactants.
Adaptivity: Talbica works flawlessly on all widths, be it a large screen or a mobile phone. Visualization: nobody has Heat maps, infographics, and 3D models of compounds. Functionality: no other Periodic table can solve reactions.
It's a play on words. There was an old Soviet movie where a magician always messed up everything. For instance, he used to say "talbet" instead of "tablet". I laughed out loud at this and swapped two letters in the word "Tablica", which means table in Slavic languages.
Believe it or not, I didn't do any design at all. I work as both a designer and a developer, which gives me a significant advantage. I can skip the design phase and start programming the interface directly. However, for the competition, I had to submit some well-prepared screenshots. To accomplish this, I used Figma and recreated the interface based on the already functional product.
Outstanding infographics. I introduced a feature called "Heat maps," which I invented. By default, the elements of the table are colored based on their type, which is a standard but not very informative approach. However, I had the idea to paint them with a gradient of colors based on their physical properties. For example, you can overlay the table with element melting temperatures, resulting in an orange-blue gradient. This allows you to instantly visualize how the temperatures are distributed along the periodic table and its groups. You can apply this concept to other properties such as atomic radius, density, and more. These heat maps are visually stunning! I have never seen this feature anywhere before. Imagine how exciting it is to study chemistry with a tool like this.
The project is created solely by me. I requested my friends to evaluate and test the interface, and I also have a friend who is a professional chemist. He advised me to include a reactions database into the tool.
I attempted to create Talbica 3 several years ago. I saw it as a desktop software for Windows and even developed a demo version using .NET technology. However, I dismissed the project because it was too hard to implement all of my ideas. Software development was much more complex during that time.
It was only around 5 years ago that web browsers evolved to a level that allowed for the relatively easy creation of products with the level of interactivity I desired. The role of technology is crucial in this regard. It had previously hindered me from bringing this design to life for many years.
It was only around 5 years ago that web browsers evolved to a level that allowed for the relatively easy creation of products with the level of interactivity I desired. The role of technology is crucial in this regard. It had previously hindered me from bringing this design to life for many years.
Sure, I conducted UX research as well. It was a part of my graduation work too. I performed competitive analysis, used personas, collected a moodboard, and created a prototype. Then, my friend, who is a professional chemist, provided valuable insights. He highlighted the fact that chemists still rely on printed books to find reactions. He assured me that if I were to implement an electronic version of it, it would be successful. So, we can consider it a form of market research!
The first challenge was technical. I had to collect large amounts of data, parse it, check for mistakes, and prepare it for use. The second challenge is the amount of user scenarios I had to implement as a designer.
It was spontaneous. I had never thought about participating in a competition before. It requires a lot of time and energy. However, one day I said to myself, "Hey, this design is outstanding, the world must see it!"
I stopped being a perfectionist. I had too many ideas to incorporate into this project. Realizing all of them from the start was impossible, so I decided to focus on the major features. The remaining ones will be here soon, I hope!
Yes. I've been to 75 countries and always repeat to all designer: travel, and travel a lot. This helps to become a great designer much more than reading books. You need to see the world and understand how it works to grow up to mastery.
Grand Interview about Talbica Interactive Periodic Table
The project began as a very simple application for Windows 98/XP, and provided a bare minimum of elements properties, a solubility table and a simplest version of reactions balancer. Of course, it had no such great visualization tools as Heat Maps, and the balancer worked extremely slow. In fact, it worked in such a primitive way that couldn't even insert the found coefficients into the reaction and showed them as numbers in a separate field. The second version was better but conceptually stayed the same. Then I abandoned the project for some time because I didn't have enough experience to implement the vision that I had. Only in 2022 I managed to implement everything that I had in my mind. Well, not everything, actually. There's much more to come.
Ideas were coming to my mind during work. In fact, I skipped most of the design and immediately started to code. This is what happens when you can do both design and development: the visual part can be omitted and you can design directly by coding. In the end, it is this approach what led to many features such as Heat Maps and Atomic Models. I didn't think what I could design. Instead, I thought about what could I achieve by code.
I was a keen chemist in school, however I was mostly interested in the inorganic chemistry. When the organic chemistry began, I slightly lost my track in this science. However, by that time parents bought me a first computer, and I swiftly learnt how to code. Then I got this idea to combine my best knowledge in chemistry and programming and bring something interesting to this world. Today, I cannot consider myself a good chemist. However, I'm not a bad physicist, and I even have a certificate from Stanford University for the relativity theory course completion.
As I mentioned before, I skipped most of the design and started coding many features right away. When I was writing a function for displaying chemical properties, I saw an opportunity to use some of the numbers for generating element's colors. I already had a color palette of the elements, and I had displayed melting points, densities, etc. They were two nearest blocks of code, so I came up with an idea to tie them together. The funniest part is that designing such a mockup in Figma would have taken several days, while coding it took only a couple of hours.
The scientific community is great! It is open and collaborative. Researchers from all over the world share their knowledge and data. This resulted in such open projects as PubChem, a US's National chemistry research library. They provide information about thousands of substances. The only thing I needed to do is to filter out too rare and complex substances, and I did it by different tricks such as measuring the length, complexity index, and mass of the compounds.
This background animation of a space travel I imagined long time ago, somewhat in 2010's. I dreamed about making it alive. I get the first inspiration by looking at the space photos used for Mac OS wallpapers back then. One day I thought they were ideal for a Periodic Table. It is highly connected with the space. Initially, right after the Big Bang, our Universe consisted of only Hydrogen and Helium. Then due to the nuclear processes in stars, they evolved into other elements. In the end, we're all from the space, you know!
As I mentioned before, this symbiosis allowed me to design by coding. I saved a lot of time doing this, because such features as Heat Maps require a lot of time to build in Figma. Just imagine working on the color palettes, making components for 118 elements, manually checking melting points and picking up right colors for every element. This could have taken days! However, when you already have numeric data, it's as simple as write a single function to generate colors. It took me a couple of hours to come by.
I have a friend who is a professional chemist, and it was his idea to digitize chemical reactions. He told me that such software simply doesn't exist and he uses a dusty reference book from 1990's, the only source of such information. I didn't believe him, tried to google and, to my amazement, failed. Thus, my friend was the first customer and I interviewed him about the use cases. In the same fashion, I later interviewed other chemists and now I'm working on a new version of Talbica which considers all collected feedback.
I believe Talbica would become a great educational software. Today's chemistry classes in school lack visualization and feedback, and this is why it's so hard to study. Only a limited number of schools in big cities can allow having a chemical laboratory and demonstrate elements, compounds and reactions in vitro. I'm trying to eliminate this gap. Currently, I'm working on a new version that will lead the immersive experience to another dimension.
You probably remember how difficult chemistry was in school. In my class, only 3 people understood it. And this wasn't a fault of the teacher or students! Chemistry operate with abstract formulas, such as H2O and C2H5OH. Many people cannot comprehend things if they cannot see them alive, touch them, get a feedback and understand their purpose. This is the direction I'm working in: eliminating these gaps, trying to make chemistry something real, tangible, and attractive. I believe Talbica and its visualization tools can help students to feel this science, and therefore understand it better.