This document discusses atomic and modular design approaches. It begins by defining modules and patterns, explaining that modules can be independently created and combined in different systems. It then discusses atomic design methodology, which involves designing user interfaces in a hierarchical manner across five stages from atoms to pages. The document also covers creating pattern libraries to promote reusability. It suggests starting by identifying reusable components and not thinking in terms of pages but systems. Overall, the document promotes modular and atomic design principles for building flexible and scalable interfaces.
All matter, no matter how complex, can be broken down into molecules which can be broken down further into atomic elements. All web interfaces can be broken down down the same way. Atomic Design provides a methodology for building an effective design system. It consists of five distint stages: atoms, molecules, organisms, templates and pages.
MIMA 2014 - Changing your Responsive Design Workfloweaselsolutions
Presentation slides from Dustin Tauer's 2014 MIMA Session:
What is your Web workflow? If your situation mirrors that of most organizations, the process often begins with some initial planning and discovery, followed by the design phase. In the design phase, Photoshop is opened and wireframes evolve into static designs. Once approved, these designs are passed to the developer which leads to testing, tweaking, and finally, launch. This workflow is great for traditional websites, but major evolution is needed to account for the changing landscape that is responsive design.
This session will present different strategies and processes for effectively designing and developing responsive websites. We’ll look at how taking a content-first approach rather than a design-first approach can significantly reduce the number of issues and iterations throughout the process. With mobile traffic quickly surpassing desktop traffic, a new workflow process is imperative to helping us be better prepared for the constantly changing device landscape.
This document provides an overview of creating a style guide with modularity and reusable components in mind. It discusses defining global styles like color palettes and typography early in the design process. Designers should analyze wireframes to isolate reusable objects and create a shared vocabulary through a style guide. This ensures visual consistency and allows developers to begin work before final designs. The document provides examples and references to support the described approach.
From a lecture for product designers, describing the Atomic Design Approach in theory and practice: the idea of approach and how it was used in production.
The document discusses atomic design principles and best practices for CSS architecture and code. It explains the different levels of atomic design including atoms, molecules, organisms, templates and pages. It provides examples of how to implement atomic design using CSS extensions, mixins, variables and imports. It also outlines recommendations for CSS practices such as managing specificity, using semantic selectors, separating concerns of paint and layout, avoiding magic numbers, and more.
React Storybook, Atomic Design, and ITCSSTrevor Pierce
This document discusses the evolution of web design methodologies from static pages to dynamic single-page applications. It introduces Atomic Design and ITCSS as approaches to bring more structure and scalability to component-based design systems. The author learns to design directly in React using Atomic patterns, CSS Modules, and PostCSS to address challenges with CSS organization and scaling. They create a living style guide using Storybook to demonstrate these techniques.
All matter, no matter how complex, can be broken down into molecules which can be broken down further into atomic elements. All web interfaces can be broken down down the same way. Atomic Design provides a methodology for building an effective design system. It consists of five distint stages: atoms, molecules, organisms, templates and pages.
MIMA 2014 - Changing your Responsive Design Workfloweaselsolutions
Presentation slides from Dustin Tauer's 2014 MIMA Session:
What is your Web workflow? If your situation mirrors that of most organizations, the process often begins with some initial planning and discovery, followed by the design phase. In the design phase, Photoshop is opened and wireframes evolve into static designs. Once approved, these designs are passed to the developer which leads to testing, tweaking, and finally, launch. This workflow is great for traditional websites, but major evolution is needed to account for the changing landscape that is responsive design.
This session will present different strategies and processes for effectively designing and developing responsive websites. We’ll look at how taking a content-first approach rather than a design-first approach can significantly reduce the number of issues and iterations throughout the process. With mobile traffic quickly surpassing desktop traffic, a new workflow process is imperative to helping us be better prepared for the constantly changing device landscape.
This document provides an overview of creating a style guide with modularity and reusable components in mind. It discusses defining global styles like color palettes and typography early in the design process. Designers should analyze wireframes to isolate reusable objects and create a shared vocabulary through a style guide. This ensures visual consistency and allows developers to begin work before final designs. The document provides examples and references to support the described approach.
From a lecture for product designers, describing the Atomic Design Approach in theory and practice: the idea of approach and how it was used in production.
The document discusses atomic design principles and best practices for CSS architecture and code. It explains the different levels of atomic design including atoms, molecules, organisms, templates and pages. It provides examples of how to implement atomic design using CSS extensions, mixins, variables and imports. It also outlines recommendations for CSS practices such as managing specificity, using semantic selectors, separating concerns of paint and layout, avoiding magic numbers, and more.
React Storybook, Atomic Design, and ITCSSTrevor Pierce
This document discusses the evolution of web design methodologies from static pages to dynamic single-page applications. It introduces Atomic Design and ITCSS as approaches to bring more structure and scalability to component-based design systems. The author learns to design directly in React using Atomic patterns, CSS Modules, and PostCSS to address challenges with CSS organization and scaling. They create a living style guide using Storybook to demonstrate these techniques.
Atomic Design es una filosofía de creación de productos tecnológicos basada en la creación de elementos complejos utilizando elementos más sencillos. Pattern Lab es una plataforma basada en esta filosofía para crear sitios web con un diseño consistente. En esta presentación, explico un poco como funciona cada uno.
An introduction to Emulsify
In this presentation, Safallia Joseph of Valuebound has walked us through Emulsify -a component driven prototyping-tool using Pattern Lab. The various agendas include:
A brief intro to Components, Atomic Designs and Pattern Lab
How to get up and running with Pattern Lab in Drupal
An intro to Emulsify
Emulsify’s implementation of CDD
Getting started with Emulsify
Connecting Emulsify to Drupal
Benefits and challenges of a decoupled front end workflow in Drupal Projects
----------------------------------------------------------
Get Socialistic
Our website: http://valuebound.com/
LinkedIn: http://bit.ly/2eKgdux
Facebook: https://www.facebook.com/valuebound/
Twitter: http://bit.ly/2gFPTi8
Data science for infrastructure dev week 2022ZainAsgar1
The document discusses using data science and automation for infrastructure monitoring. It introduces Pixie, a tool that allows users to collect raw data, transform it into signals, and then take actions based on those signals. Two examples are provided: 1) detecting SQL injections from application logs and sending Slack alerts, and 2) automatically scaling a deployment based on HTTP request throughput metrics. Pixie uses an embedded domain-specific language called PxL to define logical data workflows and queries.
The document discusses the concept of atomic design for building interfaces and design systems. It provides examples of existing style guides and pattern libraries. It also describes how atomic design breaks interfaces down into basic elements called atoms, and combines them into larger components called molecules, organisms and templates. Real content can then be piped into the templates.
The document discusses the need for a new design process called "atomic design" in the post-PSD era. It outlines some of the problems with the traditional pixel-perfect PSD workflow and presents atomic design as an alternative. Atomic design involves designing systems rather than pages by breaking interfaces down into reusable atomic elements like atoms, molecules and organisms. This allows for faster, more collaborative and responsive design processes.
Presented during Javascript MVC Amsterdam meetup, 29 Jan 2014: http://www.meetup.com/JavaScript-MVC-Meetup-Amsterdam/events/156767102/
At De Voorhoede (http://voorhoede.nl) I'm responsible for setting up new front-end projects in such a way that it's easy for teams to work with. This presentation explains how we structure these projects. The presentation includes some tips on structuring larger AngularJS projects.
Atomic Design - An Event Apart San DiegoBrad Frost
Design systems, not pages. This is an introduction to atomic design (http://bradfrostweb.com/blog/post/atomic-web-design/), a methodology for crafting an effective interface design system. It also introduces Pattern Lab (http://patternlab.io/), a tool for implementing atomic design systems and pattern libraries.
This document discusses Atomic Design, a methodology for building design systems. It begins by explaining that interfaces are made of systems of components, not just pages. It then discusses frameworks like Foundation and Bootstrap, as well as their potential pitfalls. The document introduces Atomic Design and its principles of separating interfaces into abstract and concrete levels. It explains Pattern Lab as a tool for building design systems and provides examples of existing style guides. Overall, the document advocates for a systematic approach to design to improve collaboration and build reusable and scalable components.
Creating Living Style Guides to Improve PerformanceNicole Sullivan
Refactoring Trulia’s UI with SASS, OOCSS, and handlebars. My slides from jsconf 2013. Lot's of yummy details about the performance improvements we were able to make.
Style Guides Are The New Photoshop (Fronteers 2012)Stephen Hay
A slightly modified version of the talk I first presented at Smashing Conference, now presented at Fronteers 2012. (http://fronteers.nl/congres/2012)
Use of image editors for creating web design mockups has worked until now, but responsive design is forcing us to find alternatives, as we can't simply create more mockups as we design for more screens. Have no fear, there is at least one method of replacing Photoshop for web design. Let's take a look at one of the most important aspects of this method: the creation of clear, semi-automated, self-updating style guides.
The Death of Lorem Ipsum & Pixel Perfect ContentDave Olsen
A designer has been asked to mock up a student profile page in Photoshop. It’s beautiful. The student’s name fits perfectly under the profile image. Their bio is split into two columns that perfectly line up. Unfortunately, all of this perfectly laid-out content is an unrealistic best-case scenario. Our content never fits this perfectly. Names are longer than the eleven characters used in the mock-up. Bios naturally vary in length from person to person. The reality is that we will have large variation in our content.
Rather than addressing these variations after we’ve received approvals and started building a website, we should stress-test our designs with real content from the start of our process. To deliver the best possible product, we need to design for the best-case, worst-case, and every-case-in-between when it comes to possible content.
* Learn how systems and patterns can help us build reusable and shareable components for our websites
* Discover the benefits of taking the design process out of Photoshop and moving it to the browser.
* Learn how content specialists can engage with the design process from the beginning and be advocates for realistic content.
* Explore how real and varied content, not lorem ipsum, can be used to test a design and how it might work.
* Discover how developers can also be involved in this process to ease integration of a design with a CMS or a custom solution.
Beyond Squishy: The Principles of Adaptive DesignBrad Frost
Responsive web design has hit the scene like a bomb, and now designers everywhere are showing off to their bosses and peers by resizing their browser windows. "Look! The site is squishy!"
While creating flexible layouts is important, there's a whole lot more that goes into truly exceptional adaptive web experiences. This session will introduce the Principles of Adaptive Design: ubiquity, flexibility, performance, enhancement and future-friendliness. We need go beyond media queries in order to preserve the web's ubiquity and move it in a future-friendly direction.
Atomic design is a methodology for creating design systems that involves breaking down interfaces into basic reusable components. There are five levels in atomic design: atoms, molecules, organisms, templates, and pages. Atoms are the smallest elements like buttons and inputs. Molecules are groups of atoms that work together. Organisms combine molecules and other organisms into more complex components. Templates define the content structure without real content. Pages show templates with actual content for users to interact with. The methodology helps create reusable interfaces and maintainable design systems.
Atomic Design: Creating systems to promote consistency and scalability.
This was a presentation I gave at #FredDev on 2/11/14 and is based on the Atomic Design Principals from @brad_frost bradfrostweb.com/blog/post/atomic-web-design/
Taken from Future of Web Design (#FOWD), London 2015 Conference. http://futureofwebdesign.com/london-2015
Reports are in from Twitter, Medium, and the like; we can’t make full comps, use Photoshop, or even utter the phrase 'visual design' anymore. What’s a designer to do? Has our role evaporated? Fear not! Dan Mall will help redefine the tasks of the modern day designer in light of the multi -device world that snuck up on us.
Styleguide-Driven Development: The New Web DevelopmentJohn Albin Wilkins
The session was originally titled "Managing Complex Projects with Design Components”, but the training I took to become a certified ScrumMaster blew my mind.
Integrating agile development with web development is actually very simple. It's called Styleguide-Driven Development.
In this session, we will discuss the two requirements for Style Guide Driven Development: component-based design and automated style guides.
We're building software helping most demanding online advertisers improve their performance. To stay on top of the competitive, rapidly changing space, the key focus for us has always been product development speed. As the team of the dev-driven company nearly tripled in the last two years, over a dozen of Smartly.io App UI changes go live every day.
Roman is telling about Smartly.io’s experience building a sustainable design system helping company to prototype and take design decisions faster, improve collaboration between designers and developers, empower everyone to contribute to better design, and ultimately create better experience for the customers.
This talk proposes a new approach called Atomic Design for improving agile UX processes. It focuses on enabling rapid prototyping through higher fidelity prototypes, better collaboration between designers and developers on markup and CSS, and improved design asset management through version control. The approach involves organizing design assets into reusable patterns and components stored in a central library. This would allow for continuous incremental improvements to design globally based on user feedback, rather than large, infrequent redesigns. It aims to make discovery and collaboration easier through a shared vocabulary and standardized organization of files.
This document discusses lessons learned from Springer's transition to a responsive website design. It covers their process of redesigning the website structure, wireframing, creating reference mockups, establishing a work backlog, and implementing responsive design techniques like breakpoints, visibility changes, and CSS media queries using Sass. The document also references resources on responsive web design best practices and links to the presenter's slides.
The document discusses a 3-step framework for preparing design systems for the future impacted by technologies like artificial intelligence. Step 1 is to unlearn traditional definitions of design systems and see them as discipline-agnostic. Step 2 is to copy nature by allowing design systems to evolve organically through variation and heredity like natural systems. A nuclear design model is proposed to handle metamorphism of patterns in a scalable way inspired by atomic structure. Step 3 continues the discussion on automation and machine learning.
Atomic Design es una filosofía de creación de productos tecnológicos basada en la creación de elementos complejos utilizando elementos más sencillos. Pattern Lab es una plataforma basada en esta filosofía para crear sitios web con un diseño consistente. En esta presentación, explico un poco como funciona cada uno.
An introduction to Emulsify
In this presentation, Safallia Joseph of Valuebound has walked us through Emulsify -a component driven prototyping-tool using Pattern Lab. The various agendas include:
A brief intro to Components, Atomic Designs and Pattern Lab
How to get up and running with Pattern Lab in Drupal
An intro to Emulsify
Emulsify’s implementation of CDD
Getting started with Emulsify
Connecting Emulsify to Drupal
Benefits and challenges of a decoupled front end workflow in Drupal Projects
----------------------------------------------------------
Get Socialistic
Our website: http://valuebound.com/
LinkedIn: http://bit.ly/2eKgdux
Facebook: https://www.facebook.com/valuebound/
Twitter: http://bit.ly/2gFPTi8
Data science for infrastructure dev week 2022ZainAsgar1
The document discusses using data science and automation for infrastructure monitoring. It introduces Pixie, a tool that allows users to collect raw data, transform it into signals, and then take actions based on those signals. Two examples are provided: 1) detecting SQL injections from application logs and sending Slack alerts, and 2) automatically scaling a deployment based on HTTP request throughput metrics. Pixie uses an embedded domain-specific language called PxL to define logical data workflows and queries.
The document discusses the concept of atomic design for building interfaces and design systems. It provides examples of existing style guides and pattern libraries. It also describes how atomic design breaks interfaces down into basic elements called atoms, and combines them into larger components called molecules, organisms and templates. Real content can then be piped into the templates.
The document discusses the need for a new design process called "atomic design" in the post-PSD era. It outlines some of the problems with the traditional pixel-perfect PSD workflow and presents atomic design as an alternative. Atomic design involves designing systems rather than pages by breaking interfaces down into reusable atomic elements like atoms, molecules and organisms. This allows for faster, more collaborative and responsive design processes.
Presented during Javascript MVC Amsterdam meetup, 29 Jan 2014: http://www.meetup.com/JavaScript-MVC-Meetup-Amsterdam/events/156767102/
At De Voorhoede (http://voorhoede.nl) I'm responsible for setting up new front-end projects in such a way that it's easy for teams to work with. This presentation explains how we structure these projects. The presentation includes some tips on structuring larger AngularJS projects.
Atomic Design - An Event Apart San DiegoBrad Frost
Design systems, not pages. This is an introduction to atomic design (http://bradfrostweb.com/blog/post/atomic-web-design/), a methodology for crafting an effective interface design system. It also introduces Pattern Lab (http://patternlab.io/), a tool for implementing atomic design systems and pattern libraries.
This document discusses Atomic Design, a methodology for building design systems. It begins by explaining that interfaces are made of systems of components, not just pages. It then discusses frameworks like Foundation and Bootstrap, as well as their potential pitfalls. The document introduces Atomic Design and its principles of separating interfaces into abstract and concrete levels. It explains Pattern Lab as a tool for building design systems and provides examples of existing style guides. Overall, the document advocates for a systematic approach to design to improve collaboration and build reusable and scalable components.
Creating Living Style Guides to Improve PerformanceNicole Sullivan
Refactoring Trulia’s UI with SASS, OOCSS, and handlebars. My slides from jsconf 2013. Lot's of yummy details about the performance improvements we were able to make.
Style Guides Are The New Photoshop (Fronteers 2012)Stephen Hay
A slightly modified version of the talk I first presented at Smashing Conference, now presented at Fronteers 2012. (http://fronteers.nl/congres/2012)
Use of image editors for creating web design mockups has worked until now, but responsive design is forcing us to find alternatives, as we can't simply create more mockups as we design for more screens. Have no fear, there is at least one method of replacing Photoshop for web design. Let's take a look at one of the most important aspects of this method: the creation of clear, semi-automated, self-updating style guides.
The Death of Lorem Ipsum & Pixel Perfect ContentDave Olsen
A designer has been asked to mock up a student profile page in Photoshop. It’s beautiful. The student’s name fits perfectly under the profile image. Their bio is split into two columns that perfectly line up. Unfortunately, all of this perfectly laid-out content is an unrealistic best-case scenario. Our content never fits this perfectly. Names are longer than the eleven characters used in the mock-up. Bios naturally vary in length from person to person. The reality is that we will have large variation in our content.
Rather than addressing these variations after we’ve received approvals and started building a website, we should stress-test our designs with real content from the start of our process. To deliver the best possible product, we need to design for the best-case, worst-case, and every-case-in-between when it comes to possible content.
* Learn how systems and patterns can help us build reusable and shareable components for our websites
* Discover the benefits of taking the design process out of Photoshop and moving it to the browser.
* Learn how content specialists can engage with the design process from the beginning and be advocates for realistic content.
* Explore how real and varied content, not lorem ipsum, can be used to test a design and how it might work.
* Discover how developers can also be involved in this process to ease integration of a design with a CMS or a custom solution.
Beyond Squishy: The Principles of Adaptive DesignBrad Frost
Responsive web design has hit the scene like a bomb, and now designers everywhere are showing off to their bosses and peers by resizing their browser windows. "Look! The site is squishy!"
While creating flexible layouts is important, there's a whole lot more that goes into truly exceptional adaptive web experiences. This session will introduce the Principles of Adaptive Design: ubiquity, flexibility, performance, enhancement and future-friendliness. We need go beyond media queries in order to preserve the web's ubiquity and move it in a future-friendly direction.
Atomic design is a methodology for creating design systems that involves breaking down interfaces into basic reusable components. There are five levels in atomic design: atoms, molecules, organisms, templates, and pages. Atoms are the smallest elements like buttons and inputs. Molecules are groups of atoms that work together. Organisms combine molecules and other organisms into more complex components. Templates define the content structure without real content. Pages show templates with actual content for users to interact with. The methodology helps create reusable interfaces and maintainable design systems.
Atomic Design: Creating systems to promote consistency and scalability.
This was a presentation I gave at #FredDev on 2/11/14 and is based on the Atomic Design Principals from @brad_frost bradfrostweb.com/blog/post/atomic-web-design/
Taken from Future of Web Design (#FOWD), London 2015 Conference. http://futureofwebdesign.com/london-2015
Reports are in from Twitter, Medium, and the like; we can’t make full comps, use Photoshop, or even utter the phrase 'visual design' anymore. What’s a designer to do? Has our role evaporated? Fear not! Dan Mall will help redefine the tasks of the modern day designer in light of the multi -device world that snuck up on us.
Styleguide-Driven Development: The New Web DevelopmentJohn Albin Wilkins
The session was originally titled "Managing Complex Projects with Design Components”, but the training I took to become a certified ScrumMaster blew my mind.
Integrating agile development with web development is actually very simple. It's called Styleguide-Driven Development.
In this session, we will discuss the two requirements for Style Guide Driven Development: component-based design and automated style guides.
We're building software helping most demanding online advertisers improve their performance. To stay on top of the competitive, rapidly changing space, the key focus for us has always been product development speed. As the team of the dev-driven company nearly tripled in the last two years, over a dozen of Smartly.io App UI changes go live every day.
Roman is telling about Smartly.io’s experience building a sustainable design system helping company to prototype and take design decisions faster, improve collaboration between designers and developers, empower everyone to contribute to better design, and ultimately create better experience for the customers.
This talk proposes a new approach called Atomic Design for improving agile UX processes. It focuses on enabling rapid prototyping through higher fidelity prototypes, better collaboration between designers and developers on markup and CSS, and improved design asset management through version control. The approach involves organizing design assets into reusable patterns and components stored in a central library. This would allow for continuous incremental improvements to design globally based on user feedback, rather than large, infrequent redesigns. It aims to make discovery and collaboration easier through a shared vocabulary and standardized organization of files.
This document discusses lessons learned from Springer's transition to a responsive website design. It covers their process of redesigning the website structure, wireframing, creating reference mockups, establishing a work backlog, and implementing responsive design techniques like breakpoints, visibility changes, and CSS media queries using Sass. The document also references resources on responsive web design best practices and links to the presenter's slides.
The document discusses a 3-step framework for preparing design systems for the future impacted by technologies like artificial intelligence. Step 1 is to unlearn traditional definitions of design systems and see them as discipline-agnostic. Step 2 is to copy nature by allowing design systems to evolve organically through variation and heredity like natural systems. A nuclear design model is proposed to handle metamorphism of patterns in a scalable way inspired by atomic structure. Step 3 continues the discussion on automation and machine learning.
[DesignOps Global Conference 2019] Samir Dash - 3-steps for buildingdesign e...Samir Dash
This is a PDF of my keynote for DesignOps Global Conference 2019 [https://designops-conference.com/day-2-may-31/]
This is about exploring a framework to build a scalable, portable design system for collaboration and automation by machines.
This keynote is part of Session 4.
Session 4 | (PM) DesignOps in the era of AI and cognitive computing
How are different organizations leveraging people-to-people, people-to-machine and machine-to-machine interactions and autonomous systems to design and create new products and services? How do companies need to change their design practices and development processes in the era of cognitive computing and what roles will DesignOps play?
More :
https://designops-conference.com/
http://desops.io
This document provides an overview of wireframing for product design. It discusses who uses wireframes, including designers, developers, product managers, and others. Wireframes are used to communicate the structure, content, hierarchy, functionality, and behavior of a product interface. The document then covers different styles of wireframing, from low to high fidelity. It also discusses tools for both non-digital and digital wireframing. The goal is to help readers better understand how to use wireframing in the product design and development process.
This document provides an overview of wireframing for product design. It discusses who uses wireframes, including designers, developers, product managers, and others. Wireframes are used to communicate the structure, content, hierarchy, functionality, and behavior of a product interface. The document then covers different styles of wireframing, from low to high fidelity. It also discusses tools for both non-digital and digital wireframing. The goal is to help readers better understand how to use wireframing in the product design and development process.
Will Robots Replace Designers? No. It's more like an exoskeleton for designers. Algorithm-driven design tools can help us to construct a UI, prepare assets and content, and personalize the user experience. In 2016 the technological foundations of these tools became easily accessible, and the design community got interested in algorithms, neural networks and artificial intelligence (AI). Now is the time to rethink the modern role of the designer.
A Product Manager and a Designer Walk into a BarAtlassian
A PM and a designer walk into a bar... that's a joke on it's own! Trying to plan and collaborate across different teams whilst creating a cohesive culture can sometimes feel like a pipe dream, especially with functions such as design and product management that compliment each other. Backed by extensive research, Atlassian's Sherif Mansour, Product Manager, and Alastair Simpson, Head of Design for Platform, Mobile and Comms, share practical tips on how to take this relationship to the next level. You will walk away with ideas and techniques that can help improve the PM-Design relationship, help build world-class software and of course, a few laughs as they explore some anti-patterns along the way.
CSS3 and a brief introduction to Google Maps API v3 Jeffrey Barke
CSS3 is the latest evolution of Cascading Style Sheets, the style sheet language used for describing the presentation of web pages. It adds new features and extends existing ones, though browser support is still evolving. The document discusses CSS3 features and browser support, recommendations for using CSS3, and provides an introduction to the Google Maps API version 3.
No longer can you sustain a traditional application development methodology of building it from scratch. Today, business demands new functionalities and capabilities in almost real-time. And so, shorter time to market and extreme agility is almost unavoidable in building your next killer enterprise application. Here’s some thoughts into how you can do that, SOA-style.
Divide et Impera. Why and how to build a Design SystemRoberto Falcone
We are no longer designing pages, we are now
designing complex systems of components. How can we design, build and maintain consistent and coherent user interfaces?
The speech by Roberto Falcone about Design Systems and Atomic Design @ MilanUXBookClub.
2016 12-05 aOS Brussels - Latest wonders of SharePoint and Office 365Patrick Guimonet
This document summarizes presentations from a conference on the latest features of SharePoint and Office 365. It discusses new capabilities in SharePoint 2016 like hybrid search and sites, the SharePoint Framework, and improved hybrid functionality through tools like the hybrid wizards and scenario picker. For Office 365, new features are highlighted for SharePoint online, including modern pages, Teams, and the importance of governance and adoption for digital workspaces. The document provides an overview of the key topics and capabilities covered at the conference.
This document discusses principles and best practices for collaboration within organizations. It addresses topics like establishing shared values and culture, defining roles and responsibilities across teams, implementing design systems for consistency, and emphasizing communication during the process of creating products and tools. The overall message is that collaborative work requires establishing discipline and guidelines while also allowing for flexibility and humanity between groups.
This document provides information and best practices for mobile design. It discusses Gilt, a flash sales company that saw 40% of revenue from mobile in 2013. It also outlines processes for UX design, including establishing requirements, creating mockups, testing, and iterating. Design tips are provided like organizing files and being pixel precise. Patterns and resources for both iOS and Android are referenced.
The document discusses bridging the gap between current operating systems and AI-integrated systems, including transforming from process-driven to data-driven enterprises and the challenges of big data science initiatives; it also provides two case studies on using artificial intelligence for subjective analytics on social media and developing chatbots.
Daniel Peter, a Salesforce MVP, gave a presentation on Einstein Next Best Action. He demonstrated how to build recommendation strategies using Strategy Builder to customize recommendations for any object. Strategies can include rules and AI by connecting to predictive models through Apex. Some tips included writing formulas directly in Strategy Builder and using dynamic screen flows to launch from recommendations, although passing the recommendation ID is currently limited. The full capabilities of Next Best Action, such as packaging strategies, are still developing.
Milton Naranjo has a Bachelor of Science in Mechanical Engineering from the University at Buffalo and an Associate of Science in Mechanical Engineering from LaGuardia Community College. He has experience designing robots, lamps, and simulating brake systems using various engineering software. Currently, he works removing asbestos while maintaining safety. He is fluent in Spanish and a member of several professional organizations.
The document summarizes a DSC MAIT Demo Day event focused on showcasing projects completed by core team members, including some with a Halloween theme. Five projects are described: [1] A fortune telling AI chatbot trained on Reddit and news data; [2] An AI-generated horror plot generator trained on movie plots; [3] A horror movie recommendation system; [4] A JavaScript chess engine; and [5] An Android/iOS app integrating machine learning models. The document provides technical overviews and lists collaborators for each project. It also announces the launch of the new DSC MAIT website.
Similar to Atomic Design Presentation for Polaris Industries (20)
Fonts play a crucial role in both User Interface (UI) and User Experience (UX) design. They affect readability, accessibility, aesthetics, and overall user perception.
Technoblade The Legacy of a Minecraft Legend.Techno Merch
Technoblade, born Alex on June 1, 1999, was a legendary Minecraft YouTuber known for his sharp wit and exceptional PvP skills. Starting his channel in 2013, he gained nearly 11 million subscribers. His private battle with metastatic sarcoma ended in June 2022, but his enduring legacy continues to inspire millions.
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANEFebless Hernane
CapCut is an easy-to-use video editing app perfect for beginners. To start, download and open CapCut on your phone. Tap "New Project" and select the videos or photos you want to edit. You can trim clips by dragging the edges, add text by tapping "Text," and include music by selecting "Audio." Enhance your video with filters and effects from the "Effects" menu. When you're happy with your video, tap the export button to save and share it. CapCut makes video editing simple and fun for everyone!
PDF SubmissionDigital Marketing Institute in NoidaPoojaSaini954651
https://www.safalta.com/online-digital-marketing/advance-digital-marketing-training-in-noidaTop Digital Marketing Institute in Noida: Boost Your Career Fast
[3:29 am, 30/05/2024] +91 83818 43552: Safalta Digital Marketing Institute in Noida also provides advanced classes for individuals seeking to develop their expertise and skills in this field. These classes, led by industry experts with vast experience, focus on specific aspects of digital marketing such as advanced SEO strategies, sophisticated content creation techniques, and data-driven analytics.
Connect Conference 2022: Passive House - Economic and Environmental Solution...TE Studio
Passive House: The Economic and Environmental Solution for Sustainable Real Estate. Lecture by Tim Eian of TE Studio Passive House Design in November 2022 in Minneapolis.
- The Built Environment
- Let's imagine the perfect building
- The Passive House standard
- Why Passive House targets
- Clean Energy Plans?!
- How does Passive House compare and fit in?
- The business case for Passive House real estate
- Tools to quantify the value of Passive House
- What can I do?
- Resources
Explore the essential graphic design tools and software that can elevate your creative projects. Discover industry favorites and innovative solutions for stunning design results.
Practical eLearning Makeovers for EveryoneBianca Woods
Welcome to Practical eLearning Makeovers for Everyone. In this presentation, we’ll take a look at a bunch of easy-to-use visual design tips and tricks. And we’ll do this by using them to spruce up some eLearning screens that are in dire need of a new look.
Decormart Studio is widely recognized as one of the best interior designers in Bangalore, known for their exceptional design expertise and ability to create stunning, functional spaces. With a strong focus on client preferences and timely project delivery, Decormart Studio has built a solid reputation for their innovative and personalized approach to interior design.
Storytelling For The Web: Integrate Storytelling in your Design ProcessChiara Aliotta
In this slides I explain how I have used storytelling techniques to elevate websites and brands and create memorable user experiences. You can discover practical tips as I showcase the elements of good storytelling and its applied to some examples of diverse brands/projects..
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page pmgdscunsri
Figma is a cloud-based design tool widely used by designers for prototyping, UI/UX design, and real-time collaboration. With features such as precision pen tools, grid system, and reusable components, Figma makes it easy for teams to work together on design projects. Its flexibility and accessibility make Figma a top choice in the digital age.
ARENA - Young adults in the workplace (Knight Moves).pdfKnight Moves
Presentations of Bavo Raeymaekers (Project lead youth unemployment at the City of Antwerp), Suzan Martens (Service designer at Knight Moves) and Adriaan De Keersmaeker (Community manager at Talk to C)
during the 'Arena • Young adults in the workplace' conference hosted by Knight Moves.
2. Polaris Industries PG&A UX Team - March 2017
alfonso.moreno@polaris.com
Table of Contents
(a) Modules & Patterns
(b) Atomic Design
(c) Pattern Libraries
(d) Where Do We Start?
3. Polaris Industries PG&A UX Team - March 2017
alfonso.moreno@polaris.com
(a) Modules & Patterns
7. Polaris Industries PG&A UX Team - March 2017
alfonso.moreno@polaris.com
Modules are created to build things
that have not yet been imagined.
8. Polaris Industries PG&A UX Team - March 2017
alfonso.moreno@polaris.com
HTML pages
are modularDOCKING
MODULE
NAVIGATION
MODULE
FILTER
MODULE
PRODUCT GRID
MODULE
FOOTER
MODULE
COMMAND
MODULE
SERVICE
MODULE
9. Polaris Industries PG&A UX Team - March 2017
alfonso.moreno@polaris.com
“Modular design, is a design approach that
subdivides a system into smaller parts called
modules or skids, which can be independently
created and then used in different systems.”
Wikipedia
11. Polaris Industries PG&A UX Team - March 2017
alfonso.moreno@polaris.com
It’s also a pattern.
a
12. Polaris Industries PG&A UX Team - March 2017
alfonso.moreno@polaris.com
Patterns repeat...
car
dashboard
highway
trailer
passenger
transmission
13. Polaris Industries PG&A UX Team - March 2017
alfonso.moreno@polaris.com
...and combine differently within same
or varying systems, codes or languages.
dashboard
paneli
daishabord
salpicadero
tableau de bord
instrumententafel
deska rozdzielcza
14. Polaris Industries PG&A UX Team - March 2017
alfonso.moreno@polaris.com
“A design pattern is an element of a user interface
that solves a specific design problem and repeats across
the product in various contexts or with various content.”
15. Design Patterns Are:
Polaris Industries PG&A UX Team - March 2017
alfonso.moreno@polaris.com
Modular
Consistent
Learnable
Scalable
Re-usable
* Road Vector Art Created by Freepic
16. Polaris Industries PG&A UX Team - March 2017
alfonso.moreno@polaris.com
this is a pattern
this is a pattern
this is a pattern
this is a pattern
17. Polaris Industries PG&A UX Team - March 2017
alfonso.moreno@polaris.com
Modular patterns follow hierarchies...
a, b, c... and
“The strongest of all
warriors are these
two — Time and
Patience.”
Letters Words Sentences Narratives
18. Polaris Industries PG&A UX Team - March 2017
alfonso.moreno@polaris.com
...and come together as systems or codes
19. Polaris Industries PG&A UX Team - March 2017
alfonso.moreno@polaris.com
Understanding the pattern hierarchy
of a system is crucial to making it work
letters can make words but words cannot make letters
a, b, c... and and, b, c... and
21. Polaris Industries PG&A UX Team - March 2017
alfonso.moreno@polaris.com
“Atomic design, is a methodology composed
of five distinct stages working together to
create interface design systems in a more
deliberate and hierarchical manner.”
Brad Frost
22. Polaris Industries PG&A UX Team - March 2017
alfonso.moreno@polaris.com
The five stages of atomic design are:
Atoms Molecules Organisms Templates Pages
* from Atomic Design by Brad Frost (atomicdesign.bradfrost.com)
23. Polaris Industries PG&A UX Team - March 2017
alfonso.moreno@polaris.com
Page
Pages are composed of organisms...
Secondary words, lorem ipsum
dolor sit amet consecuenctur
Main Words
Call to Action
Image
Call to Action
Image
Call to Action
Image
Call to Action
LANGUAGESearch this site
NAV. LINKNAV. LINKNAV. LINKNAV. LINKNAV. LINKNAV. LINKNAV. LINKNAV. LINKNAV. LINKNAV. LINK
logotype Organism
Organism
Organism
24. Polaris Industries PG&A UX Team - March 2017
alfonso.moreno@polaris.com
LANGUAGESearch this site
NAV. LINKNAV. LINKNAV. LINKNAV. LINKNAV. LINKNAV. LINKNAV. LINKNAV. LINKNAV. LINKNAV. LINK
logotype
...organisms subdivide into molecules...
Organism
Molecule
Molecule Molecule
Molecule
25. Polaris Industries PG&A UX Team - March 2017
alfonso.moreno@polaris.com
Search this site
...and molecules break into atoms...
Atom
(form field)
Atom
(icon)
Atom (text style) Atom (button)
26. Polaris Industries PG&A UX Team - March 2017
alfonso.moreno@polaris.com
“Atomic design helps predict re-use
and prevent redundancy.” ”
27. Polaris Industries PG&A UX Team - March 2017
alfonso.moreno@polaris.com
(c) Pattern Libraries
28. Polaris Industries PG&A UX Team - March 2017
alfonso.moreno@polaris.com
Identify and collect your distinct
and re-usable components
Don’t think pages, think systems
Mind the semantics,
descriptive labels remain scalable
Fundamentals
29. Polaris Industries PG&A UX Team - March 2017
alfonso.moreno@polaris.com
Who Benefits from a Pattern Library?
* Vector Art Created by Freepic
and, ultimately
Atomic patterns provide the team with a common language
that breaks down silos and facilitates collaborative work.
Content Managers
Create once but output
on separate devices and
brands without being
distracted by visual style
or consistency,
Developers
Re-use common
elements focused on
functionality and unen-
cumbered by rigid visual
standards
Designers
Free to focus on
design integrity while
aware of the functional
capabilities available
within the system.
Brand Managers
More empowered to
enable brand consistency
across different content
and functional needs.
The Polaris Customer
Better prepared to engage
with the business by way of
a more usable, intuitive,
broadly accessible, and
consistent digital experience.
30. Polaris Industries PG&A UX Team - March 2017
alfonso.moreno@polaris.com
Common Obstacle: Design by Committee
From “Designing The Stop Sign” (Parody) --
https://www.youtube.com/watch?v=Wac3aGn5twc
Input
Output
31. Polaris Industries PG&A UX Team - March 2017
alfonso.moreno@polaris.com
#1 Obstacle: Excessive Governance
* cartoon by Quino
Overhead is the enemy of “up-to-dateness”
We must find a balance between stability and change.
Being up to date is more important than anything else.
Stay Agile
“Working software over comprehensive documentation”
(Principle #2 of The Agile Manifesto).
32. Polaris Industries PG&A UX Team - March 2017
alfonso.moreno@polaris.com
Good Examples of Pattern Libraries
Bootstrap
http://getbootstrap.com/components/
Pattern Lab
http://demo.patternlab.io
Lonely Planet
http://rizzo.lonelyplanet.com/style-
Sales Force’s Lightning Design System
https://lightningdesignsystem.com/icons/
Code Pen
http://codepen.io/guide/
Mail Chimp
http://ux.mailchimp.com/patterns/
33. Polaris Industries PG&A UX Team - March 2017
alfonso.moreno@polaris.com
An Atomic Pattern Library
Pattern Lab is a tools agnostic and language
agnostic platform that allows its users
to construct pattern-driven interfaces
in a versatile and device-responsive manner.
See demo at: http://demo.patternlab.io/
34. Polaris Industries PG&A UX Team - March 2017
alfonso.moreno@polaris.com
(d) Where do we start?
35. Polaris Industries PG&A UX Team - March 2017
alfonso.moreno@polaris.com
BECOME ONE OF USBECOME ONE OF US
(Aim For)
Shared Understanding
* from Toy Story 1
36. Polaris Industries PG&A UX Team - March 2017
alfonso.moreno@polaris.com
Stay Agile
Individuals and interactions
over processes and tools
Working software over
comprehensive documentation
Customer collaboration over
contract negotiation
Responding to change
over following a plan
37. Polaris Industries PG&A UX Team - March 2017
alfonso.moreno@polaris.com
EPIserver is
already organized
for pattern
libraries
We’re Already On Our Way There
38. Polaris Industries PG&A UX Team - March 2017
alfonso.moreno@polaris.com
We’re Already On Our Way There
1
3
4
2
1
3
4
5
6
2
1
3
4
5
6
2
HOLDS ICE
AND IT STILL COSTS LESS THAN YETI’S
30 HOURS LONGER Get some!
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh
COMFORTCARRY HANDLES
Consectetuer adipiscing elit, sed diam Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet
TRAVELLOCK SYSTEM
Consectetuer adipiscing elit, sed diam Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet
EASYOUT DRAIN SYSTEM
Consectetuer adipiscing elit, sed diam Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet
NOSLIP RUBBER FEET
Consectetuer adipiscing elit, sed diam Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet
POLARWALL INSULATION
Consectetuer adipiscing elit, sed diam Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet
ICELOCK SEAL
Consectetuer adipiscing elit, sed diam Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet
SHOP FOR COOLERS
Select your brand
REAL PEOPLE, REAL FEEDBACK
POLARIS NORTHSTAR COOLER ACCESORIES
NEW
WIRE BASKET
60 QUART
##### /###
30 QUART
##### /###
SEAT CUSHION
60 QUART
##### /###
30 QUART
##### /###
NEW
NEW
BOTTLE OPENER
ALL COOLERS
##### /###
NEW
LOCK & RIDE
QUICKSTRAP
ALL COOLERS
##### /###
18 CANS OR 36 CANS?
CERTIFIED BEAR RESISTANT
GET SOME! GET SOME!
30 QUART
DEMO CHALLENGE
1 WAY TO PARTITION
60 QUART
2 WAYS TO PARTITION
POLARIS WINCHES GIVE
YOU BACK YOUR TIME
WHICH ONE WORKS FOR YOU?
WHAT OTHERS ARE SAYING:
POLARIS ENGINEERED
ProHD or HD?Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam Lorem ipsum dolor sit
amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet
HD
CUT STEEL GEARS for improved durability
STEEL SPOOL can handle extreme loads
40% QUIETER – near silent free spooling
SEALED motor and drivetrain
LOW VOLTAGE contractor
INTEGRATED WIRING
& MOUNT PLATES ensure perfect fit
EASY INSTALL
HEAVY DUTY
PRO HD
TESTED 1,200+ PULLS at max load, it works
when you need it to
WITHSTANDS -20F temperatures
SEALED MOTOR & HEAVY DUTY GEARS
operate fully
AUTO STOP TECHNOLOGY – stops winch at
end of pull, prevents driveline stress & over lifting
ALUMINUM FAIRLEAD – extends rope life,
corrosion-resistant
SYNTHETIC ROPE – Superior flexibility, great
strength, lightweight
BUILT FOR YOUR MACHINE, consectetuer adipiscing
elit, sed diam Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh
SEE ALL BENEFITS
Make the right decision for your ride.
What’s the difference?
WORK FASTER
Duis mi lacus, bibendum eu tortor ac, volutpat
vulputate velit. Donec luctus dignissim eros, in
convallis leo. Suspendisse potenti.
PLAY FASTER
Phasellus vulputate, lacus ac facilisis eleifend,
purus nisi vulputate tellus, quis facilisis enim
eros in purus. Integer mi massa, congue et
sagittis eu, venenatis lobortis nisi.
WASTE NO TIME
Quisque mattis risus tortor, quis scelerisque elit
condimentum ut. In ultrices diam pulvinar, posuere
purus id, efficitur tellus. Nam vel mauris metus.
BUY NOW
BUY ONLINE
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam
FIND A DEALER
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam
NEED ACCESORIES?
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam
BUILT BY RIDERS FOR RIDERS, consectetuer
adipiscing elit, sed diam Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh
FULLY INTEGRATED MOUNT & WIRING,
consectetuer adipiscing elit, sed diam Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam
MILITARY TESTED & APPROVED, consectetuer
adipiscing elit, sed diam Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh
RANGER ATV
POLARIS GENERAL
RZR
ACE
GET YOUR WINCH
Select your brand
39. Polaris Industries PG&A UX Team - March 2017
alfonso.moreno@polaris.com
How to Iterate From an MVP
Keep It Simple
Not like this:
1 2 3 4 5
1 2 3 4
Like this: From Design to Learn by Melissa Perri as presented for Lean UX NYC 2014
40. Polaris Industries PG&A UX Team - March 2017
alfonso.moreno@polaris.com
thank you
* all photography (except where noted) borrowed from publicly available content on the internet -- no copyrights claimed or infringement intended