The shorter version of these slides was presented at Amuse UX 2015 Special Meetup (Budapest, Hungary) — http://www.meetup.com/UXbudapest/events/225944151/.
THE UX INTERVIEW – 3 Quick Questions. 3 Short Answers.Marc-Oliver Gern
UX INTERVIEWS is a series of short interview sessions – with senior UX practitioners and Service Design Thinkers. Please let me know if you are free to provide your input, too. I will send you a quick survey with new questions.
This is the story of how we doubled the conversion rate on HubSpot.com, by leveraging a lean design process that's focused on rapid iteration and objectivity. Get an in-depth look at our distinctive UX process and how we've applied it at a public company with over 1,600 employees across 7 global offices. See exactly how it works and walk through every step of a real project, where we redesigned HubSpot.com in a period of less than 3 months. See the results, both quantitatively and qualitatively, and how we achieved them. Walk away with all of the information that you need to apply a similar process at your company. This isn’t another abstract process talk; it’s a hands-on session with actionable learnings and take-aways, backed up by data and a well-documented case study.
A constantly growing and regularly updated collection of UX, CX and usability maturity models. More than 40 maturity models and variations by Jacob Nielsen, Jared Spool, Bruce Temkin, Forrester Research, Adaptive Path and many others.
Embedding Design Thinking at Sony to accomplish Business StrategyAndrea Picchi
The adoption of design thinking has been widely debated inside the design and business community, but very few groups had approached the process with a human-centric approach that is able to consider both cognitive and social psychological requirements.
This session addresses the issue of defining an empirical framework and a strategy, supported by psychology findings and corroborated by direct experiences, that is able to catalyze and measure the adoption of design thinking emphasizing the human and organizational implications that a change of this magnitude implies.
We will also argue that promoting and supporting organizational change is an adaptive challenge that requires counter-intuitive timings in order to support both designers, and non-designers' minds through an inevitable state of disequilibrium.
KLM’s internally-focussed Digital Studio, located at Amsterdam’s Schiphol airport, is part of the Digital Transformation program of KLM and employs almost 60 people with a business, technical or design background. Based on my time working there, I highlight a few of the recent projects, and introduce the people and processes involved that make working for the airline a better experience.
In this presentation, I explain what I have found to be different working for employees versus customers, and share what attendees might learn from this.
THE UX INTERVIEW – 3 Quick Questions. 3 Short Answers.Marc-Oliver Gern
UX INTERVIEWS is a series of short interview sessions – with senior UX practitioners and Service Design Thinkers. Please let me know if you are free to provide your input, too. I will send you a quick survey with new questions.
This is the story of how we doubled the conversion rate on HubSpot.com, by leveraging a lean design process that's focused on rapid iteration and objectivity. Get an in-depth look at our distinctive UX process and how we've applied it at a public company with over 1,600 employees across 7 global offices. See exactly how it works and walk through every step of a real project, where we redesigned HubSpot.com in a period of less than 3 months. See the results, both quantitatively and qualitatively, and how we achieved them. Walk away with all of the information that you need to apply a similar process at your company. This isn’t another abstract process talk; it’s a hands-on session with actionable learnings and take-aways, backed up by data and a well-documented case study.
A constantly growing and regularly updated collection of UX, CX and usability maturity models. More than 40 maturity models and variations by Jacob Nielsen, Jared Spool, Bruce Temkin, Forrester Research, Adaptive Path and many others.
Embedding Design Thinking at Sony to accomplish Business StrategyAndrea Picchi
The adoption of design thinking has been widely debated inside the design and business community, but very few groups had approached the process with a human-centric approach that is able to consider both cognitive and social psychological requirements.
This session addresses the issue of defining an empirical framework and a strategy, supported by psychology findings and corroborated by direct experiences, that is able to catalyze and measure the adoption of design thinking emphasizing the human and organizational implications that a change of this magnitude implies.
We will also argue that promoting and supporting organizational change is an adaptive challenge that requires counter-intuitive timings in order to support both designers, and non-designers' minds through an inevitable state of disequilibrium.
KLM’s internally-focussed Digital Studio, located at Amsterdam’s Schiphol airport, is part of the Digital Transformation program of KLM and employs almost 60 people with a business, technical or design background. Based on my time working there, I highlight a few of the recent projects, and introduce the people and processes involved that make working for the airline a better experience.
In this presentation, I explain what I have found to be different working for employees versus customers, and share what attendees might learn from this.
The web enables many things. Also the ability to liquify your brand and its values. Brand building and establishing and securing are getting more and more important, as we are running towards a generation of multi digital output devices. This presentation creates awareness for that topic, explores how User Experience Design and Documentation can contribute to a cohesive brand experience across all channels.
A design system is a scalable framework of decisions & team behaviors spread across an organization so your products can converge on a cohesive experience. Start your plan with a firm understanding of what parts it includes, products it applies to, and people that will do the work.
Adventures in Integrating UX in Data-Driven CorporationsAngela Obias
Slides from a talk that I gave for a User Experience Philippines event.
I was invited to share my lessons and recommendations from 12 years of working in data-centric roles, and experience of applying UX in three (3) types of companies: enterprise, agency and start-up.
From design specs to user stories (ProductCamp Boston 2016)ProductCamp Boston
More and more agile teams began to value good design, to the extend to actually hire in-house designers to be part of the team. However there is often an unspoken tension between the product manager and the designer: who get to define the user experience? An agile product manager is thinking in terms of user stories, which doesn't always align with the design specs. Vice versa. It eventually boils down to: How can design practices become an integral part of an agile team? Between PM and Design, there may be many disagreements on features and priority. But let's start with a common ground: solving the user pain. Eventually I stopped writing design specs, but to help the PM write better user stories. In this session I'd like to share practical lessons on Design/PM collaboration to bring the best out of both.
About Shanfan Huang
Drawing. Coding. Learning. Making. Exploring. Dancing. bio from Twitter
Shanfan Huang is a product designer at Pivotal Labs, an agile development consultancy that helps the clients transform their way of building software. She aspires to bring Lean UX practice into agile development teams.
The JoomlaChicago Loop sponsored "Joomla & Responsive Design", a presentation focused on the key ingredients and dynamics of making a Joomla website flow and react to the different viewing devices and browser viewport sizes.
Dennis Kmetz (Director of Interactive Media, Taylor Bruce Design Partnership) presented Joomla & Responsive Design on Thursday, March 1, 2012.
Web UI Design Patterns and best-practices guide from http://www.uxpin.com -- the best online wireframing, UX & product management suite available anywhere.
Bootstrapping the Information Architecture (Italian IA Summit)Peter Boersma
When I design, it is in the early stages of an interactive system’s life. There are no widgets to place on screens, or menus to collapse or expand. No wireframes, no screen flows, no accessibility or SEO issues. No search, no controlled vocabulary, no settings screens or personalisation options to design. In short: the project needs to be bootstrapped.
I am involved when a lot of things need to be explored and modelled; the scope and environment of the system, the core concepts that make up its parts, their relationships and their names. So what do we produce in that stage? Mostly so-called concept diagrams.
In this talk, I explain what concept diagrams are, referencing other people’s experiences as well as my own, and how they are useful when a design needs to be bootstrapped. I show how I have used variations of them in recent assignments for KLM and the City of Amsterdam, among others. I will try to convince you that you should create one for each and every situation that needs bootstrapping.
Ingrid Domingues and Johan Berndtsson - Great UX is Here (From Business to Bu...inUse
In this talk, we’ll present five components that are vital if you want to generate value for your organization. Guess what? It’s all about UX. Wether you need to optimise an existing business, or innovate completely new solutions and offerings, great UX is what will make the difference. So join us - and put your business on the road to UX nirvana.
What are you worth?! Product, Marketing & UX compensationJesse Gant
What will get you top dollar? What do hiring and HR managers look at? Education, skill-set, title or past companies? This attempts to breakdown actual titles, salaries, bonus structures, stock options, etc. from entry level positions all the way up to VP and Chief roles. It also includes additional skills that are attractive in today’s market and how to get them!
Improve your design process (UX Vienna)Peter Boersma
In order to do great work you need to influence more parts of the design process than creating wireframes, mockups, or usability test reports. In this talk, I walk attendees through the expanded sphere of influence that designers - and others - have on the user experience. You will do exercises that make you look beyond your deliverables, outside of your department, and past your current way of working. You will learn how to spot opportunities and draft a plan to improve your design process.
The web enables many things. Also the ability to liquify your brand and its values. Brand building and establishing and securing are getting more and more important, as we are running towards a generation of multi digital output devices. This presentation creates awareness for that topic, explores how User Experience Design and Documentation can contribute to a cohesive brand experience across all channels.
A design system is a scalable framework of decisions & team behaviors spread across an organization so your products can converge on a cohesive experience. Start your plan with a firm understanding of what parts it includes, products it applies to, and people that will do the work.
Adventures in Integrating UX in Data-Driven CorporationsAngela Obias
Slides from a talk that I gave for a User Experience Philippines event.
I was invited to share my lessons and recommendations from 12 years of working in data-centric roles, and experience of applying UX in three (3) types of companies: enterprise, agency and start-up.
From design specs to user stories (ProductCamp Boston 2016)ProductCamp Boston
More and more agile teams began to value good design, to the extend to actually hire in-house designers to be part of the team. However there is often an unspoken tension between the product manager and the designer: who get to define the user experience? An agile product manager is thinking in terms of user stories, which doesn't always align with the design specs. Vice versa. It eventually boils down to: How can design practices become an integral part of an agile team? Between PM and Design, there may be many disagreements on features and priority. But let's start with a common ground: solving the user pain. Eventually I stopped writing design specs, but to help the PM write better user stories. In this session I'd like to share practical lessons on Design/PM collaboration to bring the best out of both.
About Shanfan Huang
Drawing. Coding. Learning. Making. Exploring. Dancing. bio from Twitter
Shanfan Huang is a product designer at Pivotal Labs, an agile development consultancy that helps the clients transform their way of building software. She aspires to bring Lean UX practice into agile development teams.
The JoomlaChicago Loop sponsored "Joomla & Responsive Design", a presentation focused on the key ingredients and dynamics of making a Joomla website flow and react to the different viewing devices and browser viewport sizes.
Dennis Kmetz (Director of Interactive Media, Taylor Bruce Design Partnership) presented Joomla & Responsive Design on Thursday, March 1, 2012.
Web UI Design Patterns and best-practices guide from http://www.uxpin.com -- the best online wireframing, UX & product management suite available anywhere.
Bootstrapping the Information Architecture (Italian IA Summit)Peter Boersma
When I design, it is in the early stages of an interactive system’s life. There are no widgets to place on screens, or menus to collapse or expand. No wireframes, no screen flows, no accessibility or SEO issues. No search, no controlled vocabulary, no settings screens or personalisation options to design. In short: the project needs to be bootstrapped.
I am involved when a lot of things need to be explored and modelled; the scope and environment of the system, the core concepts that make up its parts, their relationships and their names. So what do we produce in that stage? Mostly so-called concept diagrams.
In this talk, I explain what concept diagrams are, referencing other people’s experiences as well as my own, and how they are useful when a design needs to be bootstrapped. I show how I have used variations of them in recent assignments for KLM and the City of Amsterdam, among others. I will try to convince you that you should create one for each and every situation that needs bootstrapping.
Ingrid Domingues and Johan Berndtsson - Great UX is Here (From Business to Bu...inUse
In this talk, we’ll present five components that are vital if you want to generate value for your organization. Guess what? It’s all about UX. Wether you need to optimise an existing business, or innovate completely new solutions and offerings, great UX is what will make the difference. So join us - and put your business on the road to UX nirvana.
What are you worth?! Product, Marketing & UX compensationJesse Gant
What will get you top dollar? What do hiring and HR managers look at? Education, skill-set, title or past companies? This attempts to breakdown actual titles, salaries, bonus structures, stock options, etc. from entry level positions all the way up to VP and Chief roles. It also includes additional skills that are attractive in today’s market and how to get them!
Improve your design process (UX Vienna)Peter Boersma
In order to do great work you need to influence more parts of the design process than creating wireframes, mockups, or usability test reports. In this talk, I walk attendees through the expanded sphere of influence that designers - and others - have on the user experience. You will do exercises that make you look beyond your deliverables, outside of your department, and past your current way of working. You will learn how to spot opportunities and draft a plan to improve your design process.
AI and Machine Learning Demystified by Carol Smith at Midwest UX 2017Carol Smith
What is machine learning? Is UX relevant in the age of artificial intelligence (AI)? How can I take advantage of cognitive computing? Get answers to these questions and learn about the implications for your work in this session. Carol will help you understand at a basic level how these systems are built and what is required to get insights from them. Carol will present examples of how machine learning is already being used and explore the ethical challenges inherent in creating AI. You will walk away with an awareness of the weaknesses of AI and the knowledge of how these systems work.
Lean Design Research - Why There’s No Excuse Wasting Money on Bad Products A...Dialexa
In the age of the consumer and consumerism of IT, there’s no question that design thinking is critical to new product success. The importance of design thinking has become so clear that there has been a surge in demand for design at the executive table.
http://by.dialexa.com/lean-design-research-no-excuse-wasting-money-on-bad-products
With the adoption of methods based on rapid experiments to validate hypotheses with customers, there is also a need for design to adapt and respond continually. As such, there is a need to balance the decisions taken in autonomy by teams and the overarching service coherency. Inspired by devOps principles, designOps is a practice that aims to support people across the organization to continuously redesign their products without compromising design excellence. This talk, based on the experience of coaching design teams at different levels, explores the possibilities of moving out from heavyweight upfront analyses, reducing handoffs, and creating reliable feedback loops with end users. A new paradigm, where the ability of design is shifting from being a specific practice to genuinely becoming part of everyone’s job. A key component to enables others, designers and non-designers, to create meaningful experiences in a complex environment.
Balancing Human-Centered Design with Business Outcomes (Part 2: Shift from De...Dialexa
The role of a design team isn’t just to conduct research or add aesthetics to a finished product. Design teams play a critical role in synthesizing research into tangible outcomes for a product and transitioning to the build phase.
Full write-up: https://by.dialexa.com/balancing-human-centered-design-business-outcomes-shift-design-build
Accelerate Innovation & Productivity With Rapid Prototyping & Development - ...Attivio
Today, development teams typically need hundreds of person hours to develop an application or to fully
integrate a new platform. Prototypes and Proofs of Concept (PoC) also take many weeks (or even months)
to develop. If you could significantly reduce these timeframes, you would accelerate time to market and
expedite PoCs and rollouts. This advantage saves money and reduces the risk of missing features, late deliveries or inadequate testing.
During this Morgenbooster, we will dive into the understanding of digital design systems, and why they have become increasingly popular.
What are they? How do they work? What will you gain from building one? And last, but not least we will take you through a couple of tangible experiences and journeys of building such a system.
Throughout the talk we will be sharing experiences from both a design and development perspective.
And hopefully we will all have the feeling of getting one step closer to a design system, which meets all the requirements in modern digital design. A system where all services, assets and communications are designed from one central place to evoke both emotions in a coherent brand experience and support the functional necessities of today’s dynamic business strategies.
IxDA Helsinki meet-up at Smartly.io, Thu, 25th August 2016Pekka Hartikainen
Topics in the meet-up
A Practical Approach to Icon Taxonomy
Teemu Korpilahti, Lead Designer at Crasman
Accept the Imperfectness
Sami Vuori, Visual / UX / UI Designer at Gapps
Losing Control: Design Systems for Complex User Interfaces
Pekka Hartikainen, Design Lead at Smartly.io
How to Use Engineers in a UX DepartmentStephen James
Barbarians at the Gates How to Bring Engineers into Your UX Department in order to Lower Coordination and Transaction Costs and Accelerate Product Development
This is a modified version of a presentation given at an internal UX department offsite meeting for a large technology company back in 2014
A close look at the methodologies, stages and best practices involved in developing products for our times)
What you will get out of this book:
Why Lean IT + Lean Development methodologies are two must-have approaches in your start-up toolkit
Making the right cloud provider and development partner choice for your startup
A thorough overview of how you can build an app on the Google App Engine and how and when integrations will take place
A guide to what a prospective client must look for in a development partner
Fusionops UX position (richard.goldstein@fusionops.comRich Goldstein
FusionOps is the leader in supply chain analytics. We integrate AI, Cloud, and Analytics to help enterprise wide customers from the shop floor to Finance. Were hiring Sr UI Engineers
How to Use Data to Build Products by Tradesy Product AdvisorProduct School
Main takeaways:
- Product Management is probably the most exciting function in technology organizations - it's an art and science that's well-suited for certain personalities
- The goal of a good Product Manager is NOT to launch a product - rather, it's to move a planned metric in the right direction by the right amount
- A good Product Manager can answer the question, "How did your product do yesterday?" We can't answer that without a well-defined analytics strategy and data requirements built into our products
The story of multiple generations of design systems created to support UX design practices at GE. Video of narration here: https://www.youtube.com/watch?v=Ou3v7aiJQU0
PDMA 2008 World Class Web 2.0 Product OrgAdam Nash
This is the presentation from the PDMA 2008 presentation by Adam Nash on "Building a World-Class Web 2.0 Product Organization" from September 15, 2008.
You'll learn:
- How to design ahead of development without chaos
- How to conduct user research within Agile
- How to deliver consistent UX on tight timelines
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.
Презентация Юрия Ветрова "Алгоритмический дизайн: Экзо-скелет для дизайнера" с конференции User Experience Russia 2016. Обновлено для конференции Krupa Product Design Conference 2017.
WUD2012 Tallinn: Y.Vetrov — How to Turn Around an Aircraft CarrierYury Vetrov
The presentation "How to Turn Around an Aircraft Carrier — Changing UX in One of the Europe’s Largest Online Companies" told by Yury Vetrov at Pan-Baltic World Usability Day 2012, Tallinn.
User Experience 2012: Как меняется Mail.Ru — Продукты, процессы, командаYury Vetrov
Презентация части интерфейсной команды Mail.Ru (Юрий Ветров, Алексей Кандауров, Александр Киров, Алексей Сергеев, Наталья Спрогис) на конференции User Experience Russia 2012.
User Experience 2011: Мастер-класс: Кросс-платформенное проектирование для мо...Yury Vetrov
Мастер-класс Юрия Ветрова "Кросс-платформенное проектирование для мобильных — Android, iPhone, Windows Phone 7, Symbian" с конференции User Experience 2011.
IT2Days:Usability / UXRussia Junior: Всемирная история интерфейсов. 1001 прод...Yury Vetrov
Презентация Юрия Ветрова "Всемирная история интерфейсов. 1001 продукт, повлиявший на сегодняшние технологии" с конференции IT2Days:Usability / User Experience Russia Junior 2011
Юзабилити Украина '10: Case Study: Московский Кредитный Банк. Повысить конвер...Yury Vetrov
Презентация Юрия Ветрова "Повысить конверсию или удобство использования? Оба варианта лучше. Кейс с сайтом Московского Кредитного Банка" с конференции Юзабилити Украина '10.
User Experience / UPA Europe 2009: Когда проектирование заказывать не нужно. ...Yury Vetrov
Презентация Юрия Ветрова "Когда проектирование заказывать не нужно. Памятка для клиента и проектировщика" с конференции User Experience / UPA Europe 2009.
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...Mansi Shah
This study examines cattle rearing in urban and rural settings, focusing on milk production and consumption. By exploring a case in Ahmedabad, it highlights the challenges and processes in dairy farming across different environments, emphasising the need for sustainable practices and the essential role of milk in daily consumption.
Book Formatting: Quality Control Checks for DesignersConfidence Ago
This presentation was made to help designers who work in publishing houses or format books for printing ensure quality.
Quality control is vital to every industry. This is why every department in a company need create a method they use in ensuring quality. This, perhaps, will not only improve the quality of products and bring errors to the barest minimum, but take it to a near perfect finish.
It is beyond a moot point that a good book will somewhat be judged by its cover, but the content of the book remains king. No matter how beautiful the cover, if the quality of writing or presentation is off, that will be a reason for readers not to come back to the book or recommend it.
So, this presentation points designers to some important things that may be missed by an editor that they could eventually discover and call the attention of the editor.
You could be a professional graphic designer and still make mistakes. There is always the possibility of human error. On the other hand if you’re not a designer, the chances of making some common graphic design mistakes are even higher. Because you don’t know what you don’t know. That’s where this blog comes in. To make your job easier and help you create better designs, we have put together a list of common graphic design mistakes that you need to avoid.
Can AI do good? at 'offtheCanvas' India HCI preludeAlan Dix
Invited talk at 'offtheCanvas' IndiaHCI prelude, 29th June 2024.
https://www.alandix.com/academic/talks/offtheCanvas-IndiaHCI2024/
The world is being changed fundamentally by AI and we are constantly faced with newspaper headlines about its harmful effects. However, there is also the potential to both ameliorate theses harms and use the new abilities of AI to transform society for the good. Can you make the difference?
Top 5 Indian Style Modular Kitchen DesignsFinzo Kitchens
Get the perfect modular kitchen in Gurgaon at Finzo! We offer high-quality, custom-designed kitchens at the best prices. Wardrobes and home & office furniture are also available. Free consultation! Best Quality Luxury Modular kitchen in Gurgaon available at best price. All types of Modular Kitchens are available U Shaped Modular kitchens, L Shaped Modular Kitchen, G Shaped Modular Kitchens, Inline Modular Kitchens and Italian Modular Kitchen.
3. DOCUMENT-DRIVEN DESIGN
Many designers still focus on deliverables – work products of
their creative process. They do research on a market and users,
define scenarios and IA, explore solutions through sketching and
prototyping, create mockups and guidelines, then give all of their
deliverables to the developers.
4. R.I.P. THIS
As a result, designers spend their time polishing supplementary
documentation instead of focusing on the product itself. The
purpose of most deliverables is simply to transfer knowledge
about the product design to other team members, and they
quickly become obsolete. This approach leads to high
transactional costs. It’s definitely not an optimal approach!
5. THE AGE OF SHREDDER
A new approach requires that designers no longer consider their
work narrowly, focusing on projects whose goal is to launch a new
product or feature. Instead, they focus on bringing a holistic
product platform to market, then evolving it. A product or
product line then grows systematically, and a company’s UX
strategy works on all 3 levels: operational, tactical, and strategic.
6. 3 LEVELS OF UX MATURITY
CHAOS
OPERATIONAL
TACTICAL
STRATEGIC
7. 3 LEVELS OF UX MATURITY
Operational. The designer is just an implementer, working on
individual design tasks and creating design deliverables.
Tactical. An integral part of a product team and deeply
integrates design into other product development processes.
Strategic. The designer is a visionary or product owner who
influences strategic decisions on how to evolve a product.
9. GUIDELINES RULE?
Classic solutions for systematic product design are guidelines and
pattern libraries.
However, they create a
“guidelines → design → front-end code → implementation”
workflow, where a lot of design and product details get lost.
10. 1.
NOBODY READS DOCUMENTATION
Designers often complain that developers don’t read the
documentation. But, to be fair, designers themselves seldom refer
to it when interacting with several people.
They’re always too busy!
11. 2.
A GUIDELINE FOR A PRODUCT LINE?
HUH!
Specifications often require updates, new patterns emerge, and
designers discover better solutions for old designs. As a result,
design implementation and the creation of guidelines move on
parallel tracks.
So where’s the reference design – in the documentation or the
implementation?
12. 3.
DESIGN QUALITY CONTROL
IS TIRESOME AND EXPENSIVE
Designers should control every screen of every product, manually.
This approach requires massive effort, and keeping the design
quality high takes a lot of time – thus, it’s expensive.
13. 4.
PROBLEMS MULTIPLY
WITH DESIGN UPDATES
You should start again from the very beginning, then ensure the
full realization of the new design in every product.
15. THE LIST OF PROBLEMS
IS EVEN BIGGER
Plus, when doing responsive Web design, you can multiply these
issues by the number of breakpoints you’re supporting. Many
companies just hire more designers in this case.
16. BLAZES!
WE CAN’T DO IT
WITHOUT TECHNOLOGY
Systems thinkers are looking at the intersection of design and
technology. Only by moving the reference design from static docs
to the implementation can you shorten the production cycle to
“guidelines = design = front-end code → implementation".
Many troubles with design implementation, enhancement, and
support then go away.
17. TO MARRY
DESIGN + TECHNOLOGY
Many big companies are moving in this
direction because it allows them to create and
implement good designs faster and cheaper.
18. WE DID IT TWICE
We used this ideology to launch two product lines – mobile web
and media products. In this presentation I’ll uncover the details of
building such a platform.
19. 12 MOBILE WEBSITES (2013)
We designed the first batch in 3 months – a new record for us.
A component-based design system was born.
20. 10 NEWS WEBSITES (2014)
Time to market dropped from 1-1,5 years to 6 months.
Not to mention decreased support costs and better quality.
http://health. http://weather http://lady.mai http://auto.ma http://kino.mail.ru/
21. A UNIVERSAL DESIGN SYSTEM
Now we’re building a more universal platform for different
product lines. We have a lot of work to do.
22. 40PRODUCTS
Add to this mobile and tablet sites and apps, promo pages… It's
about two hundred projects if you sum it up. A lot of them are
leaders in their market niches.
My team works on a half of them.
*
*
23. 150MLN USERS (MONTHLY)
Total audience of Mail.Ru Group products. We should be careful
with redesigns – it’s easy to insult them and lose market share.
24. INTUIT HARMONY
There are some fantastic case studies demonstrating it,
including Intuit’s Harmony ecosystem.
28. LOTS OF COMPANIES ARE HERE
In 2012-2013, many companies pursued this approach
simultaneously. We started here too.
29. There are five levels of maturity for this approach:
1. Design principles have been defined, then implemented in
CSS.
2. All products use common UI components.
3. Living guidelines exist that describe design principles and
common components. Example components and pages are
implemented in code, not shown in screenshots.
4. Prototyping is possible using common components of code
from the living guidelines.
5. Design experiments employ common components, making it
possible to compare different approaches.
30. 1. A UNIFIED
VISUAL STYLE,
INTERACTION PRINCIPLES,
INFORMATION ARCHITECTURE
It benefit users by ensuring that an organization’s products are
visually familiar and work in the same way.
This is also great for the brand because it results in a holistic
design for an entire product line.
{
31. 2.
100% 90% GUARANTEE
This development process guarantees consistency of a product’s
UI because all ready-made code blocks and elements come from
the common code base.
The other 10% is up to designers, who should choose design
patterns with care when creating screens. You can build a monster
even with a perfect toolkit.
32. 3.
EASIER TO DO REDESIGNS
AND NEW LAUNCHES
The framework provides all necessary user-interface controls,
patterns, and components. It also helps you to build new designs
really quickly.
33. 4.
EASIER TO MANAGE
A PRODUCT PORTFOLIO
It’s when all products are being built in the same way. Instead of
closely monitoring many separate projects, designers can just
manage a few core guidelines.
34. 5.
LESS ROUTINE WORK
Designers produce less mockups and other unnecessary artifacts.
You can create a page out of ready-made components, bypassing
Photoshop altogether in the future.
35. 6.
SCALING BEST PRACTICES
Successful product decisions have a cumulative effect. For
example, if your new design increases pageview metrics on your
Sports Web site, you can quickly apply those enhancements to all
of your other services.
36. 7.
ALWAYS UP-TO-DATE
You can move from doing large redesigns every couple of years
to constantly updating designs.
Large redesigns take a lot of time and effort, and a thousand little
enhancements that you’ve made to a design throughout its
lifetime typically get lost in the process.
37. MANAGING TRENDS
Using common components would make it easy to capitalize on
whatever the next design trend after flat design might be.
Of course, running after trends is not a viable design strategy.
However, there are sometimes radical transformations that
seemingly happen overnight – as with iOS 7. Companies need a
way to react to such changes quickly.
38. UX STRATEGY’S CRITICAL PART
We had tried to unify design and implementation several times
through specifications, UI Kits, and pattern libraries. But these
were never viable solutions.
Developers rarely requested these deliverables, which were
internal to the design team.
39. Once and for all!
When you create, then reuse
an accurate design implementation,
you can be much more confident
in the quality of the products you launch.
40. The best way to succeed
in a product design-unification effort
is to move design artifacts
to the implementation level.
41. BILL SCOTT
At PayPal, it took 6 weeks to change a block of text
on the home page because of tech constraints. This
slowed down the evolution of designs and made
experiments impossible. At Netflix, he had made
dev-process simplification one of his team’s
primary goals with a flexible HTML5 framework.
42. USE DESIGNER’S HEAD,
NOT JUST THEIR HANDS
Reducing the amount of routine, operational work that designers
must do lets them move their focus to strategic tasks such as
product definition and solving business problems.
43. THE COMPANY BENEFITS TOO
Successful product decisions have a cumulative effect.
Faster time to market and revenues for new products and
features.
Guaranteed design unity.
Reduced costs and efficiency improvements.
Minus costs of creating a platform.
*
*
45. STOP THINKING ABOUT SCREENS!
Instead, view product design and development as platform
development.
For example, look at what Google, Apple, and Microsoft have
done. They’ve made terrific progress by building platforms and
ecosystems. Even if your company is smaller and has less
ambitious goals, you can still learn from these giants.
46. If you deconstruct these platforms’ key elements:
general principles of visual and interaction design,
a portfolio of products that includes their own apps,
as well as a vast array of third-party apps (like made by
partners and contractors),
these have much in common with what any product company
creates.
47. WHERE DO I BEGIN?
TWO WAYS, AGAIN
You can first create guidelines, then build products based on
them.
Or you can launch a successful product, then build guidelines
based on it.
Both of which have pros and cons.
48. WE CHOSE THE SECOND APPROACH
We scaled the already tried-and-tested design that we’d
optimized after doing user research and gathering analytics.
Nearing product launch, then right after release, we conducted
many experiments and tests that led to many design tweaks.
This approach is rocky and requires some refactoring.
*
*
49. PARALLEL TRACKS ARE HARD
While designing guidelines and products simultaneously may
seem ideal, doing so would take an enormous amount of time
because there would be seemingly endless iterations: “A new
pattern is proposed → it’s applied to several products →
inconsistencies are found → the whole team discusses and fixes
the problems → the revised pattern is applied to products”.
On a real project, the product would never get released.
*
*
50. MATT MCMANUS
Tells about “continuous design approach”. It’s
necessary to abandon the long-held concept of
“final designs”. Designers must be involved
throughout the entire product development
process, not just at the beginning.
52. 1.
DESIGN MANIFEST OF PRINCIPLES
A set of about a dozen principles that help us to integrate brand
image with specific product-design decisions.
They work as a high-level checklist that we use to validate our
design patterns.
54. MICROSOFT
They advise focusing on content rather than chrome for Metro design,
and the role of animation is also foundational. Setting such principles
leads to a consistent experience across all products and devices.
55. MY.COM
One principle for our international brand is to combine a minimalistic
white surface for all user-interface blocks with bold red accents.
56. However, other brand qualities include personality and emotion. To support
these without breaking the first rule, we use colorful backgrounds wherever
the main working surface lies on top of a semi-transparent white container.
57. A LANGUAGE FOR EVERYBODY
You should tie design principles to a company’s business strategy.
For design principles, we do this primarily through branding,
ensuring strong impact and value for managers and other team
members.
The purpose of brand design principles is to help you make
design decisions.
58. DESIGN PRINCIPLES FTW
Principles should not overlap, and there should be a reasonably small
number of them to ensure that they’re memorable. You can find
inspiration in this great collection.
59. 2.
INFORMATION ARCHITECTURE
Considering the specific target audience for a product,
information architecture principles should guide the distribution
of features and scenarios across pages or screens, so you can
build a suitable hierarchy and navigation system.
60. Within a product line, the information architectures for different
products can vary significantly, so may require different
approaches:
one-pager;
hierarchy;
linear;
network;
hub and spoke;
or a combination of these.
61. You should define what each of these constructs is good for and
how to map product features and scenarios to them.
You can also cover labeling, metadata, and organizational
schemes – such as alphabetical, geographical, temporal, topical,
task based, audience based, or popularity based.
63. Navigation bars in the header or footer;
Drop-down menus;
Contextual menus, which appear when a user right-clicks or
presses;
Search bars;
Breadcrumbs;
Drop-down list controls for sorting, filtering, or grouping;
Contextual links;
Notification systems and alerts.
64. Illustrate these patterns, showing how they should appear on
typical screens and annotate the illustrations with usage
recommendations that are tied to business goals – for example,
contextual links help improve pageview metrics.
Tie all interaction design patterns to device types – that is,
patterns for Web applications on the desktop, tablets, and mobile
devices, as well as patterns for operating systems that run on
tablets, mobile devices, and wearable devices.
Every device type has its own specific input methods such as
mouse, touch, and voice; shortcuts, including keyboard shortcuts
and gestures; and accessibility features.
65. 4.
VISUAL LANGUAGE
These are specific principles that define visual presentation.
While the manifest of principles speaks on the level of values,
visual language is about specific decisions. We should strive to
keep a high abstraction level in all definitions.
66. 1UI GRID
Superpixels! The increments (or modules) of a grid allow you
to align and measure the sizes and margins of all UI elements.
67. Many products now use an 8-pixel grid, including Android and
Google products. Windows 8 and Windows Phone use a 5-pixel
grid, while iOS uses an 11-pixel grid.
The 8-pixel increment is great because you can always divide it by
2 – for example, to create 2-pixel rounded rectangles. At Mail.Ru,
our UI grid limits sizes and margins to 4, 8, 16, 24, 32, 48, 96, or
128 pixels.
This approach became an unexpected boon for us, greatly
reducing the number of disputes and errors relating to every tiny
screen detail.
It’s better to measure a grid in density-independent pixels (dp)
rather than in pixels.
68. Designers calculate by a rule, not with a gut
It significantly decreases the number of
unnecessary disputes and small mistakes,
hugely improving the quality of design.
70. A 12-pixel grid is most prevalent now because the most popular
frameworks use it.
However, we chose to implement a rhythmic grid – a series of 40-
pixel columns with 20-pixel gutters. This results in 16 columns for
1024-pixel viewports, 20 for 1280-pixel viewports, 24 for 1440-
pixel viewports, and 26 for 1600-pixel viewports. This approach
allowed us to unify different generations of our designs.
The structural grid defines how responsiveness works for layouts
on screens of various resolutions.
71. 3LAYOUTS
Now, getting to the level of specific design solutions, what UI work
areas are necessary, and how are they distributed on the structural
grid?
72. A page layout may consist of a single column, as is popular on
landing pages.
But most follow a classic two-column approach.
However, specialized and professional layouts often have three
columns.
Alternatively, a layout may comprise an infinite flow of cards
or tiles, as popularized by Pinterest.
A layout may also define a vertical ratio, but that’s rare.
73. 4CONTAINERS
Every column in a layout holds containers that stack one after
another. Containers have a common visual style and logic.
74. You place content and controls within containers, which are useful
in defining visual presentation – for example, using borders,
backgrounds, shadows, and headers – and define interaction logic
for the container itself.
Containers make platform development easier and simplify
adding new patterns or tweaking current patterns. If there are
more elements than a container can display on a screen, overflow
logic becomes necessary – for example, a Show More link that
expands a list, page navigation, or infinite scrolling – whether
vertical or horizontal. If you choose horizontal scrolling and want
to change the style and position of arrows or add a swipe gesture
for touch devices, you can do it at the container level instead of
changing every instance.
You can be also define overlays and tutorials here.
*
*
75. 5TYPOGRAPHIC GRID
Line height and type sizes should be based on the UI grid.
Use the idea of base-text scaling to build this grid.
76. For example, in our case, font parameters should be multiplied by
four. This is easy to do for headings, but problems often arise with
the body text:
web-font rendering is unpredictable in Windows and often
requires many hacks and tweaks;
16 pixels for the base text may be too large for a specific user
interface.
Nevertheless, if the line height fits into your UI grid well, it’s
already good enough. Display and text fonts won’t break the grid.
79. UI colors, including black and white and several shades of
gray for base surfaces, borders, and supplementary text;
colors for errors and other system messages – typically, red,
green, and yellow; and colors for links.
Accent colors – for example, for content categories. These
could use some variance algorithm – for example, to display
states, they could be tinted or shaded.
All of these additional colors should be harmonious with the
primary brand colors.
80. 7UI KIT
Once you’ve created UI and typographic grids and paired them
with a color palette, you can create basic building blocks.
81. Buttons (primary and secondary action buttons, option
buttons, text and/or icon buttons for toolbars);
Links;
Generic and specific input boxes;
Drop-down lists such as combo boxes, date pickers, and
country selectors for telephone codes;
Selectors such as check boxes, radio buttons, and switches;
UGC (User-Generated Content) loaders for photos, videos, and
files.
Each of these requires states such as focused, active, hover, and
unavailable.
82. 8DESIGN MATH
o Add the text “Save” in the base text size.
+ Add standard padding around the text.
+ Fill the space around the text with the standard background
color for controls.
+ Draw a border using a standard color, stroke width, and corner
radius.
+ Add a standard box shadow beneath the button.
83. A common language
As long as your design standards exist, they
will lead all designers and developers to
consistently make the same design decisions,
no matter where they are.
84. FORM LAYOUTS
Form elements should have field sets defined. Consider the
placement of field labels, tip or descriptive text, validation rules,
and error text.
85. GRAPHICS AND ILLUSTRATIONS
You should define standards for photos, other content images,
and user avatars, including their proportions, typical sizes, and
alternate sizes for various screen resolutions. Try to fit them into
the column grid.
86. UI ICONS
These should follow brand guidelines, so you can build a
universal icon set for all products.
Define their general style, stroke width, color palette, volume-
representation principles, and their placement in user interfaces
or promotional materials. Lay out small or mid-sized icons in a
standardized grid.
87. Define the general style of illustrations. Consider creating a mood
board when making decisions about style.
You can base large illustrative icons on the metaphors you’ve
used in small UI icons, adding detail.
88. INFOGRAPHICS
AND DATA VISUALIZATIONS
One more design asset to unify.
You’d need all of these only for highly specialized products, but
some of these are in wide use.
89. Tables;
Common types of diagrams such a histograms, pie charts,
and bar, line, and area graphs;
Specialty diagrams such as bubble, ring, radar, and span
charts, Venn and Sankey diagrams, maps and cartograms,
heatmaps, tag clouds, trees and tree maps, mindmaps, block
charts, flow diagrams, timelines, and arc diagrams.
90. ANIMATION MODEL
In a perfect product, all transitions between states and screens
should be based on a well-defined model. Animation should be
consistent, making users more comfortable.
91. For example, an overlay could slide down from the top of the
screen, then slide back up when it’s closing. For a multi-step
wizard, the next step could slide in from the right; the previous
step, from the left.
The best source of inspiration for animations are the three major
mobile operating systems:
Android (orchestration);
iOS (before and after iOS7);
Windows Phone (which introduced the modern approach to
UI animation).
92. ADS
First, define an advertisement grid – within the limitations of the
design grid – which typically determines the visual appearance of
ads.
To determine design-friendly ad formats, it’s critical that you
communicate with sales as much as with developers.
93. Set standards for your ad inventory. Define types and sizes of
display and contextual ads, branding principles for pages and
patterns, and limitations for full-screen banners and other
aggressive advertising approaches.
Set requirements for internal promotions as well.
Second, define an advertising-layout grid, which determines
where ads are placed in a layout.
94.
95. 5.
DESIGN PRINCIPLES IN CODE
Once you’ve defined basic design principles, you can bake them
into your CSS – thus, completing the first platform-maturity level.
Plus, icon fonts and SVG sprites simplify your usage of graphics.
Designers should understand code, so they can build a truly
future-proof platform.
96. Design is defined on every project phase
Systems thinking and the continuous
improvement of a design implementation
throughout the product development cycle are
key to delivering high-quality products.
97. GLOBAL VARIABLES
Modern CSS preprocessors like SASS and Less let you define
variables, which is a great way of implementing design principles
in code.
Once you’ve defined standards in code, you can easily update
them globally, magically changing the design of your whole
product line.
98. TOKENS TO UNIFY WEB AND NATIVE
These are “super variables” stored outside of a specific platform
like web, iOS, Android, etc. Then this specific platform imports
tokens and stores variables in CSS, XML, or other format required
by its technology.
It allows you to keep visual language consistent across web and
native development environment.
The idea was proposed by Salesforce
*
*
99. TYPICAL PAGE LAYOUTS
Also, code examples of typical page layouts, including a header,
footer, content area, and columns will make your guidelines easier
to use and understand.
101. UI COMPONENTS
Since your goal is to simplify your production cycle to
“guidelines = design = front-end code → implementation”,
a component is ready-made code that defines a UI element
and applies visual appearance and user-interaction logic to it.
Components should be independent of their context, so you can
put them anywhere, on any page, and they won’t break.
102. PATTERNS 2.0
A component is a classic design pattern. The difference is that you’re
no longer using deliverables to define them, control their
implementation quality, or support them.
103. COMPANY-WIDE UPDATES
Furthermore, if you want to update a pattern, you just have to
change the code in the unified code base to update the
component in all of the products based on your framework.
104. Here are some examples of components:
navigation – tabs, alphabetical navigation, calendar navigation,
search, filters, sorting controls, and a browsing history;
lists – drop-down lists, matrices, horizontal sliders, and
asynchronous tile grids;
media – videos, infographics, a photo gallery, and social-media
embeds;
informers – gadgets that display information about the weather,
stocks and commodities, sport statistics, schedules, horoscopes, or
world clocks;
social interactions – comments, surveys, ratings, feedback, and
social sharing.
105. TYPICAL PAGES
In addition to defining specific components, you should define
typical page types based on them. Create newsletter templates as
well.
It’s best to standardize anything that you use more than once.
106. News listing;
Article;
Search results;
Settings;
User profile;
Sign in and sign up;
Blank pages
Server errors.
107. SEMANTIC CODE IN COMPONENTS
One basic principle is that the names for patterns should have
semantic meaning and refer to types of elements rather than their
style – for example, second-level heading or surface for cards
rather than 24pt font or surface color #F0F0F0 – or refer to their
target usage – for example, main content, more information on a
topic, or supplementary links.
As long as you do this, the goal of making updates across your entire
product line easy will work as intended.
*
*
108. UNIFICATION OR BORINGFICATION?
Having several products or services based on the same
components might lead to boring user interfaces.
Your platform should let you stylize certain properties of
components for specific products, without altering the main
component’s essential design.
109. STYLIZATION EXAMPLES
Our team decided to use different accent colors for specific products. Each
product has its own accent color to differentiate it from other products. You
can also use different fonts, decorative elements, illustrations, and icons.
111. 100% ACCURATE
It shows a real implementation, not just screenshots.
This radically simplifies quality control for a product line.
112. Its first sections should describe general principles, which you’ve
extracted from your actual CSS.
Then include ready-made components that you’ve used in real
products. You should describe each of these components,
including where and why it should be used.
Even if you’ve built a simplified system that is similar to Bootstrap,
it will help you greatly in systematizing design.
113. I LOVE THIS RESOURCE!
I refer to styleguides.io again –
it’s a huge directory of tools to create living guidelines.
114. AUTO-HEALING SYSTEM
A spider script occasionally goes through all products, comparing
their CSS to reference values.
Then, if there are inconsistencies, designers should get a list of
the problems discovered.
116. LESS INSERTIONS
Once all key parts of a platform are up and running, you can
simplify your production cycle even further and leave behind
tools for deliverables creation entirely.
When living guidelines show a component’s HTML code, it
becomes easy to create a real page in an HTML editor using
layout templates.
117. PHOTOSHOP SUCKS LESS OFTEN
Many designers are no longer afraid to code. Coding in HTML
and CSS are simple enough, and there are many simple tutorials
and ready-made examples of code on the Web.
Photoshop or Sketch are great for design exploration. But,
especially for RWD, it’s getting harder to work productively
without moving at least part of your process into a browser.
118. AXURE IN A BROWSER
If your company has the resources and your platform is mature
enough, you could go further and build an online tool for visual
prototyping.
Designers could drag ready-made components onto a page to
create an interactive prototype.
119. PROJECT POLYMER CONSTRUCTOR
Google has a web tool,
which lets you to create Material Design in a browser.
https://polymer-designer.appspot.com/
121. REAL DATA
While good designers don’t use “Lorem ipsum”, it takes a bit of
effort to create mock data.
Showing different states of pages and patterns takes even more
time, so making data easy to import into a prototype would help
us to do this faster.
122. COMMUNICATE EASIER
In addition to a functional prototype’s being cheap to create, it
works much better as a communication tool. You can link pages
and use all of the logic and scripts from the production version.
Plus, pages are all properly responsive, so you don’t have to
address same problems again and again.
124. A/B TESTING OUT OF THE BOX
Design patterns don’t solve problems once and for all. You should
always strive to find better solutions. You should experiment as
much as possible and compare alternative approaches.
A great platform should afford the ability to do this systematically
and inexpensively, making it simpler to do usability testing and
run A/B tests.
125. KNOWLEDGE BASE
You can save historical versions of patterns, including the details
about and results of experiments.
This helps you to learn why they worked or how they failed, so
you can gain insights that you can apply when creating future
enhancements.
126. A CUMULATIVE EFFECT
The main benefit of a platform is that every project uses an actual
version of a component from the unified code base.
So you can quickly distribute an optimized variant across the
whole product line, and the company benefits from cumulative
advances.
128. DESIGN ALGORITHMS, NOT SCREENS
On algorithmic platforms, designers and developers define logic
that considers content, context, and user data, then the platform
compiles a design based on principles and patterns.
129. SUPER-DUPER-FINE-TUNING
In this way, it is possible to fine-tune the tiniest details of a user
interface for specific usage scenarios, without your having to
draw and code dozens of screen states.
130. AUTOMATED MAGAZINE LAYOUTS
The existing content had poor semantic structure, and it was too
expensive to update by hand. A special script parsed an article
and, depending on its content – for example, the number of
paragraphs and words in each article, photos and their formats –
the script chose the most suitable pattern in which to present
parts of the article.
135. ARE WE THERE YET?
Algorithmic design is far from being an established approach –
it’s rarely even discussed today.
But, in the future, it could definitely help designers to achieve
truly groundbreaking designs, even on more mature platforms. It
will automate the routine, freeing us for new thinking.
136. OUR STORY
Mail.Ru Group is taking this platform approach.
To get there, we’ve committed to the whole
process of framework creation and
implementation.
137. 1.
CREATE THE REFERENCE DESIGN
AND THE PLATFORM
We defined a suitable and scalable information architecture,
interaction-design principles, visual styles, and a technical
solution for implementing the framework.
138. 2.
MOVE ALL PRODUCTS
TO THE PLATFORM
We’ve expanded our unified code base with new patterns and
made the back-end for every product conform to framework
requirements.
We use two strategies: either redesign a product from scratch or
update it gradually component by component, page by page.
139. 3.
REFACTOR THE DESIGN PROCESS
We’ve created design solutions for core product tasks and are
fine-tuning the technical solution now, so we’ll be able to
dispense with most design artifacts soon and create new screens
out of ready-made blocks of code from our unified code base.
140. 4.
REFACTOR THE DESIGN
We’ve released a dozen products and discovered a lot of
problems after their launch, so refactoring their designs is taking
a significant amount of time. Plus, design trends are changing,
requiring further refactoring.
It takes some time to setup the product update process – you
need component versioning and management approval workflow.
141. WE’RE ON THIS WAY
We are now on the third and fourth steps of our framework-
implementation process. We’ve seen benefits from working with
the platform from the very beginning, the evolution of our
designs is becoming easy, and we’ve reduced unnecessary
design-documentation work significantly.
142. We’re currently updating the visual design across our platform, so
we’ll find out whether this is as easy as we intended. When rolling
out a set of living guidelines, implementation takes a couple of
years, so there is always the risk that new design trends may
emerge.
Even so, you should strictly follow your own standards. Sure,
during the framework rollout, some of your products won’t have
up-to-date visual designs. But once you’ve launched your
platform, you’ll have the luxury of updating the designs for a
dozen products at one time, in a matter of just a few weeks.
143. WHAT ABOUT APPS?
The component-based model that I’ve described is for the Web.
However, we’ve thought about applying this idea to mobile apps,
using bundles instead of components. These are shared
libraries to which we’ve applied a unified design. But for now,
we’re focused on our Web platform.
144. WE HAD OUR SHARE OF PROBLEMS
Nevertheless, looking back, I believe that we could have made the
implementation process faster and shorter. I’ve told you about
both our mistakes and our good decisions, so your job will be
easier if you decide to follow our path. We have had our share of
problems to be sure, but the overall result of this effort has been
amazing for our products, our users, and our product teams.
145. BEING TOUGH
When you’re implementing guidelines, they must be
authoritative. To achieve systematic design, always use existing
patterns and components whenever possible.
146. However, if there’s a need to introduce something new, you
should determine whether you’ll use it again in the future. If so,
create a new pattern or component.
This is the only way to keep your design framework up to date
and your product portfolio consistent. It also ensures that your
framework will be easy to support, enable you to create
comfortable user interfaces, and be a positive for your brand.
148. A.
BOOTSTRAP-LIKE SYSTEMS
Pro: Faster and cheaper. You can quickly profit from inexpensive
design experiments, fast prototyping, and simplified development
support.
Con: Design updates are still painful.
149. SMALL COMPANIES CAN DO IT TOO
Bootstrap and Foundation already solve a lot the problems by
implementing design principles in code, providing living
guidelines, and supporting prototyping.
150. BUILD YOUR OWN BOOTSTRAP
Lots of visionary publications by Anna Debenham, Brad Frost,
Mark Otto, and Dave Rupert were released around this time.
151. REALLY?
Although these frameworks lack the benefits of a component-
based system – they can’t simplify updates of a whole product
line.
152. B.
COMPONENT-BASED SYSTEM
Pro: It guarantees the quality of the design implementation and
offers the benefits of easy product updates.
Con: It requires much more effort.
153. REACT VS BEM
Famous frameworks for true component-based design systems.
We use BEM ideology and some pieces of its technology.
154. THAT’S OUR CHOICE
We chose this approach at Mail.Ru Group. It started in the middle
of 2012 from a simple idea and an experiment.
155. NATHAN CURTIS
Nathan Curtis writes in-depth articles about
key parts of design systems and processes.
He published a book “Modular Web Design”
back in 2009.
156. ANNA DEBENHAM
She was one of the pioneers in creating living
style guides. She collects examples of such
systems, articles, presentations, and tools. This
is a marvelous resource, and I strongly
recommend that you check it out.
157. BRAD FROST
Brad Frost is the author of Atomic Design
ideology. He is currently writing a book on this
subject and has already published some
chapters from it on his Web site.
158. FROM COVER TO COVER!
A link heaven on living guidelines and component systems.
It’s better than any book!
161. I’m confident:
Any modern UX strategy
should employ platform principles
to ensure a good outcome for your products.
162. Wanna build a solid, sustainable foundation
for a product or an entire product line?
Forget about creating static guidelines and
pattern libraries and instead take a platform
approach. Interim design artifacts add
unnecessary costs to design projects.
163. It becomes faster and cheaper to get new products and features
to market.
It guarantees that you’ll achieve a unified design and sustain it in
the future.
It lets you run more design experiments to find the best solutions.
It benefits your whole product line by scaling the enhancements
you’ve made to individual products.
Designers work more with their heads, not just their hands.
164. LEAVING
HEROIC REDESIGNS BEHIND
Instead, you’ll be able to constantly update your designs.
The platform approach lets you spend more time thinking about
product design rather than design documentation and
maintenance.
165. P.S.Just don’t go extreme! Any new approach is an augmentation and
evolvement of existing ones, but not an abolishment.
It’s stupid to scream that modern designers only work in a
browser and everyone who still uses Photoshop/Sketch is ancient.
But you’ll ruin your career if you’re still bounded by classic tools.
I hope it’s not about you :)
*
*
166. CREDITS: DESIGN
EUGENE BELYAEV
EUGENE DOLGOV
MARIA BOBROVA
EUGENE FERULEV
ARTEM GLADKOV
ALEXEY KANDAUROV
DMITRY OSADCHUK
GEVORG GLECHYAN
ALEXANDER KIROV
ALEXEY SERGEEV
PAVEL SKRIPKIN SVETLANA SOLOVIEVA
ANDREW SUNDIEV YURY VETROV
KONSTANTIN ZUBANOV
167. CREDITS: DEVELOPMENT
ALEXANDER BEKBULATOV
ANTON EPREV
DMITRY BELYAEV
EUGENE IVANOV
ANDREW KUSIMOV
SERGEY NOZHKIN
BORIS REBROV
STANISLAV MIKHALSKY
ANTON POLESHUK
PAVEL RYBIN
PAVEL SCHERBININ
MAXIM TRUSOV
ARSTAN TOREGOZHIN
VITALY VASIN
PAVEL VDOVTSEV KONSTANTIN VOROZHEIKIN