Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
AFULLSTACK
WORKFLOW
WordCamp Sacramento 2016
FULL STACK 

…REALLY?
IT’S BETTER
THAN 🦄(On offense if you’re into Unicorns…)
WHAT I’M 

GOING TO COVER
Wireframes
Design
Design Sign-off and Approval
Local Development
Launch/Hosting
Maintenance
WHAT I’M NOT
GOING TO COVER
Content Strategy
Content Collection & Creation
No code stuff
Wireframes
Rough out “all the things”
Why 

Wireframe?
It gives is a quick way to layout the critical pieces without getting distracted by
Aesthetics. We can ma...
How To 

Wireframe
THERE ARE
COUPLE
DIFFERENT
WAYS
OLD 

SCHOOL
What I use
Sketch
A Sample Wireframe in Sketch
A Sample Wireframe in Sketch
AFTER WE MAKE
SURE ALL THE
FEATURES ARE IN
👍
LET’S
DESIGN
I DUPLICATE THE
WIREFRAMES

IN SKETCH 

AND DESIGN
Duplicated Sketch File With Designed elements
Start designing the pieces of the
ARE READY TO
SHARE WITH
OUR CLIENTS
👍
ARE READY TO
SHARE WITH
OUR CLIENTS
THE OLD 

(Not so smart)

WAY…
✉Just Email over to
Client and see
what they say…
✉THE PROBLEM
• No control over how it’s presented
• No Way to Explain Design Decisions
🤔
HOW CAN WE

FIX THIS?
🤔
WHAT IF…
THERE WAS A TOOL WE COULD USE TO PRESENT A
PROTOTYPE BUILT FROM OUR DESIGNS SO 

WE COULD SIMULATE THE FINISHED...
THERE ARE ACTUALLY
A COUPLE OF THEM
(I’m sure there are more, but these are the big Ones)
IS WHAT I USE
A NIFTY FEATURE
Sync Across Devices
🖥 💻
☝
(Or Photoshop)
AUTOMATICALLY 

UPLOAD CHANGES
FROM SKETCH
NICELY ORGANIZED
COLLECT
FEEDBACK
FROM YOUR
CLIENTS
CLIENTS CAN
COMMENT
CLIENTS CAN
COMMENT
BUILD
CLICKABLE
PROTOTYPES
GET A “FEEL” FOR THE SITE WITHOUT CODE
MAKE
CORRECTIONS
THEN MOVE ON TO
THE BUILD
LOCAL
DEVELOPMENT
MY LOCAL
DEVELOPMENT
VVV & VV
MY FAVORITE
STARTER THEME
NIFTY SAGE FRONT-END 

DEVELOPMENT FEATURES
Groovy Theme Wrapper

(Not really the “WordPress Way” but it’s kinda cool)
Gul...
PAGE
LAYOUT
& JUNK
MY GO TO PLUGIN
FOR PRETTY MUCH 

EVERY SITE
MY GO TO PLUGIN
FOR PRETTY MUCH 

EVERY SITE
A GAME CHANGING PLUGIN
A GAME CHANGING PLUGIN
A GAME CHANGING PLUGIN
HOSTING
WHERE I HOST…
• Shared Env For Years
• VPS
• “Upgraded” VPS
• Managed
QUICK BACK
STORY…
WHERE I HOST…
• Install WP Migrate DB on the Local Dev Site

( I just use the free version but the paid version looks awesome)
• We crea...
THIS IS WHERE
YOU TRY TO
“BREAK IT”…
THIS IS WHERE YOU
TRY TO “BREAK IT”…
ONCE IT’S
READY TO GO
I LAUNCH IT
IF IT’S GOING TO BE
HOSTED ON OUR
WPENGINE SERVER
WE JUST NEED TO

UPDATE DNS
IF IT’S GOING TO A
DIFFERENT SERVER
I MANUALLY MIGRATE
THE SITE OR…
I USE A TOOL CALLED
MANAGE WP
I USE A TOOL CALLED
MANAGE WP
MANAGE WP
HAS SOME REALLY
GREAT FEATURES
• Manage All your WordPress Sites in one place
• A lot of the functionality is FR...
THANK
YOU!
I’m Jon Trujillo
I work @ Tytanium Ideas
I’m a Husband, Dad & “Jesus Freak”
Twitter:@jontrujillo LinkedIn:jontr...
WordCamp Sac '16 - a full stack workflow
WordCamp Sac '16 - a full stack workflow
Upcoming SlideShare
Loading in …5
×

WordCamp Sac '16 - a full stack workflow

762 views

Published on

Talk for WordCamp Sacramento 2016 about my workflow.

Published in: Technology
  • Be the first to comment

WordCamp Sac '16 - a full stack workflow

  1. 1. AFULLSTACK WORKFLOW WordCamp Sacramento 2016
  2. 2. FULL STACK 
 …REALLY?
  3. 3. IT’S BETTER THAN 🦄(On offense if you’re into Unicorns…)
  4. 4. WHAT I’M 
 GOING TO COVER Wireframes Design Design Sign-off and Approval Local Development Launch/Hosting Maintenance
  5. 5. WHAT I’M NOT GOING TO COVER Content Strategy Content Collection & Creation No code stuff
  6. 6. Wireframes Rough out “all the things”
  7. 7. Why 
 Wireframe? It gives is a quick way to layout the critical pieces without getting distracted by Aesthetics. We can make strategic decisions about functionality without wasting time on designing interface items that are going to get tossed anyway.
  8. 8. How To 
 Wireframe
  9. 9. THERE ARE COUPLE DIFFERENT WAYS
  10. 10. OLD 
 SCHOOL
  11. 11. What I use
  12. 12. Sketch
  13. 13. A Sample Wireframe in Sketch
  14. 14. A Sample Wireframe in Sketch
  15. 15. AFTER WE MAKE SURE ALL THE FEATURES ARE IN
  16. 16. 👍
  17. 17. LET’S DESIGN
  18. 18. I DUPLICATE THE WIREFRAMES
 IN SKETCH 
 AND DESIGN
  19. 19. Duplicated Sketch File With Designed elements
  20. 20. Start designing the pieces of the
  21. 21. ARE READY TO SHARE WITH OUR CLIENTS
  22. 22. 👍 ARE READY TO SHARE WITH OUR CLIENTS
  23. 23. THE OLD 
 (Not so smart)
 WAY…
  24. 24. ✉Just Email over to Client and see what they say…
  25. 25. ✉THE PROBLEM • No control over how it’s presented • No Way to Explain Design Decisions
  26. 26. 🤔 HOW CAN WE
 FIX THIS?
  27. 27. 🤔 WHAT IF… THERE WAS A TOOL WE COULD USE TO PRESENT A PROTOTYPE BUILT FROM OUR DESIGNS SO 
 WE COULD SIMULATE THE FINISHED SITE?
  28. 28. THERE ARE ACTUALLY A COUPLE OF THEM (I’m sure there are more, but these are the big Ones)
  29. 29. IS WHAT I USE
  30. 30. A NIFTY FEATURE
  31. 31. Sync Across Devices 🖥 💻
  32. 32. ☝ (Or Photoshop) AUTOMATICALLY 
 UPLOAD CHANGES FROM SKETCH
  33. 33. NICELY ORGANIZED
  34. 34. COLLECT FEEDBACK FROM YOUR CLIENTS
  35. 35. CLIENTS CAN COMMENT
  36. 36. CLIENTS CAN COMMENT
  37. 37. BUILD CLICKABLE PROTOTYPES
  38. 38. GET A “FEEL” FOR THE SITE WITHOUT CODE
  39. 39. MAKE CORRECTIONS THEN MOVE ON TO THE BUILD
  40. 40. LOCAL DEVELOPMENT
  41. 41. MY LOCAL DEVELOPMENT VVV & VV
  42. 42. MY FAVORITE STARTER THEME
  43. 43. NIFTY SAGE FRONT-END 
 DEVELOPMENT FEATURES Groovy Theme Wrapper
 (Not really the “WordPress Way” but it’s kinda cool) Gulp, Bower with Browserify in Sage 8 Sage 9 Will use Webpack & NPM
  44. 44. PAGE LAYOUT & JUNK
  45. 45. MY GO TO PLUGIN FOR PRETTY MUCH 
 EVERY SITE
  46. 46. MY GO TO PLUGIN FOR PRETTY MUCH 
 EVERY SITE
  47. 47. A GAME CHANGING PLUGIN
  48. 48. A GAME CHANGING PLUGIN
  49. 49. A GAME CHANGING PLUGIN
  50. 50. HOSTING
  51. 51. WHERE I HOST…
  52. 52. • Shared Env For Years • VPS • “Upgraded” VPS • Managed QUICK BACK STORY…
  53. 53. WHERE I HOST…
  54. 54. • Install WP Migrate DB on the Local Dev Site
 ( I just use the free version but the paid version looks awesome) • We create an install in our WPE account • Set up GIT Push on that install • Set up a Bitbucket repo as well • Push the wp-content folder up to the Development Server DEVELOPMENT SITE
  55. 55. THIS IS WHERE YOU TRY TO “BREAK IT”…
  56. 56. THIS IS WHERE YOU TRY TO “BREAK IT”…
  57. 57. ONCE IT’S READY TO GO I LAUNCH IT
  58. 58. IF IT’S GOING TO BE HOSTED ON OUR WPENGINE SERVER WE JUST NEED TO
 UPDATE DNS
  59. 59. IF IT’S GOING TO A DIFFERENT SERVER I MANUALLY MIGRATE THE SITE OR…
  60. 60. I USE A TOOL CALLED MANAGE WP
  61. 61. I USE A TOOL CALLED MANAGE WP
  62. 62. MANAGE WP HAS SOME REALLY GREAT FEATURES • Manage All your WordPress Sites in one place • A lot of the functionality is FREE • Save time by not having to log into each site • Backups are really inexpensive ($2/mo per site) • Add value with Client Reports
  63. 63. THANK YOU! I’m Jon Trujillo I work @ Tytanium Ideas I’m a Husband, Dad & “Jesus Freak” Twitter:@jontrujillo LinkedIn:jontruijllo JonTrujillo.com

×