Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

Vision5 - CreatIQ



Site design:

  • Wireframe diagrams for site
  • Explanations of design elements
  • Examples of other sites


  • Logos
  • Cover images


  • Prepare main Vision5 page for merge
  • Merge FB pages

Social media integration:

  • Link in FB / TW / INST to one account
  • Can handle messaging for all?
  • Test that pushes to all the platforms

Peter (to be updated)

Suggested approach (ideal situation)

Blitz the site:

  • Try to create a site with a massive ‘wow’ factor to get people excited quickly
  • Most of the wow comes from using great images, on multiple pages for each [section]5
  • Will really get momentum going quickly
  • There will be some cost to Peter, but I’ll make that worth his while down the line


  • Build a site of many simple pages
  • Each page [name]
  • Each page looks great, but not information overload

Generate from GingkoApp:

  • GingkoApp (here) has JSON output
  • Marcus can write here quickly
  • Written in Markdown
  • Write code to extract the JSON and parse the Markdown
  • A little longer to set up (perhaps), but it’ll be quick to make changes in the future (minutes or seconds)
  • Better long-term solution
  • Only an extra day’s worth of programming to set up (at most)


  • They host everything so I don’t have to worry about it until I’ve got my own team to handle things
  • Not too worried about multiple servers for the Lightworker5 site, but will want to have plenty of backups for the main Vision5 site later (in case of DDoS / heavy load)


  • 5 people until the 18th April
  • Might not need everyone
  • More, just in case

Tasks (Marcus):

  • Content writing
  • Core logo design
  • Find cover photos

Tasks (other):

  • Server admin / setup
  • Generating HTML from GingkoApp
  • HTML template creation
  • Page design (CSS)
  • Generate white logos
  • Find other images for the different sections
  • Create the stack diagrams

Text content:

  • I’ll hand him the stuff in the quickest way for me to produce it (I’ve got a lot to do, and formatting takes up time for me)
  • Use Gingko (this)
  • We’ll use this page to generate the content by scraping the content from the JSON
  • Instructions are written here for developers


  • Shared storage?
  • Dropbox?
  • Github?


  • Vector format done in Illustrator
  • I just provide colour logos, and they make white-on-transparent ones from that (since we’ll need both)


  • Set up a Shutterstock account so I can download more images (preferably ASAP)
  • That way I can download new images and create logos / get the photos I want and then just hand them over
  • No need for me to explain things to developers


Sites in general


  • (main)
  • (devel)
  • (testing)
  • (admin)


  • English-only for now
  • We’ll do multi-lingual in the main site we’ll launch
  • Would like to make a big impact, so have it in lots of different languages (50?)
  • So many, because I want to get people from poor countries to sign up early on, because that will help the philanthropic side
  • Also, if it’s in 50 (or 55?) languages, that’s a huge ‘wow’ factor that inherently says this is serious
  • Nobody will translate into Tamil for example if it’s not serious
  • It’s also inherently giving respect to people who speak second-tier languages who are used to having to do things in a second-language (which will not only be appreciated by the people, but also by the people with some power)
  • Also, it’ll make it harder to suppress if the info is all out there

Lightworker5 site

2 pages:

  • (multiple pages)
  • (single pages)

  • Outline of Vision5
  • Introduction on each section +:

  • More info on each section in the form of a table
  • I’ll just send them headings and text, and they can copy/paste (quicker for me)

Vision5 site




  • Makes sense for me to set his nameservers for (and other domains)


  • Set up single hosting on whatever works best for them

Extract GingkoApp JSON:

  • Fetch this documents
  • Filter is as agreed
  • Convert the Markdown
  • Once that is done, the rest is pretty easy

Switching sites:

  • [dev] - dynamic (always changes)
  • [test] - static (copied from dev)
  • [live] - static (copied from test)

Page design:

  • Cover picture for each page
  • White logo for each section on top of the image?
  • Main menu at top
  • Menu bar in top-right
  • Footer section to main links

Use existing template ?:

  • Find appropriate template that we could use or could create our own
  • Will be generating own HTML, so might be easier
  • Copy CSS only
  • Test out with logo and some text

URL conversions:

  • [dev]

Social media:

  • Don’t want to have to deal with same posts on all platforms
  • Just Facebook for now
  • Twitter and Instagram later
  • If there’s a platform we could merge all three, then perfect - will use that

Stack diagrams:

  • Multiple stack diagrams for Internet5 / Web5 / Awakening5
  • Sketch images to be provided by Marcus
  • Example


  • Set up Stack (or other tools) for group


  • Setup Dropbox (or other cloud storage) for group


  • Set up Shutterstock to be used by team
  • Would like to have access afterwards, so maybe just extend the one I currently have if they don’t have one already

Admin button (bonus):

  • Simple login
  • Admin button to move dev -> test and test -> live


Agreed actions




  • Will



This GingkoApp page contains the content for the Vision5 websites that


Extracting the content

  1. Fetch the JSON content from the JSON link above
  2. Parse the tree using the ‘content’ and ‘children’ cards to structure it
  3. Use the tree structure explained below to generate HTML from the Markdown contained in the content fields

Tree structure

Note: You’ll need to extract the ‘#’ characters from the names

  • Sites
  • [domain]
  • [section]
  • [content]

Content sections

Content blocks:

  • Content sections may be a single cards or multiple cards
  • If they are multiple (child) cards, they should be merged
  • Each card should have a ‘div’ around it
  • Each block / list should also have a ‘div’ around it for formatting


  • All content is written in Markdown
  • The Markdown should be converted to HTML

Creating HTML pages

  • I’ll discuss that with Peter
  • The sections might be a little customized for each page


  • Speak to Peter