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.
Evolving your Design System: People, Product, and Processuxpin
You'll learn:
How to create and maintain a design system over several years
How people, process, and product change alongside a design system
Lessons learned from growing the Linkedin design system
UI design becomes increasingly important for products and services. Influencing their users' expierence. UX itself determines the value of digital offerings and is their key differentiator. But "historically grown" incoherent interfaces deteriorate value and brand of products and services.
This talk is about design systems, that help to avoid (or overcome) design dept and to enable scaling UX across platforms, products and devices. Modularity and standardisation of repeatedly used aspects helps speeding up processes and increasing business value. Design systems help making user experience tangible to teams and brand values actionable.
Building a Design System: A Practitioner's Case Studyuxpin
- How to build a design system from scratch
- How to audit your product for design consistency
- How to structure and communicate a design system to an Agile team
The SlideShare presentation consists of the summary of the Design System 101 Workshop, as presented by UX Gorilla with Mayank Dhawan.
Link of the event: https://bit.ly/2RwN4RF
The workshop took place on December 01, 2018 at 91springboard, Jhandewalan Extension, New Delhi.
This event was for designers, developers or members of the product team to help them with a clear understanding and give them useful ideas to make better decisions, help their teams to save time so that they can do things they would enjoy.
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/
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.
A design system is a framework of practices that bring designers and products together. It is a platform to identify, and document what to share, whether a visual style, design patterns, front-end UI components, and practices like accessibility, research, content strategy.
The role of design with enterprise organizations is expanding, spreading across product teams and influencing decision-making at higher and higher levels. This scale, paired with the array of devices, browsers, screen sizes, locales, and environments, makes it increasingly challenging to align designers and developers to deliver cohesive user experiences.
In this talk, I’ll discuss the lessons learned, the challenges faced, and best practices for creating and maintaining an effective interface design system.
Evolving your Design System: People, Product, and Processuxpin
You'll learn:
How to create and maintain a design system over several years
How people, process, and product change alongside a design system
Lessons learned from growing the Linkedin design system
UI design becomes increasingly important for products and services. Influencing their users' expierence. UX itself determines the value of digital offerings and is their key differentiator. But "historically grown" incoherent interfaces deteriorate value and brand of products and services.
This talk is about design systems, that help to avoid (or overcome) design dept and to enable scaling UX across platforms, products and devices. Modularity and standardisation of repeatedly used aspects helps speeding up processes and increasing business value. Design systems help making user experience tangible to teams and brand values actionable.
Building a Design System: A Practitioner's Case Studyuxpin
- How to build a design system from scratch
- How to audit your product for design consistency
- How to structure and communicate a design system to an Agile team
The SlideShare presentation consists of the summary of the Design System 101 Workshop, as presented by UX Gorilla with Mayank Dhawan.
Link of the event: https://bit.ly/2RwN4RF
The workshop took place on December 01, 2018 at 91springboard, Jhandewalan Extension, New Delhi.
This event was for designers, developers or members of the product team to help them with a clear understanding and give them useful ideas to make better decisions, help their teams to save time so that they can do things they would enjoy.
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/
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.
A design system is a framework of practices that bring designers and products together. It is a platform to identify, and document what to share, whether a visual style, design patterns, front-end UI components, and practices like accessibility, research, content strategy.
The role of design with enterprise organizations is expanding, spreading across product teams and influencing decision-making at higher and higher levels. This scale, paired with the array of devices, browsers, screen sizes, locales, and environments, makes it increasingly challenging to align designers and developers to deliver cohesive user experiences.
In this talk, I’ll discuss the lessons learned, the challenges faced, and best practices for creating and maintaining an effective interface design system.
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.
In this talk we’ll uncover our journey in creating a Design System for Skyscanner and share our learnings on how we sold it to the business by proving its worth. We’ll talk through some of the design and tech considerations we’ve made and share the tools and techniques which have helped us along the way.
A design system can vastly improve your team's productivity, but most of all, it leads to better products! The challenge lies in creating a mature system and leading its adoption across the company successfully. Let's talk about how we learned to meet the needs of different designers and developers on different products, on different tech stacks, on different platforms. Attendees will go home with tips they can use to improve design systems of any stage.
Design Systems First: Everyday Practices for a Scaleable Design Processuxpin
You'll learn:
- How to create, adopt, and maintain your first design system
- How to practice a “design systems first” process of product development
- How to build and govern a design systems operations team
Organizational Design for Effective Software DevelopmentDev9Com
A Presentation by Faith Cooley on Organizational Design for Effective Software development. Check out this deck to see some of the leading changes we've seen in companies that need to get their software to market faster and more efficiently. Org Design and Agile/Continuous Delivery work hand in hand to tune your process effectively.
A proposal for creating a standardised file format for storing design token data. More info at: https://udt.design/
The hope is that, by standardising the file format, new and existing tools that operate on design tokens will become more interoperable than they are today.
Creating and Scaling an Enterprise Design Systemuxpin
You'll learn:
- How to create a unified design language for a complex organization.
- How to use the most efficient processes and tools for maintaining the design system.
- How to scale code and interaction patterns across platforms and products.
UI-UX Practical Talking, is presentation for a session I did in the GUC & the ITI, about the meaning and the difference between The UI and the UX, the key principals about building good UX of products, focusing on mobility and mobile design.
Trying to build a design system for your project? But still, don't know how to? Then this post gonna teach you how to create the design system for the project!
------------------
Follow me on Instagram to learn more about design
https://www.instagram.com/fazurrehman/
------------------
Understand Design System
A Design System is the single source of truth, which groups all the elements that will allow the teams to design and develop a product even there is lots of benefits to having a design system, but you need to find the right people or company who really need design system or you think you really can solve their business problems by design system!
I will continue the design system in the 2nd post and tell you better understanding and road-map how to build a design system. ⠀
Interested to work with me, let's start working together!
fazurrehman@gmail.com
The Design System is an essential part of today's UX world which provides agility and performance in the longer term. Atomic Design is a part of Design System for designers and developers to build the parts of a complete design.
The terms UI and UX (design) are very often and
used as a single term by many people or designers.
The first thing we need to know straight is that UI
and UX are not the same.
Design is a rather broad and huge term. When
someone says “I’m a designer,” it is not that clear
what they actually do. There are a number of
different responsibilities term designer. There are
many aspects of design now a days.
We've focused on designing Web pages for long time. Pixel perfection & designing the same experience for all devices is not possible. Instead of page-based designs. We need design systems. Atomic design allows us to traverse from abstract to concrete. Creators can focus on the atoms and molecules and Clients can focus on pages and templates.
Atomic design and pattern libraries are great for scalability and creating a consistent design system for a product, but they can get quickly out of control. This talk will take you through the creation of an atomic system that separates a product into 3 pattern buckets:
- Content patterns,
- Design patterns, and
- Layout patterns.
We’ll also walk through workflows and how these patterns can all come together to create a scalable system that can create content-based design modifications that create endless module combinations with almost no extra effort.
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.
In this talk we’ll uncover our journey in creating a Design System for Skyscanner and share our learnings on how we sold it to the business by proving its worth. We’ll talk through some of the design and tech considerations we’ve made and share the tools and techniques which have helped us along the way.
A design system can vastly improve your team's productivity, but most of all, it leads to better products! The challenge lies in creating a mature system and leading its adoption across the company successfully. Let's talk about how we learned to meet the needs of different designers and developers on different products, on different tech stacks, on different platforms. Attendees will go home with tips they can use to improve design systems of any stage.
Design Systems First: Everyday Practices for a Scaleable Design Processuxpin
You'll learn:
- How to create, adopt, and maintain your first design system
- How to practice a “design systems first” process of product development
- How to build and govern a design systems operations team
Organizational Design for Effective Software DevelopmentDev9Com
A Presentation by Faith Cooley on Organizational Design for Effective Software development. Check out this deck to see some of the leading changes we've seen in companies that need to get their software to market faster and more efficiently. Org Design and Agile/Continuous Delivery work hand in hand to tune your process effectively.
A proposal for creating a standardised file format for storing design token data. More info at: https://udt.design/
The hope is that, by standardising the file format, new and existing tools that operate on design tokens will become more interoperable than they are today.
Creating and Scaling an Enterprise Design Systemuxpin
You'll learn:
- How to create a unified design language for a complex organization.
- How to use the most efficient processes and tools for maintaining the design system.
- How to scale code and interaction patterns across platforms and products.
UI-UX Practical Talking, is presentation for a session I did in the GUC & the ITI, about the meaning and the difference between The UI and the UX, the key principals about building good UX of products, focusing on mobility and mobile design.
Trying to build a design system for your project? But still, don't know how to? Then this post gonna teach you how to create the design system for the project!
------------------
Follow me on Instagram to learn more about design
https://www.instagram.com/fazurrehman/
------------------
Understand Design System
A Design System is the single source of truth, which groups all the elements that will allow the teams to design and develop a product even there is lots of benefits to having a design system, but you need to find the right people or company who really need design system or you think you really can solve their business problems by design system!
I will continue the design system in the 2nd post and tell you better understanding and road-map how to build a design system. ⠀
Interested to work with me, let's start working together!
fazurrehman@gmail.com
The Design System is an essential part of today's UX world which provides agility and performance in the longer term. Atomic Design is a part of Design System for designers and developers to build the parts of a complete design.
The terms UI and UX (design) are very often and
used as a single term by many people or designers.
The first thing we need to know straight is that UI
and UX are not the same.
Design is a rather broad and huge term. When
someone says “I’m a designer,” it is not that clear
what they actually do. There are a number of
different responsibilities term designer. There are
many aspects of design now a days.
We've focused on designing Web pages for long time. Pixel perfection & designing the same experience for all devices is not possible. Instead of page-based designs. We need design systems. Atomic design allows us to traverse from abstract to concrete. Creators can focus on the atoms and molecules and Clients can focus on pages and templates.
Atomic design and pattern libraries are great for scalability and creating a consistent design system for a product, but they can get quickly out of control. This talk will take you through the creation of an atomic system that separates a product into 3 pattern buckets:
- Content patterns,
- Design patterns, and
- Layout patterns.
We’ll also walk through workflows and how these patterns can all come together to create a scalable system that can create content-based design modifications that create endless module combinations with almost no extra effort.
To the Pattern Lab! Better Collaboration in Drupal Using Atomic Design Princi...Daniel Ferro
Learn how to use styleguide/prototyping tools like Pattern Lab to increase collaboration between designers, themers, developers, and clients on Drupal projects. A focus on modular design early on in a Drupal project improves workflow and efficiency for the whole team.
After applying modular design principles into your design workflow you will have:
Shinier, more polished sites: You’ll improve collaboration between themers and designers without relying so much on static photoshop comps, dramatically improving the end product’s quality at a higher detail level.
Happier clients: Clients will be able to see functional visual designs earlier in the sprints, and be able to play with the site in an easy to use interface.
Happier developers: Developers can concentrate on the hard work of building the site while themers and designers concentrate on the visual design.
Project managers overcome with joy: Sites will be more easily themed, front-end bugs will be caught earlier, clients can see progress sooner, designers will be less bogged down in Photoshop iterations, and projects will be more successful.
Generate a Living Style Guide from CSS - CSSDevConf 2016Matt Vanderpol
Tips, tricks, and tools to generate a living style guide from comments in a CSS/Sass/Less/Stylus file. Sample working project at http://bluemallard.net
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...die.agilen GmbH
Der klassische Designprozess kommt im RWD-Zeitalter an die Grenzen. Der RWD-Workflow fordert eine iterative und inkrementelle Herangehensweise an Design und das daraus entstehende Frontend, das als Prototyp früh zu Verfügung stehen soll. Atomic Design ist ein sinnvoller und erprobter Ansatz, um dies zu realisieren. Der Vortrag geht dazu auf alle Aspekte von Atomic Design ausführlich ein und zeigt anhand eines Praxisbeispiels die konkrete Umsetzung.
Embracing Uncertainty: Learning to Think ResponsivelyChad Currie
Presented to IxDA Austin on March 6, 2013.
Adopting Responsive Web Design practices means shifting the way we work. Get practical suggestions for streamlining your design process in the multi-screen world.
My talk at the @media Ajax conference in London in November 2007 about the non-technical steps you can take to make JavaScript and Ajax work for larger teams.
You're organised, you love spreadsheets, you're a great cheerleader, you handle a backlog with superhero skills, and now you're faced with managing a Drupal project and everything just feels foreign. It's not you, it's Drupal. The mix of site building, front end development, backend development, and over 20,000 contributed modules makes project management for Drupal exceptionally frustrating for people who've not worked with Drupal before.
This session will cover:
- the basic Drupal development workflow (from a developer's perspective, but without using developer jargon)
writing useful tickets which developers can accomplish
- estimation tips for multi-discipline tickets (design / back end / front end)
- ideal team structures -- and what to do if you can't get them
Updated from DrupalCamp London to include the truisms I've learned about being a first-time project manager.
On Selecting JavaScript Frameworks (Women Who Code 10/15)Zoe Landon
For front-end developers, there's a never-ending stream of new things to learn. New frameworks, with new philosophies, seem to be released on a daily basis. How, then, do you pick which one to use? The answer, as it happens, has nothing to do at all with JavaScript.
Following on from the success of last year, this annual event for London's architect community will have architectural innovation as a theme this year, and particularly CQRS. At the DDD eXchange we will feature leading thinkers and architects who will share their experience and Eric Evans is the programme lead.
What is the ‘Cloud’? Today almost every self-proclaimed industry pundit who attempts to describe cloud computing talks about ‘elasticity’ or how magically new servers appear in the cloud with a swish of a magic wand!
But, is that all we get with cloud computing?! What is wrong or missing in today’s software world? Didn’t we build and run software for the past 50+ years? Why do we need this cloud computing all of a sudden? This whitepaper attempts to answer whether cloud computing is the right strategy for you and your enterprise. The intent of this paper is not to try and compare various cloud offerings (either Azure or Amazon), the objective is to sow new ideas in your mind and the intent is to explain in layman’s terms how cloud computing is silently revolutionizing our 50 year old industry.
This presentation was given at the jQuery conference 2010 in Mountain View and featured the first public premiere of a sneak peek video of our upcoming JavaScript game engine.
The video preview can be found here: http://youtu.be/Ol3qQ4CEUTo
Enjoy and follow me at @pbakaus on Twitter!
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
Keynote at DIGIT West Expo, Glasgow on 29 May 2024.
Cheryl Hung, ochery.com
Sr Director, Infrastructure Ecosystem, Arm.
The key trends across hardware, cloud and open-source; exploring how these areas are likely to mature and develop over the short and long-term, and then considering how organisations can position themselves to adapt and thrive.
"Impact of front-end architecture on development cost", Viktor TurskyiFwdays
I have heard many times that architecture is not important for the front-end. Also, many times I have seen how developers implement features on the front-end just following the standard rules for a framework and think that this is enough to successfully launch the project, and then the project fails. How to prevent this and what approach to choose? I have launched dozens of complex projects and during the talk we will analyze which approaches have worked for me and which have not.
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf91mobiles
91mobiles recently conducted a Smart TV Buyer Insights Survey in which we asked over 3,000 respondents about the TV they own, aspects they look at on a new TV, and their TV buying preferences.
Search and Society: Reimagining Information Access for Radical FuturesBhaskar Mitra
The field of Information retrieval (IR) is currently undergoing a transformative shift, at least partly due to the emerging applications of generative AI to information access. In this talk, we will deliberate on the sociotechnical implications of generative AI for information access. We will argue that there is both a critical necessity and an exciting opportunity for the IR community to re-center our research agendas on societal needs while dismantling the artificial separation between the work on fairness, accountability, transparency, and ethics in IR and the rest of IR research. Instead of adopting a reactionary strategy of trying to mitigate potential social harms from emerging technologies, the community should aim to proactively set the research agenda for the kinds of systems we should build inspired by diverse explicitly stated sociotechnical imaginaries. The sociotechnical imaginaries that underpin the design and development of information access technologies needs to be explicitly articulated, and we need to develop theories of change in context of these diverse perspectives. Our guiding future imaginaries must be informed by other academic fields, such as democratic theory and critical theory, and should be co-developed with social science scholars, legal scholars, civil rights and social justice activists, and artists, among others.
PHP Frameworks: I want to break free (IPC Berlin 2024)Ralf Eggert
In this presentation, we examine the challenges and limitations of relying too heavily on PHP frameworks in web development. We discuss the history of PHP and its frameworks to understand how this dependence has evolved. The focus will be on providing concrete tips and strategies to reduce reliance on these frameworks, based on real-world examples and practical considerations. The goal is to equip developers with the skills and knowledge to create more flexible and future-proof web applications. We'll explore the importance of maintaining autonomy in a rapidly changing tech landscape and how to make informed decisions in PHP development.
This talk is aimed at encouraging a more independent approach to using PHP frameworks, moving towards a more flexible and future-proof approach to PHP development.
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Tobias Schneck
As AI technology is pushing into IT I was wondering myself, as an “infrastructure container kubernetes guy”, how get this fancy AI technology get managed from an infrastructure operational view? Is it possible to apply our lovely cloud native principals as well? What benefit’s both technologies could bring to each other?
Let me take this questions and provide you a short journey through existing deployment models and use cases for AI software. On practical examples, we discuss what cloud/on-premise strategy we may need for applying it to our own infrastructure to get it to work from an enterprise perspective. I want to give an overview about infrastructure requirements and technologies, what could be beneficial or limiting your AI use cases in an enterprise environment. An interactive Demo will give you some insides, what approaches I got already working for real.
State of ICS and IoT Cyber Threat Landscape Report 2024 previewPrayukth K V
The IoT and OT threat landscape report has been prepared by the Threat Research Team at Sectrio using data from Sectrio, cyber threat intelligence farming facilities spread across over 85 cities around the world. In addition, Sectrio also runs AI-based advanced threat and payload engagement facilities that serve as sinks to attract and engage sophisticated threat actors, and newer malware including new variants and latent threats that are at an earlier stage of development.
The latest edition of the OT/ICS and IoT security Threat Landscape Report 2024 also covers:
State of global ICS asset and network exposure
Sectoral targets and attacks as well as the cost of ransom
Global APT activity, AI usage, actor and tactic profiles, and implications
Rise in volumes of AI-powered cyberattacks
Major cyber events in 2024
Malware and malicious payload trends
Cyberattack types and targets
Vulnerability exploit attempts on CVEs
Attacks on counties – USA
Expansion of bot farms – how, where, and why
In-depth analysis of the cyber threat landscape across North America, South America, Europe, APAC, and the Middle East
Why are attacks on smart factories rising?
Cyber risk predictions
Axis of attacks – Europe
Systemic attacks in the Middle East
Download the full report from here:
https://sectrio.com/resources/ot-threat-landscape-reports/sectrio-releases-ot-ics-and-iot-security-threat-landscape-report-2024/
Let's dive deeper into the world of ODC! Ricardo Alves (OutSystems) will join us to tell all about the new Data Fabric. After that, Sezen de Bruijn (OutSystems) will get into the details on how to best design a sturdy architecture within ODC.
Transcript: Selling digital books in 2024: Insights from industry leaders - T...BookNet Canada
The publishing industry has been selling digital audiobooks and ebooks for over a decade and has found its groove. What’s changed? What has stayed the same? Where do we go from here? Join a group of leading sales peers from across the industry for a conversation about the lessons learned since the popularization of digital books, best practices, digital book supply chain management, and more.
Link to video recording: https://bnctechforum.ca/sessions/selling-digital-books-in-2024-insights-from-industry-leaders/
Presented by BookNet Canada on May 28, 2024, with support from the Department of Canadian Heritage.
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Better. Faster. UXier. — AToMIC Design
1. Better. Faster. UXIER.
Atomic Design
Agile UX NYC jennifer gergen
February 25th, 2012 @b9punk
2. Join me in a (day) dream
This talk is about an idea for a new way of doing things, not a baked &
tested solution.
Even describing the problem together is worth it. Let’s start the discussion.
Imagine a better way of handling the brass tacks of agile design.
3. Let’s pretend
we already agree
Design is the difference between awesome and awesome-sauce.
Big Design Upfront just doesn't cut it.
Agile Rocks (We believe!)
Can’t we get more done, faster, with less drama?
5. iterating on
Look & feel
is still a slow boat
We're not so good at iterating when it comes to "big" visual changes.
Most of our regular iterations focus on building or improving features or pages,
and can’t really encompass global look & feel updates.
When this is the case, designers usually choose existing styles (they frequently
hate and are dying to improve), so as not to "break" the look & feel and
confuse their users.
Enough of this and eventually we end up with "redesign" projects. Which suck.
6. Prototyping is
harder than it
should be
The agile manifesto defines simplicity as:
“the art of maximizing the amount of work not done."
Either you're (doing some variation of ) linking comps together, or you have demos that work
fine, but look really rough.
In either case, it's often hard to be sure of your results.
(Maybe the test would have had different results if the hover states had worked properly, etc.)
By the time you marry the two halves, you're so far along that you might as well just
release and figure it out from there.
8. Scenarios that suck.
Hey, I still Dude, just put it on
need that the “Z” Drive.
file...
Was the
attachment
larger than 5mb?
Want to
What? borrow my
I totally emailed thumb drive...?
that to you
yesterday
Developers
don’t have
access to “z.”
10. Scenarios that suck.
Yay! I’m finished!
It looks just
like your design!
Oh no! That’s the
old version...
11. Scenarios that suck.
Hey, This project
sounds familiar... Um, Judy worked on that but
she’s not here anymore.
didn’t we mock this
up last year?
Word. Where are
the comps?
UM...Does
someone have
the password
Yeah. The Blue to her mac?
team was working
on it but it got
de-scoped.
Where are her
files?
12. Scenarios that suck.
Hmm.. let’s see...
Hey team, i know we’re
working on “project y”, but OMG, changing Is this even
“project y” involves “widget x” “widget x” means going to affect
which could really use a new updating 100’s of our KPI’s?
design... pages.
That would be
awesome! That turns our 3
“Widget x” point story into a 20
sucks! point story.
But “widget x” is all over the
place...if i change it here can we ... so that’s a no..
change it everywhere?
13. Scenarios that suck.
What’s with this stylesheet?
There’s no difference between
.grey-text-regular
.text-default-grey
&
.grey-caption-text! ...Dunno, Dude ... That’s what the
designers sent.
i just copied and pasted...
15. Okay,
what do we want?
Global Incremental Style Change or Continuous Design Deployment
actually Rapid useful Prototyping
Good designer ‹—› developer collaboration on markup and css
Good design asset management & collaboration (versioned)
Easy Discovery
16. Continuous
Design deployment
It’s actually agile—smaller changes globally based on user feedback
Redesigns are expensive, and their value is hard to measure, so they happen
very infrequently
Redesigns can cause massive user backlash
Style guides aren’t clairvoyant
No one ever reads the @!&*ing manual anyway
17. Rapid
Actually
Useful Prototyping
High fidelity / low effort
Enable designers & product managers, etc., to create these prototypes
Ability to build prototypes instead of mockups for some projects
18. designer ‹-› developer
collaboration
on markup & css
stay DRY (Don’t Repeat Yourself )
Enable & teach designers to write production-ready code
(images don't have to get re-pathed, etc.)
Share workload for patterns, components & prototypes
Knowledge sharing
Appropriate medium-to-task matching
(no more juggling forms in photoshop)
19. Better design asset
management & collaboration
= version control
The way most designers store & backup their files is just plain scary
It’s central
(The whole team gets their stuff from the same source)
Get all related project design assets together
(Wireframes, comps, copy, etc)
Certainty that you are always working with the newest file
Potential for embedded art
Version control is a form of automatic documentation
20. easy discovery
Shared vocabulary
(across all teams & departments)
Be able to find things quickly, without having to ask
Central & Accessible
Ability to guess what something is by the way it's named
Quickly learn how things are organized
(easy on-boarding)
21. Enter
AToMIC Design
(just go with me on the awkward backronym...)
A ssets
To
M arkup (for)
I terative
C ollaboration
23. Patterns
“A pattern is a solution to a recurring
design problem.”
Examples of patterns are:
buttons
tabs
pagination
They are icons, mechanisms, etc., that
have commonly accepted behaviors that
make up a universally understood visual
language for software.
Borrowed from “Modular Web Design”
by Nathan Curtis
24. Components
“A component is a chunk of a page design.”
A component is a logical
grouping of related
content & functions that
are combined into a
meaningful building block
used—and reused—in the
interface design of a site.
Borrowed from “Modular Web Design”
by Nathan Curtis
25.
26.
27. it’s an organizing
principle
Once you start to think of your content in this way, you can set yourself up to
evolve the look & feel of these chunks in the same way that we evolve our
features and products.
You need the whole team—maybe even the whole department—to help define
and name these chunks, but once you have, you can start organizing your files,
photoshop layers, & css classes, etc. against them.
You’ll get consistent names, and a shared vocabulary.
That, alone, is worth the price of admission...
28. AToMIC Design
Versioned
Design Assets
Organize for L
continuous i
design b
evolution COLLABORATION r
(component + a
pattern scheme) r
y
organized
Markup + CSS
35. Get Started
Define "component" v "pattern" that makes sense for your project/
team
Naming guidelines (semantic, outsiders should be able to guess what it
means, hyphens, no scheme/codes, etc.)
Setup some minimal infrastructure
version control (s) - branch scheme, file organization scheme, etc.
get everyone accounts + training
build the component & pattern browser
Starter workflow
— Iterate until it works for your project —
37. Thanks!
Can we please keep talking about this?
Please connect with
@DesignAtomic
jennifer gergen
@b9punk
—Big ups—
Wayne Warner The whole Ladders Team Our Lovely Hosts
@wawjr3d @Theladders @agileuxnyc