{"id":6600,"date":"2019-02-27T13:02:35","date_gmt":"2019-02-27T13:02:35","guid":{"rendered":"https:\/\/tubikstudio.com\/?p=6600"},"modified":"2025-10-24T11:28:26","modified_gmt":"2025-10-24T11:28:26","slug":"case-study-nature-encyclopedia-ui-design-for-education","status":"publish","type":"post","link":"https:\/\/tubikstudio.com\/blog\/case-study-nature-encyclopedia-ui-design-for-education\/","title":{"rendered":"Case Study: Nature Encyclopedia. UI Design for Education"},"content":{"rendered":"

The time has passed when people received knowledge only from print books. Due to technological progress now, useful information can be obtained from various sources, including websites<\/a> and mobile applications<\/a>. Today we’d like to show you such an app: the case study is devoted to user\u00a0interface design for the Nature Encyclopedia App developed by Anastasia Zhyltsova, UI\/UX designer for Tubik.<\/p>\n

\"UI<\/p>\n

Project<\/h2>\n

The task was to design a mobile user interface of an encyclopedia app that presents interactive infographics for a variety of animals with the opportunity to donate to charity organizations.<\/p>\n

Undoubtedly, the main task of educational applications is a convenient and understandable transfer of information. One of the best ways to convey data quickly is to use infographics. We also took on the goal to not only educate but also interest and engage the users. Practice shows that the thoughtful use of illustration, bright colors and clear interactions cope effectively with this task. Combining all these elements, we got a simple, convenient and user-friendly application.<\/p>\n

Style<\/h2>\n

Despite the fact that most educational applications are made in a light theme<\/a>, Nature Encyclopedia App has a dark theme<\/a>. The dark background intensifies striking visuals, has better contrast and supports\u00a0visual hierarchy<\/a>.<\/p>\n

The illustrations are made in a flat style<\/a> with the use of bright colors and their shades. Every animal has its own color theme. This approach allows users to visually divide content and contributes to a better perception\u00a0of information and makes it more memorable. Also, using a dark theme with contrasting colors in the case of an educational platform gives an association with a game-like\u00a0style that may attract a younger generation.<\/p>\n

\"Nature<\/p>\n

The section devoted to elephants<\/em><\/p>\n

By the way, the elephants also inspired the idea of an app icon<\/a> designed for the encyclopedia.<\/p>\n

\"Nature<\/p>\n

Screens<\/h2>\n

Explore Animals<\/h3>\n

The app presents users with a variety of animals. By selecting one of the animals, the user can see well-known facts as well as non-obvious and surprising data. Intuitive navigation<\/a> on animal facts is represented by buttonless interactions. This approach saves precious space on the screen for more information. As we mentioned in the article about hot UI design trends<\/a>, it is even believed to be the initial step to the virtual interfaces based on gestures only. Also, the clear visual hierarchy makes the UI easy-to-use for a learner of any age.\u00a0Here are the screens of some infographics of the animals.<\/p>\n

\"Nature<\/p>\n

Screens for the section about pandas<\/em><\/p>\n

\"Nature<\/p>\n

Screens for the section about tigers<\/em><\/p>\n

Donate<\/h3>\n

In addition to the educational part of the application, it contains charity aims. The user can go from any screen to the Donate tab simply by swiping up. The screen contains cards that display various programs, reservations, and sanctuaries that help animals suffering from natural disasters.<\/p>\n

The screens with organization cards preserve color marking of the section and look as follows. The contrast is a navigational solution here: using the light background for this type of screens lets users quickly distinguish them from educational screens all based on the dark color palette.<\/p>\n

\"Nature<\/p>\n

Live Streams<\/h3>\n

Nothing lets you touch the world of nature (of course, if you do not have an opportunity to move to Africa, for instance) better than the animal live streams. Adding educational live streams enabled the creative team to diversify graphic content and integrate it into the exploration process even more positively and deeply.<\/p>\n

\"nature<\/p>\n

Animation<\/h2>\n

As it’s easy to see from the previous screens that the information flow is solidly based on informative visuals and super minimalist navigation. To make the layout and graphics even more engaging and catchy, the team worked on animation that enhances the interaction process. The example below shows how it looks for the encyclopedia section sharing facts about elephants.<\/p>\n

\"nature<\/p>\n

Creating innovative products for educational goals, we strive to find solutions that would balance informativeness and attractive looks, traditions and trends<\/a>, logic and emotional appeal<\/a>. Whatever is the source of getting knowledge, its first goal is to present data in a clear and digestible way. Yet, making it beautiful and interactive, we engage different generations of users to learn more and do it with fun and pleasure.<\/p>\n

Useful Case Studies<\/h2>\n

If you\u00a0are interested to see more practical case studies with creative flows for mobile UI design, here is the set of them from Tubik.<\/p>\n

Inspora. Brand and UI Design for Virtual Stylist<\/a><\/p>\n

Bitex. UX Design for Stock Analysis App<\/a><\/p>\n

Slumber. Mobile UI Design for Healthy Sleeping<\/a><\/p>\n

Letter Bounce. UI Design for Mobile Game<\/a><\/p>\n

Real Racing. UX and UI Design for Mobile Game<\/a><\/p>\n

Manuva. UI\/UX Design for Gym Fitness App<\/a><\/p>\n

Cuteen. UI\/UX Design for Mobile Photo Editor<\/a><\/p>\n

Tasty Burger. UI Design for Food Ordering App<\/a><\/p>\n

Watering Tracker. UI Design for Home Needs<\/a><\/p>\n

Upper App. UI Design for To-Do List<\/a><\/p>\n

Toonie Alarm. Mobile App UI Design<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

The case study unveils the UI design process for the educational mobile app devoted to nature exploration: check elegant interface, lovely illustrations, buttonless interactions, and catchy animation.<\/p>\n","protected":false},"author":3,"featured_media":12599,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[4,9],"tags":[248,256,319,324,328,331,16,332,20,336,57,447,100,468,138,479,147,482,177,487,178,493,180,504,212],"coauthors":[],"class_list":["post-6600","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-case_study","category-ui_ux","tag-illustration","tag-interaction-design","tag-mobile-app","tag-mobile-design-inspiration","tag-mobile-navigation-design","tag-mobile-ui","tag-animation","tag-mobile-user-interface","tag-app-design","tag-motion-design","tag-case-study","tag-tubik-studio","tag-design","tag-ui-design-process","tag-design-process","tag-usability","tag-design-studio","tag-user-experience","tag-education","tag-user-experience-design-process","tag-educational-app","tag-user-interface-design-process","tag-encyclopedia-app","tag-ux-design-article","tag-graphic-design"],"acf":[],"yoast_head":"\nCase Study: Nature Encyclopedia. UI Design for Education<\/title>\n<meta name=\"description\" content=\"The case study unveils the UI design process for the educational mobile app devoted to nature exploration: check elegant interface, lovely illustrations, buttonless interactions, and catchy animation.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/tubikstudio.com\/blog\/case-study-nature-encyclopedia-ui-design-for-education\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Case Study: Nature Encyclopedia. UI Design for Education\" \/>\n<meta property=\"og:description\" content=\"The case study unveils the UI design process for the educational mobile app devoted to nature exploration: check elegant interface, lovely illustrations, buttonless interactions, and catchy animation.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tubikstudio.com\/blog\/case-study-nature-encyclopedia-ui-design-for-education\/\" \/>\n<meta property=\"og:site_name\" content=\"Tubik Blog: Articles About Design\" \/>\n<meta property=\"article:published_time\" content=\"2019-02-27T13:02:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-24T11:28:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2019\/02\/Nature-encyclopedia-app-design-tubik.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"1200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Marina Yalanska\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marina Yalanska\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-nature-encyclopedia-ui-design-for-education\/\",\"url\":\"https:\/\/tubikstudio.com\/blog\/case-study-nature-encyclopedia-ui-design-for-education\/\",\"name\":\"Case Study: Nature Encyclopedia. UI Design for Education\",\"isPartOf\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-nature-encyclopedia-ui-design-for-education\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-nature-encyclopedia-ui-design-for-education\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2019\/02\/Nature-encyclopedia-app-design-tubik.jpg\",\"datePublished\":\"2019-02-27T13:02:35+00:00\",\"dateModified\":\"2025-10-24T11:28:26+00:00\",\"author\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\"},\"description\":\"The case study unveils the UI design process for the educational mobile app devoted to nature exploration: check elegant interface, lovely illustrations, buttonless interactions, and catchy animation.\",\"breadcrumb\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-nature-encyclopedia-ui-design-for-education\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tubikstudio.com\/blog\/case-study-nature-encyclopedia-ui-design-for-education\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-nature-encyclopedia-ui-design-for-education\/#primaryimage\",\"url\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2019\/02\/Nature-encyclopedia-app-design-tubik.jpg\",\"contentUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2019\/02\/Nature-encyclopedia-app-design-tubik.jpg\",\"width\":1600,\"height\":1200,\"caption\":\"Nature encyclopedia app design tubik\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-nature-encyclopedia-ui-design-for-education\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/tubikstudio.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Case Study: Nature Encyclopedia. UI Design for Education\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\",\"url\":\"https:\/\/tubikstudio.com\/blog\/\",\"name\":\"Tubik Blog: Articles About Design\",\"description\":\"Tubik Studio\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/tubikstudio.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\",\"name\":\"Marina Yalanska\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/image\/2ddde1c118fcf989ce8e73997a3909dd\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g\",\"caption\":\"Marina Yalanska\"},\"url\":\"https:\/\/tubikstudio.com\/blog\/author\/marina-yalanska\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Case Study: Nature Encyclopedia. UI Design for Education","description":"The case study unveils the UI design process for the educational mobile app devoted to nature exploration: check elegant interface, lovely illustrations, buttonless interactions, and catchy animation.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/tubikstudio.com\/blog\/case-study-nature-encyclopedia-ui-design-for-education\/","og_locale":"en_US","og_type":"article","og_title":"Case Study: Nature Encyclopedia. UI Design for Education","og_description":"The case study unveils the UI design process for the educational mobile app devoted to nature exploration: check elegant interface, lovely illustrations, buttonless interactions, and catchy animation.","og_url":"https:\/\/tubikstudio.com\/blog\/case-study-nature-encyclopedia-ui-design-for-education\/","og_site_name":"Tubik Blog: Articles About Design","article_published_time":"2019-02-27T13:02:35+00:00","article_modified_time":"2025-10-24T11:28:26+00:00","og_image":[{"width":1600,"height":1200,"url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2019\/02\/Nature-encyclopedia-app-design-tubik.jpg","type":"image\/jpeg"}],"author":"Marina Yalanska","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Marina Yalanska","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/tubikstudio.com\/blog\/case-study-nature-encyclopedia-ui-design-for-education\/","url":"https:\/\/tubikstudio.com\/blog\/case-study-nature-encyclopedia-ui-design-for-education\/","name":"Case Study: Nature Encyclopedia. UI Design for Education","isPartOf":{"@id":"https:\/\/tubikstudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/tubikstudio.com\/blog\/case-study-nature-encyclopedia-ui-design-for-education\/#primaryimage"},"image":{"@id":"https:\/\/tubikstudio.com\/blog\/case-study-nature-encyclopedia-ui-design-for-education\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2019\/02\/Nature-encyclopedia-app-design-tubik.jpg","datePublished":"2019-02-27T13:02:35+00:00","dateModified":"2025-10-24T11:28:26+00:00","author":{"@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f"},"description":"The case study unveils the UI design process for the educational mobile app devoted to nature exploration: check elegant interface, lovely illustrations, buttonless interactions, and catchy animation.","breadcrumb":{"@id":"https:\/\/tubikstudio.com\/blog\/case-study-nature-encyclopedia-ui-design-for-education\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tubikstudio.com\/blog\/case-study-nature-encyclopedia-ui-design-for-education\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/case-study-nature-encyclopedia-ui-design-for-education\/#primaryimage","url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2019\/02\/Nature-encyclopedia-app-design-tubik.jpg","contentUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2019\/02\/Nature-encyclopedia-app-design-tubik.jpg","width":1600,"height":1200,"caption":"Nature encyclopedia app design tubik"},{"@type":"BreadcrumbList","@id":"https:\/\/tubikstudio.com\/blog\/case-study-nature-encyclopedia-ui-design-for-education\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/tubikstudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Case Study: Nature Encyclopedia. UI Design for Education"}]},{"@type":"WebSite","@id":"https:\/\/tubikstudio.com\/blog\/#website","url":"https:\/\/tubikstudio.com\/blog\/","name":"Tubik Blog: Articles About Design","description":"Tubik Studio","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/tubikstudio.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f","name":"Marina Yalanska","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/image\/2ddde1c118fcf989ce8e73997a3909dd","url":"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g","caption":"Marina Yalanska"},"url":"https:\/\/tubikstudio.com\/blog\/author\/marina-yalanska\/"}]}},"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/6600","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/comments?post=6600"}],"version-history":[{"count":4,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/6600\/revisions"}],"predecessor-version":[{"id":14414,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/6600\/revisions\/14414"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media\/12599"}],"wp:attachment":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media?parent=6600"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/categories?post=6600"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/tags?post=6600"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/coauthors?post=6600"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}