{"id":4838,"date":"2021-03-31T12:11:02","date_gmt":"2021-03-31T12:11:02","guid":{"rendered":"https:\/\/www.wendyzhou.se\/blog\/?p=4838"},"modified":"2025-11-02T12:00:37","modified_gmt":"2025-11-02T12:00:37","slug":"chat-screen-ui-inspiration-mobile-desktop-video-calls","status":"publish","type":"post","link":"https:\/\/www.wendyzhou.se\/blog\/chat-screen-ui-inspiration-mobile-desktop-video-calls\/","title":{"rendered":"Best Chat Screen UI Inspiration | Mobile, Desktop &#038; Video Calls"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Are you looking for inspiration for chat screen UI designs? Here&#8217;s a full collection of them! Everything from UI mobile chat screens, to desktop chat designs (both in dark and light mode themes), as well as chat designs for video call applications.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">See also: <a href=\"https:\/\/www.wendyzhou.se\/blog\/music-player-ui-design-inspiration\/\">Music Player UI Design Inspiration<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Some details I noticed in UI designs for chats are:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Status-indicators (small blobs of colors that indicate if your contacts are online or offline)<\/li>\n\n\n\n<li>An indicator of the number of unread messages from each chat<\/li>\n\n\n\n<li>Sections for file sharing and old files that have been uploaded<\/li>\n\n\n\n<li>A separation between group chats and chats with individuals<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image alignwide size-large is-style-default\"><a href=\"https:\/\/www.amazon.com\/dp\/B0D8YGLLSJ\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"356\" src=\"https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2025\/01\/blog-ad-ui-design-book-1024x356.png\" alt=\"\" class=\"wp-image-7703\" srcset=\"https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2025\/01\/blog-ad-ui-design-book-1024x356.png 1024w, https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2025\/01\/blog-ad-ui-design-book-300x104.png 300w, https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2025\/01\/blog-ad-ui-design-book-768x267.png 768w, https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2025\/01\/blog-ad-ui-design-book-1536x534.png 1536w, https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2025\/01\/blog-ad-ui-design-book-2048x713.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Mobile Chat UI Design<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">With smaller screens, designs are limited to the number of features that can fit without overwhelming the user. Stripped down to the essentials, mobile chat designs often only consist of your most frequently talked to contacts and the chat windows.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/dribbble.com\/shots\/15103778-uStock-Message-Support\">Malik Abimanyu<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/dribbble.com\/shots\/11470136-A-Messaging-App-Concept\">Tannaz Sadeghi<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/dribbble.com\/shots\/15218758-Customer-Chat-Plugin-App\">Tomasz Mazurczak<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Desktop Chat Designs<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">With desktop screens, you can fit more elements and &#8220;nice-to-have&#8221;  features, compared to on mobile. For example making a section of the interface dedicated to file sharing and collaboration.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Light mode<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/dribbble.com\/shots\/13625389-QuickChat-Dashboard-Design\">Emy Lascan<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/dribbble.com\/shots\/14598880-Chat-dashboard\">Arthur Arapov<\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Dark mode desktop UI <\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/dribbble.com\/shots\/14866428-Desktop-Messenger-App\">Filip Legierski<\/a><\/li>\n\n\n\n<li>Messenger Dark Theme UI by <a href=\"https:\/\/dribbble.com\/shots\/15343641-Messenger-Dark-theme\">Alexander Porubov<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/dribbble.com\/shots\/14412896-Cyber-Community-ZenDesk\">UixNinja<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"> Video Chat UI Inspiration<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Video calls have become really popular since COVID forced people all around the world to adapt to working and studying remotely. It won&#8217;t be surprising therefore to see many upcoming applications tailored towards video calls and collaborations.  So, here are a few of the best video chat UI concepts that I&#8217;ve seen. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">One interesting detail I noticed while observing UI designs for video calls is that labels and buttons overlaying the videos are often half-transparent and\/or contain a background blur. This is a good idea for minimizing the disturbance on the videos, while still maintaining the actions that one wants to allow the user to take.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/dribbble.com\/shots\/14607971\/attachments\/6300489?mode=media\">Karol Kos<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/dribbble.com\/shots\/15181362--Vektory-Video-conferencing\">Adalahreza<\/a><\/li>\n\n\n\n<li>Mobile Video Call Chat UI Design by <a href=\"https:\/\/dribbble.com\/shots\/12298196-Online-Meeting\">Jinu<\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Thank you for reading. I hope this was helpful!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Are you looking for inspiration for chat screen UI designs? Here&#8217;s a full collection &#8211; Mobile, desktop, light\/dark mode, and video calls<\/p>\n","protected":false},"author":1,"featured_media":4840,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"categories":[175],"tags":[],"class_list":["post-4838","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ui-design","entry","has-media"],"gutentor_comment":1,"uagb_featured_image_src":{"full":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/Chat-Screen-UI-Inpspiration.png",2560,1440,false],"thumbnail":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/Chat-Screen-UI-Inpspiration-150x150.png",150,150,true],"medium":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/Chat-Screen-UI-Inpspiration-300x169.png",300,169,true],"medium_large":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/Chat-Screen-UI-Inpspiration-768x432.png",768,432,true],"large":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/Chat-Screen-UI-Inpspiration-1024x576.png",1024,576,true],"1536x1536":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/Chat-Screen-UI-Inpspiration-1536x864.png",1536,864,true],"2048x2048":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/Chat-Screen-UI-Inpspiration-2048x1152.png",2048,1152,true],"ocean-thumb-m":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/Chat-Screen-UI-Inpspiration.png",600,338,false],"ocean-thumb-ml":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/Chat-Screen-UI-Inpspiration.png",800,450,false],"ocean-thumb-l":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/Chat-Screen-UI-Inpspiration.png",1200,675,false]},"uagb_author_info":{"display_name":"Wendy Zhou","author_link":"https:\/\/www.wendyzhou.se\/blog\/author\/wendy1111live-se\/"},"uagb_comment_info":1,"uagb_excerpt":"Are you looking for inspiration for chat screen UI designs? Here's a full collection - Mobile, desktop, light\/dark mode, and video calls","_links":{"self":[{"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/posts\/4838","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/comments?post=4838"}],"version-history":[{"count":6,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/posts\/4838\/revisions"}],"predecessor-version":[{"id":8267,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/posts\/4838\/revisions\/8267"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/media\/4840"}],"wp:attachment":[{"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/media?parent=4838"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/categories?post=4838"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/tags?post=4838"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}