Prototyping Your Way to Happiness: An Adventure with Pattern Lab - - PowerPoint PPT Presentation

▶
prototyping your way to happiness
SMART_READER_LITE
LIVE PREVIEW

Prototyping Your Way to Happiness: An Adventure with Pattern Lab - - PowerPoint PPT Presentation

Dec 16, 2022 318 likes •579 views

Prototyping Your Way to Happiness: An Adventure with Pattern Lab @mandiwise We had a problem. What you get: Front-end style guide Markup-based mock-ups Responsive deliverables Atomic design? bradfrost.com/blog/post/atomic-web-design Icon

slide-1
SLIDE 1

Prototyping Your Way to Happiness:

An Adventure with Pattern Lab

@mandiwise

slide-2
SLIDE 2

We had a problem.

slide-3
SLIDE 3
slide-4
SLIDE 4

What you get:

Front-end style guide Markup-based mock-ups Responsive deliverables

slide-5
SLIDE 5

Atomic design?

slide-6
SLIDE 6

bradfrost.com/blog/post/atomic-web-design

slide-7
SLIDE 7

Icon by Phillip Glenn

slide-8
SLIDE 8
slide-9
SLIDE 9

Icon by Michael Wohlwend

slide-10
SLIDE 10
slide-11
SLIDE 11

Icon by Timothy Dilich

slide-12
SLIDE 12

Icon by Joe Simpson

slide-13
SLIDE 13
slide-14
SLIDE 14

Atoms Molecules Organisms Templates Pages

slide-15
SLIDE 15
slide-16
SLIDE 16

Benefits:

Promotes consistency Makes minutia manageable BYO–anything Scales easily and quickly

slide-17
SLIDE 17

Getting started…

slide-18
SLIDE 18

Step 1:

Download Pattern Lab

slide-19
SLIDE 19
slide-20
SLIDE 20

Step 2:

Generate your Pattern Lab site for the first time

slide-21
SLIDE 21

$ ¡php ¡core/builder.php ¡-­‑g

slide-22
SLIDE 22

Step 3:

Start editing the source files

slide-23
SLIDE 23

$ ¡php ¡core/builder.php ¡-­‑wr

slide-24
SLIDE 24

Lessons learned:

Incorporate it from the start Breaking things down into reusable components makes life easier Prototyping saves time

slide-25
SLIDE 25

Thanks!