skroutz v. dimos on "designing design @ digitized 2016 conference
TRANSCRIPT
![Page 1: Skroutz V. Dimos on "Designing Design @ Digitized 2016 Conference](https://reader031.vdocuments.mx/reader031/viewer/2022030304/5878dccb1a28ab917a8b752d/html5/thumbnails/1.jpg)
Hello!
![Page 2: Skroutz V. Dimos on "Designing Design @ Digitized 2016 Conference](https://reader031.vdocuments.mx/reader031/viewer/2022030304/5878dccb1a28ab917a8b752d/html5/thumbnails/2.jpg)
![Page 3: Skroutz V. Dimos on "Designing Design @ Digitized 2016 Conference](https://reader031.vdocuments.mx/reader031/viewer/2022030304/5878dccb1a28ab917a8b752d/html5/thumbnails/3.jpg)
![Page 4: Skroutz V. Dimos on "Designing Design @ Digitized 2016 Conference](https://reader031.vdocuments.mx/reader031/viewer/2022030304/5878dccb1a28ab917a8b752d/html5/thumbnails/4.jpg)
Engineering DNA
160.000 800 10 1.000.000 7.000.000Lines of Code in Main Repo Commits per month Deploys per day Searches per day Pageviews per day
![Page 5: Skroutz V. Dimos on "Designing Design @ Digitized 2016 Conference](https://reader031.vdocuments.mx/reader031/viewer/2022030304/5878dccb1a28ab917a8b752d/html5/thumbnails/5.jpg)
Vasilis Dimos
![Page 6: Skroutz V. Dimos on "Designing Design @ Digitized 2016 Conference](https://reader031.vdocuments.mx/reader031/viewer/2022030304/5878dccb1a28ab917a8b752d/html5/thumbnails/6.jpg)
responsible for
Design - team
235.000Active app installs
160.000Active app installs
...nevermind
![Page 7: Skroutz V. Dimos on "Designing Design @ Digitized 2016 Conference](https://reader031.vdocuments.mx/reader031/viewer/2022030304/5878dccb1a28ab917a8b752d/html5/thumbnails/7.jpg)
“Designing Design”In an engineering - centric company
![Page 8: Skroutz V. Dimos on "Designing Design @ Digitized 2016 Conference](https://reader031.vdocuments.mx/reader031/viewer/2022030304/5878dccb1a28ab917a8b752d/html5/thumbnails/8.jpg)
![Page 9: Skroutz V. Dimos on "Designing Design @ Digitized 2016 Conference](https://reader031.vdocuments.mx/reader031/viewer/2022030304/5878dccb1a28ab917a8b752d/html5/thumbnails/9.jpg)
![Page 10: Skroutz V. Dimos on "Designing Design @ Digitized 2016 Conference](https://reader031.vdocuments.mx/reader031/viewer/2022030304/5878dccb1a28ab917a8b752d/html5/thumbnails/10.jpg)
![Page 11: Skroutz V. Dimos on "Designing Design @ Digitized 2016 Conference](https://reader031.vdocuments.mx/reader031/viewer/2022030304/5878dccb1a28ab917a8b752d/html5/thumbnails/11.jpg)
![Page 12: Skroutz V. Dimos on "Designing Design @ Digitized 2016 Conference](https://reader031.vdocuments.mx/reader031/viewer/2022030304/5878dccb1a28ab917a8b752d/html5/thumbnails/12.jpg)
Design & EngineeringEternal struggle?
![Page 13: Skroutz V. Dimos on "Designing Design @ Digitized 2016 Conference](https://reader031.vdocuments.mx/reader031/viewer/2022030304/5878dccb1a28ab917a8b752d/html5/thumbnails/13.jpg)
Successful product = Business + Design + Engineering
Common Goal
![Page 14: Skroutz V. Dimos on "Designing Design @ Digitized 2016 Conference](https://reader031.vdocuments.mx/reader031/viewer/2022030304/5878dccb1a28ab917a8b752d/html5/thumbnails/14.jpg)
Reusability
Structure
Consistency
Balance
Simplicity
Common Principles
![Page 15: Skroutz V. Dimos on "Designing Design @ Digitized 2016 Conference](https://reader031.vdocuments.mx/reader031/viewer/2022030304/5878dccb1a28ab917a8b752d/html5/thumbnails/15.jpg)
Goal & PrinciplesWhat is missing ?
![Page 16: Skroutz V. Dimos on "Designing Design @ Digitized 2016 Conference](https://reader031.vdocuments.mx/reader031/viewer/2022030304/5878dccb1a28ab917a8b752d/html5/thumbnails/16.jpg)
Common LanguageSomething both understand and can work with
![Page 17: Skroutz V. Dimos on "Designing Design @ Digitized 2016 Conference](https://reader031.vdocuments.mx/reader031/viewer/2022030304/5878dccb1a28ab917a8b752d/html5/thumbnails/17.jpg)
What does a language need?Rules & Logic
![Page 18: Skroutz V. Dimos on "Designing Design @ Digitized 2016 Conference](https://reader031.vdocuments.mx/reader031/viewer/2022030304/5878dccb1a28ab917a8b752d/html5/thumbnails/18.jpg)
The rules
Style Guides Pattern Libraries
![Page 19: Skroutz V. Dimos on "Designing Design @ Digitized 2016 Conference](https://reader031.vdocuments.mx/reader031/viewer/2022030304/5878dccb1a28ab917a8b752d/html5/thumbnails/19.jpg)
Style guides
A style guide (or manual of style) is a set of standards for the writing and design of documents, either for general use or for a specific publication, organization, or field.
![Page 20: Skroutz V. Dimos on "Designing Design @ Digitized 2016 Conference](https://reader031.vdocuments.mx/reader031/viewer/2022030304/5878dccb1a28ab917a8b752d/html5/thumbnails/20.jpg)
![Page 21: Skroutz V. Dimos on "Designing Design @ Digitized 2016 Conference](https://reader031.vdocuments.mx/reader031/viewer/2022030304/5878dccb1a28ab917a8b752d/html5/thumbnails/21.jpg)
Style guides
Achieve Visual Consistency
Portable branding experience
Familiarity & Recognition
![Page 22: Skroutz V. Dimos on "Designing Design @ Digitized 2016 Conference](https://reader031.vdocuments.mx/reader031/viewer/2022030304/5878dccb1a28ab917a8b752d/html5/thumbnails/22.jpg)
Pattern Libraries
Recurring solutions that solve common design problems
![Page 23: Skroutz V. Dimos on "Designing Design @ Digitized 2016 Conference](https://reader031.vdocuments.mx/reader031/viewer/2022030304/5878dccb1a28ab917a8b752d/html5/thumbnails/23.jpg)
![Page 24: Skroutz V. Dimos on "Designing Design @ Digitized 2016 Conference](https://reader031.vdocuments.mx/reader031/viewer/2022030304/5878dccb1a28ab917a8b752d/html5/thumbnails/24.jpg)
![Page 25: Skroutz V. Dimos on "Designing Design @ Digitized 2016 Conference](https://reader031.vdocuments.mx/reader031/viewer/2022030304/5878dccb1a28ab917a8b752d/html5/thumbnails/25.jpg)
Pattern Libraries
Reuse of Components
Which are debugged
And crafted over time
Familiarity of behaviour & Interaction
![Page 26: Skroutz V. Dimos on "Designing Design @ Digitized 2016 Conference](https://reader031.vdocuments.mx/reader031/viewer/2022030304/5878dccb1a28ab917a8b752d/html5/thumbnails/26.jpg)
Deliverables and goals
Make the right thing, the easy thing to do!
![Page 27: Skroutz V. Dimos on "Designing Design @ Digitized 2016 Conference](https://reader031.vdocuments.mx/reader031/viewer/2022030304/5878dccb1a28ab917a8b752d/html5/thumbnails/27.jpg)
Is this enough?
![Page 28: Skroutz V. Dimos on "Designing Design @ Digitized 2016 Conference](https://reader031.vdocuments.mx/reader031/viewer/2022030304/5878dccb1a28ab917a8b752d/html5/thumbnails/28.jpg)
![Page 29: Skroutz V. Dimos on "Designing Design @ Digitized 2016 Conference](https://reader031.vdocuments.mx/reader031/viewer/2022030304/5878dccb1a28ab917a8b752d/html5/thumbnails/29.jpg)
![Page 30: Skroutz V. Dimos on "Designing Design @ Digitized 2016 Conference](https://reader031.vdocuments.mx/reader031/viewer/2022030304/5878dccb1a28ab917a8b752d/html5/thumbnails/30.jpg)
![Page 31: Skroutz V. Dimos on "Designing Design @ Digitized 2016 Conference](https://reader031.vdocuments.mx/reader031/viewer/2022030304/5878dccb1a28ab917a8b752d/html5/thumbnails/31.jpg)
Design System
Design system articulates a general design direction, philosophy, and approach to specific projects or products.
![Page 32: Skroutz V. Dimos on "Designing Design @ Digitized 2016 Conference](https://reader031.vdocuments.mx/reader031/viewer/2022030304/5878dccb1a28ab917a8b752d/html5/thumbnails/32.jpg)
![Page 33: Skroutz V. Dimos on "Designing Design @ Digitized 2016 Conference](https://reader031.vdocuments.mx/reader031/viewer/2022030304/5878dccb1a28ab917a8b752d/html5/thumbnails/33.jpg)
![Page 34: Skroutz V. Dimos on "Designing Design @ Digitized 2016 Conference](https://reader031.vdocuments.mx/reader031/viewer/2022030304/5878dccb1a28ab917a8b752d/html5/thumbnails/34.jpg)
![Page 35: Skroutz V. Dimos on "Designing Design @ Digitized 2016 Conference](https://reader031.vdocuments.mx/reader031/viewer/2022030304/5878dccb1a28ab917a8b752d/html5/thumbnails/35.jpg)
![Page 36: Skroutz V. Dimos on "Designing Design @ Digitized 2016 Conference](https://reader031.vdocuments.mx/reader031/viewer/2022030304/5878dccb1a28ab917a8b752d/html5/thumbnails/36.jpg)
![Page 37: Skroutz V. Dimos on "Designing Design @ Digitized 2016 Conference](https://reader031.vdocuments.mx/reader031/viewer/2022030304/5878dccb1a28ab917a8b752d/html5/thumbnails/37.jpg)
Through the understanding of the philosophy
Make it easy to extend the styleguide
Achieve logical consistency
Benefits of a Design System
![Page 38: Skroutz V. Dimos on "Designing Design @ Digitized 2016 Conference](https://reader031.vdocuments.mx/reader031/viewer/2022030304/5878dccb1a28ab917a8b752d/html5/thumbnails/38.jpg)
Active development from a real team with Storytelling
Deliverables of a Design system
Documentation
Blogposts
Internal Presentations
Design One on Ones
Design Reviews
![Page 39: Skroutz V. Dimos on "Designing Design @ Digitized 2016 Conference](https://reader031.vdocuments.mx/reader031/viewer/2022030304/5878dccb1a28ab917a8b752d/html5/thumbnails/39.jpg)
We are not alone
![Page 40: Skroutz V. Dimos on "Designing Design @ Digitized 2016 Conference](https://reader031.vdocuments.mx/reader031/viewer/2022030304/5878dccb1a28ab917a8b752d/html5/thumbnails/40.jpg)
At a glanceStyle guides are for visual consistency
Pattern libraries are for functional consistency
Design systems are for logical consistency
![Page 41: Skroutz V. Dimos on "Designing Design @ Digitized 2016 Conference](https://reader031.vdocuments.mx/reader031/viewer/2022030304/5878dccb1a28ab917a8b752d/html5/thumbnails/41.jpg)
We are hiring!www.skroutz.gr/blog/careers
![Page 42: Skroutz V. Dimos on "Designing Design @ Digitized 2016 Conference](https://reader031.vdocuments.mx/reader031/viewer/2022030304/5878dccb1a28ab917a8b752d/html5/thumbnails/42.jpg)
Q & AThank you