{"id":25940,"date":"2024-05-27T07:59:52","date_gmt":"2024-05-26T22:59:52","guid":{"rendered":"https:\/\/designcompass.org\/?p=25940"},"modified":"2024-05-27T07:59:55","modified_gmt":"2024-05-26T22:59:55","slug":"whatsapp-redesign","status":"publish","type":"post","link":"https:\/\/designcompass.org\/en\/2024\/05-1tp-3tea\/27\/whatsapp-redesign\/","title":{"rendered":"WhatsApp Redesign: A Modern App for Everyone"},"content":{"rendered":"<p>WhatsApp UI has changed significantly in 5 years. WhatsApp is a messenger service provided by Meta and used by more than 2 billion people around the world. It is one of the services that pursues a universal design that anyone can use regardless of country, age, culture, or device.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/whatsapp-redesign-06-1024x576.png\" alt=\"\" class=\"wp-image-25946\" srcset=\"https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/whatsapp-redesign-06-1024x576.png 1024w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/whatsapp-redesign-06-300x169.png 300w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/whatsapp-redesign-06-768x432.png 768w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/whatsapp-redesign-06-1536x864.png 1536w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/whatsapp-redesign-06-18x10.png 18w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/whatsapp-redesign-06-924x520.png 924w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/whatsapp-redesign-06-671x377.png 671w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/whatsapp-redesign-06-1320x743.png 1320w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/whatsapp-redesign-06-600x338.png 600w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/whatsapp-redesign-06.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">\u00a9Meta<\/figcaption><\/figure>\n\n\n\n<p>Because familiarity is important, we created a design similar to the default app on the device the user is using. For a long time, we focused on adding useful features for users, but as the fundamental design of Android, the platform, changed, WhatsApp also changed its design to convey a modern feel.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"469\" src=\"https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/whatsapp-redesign-08-1024x469.png\" alt=\"\" class=\"wp-image-25947\" srcset=\"https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/whatsapp-redesign-08-1024x469.png 1024w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/whatsapp-redesign-08-300x137.png 300w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/whatsapp-redesign-08-768x352.png 768w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/whatsapp-redesign-08-1536x704.png 1536w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/whatsapp-redesign-08-18x8.png 18w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/whatsapp-redesign-08-924x423.png 924w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/whatsapp-redesign-08-671x307.png 671w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/whatsapp-redesign-08-1320x605.png 1320w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/whatsapp-redesign-08-600x275.png 600w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/whatsapp-redesign-08.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">\u00a9Meta<\/figcaption><\/figure>\n\n\n\n<p>The WhatsApp team aimed for a design that was fresh, accessible to everyone, and scalable. The overall UI composition, colors, icons, and illustrations have been changed to become brighter and fresher. There are more white and gray areas, and dark green is used as the main color, and bright green such as fluorescent color is used as the secondary color. The illustration has been changed to a rounded style with a black outline. It has a soft impression in an easy-to-understand form.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"469\" src=\"https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/whatsapp-redesign-10-1024x469.png\" alt=\"\" class=\"wp-image-25948\" srcset=\"https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/whatsapp-redesign-10-1024x469.png 1024w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/whatsapp-redesign-10-300x137.png 300w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/whatsapp-redesign-10-768x352.png 768w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/whatsapp-redesign-10-1536x704.png 1536w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/whatsapp-redesign-10-18x8.png 18w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/whatsapp-redesign-10-924x423.png 924w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/whatsapp-redesign-10-671x307.png 671w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/whatsapp-redesign-10-1320x605.png 1320w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/whatsapp-redesign-10-600x275.png 600w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/whatsapp-redesign-10.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">\u00a9Meta<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"288\" src=\"https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/10000000_1822875988179279_4146441591012160948_n-1024x288.gif\" alt=\"\" class=\"wp-image-25942\" srcset=\"https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/10000000_1822875988179279_4146441591012160948_n-1024x288.gif 1024w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/10000000_1822875988179279_4146441591012160948_n-300x84.gif 300w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/10000000_1822875988179279_4146441591012160948_n-768x216.gif 768w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/10000000_1822875988179279_4146441591012160948_n-1536x432.gif 1536w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/10000000_1822875988179279_4146441591012160948_n-18x5.gif 18w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/10000000_1822875988179279_4146441591012160948_n-924x260.gif 924w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/10000000_1822875988179279_4146441591012160948_n-671x189.gif 671w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/10000000_1822875988179279_4146441591012160948_n-1320x371.gif 1320w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/10000000_1822875988179279_4146441591012160948_n-600x169.gif 600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">\u00a9Meta<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/10000000_455821183620820_3571393725085933376_n-1024x576.gif\" alt=\"\" class=\"wp-image-25941\" srcset=\"https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/10000000_455821183620820_3571393725085933376_n-1024x576.gif 1024w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/10000000_455821183620820_3571393725085933376_n-300x169.gif 300w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/10000000_455821183620820_3571393725085933376_n-768x432.gif 768w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/10000000_455821183620820_3571393725085933376_n-1536x864.gif 1536w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/10000000_455821183620820_3571393725085933376_n-18x10.gif 18w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/10000000_455821183620820_3571393725085933376_n-924x520.gif 924w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/10000000_455821183620820_3571393725085933376_n-671x377.gif 671w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/10000000_455821183620820_3571393725085933376_n-1320x743.gif 1320w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/10000000_455821183620820_3571393725085933376_n-600x338.gif 600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">\u00a9Meta<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/whatsapp-redesign-12-1024x576.png\" alt=\"\" class=\"wp-image-25949\" srcset=\"https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/whatsapp-redesign-12-1024x576.png 1024w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/whatsapp-redesign-12-300x169.png 300w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/whatsapp-redesign-12-768x432.png 768w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/whatsapp-redesign-12-1536x864.png 1536w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/whatsapp-redesign-12-18x10.png 18w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/whatsapp-redesign-12-924x520.png 924w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/whatsapp-redesign-12-671x377.png 671w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/whatsapp-redesign-12-1320x743.png 1320w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/whatsapp-redesign-12-600x338.png 600w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/whatsapp-redesign-12.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">\u00a9Meta<\/figcaption><\/figure>\n\n\n\n<p>The dark green color of the Android app&#039;s navigation tab has disappeared and moved to the bottom. As the structures of Android and iOS become more similar, it appears that Android&#039;s unique top tab has moved down to the bottom.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"469\" src=\"https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/441304203_1373180566721274_3810271024046807848_n-1024x469.gif\" alt=\"\" class=\"wp-image-25945\" srcset=\"https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/441304203_1373180566721274_3810271024046807848_n-1024x469.gif 1024w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/441304203_1373180566721274_3810271024046807848_n-300x138.gif 300w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/441304203_1373180566721274_3810271024046807848_n-768x352.gif 768w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/441304203_1373180566721274_3810271024046807848_n-1536x704.gif 1536w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/441304203_1373180566721274_3810271024046807848_n-18x8.gif 18w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/441304203_1373180566721274_3810271024046807848_n-924x424.gif 924w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/441304203_1373180566721274_3810271024046807848_n-671x308.gif 671w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/441304203_1373180566721274_3810271024046807848_n-1320x605.gif 1320w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/441304203_1373180566721274_3810271024046807848_n-600x275.gif 600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">\u00a9Meta<\/figcaption><\/figure>\n\n\n\n<p>The iOS app&#039;s accent color has changed from blue to green. We applied our own style to the style that was similar to the iOS default app. There was a big issue that iMessage&#039;s blue bubble discriminated against Android users&#039; green bubble, but the application of green is impressive. Judging by the addition of Meta&#039;s AI search, it appears that the purpose is to reveal WhatsApp&#039;s identity beyond the OS.<\/p>\n\n\n\n<blockquote class=\"twitter-tweet\" data-media-max-width=\"560\"><p lang=\"en\" dir=\"ltr\">we&#039;re rolling out design updates to give WhatsApp a fresh new look, while keeping it familiar + easy to use \ud83e\udd29 here are some ways it&#039;s changing \u2b07\ufe0f<br><br>\u2022\u2060 \u2060updated layout and icons that help you find what you need faster <br><br>\u2022\u2060 \u2060new illustrations with added animation to\u2026 <a href=\"https:\/\/t.co\/pFu0cfxpWY\">pic.twitter.com\/pFu0cfxpWY<\/a><\/p>\u2014 WhatsApp (@WhatsApp) <a href=\"https:\/\/twitter.com\/WhatsApp\/status\/1788637889728750032?ref_src=twsrc%5Etfw\">May 9, 2024<\/a><\/blockquote> <script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">More and Sources<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/design.facebook.com\/stories\/whatsapp-user-interface-update\/\">https:\/\/design.facebook.com\/stories\/whatsapp-user-interface-update\/<\/a><\/li>\n<\/ul>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>","protected":false},"excerpt":{"rendered":"<p>\uc653\uce20\uc571 UI\uac00 5\ub144 \ub9cc\uc5d0 \ud06c\uac8c \ubc14\ub00c\uc5c8\uc2b5\ub2c8\ub2e4. \uc653\uce20\uc571\uc740 \uba54\ud0c0\uc5d0\uc11c \uc81c\uacf5\ud558\ub294 \uc804 \uc138\uacc4 20\uc5b5 \uba85 \uc774\uc0c1\uc758 \uc0ac\ub78c\ub4e4\uc774 \uc4f0\ub294 \uba54\uc2e0\uc800\uc785\ub2c8\ub2e4. \ub098\ub77c, \ub098\uc774, \ubb38\ud654, \uae30\uae30\uc5d0 \uc0c1\uad00\uc5c6\uc774 \ub204\uad6c\ub098 \uc4f8 \uc218 \uc788\ub294 \uc720\ub2c8\ubc84\uc124\ud55c \ub514\uc790\uc778\uc744 \uc9c0\ud5a5\ud558\ub294 \uc11c\ube44\uc2a4 \uc911 \ud558\ub098\uc8e0. \uc775\uc219\ud568\uc774 \uc911\uc694\ud558\uae30 \ub54c\ubb38\uc5d0 \uc0ac\uc6a9\uc790\uac00 \uc4f0\ub358 \uae30\uae30\uc758 \uae30\ubcf8 \uc571\uacfc \ube44\uc2b7\ud55c \ub514\uc790\uc778\uc73c\ub85c \ub9cc\ub4e4\uc5c8\uc2b5\ub2c8\ub2e4. \uc624\ub79c \uc2dc\uac04 \uc0ac\uc6a9\uc790\ub97c \uc704\ud55c \uc720\uc6a9\ud55c \uae30\ub2a5\uc744 \ucd94\uac00\ud558\ub294 \ub370 \uc9d1\uc911\ud588\ub294\ub370 \ud50c\ub7ab\ud3fc\uc778 \uc548\ub4dc\ub85c\uc774\ub4dc\uc758 \uadfc\ubcf8\uc801\uc778 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":25951,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[4,621],"tags":[69,370,377,1114],"class_list":["post-25940","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news","category-service","tag-69","tag-ui","tag-ux","tag-1114"],"acf":[],"jetpack_featured_media_url":"https:\/\/designcompass.org\/wp-content\/uploads\/2024\/05\/whatsapp-redesign-01.png","publishpress_future_action":{"enabled":false,"date":"2026-05-13 03:54:42","action":"change-status","newStatus":"draft","terms":[],"taxonomy":"category","extraData":[]},"publishpress_future_workflow_manual_trigger":{"enabledWorkflows":[]},"_links":{"self":[{"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/posts\/25940","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/comments?post=25940"}],"version-history":[{"count":0,"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/posts\/25940\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/media\/25951"}],"wp:attachment":[{"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/media?parent=25940"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/categories?post=25940"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/tags?post=25940"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}