Prototyping with WordPress: No coding required

Monday, October 20th, 2014


  • Gaurav Gupta – Virginia Commonwealth University

Location: Broadway

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


Old way:

  • paper
  • photoshop
  • html

2 month to build a site, needed to search for WP frameworks. Found a cool piece of software

You need:

  • WordPress Multisite
  • Headway theme
  • Easy bootstrap shortcode
  • WP Responsive Menu
  • NS Cloner (clones sites)
  • Sketches (vary basic ones)


  • Layout
    • wrapper
      • blocks

Just building a rough draft… But how do you move to a polished version?



Leave a Reply

You know you want to...