{"id":15363,"date":"2024-02-01T11:13:35","date_gmt":"2024-02-01T11:13:35","guid":{"rendered":"https:\/\/blog.tubikstudio.com\/?p=15363"},"modified":"2026-01-14T15:23:45","modified_gmt":"2026-01-14T15:23:45","slug":"ui-design-process-video","status":"publish","type":"post","link":"https:\/\/tubikstudio.com\/blog\/ui-design-process-video\/","title":{"rendered":"UI Design Process for Web and Mobile: 3 Detailed Video Cases"},"content":{"rendered":"<p>For those who like watching more than reading, we have started one more format unveiling our work processes and creative outcomes. So, here we invite you to review 3 extended video case studies in which we unveil the UI design and development process, share the approaches to creating graphics and interactions, and give hints on working with tools. And a bonus video will share some handy insights we&#8217;ve got from working with our clients. Enjoy watching!<\/p>\n<h2>Catchy Website Design and Development for Niche Food Brand<\/h2>\n<p>This video case shares the story and backstage of the design and development process for <a href=\"https:\/\/www.b-egg.farm\/\" rel=\"nofollow\">B-EGG<\/a>, the website that won Site of the Day on Awwwards. In this project, we worked on the full-scale design concept and implementation for a producer of niche egg products for convenient and healthy cooking. The challenge was to make it emotional and catchy so that the narrow-focused brand could stand out from the crowd in the extremely competitive food product market sector. What&#8217;s more, in this video, you\u2019ll find some hints and tricks of the design and Webflow development process.<\/p>\n<p><iframe loading=\"lazy\" title=\"How we created website for food brand\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/jNxk01BjGtk?start=15&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<h2>Website Design and Development for Prosthetics Producer Company<\/h2>\n<p>This video unveils the stages of creating a user experience design for a promo website of <a href=\"https:\/\/www.hp23.science\/\" rel=\"nofollow\">HP23<\/a>, the health tech product in the bionic prosthesis field. Besides the product and its features, the website had to bring attention to the topic, tell more about this domain&#8217;s issues, and increase the interest of investors, scientists, testers, and enthusiasts.<\/p>\n<p>Welcome to check the details on how we employed complex 3D modeling and animation, made a website, and implemented it on <a href=\"https:\/\/blog.tubikstudio.com\/tag\/webflow\/\">Webflow<\/a>. Tips and tricks are included.<\/p>\n<p><iframe loading=\"lazy\" title=\"How we created website for prosthetics producer\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/uyrBivSHZic?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<h2>Christmas Advent Calendar Interface and 3D Graphics for Postal Company<\/h2>\n<p>This video lets viewers catch some Christmas vibes with the story about the <a href=\"https:\/\/blog.tubikstudio.com\/interactive-christmas-advent-calendar-ui-design\/\">festive advent calendar we made for Nova Post<\/a>, a big postal and courier company that provides logistics and related services. We have been collaborating with the company on various UI\/UX and digital marketing design tasks, and advent calendar design is one of them.<\/p>\n<p>See the story of two different versions of the calendar interface and interaction design we did for two Christmas seasons, and enjoy a big gallery of 3D art created for this project. Backstage of the creative process and practical hints are included. Cheers!<\/p>\n<p><iframe loading=\"lazy\" title=\"How we created interactive advent calendar UI design and 3D art\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/eYn70LKtEz4?start=38&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<h2>Bonus: 7 Insights From Our Digital Agency Practice. Clients&#8217; Feedback Included<\/h2>\n<p>Starting a new creative year, we always look back and analyze the important lessons we learned from working with our clients. This year, we\u2019ve thought they could also be handy for businesses hiring digital agencies like ours or our design mates worldwide. So, in this video, let us share some insights with you and show you some recent projects. What\u2019s more, some clients agreed to join us here and kindly shared their feedback and emotions in this episode. Welcome to watch!<\/p>\n<p><iframe loading=\"lazy\" title=\"7 Insights From Our Digital Agency Practice. Clients&#039; Feedback Included\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/DMi49Z69xgY?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p>New extended video cases are coming soon; stay tuned! And subscribe to our <a href=\"https:\/\/www.youtube.com\/@TubikStudio\">YouTube channel<\/a> if you are interested in seeing new videos right there as soon as they are on air.<\/p>\n<h2>More Design Case Studies<\/h2>\n<p>Here\u2019s a set of more case studies sharing the design solutions and approaches for some of the design projects done by the Tubik team.<\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-website-design-3d-animation-for-prostheses-producer\/\">HP23. Website and 3D Animation for Prostheses Producer<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-web-design-healthtech-product\/\">FluxWear. Web Design and Development for Health Tech Product<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/web-design-educational-platform\/\">Magma Math. Web Design for Educational Platform<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-web-design-synthetic-data-platform\/\">Synthesized 2.0. Web Design for High-Quality Synthetic Data Platform<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/brand-identity-hotel-offers-service\/\">HotelCard. Brand Identity for Hotel Offers Service<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/identity-ux-design-healthcare-service\/\">Nibble Health. Identity and UX Design for Healthcare Fintech Service<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/physica-magazine-web-design-scientific-blog\/\">Physica Magazine. Web Design and Graphics for Scientific Blog<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/website-design-immersive-experience-marketing\/\">CSConnect. Website Design for Immersive Experience Marketing Platform<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/identity-website-design-golf-management-service\/\">ProAgenda. Identity and Website Design for Golf Management Service<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/identity-product-design-food-marketplace\/\">Kaiten. Identity and Product Design for Food Marketplace<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/website-design-electrical-engineering-service\/\">THT. Website Design for Electrical Engineering Service<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/website-design-for-podcast\/\">Nonconventional Show. Website Design for Podcast<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/brand-identity-ux-design-fintech\/\">Crezco. Brand Identity and UI\/UX Design for Fintech Service<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Watch video case studies on UI design process for web and mobile projects, creating graphics and interactions, and handy hints on working with design tools.<\/p>\n","protected":false},"author":3,"featured_media":12607,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[7,9],"tags":[154,469,619,176,479,248,482,256,485,324,487,331,489,16,336,491,20,365,493,44,440,502,47,447,504,57,457,515,100,463,533,123,465,534,127,466,548,138,467,550,147,468,585],"coauthors":[635],"class_list":["post-15363","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-processes_and_tools","category-ui_ux","tag-design-video","tag-ui-design-tips","tag-3d","tag-ecommerce-website","tag-usability","tag-illustration","tag-user-experience","tag-interaction-design","tag-user-experience-design","tag-mobile-design-inspiration","tag-user-experience-design-process","tag-mobile-ui","tag-user-experience-examples","tag-animation","tag-motion-design","tag-user-interface","tag-app-design","tag-product-design","tag-user-interface-design-process","tag-brand-identity","tag-tubik","tag-ux","tag-branding","tag-tubik-studio","tag-ux-design-article","tag-case-study","tag-ui","tag-uxui","tag-design","tag-ui-design-article","tag-web-design","tag-design-for-business","tag-ui-design-examples","tag-web-design-article","tag-design-for-marketing","tag-ui-design-inspiration","tag-website-design","tag-design-process","tag-ui-design-practices","tag-website-development","tag-design-studio","tag-ui-design-process","tag-webflow"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>UI Design Process for Web and Mobile: 3 Detailed Video Cases<\/title>\n<meta name=\"description\" content=\"Watch video case studies on UI design process for web and mobile projects, creating graphics and interactions, and handy hints on working with design tools.\" \/>\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\/ui-design-process-video\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"UI Design Process for Web and Mobile: 3 Detailed Video Cases\" \/>\n<meta property=\"og:description\" content=\"Watch video case studies on UI design process for web and mobile projects, creating graphics and interactions, and handy hints on working with design tools.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tubikstudio.com\/blog\/ui-design-process-video\/\" \/>\n<meta property=\"og:site_name\" content=\"Tubik Blog: Articles About Design\" \/>\n<meta property=\"article:published_time\" content=\"2024-02-01T11:13:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-14T15:23:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2022\/06\/egg-product-menu-page-design.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1402\" \/>\n\t<meta property=\"og:image:height\" content=\"1051\" \/>\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\/ui-design-process-video\/\",\"url\":\"https:\/\/tubikstudio.com\/blog\/ui-design-process-video\/\",\"name\":\"UI Design Process for Web and Mobile: 3 Detailed Video Cases\",\"isPartOf\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/ui-design-process-video\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/ui-design-process-video\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2022\/06\/egg-product-menu-page-design.jpg\",\"datePublished\":\"2024-02-01T11:13:35+00:00\",\"dateModified\":\"2026-01-14T15:23:45+00:00\",\"author\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\"},\"description\":\"Watch video case studies on UI design process for web and mobile projects, creating graphics and interactions, and handy hints on working with design tools.\",\"breadcrumb\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/ui-design-process-video\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tubikstudio.com\/blog\/ui-design-process-video\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/ui-design-process-video\/#primaryimage\",\"url\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2022\/06\/egg-product-menu-page-design.jpg\",\"contentUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2022\/06\/egg-product-menu-page-design.jpg\",\"width\":1402,\"height\":1051,\"caption\":\"egg product menu page design\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/ui-design-process-video\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/tubikstudio.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"UI Design Process for Web and Mobile: 3 Detailed Video Cases\"}]},{\"@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":"UI Design Process for Web and Mobile: 3 Detailed Video Cases","description":"Watch video case studies on UI design process for web and mobile projects, creating graphics and interactions, and handy hints on working with design tools.","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\/ui-design-process-video\/","og_locale":"en_US","og_type":"article","og_title":"UI Design Process for Web and Mobile: 3 Detailed Video Cases","og_description":"Watch video case studies on UI design process for web and mobile projects, creating graphics and interactions, and handy hints on working with design tools.","og_url":"https:\/\/tubikstudio.com\/blog\/ui-design-process-video\/","og_site_name":"Tubik Blog: Articles About Design","article_published_time":"2024-02-01T11:13:35+00:00","article_modified_time":"2026-01-14T15:23:45+00:00","og_image":[{"width":1402,"height":1051,"url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2022\/06\/egg-product-menu-page-design.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\/ui-design-process-video\/","url":"https:\/\/tubikstudio.com\/blog\/ui-design-process-video\/","name":"UI Design Process for Web and Mobile: 3 Detailed Video Cases","isPartOf":{"@id":"https:\/\/tubikstudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/tubikstudio.com\/blog\/ui-design-process-video\/#primaryimage"},"image":{"@id":"https:\/\/tubikstudio.com\/blog\/ui-design-process-video\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2022\/06\/egg-product-menu-page-design.jpg","datePublished":"2024-02-01T11:13:35+00:00","dateModified":"2026-01-14T15:23:45+00:00","author":{"@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f"},"description":"Watch video case studies on UI design process for web and mobile projects, creating graphics and interactions, and handy hints on working with design tools.","breadcrumb":{"@id":"https:\/\/tubikstudio.com\/blog\/ui-design-process-video\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tubikstudio.com\/blog\/ui-design-process-video\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/ui-design-process-video\/#primaryimage","url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2022\/06\/egg-product-menu-page-design.jpg","contentUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2022\/06\/egg-product-menu-page-design.jpg","width":1402,"height":1051,"caption":"egg product menu page design"},{"@type":"BreadcrumbList","@id":"https:\/\/tubikstudio.com\/blog\/ui-design-process-video\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/tubikstudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"UI Design Process for Web and Mobile: 3 Detailed Video Cases"}]},{"@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\/15363","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=15363"}],"version-history":[{"count":8,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/15363\/revisions"}],"predecessor-version":[{"id":16894,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/15363\/revisions\/16894"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media\/12607"}],"wp:attachment":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media?parent=15363"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/categories?post=15363"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/tags?post=15363"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/coauthors?post=15363"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}