How to boost your workflow, or git rebase for designers

71
BOOST YOUR DESIGN WORKFLOW OR GIT REBASE FOR DESIGNERS

Transcript of How to boost your workflow, or git rebase for designers

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