1,087 Matching Annotations
  1. Last 7 days
    1. Open About Popover

      I have to say, I like how it looks in their Apple and Desktop preview better than the Android/Material preview. I wish they had the arrow in Android Material too.

      But on https://sveltematerialui.com/demo/menu-surface it doesn't bother me quite as much...

    1. In my opinion, it can sometimes look odd. Very interestingly, this is by design and is part of the Material design specification. This article isn’t to argue whether it should be this way or not, though; it’s just to change yours such that your MenuItem(s) show below the menu selection, like so:
    1. Material is the metaphor The metaphor of material defines the relationship between space and motion. The idea is that the technology is inspired by paper and ink and is utilized to facilitate creativity and innovation. Surfaces and edges provide familiar visual cues that allow users to quickly understand the technology beyond the physical world.
    1. By default, menus open with an entrance animation. However, on desktop, menus can skip the animation and open instantly instead.

      Why only on desktop? That delay drives me crazy. I would like to skip on web/mobile too.

  2. Jan 2021
    1. Small components can set the size of their corner shape using a percentage of the absolute height of the component. This means the corner shape will change as the component height changes.
    1. Outlined buttons are also a lower emphasis alternative to contained buttons, or a higher emphasis alternative to text buttons.
    2. Dialogs use text buttons because the absence of a container helps unify the action with the dialog text. Align text buttons to the right edge for left-to-right scripts.
    3. Text buttons are often embedded in contained components like cards and dialogs, in order to relate themselves to the component in which they appear. Because text buttons don’t have a container, they don’t distract from nearby content.
    4. Don'tAvoid using two contained buttons next to one another if they don’t have the same fill color.

      Interesting. Do I agree with this?

      What is the reason they recommend this? It looks fine to me...

      At least they give alternatives that they recommend...

  3. Dec 2020
    1. We recommend the following changes to the default settings when designing ddPCR assays:

      Primer3 : designing primers and probes for ddPCR

      In the General Settings window, change “Concentration of divalent cations” to 3.8, “Concentration of dNTPs” to 0.8, and “Mispriming/Repeat Library” to the correct organism ■In the Advanced Settings window, change both the “Table of thermodynamic parameters” and “Salt correction formula” to SantaLucia 1998 ■In the Internal Oligo window, we recommend setting 15 for the minimum number of bases for the oligo. We recommend 64°C as the minimum Tm for the probe, 65°C as the optimal Tm for the probe, and 70°C as the maximum Tm for the probe. These parameters can be relaxed to allow for smaller/larger oligos, which may be necessary for high GC or low GC targets. Oligo size should be no smaller than 13 and no larger than 30 nucleotides

      Note: After you have made the desired changes in Primer3Plus, select Save Settings under General Settings and save these parameters in a file. To apply these settings in the future, upload them by selecting Browse in the General Settings tab, find this file, and click Activate Settings.

    2. Strive for a Tm between 50 and 65°C. One way to calculate Tm values is by using the nearest-neighbor method. Use the Tm calculator at http://www.basic.northwestern.edu/biotools/oligocalc.html, with values of 50 mM for salt concentration and 300 nM for oligonucleotide concentration
    1. has developed novel bioinformatics software called OliVar, which allows researchers and assay developers to automate and design assays that target regions of the virus genome that have the lowest frequency of mutation
    1. There is no denying to the fact that Google is one of the biggest influencers in the design trends every year. The designs by Google have a tremendous impact on how new products will be designed and launched.

      in this write up, I will take you through the new material design guidelines introduced by Google. With that, I will even share a few tips for applying the designs in your business and products.

    1. page is a { host, path, params, query } object where host is the URL's host, path is its pathname, params is derived from path and the route filename, and query is an object of values in the query string.

      I like that we don't have to manually parse params/query out of the full request URI. It provides the data that you are most likely to need, in an readily/easily-usable form.

    1. Facebook’s stated mission—to make the world more open and connected—

      If they were truly serious about the connectedness part, they would implement the Webmention spec and microformats, or something just like it, but open and standardized.

    1. The best solution that I found while trying to build a masonry component was to package up a pair of components and place child components inside a wrapper - I chose CardLayout and Card such that users would write something like: <CardLayout> <Card><MyBeautifulCard /></Card> <Card><AnotherCard /></Card> </CardLayout>
    2. Hm, React-way is really hacky... When we talking about lists, masonry, or any other table-style components, first of all, we talk about arrays and iteration through them. If you iterate over the children in the Masonry component, somewhere (in parent component I guess) you also iterate over the actual items. Over and over again, in all places you use this component, you perform almost the same iteration twice. Why we should do this? I believe the interface of this kind of components should look like this: <Masonry {items} {colsNum} let:item> <SomeItemComponent>{item}</SomeItemComponent> </Masonry>
    3. <script> export let items = []; export let colsNum = 3; $: cols = items.reduce(...); </script> {#each cols as col} {#each col as item} <slot {item} /> {/each} {/each}
    1. For a long time, the blue flame coming out of a gas burner has evoked cleanliness. That was no accident, but the result of a concerted advertising campaign.

      design gone wrong

    1. In today’s growing and fast-paced world, mobile has become part of our life. And, the competition between Android and iOS smartphones is getting tougher day by day.

      Get a quick process guide to design an iOS app with integration of the dark mode theme.

    1. Sometimes, systems just scale the problemA UI design system is more than the code of a component library. It’s more than the colors, styles, and margins of your elements. It’s an ever-growing and ever-evolving creature that entails your brand and your user’s feelings.

      If you don't understand the problem - you can [[scale the problem instead of solve the problem]], and it's important to remember that a [[design system is more than a component library]]

    1. Instead of publishing a single one-size-fits package for components, we create an ecosystem where everyone works together yet deliver independently. The design system’s team role is to facilitate and regulate, not block or enforce.

      I think this is a really important point - the design system's team is to facilitate, not gatekeep.

    2. What you see here is a page composed of shared components. However, these are independent components developed and owned by different teams and published from different projects, which are mixed and integrated together.

      the move towards single page applications, component centric frameworks, etc has shifted how we view building webpages.

      It is not so much that we are building a page, but we are building components that we assemble into a page.

      We’re not designing pages, we’re designing systems of components.—Stephen Hay via atomic design

    3. The design of your system is not ready until you have two assets:a) A style-guide that defines the styling and implementation of your UI. This is usually a rather long document with a lot of text and typography.b) A set of reusable visual elements that bring together both visual (UI) and functional (UX) consistency through components. This is usually a rather large canvas with elements drawn on Figma or Sketch etc (we use both).

      there are two [[primary assets of a design system[[

      • the style guide
      • the reusable elements - an implementation of the style guide
    4. The benefits of our system go way beyond UI/UX consistency. We greatly accelerated and scaled our development, improved our product quality, and greatly improved work between developers, designers, and everyone else.

      Design systems enable faster development and delivery, and help teams scale - and have value beyond UI/UX consistency.

  4. Nov 2020
    1. The design development process in 6 steps

      The design development phase is an incredibly important time in the life cycle of the project because design development stage is the time during which many of the prominent features are decided. Read a step by step description (and great example) of what a design development process looks like.

    1. The syntax of the fallback, like that of custom properties, allows commas. For example, var(--foo, red, blue) defines a fallback of red, blue — anything between the first comma and the end of the function is considered a fallback value.
    1. I love the Material Design System’s buttons just because their principles are really well thought through.
    2. Generally speaking, one will use smaller or less prominent buttons style for this.
    1. Curcumin, but not fish oil, reduces postprandial glycaemic response and insulin demand for glucose control.

      This backs up the two studies on fasting glucose in diabetes and per-diabetes. It is also a higher quality study (crossover design).

    1. because we still remember the quality of service that the restaurant gave us.

      This is pretty much what Service Design, (Digital) Product Design and User Experience Design professionals are (or at least should be) concerned about.

    1. hub.cards allows you to create and design your next modern business card for free. Our newly developed editor is like no other on the web and makes all your creative dreams come true. If you're not a creative genius, you can choose from thousands of templates to create an appealing card.

      Best free editor for creating business cards. Digital & physical ones.

  5. Oct 2020
    1. BTech in design engineering or BTech engineering design: Design thinking is a popular concept that spans multiple industries and there are courses, independent of any branch purely focussing on designing products. This is also often referred to as an engineering design course or design engineering course. The idea is to teach how to not just bring in design to develop great products that are aesthetically perfect and ergonomically usable and consumer-focused but also to introduce design as a tool for innovative thinking. The curriculum develops design thinking concepts in a manner basis which students can conceptualise and develop products that are innovative while also boasting of high aesthetic value. These graduates are sought after by all manufacturing industries.

      Design thinking fosters innovative thinking.

      It involes designing user focused, highly utilitarian and aesthetic products.

    1. With Flutter, the quality of app development is such that although being a Hybrid framework, the feel is of a native app. Flutter is the brainchild of Google. Companies want to build the best app for the most number of people that they can reach. Flutter fulfills the exact requirements for the developers as well as the business owners.

      There are several factors to consider in the app development like the benefits of Flutter-based app development, the cost to make a Flutter app, etc. The best mobile app designs and development process goes hand in hand with Flutter.

    1. “Outdoor adult learning can be an antidote and complement to the digital world . . . offering holistic, mentally and physically challenging learning experiences.”

      Adult Learning often takes place within walls or in front of a computer screen this can lead to health problems. This article offers reasons and methods for getting adults outdoors and using Universal Design. Outdoor learning can be used to complement digital learning.

    1. Interaction strategies are a type of accommodation that typically go unnamed and unwritten

      How many times do we use "accommodations" which dance around the relational issues, instead of dealing directly with them?

    1. Typically, platform accessibility APIs do not provide a vehicle to notify assistive technologies of a role value change, and consequently, assistive technologies may not update their cache with the new role attribute value.

      It's too bad they couldn't just allow role to be changed, and assistive technologies would just have to be updated to follow the suit.

    1. Good article about the importance of Universal Design when designing learning opportunities. The authors use plenty of strong sources to back their findings and keep the information concise.

      9/10

    1. Adult learning theories are not just a collection of jargons, concepts, and ideas about how adults learn. These theories help you plan your course during conception, development, and execution, in a way that will facilitate the learning process.

      Outlines adult learning "theories": Andragogy, Transformational Learning, and Experiential Learning, and states that they are important to educational designers, but doesn't really connect them to instructional design, let alone e-design. 3/10

    2. Insights 3 Adult Learning Theories Every E-Learning Designer Must Know

      Adult learning theories for Instructional Designers - Article names adult learning "theories" (andragogy, neuroscience, experiential learning, SDL, and transformational learning). Discusses why these "theories" are relevant to ID. Rating 3/10

    1. Handbook of Research on Student-Centered Strategies in Online Adult Learning Environments

      This article showcases a framework for course design using theory and research in the learning sciences. It defines student-centered learning and explains how it can/ should be used in the creation of the course and when establishing which theories and methods to structure the course around. 9/10, very detailed source.

    1. Instructional Design Approaches For Adult Learners

      (Available as text or podcast.) This article review adult learning theory, cognitive flexibility theory and accompanying design approaches (problem-based learning, collaborative learning). While it affirms strategies, it does little to address incorporation of technology. (2/10)

    1. Blended learning: Efficient, timely and cost effective

      (Click Download full-text PDF to read.) In this article, the authors discuss the blended learning instructional delivery method. Through case study, the authors demonstrate the benefits of blended course design. Furthermore, the article addresses potential detriments (financial, instructional design) of a blended course design. A brief review of considerations and recommendations for a blended design was provided. Though this article focuses on the relationship to forensic science, the information is applicable across disciplines and delivery venues (corporate, academic). (6/10)

    1. Considering that one of the most significant factors of online course quality is instructor presence and interpersonal interaction,4 one of the benefits video can offer is creating faculty presence in an online environment. In the interviews, students cited faculty presence as a key factor related to their engagement and perceived learning from videos. Humor and wit were described positively. Participants also mentioned the benefits of adding personable context to a subject; for instance, faculty members giving examples from their professional experiences about subject material. As one student explained, "The reading is very didactic or academic, but the videos are very real-case scenarios. The instructor narrates: 'How do you take that academic learning into the real world? What does that mean when you're looking at these financial statements?'" Another participant offered: "[The videos] are better than just reading the material because it has more of that human element."

      Melanie Hibbert, the Director of Instructional Media & Technology and Media Center at Barnard College in New York City, writes about what is necessary for good online instructional videos. Hibbert discusses media at Columbia University, methods for creating videos, an what analytics tell us. She concludes by describing the importance of instructor presence more so than the production quality of videos.

      Rating: 9/10

    1. Good instructional design is based on the industry-standard Instructional System Design (ISD) model. The ISD model comprises five stages—analysis, design, development, implementation, and evaluation—and is a systems approach to instructional design in that it views “human organizations and activities as systems in which inputs, outputs, processes (throughputs), and feedback and control elements are the salient features.”

      This article discusses visual, auditory, and kinesthetic learning styles and the importance of communicating in ways that appeal each style. It then outlines what this means for the Instructional System Design (ISD) model. The author concludes by outlining learning outcomes, organization, interactive instruction, and content versus connection versus application. The author proposes that "good instructional design is based on the industry-standard Instructional System Design (ISD) model" (p 5).

      Rating: 7/10

    1. Service design principles support the development of services which deliver high quality experiences to users and customers
    2. Data shall be normalized between the organization and its customers and within the organization itself Data shall be easy to transfer and be reusable within the organization and within the partner network Wherever possible data entry shall be avoided and be replaced by data lookup, selection and confirmation utilities instead
    3. Information flow is key to delivering high quality services; if people don’t know what they’re supposed to and when they’re supposed to know it – service suffers.
    4. Work groups are to be organized so that they match the processes and the competencies required Individual workers will be given sufficient autonomy to make useful decisions Work will take place in a location where it is done with the most efficiency

      Organizational Design Principles for Service Design

    5. Any activity that fails to add value for the customer should be eliminated or minimized Work is always structured around processes and not around internal constructs such as functions, geography, product, etc. Work shall not be fragmented unless absolutely necessary. This enables accountability and responsibility from a single individual and reduces delays, rework, etc. It encourages creativity, innovation and ownership of work. Processes should be as simple as possible. Focus on reducing process steps, hand overs, rules and controls. Wherever possible the owner of the process should have control over how it is delivered. Processes should reflect customer needs and many versions of a process are acceptable if customers have different needs. Process variation should be kept to a minimum. Process dependencies should be kept to a minimum. (I.e. process in parallel) Processes should be internalized rather than overly decomposed (e.g. training is better than work instructions) Process breaks and delays must be kept to a minimum Reconciliation, controls and inspection of process must be kept to a minimum KPIs for processes will only measure things that matter

      Process design principles for service design

    1. Author explores characteristics of adult learners respective to online learning environments. Andragogy is discussed as a theory, along with SDL and transformational and experiential learning. Author applies theory to design of physical environments to produce optimal circumstances for adult learning. Rating 8/10

    2. Characteristics of Adult Learners With Implications for Online Learning Design

      The author reviews assumptions of the adult learner and adult learning theory. In discussion of adult learning theories (self-directed learning, experiential learning, transformational learning), the article investigates their use in online learning. Furthermore, the author provides online course development recommendations for the adult learner. A brief critique of andragogic principles is provided. Adult learning principles used in a live environment are of benefit and necessary in the virtual environment. Click "Full Text" to read article. 7/10

    1. In highlighting the dangers of big-up-front-design (BUFD) and waterfall development, Agilists seem to advocate no-up-front-design (NUFD) or no-up-front-requirements (NUFR) or no-up-front-architecture (NUFA).
    1. Doctoral programs are often highly unstructured learning and training environments, where individual autonomy and freedom are highly valued. Decisions as to what counts as a good idea, a worthwhile project, or adequate progress are often left to the discretion of professors, and criteria for success can be opaque for students. This is even more so for those who are not already “in the know.”
    1. When using React hooks there is no concept of onMount because the idea of only running some code on mount leads to writing non-resilient components, components that do one thing when they mount, and then don’t take prop changes into account.
    2. A component shouldn’t break because it’s rendered more or less often.
    3. Keep the local state isolated.Think about which state is local to a particular UI representation — and don’t hoist that state higher than necessary.
    4. Props and state can change, and components should handle those changes whenever they happen.
    5. Even if a component is rendered just once, your design will improve if rendering twice doesn’t break it.
    1. We get a boilerplate-free API where shared state has the same simple get/set interface as React local state (yet can be encapsulated with reducers etc. if needed).
    1. This piece makes a fascinating point about people and interactions. It's the sort of thing that many in the design and IndieWeb communities should read and think about as they work.

      I came to it via an episode of the podcast The Happiness Lab.

    2. Most of the tech news we get barraged with is about algorithms, AI, robots, and self-driving cars, all of which fit this pattern. I am not saying that such developments are not efficient and convenient; this is not a judgment. I am simply noticing a pattern and wondering if, in recognizing that pattern, we might realize that it is only one trajectory of many. There are other possible roads we could be going down, and the one we’re on is not inevitable or the only one; it has been (possibly unconsciously) chosen.
    1. The path must not twist so much that visitors think they are being led astray, nor be so slow that visitors give up and strike cross-country through search engines. Nevertheless, twists and detours can help designers give their readers more than they expect.

      This makes me wonder if there are interesting major features or patterns we've not created for the web in general. Upsell, crosssell, alternatives, etc... are all corporate features. What about some interesting new artistic features perhaps?

      Almost no websites I run across are designed like this simple garden example. It's as if the website idea has been so rigidly crystalized that there's no room for exploration anymore.

    1. duty of care

      This reminds me of Mike Monteiro's book Ruined by Design from last year which pushes for a code of ethics for designers.

    Tags

    Annotators

    1. The attention of the audience is a writer's most precious possession, and the value of audience attention is seldom more clear than in writing for the Web. The time, care, and expense devoted to creating and promoting a hypertext are lost if readers arrive, glance around, and click elsewhere. How can the craft of hypertext invite readers to stay, to explore, and to reflect?

      A very early statement about what was about to become the "attention economy"

    1. A fun thing to watch for on news sites is when a draft of an article is submitted with an initial slug and title. Later, the title is changed but the slug is left untouched. This can result in some fun situations where the headline of an article has been made more subtle - but the slug retains some fairly blunt language.
    1. It wasn’t just that the headlines, free-floating, decontextualized motes of journalism ginned up to trigger reflexive mouse clicks, had displaced the stories. It was that the whole organizing structure of the newspaper, its epistemological architecture, had been junked. The news section (with its local, national, and international subsections), the sports section, the arts section, the living section, the opinion pages: they’d all been fed through a shredder, then thrown into a wind tunnel. What appeared on the screen was a jumble, high mixed with low, silly with smart, tragic with trivial. The cacophony of the RSS feed, it’s now clear, heralded a sea change in the distribution and consumption of information. The new order would be disorder.

      How can we design against this sort of disorder?

    1. A social network that has the users’ interests in mind would look completely different than today’s Twitter and Facebook. It would be designed to help you with your social interactions, quickly and efficiently, not trying to make you spend maximum amount of minutes on the site. Facebook, and increasingly Twitter (as their owners have started demanding profits), are doing the opposite. They . . . steal your time, make you do pointless stuff, filter in advertising in your news feeds, delete pages and users organising protests etc, mine their “big data” to find the best ways to use our weaknesses for pointless click-bait . . .

      This is a great quote which highlights the difference in the overall design ideas of social sites like Facebook and Twitter and the design of IndieWeb sites.

    1. Different UX design teams follow different approaches in creating mobile-app wireframes. Some may help you come through with flying colors, while others may lead to failure. In this article, I’ll describe eight important steps that can help a mobile-app design company to build best-in-class wireframes for their projects.

      Wireframes play an important role in both the design and development of mobile apps. As you make decisions about an app’s functionality and create wireframes to depict your design solutions, your wireframes pass through various stages.

    1. However, if you want to create a backend API that is meant to be consumed only by your frontend, then you don't need REST nor GraphQL — RPC, such as Wildcard, is enough.
    1. Öffnet für mich nach der ersten Lektüre einen ganz neuen Zugang zur Verbindung von Theorie und Design Praxis. Man kann sich von hierher einen Rahmen für eine "Content strategy for degrowth" als eine nicht anthropozentrische Designpraxis vorstellen. Sehr viele Verweise.