no Cell shape and orientation control galvanotactic accuracy By pubs.rsc.org Published On :: Soft Matter, 2024, Advance ArticleDOI: 10.1039/D4SM00952E, PaperIfunanya Nwogbaga, Brian A. CamleyWe study the physical factors that control the accuracy with which elongated cells can sense the direction of an electric field, exploring whether cells are more accurate sensors when oriented parallel to the field or perpendicular to it.To cite this article before page numbers are assigned, use the DOI form of citation above.The content of this RSS Feed (c) The Royal Society of Chemistry Full Article
no Retraction: Self-assembled organic nanotubes embedding hydrophobic molecules within solid bilayer membranes By pubs.rsc.org Published On :: Soft Matter, 2024, Advance ArticleDOI: 10.1039/D4SM90171A, Retraction Open Access   This article is licensed under a Creative Commons Attribution 3.0 Unported Licence.Naohiro Kameta, Masumi Asakawa, Mitsutoshi Masuda, Toshimi ShimizuTo cite this article before page numbers are assigned, use the DOI form of citation above.The content of this RSS Feed (c) The Royal Society of Chemistry Full Article
no Retraction: Supramolecular organic nanotubes: how to utilize the inner nanospace and the outer space By pubs.rsc.org Published On :: Soft Matter, 2024, Advance ArticleDOI: 10.1039/D4SM90172J, Retraction Open Access   This article is licensed under a Creative Commons Attribution 3.0 Unported Licence.Naohiro Kameta, Hiroyuki Minamikawa, Mitsutoshi MasudaTo cite this article before page numbers are assigned, use the DOI form of citation above.The content of this RSS Feed (c) The Royal Society of Chemistry Full Article
no Src kinase slows collective rotation of confined epithelial cell monolayers By pubs.rsc.org Published On :: Soft Matter, 2024, Accepted ManuscriptDOI: 10.1039/D4SM00827H, PaperNastassia Pricoupenko, Flavia Marsigliesi, Philippe Marcq, Carles Blanch-Mercader, Isabelle A BonnetCollective cell migration is key during development, wound healing and metastasis and relies on coordinated cell behaviors at the group level. Src kinase is a key signalling protein for physiological...The content of this RSS Feed (c) The Royal Society of Chemistry Full Article
no Revealing microscale bulk structures in polymer–carbon nanocomposites using spin-echo SANS By pubs.rsc.org Published On :: Soft Matter, 2024, 20,8663-8674DOI: 10.1039/D4SM00578C, Paper Open Access   This article is licensed under a Creative Commons Attribution 3.0 Unported Licence.L. V. Tiihonen, M. P. Weir, A. J. Parnell, S. C. Boothroyd, D. W. Johnson, R. M. Dalgliesh, M. Bleuel, C. P. Duif, W. G. Bouwman, R. L. Thompson, K. S. Coleman, N. Clarke, W. A. Hamilton, A. L. Washington, S. R. ParnellSpin-echo small-angle neutron scattering (SESANS) revealed structure in polymer–carbon nanocomposites over multiple length scales with unprecedented range (10 nm–16 μm). Data from two SESANS instruments and other methods were analysed with SasView.The content of this RSS Feed (c) The Royal Society of Chemistry Full Article
no Model predictive control of non-interacting active Brownian particles By pubs.rsc.org Published On :: Soft Matter, 2024, 20,8581-8588DOI: 10.1039/D4SM00902A, PaperTitus Quah, Kevin J. Modica, James B. Rawlings, Sho C. TakatoriModel predictive control is used to guide the spatiotemporal distribution of active Brownian particles by forecasting future states and optimizing control inputs to achieve tasks like dividing a population into two groups.The content of this RSS Feed (c) The Royal Society of Chemistry Full Article
no Confined bicontinuous microemulsions: nanoscale dynamics of the surfactant film By pubs.rsc.org Published On :: Soft Matter, 2024, 20,8692-8701DOI: 10.1039/D4SM00925H, Paper Open Access   This article is licensed under a Creative Commons Attribution 3.0 Unported Licence.Margarethe Dahl, Olaf Holderer, René Haverkamp, Ingo Hoffmann, Kathleen Wood, Jessica Hübner, Thomas Hellweg, Stefan WellertA confined bicontinuous C10E4–D2O–n-octane microemulsion is studied using neutron spin echo spectroscopy (NSE). The pore size of the confining matrices determines the dynamics of the confined bicontinuous microemulsion.The content of this RSS Feed (c) The Royal Society of Chemistry Full Article
no Hydrophobic fouling-resistant electrospun nanofiber membranes from poly(vinylidene fluoride)/polyampholyte blends By pubs.rsc.org Published On :: Soft Matter, 2024, 20,8654-8662DOI: 10.1039/D4SM00817K, PaperAnuja S. Jayasekara, Luca Mazzaferro, Ryan O’Hara, Ayse Asatekin, Peggy CebeThis study reports the fabrication of non-woven fibrous membranes from electrospinning blended solutions of PVDF with a random polyampholyte amphiphilic copolymer (r-PAC) in N,N-dimethylformamide and methanol.The content of this RSS Feed (c) The Royal Society of Chemistry Full Article
no Structure affinity of the Langmuir monolayer and the corresponding Langmuir–Blodgett film revealed by X-ray techniques By pubs.rsc.org Published On :: Soft Matter, 2024, 20,8601-8609DOI: 10.1039/D4SM01050G, PaperAlvina V. Alexandrova, Maxim A. Shcherbina, Yuriy L. Repchenko, Yuriy M. Selivantiev, Alexander V. Shokurov, Vladimir V. Arslanov, Sofiya L. SelektorUsing X-ray techniques, crown-substituted chromoionophore Langmuir–Blodgett films were proved to preserve the fine structure and functional features of pre-organized monolayers.The content of this RSS Feed (c) The Royal Society of Chemistry Full Article
no Co-assembly of Cellulose Nanocrystals and Gold Nanorods: Insights from Molecular Dynamics Modelling By pubs.rsc.org Published On :: Soft Matter, 2024, Accepted ManuscriptDOI: 10.1039/D4SM00871E, Paper Open Access   This article is licensed under a Creative Commons Attribution 3.0 Unported Licence.Jiaxin Hou, William W Sampson, Ahu Gumrah DumanliA coarse-grained molecular dynamics model is developed to explore the co-assembly of cellulose nanocrystals (CNCs) and gold nanorods (AuNRs) under sedimentation conditions with varying vol- umetric concentration and particle-size ratios....The content of this RSS Feed (c) The Royal Society of Chemistry Full Article
no Ring-shaped nanoparticle assembly and cross-linking on lipid vesicle scaffolds By pubs.rsc.org Published On :: Soft Matter, 2024, Advance ArticleDOI: 10.1039/D4SM01010H, Communication Open Access   This article is licensed under a Creative Commons Attribution 3.0 Unported Licence.Gizem Karabiyik, Aldo Jesorka, Irep GözenWe show the assembly and cross-linking of carboxylate-modified polystyrene nanoparticles into flexible circular, ring-shaped structures with micrometer sized diameters around the base of surface-adhered giant lipid vesicles.To cite this article before page numbers are assigned, use the DOI form of citation above.The content of this RSS Feed (c) The Royal Society of Chemistry Full Article
no Solvent-Free Confinement of Ordered Microparticle Monolayers: Effect of Host Substrate and Pattern Symmetry By pubs.rsc.org Published On :: Soft Matter, 2024, Accepted ManuscriptDOI: 10.1039/D4SM01196A, Paper Open Access   This article is licensed under a Creative Commons Attribution 3.0 Unported Licence.Ignaas Jimidar, Mitch de Waard, Gijs Roozendaal, Kai SotthewesThe self-organisation of individual suspended colloids into ordered structures that can be mediated by confinement has garnered interest recently. Despite the push for solvent reduction for sustainability reasons, the comprehension...The content of this RSS Feed (c) The Royal Society of Chemistry Full Article
no Biomimetic mineralization of positively charged silica nanoparticles templated by thermoresponsive protein micelles: applications to electrostatic assembly of hierarchical and composite superstructures By pubs.rsc.org Published On :: Soft Matter, 2024, Advance ArticleDOI: 10.1039/D4SM00907J, PaperNada Y. Naser, William C. Wixson, Helen Larson, Brandi M. Cossairt, Lilo D. Pozzo, François BaneyxExploiting the ability of a solid-binding elastin-like peptide to micellize, we mineralize monodisperse silica nanoparticles whose positive surface charge enables one-step electrostatic assembly of various mono- and bi-material superstructures.To cite this article before page numbers are assigned, use the DOI form of citation above.The content of this RSS Feed (c) The Royal Society of Chemistry Full Article
no Iconography of Security By 24ways.org Published On :: Sat, 07 Dec 2019 12:00:00 +0000 Molly Wilson and Eileen Wagner battle the age old Christmas issues of right and wrong, good and evil, and how the messages we send through iconography design can impact the decisions users make around important issues of security. Are you icons wise men, or are they actually King Herod? Congratulations, you’re locked out! The paradox of security visuals Designers of technology are fortunate to have an established visual language at our fingertips. We try to use colors and symbols in a way that is consistent with people’s existing expectations. When a non-designer asks a designer to “make it intuitive,” what they’re really asking is, “please use elements people already know, even if the concept is new.” Lots of options for security icons We’re starting to see more consistency in the symbols that tech uses for privacy and security features, many of them built into robust, standardized icon sets and UI kits. To name a few: we collaborated with Adobe in 2018 to create the Vault UI Kit, which includes UI elements for security, like touch ID login and sending a secure copy of a file. Adobe has also released a UI kit for cookie banners. Activity log from the Vault Secure UI Kit, by Adobe and Simply Secure. Cookie banner, from the Cookie Banner UI Kit, by Adobe. Even UI kits that aren’t specialized in security and privacy include icons that can be used to communicate security concepts, like InVision’s Smart Home UI Kit. And, of course, nearly every icon set has security-related symbols, from Material Design to Iconic. Key, lock, unlock, shield, and warning icons from Iconic. A selection of security-related icons from Material Design. Security shields from a selection of Chinese apps, 2014. From a longer essay by Dan Grover. Many of these icons allude to physical analogies for the states and actions we’re trying to communicate. Locks and keys; shields for protection; warning signs and stop signs; happy faces and sad faces. Using these analogies helps build a bridge from the familiar, concrete world of door locks and keyrings to the unfamiliar, abstract realm of public- and private-key encryption. flickr/Jim Pennucci GPG Keychain, an open-source application for managing encryption keys. Image: tutsplus.com When concepts don’t match up Many of the concepts we’re working with are pairs of opposites. Locked or unlocked. Private or public. Trusted or untrusted. Blocked or allowed. Encouraged or discouraged. Good or evil. When those concept pairs appear simultaneously, however, we quickly run into UX problems. Take the following example. Security is good, right? When something is locked, that means you’re being responsible and careful, and nobody else can access it. It’s protected. That’s cause for celebration. Being locked and protected is a good state. “Congratulations, you’re locked out!” Whoops. If the user didn’t mean to lock something, or if the locked state is going to cause them any inconvenience, then extra security is definitely not good news. Another case in point: Trust is good, right? Something trusted is welcome in people’s lives. It’s allowed to enter, not blocked, and it’s there because people wanted it there. So trusting and allowing something is good. “Good job, you’ve downloaded malware!” Nope. Doesn’t work at all. What if we try the opposite colors and iconography? That’s even worse. Even though we, the designers, were trying both times to keep the user from downloading malware, the user’s actual behavior makes our design completely nonsensical. Researchers from Google and UC Berkeley identified this problem in a 2016 USENIX paper analyzing connection security indicators. They pointed out that, when somebody clicks through a warning to an “insecure” website, the browser will show a “neutral or positive indicator” in the URL bar – leading them to think that the website is now safe. Unlike our example above, this may not look like nonsense from the user point of view, but from a security standpoint, suddenly showing “safe/good” without any actual change in safety is a pretty dangerous move. The deeper issue Now, one could file these phenomena under “mismatching iconography,” but we think there is a deeper issue here that concerns security UI in particular. Security interface design pretty much always has at least a whiff of “right vs. wrong.” How did this moralizing creep into an ostensibly technical realm? Well, we usually have a pretty good idea what we’d like people to do with regards to security. Generally speaking, we’d like them to be more cautious than they are (at least, so long as we’re not trying to sneak around behind their backs with confusing consent forms and extracurricular data use). Our well-intentioned educational enthusiasm leads us to use little design nudges that foster better security practices, and that makes us reach into the realm of social and psychological signals. But these nudges can easily backfire and turn into total nonsense. Another example: NoScript “No UX designer would be dense enough to make these mistakes,” you might be thinking. Well, we recently did a redesign of the open-source content-blocking browser extension NoScript, and we can tell you from experience: finding the right visual language for pairs of opposites was a struggle. NoScript is a browser extension that helps you block potential malware from the websites you’re visiting. It needs to communicate a lot of states and actions to users. A single script can be blocked or allowed. A source of scripts can be trusted or untrusted. NoScript is a tool for the truly paranoid, so in general, wants to encourage blocking and not trusting. But: “An icon with a crossed-out item is usually BAD, and a sign without anything is usually GOOD. But of course, here blocking something is actually GOOD, while blocking nothing is actually BAD. So whichever indicators NoScript chooses, they should either aim to indicate system state [allow/block] or recommendation [good/bad], but not both. And in any case, NoScript should probably stay away from standard colors and icons.” So we ended up using hardly any of the many common security icons available. No shields, no alert! signs, no locked locks, no unlocked locks. And we completely avoided the red/green palette to keep from taking on unintended meaning. Navigating the paradox Security recommendations appear in most digital services are built nowadays. As we move into 2020, we expect to see a lot more conscious choice around colors, icons, and words related to security. For a start, Firefox already made a step in the right direction by streamlining indicators for SSL encryption as well as content blocking. (Spoilers: they avoided adding multiple dimensions of indicators, too!) The most important thing to keep in mind, as you’re choosing language around security and privacy features, is: don’t conflate social and technical concepts. Trusting your partner is good. Trusting a website? Well, could be good, could be bad. Locking your bike? Good idea. Locking a file? That depends. Think about the technical facts you’re trying to communicate. Then, and only then, consider if there’s also a behavioral nudge you want to send, and if you are, try to poke holes in your reasoning. Is there ever a case where your nudge could be dangerous? Colors, icons, and words give you a lot of control over how exactly people experience security and privacy features. Using them in a clear and consistent way will help people understand their choices and make more conscious decisions around security. About the author Molly Wilson is a designer by training and a teacher at heart: her passion is leveraging human-centered design to help make technology clear and understandable. She has been designing and leading programs in design thinking and innovation processes since 2010, first at the Stanford d.school in Palo Alto, CA and later at the Hasso-Plattner-Institut School of Design Thinking in Potsdam, Germany. Her work as an interaction designer has focused on complex products in finance, health, and education. Outside of work, talk to her about cross-cultural communication, feminism, DIY projects, and visual note-taking. Molly holds a master’s degree in Learning, Design, and Technology from Stanford University, and a bachelor’s degree magna cum laude in History of Science from Harvard University. See more about her work and projects at http://molly.is. Eileen Wagner is Simply Secure’s in-house logician. She advises teams and organizations on UX design, supports research and user testing, and produces open resources for the community. Her focus is on information architecture, content strategy, and interaction design. Sometimes she puts on her admin hat and makes sure her team has the required infrastructure to excel. She previously campaigned for open data and civic tech at the Open Knowledge Foundation Germany. There she helped establish the first public funding program for open source projects in Germany, the Prototype Fund. Her background is in analytic philosophy (BA Cambridge) and mathematical logic (MSc Amsterdam), and she won’t stop talking about barbershop music. More articles by Molly Wilson & Eileen Full Article Design security
no Z’s Still Not Dead Baby, Z’s Still Not Dead By 24ways.org Published On :: Tue, 10 Dec 2019 12:00:00 +0000 Andy Clarke digs deep into snow to find ways flat design can be brought back to life in CSS with the use of techniques to create a sense of depth. Like spring after an everlasting winter, perhaps it’s time to let a different style of design flourish. What a relief. A reaction to overly ornamental designs, flat design has been the dominant aesthetic for almost a decade. As gradients, patterns, shadows, and three-dimensional skeuomorphism fell out of fashion, designers embraced solid colours, square corners, and sharp edges. Anti-skeuomorphism no doubt helped designers focus on feature design and usability without the distraction of what some might still see as flourishes. But, reducing both product and website designs to a bare minimum has had unfortunate repercussions. With little to differentiate their designs, products and websites have adopted a regrettable uniformity which makes it difficult to distinguish between them. Still, all fashions fade eventually. I’m hopeful that with the styling tools we have today, we’ll move beyond flatness and add an extra dimension. Here are five CSS properties which will bring depth and richness to your designs. To illustrate how you might use them, I’ve made this design for the 1961 Austin Seven 850, the small car which helped define the swinging sixties. The original Mini. Red, (British Racing) green, blue designs. Transparency with alpha values The simplest way to add transparency to a background colour, border, or text element is using alpha values in your colour styles. These values have been available in combination with RGB (red, green, blue) for years. In RGBA, decimal values below 1 make any colour progressively more transparent. 0 is the most transparent, 1 is the most opaque: body { color: rgba(255, 0, 153, .75); } Alpha values allow colour from a background to bleed through. Alpha values also combine with HSL (hue, saturation, lightness) to form HSLA: body { color: hsla(0, 0, 100, .75); } Currently a Working Draft, CSS Color Module Level 4 enables alpha values in RGB and HSL without the additional “A”: body { color: rgb(255, 0, 153, .75); /* color: hsl(0, 0, 100, .75); */ } This new module also introduces hexadecimal colours with alpha values. In this new value, the last two digits represent the transparency level, with FF producing 100% opacity and 00 resulting in 100% transparency. For the 75% opacity in my design, I add BF to my white hexadecimal colour: body { color: #ffffffbf; } Although there’s already wide support for hexadecimal, HSL, and RGB with alpha values in most modern browsers, the current version of Microsoft Edge for Windows has lagged behind. This situation will no doubt change when Microsoft move Edge to Chromium. 2. Use opacity Using the opacity property specifies the amount of opacity of any element (obviously) which allows elements below them in the stacking order to be all or partially visible. A value of 0 is most transparent, whereas 1 is most opaque. Opacity tints images with colour from elements behind them. This property is especially useful for tinting the colour of elements by allowing any colour behind them to bleed through. The British Motor Corporation logo in the footer of my design is solid white, but reducing its opacity allows it to take on the colour of the body element behind: [src*="footer"] { opacity: .75; } You might otherwise choose to use opacity values as part of a CSS filter. 0% opacity is fully transparent, while 100% is fully opaque and appears as if no filter has been applied. Applying a CSS filter is straightforward. First, declare the filter-function and then a value in parentheses: [src*="footer"] { filter: opacity(75%); } 3. Start blending Almost universally, contemporary browsers support the same compositing tools we’ve used in graphic design and photo editing software for years. Blend modes including luminosity, multiply, overlay, and screen can easily and quickly add depth to a design. There are two types of blend-mode. background-blend-mode defines how background layers blend with the background colour behind them, and with each other. My layered design requires three background images applied to the body element: body { padding: 2rem; background-color: #ba0e37; background-image: url(body-1.png), url(body-2.png), url(body-3.png); background-origin: content-box; background-position: 0 0; background-repeat: no-repeat; background-size: contain; } From left: Three background images. Far right: How images combine in a browser. You can apply different background-blend modes for each background image. Specify them in the same order as your background images and separate them with a comma: body { background-blend-mode: multiply, soft-light, hard-light; } Six background-blend-mode variations. When I need to apply an alternative colour palette, there’s no need to export new background assets. I can achieve results simply by changing the background colour and these background-blend modes. Backgrounds blend behind this brilliant little car. Sadly, there’s not yet support for blending modes in Edge, so provide an alternative background image for that browser: @supports not (background-blend-mode: normal) { body { background-image: url(ihatetimvandamme.png); } } mix-blend-mode, on the other hand, defines how an element’s content should blend with its ancestors. From left: Screen, overlay, and soft-light mix-blend-mode. To blend my Mini image with the background colours and images on the body, I add a value of hard-light, plus a filter which converts my full-colour picture to greyscale: [src*="figure"] { filter: grayscale(100%); mix-blend-mode: hard-light; } You can also use mix-blend-mode to add depth to text elements, like this headline and large footer paragraph in a green and yellow version of my design: .theme-green h1, .theme-green footer p:last-of-type { color: #f8Ef1c; mix-blend-mode: difference; } Text elements blend to add interest in my design. 4. Overlap with CSS Grid Whereas old-fashioned layout methods reinforced a rigid structure on website designs, CSS Grid opens up the possibility to layer elements without positioning or resorting to margin hacks. The HTML for my design is semantic and simple: <body> <p>You’ve never seen a car like it</p> <h1><em>1961:</em> small car of the year</h1> <figure> <img src="figure.png" alt="Austin Seven 850"> <figcaption> <ul> <li>Austin Super Seven</li> <li>Morris Super Mini-Minor</li> <li>Austin Seven Cooper</li> <li>Morris Mini-Cooper</li> </ul> <figcaption> </figure> <footer> <p>Today’s car is a Mini</p> <p>Austin Seven 850</p> <img src="footer.png" alt="Austin Seven 850"> <footer> </body> I begin by applying a three-column symmetrical grid to the body element: @media screen and (min-width : 48em) { body { display: grid; grid-template-columns: 1fr 1fr 1fr; } } Three-column symmetrical grid with column and row lines over my design. Then, I place my elements onto that grid using line numbers: body > p { grid-column: 1 / -1; } h1 { grid-column: 1 / 3; } figure { grid-column: 1 / -1; } footer { display: contents; } footer div { grid-column: 1 / 3; } [src*="footer"] { grid-column: 3 / -1; align-self: end; } As sub-grid has yet to see wide adoption, I apply a second grid to my figure element, so I may place my image and figcaption: figure { display: grid; grid-template-columns: 1fr 3fr; } figcaption { grid-column: 1; } [src*="figure"] { grid-column: 2; } Left: This conventional alignment lacks energy. Right: Overlapping content adds movement which makes my design more interesting overall. Previewing the result in a browser shows me the energy associated with driving this little car is missing. To add movement to my design, I change the image’s grid-column values so it occupies the same space as my caption: figcaption { grid-column: 1; grid-row: 3; } [src*="figure"] { grid-column: 1 / -1; grid-row: 3; padding-left: 5vw; } 5. Stack with z-index In geometry, the x axis represents horizontal, the y axis represents vertical. In CSS, the z axis represents depth. Z-index values can be either negative or positive and the element with the highest value appears closest to a viewer, regardless of its position in the flow. If you give more than one element the same z-index value, the one which comes last in source order will appear on top. Visualisation of z-index illustrates the depth in this design. It’s important to remember that z-index is only applied to elements which have their position property set to either relative or absolute. Without positioning, there is no stacking. However, z-index can be used on elements placed onto a grid. All techniques combined to form a design which has richness and depth. As the previous figure image and figcaption occupy the same grid columns and row, I apply a higher z-index value to my caption to bring it closer to the viewer, despite it appearing before the picture in the flow of my content: figcaption { grid-column: 1; grid-row: 3; z-index: 2; } [src*="figure"] { grid-column: 1 / -1; grid-row: 3; z-index: 1; } Z’s not dead baby, Z’s not dead While I’m not advocating a return to the worst excesses of skeuomorphism, I hope product and website designers will realise the value of a more vibrant approach to design; one which appreciates how design can distinguish a brand from its competition. I’m incredibly grateful to Drew and his team of volunteers for inviting me to write for this incredible publication every year for the past fifteen years. As I closed my first article here on this day all those years ago, “Have a great holiday season!” Z’s still not dead baby, Z’s still not dead. About the author Andy Clarke is one of the world’s best-known website designers, consultant, speaker, and writer on art direction and design for products and websites. Andy founded Stuff & Nonsense in 1998 and for 20 years has helped companies big and small to improve their website and product designs. Andy’s the author of four web design books including ‘Transcending CSS,’ ‘Hardboiled Web Design’ and ‘Art Direction for the Web’. He really, really loves gorillas. More articles by Andy Full Article Design design
no There Is No Design System By 24ways.org Published On :: Fri, 20 Dec 2019 12:00:00 +0000 Jina Anne silences the night to talk about how we talk about Design Systems. Can the language we use impact the effectiveness of the solution? Fear not, if mighty dread has seized your troubled mind. Design systems of great joy we bring to you and all mankind. Ooh, clickbaity title. Why on earth would I, a self-proclaimed “design systems advocate”, say there is no design system? Yes, I’m being a little tongue-in-cheek. Maybe I just wanted an excuse to use the “there is no spoon” gif. But I do have an actual point, so bear with me. Design systems as a “thing” vs design systems as a methodology Recently I tweeted my thoughts on why I have been tending to use design systems in plural form (rather than using an article like “a” or “the” in front of it). During my time at Salesforce when our team was called “Design Systems” and my role was “Lead Designer, Design Systems”, I would get asked “Why is it plural? We only have one.”. My thoughts: I liked my title at Salesforce as “Lead Designer, Design Systems”.People asked, but it’s just one. Why plural?“A design system” or “The design system” makes people think of a deliverable artifact/library.But it’s ongoing design systems work. Process improvement & workflows.— design systems jina (@jina) December 12, 2019 Lately, I’ve been thinking a lot about the way we talk about design systems, including the confusion and negativity that can come along with it. Amélie Lamont gave a talk in 2018 called “The Language of Design”, and in it, she talked about the way we talk about design systems and design itself from a “jargony point of view”. She argues that design is technically problem-solving. I definitely agree. People get caught up in “design” as the actual role or action of designing and have even taken issue with the term “design systems” for this very reason (and have suggested it be more focused on code). I don’t think it really does us a good service to just swap out one role for the other. And… is it even about the role? For other folks, which I include myself, we see design as a larger effort that involves the end-user experience (which includes usability, accessibility, performance, etc) as well as having a huge impact on the business. This includes code. But really, it should all be focused on people. I like Mina Markham’s definition of what makes for good art direction in design systems: Art direction is progressive. Localized. Cross-functional. Inclusive. Systematic. Mina Markham You’ll notice that the emphasis of what she speaks about is on people. So in the design systems work we do, you often think of a style guide. Or a component library. Or a Sketch UI Kit. And there are arguments on whether either of those things can be called a design system if it doesn’t include this other thing or that other thing. We even talk about whether design systems are products or are more of a service. My take? The word “design” and “system” used in combination together literally just means to systemize your design (and in my world view that is more about the overall experience). And so if for you that means a Sketch UI Library, then you do you! My point is I think there is too much focus on the deliverables in the first place. I touched on this briefly very recently: Something I’ve been thinking a lot about is how much time we spend on making beautiful design system websites. I love looking at them. They’re great. But as our design and engineering tools get closer and closer together, will we come to a point where we don’t need the website? Can our tools surface suggestions for better accessibility, localization, performance, and usability, because our design system is baked into the tools? Just a thought. Quote from post in Smarter Design Systems Tools Invisible Design Systems? So this is something I am striving for in 2020 — in what ways can we improve our collaboration, remove any proverbial gaps between design and engineering (not just bridge them), and have more meaningful conversations around the work we do? I don’t have any wrong or right answers here, but I am looking forward to seeing this progress in our field. Design tools are bringing in smarter, automated ways to check for color contrast and other accessibility issues that can be detected early on. Sketch just announced their Assistant feature planned for 2020, which will check for your visual design discrepancies. And some design tools are using real code to be used in your product. Engineering tools are advancing every day as well. I was just attending Flutter Interact recently, which was an event held by Google about their Flutter UI toolkit. It previously enabled you to get apps built for native platforms like Android and iOS, from one code base, and now has also announced their support for desktop and web. The push at this year’s event was focused on making this approachable for creatives (with their integrations into tools like Adobe XD. It really does feel like design and engineering tools are coming closer and closer together. And that’s all really cool and exciting. However, I have to tell you: a lot of the time that I’m working in design systems, I’m not even touching a design tool. Or coding. Rather, it’s a lot of people-focused work: Reviewing. Advising. Organizing. Coordinating. Triaging. Educating. Supporting. That’s a lot of invisible systems work right there. (I use “invisible” here to mean there is not a direct tangible object in some of this work, though it all does serve the end-user through the product outcomes). Designed objects are the fruit of invisible systems. Amélie Lamont This definitely is not me saying “don’t build a style guide” or “don’t make a Sketch UI Kit”. Use whatever works best for your organization. But this essentially is a plea to always put the focus on the people using your products. And, think about design systems as more of a methodology. A shining example of this way of designing systems is the newly released Encore from Spotify. I had the opportunity to see this revealed at Design Systems London, and they just published a post on it recently. What’s different about Encore is that it isn’t a single monolithic thing. It’s a framework that brings Spotify’s existing design systems under one brand—a “system of systems.” Source: Reimagining Design Systems at Spotify This design systems work is not about one style guide website and instead focuses on the needs across several systems that are connected. Design Tokens help this to be a reality. Needless to say, I’m a big fan. Love for your community Design system principle #4: Favor community over control.— Nathan Curtis (@nathanacurtis) March 23, 2017 When you’re doing design systems work in your organization, you are actually building a community. This can involve shared language and nomenclature, an aligned purpose, and better, closer collaboration. It doesn’t have to be a “style police” situation (I actually very much dislike the term “governance”). This can be a joint effort – working together to share the ownership of design systems together. I was a big fan of the pairing model that we had at Salesforce when I was there. The work we did in design systems informed the work our product designers did. But then the work that the product designers did, in turn, informed the work we did in design systems. It was a very cyclical model and combined Nathan Curtis’s observed models of the Centralized Team and the Federated Contributors. From my experience, I have found that great design systems teams have hybrid skillsets. Whether that is having actual hybrid designer/engineers on the team, or just ensuring that those skillsets are represented across the team, it’s important to have the perspectives of design, engineering, product, content, accessibility, and more. I think that part of a designer’s role – and not even a designer. Anybody who uses the design system by nature of what a design system is – it’s the conglomeration of all the disciplines. Some code, some design, some product knowledge, some writing. And what that means is I think everybody on the team has to approach it with some humility. Dan Mall Kim Williams spoke recently in her talk, Start with your Brand Purpose, on Design Systems Love: Love is patient. With design systems, …it’s a marathon and not a sprint. …this is a long game and it is a labor of love. And love is kind. We support everyone through change. Internally change is so hard. How do you help engineers work in a different way, how do you help PMs think strategically and embrace a new definition of analytical, how do you make in-roads with marketing so that they’re comfortable with you talking about brand and that you’re comfortable with marketing talking about user experience? How do you really, really build those relationships up through empathy. …the onus is on us to educate, to facilitate, to help others understand, to speak the language, to be that bridge, to be that connector, to be that catalyst for our companies. It always trusts, always hopes, always perseveres. Never fails. I love this because there’s a resiliency that we need to have, a resilience when we go through this. Kim Williams I love, love, love that. And so while I still think it’s fun to explore new tools and get really excited about certain processes, at the end of the day, (in my most humble opinion), the best design systems teams are not just hybrid teams — they are also teams that work and supports each other really well, thus producing amazing user-centered work. So, my suggestion for the coming year is to perhaps move away from thinking of design systems as an actual thing (especially when it comes to the negative perception of spending time on them) and more as a way of working better, more efficiently, and more creatively so that we can build great experiences for our users. I like to repeat in my work, Design Systems are for people, because it is a call to cherish, support, and empower the people you serve (both internally and externally). Happy holidays! About the author Jina is a design systems advocate and coach. At Amazon, Jina was Senior Design Systems Lead. At Salesforce, she was Lead Designer on the Lightning Design System. She led the CSS architecture and style guide for the Apple Online Store. She’s also worked at GitHub, Engine Yard, Crush + Lovely, and Memphis Brooks Museum of Art, and more. She developed projects with W3C, Mass.gov, FedEx, etc. Jina coauthored Design Systems Handbook, Fancy Form Design, and The Art & Science of CSS. She’s published several articles. She’s spoken at conferences including Adobe MAX. Print Magazine featured Jina as a leading San Francisco creative. More articles by Jina Full Article Process style-guides
no From techno-inspired rave bags to pants that depict neurons, this Chennai-based gender neutral fashion label’s creations are conversation starters By www.thehindu.com Published On :: Fri, 14 Apr 2023 17:03:21 +0530 Brimming with cut outs, panels, thread piping and embroidery, Biskit’s new collection explores the human mind Full Article Life & Style
no Common man is not foolish By www.thehindubusinessline.com Published On :: Sat, 23 Mar 2013 13:41:14 +0530 Full Article Richa Mishra
no Objectifying gender is not ‘jest’ By www.thehindubusinessline.com Published On :: Sat, 30 Mar 2013 14:58:37 +0530 Full Article Richa Mishra
no Knowing what you want By www.thehindu.com Published On :: Sat, 23 Apr 2016 17:57:09 +0530 What you’re looking for out of your fitness regimen will dictate what you need to do to get there, writes RAJ GANPATH Full Article Fitness
no Know your role By www.thehindu.com Published On :: Thu, 25 Aug 2016 00:25:03 +0530 Milind Soman says it is crucial to understand your part in maintaining balance in nature Full Article Metroplus
no Editorial. Big-bang reforms now need to give way to grunt work By www.thehindubusinessline.com Published On :: Mon, 22 Jul 2024 21:30:36 +0530 The Economic Survey advises, sanely, that policy choices for India need to be driven more by pragmatism than ideology and warns against a blind aping of the West Full Article Editorial
no Editorial. Little or no lessons learnt from natural disasters By www.thehindubusinessline.com Published On :: Fri, 02 Aug 2024 21:19:44 +0530 Population as well as economic activities in vulnerable areas should be kept to a minimum. Yet, governments have promoted the opposite, including tourism Full Article Editorial
no Not exactly a status quo policy By www.thehindubusinessline.com Published On :: Thu, 08 Aug 2024 20:55:20 +0530 The RBI has explained its food inflation concerns for those who discount them in the context of monetary policy — while flagging financial stability issues Full Article Editorial
no Editorial: Easy entry for market advisers is good, but not fee control By www.thehindubusinessline.com Published On :: Wed, 21 Aug 2024 21:16:29 +0530 SEBI could have dispensed with controls on levy of fees. Also, the proposal to dilute the qualification criteria for registered advisers seems ill-advised Full Article Editorial
no Editorial. Flexible norms will make rights issues attractive By www.thehindubusinessline.com Published On :: Tue, 27 Aug 2024 20:38:43 +0530 The current norms are too onerous Full Article Editorial
no Editorial. Liberal norms in GIFT City, the right way forward By www.thehindubusinessline.com Published On :: Tue, 03 Sep 2024 21:37:17 +0530 Will not only boost the primary market activity in the GIFT IFSC but will also enable GIFT City to effectively compete with other international financial jurisdictions Full Article Editorial
no Editorial. Economics Nobel winners examine the role of institutions in growth By www.thehindubusinessline.com Published On :: Tue, 15 Oct 2024 21:05:52 +0530 The three awardees regard social institutions as being less important than state institutions Full Article Editorial
no Editorial. China market stimulus may not impact India’s FPI flows By www.thehindubusinessline.com Published On :: Thu, 17 Oct 2024 21:15:46 +0530 While foreign funds may be buying Chinese equity for the short-term, the Indian market offers better returns for long-term investors Full Article Editorial
no Shriram Finance PAT up 18 per cent; announces 1:5 stock split By www.thehindubusinessline.com Published On :: Fri, 25 Oct 2024 21:52:11 +0530 The vehicle finance focused NBFC also announced a 1-to-5 stock split, along with a dividend of ₹ 22 per share today Full Article Money & Banking
no Compliant with gold loan norms, will further strengthen audit processes: CSB Bank MD By www.thehindubusinessline.com Published On :: Tue, 29 Oct 2024 19:01:36 +0530 Bank expects its advances and deposits to rise at least 30-50 per cent faster than the banking system Full Article Money & Banking
no Finova Capital raises $135 million in Series E round led by Avataar Venture Partners, Sofina, others By www.thehindubusinessline.com Published On :: Wed, 30 Oct 2024 09:43:54 +0530 Finova will use the funds to grow its loan book, invest in technology, expand geographically and further its vision of enabling financial inclusion at scale Full Article Money & Banking
no For new players, existing expense of management regulations are a challenge: Zuno General Insurance CEO By www.thehindubusinessline.com Published On :: Sun, 03 Nov 2024 10:21:12 +0530 Zuno General Insurance continued to grow faster than the industry in the second quarter of this fiscal, says Shanai Ghosh, MD & CEO of the company Full Article Money & Banking
no Govt invites applications for RBI Deputy Governor By www.thehindubusinessline.com Published On :: Mon, 04 Nov 2024 12:19:48 +0530 The appointment is for a period of three years, and the individual is qualified for reappointment. The position will have a monthly salary of Rs ₹2.25 lakh (Level-17) Full Article Economy
no ₹2000 note withdrawal: Only 2% remain in circulation By www.thehindubusinessline.com Published On :: Mon, 04 Nov 2024 19:45:54 +0530 The facility for exchange of the ₹2000 banknotes is available at RBI’s 19 Issue Offices since May 19, 2023, per a central bank statement Full Article Money & Banking
no RBI designates 10-year Sovereign Green Bonds under FAR for investment by non-residents By www.thehindubusinessline.com Published On :: Thu, 07 Nov 2024 20:47:47 +0530 Reserve Bank of India has decided to designate SGrBs of 10-year tenor to be issued by the government in the second half of the fiscal year 2024-25 as ‘specified securities’ under the FAR Full Article Money & Banking
no Standard Chartered sets sights on economic hubs to drive affluent client growth By www.thehindubusinessline.com Published On :: Mon, 11 Nov 2024 21:01:03 +0530 The strategy is designed to tap into India’s burgeoning wealth market, with the high-net-worth (HNW) client base expected to soar from 0.7 million two years ago to 1.7 million by 2028 Full Article Money & Banking
no Eye Witness No. 74 / directed by: Jack Long, William Davidson ; produced by: Jack Olsen, Nicholas Balla ; production agency: National Film Board of Canada (Ottawa) By darius.uleth.ca Published On :: Montreal : National Film Board of Canada, 2024 Full Article
no Turnaround : A Story of Recovery / directed by: Moira Simpson ; produced by: Jennifer Torrance, Moira Simpson, John Taylor, Kathleen Shannon ; production agency: National Film Board of Canada (Montreal) By darius.uleth.ca Published On :: Montreal : National Film Board of Canada, 2017 Full Article
no Kamitshikaut / directed by: Shaushiss Fontaine ; produced by: Manon Barbeau ; production agencies: National Film Board of Canada (Montreal), Corporation Wapikoni mobile (Montreal) By darius.uleth.ca Published On :: Montreal : National Film Board of Canada, 2023 Full Article
no Alone in the Abyss / directed by: Claudie Ottawa ; produced by: Manon Barbeau, Patricia Bergeron, Manon Barbeau, Yves Bisaillon, Ravida Din ; production agencies: Corporation Wapikoni mobile (Montreal), National Film Board of Canada (Montreal) By darius.uleth.ca Published On :: Montreal : National Film Board of Canada, 2018 Full Article
no Volcano / directed by: Kaj Pindal ; produced by: Wolf Koenig ; production agency: National Film Board of Canada (Montreal) By darius.uleth.ca Published On :: Montreal : National Film Board of Canada, 2023 Full Article
no Reflections on Practice : From Novice to Expert / directed by: Nettie Wild ; production agencies: British Columbia Centre for Disease Control. Street Nurse Program (Vancouver), National Film Board of Canada (Montreal) By darius.uleth.ca Published On :: Montreal : National Film Board of Canada, 2019 Full Article
no Governor participates in Uttarakhand Foundation Day celebrations at Raj Bhavan By www.thehindu.com Published On :: Sat, 09 Nov 2024 18:17:26 +0530 Full Article Andhra Pradesh
no Art of Living ‘Maha Satsang’ to be held on November 13 By www.thehindu.com Published On :: Sat, 09 Nov 2024 18:49:21 +0530 Full Article Andhra Pradesh
no MP meets Governor, seeks permission to develop cricket grounds By www.thehindu.com Published On :: Sat, 09 Nov 2024 18:54:35 +0530 Full Article Andhra Pradesh
no Thirteen leaders from Rayalaseema get nominated posts in A.P. By www.thehindu.com Published On :: Sat, 09 Nov 2024 20:49:12 +0530 Somisetty Venkateshwarlu, Narasimha Yadav, Roopananda Reddy, Kappatralla Susheelamma, Mustaq Ahmed, Devendrappa, K.K. Choudhary, R. Sadashiva, C.R. Rajan, Neelayapalam Vijay Kumar, Poola Nagaraju, K. Hemalatha from TDP get nominated posts while T.C. Varun from JSP gets a post Full Article Andhra Pradesh
no Andhra Pradesh government releases list of 62 persons nominated to various corporations By www.thehindu.com Published On :: Sat, 09 Nov 2024 21:23:52 +0530 Chaganti Koteswara Rao and Mohammad Shareef have been appointed Advisers in the Cabinet rank on Ethics and Values, and Minority Affairs respectively Full Article Andhra Pradesh
no ‘Karthika Masa Laksha Deepotsavam’ concludes on a grand note in Nellore By www.thehindu.com Published On :: Sun, 10 Nov 2024 19:15:01 +0530 501 couples participate in the ‘Veera Venkata Satyanarayana Swamy Vratam’ organised on the occasion Full Article Andhra Pradesh
no TDP leaders from Anantapur disappointed after being snubbed for nominated posts By www.thehindu.com Published On :: Sun, 10 Nov 2024 19:16:30 +0530 Having swept all 14 Assembly seats and two MP seats in the undivided district, there were several contenders from the TDP and JSP for the nominated posts Full Article Andhra Pradesh