Difference between revisions of "Our design and development process"

From ImpVis Wiki
Jump to navigation Jump to search
(→‎3. Visualisation design: Written text, but links to resources need to be inserted in sections 4, 5, and 6.)
Line 1: Line 1:
The design & development process of new projects follows the following steps from initial ideas to publication on the [https://impvis.co.uk ImpVis] website:
The design & development process of new projects follows the following steps from initial ideas to publication on the [https://impvis.co.uk ImpVis] website:


# Connect with our community.
== Connecting with our community ==
# Propose a new project or sign up to an advertised one.
# Design the visualisation based on the aims & learning objectives.
# Develop the visualisation in Javascript and HTML.
# Review of the visualisation by peers and the staff partner(s).
# Publication of the visualisation on the website.
 
== 1. Connecting with our community ==
ImpVis has three platforms of communication for separate purposes:
ImpVis has three platforms of communication for separate purposes:


Line 15: Line 8:
* Our Teams space, which is the main communication platform for our team. This is where we set up meetings and discuss projects in dedicated channels. '''Request access to our Teams space [https://impvis.co.uk/join here]'''.
* Our Teams space, which is the main communication platform for our team. This is where we set up meetings and discuss projects in dedicated channels. '''Request access to our Teams space [https://impvis.co.uk/join here]'''.


== 2. Getting involved on a visualisation project ==
== Getting involved on a visualisation project ==
Once you have connected with our community, you can get started on a project. You can choose to propose your own project, or sign up to an advertised project. Read all about how to do this [[Getting involved|here]].  
Once you have connected with our community, you can get started on a project. You can choose to propose your own project, or sign up to an advertised project. Read all about how to do this [[Getting involved|here]].  


== 3. Visualisation design ==
== Visualisation design based on aims and learning objectives. ==
A good design process is fundamental to creating an effective interactive visualisation for education. Before any coding starts, there needs to be a clear plan for ‘version 1.0’ of the visualisation. This requires defining learning objectives and creating a design sketch, including the visual and interactive elements of the visualisation. The design will need to be documented on the visualisation's dedicated Wiki page. Before you start, have a look at the following resources:
A good design process is fundamental to creating an effective interactive visualisation for education. Before any coding starts, there needs to be a clear plan for ‘version 1.0’ of the visualisation. This requires defining learning objectives and creating a design sketch, including the visual and interactive elements of the visualisation. The design will need to be documented on the visualisation's dedicated Wiki page. Before you start, have a look at the following resources:


Line 28: Line 21:
Once all staff partners are happy with the design, they formally confirm their agreement on the website to move their project to the development stage (read here about how to do this).
Once all staff partners are happy with the design, they formally confirm their agreement on the website to move their project to the development stage (read here about how to do this).


== 4. Visualisation development in Javascript and HTML ==
== Visualisation development in Javascript and HTML ==
This is the programming phase. With the aid of a visualisation template the ‘version 1.0’ functionality of the visualisation will be coded up in Javascript / HTML / CSS. There is extensive guidance to be found on our Wiki on the coding process as well as tips on how to get started learning the relevant programming languages and packages. Again, the focus should be on implementing the 'version 1.0' design: any new ideas should be noted down in the 'Future Work' section of the visualisation's Wiki page.  
This is the programming phase. With the aid of a visualisation template the ‘version 1.0’ functionality of the visualisation will be coded up in Javascript / HTML / CSS. There is extensive guidance to be found on our Wiki on the coding process as well as tips on how to get started learning the relevant programming languages and packages. Again, the focus should be on implementing the 'version 1.0' design: any new ideas should be noted down in the 'Future Work' section of the visualisation's Wiki page.  


== 5. Review process ==
== Review process by peers and staff partner(s) ==
Once all the functionality in the initial design has been coded up, the visualisation will be reviewed by peers and the staff partner. This process is done via the ImpVis website. Read all about it in the following pages:
Once all the functionality in the initial design has been coded up, the visualisation will be reviewed by peers and the staff partner. This process is done via the ImpVis website. Read all about it in the following pages:


Line 39: Line 32:
Reviewers can raise any issues they find via the website and indicate their priority. Developers will be notified of any issues raised - they can then implement these and upload a new version of the visualisation.  
Reviewers can raise any issues they find via the website and indicate their priority. Developers will be notified of any issues raised - they can then implement these and upload a new version of the visualisation.  


== 6. Publication on the website ==
== Publication on the website ==
Once all reviewers have finished their review and there are no outstanding critical issues, the visualisation will automatically be approved and published on the '[https://impvis.co.uk/teach Teach]' environment of the website. The only remaining action is to link the visualisation to the module for which it was intended, by creating a Collection for publication on the 'Learn' environment of the website. This will ensure students can find relevant visualisations easily. This page contains full guidance on creating a Collection.
Once all reviewers have finished their review and there are no outstanding critical issues, the visualisation will automatically be approved and published on the '[https://impvis.co.uk/teach Teach]' environment of the website. The only remaining action is to link the visualisation to the module for which it was intended, by creating a Collection for publication on the 'Learn' environment of the website. This will ensure students can find relevant visualisations easily. This page contains full guidance on creating a Collection.


== Further updates to the visualisation ==
Finally, once all the steps above have been taken for 'version 1.0' of the visualisation, any future work ideas may initiate a new project or a new design phase for a more advanced version of the visualisation. Ensure that any updates to the visualisation design are documented in the visualisation's Wiki page and contributors duly credited.
Finally, once all the steps above have been taken for 'version 1.0' of the visualisation, any future work ideas may initiate a new project or a new design phase for a more advanced version of the visualisation. Ensure that any updates to the visualisation design are documented in the visualisation's Wiki page and contributors duly credited.


__FORCETOC__
__FORCETOC__

Revision as of 10:03, 22 September 2021

The design & development process of new projects follows the following steps from initial ideas to publication on the ImpVis website:

Connecting with our community

ImpVis has three platforms of communication for separate purposes:

  • The website, which is public-facing and displays all our finalised visualisations plus current projects. If you wish to become an ImpVis member, you need to register so the site's full functionality is available to you.
  • This Wiki, which is our 'dynamic knowledgebase'. Here you can find out everything about how we work together, as well as guidance to help you design and code up your visualisation. Projects have their own associated Wiki pages which serve as 'ReadMe' files to document their aim, objectives, and development. Most of the Wiki is only visible to ImpVis members. If you are signed up to the ImpVis website, you will automatically have an associated Wiki account with the same login details. Alternatively you can create a Wiki account by clicking the 'Create Account' link at the top right of the Wiki page.
  • Our Teams space, which is the main communication platform for our team. This is where we set up meetings and discuss projects in dedicated channels. Request access to our Teams space here.

Getting involved on a visualisation project

Once you have connected with our community, you can get started on a project. You can choose to propose your own project, or sign up to an advertised project. Read all about how to do this here.

Visualisation design based on aims and learning objectives.

A good design process is fundamental to creating an effective interactive visualisation for education. Before any coding starts, there needs to be a clear plan for ‘version 1.0’ of the visualisation. This requires defining learning objectives and creating a design sketch, including the visual and interactive elements of the visualisation. The design will need to be documented on the visualisation's dedicated Wiki page. Before you start, have a look at the following resources:

It is vital during the design phase to remain focussed on the main learning objectives. Usually the design (and development) phase inspires many further ideas; note these down in the 'Future Work' section of your Wiki page. You can design and develop these at a later phase, when your original ideas have been fully developed and uploaded. If you try to incorporate your new ideas immediately, you will find that you are likely never to have a fully developed visualisation to publish on the website!

Once all staff partners are happy with the design, they formally confirm their agreement on the website to move their project to the development stage (read here about how to do this).

Visualisation development in Javascript and HTML

This is the programming phase. With the aid of a visualisation template the ‘version 1.0’ functionality of the visualisation will be coded up in Javascript / HTML / CSS. There is extensive guidance to be found on our Wiki on the coding process as well as tips on how to get started learning the relevant programming languages and packages. Again, the focus should be on implementing the 'version 1.0' design: any new ideas should be noted down in the 'Future Work' section of the visualisation's Wiki page.

Review process by peers and staff partner(s)

Once all the functionality in the initial design has been coded up, the visualisation will be reviewed by peers and the staff partner. This process is done via the ImpVis website. Read all about it in the following pages:

  1. Uploading a visualisation
  2. Reviewing a visualisation

Reviewers can raise any issues they find via the website and indicate their priority. Developers will be notified of any issues raised - they can then implement these and upload a new version of the visualisation.

Publication on the website

Once all reviewers have finished their review and there are no outstanding critical issues, the visualisation will automatically be approved and published on the 'Teach' environment of the website. The only remaining action is to link the visualisation to the module for which it was intended, by creating a Collection for publication on the 'Learn' environment of the website. This will ensure students can find relevant visualisations easily. This page contains full guidance on creating a Collection.

Further updates to the visualisation

Finally, once all the steps above have been taken for 'version 1.0' of the visualisation, any future work ideas may initiate a new project or a new design phase for a more advanced version of the visualisation. Ensure that any updates to the visualisation design are documented in the visualisation's Wiki page and contributors duly credited.