This document summarizes a presentation on full stack web development workflows. It discusses wireframing sites using Sketch, designing interfaces in Sketch, using InVision to share prototypes with clients and collect feedback, local development with Sage starter themes, hosting on WPEngine, and managing sites using ManageWP. The full workflow includes wireframing, design, approval, development, hosting, and maintenance.

1. AFULLSTACK
WORKFLOW
WordCamp Sacramento 2016

2. FULL STACK
…REALLY?

3. IT’S BETTER
THAN 🦄(On offense if you’re into Unicorns…)

4. WHAT I’M
GOING TO COVER
Wireframes
Design
Design Sign-off and Approval
Local Development
Launch/Hosting
Maintenance

5. WHAT I’M NOT
GOING TO COVER
Content Strategy
Content Collection & Creation
No code stuff

6. Wireframes
Rough out “all the things”

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. How To
Wireframe

9. THERE ARE
COUPLE
DIFFERENT
WAYS

10. OLD
SCHOOL

11. What I use

12. Sketch

13. A Sample Wireframe in Sketch

14. A Sample Wireframe in Sketch

15. AFTER WE MAKE
SURE ALL THE
FEATURES ARE IN

16. 👍

17. LET’S
DESIGN

18. I DUPLICATE THE
WIREFRAMES
IN SKETCH
AND DESIGN

19. Duplicated Sketch File With Designed elements

20. Start designing the pieces of the

21. ARE READY TO
SHARE WITH
OUR CLIENTS

22. 👍
ARE READY TO
SHARE WITH
OUR CLIENTS

23. THE OLD
(Not so smart)
WAY…

24. ✉Just Email over to
Client and see
what they say…

25. ✉THE PROBLEM
• No control over how it’s presented
• No Way to Explain Design Decisions

26. 🤔
HOW CAN WE
FIX THIS?

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. THERE ARE ACTUALLY
A COUPLE OF THEM
(I’m sure there are more, but these are the big Ones)

29. IS WHAT I USE

30. A NIFTY FEATURE

31. Sync Across Devices
🖥 💻

32. ☝
(Or Photoshop)
AUTOMATICALLY
UPLOAD CHANGES
FROM SKETCH

33. NICELY ORGANIZED

35. COLLECT
FEEDBACK
FROM YOUR
CLIENTS

36. CLIENTS CAN
COMMENT

37. CLIENTS CAN
COMMENT

38. BUILD
CLICKABLE
PROTOTYPES

39. GET A “FEEL” FOR THE SITE WITHOUT CODE

40. MAKE
CORRECTIONS
THEN MOVE ON TO
THE BUILD

41. LOCAL
DEVELOPMENT

42. MY LOCAL
DEVELOPMENT
VVV & VV

43. MY FAVORITE
STARTER THEME

44. 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

45. PAGE
LAYOUT
& JUNK

46. MY GO TO PLUGIN
FOR PRETTY MUCH
EVERY SITE

47. MY GO TO PLUGIN
FOR PRETTY MUCH
EVERY SITE

48. A GAME CHANGING PLUGIN

49. A GAME CHANGING PLUGIN

50. A GAME CHANGING PLUGIN

52. HOSTING

53. WHERE I HOST…

54. • Shared Env For Years
• VPS
• “Upgraded” VPS
• Managed
QUICK BACK
STORY…

55. WHERE I HOST…

56. • 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

57. THIS IS WHERE
YOU TRY TO
“BREAK IT”…

58. THIS IS WHERE YOU
TRY TO “BREAK IT”…

59. ONCE IT’S
READY TO GO
I LAUNCH IT

60. IF IT’S GOING TO BE
HOSTED ON OUR
WPENGINE SERVER
WE JUST NEED TO
UPDATE DNS

61. IF IT’S GOING TO A
DIFFERENT SERVER
I MANUALLY MIGRATE
THE SITE OR…

62. I USE A TOOL CALLED
MANAGE WP

63. I USE A TOOL CALLED
MANAGE WP

64. 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

65. THANK
YOU!
I’m Jon Trujillo
I work @ Tytanium Ideas
I’m a Husband, Dad & “Jesus Freak”
Twitter:@jontrujillo LinkedIn:jontruijllo
JonTrujillo.com