Anúncio
Let's Work Together!
Denunciar
Brad FrostSeguir
Web Designer, Speaker, and Consultant em Brad Frost Web23 de Jun de 2017•0 gostou•24,964 visualizações
13 gostaram
Seja o primeiro a gostar disto
mostrar mais
visualizações
Vistos totais
0
No Slideshare
0
De incorporações
0
Número de incorporações
0
Check these out next
Let's Work Together!
23 de Jun de 2017•0 gostou•24,964 visualizações
13 gostaram
Seja o primeiro a gostar disto
mostrar mais
visualizações
Vistos totais
0
No Slideshare
0
De incorporações
0
Número de incorporações
0
Baixar para ler offline
Denunciar
Design
Nobody works alone in a vacuum, and successful work hinges on how well a team communicates and collaborates with each other. This talk will explore many methods, tools, and techniques teams use to produce great web experiences. How do front-end development teams make sure they write clean and consistent code together? How do designers ensure colors, typography, and other design elements are used correctly? What deliverables should be created in an effective web design process? How are decisions communicated with the team, stakeholders, and the broader organization? There are no “right” answers to these questions, but this talk will cover some important principles and helpful tactics to help your team make great work together.
Brad FrostSeguir
Web Designer, Speaker, and Consultant em Brad Frost WebAnúncio
Anúncio
Anúncio
Recomendados
Style Guide Best PracticesBrad Frost
Looking for a place to hang my helmetBrad Frost
The Adobe Legal Department Style GuideAdobe
Programming For Non-Programmers @ Social Media Week Chris Castiglione
Turning huge ships - Open Source and MicrosoftChristian Heilmann
User Experience for WordPress PlatformsCody Landefeld
Let's Work Together!
- LET'S WORK TOGETHER!@brad_frost
- OUR WORK IS DONE WITH OTHER PEOPLE FOR OTHER PEOPLE
- SLACK GIF
- HOW DO WE WORK WITH EACH OTHER?
- HOW DO WE TALK TO EACH OTHER?
- HOW DO WE COORDINATE WITH EACH OTHER?
- HOW DO WE COLLABORATE WITH EACH OTHER?
- SPACES VS TABS SKETCH VS PHOTOSHOP GIF VS GIF GRUNT VS GULP NPM VS YARN FILE STRUCTURE BEM VS SMACSS FLAT VS SKEUOMORPHIC AZURE VS INDESIGN REACT VS VUE PROGRESSIVE ENHANCEMENT VS SINGLE PAGE APPS ANGULAR VS EMBER NATIVE VS WEB SVG VS ICON FONTS WORDPRESS VS DRUPAL PHP VS RUBY VS NODE VS PYTHON SASS VS LESS
- complete chaos stifling rigidity
- PRINCIPLES AND GUIDELINES
- discipline team teams department company
- discipline team teams department company
- marketing sales engineering digital hr customer support r&d accounting management administration
- marketing sales engineering digital hr customer support r&d accounting management administration
- marketing sales engineering digital hr customer support r&d accounting management administration
- principles & guidelines marketing sales engineering digital hr customer support r&d accounting management administration
- MISSION
- https://www.charitywater.org/about/mission.php
- COMPANY VALUES
- ZAPPOS 10 CORE VALUES ๏ Deliver WOW Through Service ๏ Embrace and Drive Change ๏ Create Fun and A Little Weirdness ๏ Be Adventurous, Creative, and Open-Minded ๏ Pursue Growth and Learning ๏ Build Open and Honest Relationships With Communication ๏ Build a Positive Team and Family Spirit ๏ Do More With Less ๏ Be Passionate and Determined ๏ Be Humble https://www.zapposinsights.com/about/core-values
- CULTURE
- –Chris Edmonds An organizational constitution specifies your team’s purpose, values and behaviors, strategies, and goals. It creates “liberating rules” that help leaders and team members understand exactly how they are expected to treat each other and their customers. http://thecultureengine.com/
- discipline team teams department company
- management public relations research digital social creative services analysis cmo vp assistants
- management public relations research digital social creative services analysis cmo vp assistants
- management public relations research digital social creative services analysis cmo vp assistants
- principles & guidelines management public relations research digital social creative services analysis cmo vp assistants
- BRAND GUIDELINES
- https://design.ubuntu.com/brand/
- VOICE AND TONE GUIDELINES
- voiceandtone.com
- discipline team teams department company
- team 1 team 2 team 3 team 4 team 5 team 7 team 6 team 9 team 10 team 8
- team 1 team 2 team 3 team 4 team 5 team 7 team 6 team 9 team 10 team 8
- SPECIAL SNOWFLAKE SYNDROME
- team 1 team 2 team 3 team 4 team 5 team 7 team 6 team 9 team 10 team 8
- principles & guidelines team 1 team 2 team 3 team 4 team 5 team 7 team 6 team 9 team 10 team 8
- DESIGN SYSTEMS!
- https://lightningdesignsystem.com/
- https://material.io/guidelines/
- http://carbondesignsystem.com/
- discipline team teams department company
- backend content frontend ux visual manager frontend backend ux qa
- backend content frontend ux visual manager frontend backend ux qa
- backend content frontend ux visual manager frontend backend ux qa
- principles & guidelines backend content frontend ux visual manager frontend backend ux qa
- discipline team teams department company
- frontend frontend frontend frontend frontend frontend frontend frontend frontend frontend
- frontend frontend frontend frontend frontend frontend frontend frontend frontend frontend
- frontend frontend frontend frontend frontend frontend frontend frontend frontend frontend
- principles & guidelines frontend frontend frontend frontend frontend frontend frontend frontend frontend frontend
- CODE STYLE GUIDES
- code block .thisishowwedoit { } CSS SYNTAX GUIDELINES
- code block .this-is-how-we-do-it { } CSS SYNTAX GUIDELINES
- code block .thisIsHowWeDoIt { } CSS SYNTAX GUIDELINES
- code block .this__is__how__we__do—-it { } CSS SYNTAX GUIDELINES
- code block .- -...- - ..- - —— .. . ..—— — { } CSS SYNTAX GUIDELINES
- discipline team teams department company
- discipline team teams department company design systems
- BENEFITS OF DESIGN SYSTEMS ๏ Promotes UI consistency & cohesion = more conversions & $$$$$ ๏ Faster production = roll out more features & iterations faster than ever ๏ Shared vocabulary = more time collaborating & less time in meetings ๏ Easier to test = more responsive, performant, and accessible experiences ๏ Useful reference = an essential resource and hub for best practices ๏ Future-friendly foundation = modify, extend, & improve upon over time
- MAKING DESIGN SYSTEMS HAPPEN
- RESEARCH & USER INTERVIEWS
- "You can probably carbon date our UIs based on the design."
- "The main challenges are the existing thousands of lines of code, acquisitions, and existing suite of technologies that makes up a billion dollars a year. We'd like to not lose that billion dollars."
- "There's a lot of institutional knowledge here locked up in people's heads. Slack channels are great, but it becomes a scavenger hunt to find information about how something's supposed to work."
- "For a basic expand/collapse pattern, the devs spent 2 days going to different teams to find the code, then still had to rebuild it themselves."
- USER INTERVIEWS ๏ Round up a diverse group of stakeholders,users,and other people who would impact/be impacted by a design system ๏ Talk about current workflow,pain points,hopes,fears, dreams,frustrations,and other things that can influence the success of the design project ๏ Latch onto poignant quotes and emerging themes ๏ Start shaping the story and key themes in preparation for kickoff
- KICKOFF WORKSHOP
- PRIORITIES EXERCISE
- ]
- PRIORITIES WORKSHOP ๏ Discuss emerging themes from interviews and introduce potential principles and tactics ๏ Give each person 5 votes for principles they care most about ๏ Discuss principles.What won?What lost?Why? ๏ Give each person 5 votes for tactics/features they care most about. ๏ Goal is to align around a set of shared principles and priorities for the design system
- REGROUP & NEXT STEPS
- REGROUP & NEXT STEPS ๏ Recap the day's events; talk about the outcomes ๏ Make sure to cover any lingering questions,concerns,and other words of wisdom that will help the design system be successful ๏ Explain what happens next and how they can stay involved with the design system process ๏ Pizza party.
- DESIGN PRINCIPLES
- –Luke Wroblewski Design principles are the guiding light for any software application. They articulate the fundamental goals that all decisions can be measured against and thereby keep the pieces of a project moving toward an integrated whole. https://www.lukew.com/ff/entry.asp?854
- PROCESS PRODUCT
- DESIGN SYSTEM PROCESS PRINCIPLES ๏ Make the best thing the easiest thing ๏ Design for “grab it quick” efficiency ๏ Design for contribution and community ๏ Crowd-proof the markup ๏ Fit the workflow ๏ Just enough documentation ๏ Technology agnostic ๏ Embed the brand in the code ๏ Consistent, not homogenous ๏ Opinionated defaults ๏ Make people smarter just by using it
- DESIGN SYSTEM PRODUCT PRINCIPLES ๏ Just enough interface ๏ Strong and direct ๏ Speed is a feature ๏ Adaptable density ๏ Safety always ๏ No tricks or stunts ๏ Recycle, reduce, reuse
- 6 COUNTER-INTUITIVE TESTS FOR CREATING DESIGN PRINCIPLES ๏ Does it come directly from research? ๏ Does it help you say ‘No’ most of the time? ๏ Does it distinguish your design from your competitors? ๏ Is it something you might reverse in a future release? ๏ Have you evaluated it for this project? ๏ Is its meaning constantly tested? https://articles.uie.com/creating-design-principles/
- DESIGN PRINCIPLES UNDERPIN EVERY BUSINESS, DESIGN, & DEV DECISION
- PREPARING TO CREATE
- INTRADISCIPLINARY INTERDISCIPLINARY
- https://helpx.adobe.com/creative-cloud/how-to/creative-cloud-libraries.html
- https://www.figma.com/
- https://www.invisionapp.com/craft
- https://brand.ai/sketch
- http://photoshopetiquette.com/
- https://github.com/bradfrost/frontend-guidelines-questionnaire
- WHAT ARE SOME GENERAL PRINCIPLES YOUR TEAM SHOULD FOLLOW WHEN WRITING HTML?
- SPACES OR TABS?
- SMACSS, BEM OR OTHER METHODOLOGY?
- WHAT TOOLS (SASS, NORMALIZE, AUTOPREFIXER, ETC) DOES YOUR TEAM RELY ON TO WRITE CSS?
- WHAT JS TOOLS (JQUERY, REACT, ANGULAR, POLYFILLS, DEPENDENCIES) DOES YOUR TEAM RELY ON?
- THE WORKSHOP AND THE STOREFRONT
- http://styleguides.io/tools.html
- http://http://patternlab.io
- Pattern Lab Grunt/Gulp copy task Style Guide
- http://bradfrost.github.io/style-guide-guide/
- http://bradfrost.github.io/style-guide-guide/ https://github.com/bradfrost/style-guide-guide
- INTRADISCIPLINARY INTERDISCIPLINARY
- comp production
- DESIGN TOKENS
- https://www.lightningdesignsystem.com/design-tokens/
- native appscommunications intranetmarketing site product
- native appscommunications intranetmarketing site product design tokens
- native appscommunications intranetmarketing site product design tokens implementation-agnostic source of truth
- DESIGN TOKEN PROPERTIES ๏ Background colors ๏ Type colors ๏ Font families ๏ Font sizes ๏ Font weights ๏ Line Heights ๏ Border colors ๏ Border thicknesses ๏ Border radii ๏ Animation speeds ๏ Media queries ๏ Margins ๏ Padding
- http://link.com
- https://brand.ai/
- http://airbnb.design/painting-with-code/
- THERE IS NO SUBSTITUTE FOR HUMAN COMMUNICATION AND COLLABORATION
- http://trentwalton.com/2011/07/14/content-choreography/
- whiteboard sketch working product that tool you've spent 7 years mastering
- >
- COLLABORATION AND COMMUNICATION BEAT DELIVERABLES
- complete chaos stifling rigidity
- discipline team teams department company
- humanity discipline team teams department company
- atomicdesign.bradfrost.com
- THANK YOU!@brad_frost bradfrost.com
Anúncio