Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Prototyping With WordPress
No Coding Required
Gaurav Gupta
edUi Conference
September 29, 2014
#edui_protoWP @FrshBakedPixe...
#edui_protoWP
@FrshBakedPixels
about me
IT Analyst
Office of the Vice Provost for
Learning Innovation and Student Success
Virginia Commonwealth University...
the old way of doing things
adding prototyping to workflow
Balsamiq
Axure
Omingraffle
Visio
Photoshop
Illustrator
InDesign
Paper
Keynote
PowerPoint
HTML
Bootstrap
Foundation
#edui_p...
my search for
WordPress frameworks
enter Headway Themes
#edui_protoWP @FrshBakedPixels
could this be used
for prototyping?
Transfer Center
#edui_protoWP @FrshBakedPixels
why WordPress?
#edui_protoWP @FrshBakedPixels
easy to learn
no coding required*
* (though knowing HTML, CSS and JavaScript is helpful)
why WordPress?
online
works across OS/browsers
easy collaboration
easy sharing with clients
why WordPress?
responsive layouts
why WordPress?
reuse
to create variants
to build final product
why WordPress?
There’s a plugin for that™	
  
why WordPress?
what you need to get started
#edui_protoWP @FrshBakedPixels
WordPress installation (multisite)
Headway Theme
Plugins
•  Easy Bootstrap Shortcode
•  WP Responsive Menu
•  NS Cloner
Optional Plugins
•  Types + WP Views
•  Slider e.g....
demo
#edui_protoWP @FrshBakedPixels
Wrapper
Wrapper + Blocks
Block Types
Title
Content
Title
Content
Default behavior
Custom Query
Blog Index Front Page
Pages Posts
Page 1
Page 2
Page 3
Post 1
Post 2
Post 3
Shared
Layout
Layout inheritance
making it responsive
#edui_protoWP @FrshBakedPixels
Assignment Box
#edui_protoWP @FrshBakedPixels
raffle
#edui_protoWP @FrshBakedPixels
Questions?
#edui_protoWP
@FrshBakedPixels
Prototyping With WordPress: No Coding Required
Prototyping With WordPress: No Coding Required
Prototyping With WordPress: No Coding Required
Prototyping With WordPress: No Coding Required
Prototyping With WordPress: No Coding Required
Prototyping With WordPress: No Coding Required
Prototyping With WordPress: No Coding Required
Prototyping With WordPress: No Coding Required
Prototyping With WordPress: No Coding Required
Prototyping With WordPress: No Coding Required
Prototyping With WordPress: No Coding Required
Prototyping With WordPress: No Coding Required
Prototyping With WordPress: No Coding Required
Prototyping With WordPress: No Coding Required
Prototyping With WordPress: No Coding Required
Prototyping With WordPress: No Coding Required
Prototyping With WordPress: No Coding Required
Prototyping With WordPress: No Coding Required
Prochain SlideShare
Chargement dans…5
×

Prototyping With WordPress: No Coding Required

WordPress is a powerful CMS but it can also be used to build fully functional prototypes. Headway theme’s drag and drop visual editor allows you to create and experiment with different layouts including fixed width and responsive designs. Use the prototypes to collect feedback, test for usability and improve your design on the fly; or clone it to test multiple variations of the same design. Being on a web server, you only need a web browser to edit, share and collaborate on your prototypes. You don’t need to know any PHP. Knowledge of HTML and CSS is helpful but not required. Here’s the best part: once you are finished, your prototype doesn’t go to waste. If you choose WordPress as CMS, you can simply modify your prototype to build the final website. If not, you can still use CSS generated by the theme. Join us to learn a simple and quick prototyping tool using a recent project as an example. Using a real project as an example, learn how to: - Use visual editor to build a grid based layout from scratch - Apply custom CSS styles - Reusing layouts, blocks and styles for different sections of the website - Export layouts to create multiple prototypes for the same project

  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Prototyping With WordPress: No Coding Required

  1. 1. Prototyping With WordPress No Coding Required Gaurav Gupta edUi Conference September 29, 2014 #edui_protoWP @FrshBakedPixels
  2. 2. #edui_protoWP @FrshBakedPixels
  3. 3. about me IT Analyst Office of the Vice Provost for Learning Innovation and Student Success Virginia Commonwealth University #edui_protoWP @FrshBakedPixels
  4. 4. the old way of doing things
  5. 5. adding prototyping to workflow
  6. 6. Balsamiq Axure Omingraffle Visio Photoshop Illustrator InDesign Paper Keynote PowerPoint HTML Bootstrap Foundation #edui_protoWP @FrshBakedPixels prototyping tools
  7. 7. my search for WordPress frameworks
  8. 8. enter Headway Themes #edui_protoWP @FrshBakedPixels
  9. 9. could this be used for prototyping?
  10. 10. Transfer Center #edui_protoWP @FrshBakedPixels
  11. 11. why WordPress? #edui_protoWP @FrshBakedPixels
  12. 12. easy to learn no coding required* * (though knowing HTML, CSS and JavaScript is helpful) why WordPress?
  13. 13. online works across OS/browsers easy collaboration easy sharing with clients why WordPress?
  14. 14. responsive layouts why WordPress?
  15. 15. reuse to create variants to build final product why WordPress?
  16. 16. There’s a plugin for that™   why WordPress?
  17. 17. what you need to get started #edui_protoWP @FrshBakedPixels
  18. 18. WordPress installation (multisite) Headway Theme
  19. 19. Plugins •  Easy Bootstrap Shortcode •  WP Responsive Menu •  NS Cloner Optional Plugins •  Types + WP Views •  Slider e.g. Master Slider, Layer Slider •  Forms e.g. Contact Form 7, Gravity Forms
  20. 20. demo #edui_protoWP @FrshBakedPixels
  21. 21. Wrapper
  22. 22. Wrapper + Blocks
  23. 23. Block Types
  24. 24. Title Content
  25. 25. Title Content Default behavior
  26. 26. Custom Query
  27. 27. Blog Index Front Page Pages Posts Page 1 Page 2 Page 3 Post 1 Post 2 Post 3 Shared Layout Layout inheritance
  28. 28. making it responsive #edui_protoWP @FrshBakedPixels
  29. 29. Assignment Box #edui_protoWP @FrshBakedPixels
  30. 30. raffle #edui_protoWP @FrshBakedPixels
  31. 31. Questions? #edui_protoWP @FrshBakedPixels

×