Talbica: Interactive Chemistry
Talbica is an educational startup that makes chemistry interactive.
The project exists in the form of a website and a mobile application for iOS and Android. It is based on the Periodic table, so a desktop site on a large screen looks 10 times cooler than an adapted version of the table on a mobile phone.
The Periodic table is a real paradise for chemists, designers, and analysts. Each element has dozens of properties that can be presented in an amazingly beautiful and interesting form.
Clicking on an element opens its information card. The table knows about 60 properties for each element. Properties are divided into categories: physical, chemical, atomic, and so on. Especially interesting properties are presented in the form of infographics, diagrams and schemes.
For example, an element has three radii: atomic, covalent, and Van der Waals radius. How do they differ? Instead of a dry explanation, the table shows the radii in the diagram.
Another example is the melting and boiling points. To demonstrate how refractory an element is, Talbica shows its data in the range from absolute zero to the surface temperature of the Sun. By the way, temperatures can be translated on the fly between Celsius, Kelvin and Fahrenheit.
A crystal structure and spectrum lines are prepared for each element.
An amazing feature of Talbica is Heat maps.
Looking at dry numbers is boring and inconvenient. Let's say you want to see how the melting point of the elements changes along periods and groups. How to do it? Just select the desired heat map, and the Periodic table will be colored from blue to orange.
The higher the melting point of an element, the redder it is. If the element melts at a temperature below standard, it is shown in color from light blue to dark blue.
With the help of a heat map, you can see that all low-melting elements are grouped in the right corner, and the most refractory ones are grouped in the center of the table. Only mercury is released. Isn't it interesting to learn why?
Studying the laws of chemistry is 100 times more interesting when you can see them!
Talbica contains 6 heat maps: melting and boiling points, atomic radius, density, atomic mass, electronegativity, abundance in the Earth and in the Universe, and half-life period.
Each card has its own bright colors. The table looks incredibly beautiful in different modes and makes you click on different elements to study them better.
The night has come and the eyes get tired of the white background, but you still want to play with the table? Talbica supports a dark theme. On a black background, multicolored heat maps look fantastic.
At this point, someone will want to hang a big poster on the wall. Easy. Talbica has a built-in .png file generator for printing, which will output the table exactly in the form in which the user configured it.
A photo mode has been added to the new version of Talbica. When it is turned on, instead of colors, each element displays its mini-photo, and the background appears as an animation of a flight through space. What for? First of all, it's beautiful. Secondly, it all started with the Big Bang, and the synthesis of chemical elements too.
And since we are talking about the photo mode, high-resolution photos were purchased for 90 elements of the Periodic table. The remaining elements are simply impossible to photograph, because they are radioactive and decay within a fraction of a second.
Photos of elements are an invaluable gift to schoolchildren and not only. Now it's not just a boring table with numbers, but a real sticky: the elements can be viewed for hours! Crystalline silicon and fractal bismuth, liquid nitrogen and oxygen, radioactive uranium and luminous helium — you can now not only read about these elements, but also see them.
That's not all either. A chemical calculator is built into Talbica.
Just type a part of a reaction and press Enter. The program will instantly add the right part and equalize the reaction! Talbica has a database of 4,500 reactions. Many of them with conditions.
Moreover, Talbica displays data for each substance in the reaction, including three-dimensional molecules.
There are a total of 6,000 compounds in the database. Among them are not only elementary, such as sulfuric acid, but also complex organic substances, such as melatonin or gasoline. Three-dimensional molecules can be rotated, zoomed in and viewed for hours.
Skybonds is a financial analytics and portfolio management platform used internally by Sovcombank Corporation, one of the largest banks in Western Europe. The interface is built around a Scatter Plot, a special type of 2-axes diagram, that represents the entire market of bonds. Horizontal axis marks duration, while vertical axis indicated bond yield. Bonds are placed on the diagram with different colors, depending of their rating.
The interface has two modes, one of those turns on a larger Time Series chart under the Scatter Plot. It demonstrates how the bond price or yield has been changing during time.
Right side of the window is dedicated for the bond widget. Here, all information about the selected bond is presented.
All information is split into tabs by type.
Financial analysts sometimes need a larger vision than the small widget can provide. For that reason, every bond has a personal page. The same information on this page is presented in a much more informative way. The page is split into two parts. The left side contains all static information, such as prospectus and payment schedule, while the right side is allocated for the dynamic one, such as Time Series, current market data, order book, etc.
The information is grouped by thematic tabs that are compact and easy to use.
Work on Skybonds started with the very basic elements. A new design language of data tables was proposed for the project. For instance, dozens of variants of table column design had been rejected until the best one was found.
All variants were thoroughly compared in the aspects of readability and explicity.
Finally, Skybonds received a unique design for data tables. Its design language easily digests incredibly complex and advanced data, and produces outstanding, readable, attractive, clean tables.
Skybonds's data tables can contain mini-widgets, such as charts, diagrams, indicators, etc.
Another example of the fundamental review is the design of Time Series graphs. We started with the analysis of axes and came up with the idea of a “two-levels axis” which can indicate two levels of time frames at the same time.
This type of axis is used in Bloomberg Terminal, the most powerful financial database in the world.
Lines were redesigned, too. After a scrutinized analysis they received colors, forms and thickness that suit best for the analysts's tasks.
On the basis of axis and lines, a unique design was proposed for the Skybonds's charts.
Charts in Skybonds look fantastic, but what's more important that they work like a charm.
After such complex UX design, creating a design system felt like a breeze. Skybonds has received a full set of buttons, inputs, checkboxes, radios, and so on.
The following picture shows what the market filters had looked like before, and how they looked after the systemic redesign.
Calendar was another item that underwent redesign and received a new form, adapted for the accounting need.
Payment Schedule received a graphic representation instead of a dry table.
Bond filtration procedures is shown on a diagram.
Finally, a set of colorful mini-charts for the widget. Color indicates bond rating, while the dots on the chart represent trading recommendations from the bank's analysts.
Kappa: Stocks Screener
Kappa is a mobile application for building a portfolio of stocks which is based on a multi-factor model of fundamental indicators. With Kappa, an investor can find undervalued stocks that have the potential to outperform the average market growth.
Factor investing is a method to choose stocks by multiple fundamentals associated with higher returns.
Kappa uses multi-factor model based on 15 fundamentals of valuation, profitability and financial strength to find the most profitable, financially strong and yeat undervalued stocks. The statistics shows that systematically buying such stocks and rebalance your portfolio every year (as S&P 500 does) brings much higher returns.
Kappa is based on 50+ years of backtested market statistics. It uses multi-factor strategies to find the best stocks on market and rate them with one of 5 ratings:
According to the available statistics collected over 50 years on the US stock market, regularly buying companies with “Strong Buy“ rating, it is possible to achieve an average annual return of up to 22%.
The company's page has rich, elaborate financial infographics and clearly answers the investor's question: is it worth investing? Indicators are summed up and divided into three groups. Each group then gets its own indicator that is built by the same principle. Then the algorithms is applied again for all three groups together. Thus, the final rating of the company is calculated, which can be from “Strong Avoid“ to “Strong Buy”.
All results of the calculations are summarized in a large table with numerical ratios and indicators, designed according to all the rules of data table design.
In the mobile app, the table scrolls not only vertically, but also horizontally. Names of columns and rows are being fixed during scrolling.
The most complex table is used on “What to Buy“ screen. All companies are displayed here in descending order of investment attractiveness. Companies can be filtered by inclusion in a popular index (S&P500, Russell 2000, etc), sector, capitalization and trade exchange.
The strategy embedded in the application is used by large investors. For the first time this complex strategy is presented in the form of a simple application, that is easy to use even to a beginner investor.
To explain this investment strategy, Kappa has a detailed built-in help screen. It describes how to choose and buy stocks, rebalance portfolio, and why the strategy is able to outperform the market.
Kappa as well has built-in contextual tooltips. Every ratio on the company page is provided with help on its calculation.
Kappa supports a dark theme that is automatically turned on if enabled in system settings. Indicators, counters, tables and scales look cool and professional on black background. Using Kappa is an aesthetic pleasure.
Chiko&Roko Art Club
Chiko&Roko Art Club is a private club for NFT owners from a group of digital artists named Chiko&Roko.
Chiko&Roko platform features works by well-known artists who work in a specific genre of digital art. The nicknames Vollut, Kiwie and Fuckyou.Digital are hardly known to the masses, but they say a lot in the NFT scene.
The price of masterpieces can reach 10 ethereums, that is, up to tens of thousands dollars, depending on the exchange rate of this cryptocurrency.
A multimedia website in the format of a one-page landing page has been developed for Chiko&Roko. 3D models, animations and videos have been prepared for the site. In order for the site to work without delays, a preloader is used that downloads all the contents of the site in advance.
An animation starts after loading. Six most popular figures sold on the Chiko&Roko platform fall from the sky one by one onto the stage. The seventh, main figure is made in 3D and rotates from left to right until it meets the mouse cursor.
A spectacular opening of the site makes a wow effect and attracts visitors to, at least, scroll the page to the end.
Headings are done with Montserrat, a modern geometric sans-serif designed in Argentina.
Headings are colored in a yellow-pink gradient and typed in ExtraBlack. The same technique is used for subheadings and descriptors.
Apple uses a similar typographic technique on its site, and long, colored, bold descriptors define the style of the site no less than three-dimensional shapes do.
The gradient looks twice as good on a dark background.
The Chiko&Roko website was conceived as a super-multimedia landing page in the best traditions of contests like Awwwards. This work is extremely rich in graphics, effects and animation.
Such sites almost always use the special slow scrolling effect provided by the Locomotive Scroll plugin. Such a technique is impossible to imagine on a regular site, but in the case of a promotional site for digital art pieces, nothing else can be imagined.
As you scroll through the site, animations are activated. The “Who we are” screen, for example, shows two fibures with TV noise animation that takes place against a background of iridescent gradient. This is a powerful visual technique: black and white figures and a colorful animated background provide a trendy, unusual contrast.
The “Artists” section scrolls horizontally as the user continues to scroll down the page. This section contains seven cards, one for each artist.
Clicking on the card opens information about the artist. It opens with a cartoon-style animation: a colored dot appears under the mouse cursor and effectively expands to a full-screen circle, inside which starts playing a video with a three-dimensional rotation of one of the artist's works.
User can move between artists using the Next button, and each time it is clicked, the same animation starts. Each video has its own character and color. The slideshow is incredibly colorful and spectacular: just what you need for a modern promo site.
Even the application form is stylized after a figure. When scrolling, it unfolds with a three-dimensional effect towards the user, and the input fields are stylized as part of the figure.
The body text is typed with Graphik, a trendy neo-grotesque font that's even included in macOS. Of course, not a single block of text on such a site can do without a spectacular background, as it's done in the FAQ section.
This modest portfolio page cannot reflect the effectiveness of the site, otherwise we would have to move all the animations here. Therefore, I invite you to see it with your own eyes.
Cubic.ai, formerly known as Cubic Robotics, is a mobile application for Smart Home voice control. Cubic allows to control lamps, thermostats, smoke detectors and other smart devices. Unlike competitors, Cubic manages the devices of competing brands, and also has a user-friendly interface.
Every device has its own icon, which can change its status. For example, Nest thermostats can heat or cool air in the room, so the thermostat is indicated with orange when heating and blue when cooling.
Thermostats of other brands can detect over-dried or supercooled air, and they need their own icons as well.
Some devices can possibly have full range of statuses. For example, smoke and CO detectors have 3 levels of warning for every kind of threat.
Cubic’s application supports dozens of different devices. Every device has many various conditions. And for every of these devices a pack of icons is designed specially for Cubic.
All assistants use a sound waves effect.
It's not just about beauty. The point is feedback, which must be in the interface. If there is no feedback, then the person thinks that the interface is frozen.
Even for a prototype of a voice assistant, animation is a must. We proposed such an animation for the Cubic. The animation of the Google Assistant came up as a basis. The application was released only for the Android platform, so such an animation would look organic, and it could be done quickly.
The same waves but of white color were used in the icon of the cube. It was the simplest solution. The animation didn't respond to voice changes, but the fact that it was animated was enough to give feedback.
Then the developer intervened and said that although it was difficult to track voice changes, he could easily distinguish silence. The idea came up to add a second feedback when the person has already pressed the button, but has not yet begun to speak:
Is there still a third state? It turned out that there is. When the command is given, the application needs up to 10 seconds to contact the server and recognize it. Therefore, one more indication is needed to show the user that his command has been accepted and is being processed:
Devices are combined into rooms and placed on the main screen of the application:
Cubic is a free app, but with paid options. For $10 a month, the user gets a dashboard: a system of notifications and tips. The dashboard will send notifications to your phone if something is wrong with the house, as well as give advice on what to do during a threat. For example, if there is a carbon monoxide leak, you need to open the windows.
Access to the dashboard is given from the main screen of the application. The Dashboard button is displayed on the menu bar.
In case of a threat, the dashboard call button should be highlighted.
The indication in the dashboard itself explains the statuses of all devices. In future versions, Cubic will support a surveillance camera, which will also be available in the dashboard.
The marketplace built into the application is one of the most popular monetization methods:
The concept of the voice assistant built into the system:
Sculptor Foundation unites more than 50 best masters of sculptor from Moscow and St. Petersburg, known painters, architects, designers and artists of decorative art.
A classic-style yet modern website created for Sculptor. The main feature of the site is an elegant typography and layout. Elements are arranged with some asymmetry on pages, like in the best vintage books, dedicated to art and typography.
For example, the introduction text on the main page is justified to right edge. With the head, it creates an original text composition.
The most notable work done by Sculptor is sculptures reconstruction of Cathedral of Christ the Saviour in Moscow.
A special page of the website is dedicated for this work.
A reverse composition is used on the page. First block of text justified to right, then second block of text goes center, and the third one aligned to left. Every of these blocks are separated by photographs.
As the result the text is enhanced much for reading. Human eye developed a „blind spot“ for long texts, and the reverse composition allows to catch focus for reading.
On the main page, heavy elements are balanced on a thin axis, which, it seems, should outweigh one another and overwhelm the entire composition on its side.
Here is a representation of the structure on graphical primitives:
When the layout techniques are developed and the style of the site is determined, the remaining pages are a matter of technology. The page about the fund is essentially a simplified version of the main page.
News page. Blocks aligned to the right, but to compensate the white space on the left, a full-size Apollo statue is used on the page.
An original menu. Every chapter has its own length, so the entire composition forms an amphora or a baluster.
A frameset of Apollo's head which is made in 3D and rotates when page scrolls.