71
BOOST YOUR DESIGN WORKFLOW OR GIT REBASE FOR DESIGNERS

How to boost your workflow, or git rebase for designers

Embed Size (px)

Citation preview

Page 1: How to boost your workflow, or git rebase for designers

BOOST YOUR DESIGN

WORKFLOW

OR GIT REBASE FOR DESIGNERS

Page 2: How to boost your workflow, or git rebase for designers

4 years as a freelance web designer

2 years in Epam Systems

2 years in Jabra (GN Netcom)

Independent UX consultant

2009 20161985 2012 2014

Anton Parkhomenko | UX Engineer

1997

Page 3: How to boost your workflow, or git rebase for designers

TIPS AND TOOLS CASES

Page 4: How to boost your workflow, or git rebase for designers
Page 5: How to boost your workflow, or git rebase for designers
Page 6: How to boost your workflow, or git rebase for designers

“Welcome changing requirements, even late in development. Agile processes harness change for

the customer's competitive advantage.”

Principle 2 of 12 Agile Software Manifesto

http://www.agilemanifesto.org/principles.html

Page 7: How to boost your workflow, or git rebase for designers
Page 8: How to boost your workflow, or git rebase for designers

Product

Assets

Page 9: How to boost your workflow, or git rebase for designers
Page 10: How to boost your workflow, or git rebase for designers

Designer

Page 11: How to boost your workflow, or git rebase for designers

DESIGN ART

Solving a problem Raising a question

Being an actor and following a script

Writing and interpreting your own story

Needs a collective acceptance Only needs an inner approval

Is an act of empathy Is an act of freedom.

Page 12: How to boost your workflow, or git rebase for designers
Page 13: How to boost your workflow, or git rebase for designers

TIPS AND TOOLS

Page 14: How to boost your workflow, or git rebase for designers

HOW TO BOOST YOUR DESIGN WORKFLOW

Use GIT Automate

Be flexible Gather feedback

Page 15: How to boost your workflow, or git rebase for designers

Use GIT

Page 16: How to boost your workflow, or git rebase for designers
Page 17: How to boost your workflow, or git rebase for designers
Page 18: How to boost your workflow, or git rebase for designers
Page 19: How to boost your workflow, or git rebase for designers

http://www.syntevo.com/smartgit/

Page 20: How to boost your workflow, or git rebase for designers

https://www.sourcetreeapp.com/

Page 21: How to boost your workflow, or git rebase for designers

https://desktop.github.com/

Page 22: How to boost your workflow, or git rebase for designers

Automate

Page 23: How to boost your workflow, or git rebase for designers
Page 24: How to boost your workflow, or git rebase for designers

[email protected]@3x-iphone.png

[email protected]@3x-ipad.png

Page 25: How to boost your workflow, or git rebase for designers

https://www.sketchapp.com/

Page 26: How to boost your workflow, or git rebase for designers
Page 27: How to boost your workflow, or git rebase for designers

https://www.invisionapp.com/craft

Page 28: How to boost your workflow, or git rebase for designers

https://www.invisionapp.com/craft

Page 29: How to boost your workflow, or git rebase for designers

https://www.invisionapp.com/craft

Page 30: How to boost your workflow, or git rebase for designers

https://www.invisionapp.com/craft

Page 31: How to boost your workflow, or git rebase for designers

https://www.invisionapp.com/craft

Page 32: How to boost your workflow, or git rebase for designers

https://zeplin.io/

Page 33: How to boost your workflow, or git rebase for designers
Page 34: How to boost your workflow, or git rebase for designers

http://avocode.com/

Page 35: How to boost your workflow, or git rebase for designers

http://marklyapp.com/

Page 36: How to boost your workflow, or git rebase for designers

Be flexible

Page 37: How to boost your workflow, or git rebase for designers

Be. Ready. For. Changes.

Page 38: How to boost your workflow, or git rebase for designers
Page 39: How to boost your workflow, or git rebase for designers
Page 40: How to boost your workflow, or git rebase for designers
Page 41: How to boost your workflow, or git rebase for designers

1. Use Symbols in Sketch

Page 42: How to boost your workflow, or git rebase for designers

2. Use Symbols in Symbols in Sketch

Page 43: How to boost your workflow, or git rebase for designers

3. Use Symbols in Symbols in Symbols in Sketch

Page 44: How to boost your workflow, or git rebase for designers

Gather feedback /Prototype/

Page 45: How to boost your workflow, or git rebase for designers
Page 46: How to boost your workflow, or git rebase for designers

https://popapp.in/

Prototyping on Paper

Page 47: How to boost your workflow, or git rebase for designers
Page 48: How to boost your workflow, or git rebase for designers

https://www.invisionapp.com

Most popular prototyping tool

Page 49: How to boost your workflow, or git rebase for designers
Page 50: How to boost your workflow, or git rebase for designers
Page 51: How to boost your workflow, or git rebase for designers

Framerframerjs.com

Origamifacebook.github.io/origami

Principleprincipleformac.com

Marvelmarvelapp.com

Craft Prototypeinvisionapp.com/craft#prototype

Axure RPaxure.com

Page 52: How to boost your workflow, or git rebase for designers

Use GIT Automate

Be flexible Gather feedback

Page 53: How to boost your workflow, or git rebase for designers

CASES

Page 54: How to boost your workflow, or git rebase for designers

Case 1

Page 55: How to boost your workflow, or git rebase for designers

• Small team of 4 developers (UX/Frontend, IOS, Android, Backend), PM, QA

• Extremely tight schedule (first release in 6 weeks)

• Inhouse UX and development, UI outsourced to external agency.

Given

Page 56: How to boost your workflow, or git rebase for designers

Tools/technologies used

Page 57: How to boost your workflow, or git rebase for designers

Highlights

• Sketch app was used for both wireframing and mockups.

• The wireframe .sketch file was a base for mockups and prototype screens.

• Wireframes were used to start the development as early as possible, app’s UI was being updated on-the-go

• Assets kept both in GIT and Zeplin project, with full access for developers.

Page 58: How to boost your workflow, or git rebase for designers
Page 59: How to boost your workflow, or git rebase for designers
Page 60: How to boost your workflow, or git rebase for designers

Result

• The POC has been delivered in 6 weeks from scratch;

• The system built is capable to deliver any changes in extremely short terms, even the complete redesign.

Page 61: How to boost your workflow, or git rebase for designers

Case 2

Page 62: How to boost your workflow, or git rebase for designers

• Large company with 2 departments (Marketing and Online IT) and senior management involved;

• Microsoft ecosystem (MS Gold Partner company);

• Design is outsourced to external agency with no feedback;

• Powerpoint wireframes, zipped PSDs in email;

• Extremely slow stakeholders feedback;

• Outdated assets in Rally;

Given

Page 63: How to boost your workflow, or git rebase for designers

/

Tools/technologies used

Page 64: How to boost your workflow, or git rebase for designers

Highlights

• Marketing department commits the assets to the GIT repository;

• Exported assets available to developers via Git repo;

• Up-to-date mockups in Rally user stories - via direct Bitbucket/Invision links;

Page 65: How to boost your workflow, or git rebase for designers

Result

• Twice increased development speed (improved communication);

• Improved quality (up-to-date user stories -> more attention to details, better testing);

Page 66: How to boost your workflow, or git rebase for designers
Page 67: How to boost your workflow, or git rebase for designers

Don't push. Explain. Communicate profits.

Page 68: How to boost your workflow, or git rebase for designers

Q&A

Page 69: How to boost your workflow, or git rebase for designers

http://bit.ly/boost_workflow_assets

Page 70: How to boost your workflow, or git rebase for designers

[email protected] github.com/gunnzolder

facebook.com/gunnzolder

KEEP IN TOUCH

Page 71: How to boost your workflow, or git rebase for designers

THANK YOU