{"id":507,"date":"2022-02-02T12:00:41","date_gmt":"2022-02-02T05:00:41","guid":{"rendered":"https:\/\/bnsd.binus.ac.id\/graphic-design\/?p=507"},"modified":"2022-02-02T12:00:41","modified_gmt":"2022-02-02T05:00:41","slug":"design-principles-behind-great-products","status":"publish","type":"post","link":"https:\/\/international.binus.ac.id\/graphic-design\/2022\/02\/02\/design-principles-behind-great-products\/","title":{"rendered":"Design Principles Behind Great Products"},"content":{"rendered":"<div class=\"gb gc gd ge gf\">\n<div class=\"n p\">\n<div class=\"ab ac ae af ag dh ai aj\">\n<h2 id=\"cfb7\" class=\"hs ht gv bp hu hv hw hx hy hz ia ib ic id ie if ig ih ii ij ik il im in io ip du\" data-selectable-paragraph=\"\">The range of principles<\/h2>\n<p id=\"048c\" class=\"pw-post-body-paragraph gt gu gv gw b gx iq gz ha hb ir hd he hf is hh hi hj it hl hm hn iu hp hq hr gb du\" data-selectable-paragraph=\"\">If you try to google \u201cDesign Principles\u201d you most likely run into some basic rules of graphic design: proximity, balance, contrast, space, etc. Things that good designers usually familiar with, or, most likely, know inside out.<\/p>\n<p id=\"702a\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\">The next huge part is principles of a rational design process. It\u2019s a set of concepts that makes you a true professional who\u2019s able to provide an excellent design with great efficiency. Applying these principles to the whole team sets a bar of standards that new employees should match or reach in the short term. Let\u2019s take a look at the\u00a0<a class=\"bv iv\" href=\"https:\/\/www.gov.uk\/design-principles\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\">GOV.UK Design Principles<\/a>.<\/p>\n<figure class=\"ix iy iz ja jb gm ct cu paragraph-image\">\n<div class=\"gn go dr gp aj gq\" role=\"button\">\n<div class=\"ct cu iw\">\n<div class=\"jh s dr ji\">\n<div class=\"jj jk s\">\n<div class=\"jc jd t u v je aj au jf jg\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"oh qg t u v je aj c\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/max\/700\/1*Sx_CxnMtQynYgg-0vMv5FA.png\" alt=\"\" width=\"700\" height=\"491\" \/><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/figure>\n<p id=\"697c\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\">The list seems reasonable, but what I think is that such things are an industrial standard by now. Everybody design with data, and everybody tries to understands context. I believe that if you choose design principles for your team, you should pick some that are groundbreaking and challenge your team to go further.<\/p>\n<p id=\"3c10\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\">Some teams put their principles online, and I regularly bump into some statements which sound like \u201cbe human\u201d or \u201cbe communicative.\u201d I hold a firm belief that such shit isn\u2019t worth to be hanging on a wall unless your team is full of insensitive silent jerks and you want to change that fact. Why did you hire them in the first place?<\/p>\n<figure class=\"ix iy iz ja jb gm ct cu paragraph-image\">\n<div class=\"gn go dr gp aj gq\" role=\"button\">\n<div class=\"ct cu jo\">\n<div class=\"jh s dr ji\">\n<div class=\"jp jk s\">\n<div class=\"jc jd t u v je aj au jf jg\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"oh qg t u v je aj c\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/max\/700\/1*lyf7k6VSbGBGm8Gl-oLn6A.gif\" alt=\"\" width=\"700\" height=\"869\" \/><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/figure>\n<p id=\"3c43\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\">So, what I was looking for, are\u00a0<strong class=\"gw jq\">product design principles<\/strong>. And the Gov.UK provides at least one:<\/p>\n<blockquote class=\"jr js jt\">\n<p id=\"1546\" class=\"gt gu ju gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\"><em class=\"gv\">This is for everyone<\/em><\/strong><br \/>\n<mark class=\"vr vs ns\">Accessible design is good design. Everything we build should be as inclusive, legible and readable as possible. If we have to sacrifice elegance \u2014 so be it. We\u2019re building for needs, not audiences. We\u2019re designing for the whole country, not just the ones who are used to using the web. The people who most need our services are often the people who find them hardest to use. Let\u2019s think about those people from the start.<\/mark><\/p>\n<\/blockquote>\n<p id=\"873f\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\">Design Principles of your product should tell you, your team and stakeholders which directions you should be going in the tough choices. They should focus on what distinct your product from others, how it feels and what is important for the business and your customers.<\/p>\n<p id=\"070e\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\">You are probably aware of the Apple\u2019s Human Interface Guidelines or Google\u2019s material design guidelines. Design principles behind these systems try to unify different products under the platform and bring the shared feeling to them.<\/p>\n<p id=\"7515\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\">If your product exists on various platforms, you should consider having a design system and some principles behind it, as well as the product design principles. You want to distance your product from others and unify the experience through different touchpoints, operating systems, and screens.<\/p>\n<p id=\"7966\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\">There goes the same problem: some teams put obvious design principles for their product: clarity, simplicity, usability \u2014 but you can\u2019t create a good product without keeping such things in mind, and nowadays professionals stick with such principles by default.<\/p>\n<h2 id=\"bcb3\" class=\"hs ht gv bp hu hv hw hx hy hz ia ib ic id ie if ig ih ii ij ik il im in io ip du\" data-selectable-paragraph=\"\">Wrapping up<\/h2>\n<ul class=\"\">\n<li id=\"6a5c\" class=\"gt gu gv gw b gx iq gz ha hb ir hd he hf is hh hi hj it hl hm hn iu hp hq hr jv jw jx du\" data-selectable-paragraph=\"\"><em class=\"ju\">Principles of good design<\/em><br \/>\na scope of rules that define a great design.<\/li>\n<li id=\"f870\" class=\"gt gu gv gw b gx jy gz ha hb jz hd he hf ka hh hi hj kb hl hm hn kc hp hq hr jv jw jx du\" data-selectable-paragraph=\"\"><em class=\"ju\">Principles for the design process<\/em><br \/>\nexplains the way of work to create great products.<\/li>\n<li id=\"3eec\" class=\"gt gu gv gw b gx jy gz ha hb jz hd he hf ka hh hi hj kb hl hm hn kc hp hq hr jv jw jx du\" data-selectable-paragraph=\"\"><em class=\"ju\">Design principles for the products<\/em><br \/>\nhow a product should feel, what emotions should it brings, what distinct it from the others.<\/li>\n<li id=\"d893\" class=\"gt gu gv gw b gx jy gz ha hb jz hd he hf ka hh hi hj kb hl hm hn kc hp hq hr jv jw jx du\" data-selectable-paragraph=\"\"><em class=\"ju\">Design principle for the systems<\/em><br \/>\nunify your product experience in different circumstances.<\/li>\n<\/ul>\n<h2 id=\"148a\" class=\"hs ht gv bp hu hv hw hx hy hz ia ib ic id ie if ig ih ii ij ik il im in io ip du\" data-selectable-paragraph=\"\">Do you need design principles for your product?<\/h2>\n<p id=\"727f\" class=\"pw-post-body-paragraph gt gu gv gw b gx iq gz ha hb ir hd he hf is hh hi hj it hl hm hn iu hp hq hr gb du\" data-selectable-paragraph=\"\">Having strong principles doesn\u2019t necessarily make your product strong at the end. Apparently, the great product requires great execution at all stages of creation, and design principles are just a small bit that guides your decisions and brings valid arguments in the disputes. They share the common vision and save time.<\/p>\n<h2 id=\"4bc6\" class=\"hs ht gv bp hu hv hw hx hy hz ia ib ic id ie if ig ih ii ij ik il im in io ip du\" data-selectable-paragraph=\"\">What are the good principles?<\/h2>\n<ul class=\"\">\n<li id=\"c616\" class=\"gt gu gv gw b gx iq gz ha hb ir hd he hf is hh hi hj it hl hm hn iu hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">Simple<\/li>\n<li id=\"7140\" class=\"gt gu gv gw b gx jy gz ha hb jz hd he hf ka hh hi hj kb hl hm hn kc hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">Have a real world examples<\/li>\n<li id=\"3202\" class=\"gt gu gv gw b gx jy gz ha hb jz hd he hf ka hh hi hj kb hl hm hn kc hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">Guide design decisions<\/li>\n<li id=\"69bb\" class=\"gt gu gv gw b gx jy gz ha hb jz hd he hf ka hh hi hj kb hl hm hn kc hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">Reflect your brand<\/li>\n<\/ul>\n<h2 id=\"b320\" class=\"hs ht gv bp hu hv hw hx hy hz ia ib ic id ie if ig ih ii ij ik il im in io ip du\" data-selectable-paragraph=\"\">Collection<\/h2>\n<p id=\"fbd4\" class=\"pw-post-body-paragraph gt gu gv gw b gx iq gz ha hb ir hd he hf is hh hi hj it hl hm hn iu hp hq hr gb du\" data-selectable-paragraph=\"\">I gathered all principles that feel right to me. I don\u2019t include basic design rules or process principles, but I added the Design Systems principles since they are overlapping with product design principles.<\/p>\n<p id=\"d2cc\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\">Cheers!<\/p>\n<h1 id=\"a45a\" class=\"kd ht gv bp hu ke kf gz hy kg kh hd ic ki kj kk ig kl km kn ik ko kp kq io kr du\" data-selectable-paragraph=\"\">Here we go:<\/h1>\n<figure class=\"ix iy iz ja jb gm ct cu paragraph-image\">\n<div class=\"gn go dr gp aj gq\" role=\"button\">\n<div class=\"ct cu ks\">\n<div class=\"jh s dr ji\">\n<div class=\"kt jk s\">\n<div class=\"jc jd t u v je aj au jf jg\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"oh qg t u v je aj c\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/max\/700\/1*R9nTDNPwWChKAZRIo77yeA.gif\" alt=\"\" width=\"700\" height=\"160\" \/><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/figure>\n<h1 id=\"9a24\" class=\"kd ht gv bp hu ke kf gz hy kg kh hd ic ki kj kk ig kl km kn ik ko kp kq io kr du\" data-selectable-paragraph=\"\"><a class=\"bv iv\" href=\"http:\/\/airbnb.design\/building-a-visual-language\/\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\">Airbnb<\/a><\/h1>\n<p id=\"5c01\" class=\"pw-post-body-paragraph gt gu gv gw b gx iq gz ha hb ir hd he hf is hh hi hj it hl hm hn iu hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Unified<br \/>\n<\/strong>Each piece is part of a greater whole and should contribute positively to the system at scale. There should be no isolated features or outliers.<\/p>\n<p id=\"4f1e\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Universal<br \/>\n<\/strong>Airbnb is used around the world by a wide global community. Our products and visual language should be welcoming and accessible.<\/p>\n<p id=\"9827\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Iconic<br \/>\n<\/strong>We\u2019re focused when it comes to both design and functionality. Our work should speak boldly and clearly to this focus.<\/p>\n<p id=\"8658\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Conversational<br \/>\n<\/strong>Our use of motion breathes life into our products, and allows us to communicate with users in easily understood ways.<\/p>\n<p id=\"775a\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Design as the \u201cmutual friend\u201d<br \/>\n<\/strong>Helping minimize uncertainties and setting expectations online, in the product, is an enabler for a meaningful experience offline, in the real world. We build products to let users get to know each other; we also learn what you\u2019re looking for, and with that knowledge, we open the door to new experiences. We set the stage, help make the introduction, then get out of the way. And like a good friend, we\u2019re there for you when you need us.<\/p>\n<p id=\"4cdf\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Design for first impressions<br \/>\n<\/strong>Although Airbnb requires some information from our users to book, we don\u2019t require disclosure. That is, we ask guests to tell us who they are, but it\u2019s up to them to tell us about themselves.<\/p>\n<p id=\"8060\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Trust takes effort<br \/>\n<\/strong>As with most things in life, you get out of Airbnb what you put into it. Trust on Airbnb is shared; it goes both ways. We\u2019ve found the more effort a guest can signal to a host, the more trust a host is willing to give that guest.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"n p di ku kv kw\" role=\"separator\"><\/div>\n<div class=\"gb gc gd ge gf\">\n<div class=\"n p\">\n<div class=\"ab ac ae af ag dh ai aj\">\n<figure class=\"ix iy iz ja jb gm ct cu paragraph-image\">\n<div class=\"gn go dr gp aj gq\" role=\"button\">\n<div class=\"ct cu ks\"><img loading=\"lazy\" decoding=\"async\" class=\"aj gr gs\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*Nkd9uYfm5uc5nOB8X7a6kw.gif\" alt=\"\" width=\"700\" height=\"148\" \/><\/div>\n<\/div>\n<\/figure>\n<h1 id=\"bd92\" class=\"kd ht gv bp hu ke kf gz hy kg kh hd ic ki kj kk ig kl km kn ik ko kp kq io kr du\" data-selectable-paragraph=\"\"><a class=\"bv iv\" href=\"https:\/\/www.facebook.com\/notes\/facebook-design\/facebook-design-principles\/118951047792\/\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\">Facebook<\/a><\/h1>\n<p id=\"e016\" class=\"pw-post-body-paragraph gt gu gv gw b gx iq gz ha hb ir hd he hf is hh hi hj it hl hm hn iu hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Universal<br \/>\n<\/strong>Our mission is to make the entire world more open, and this means reaching every corner, every person. So our design needs to work for everyone, every culture, every language, every device, every stage of life. This is why we build products that work for 90% of users and cut away features that only work for just a minority, even if we step back in the short term.<\/p>\n<p id=\"6a20\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Human<br \/>\n<\/strong>Users return to our site to be surrounded by friends and other people near to them. This is a central promise of our product, that the people you care about are all in one place. This is why our voice and visual style stay in the background, behind people\u2019s voices, people\u2019s faces, and people\u2019s expression.<\/p>\n<p id=\"28f9\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Clean<br \/>\n<\/strong>Our visual style is clean and understated, to create a blank canvas on which our users live. A minimal, well-lit space encourages participation and honest transparent communication. Clean is the not the easiest approach to visual style. To the contrary, margins and type scale, washes and color become more important as we reduce the number of styles we rely on.<\/p>\n<p id=\"8e4f\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Consistent<br \/>\n<\/strong>We invest our time wisely, by embracing patterns, recognizing that our usability is greatly improved when similar parts are expressed in similar ways. Our interactions speak to users with a single voice, building trust. Reduce, reuse, don\u2019t redesign.<\/p>\n<p id=\"e7af\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Useful<br \/>\n<\/strong>Our product is more utility than entertainment, meant for repeated daily use, providing value efficiently. This is why our core interactions, the ones users engage daily, are streamlined, purged of unnecessary clicks and wasted space.<\/p>\n<p id=\"2d7e\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Fast<br \/>\n<\/strong>We value our users time more than our own. We recognize faster experiences are more efficient and feel more effortless. As such, site performance is something our users should never notice. Our site should move as fast as we do.<\/p>\n<p id=\"8b1c\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Transparent<br \/>\n<\/strong>Users trust us with their identity, their photos, their thoughts and conversation. We reciprocate with the utmost honesty and transparency. We are clear and up front about what\u2019s happening and why.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"n p di ku kv kw\" role=\"separator\"><\/div>\n<div class=\"gb gc gd ge gf\">\n<div class=\"n p\">\n<div class=\"ab ac ae af ag dh ai aj\">\n<figure class=\"ix iy iz ja jb gm ct cu paragraph-image\">\n<div class=\"gn go dr gp aj gq\" role=\"button\">\n<div class=\"ct cu ks\"><img loading=\"lazy\" decoding=\"async\" class=\"aj gr gs\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*9TH9yRReIvtYwcxMaoTJ4Q.gif\" alt=\"\" width=\"700\" height=\"160\" \/><\/div>\n<\/div>\n<\/figure>\n<h1 id=\"796e\" class=\"kd ht gv bp hu ke kf gz hy kg kh hd ic ki kj kk ig kl km kn ik ko kp kq io kr du\" data-selectable-paragraph=\"\"><a class=\"bv iv\" href=\"https:\/\/developer.apple.com\/ios\/human-interface-guidelines\/overview\/design-principles\/\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\">Apple<\/a><\/h1>\n<p id=\"1df9\" class=\"pw-post-body-paragraph gt gu gv gw b gx iq gz ha hb ir hd he hf is hh hi hj it hl hm hn iu hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Aesthetic Integrity<br \/>\n<\/strong>Aesthetic integrity represents how well an app\u2019s appearance and behavior integrate with its function. For example, an app that helps people perform a serious task can keep them focused by using subtle, unobtrusive graphics, standard controls, and predictable behaviors. On the other hand, an immersive app, such as a game, can deliver a captivating appearance that promises fun and excitement, while encouraging discovery.<\/p>\n<p id=\"ddb8\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Consistency<\/strong><br \/>\nA consistent app implements familiar standards and paradigms by using system-provided interface elements, well-known icons, standard text styles, and uniform terminology. The app incorporates features and behaviors in ways people expect.<\/p>\n<p id=\"798f\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Direct Manipulation<\/strong><br \/>\nThe direct manipulation of onscreen content engages people and facilitates understanding. Users experience direct manipulation when they rotate the device or use gestures to affect onscreen content. Through direct manipulation, they can see the immediate, visible results of their actions.<\/p>\n<p id=\"6292\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Feedback<\/strong><br \/>\nFeedback acknowledges actions and shows results to keep people informed. The built-in iOS apps provide perceptible feedback in response to every user action. Interactive elements are highlighted briefly when tapped, progress indicators communicate the status of long-running operations, and animation and sound help clarify the results of actions.<\/p>\n<p id=\"d7cc\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Metaphors<\/strong><br \/>\nPeople learn more quickly when an app\u2019s virtual objects and actions are metaphors for familiar experiences \u2014 whether rooted in the real or digital world. Metaphors work well in iOS because people physically interact with the screen. They move views out of the way to expose content beneath. They drag and swipe content. They toggle switches, move sliders, and scroll through picker values. They even flick through pages of books and magazines.<\/p>\n<p id=\"8ca2\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">User Control<\/strong><br \/>\nThroughout iOS, people \u2014 not apps \u2014 are in control. An app can suggest a course of action or warn about dangerous consequences, but it\u2019s usually a mistake for the app to take over the decision-making. The best apps find the correct balance between enabling users and avoiding unwanted outcomes. An app can make people feel like they\u2019re in control by keeping interactive elements familiar and predictable, confirming destructive actions, and making it easy to cancel operations, even when they\u2019re already underway.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"n p di ku kv kw\" role=\"separator\"><\/div>\n<div class=\"gb gc gd ge gf\">\n<div class=\"n p\">\n<div class=\"ab ac ae af ag dh ai aj\">\n<figure class=\"ix iy iz ja jb gm ct cu paragraph-image\">\n<div class=\"gn go dr gp aj gq\" role=\"button\">\n<div class=\"ct cu ks\"><img loading=\"lazy\" decoding=\"async\" class=\"aj gr gs\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*nYyUvTFwwQAsjj2S58ac1A.gif\" alt=\"\" width=\"700\" height=\"154\" \/><\/div>\n<\/div>\n<\/figure>\n<h1 id=\"3553\" class=\"kd ht gv bp hu ke kf gz hy kg kh hd ic ki kj kk ig kl km kn ik ko kp kq io kr du\" data-selectable-paragraph=\"\"><a class=\"bv iv\" href=\"https:\/\/material.io\/guidelines\/#introduction-principles\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\">Google Material Design<\/a><\/h1>\n<p id=\"93e4\" class=\"pw-post-body-paragraph gt gu gv gw b gx iq gz ha hb ir hd he hf is hh hi hj it hl hm hn iu hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Material is the metaphor<br \/>\n<\/strong>A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the\u222bstudy of paper and ink, yet technologically advanced and open to imagination and magic.<\/p>\n<p id=\"d742\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\">Surfaces and edges of the material provide visual cues that are grounded in reality. The use of familiar tactile attributes helps users quickly understand affordances. Yet the flexibility of the material creates new affordances that supercede those in the physical world, without breaking the rules of physics.<\/p>\n<p id=\"2d89\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\">The fundamentals of light, surface, and movement are key to conveying how objects move, interact, and exist in space and in relation to each other. Realistic lighting shows seams, divides space, and indicates moving parts.<\/p>\n<p id=\"ee7a\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Bold, graphic, intentional<br \/>\n<\/strong>The foundational elements of print-based design \u2014 typography, grids, space, scale, color, and use of imagery \u2014 guide visual treatments. These elements do far more than please the eye. They create hierarchy, meaning, and focus. Deliberate color choices, edge-to-edge imagery, large-scale typography, and intentional white space create a bold and graphic interface that immerse the user in the experience.<br \/>\nAn emphasis on user actions makes core functionality immediately apparent and provides waypoints for the user.<\/p>\n<p id=\"9706\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Motion provides meaning<br \/>\n<\/strong>Motion respects and reinforces the user as the prime mover. Primary user actions are inflection points that initiate motion, transforming the whole design.<br \/>\nAll action takes place in a single environment. Objects are presented to the user without breaking the continuity of experience even as they transform and reorganize.<br \/>\nMotion is meaningful and appropriate, serving to focus attention and maintain continuity. Feedback is subtle yet clear. Transitions are ef\ufb01cient yet coherent.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"n p di ku kv kw\" role=\"separator\"><\/div>\n<div class=\"gb gc gd ge gf\">\n<div class=\"n p\">\n<div class=\"ab ac ae af ag dh ai aj\">\n<figure class=\"ix iy iz ja jb gm ct cu paragraph-image\">\n<div class=\"gn go dr gp aj gq\" role=\"button\">\n<div class=\"ct cu ks\"><img loading=\"lazy\" decoding=\"async\" class=\"aj gr gs\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*2isg1rY5gimcFb5r4mgLMg.gif\" alt=\"\" width=\"700\" height=\"160\" \/><\/div>\n<\/div>\n<\/figure>\n<h1 id=\"bce0\" class=\"kd ht gv bp hu ke kf gz hy kg kh hd ic ki kj kk ig kl km kn ik ko kp kq io kr du\" data-selectable-paragraph=\"\"><a class=\"bv iv\" href=\"https:\/\/www.google.ru\/url?sa=t&amp;rct=j&amp;q=&amp;esrc=s&amp;source=web&amp;cd=1&amp;ved=0ahUKEwiH4qL2h_7RAhXEF5oKHTUODrAQFggcMAA&amp;url=https%3A%2F%2Fwww.microsoft.com%2Fen-us%2Fdesign%2Fprinciples&amp;usg=AFQjCNH_3g0Ib4u3izhV6NVodNohr9nA4g&amp;sig2=YOGn3O0svJx5bcsXbhql4w&amp;cad=rja\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\">Microsoft<\/a><\/h1>\n<p id=\"f2e5\" class=\"pw-post-body-paragraph gt gu gv gw b gx iq gz ha hb ir hd he hf is hh hi hj it hl hm hn iu hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Keep it simple<br \/>\n<\/strong>We start with simplicity as the ultimate unifier. When design is intuitive, we just know. We can feel it. The result is an experience that\u2019s honest and timeless.<\/p>\n<p id=\"51c5\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Make it personal<br \/>\n<\/strong>Next, we challenge ourselves to create emotional connection with an individual person. We design for the ways people really live and think and act. The result is an experience that feels like it was created for one person.<\/p>\n<p id=\"e31a\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Think universal<br \/>\n<\/strong>We design to embrace the things that make us human. It\u2019s more far more than an attitude for making stuff \u2014 and into creating a world that makes lives better. The result is technology that\u2019s inclusive.<\/p>\n<p id=\"9d07\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Create delight<br \/>\n<\/strong>Our final principle is about energy within a structure. It\u2019s how you know the experience was made by a real person. The result is an experience that surprises and has a sense of place.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"n p di ku kv kw\" role=\"separator\"><\/div>\n<div class=\"gb gc gd ge gf\">\n<div class=\"n p\">\n<div class=\"ab ac ae af ag dh ai aj\">\n<figure class=\"ix iy iz ja jb gm ct cu paragraph-image\">\n<div class=\"gn go dr gp aj gq\" role=\"button\">\n<div class=\"ct cu ks\"><img loading=\"lazy\" decoding=\"async\" class=\"aj gr gs\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*_ww9DxBI9JeWuDIqf9j4_Q.gif\" alt=\"\" width=\"700\" height=\"166\" \/><\/div>\n<\/div>\n<\/figure>\n<h1 id=\"2c92\" class=\"kd ht gv bp hu ke kf gz hy kg kh hd ic ki kj kk ig kl km kn ik ko kp kq io kr du\" data-selectable-paragraph=\"\"><a class=\"bv iv\" href=\"https:\/\/medium.com\/@dustin\/thanks-for-writing-the-article-julie-8362fd235ae0#.h5e9d8xws\" rel=\"noopener\">Medium<\/a><\/h1>\n<p id=\"0024\" class=\"pw-post-body-paragraph gt gu gv gw b gx iq gz ha hb ir hd he hf is hh hi hj it hl hm hn iu hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Direction over Choice<br \/>\n<\/strong>This principle was often referred to while we were designing the Medium editor. We purposely traded layout, type, and color choices for guidance and direction. Direction was more appropriate for the product because we wanted people to focus on writing, and not get distracted by choice.<\/p>\n<p id=\"eb4e\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Appropriate over Consistent<br \/>\n<\/strong>This might seem controversial, but when applied across devices, its purpose is clear. We were willing to break consistency if it was more appropriate for the OS, device, or context.<\/p>\n<p id=\"98e8\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Evolving over Finalized<br \/>\n<\/strong>This is exemplified in the ability to share Medium drafts, write responses, and leave notes. The content on Medium should be antifragile, improving with use and evolving overtime. We did not want to design printed books for the internet.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"n p di ku kv kw\" role=\"separator\"><\/div>\n<div class=\"gb gc gd ge gf\">\n<div class=\"n p\">\n<div class=\"ab ac ae af ag dh ai aj\">\n<figure class=\"ix iy iz ja jb gm ct cu paragraph-image\">\n<div class=\"gn go dr gp aj gq\" role=\"button\">\n<div class=\"ct cu ks\"><img loading=\"lazy\" decoding=\"async\" class=\"aj gr gs\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*6EIxwoYI7Y7VoH7M2L8Jbg.gif\" alt=\"\" width=\"700\" height=\"160\" \/><\/div>\n<\/div>\n<\/figure>\n<h1 id=\"73bb\" class=\"kd ht gv bp hu ke kf gz hy kg kh hd ic ki kj kk ig kl km kn ik ko kp kq io kr du\" data-selectable-paragraph=\"\"><a class=\"bv iv\" href=\"https:\/\/people-mozilla.org\/~madhava\/FDV\/\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\">Firefox Design Values<\/a><\/h1>\n<p id=\"ac92\" class=\"pw-post-body-paragraph gt gu gv gw b gx iq gz ha hb ir hd he hf is hh hi hj it hl hm hn iu hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Takes care of you<br \/>\n<\/strong>Firefox champions you \u2014 your security, privacy, and the quality of your online life. It makes sensible decisions for you that respect your time, data, and attention.<\/p>\n<ul class=\"\">\n<li id=\"a6f1\" class=\"gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">user-sovereignty<\/li>\n<li id=\"711b\" class=\"gt gu gv gw b gx jy gz ha hb jz hd he hf ka hh hi hj kb hl hm hn kc hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">default to privacy<\/li>\n<li id=\"5bd4\" class=\"gt gu gv gw b gx jy gz ha hb jz hd he hf ka hh hi hj kb hl hm hn kc hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">no surprises<\/li>\n<li id=\"f4da\" class=\"gt gu gv gw b gx jy gz ha hb jz hd he hf ka hh hi hj kb hl hm hn kc hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">actionable advice<\/li>\n<\/ul>\n<p id=\"4f06\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">You help make it<br \/>\n<\/strong>Firefox is crafted to have the best possible user-experience, but it\u2019s only a perfect fit once it\u2019s in your hands and can make it your own.<\/p>\n<ul class=\"\">\n<li id=\"367b\" class=\"gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">research gives a voice to our non-core community<\/li>\n<li id=\"2795\" class=\"gt gu gv gw b gx jy gz ha hb jz hd he hf ka hh hi hj kb hl hm hn kc hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">start people with smart defaults<\/li>\n<li id=\"00f2\" class=\"gt gu gv gw b gx jy gz ha hb jz hd he hf ka hh hi hj kb hl hm hn kc hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">implicit as well as explicit customization<\/li>\n<li id=\"0c37\" class=\"gt gu gv gw b gx jy gz ha hb jz hd he hf ka hh hi hj kb hl hm hn kc hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">invite people to be more than users<\/li>\n<\/ul>\n<p id=\"5da5\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Plays well with others<br \/>\n<\/strong>Firefox is part of the community of products you choose because they\u2019re great, not because they\u2019re the defaults. In that s\u0451pirit, Firefox never locks you into particular services or providers. Instead, it gives you choice and independence (along with great suggestions) so you can have the best possible experience.<\/p>\n<ul class=\"\">\n<li id=\"90b0\" class=\"gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">user control and choice<\/li>\n<li id=\"3574\" class=\"gt gu gv gw b gx jy gz ha hb jz hd he hf ka hh hi hj kb hl hm hn kc hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">simple to use the services you choose<\/li>\n<li id=\"14f5\" class=\"gt gu gv gw b gx jy gz ha hb jz hd he hf ka hh hi hj kb hl hm hn kc hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">suggest ways to get the most out of the web<\/li>\n<\/ul>\n<p id=\"b177\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Exuberant<br \/>\n<\/strong>Where other browsers might be plain and minimal, or sleek and impersonal, Firefox is human, fun, whimsical, and joyful. We all love the web and so does Firefox.<\/p>\n<ul class=\"\">\n<li id=\"1fa4\" class=\"gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">feels like there is a person at the other end<\/li>\n<li id=\"45c8\" class=\"gt gu gv gw b gx jy gz ha hb jz hd he hf ka hh hi hj kb hl hm hn kc hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">fun tools are easier to use<\/li>\n<li id=\"caa8\" class=\"gt gu gv gw b gx jy gz ha hb jz hd he hf ka hh hi hj kb hl hm hn kc hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">humour and whimsy<\/li>\n<li id=\"9998\" class=\"gt gu gv gw b gx jy gz ha hb jz hd he hf ka hh hi hj kb hl hm hn kc hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">have a point of view<\/li>\n<\/ul>\n<p id=\"f7a0\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Finely crafted<br \/>\n<\/strong>Firefox is made by people who care about the details. A beautiful product is a pleasure to use and feels easy and clear. This only comes with craft and attention to detail.<\/p>\n<ul class=\"\">\n<li id=\"e40c\" class=\"gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">see also our visual design guidelines<\/li>\n<li id=\"6719\" class=\"gt gu gv gw b gx jy gz ha hb jz hd he hf ka hh hi hj kb hl hm hn kc hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">continuity of look and feel across platforms<\/li>\n<li id=\"ea7c\" class=\"gt gu gv gw b gx jy gz ha hb jz hd he hf ka hh hi hj kb hl hm hn kc hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">perceivable quality is vital<\/li>\n<\/ul>\n<p id=\"47dd\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Global<br \/>\n<\/strong>Firefox is used and made by people all around the world. It\u2019s not just translated \u2014 it\u2019s designed for the whole world, place by place. While certain activities are universal, there\u2019s a real diversity of use and need across the globe, and Firefox cares about these differences.<\/p>\n<ul class=\"\">\n<li id=\"87d4\" class=\"gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">global means local and local and local<\/li>\n<\/ul>\n<p id=\"5c5c\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Balances power and simplicity<br \/>\n<\/strong>Firefox is simple and easy to use, clean and straightforward in its design. But simplicity is a means, not the end \u2014 the end is understanding and user-agency.<\/p>\n<ul class=\"\">\n<li id=\"1d8b\" class=\"gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">80\/20\/2: default to surface minimalism and easy access to the rest<\/li>\n<li id=\"ef1f\" class=\"gt gu gv gw b gx jy gz ha hb jz hd he hf ka hh hi hj kb hl hm hn kc hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">user-agency and understanding, not just less<\/li>\n<\/ul>\n<p id=\"a1eb\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Makes sense of the web<br \/>\n<\/strong>The web is huge and hard to comprehend. Firefox helps make sense of it by focusing on your real human goals and activities and giving you the tools you need to accomplish your ends.<\/p>\n<ul class=\"\">\n<li id=\"35e1\" class=\"gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">focus on real human tasks and contexts<\/li>\n<li id=\"94ee\" class=\"gt gu gv gw b gx jy gz ha hb jz hd he hf ka hh hi hj kb hl hm hn kc hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">many real tasks involve a browser and other tools<\/li>\n<li id=\"19d8\" class=\"gt gu gv gw b gx jy gz ha hb jz hd he hf ka hh hi hj kb hl hm hn kc hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">quick access to your stuff and web<\/li>\n<li id=\"33e6\" class=\"gt gu gv gw b gx jy gz ha hb jz hd he hf ka hh hi hj kb hl hm hn kc hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">no jargon<\/li>\n<\/ul>\n<p id=\"6ef6\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">High user-performance<br \/>\n<\/strong>Speed is still the most important part of a good browser experience, but on top of benchmarkable technical performance, the browser must feel viscerally responsive.<\/p>\n<ul class=\"\">\n<li id=\"2dc6\" class=\"gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">performance is objective, but responsiveness is subjective<\/li>\n<li id=\"9255\" class=\"gt gu gv gw b gx jy gz ha hb jz hd he hf ka hh hi hj kb hl hm hn kc hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">a happy user performs better<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"n p di ku kv kw\" role=\"separator\"><\/div>\n<div class=\"gb gc gd ge gf\">\n<div class=\"n p\">\n<div class=\"ab ac ae af ag dh ai aj\">\n<figure class=\"ix iy iz ja jb gm ct cu paragraph-image\">\n<div class=\"gn go dr gp aj gq\" role=\"button\">\n<div class=\"ct cu ks\"><img loading=\"lazy\" decoding=\"async\" class=\"aj gr gs\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*jV-stFJ91XQfBzvaYBCKJw.gif\" alt=\"\" width=\"700\" height=\"160\" \/><\/div>\n<\/div>\n<\/figure>\n<h1 id=\"61a7\" class=\"kd ht gv bp hu ke kf gz hy kg kh hd ic ki kj kk ig kl km kn ik ko kp kq io kr du\" data-selectable-paragraph=\"\"><a class=\"bv iv\" href=\"https:\/\/medium.com\/salesforce-ux\/defining-principles-to-drive-design-decisions-b647b68fb057#.i7e3yox8p\" rel=\"noopener\">Salesforce<\/a><\/h1>\n<p id=\"2afd\" class=\"pw-post-body-paragraph gt gu gv gw b gx iq gz ha hb ir hd he hf is hh hi hj it hl hm hn iu hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Clarity<br \/>\n<\/strong>Eliminate ambiguity. Enable people to see, understand, and act with confidence.<\/p>\n<p id=\"b528\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Efficiency<br \/>\n<\/strong>Streamline and optimize workflows. Intelligently anticipate needs to help people work better, smarter, and faster.<\/p>\n<p id=\"2709\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Consistency<br \/>\n<\/strong>Create familiarity and strengthen intuition by applying the same solution to the same problem.<\/p>\n<p id=\"4625\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Beauty<br \/>\n<\/strong>Demonstrate respect for people\u2019s time and attention through thoughtful and elegant craftsmanship.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"n p di ku kv kw\" role=\"separator\"><\/div>\n<div class=\"gb gc gd ge gf\">\n<div class=\"n p\">\n<div class=\"ab ac ae af ag dh ai aj\">\n<figure class=\"ix iy iz ja jb gm ct cu paragraph-image\">\n<div class=\"gn go dr gp aj gq\" role=\"button\">\n<div class=\"ct cu ks\"><img loading=\"lazy\" decoding=\"async\" class=\"aj gr gs\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*J1uRg2nxhzNQenObcVk0rA.gif\" alt=\"\" width=\"700\" height=\"156\" \/><\/div>\n<\/div>\n<\/figure>\n<h1 id=\"03ab\" class=\"kd ht gv bp hu ke kf gz hy kg kh hd ic ki kj kk ig kl km kn ik ko kp kq io kr du\" data-selectable-paragraph=\"\"><a class=\"bv iv\" href=\"http:\/\/www.ibm.com\/design\/language\/experience\/\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\">IBM UX<\/a><\/h1>\n<p id=\"3e55\" class=\"pw-post-body-paragraph gt gu gv gw b gx iq gz ha hb ir hd he hf is hh hi hj it hl hm hn iu hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Discover, Try and Buy<br \/>\n<\/strong>Meet users where they are. Show, don\u2019t tell. Create a seamless transition from \u201ctry\u201d to \u201cbuy.\u201d<\/p>\n<ul class=\"\">\n<li id=\"7771\" class=\"gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">Discover<br \/>\nOne ideal discovery experience occurs when people feel they found the answer for themselves.<\/li>\n<li id=\"c3bc\" class=\"gt gu gv gw b gx jy gz ha hb jz hd he hf ka hh hi hj kb hl hm hn kc hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">Try<br \/>\nTrying out a product should be as engaging as taking a test drive in your first car.<\/li>\n<li id=\"6ea8\" class=\"gt gu gv gw b gx jy gz ha hb jz hd he hf ka hh hi hj kb hl hm hn kc hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">Buy<br \/>\nPurchasing a software-based product or digital service should be as simple and straightforward as buying a coffee. Steps and details about what goes where should always be obvious. Give users a sense of excitement once their purchase is complete.<\/li>\n<\/ul>\n<p id=\"2ce1\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Get Started<br \/>\n<\/strong>Invite users in and show them what they can do. Initial experiences create lasting impressions.<\/p>\n<ul class=\"\">\n<li id=\"ea9d\" class=\"gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">People are quick to form opinions when introduced to something new, especially if it is something we expect will improve their lives.<\/li>\n<li id=\"262f\" class=\"gt gu gv gw b gx jy gz ha hb jz hd he hf ka hh hi hj kb hl hm hn kc hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">Get users to their work fast and show them personally relevant ways to get value from your product. Charm them with unexpected moments to show them you thought of everything, just for them. Never underestimate the little things; users are instantly gratified when you save them time, attention, hassle or even space on their desk.<\/li>\n<li id=\"48b3\" class=\"gt gu gv gw b gx jy gz ha hb jz hd he hf ka hh hi hj kb hl hm hn kc hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">First use isn\u2019t finished until personal or business value is delivered.<\/li>\n<\/ul>\n<p id=\"f89f\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Every Day Use<br \/>\n<\/strong>Users should get personal value every time they interact with your product.<\/p>\n<p id=\"cfb2\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\">Whether it\u2019s every day or once a year, users should always feel in control, able to pick up right where they left off. Users should immediately understand the usefulness of your product. The system should convey its conceptual model so that your users know what to expect and can perform necessary actions or derive insights.<\/p>\n<ul class=\"\">\n<li id=\"3be9\" class=\"gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">Defer to the content to help users understand the path to reaching their goals.<\/li>\n<li id=\"84f0\" class=\"gt gu gv gw b gx jy gz ha hb jz hd he hf ka hh hi hj kb hl hm hn kc hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">Allow them to personalize the product to better fit their needs.<\/li>\n<li id=\"381a\" class=\"gt gu gv gw b gx jy gz ha hb jz hd he hf ka hh hi hj kb hl hm hn kc hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">Provide a forgiving environment where mistakes are easily reversible.<\/li>\n<li id=\"d070\" class=\"gt gu gv gw b gx jy gz ha hb jz hd he hf ka hh hi hj kb hl hm hn kc hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">Keep them motivated by ensuring that the right actions and tools are readily present.<\/li>\n<li id=\"5f97\" class=\"gt gu gv gw b gx jy gz ha hb jz hd he hf ka hh hi hj kb hl hm hn kc hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">When they\u2019re done, give users a sense of accomplishment and help them feel proud of their work.<\/li>\n<\/ul>\n<p id=\"a420\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Manage and Upgrade<br \/>\n<\/strong>Upkeep and receiving the newest improvements should be as elegant and predictable as using the product every day.<\/p>\n<ul class=\"\">\n<li id=\"7b35\" class=\"gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">Manage<br \/>\nA product that\u2019s easy to manage invites frequent use. A user who doesn\u2019t have to think deeply about managing how well a product works is a happy user. Whether it\u2019s an administrator who\u2019s responsible for an entire organization or an end user getting the job done, designing management tasks to be obvious makes for positive experiences. Remember, with either user group, the expectation is \u201cdon\u2019t trouble me with management.\u201d<\/li>\n<li id=\"cec4\" class=\"gt gu gv gw b gx jy gz ha hb jz hd he hf ka hh hi hj kb hl hm hn kc hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">Upgrade<br \/>\nMinimize user involvement and disruption in the upgrade process.<br \/>\nWhen introducing significant user experience changes, don\u2019t leave your users guessing at what\u2019s new or what has been removed. Notify them that a change is happening or has happened, what occurred and how it affects them.<\/li>\n<\/ul>\n<p id=\"c383\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Get Support<br \/>\n<\/strong>Support users in the ways they want to get help. Expand their knowledge and encourage them to share it.<\/p>\n<p id=\"089e\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\">The iconic \u201csupport\u201d experience exists across all five experiences. Support is proactive, engaging and comes in many forms:<\/p>\n<ul class=\"\">\n<li id=\"b870\" class=\"gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">On user-desired forums (for example, web search results and sites such as TechCrunch)<\/li>\n<li id=\"207d\" class=\"gt gu gv gw b gx jy gz ha hb jz hd he hf ka hh hi hj kb hl hm hn kc hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">As nurturing during Discover, Try and Buy or Getting Started<\/li>\n<li id=\"c54f\" class=\"gt gu gv gw b gx jy gz ha hb jz hd he hf ka hh hi hj kb hl hm hn kc hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">As easily accessible during Everyday Use<\/li>\n<li id=\"2a02\" class=\"gt gu gv gw b gx jy gz ha hb jz hd he hf ka hh hi hj kb hl hm hn kc hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">As command line interface help for Leverage and Extend<\/li>\n<\/ul>\n<p id=\"b16b\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\">When users look for support, help them find what they need easily. Know your users\u2019 habits and equip them with tools that are flexible and ready-at-hand.<\/p>\n<p id=\"7960\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\">Guide them with thoughtful interactions and content so they can learn as they go, understand how to move forward, and acquire the necessary skills to succeed. Where possible, help users avoid mistakes rather than waiting for an error to occur.<\/p>\n<p id=\"cefd\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\">When your product or service breaks or becomes unavailable, provide users with factual status that will help them understand how and when they will regain use. Determine the best way to make these notifications meaningful (that is, \u201cseen\u201d) for your users, across all experience contexts.<\/p>\n<p id=\"a2c6\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\">Support experiences should help people feel knowledgeable. Enlighten users to become experts. Use plain language that is appropriate for your target audience. Give them opportunities to provide feedback and share what they have learned. Users often trust advice from peers, so facilitate community learning when possible.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"n p di ku kv kw\" role=\"separator\"><\/div>\n<div class=\"gb gc gd ge gf\">\n<div class=\"n p\">\n<div class=\"ab ac ae af ag dh ai aj\">\n<figure class=\"ix iy iz ja jb gm ct cu paragraph-image\">\n<div class=\"gn go dr gp aj gq\" role=\"button\">\n<div class=\"ct cu ks\"><img loading=\"lazy\" decoding=\"async\" class=\"aj gr gs\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*oY3kiz236H2rqvT3_gN4cA.gif\" alt=\"\" width=\"700\" height=\"160\" \/><\/div>\n<\/div>\n<\/figure>\n<h1 id=\"bba7\" class=\"kd ht gv bp hu ke kf gz hy kg kh hd ic ki kj kk ig kl km kn ik ko kp kq io kr du\" data-selectable-paragraph=\"\"><a class=\"bv iv\" href=\"http:\/\/www.ibm.com\/design\/language\/experience\/\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\">Bing<\/a><\/h1>\n<ul class=\"\">\n<li id=\"8c2e\" class=\"gt gu gv gw b gx iq gz ha hb ir hd he hf is hh hi hj it hl hm hn iu hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">Design for explorers<\/li>\n<li id=\"4836\" class=\"gt gu gv gw b gx jy gz ha hb jz hd he hf ka hh hi hj kb hl hm hn kc hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">Delight and surprise our users<\/li>\n<li id=\"1e4a\" class=\"gt gu gv gw b gx jy gz ha hb jz hd he hf ka hh hi hj kb hl hm hn kc hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">Earn Trust<\/li>\n<li id=\"cd83\" class=\"gt gu gv gw b gx jy gz ha hb jz hd he hf ka hh hi hj kb hl hm hn kc hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">Be the brand<\/li>\n<li id=\"9789\" class=\"gt gu gv gw b gx jy gz ha hb jz hd he hf ka hh hi hj kb hl hm hn kc hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">Make money<\/li>\n<li id=\"6664\" class=\"gt gu gv gw b gx jy gz ha hb jz hd he hf ka hh hi hj kb hl hm hn kc hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">Showcase our best<\/li>\n<li id=\"405e\" class=\"gt gu gv gw b gx jy gz ha hb jz hd he hf ka hh hi hj kb hl hm hn kc hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">Organize the page by relevance<\/li>\n<li id=\"adf9\" class=\"gt gu gv gw b gx jy gz ha hb jz hd he hf ka hh hi hj kb hl hm hn kc hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">Respect the need for speed<\/li>\n<li id=\"ff1b\" class=\"gt gu gv gw b gx jy gz ha hb jz hd he hf ka hh hi hj kb hl hm hn kc hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">Give just enough and offer more<\/li>\n<li id=\"8bf2\" class=\"gt gu gv gw b gx jy gz ha hb jz hd he hf ka hh hi hj kb hl hm hn kc hp hq hr jv jw jx du\" data-selectable-paragraph=\"\">Present a seamless experience<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"n p di ku kv kw\" role=\"separator\"><\/div>\n<div class=\"gb gc gd ge gf\">\n<div class=\"n p\">\n<div class=\"ab ac ae af ag dh ai aj\">\n<figure class=\"ix iy iz ja jb gm ct cu paragraph-image\">\n<div class=\"gn go dr gp aj gq\" role=\"button\">\n<div class=\"ct cu ks\"><img loading=\"lazy\" decoding=\"async\" class=\"aj gr gs\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*aBG9zDQnL3Rsy2Dlb8PIRg.gif\" alt=\"\" width=\"700\" height=\"156\" \/><\/div>\n<\/div>\n<\/figure>\n<h1 id=\"f8cb\" class=\"kd ht gv bp hu ke kf gz hy kg kh hd ic ki kj kk ig kl km kn ik ko kp kq io kr du\" data-selectable-paragraph=\"\"><a class=\"bv iv\" href=\"http:\/\/www.bbc.co.uk\/gel\/philosophy\/design-philosophy\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\">BBC GEL<\/a><\/h1>\n<p id=\"e5ba\" class=\"pw-post-body-paragraph gt gu gv gw b gx iq gz ha hb ir hd he hf is hh hi hj it hl hm hn iu hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Universal<br \/>\n<\/strong>Our messages are clear and are communicated through simple, useful and intuitive interfaces. Our services are inherently open and accessible.<\/p>\n<p id=\"9f22\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Compelling<br \/>\n<\/strong>Our voice ranges from serious and authoritative through to witty and entertaining. We sound authentic and relevant, warm and human. We engage our audiences with compelling storytelling.<\/p>\n<p id=\"7af2\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Authentic<br \/>\n<\/strong>We value the familiarity and trust placed in us. We acknowledge the BBC\u2019s heritage of iconic design and broadcasting history with subtle references.<\/p>\n<p id=\"f335\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Pioneering<br \/>\n<\/strong>We pioneer design innovations that surprise and delight. We introduce the unexpected but always take our audiences with us.<\/p>\n<p id=\"3148\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Current<br \/>\n<\/strong>We curate a timeline of Britain; reflecting the present as it happens and adding relevant contextual links with the past.<\/p>\n<p id=\"4f17\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Distinctive<br \/>\n<\/strong>We stand out by looking to tomorrow instead of simply referencing the design trends of today. We strike a balance between cookie-cutter design and beautiful anarchy.<\/p>\n<p id=\"9804\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Joined-up<br \/>\n<\/strong>All our services and platforms are one connected whole which deliver experiences sensitive to their context of use. We enable coherent journeys both within and outside familiar paths. We connect our audiences where there are shared interests and experiences.<\/p>\n<p id=\"3f62\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Local \/ Global<br \/>\n<\/strong>We need to speak to everyone but we recognise the individual. Our message is scalable and localisable.<\/p>\n<p id=\"3ab4\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Modern British<br \/>\n<\/strong>Our services are woven into the fabric of everyday life in the UK. They embrace a modern British design aesthetic that extends outside national boundaries. Our character is vibrant and sometimes quirky.<\/p>\n<p id=\"4494\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Best<br \/>\n<\/strong>Last but not least we put quality first.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"n p di ku kv kw\" role=\"separator\"><\/div>\n<div class=\"gb gc gd ge gf\">\n<div class=\"n p\">\n<div class=\"ab ac ae af ag dh ai aj\">\n<figure class=\"ix iy iz ja jb gm ct cu paragraph-image\">\n<div class=\"gn go dr gp aj gq\" role=\"button\">\n<div class=\"ct cu ks\"><img loading=\"lazy\" decoding=\"async\" class=\"aj gr gs\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*qgitfkONhVX5Vhbe4mENKQ.gif\" alt=\"\" width=\"700\" height=\"155\" \/><\/div>\n<\/div>\n<\/figure>\n<h1 id=\"226c\" class=\"kd ht gv bp hu ke kf gz hy kg kh hd ic ki kj kk ig kl km kn ik ko kp kq io kr du\" data-selectable-paragraph=\"\"><a class=\"bv iv\" href=\"https:\/\/medium.com\/@suprb\/redesigning-pinterest-block-by-block-6040a00d80a3#.v2xgv1fl2\" rel=\"noopener\"><strong class=\"cb\">Pinterest<\/strong><\/a><\/h1>\n<p id=\"a37b\" class=\"pw-post-body-paragraph gt gu gv gw b gx iq gz ha hb ir hd he hf is hh hi hj it hl hm hn iu hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Lucid<\/strong><\/p>\n<ul class=\"\">\n<li id=\"d4f2\" class=\"gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr jv jw jx du\" data-selectable-paragraph=\"\"><em class=\"ju\">It\u2019s intuitive, not learned<\/em><br \/>\nYou understand how things work without any direct explanation.<\/li>\n<li id=\"ab27\" class=\"gt gu gv gw b gx jy gz ha hb jz hd he hf ka hh hi hj kb hl hm hn kc hp hq hr jv jw jx du\" data-selectable-paragraph=\"\"><em class=\"ju\">It makes the user feel powerful<\/em><br \/>\nNothing makes you feel uncomfortable or like you can\u2019t trust the system. The system provides you with the right components and asks you what to do next.<\/li>\n<li id=\"2493\" class=\"gt gu gv gw b gx jy gz ha hb jz hd he hf ka hh hi hj kb hl hm hn kc hp hq hr jv jw jx du\" data-selectable-paragraph=\"\"><em class=\"ju\">It makes the content taste better<br \/>\n<\/em>The framework is totally seamless and hidden. You don\u2019t notice it until you interact with it. You get to decide what you want it to be, instead of us forcing it on you.<\/li>\n<\/ul>\n<p id=\"9a62\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Animated<\/strong><\/p>\n<ul class=\"\">\n<li id=\"3e3b\" class=\"gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr jv jw jx du\" data-selectable-paragraph=\"\"><em class=\"ju\">It\u2019s colorful<\/em><br \/>\nThe personality is bold and stands out.<\/li>\n<li id=\"b9f1\" class=\"gt gu gv gw b gx jy gz ha hb jz hd he hf ka hh hi hj kb hl hm hn kc hp hq hr jv jw jx du\" data-selectable-paragraph=\"\"><em class=\"ju\">It\u2019s visually responsive<\/em><br \/>\nThe experience interactions in a physical way.<\/li>\n<li id=\"31f3\" class=\"gt gu gv gw b gx jy gz ha hb jz hd he hf ka hh hi hj kb hl hm hn kc hp hq hr jv jw jx du\" data-selectable-paragraph=\"\"><em class=\"ju\">It\u2019s unexpected<br \/>\n<\/em>The experience is playful and fun, but never overwhelming.<\/li>\n<\/ul>\n<p id=\"812d\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Unbreakable<\/strong><\/p>\n<ul class=\"\">\n<li id=\"d436\" class=\"gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr jv jw jx du\" data-selectable-paragraph=\"\"><em class=\"ju\">It\u2019s built for exploration<\/em><strong class=\"gw jq\"><em class=\"ju\"><br \/>\n<\/em><\/strong>Just like a children\u2019s toy, you want to try it out just to see what will happen. The more you investigate, the faster you learn and the more you get in return.<\/li>\n<li id=\"98ff\" class=\"gt gu gv gw b gx jy gz ha hb jz hd he hf ka hh hi hj kb hl hm hn kc hp hq hr jv jw jx du\" data-selectable-paragraph=\"\"><em class=\"ju\">It\u2019s impossible to mis-tap<\/em><strong class=\"gw jq\"><em class=\"ju\"><br \/>\n<\/em><\/strong>Everything is designed to help you navigate easily and do exactly what you had in mind.<\/li>\n<li id=\"f948\" class=\"gt gu gv gw b gx jy gz ha hb jz hd he hf ka hh hi hj kb hl hm hn kc hp hq hr jv jw jx du\" data-selectable-paragraph=\"\"><em class=\"ju\">It\u2019s reversible<\/em><strong class=\"gw jq\"><em class=\"ju\"><br \/>\n<\/em><\/strong>If you accidentally do something that doesn\u2019t produce the results you were looking for, it\u2019s obvious how to correct it.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"n p di ku kv kw\" role=\"separator\"><\/div>\n<div class=\"gb gc gd ge gf\">\n<div class=\"n p\">\n<div class=\"ab ac ae af ag dh ai aj\">\n<figure class=\"ix iy iz ja jb gm ct cu paragraph-image\">\n<div class=\"gn go dr gp aj gq\" role=\"button\">\n<div class=\"ct cu ks\"><img loading=\"lazy\" decoding=\"async\" class=\"aj gr gs\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*xnF6U3zhuOF9qH6gu_2HpQ.gif\" alt=\"\" width=\"700\" height=\"165\" \/><\/div>\n<\/div>\n<\/figure>\n<h1 id=\"518a\" class=\"kd ht gv bp hu ke kf gz hy kg kh hd ic ki kj kk ig kl km kn ik ko kp kq io kr du\" data-selectable-paragraph=\"\"><a class=\"bv iv\" href=\"http:\/\/www.fueltravel.com\/blog\/tips-from-lyft-let-your-brand-drive-your-ux-decisions\/\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\">Lyft\u00a0<strong class=\"cb\">Design Principles<\/strong><\/a><\/h1>\n<p id=\"048e\" class=\"pw-post-body-paragraph gt gu gv gw b gx iq gz ha hb ir hd he hf is hh hi hj it hl hm hn iu hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Nail the basics<\/strong><br \/>\nClear choice and context<br \/>\n<strong class=\"gw jq\">Build confidence<\/strong><br \/>\nConsistency and transparent<br \/>\n<strong class=\"gw jq\">Be unique<\/strong><br \/>\nOwn-able and delightful<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"n p di ku kv kw\" role=\"separator\"><\/div>\n<div class=\"gb gc gd ge gf\">\n<div class=\"n p\">\n<div class=\"ab ac ae af ag dh ai aj\">\n<figure class=\"ix iy iz ja jb gm ct cu paragraph-image\">\n<div class=\"gn go dr gp aj gq\" role=\"button\">\n<div class=\"ct cu ks\"><img loading=\"lazy\" decoding=\"async\" class=\"aj gr gs\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*VHnY-ykaxPUfAEqrci-n6g.gif\" alt=\"\" width=\"700\" height=\"155\" \/><\/div>\n<\/div>\n<\/figure>\n<h1 id=\"f20c\" class=\"kd ht gv bp hu ke kf gz hy kg kh hd ic ki kj kk ig kl km kn ik ko kp kq io kr du\" data-selectable-paragraph=\"\"><a class=\"bv iv\" href=\"https:\/\/medium.com\/@sambrown\/designing-the-new-foursquare-8f8788d366f0#.fh81og5d1\" rel=\"noopener\">Foursquare<\/a><\/h1>\n<p id=\"deef\" class=\"pw-post-body-paragraph gt gu gv gw b gx iq gz ha hb ir hd he hf is hh hi hj it hl hm hn iu hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Individual recommendations and experience<br \/>\n<\/strong>There\u2019s no reason why we should all get the same recommendations when looking for a place to eat, drink or shop. Getting a one-size-fits-all list of places may have been innovative in 2006, but it feels downright antiquated now. Our tastes are all different, so why should we all see the same results?<\/p>\n<p id=\"5ba3\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Continuous data collection and situational usage<br \/>\n<\/strong>Our phones should learn about us \u2014 our tastes, our social connections, and our preferences. And, using what they know, they should help us better explore the world around us. If you love vintage clothing, it should tell you that there is a hidden gem nearby. If you\u2019re in a new city, it should tell you that your friend Katy highly recommends this hole-in-the-wall restaurant downtown. If you crave spicy food, it should advise which dishes you should order when you sit down for dinner.<\/p>\n<p id=\"84e9\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Playful visual language<br \/>\n<\/strong>Involving into city exploration with an entertaining, easy, playful visual experience: bold icons, bright and deep colours, logo as a combination of superhero emblem &amp; map pin.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"n p di ku kv kw\" role=\"separator\"><\/div>\n<div class=\"gb gc gd ge gf\">\n<div class=\"n p\">\n<div class=\"ab ac ae af ag dh ai aj\">\n<figure class=\"ix iy iz ja jb gm ct cu paragraph-image\">\n<div class=\"gn go dr gp aj gq\" role=\"button\">\n<div class=\"ct cu ks\"><img loading=\"lazy\" decoding=\"async\" class=\"aj gr gs\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*Sp8eDx85hFUytKZPBuTumg.gif\" alt=\"\" width=\"700\" height=\"160\" \/><\/div>\n<\/div>\n<\/figure>\n<h1 id=\"1586\" class=\"kd ht gv bp hu ke kf gz hy kg kh hd ic ki kj kk ig kl km kn ik ko kp kq io kr du\" data-selectable-paragraph=\"\"><a class=\"bv iv\" href=\"https:\/\/blog.asana.com\/2013\/10\/design-principles\/\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\"><strong class=\"cb\">Asana\u2019s Design Principles<\/strong><\/a><\/h1>\n<p id=\"9f19\" class=\"pw-post-body-paragraph gt gu gv gw b gx iq gz ha hb ir hd he hf is hh hi hj it hl hm hn iu hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Allow users to focus on their work without interference.<\/strong><br \/>\nA user\u2019s focus should be in their control, only distract users with changes that are personally relevant.<\/p>\n<p id=\"6602\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Increase confidence through clarity.<\/strong><br \/>\nWithin the application, and more broadly within teams, it is unambiguous what is happening and why.<\/p>\n<p id=\"f324\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Foster productive and emotionally satisfying interpersonal dynamics.<\/strong><br \/>\nUsers feel like they are part of a team, where they can count on each other to do their part, and feel like they\u2019re moving forward towards a common goal.<\/p>\n<p id=\"724c\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Design for fast, effortless, and intentional interactions.<\/strong><br \/>\nSimple and common tasks should be frictionless and obvious; complex tasks should feel efficient and delightful. But, speed should not lead to inaccuracies.<\/p>\n<p id=\"a374\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Empower everyone through progressive discoverability.<\/strong><br \/>\nEveryone at all levels of experience with Asana should feel like they know how to use the product, regardless of how many features they use.<\/p>\n<p id=\"3b71\" class=\"pw-post-body-paragraph gt gu gv gw b gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr gb du\" data-selectable-paragraph=\"\"><strong class=\"gw jq\">Be consistent and standard, and innovate when it\u2019s worth it.<\/strong><br \/>\nUsers should feel like Asana is familiar yet modern.<\/p>\n<p>Sources: <a href=\"https:\/\/medium.muz.li\/design-principles-behind-great-products-6ef13cd74ccf\">Design Principles Behind Great Products | by Anton Badashov | Muzli &#8211; Design Inspiration<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>The range of principles If you try to google \u201cDesign Principles\u201d you most likely run into some basic rules of graphic design: proximity, balance, contrast, space, etc. Things that good designers usually familiar with, or, most likely, know inside out. The next huge part is principles of a rational design process. It\u2019s a set of [&hellip;]<\/p>\n","protected":false},"author":41,"featured_media":508,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-507","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles"],"_links":{"self":[{"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/posts\/507"}],"collection":[{"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/comments?post=507"}],"version-history":[{"count":0,"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/posts\/507\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/media\/508"}],"wp:attachment":[{"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/media?parent=507"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/categories?post=507"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/tags?post=507"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}