{"id":25644,"date":"2016-02-22T23:01:22","date_gmt":"2016-02-22T15:01:22","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=25644"},"modified":"2023-04-06T19:12:36","modified_gmt":"2023-04-06T11:12:36","slug":"analysis-facebook-redesign-interface-concept","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/analysis-facebook-redesign-interface-concept\/","title":{"rendered":"Facebook Redesigned: Analyzing Independent Designs"},"content":{"rendered":"

There\u2019s a lot to learn by studying the work of other designers. This is true of both professional projects and spec designs for existing websites. Large sites like Facebook serve a very particular user experience with some good elements, and other not-so-good elements. In this post, I\u2019d like to examine different Facebook redesigns to analyze interface concepts<\/strong> that could improve the current user experience<\/a>.<\/p>\n

I\u2019ve pulled a handful of custom FB redesigns from Dribbble users, each with specific enhancements and updated UI elements<\/strong>. Take these ideas into consideration for how they look, how they might function, and how they could impact usability<\/strong> if implemented live on Facebook.<\/p>\n

\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\t33 Beautiful Re-design of Popular Websites<\/a>\n\t\t\t\t<\/p>\n

Streamlined Profile Page<\/h2>\n

This profile page redesign<\/a> comes from Haris Jusovic, a designer from the Balkan region of Europe.<\/p>\n

In this design he places more focus on simplicity by highlighting the page owner with a more prominent header photo and profile pic<\/strong>.<\/p>\n

\"haris<\/a><\/figure>\n

Timeline posts can be sorted by \u201crecent\u201d or \u201cpopular\u201d based on your preference. This is big for usability, especially in the wake of Twitter\u2019s backlash<\/a> against the recently-mandated algorithm change.<\/p>\n

Also many of the buttons display larger with extra padding and bigger typography<\/strong>. Since Facebook is meant to be interactive it only makes sense to increase visibility of items like buttons and hyperlinks.<\/p>\n

Overall this concept feels compact and lighter in bloat<\/strong>. It would be nice to see Facebook place more of a focus on interactive elements and maybe increase their font sizes, too.<\/p>\n

Multi-Column Timeline<\/h2>\n

Veering towards a vertically columnal layout is Alejandro Osorio\u2019s redesign<\/a>. This layout represents the profile timeline view that Facebook users see when they visit a user\u2019s profile page.<\/p>\n

The design is striking but can be off-putting to some users. It relies on multiple page columns to organize<\/strong> the user\u2019s profile links, along with a timeline view of recent posts. All the colors and elements stay true to Facebook\u2019s design styles. It certainly feels like a Facebook timeline page.<\/p>\n

\"alejandro<\/a><\/figure>\n

But some of the sidebar elements do come off as slightly confusing. For example, a green button with a single plus sign right beside a \u201cfollow\u201d button. One uses just a symbol, the other just text. This feels incongruent with the design style and other profile info.<\/p>\n

What I like most here is the clear structure of data in the timeline<\/strong>. Everything is organized clearly and there are even sidebar links to switch between recent posts and popular posts.<\/p>\n

Content-Dense Redesign<\/h2>\n

Larger websites like Facebook deal with much more data and a userbase that wants easy access to that data. In the homepage redesign<\/a> by MagicVoltage you\u2019ll find one consistent feature: lots of content crammed into one page layout.<\/p>\n

Facebook\u2019s homepage is the initial timeline view that users see when first visiting the website. It includes recent posts from friends, a chat list, games, ads, and other relevant info like upcoming birthdays.<\/p>\n

\"magic<\/a><\/figure>\n

The busy-ness of this layout is what makes it both great and potentially controversial. Having all this content on one page makes it super easy to navigate<\/strong> \u2013 once you actually learn where everything is located. And the top-left icon links are just vague enough to dissuade anyone from interacting with them.<\/p>\n

But in defense of this design it handles densely-packed content very well. There\u2019s plenty of whitespace between elements<\/strong> and it runs a four-column design brilliantly.<\/p>\n

Voluminous Navigation<\/h2>\n

This so-called Facebook 2.0 redesign<\/a> created by Marcelo Silva is really a sight to behold. His demo layout displays an updated homepage with a timeline and partially-hidden chat contacts.<\/p>\n

\"marcelo<\/a><\/figure>\n

A big piece to this design is the tiered navigation system<\/strong>. I like how there\u2019s a primary nav with icon links that display secondary links. In the above screenshot the user is selecting the profile icon which has links for browsing recent history and editing the profile<\/strong>.<\/p>\n

Unlike Facebook\u2019s traditional square photos, Marcelo\u2019s redesign opts towards the circular photo<\/strong>. This style is ubiquitous in both the timeline and the chat list.<\/p>\n

M Assistant & Recent Activity List<\/h2>\n

There\u2019s a lot to be said about Steven McCabe\u2019s FB redesign<\/a>. In fact, many areas like games and recent activities have been completely redesigned with an impressive facelift.<\/p>\n

Steven\u2019s design is much darker than Facebook\u2019s current color scheme<\/strong>. I like this because it builds more contrast<\/a> between sidebars and primary page content. Facebook\u2019s current homepage has most of this content but over time it can blend into the background.<\/p>\n

\"steven<\/a><\/figure>\n

The header still uses red bubbles to signify notifications. There\u2019s also trending posts and a newsfeed with the ability to sort through recent activity from friends in the right sidebar.<\/p>\n

At the very bottom you\u2019ll notice a small box for Facebook\u2019s M<\/a>, the equivalent of Siri<\/strong> for Facebook users.<\/p>\n

This feature doesn\u2019t get much attention in redesigns but Steven really went all-out to make his concept truly represent modern Facebook technology.<\/p>\n

Four-Column Timeline Layout<\/h2>\n

Here\u2019s another 4-col homepage redesign<\/a> made by Japanese designer Sho Kameya. All of these columns span the entirety of the page<\/strong>, both width and height.<\/p>\n

The far-left sidebar places heavy focus on traditional Facebook links for games, apps, pages, dev resources, and other similar items. Next is the content column which is the most diverse among all the redesigns. This does not keep the traditional links for update status\/add photo but instead uses a minimalist approach with hidden options<\/strong>.<\/p>\n

\"sho<\/a><\/figure>\n

The two right-hand sidebars include everything else with more photos like user avatars and game icons. This design still keeps all the updates like birthdays, chats, and friend recommendations.<\/p>\n

This design is very diverse but stays true to the core of Facebook\u2019s features. It may not be the perfect redesign but it shows the possibilities of a four-column layout<\/strong>.<\/p>\n

Simplified UI with Dark Chat List<\/h2>\n

The goal of Ben Hartley\u2019s redesign<\/a> is simplicity and subtlety. The layout uses a combination of flat design concepts<\/a> with a few drop shadows on larger page elements.<\/p>\n

Many branded items remain the same and he relies on Facebook\u2019s traditional blue\/grey color scheme. But you\u2019ll notice some of the icons have been redesigned either smaller or simpler<\/strong> (or both).<\/p>\n

\"ben<\/a><\/figure>\n

This layout also relies on circular avatars<\/strong> and gives plenty of room for images shared<\/strong> with posts. I really enjoy his updated chat list with the darker color scheme and smaller status icons<\/strong>.<\/p>\n

While Ben\u2019s redesign still feels a little cluttered, it does feel a lot simpler. This would be a tough design to gauge user experience without UX studies in a browser. But at a glance it seems easier to browse <\/strong>and gives more room to consume timeline content<\/strong>.<\/p>\n

Wrap-Up<\/h2>\n

Although these examples focus primarily on Facebook, the lessons learned can be applied to any website. Great user experience design transcends all language barriers and it\u2019s a vital piece of the digital creative process.<\/p>\n

Feel free to borrow ideas from this analysis and even implement similar ideas in your own project work. Also if you find any relatable Facebook redesigns feel free to share in the comments with your own analysis.<\/p>","protected":false},"excerpt":{"rendered":"

There\u2019s a lot to learn by studying the work of other designers. This is true of both professional projects and spec designs for existing websites. Large sites like Facebook serve a very particular user experience with some good elements, and other not-so-good elements. In this post, I\u2019d like to examine different Facebook redesigns to analyze…<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3395],"tags":[1773,158],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nFacebook Redesigned: Analyzing Independent Designs - Hongkiat<\/title>\n<meta name=\"description\" content=\"There's a lot to learn by studying the work of other designers. This is true of both professional projects and spec designs for existing websites. Large\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/analysis-facebook-redesign-interface-concept\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Facebook Redesigned: Analyzing Independent Designs\" \/>\n<meta property=\"og:description\" content=\"There's a lot to learn by studying the work of other designers. This is true of both professional projects and spec designs for existing websites. Large\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/analysis-facebook-redesign-interface-concept\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2016-02-22T15:01:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-06T11:12:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/analysis-facebook-redesign-interface-concept\/01-facebook-haris-jusovic.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/analysis-facebook-redesign-interface-concept\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/analysis-facebook-redesign-interface-concept\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"Facebook Redesigned: Analyzing Independent Designs\",\"datePublished\":\"2016-02-22T15:01:22+00:00\",\"dateModified\":\"2023-04-06T11:12:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/analysis-facebook-redesign-interface-concept\\\/\"},\"wordCount\":1196,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/analysis-facebook-redesign-interface-concept\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/analysis-facebook-redesign-interface-concept\\\/01-facebook-haris-jusovic.jpg\",\"keywords\":[\"Concept Design\",\"Facebook\"],\"articleSection\":[\"UI\\\/UX\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/analysis-facebook-redesign-interface-concept\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/analysis-facebook-redesign-interface-concept\\\/\",\"name\":\"Facebook Redesigned: Analyzing Independent Designs - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/analysis-facebook-redesign-interface-concept\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/analysis-facebook-redesign-interface-concept\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/analysis-facebook-redesign-interface-concept\\\/01-facebook-haris-jusovic.jpg\",\"datePublished\":\"2016-02-22T15:01:22+00:00\",\"dateModified\":\"2023-04-06T11:12:36+00:00\",\"description\":\"There's a lot to learn by studying the work of other designers. This is true of both professional projects and spec designs for existing websites. Large\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/analysis-facebook-redesign-interface-concept\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/analysis-facebook-redesign-interface-concept\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/analysis-facebook-redesign-interface-concept\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/analysis-facebook-redesign-interface-concept\\\/01-facebook-haris-jusovic.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/analysis-facebook-redesign-interface-concept\\\/01-facebook-haris-jusovic.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/analysis-facebook-redesign-interface-concept\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Facebook Redesigned: Analyzing Independent Designs\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Facebook Redesigned: Analyzing Independent Designs - Hongkiat","description":"There's a lot to learn by studying the work of other designers. This is true of both professional projects and spec designs for existing websites. Large","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:\/\/www.hongkiat.com\/blog\/analysis-facebook-redesign-interface-concept\/","og_locale":"en_US","og_type":"article","og_title":"Facebook Redesigned: Analyzing Independent Designs","og_description":"There's a lot to learn by studying the work of other designers. This is true of both professional projects and spec designs for existing websites. Large","og_url":"https:\/\/www.hongkiat.com\/blog\/analysis-facebook-redesign-interface-concept\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2016-02-22T15:01:22+00:00","article_modified_time":"2023-04-06T11:12:36+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/analysis-facebook-redesign-interface-concept\/01-facebook-haris-jusovic.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/analysis-facebook-redesign-interface-concept\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/analysis-facebook-redesign-interface-concept\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"Facebook Redesigned: Analyzing Independent Designs","datePublished":"2016-02-22T15:01:22+00:00","dateModified":"2023-04-06T11:12:36+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/analysis-facebook-redesign-interface-concept\/"},"wordCount":1196,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/analysis-facebook-redesign-interface-concept\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/analysis-facebook-redesign-interface-concept\/01-facebook-haris-jusovic.jpg","keywords":["Concept Design","Facebook"],"articleSection":["UI\/UX"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/analysis-facebook-redesign-interface-concept\/","url":"https:\/\/www.hongkiat.com\/blog\/analysis-facebook-redesign-interface-concept\/","name":"Facebook Redesigned: Analyzing Independent Designs - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/analysis-facebook-redesign-interface-concept\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/analysis-facebook-redesign-interface-concept\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/analysis-facebook-redesign-interface-concept\/01-facebook-haris-jusovic.jpg","datePublished":"2016-02-22T15:01:22+00:00","dateModified":"2023-04-06T11:12:36+00:00","description":"There's a lot to learn by studying the work of other designers. This is true of both professional projects and spec designs for existing websites. Large","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/analysis-facebook-redesign-interface-concept\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/analysis-facebook-redesign-interface-concept\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/analysis-facebook-redesign-interface-concept\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/analysis-facebook-redesign-interface-concept\/01-facebook-haris-jusovic.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/analysis-facebook-redesign-interface-concept\/01-facebook-haris-jusovic.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/analysis-facebook-redesign-interface-concept\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Facebook Redesigned: Analyzing Independent Designs"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6FC","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/25644","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=25644"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/25644\/revisions"}],"predecessor-version":[{"id":65805,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/25644\/revisions\/65805"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=25644"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=25644"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=25644"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=25644"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}