The ImpVis Visual Identity - Ethos - Revision history

Cclewley: /* The ImpVis Visual Identity - Colour Schemes */

2021-09-28T12:59:20Z

The ImpVis Visual Identity - Colour Schemes

Cclewley at 12:30, 28 September 2021

2021-09-28T12:30:36Z

← Older revision		Revision as of 12:30, 28 September 2021
Line 37:		Line 37:
	== Text ==		== Text ==
	Imperial College London’s executive typeface “Meta normal” is used as the font on all visualisations. For more information on this, see: https://www.imperial.ac.uk/brand-style-guide/visual-identity/font/ .		Imperial College London’s executive typeface “Meta normal” is used as the font on all visualisations. For more information on this, see: https://www.imperial.ac.uk/brand-style-guide/visual-identity/font/ .
			[[Category:Graphic Design]]

Cclewley at 12:29, 28 September 2021

2021-09-28T12:29:16Z

← Older revision		Revision as of 12:29, 28 September 2021
Line 36:		Line 36:
	Where the RGB has replaced the hex codes for each colour for the colour. So for example, if I wanted to access the shades for #0E406F (the first colour), then I would use: <code>color: colorStore.color_full_list[“navy”]</code> within the data of my component and then to access a specific shade I use <code>this.color.shade_500</code> (for the unchanged input navy colour), <code>this.color.shade_900</code>(for the darkest shade), <code>this.color.shade_100</code>(for the lightest shade).		Where the RGB has replaced the hex codes for each colour for the colour. So for example, if I wanted to access the shades for #0E406F (the first colour), then I would use: <code>color: colorStore.color_full_list[“navy”]</code> within the data of my component and then to access a specific shade I use <code>this.color.shade_500</code> (for the unchanged input navy colour), <code>this.color.shade_900</code>(for the darkest shade), <code>this.color.shade_100</code>(for the lightest shade).
	== Text ==		== Text ==
	Imperial College London’s executive typeface “Meta normal” is used as the font on all visualisations. For more information on this, see: https://www.imperial.ac.uk/brand-style-guide/visual-identity/font/ ~~You can refer to “Notes_on_format_for_clarity_and_comprehension.pdf” in this repository for more details~~.		Imperial College London’s executive typeface “Meta normal” is used as the font on all visualisations. For more information on this, see: https://www.imperial.ac.uk/brand-style-guide/visual-identity/font/ .

Cclewley at 12:24, 28 September 2021

2021-09-28T12:24:24Z

← Older revision		Revision as of 12:24, 28 September 2021
Line 1:		Line 1:
	At ImpVis, we have several design principles and goals that help guide how visualisations look and feel. As developers, you should always keep these principles in mind; as long as you adhere to our ethos, your specific styling can vary however you want.		At ImpVis, we have several design principles and goals that help guide how visualisations look and feel. As developers, you should always keep these principles in mind; as long as you adhere to our ethos, your specific styling can vary however you want.

	* '''Playful'''We want to encourage people to get involved in our visualisations. The colours, layout, and animation should be enticing and invite creativity and curiosity.		* '''Playful''' We want to encourage people to get involved in our visualisations. The colours, layout, and animation should be enticing and invite creativity and curiosity.
	* '''Intuitive:'''Although every ~~‘learn’~~ visualisation should be accompanied by guidance, any person should immediately interact with a visualisation. Buttons to be pressed and sliders to be dragged should seem to “pop” out the screen.		* '''Intuitive''' Although every visualisation should be accompanied by guidance, any person should immediately be able to interact with a visualisation. Buttons to be pressed and sliders to be dragged should seem to “pop” out the screen.
	* '''Light:'''In terms of tone, any ~~Imperial Visualisation~~ should never feel dark, heavy, or too artificial. Instead, it should feel light, fun, and natural.		* '''Light''' In terms of tone, any ImpVis visualisation should never feel dark, heavy, or too artificial. Instead, it should feel light, fun, and natural.
	* '''Clean and Concise''' As we are dealing with difficult scientific concepts, one of our main priorities is not to overwhelm the user with complexity. As such, each visualisation should look clean and organised (but not disparate).		* '''Clean and Concise''' As we are dealing with difficult scientific concepts, one of our main priorities is not to overwhelm the user with complexity. As such, each visualisation should look clean and organised (but not disparate).
	* '''Part of a journey ~~(for suites)~~'''Every visualisation should be taking the user on a journey. The page's overall design should reflect this; the user’s attention should be drawn to the start of the visualisation journey and move slowly towards the journey’s end.		* '''Part of a journey''' Every visualisation should be taking the user on a journey. The page's overall design should reflect this; the user’s attention should be drawn to the start of the visualisation journey and move slowly towards the journey’s end.
	== The ImpVis Visual Identity - Colour Schemes ==		== The ImpVis Visual Identity - Colour Schemes ==
	[[File:Sliderblock.ca8ef98e.png\|thumb\|Colour blind friendly sliderblock]]		[[File:Sliderblock.ca8ef98e.png\|thumb\|Colour blind friendly sliderblock]]
	When developing the colour scheme for any individual visualisation, special attention should be paid to keeping the visualisations colour-blind friendly. In practice, this means making fair use of monochromatic schemes when possible and using online tools to ensure that, when contrasting colours are chosen (e.g., in plots), they are visibly contrasting to everyone. ~~Some useful links are: <nowiki>http://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3</nowiki> and <nowiki>https://venngage.com/blog/color-blind-friendly-palette/</nowiki>~~		When developing the colour scheme for any individual visualisation, special attention should be paid to keeping the visualisations colour-blind friendly. In practice, this means making fair use of monochromatic schemes when possible and using online tools to ensure that, when contrasting colours are chosen (e.g., in plots), they are visibly contrasting to everyone.

	~~Currently, we have two primary colours for the lay-out components, the Imperial Blue (#133f6f) and the Hotspot Orange (#FF901C). These~~ are ~~used in the Title bar and hotspot button components, respectively~~. ~~Within components such as the sliderBlock, we advise using different shades~~ and tints of a single colour to create a distinction between subsections within a component and combining with the help of black and white text depending on the given background colour. The sliderBlock shown below highlights this.		Some useful links are: http://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3 and https://venngage.com/blog/color-blind-friendly-palette/
	~~[[File~~:~~Colour scheme~~.~~1bd4abb1.png\|center\|frameless\|600x600px\|~~

			Below is our ImpVis branded colour scheme, with associated hex codes. The template colours are based on this colour scheme.[[File:Colour scheme.1bd4abb1.png\|center\|frameless\|600x600px\|



	The ImpVis colour scheme]]The range of shade and tints ~~show below~~ is achieved using two equations:
			The ImpVis colour scheme]]Within components such as the slider, we advise using different shades and tints of a single colour to create a distinction between subsections within a component and combining with the help of black and white text depending on the given background colour. The figure shown to the right highlights this.[[File:Sliderblock colours.f57fbdfb.png\|thumb\|Range of shades of a single colour]]The range of shade and tints shown to the right is achieved using two equations:

	* New_rgb = old_r (1 - shade_Factor), old_g (1 - shade_Factor), old_b *(1 - shade_Factor)		* New_rgb = old_r (1 - shade_Factor), old_g (1 - shade_Factor), old_b *(1 - shade_Factor)
Line 31:		Line 32:
	* "orange": [239,120,20],		* "orange": [239,120,20],
	* "tangerine": [246,176,15],		* "tangerine": [246,176,15],
	* ~~[[File:Sliderblock colours.f57fbdfb.png\|thumb\|Sliderblock colours]]~~"yellow": [252,217,22]		*"yellow": [252,217,22]

	Where the RGB has replaced the hex codes for each colour for the colour. So for example, if I wanted to access the shades for #0E406F (the first colour), then I would use: <code>color: colorStore.color_full_list[“navy”]</code> within the data of my component and then to access a specific shade I use <code>this.color.shade_500</code> (for the unchanged input navy colour), <code>this.color.shade_900</code>(for the darkest shade), <code>this.color.shade_100</code>(for the lightest shade). For an example of components using the colours see sliderBlock and guidanceModal.


			Where the RGB has replaced the hex codes for each colour for the colour. So for example, if I wanted to access the shades for #0E406F (the first colour), then I would use: <code>color: colorStore.color_full_list[“navy”]</code> within the data of my component and then to access a specific shade I use <code>this.color.shade_500</code> (for the unchanged input navy colour), <code>this.color.shade_900</code>(for the darkest shade), <code>this.color.shade_100</code>(for the lightest shade).
	== Text ==		== Text ==
	Imperial College London’s executive typeface “Meta normal” is used as the font on all visualisations. For more information on this, see: https://www.imperial.ac.uk/brand-style-guide/visual-identity/font/ You can refer to “Notes_on_format_for_clarity_and_comprehension.pdf” in this repository for more details.		Imperial College London’s executive typeface “Meta normal” is used as the font on all visualisations. For more information on this, see: https://www.imperial.ac.uk/brand-style-guide/visual-identity/font/ You can refer to “Notes_on_format_for_clarity_and_comprehension.pdf” in this repository for more details.

Mark Thomas at 18:33, 16 July 2021

2021-07-16T18:33:13Z

← Older revision		Revision as of 18:33, 16 July 2021
Line 34:		Line 34:

	Where the RGB has replaced the hex codes for each colour for the colour. So for example, if I wanted to access the shades for #0E406F (the first colour), then I would use: <code>color: colorStore.color_full_list[“navy”]</code> within the data of my component and then to access a specific shade I use <code>this.color.shade_500</code> (for the unchanged input navy colour), <code>this.color.shade_900</code>(for the darkest shade), <code>this.color.shade_100</code>(for the lightest shade). For an example of components using the colours see sliderBlock and guidanceModal.		Where the RGB has replaced the hex codes for each colour for the colour. So for example, if I wanted to access the shades for #0E406F (the first colour), then I would use: <code>color: colorStore.color_full_list[“navy”]</code> within the data of my component and then to access a specific shade I use <code>this.color.shade_500</code> (for the unchanged input navy colour), <code>this.color.shade_900</code>(for the darkest shade), <code>this.color.shade_100</code>(for the lightest shade). For an example of components using the colours see sliderBlock and guidanceModal.


			== Text ==
			Imperial College London’s executive typeface “Meta normal” is used as the font on all visualisations. For more information on this, see: https://www.imperial.ac.uk/brand-style-guide/visual-identity/font/ You can refer to “Notes_on_format_for_clarity_and_comprehension.pdf” in this repository for more details.

Mark Thomas: /* The ImpVis Visual Identity - Colour Schemes */

2021-07-16T18:32:40Z

The ImpVis Visual Identity - Colour Schemes

← Older revision		Revision as of 18:32, 16 July 2021
Line 11:		Line 11:

	Currently, we have two primary colours for the lay-out components, the Imperial Blue (#133f6f) and the Hotspot Orange (#FF901C). These are used in the Title bar and hotspot button components, respectively. Within components such as the sliderBlock, we advise using different shades and tints of a single colour to create a distinction between subsections within a component and combining with the help of black and white text depending on the given background colour. The sliderBlock shown below highlights this.		Currently, we have two primary colours for the lay-out components, the Imperial Blue (#133f6f) and the Hotspot Orange (#FF901C). These are used in the Title bar and hotspot button components, respectively. Within components such as the sliderBlock, we advise using different shades and tints of a single colour to create a distinction between subsections within a component and combining with the help of black and white text depending on the given background colour. The sliderBlock shown below highlights this.
	[[File:Colour scheme.1bd4abb1.png\|center\|frameless\|600x600px\|The ImpVis colour scheme]]		[[File:Colour scheme.1bd4abb1.png\|center\|frameless\|600x600px\|




			The ImpVis colour scheme]]The range of shade and tints show below is achieved using two equations:

			* New_rgb = old_r (1 - shade_Factor), old_g (1 - shade_Factor), old_b *(1 - shade_Factor)
			* New_rgb = old_r + (255 - old_r )tint_Factor, old_g + (255 - old_g )tint_Factor, old_b + (255 - old_b)*tint_Factor

			The first equation produced darker shades, and the second equation made lighter tints, with the shade and tint factors in each varied to increase change. These colours and their shades are produced once at the page load in '''colorStore.js''' vue bus and may be accessed by using <code>import colorStore from "@/buses/colorStore"</code> the shades of a given colour are then selected using color: <code>colorStore.color_full_list["myColour"]</code>. Note that the selectable colours are accessed using the following keys:

			* "navy": [14,64,111],
			* "blue": [0,139,210],
			* "teal": [17,177,162],
			* "green": [168,204,106],
			* "purple": [98,41,107],
			* "berry": [207,16,63],
			* "orange": [239,120,20],
			* "tangerine": [246,176,15],
			* [[File:Sliderblock colours.f57fbdfb.png\|thumb\|Sliderblock colours]]"yellow": [252,217,22]

			Where the RGB has replaced the hex codes for each colour for the colour. So for example, if I wanted to access the shades for #0E406F (the first colour), then I would use: <code>color: colorStore.color_full_list[“navy”]</code> within the data of my component and then to access a specific shade I use <code>this.color.shade_500</code> (for the unchanged input navy colour), <code>this.color.shade_900</code>(for the darkest shade), <code>this.color.shade_100</code>(for the lightest shade). For an example of components using the colours see sliderBlock and guidanceModal.

Mark Thomas: /* The ImpVis Visual Identity - Colour Schemes */

2021-07-16T18:30:50Z

The ImpVis Visual Identity - Colour Schemes

← Older revision		Revision as of 18:30, 16 July 2021
Line 7:		Line 7:
	* '''Part of a journey (for suites)'''Every visualisation should be taking the user on a journey. The page's overall design should reflect this; the user’s attention should be drawn to the start of the visualisation journey and move slowly towards the journey’s end.		* '''Part of a journey (for suites)'''Every visualisation should be taking the user on a journey. The page's overall design should reflect this; the user’s attention should be drawn to the start of the visualisation journey and move slowly towards the journey’s end.
	== The ImpVis Visual Identity - Colour Schemes ==		== The ImpVis Visual Identity - Colour Schemes ==
			[[File:Sliderblock.ca8ef98e.png\|thumb\|Colour blind friendly sliderblock]]
			When developing the colour scheme for any individual visualisation, special attention should be paid to keeping the visualisations colour-blind friendly. In practice, this means making fair use of monochromatic schemes when possible and using online tools to ensure that, when contrasting colours are chosen (e.g., in plots), they are visibly contrasting to everyone. Some useful links are: <nowiki>http://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3</nowiki> and <nowiki>https://venngage.com/blog/color-blind-friendly-palette/</nowiki>

			Currently, we have two primary colours for the lay-out components, the Imperial Blue (#133f6f) and the Hotspot Orange (#FF901C). These are used in the Title bar and hotspot button components, respectively. Within components such as the sliderBlock, we advise using different shades and tints of a single colour to create a distinction between subsections within a component and combining with the help of black and white text depending on the given background colour. The sliderBlock shown below highlights this.
			[[File:Colour scheme.1bd4abb1.png\|center\|frameless\|600x600px\|The ImpVis colour scheme]]

Mark Thomas at 18:27, 16 July 2021

2021-07-16T18:27:59Z

← Older revision		Revision as of 18:27, 16 July 2021
Line 6:		Line 6:
	* '''Clean and Concise''' As we are dealing with difficult scientific concepts, one of our main priorities is not to overwhelm the user with complexity. As such, each visualisation should look clean and organised (but not disparate).		* '''Clean and Concise''' As we are dealing with difficult scientific concepts, one of our main priorities is not to overwhelm the user with complexity. As such, each visualisation should look clean and organised (but not disparate).
	* '''Part of a journey (for suites)'''Every visualisation should be taking the user on a journey. The page's overall design should reflect this; the user’s attention should be drawn to the start of the visualisation journey and move slowly towards the journey’s end.		* '''Part of a journey (for suites)'''Every visualisation should be taking the user on a journey. The page's overall design should reflect this; the user’s attention should be drawn to the start of the visualisation journey and move slowly towards the journey’s end.
			== The ImpVis Visual Identity - Colour Schemes ==

Mark Thomas at 18:27, 16 July 2021

2021-07-16T18:27:07Z

← Older revision		Revision as of 18:27, 16 July 2021
Line 1:		Line 1:
	~~awsd~~		At ImpVis, we have several design principles and goals that help guide how visualisations look and feel. As developers, you should always keep these principles in mind; as long as you adhere to our ethos, your specific styling can vary however you want.

			* '''Playful'''We want to encourage people to get involved in our visualisations. The colours, layout, and animation should be enticing and invite creativity and curiosity.
			* '''Intuitive:'''Although every ‘learn’ visualisation should be accompanied by guidance, any person should immediately interact with a visualisation. Buttons to be pressed and sliders to be dragged should seem to “pop” out the screen.
			* '''Light:'''In terms of tone, any Imperial Visualisation should never feel dark, heavy, or too artificial. Instead, it should feel light, fun, and natural.
			* '''Clean and Concise''' As we are dealing with difficult scientific concepts, one of our main priorities is not to overwhelm the user with complexity. As such, each visualisation should look clean and organised (but not disparate).
			* '''Part of a journey (for suites)'''Every visualisation should be taking the user on a journey. The page's overall design should reflect this; the user’s attention should be drawn to the start of the visualisation journey and move slowly towards the journey’s end.

Mark Thomas: Created page with "awsd"

2021-07-16T18:26:48Z

Created page with "awsd"

New page

awsd

← Older revision		Revision as of 12:59, 28 September 2021
Line 7:		Line 7:
	* '''Part of a journey''' Every visualisation should be taking the user on a journey. The page's overall design should reflect this; the user’s attention should be drawn to the start of the visualisation journey and move slowly towards the journey’s end.		* '''Part of a journey''' Every visualisation should be taking the user on a journey. The page's overall design should reflect this; the user’s attention should be drawn to the start of the visualisation journey and move slowly towards the journey’s end.
	== The ImpVis Visual Identity - Colour Schemes ==		== The ImpVis Visual Identity - Colour Schemes ==
	~~[[File:Sliderblock.ca8ef98e.png\|thumb\|Colour blind friendly sliderblock]]~~
	When developing the colour scheme for any individual visualisation, special attention should be paid to keeping the visualisations colour-blind friendly. In practice, this means making fair use of monochromatic schemes when possible and using online tools to ensure that, when contrasting colours are chosen (e.g., in plots), they are visibly contrasting to everyone.		When developing the colour scheme for any individual visualisation, special attention should be paid to keeping the visualisations colour-blind friendly. In practice, this means making fair use of monochromatic schemes when possible and using online tools to ensure that, when contrasting colours are chosen (e.g., in plots), they are visibly contrasting to everyone.

	Some useful links are: http://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3 and https://venngage.com/blog/color-blind-friendly-palette/		Some useful links are: http://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3 and https://venngage.com/blog/color-blind-friendly-palette/

	Below is our ImpVis branded colour scheme, with associated hex codes. The template colours are based on this colour scheme.[[File:Colour scheme.1bd4abb1.png\|center\|frameless\|600x600px\|		Below is our ImpVis branded colour scheme, with associated hex codes. The template colours are based on this colour scheme. Developers have freedom in picking colours for their components within this range.[[File:Colour scheme.1bd4abb1.png\|center\|frameless\|600x600px\|




	The ImpVis colour scheme]]Within components such as the slider, we advise using different shades and tints of a single colour to create a distinction between subsections within a component and combining with the help of black and white text depending on the given background colour. The figure shown to the right highlights this.~~[[File:Sliderblock colours.f57fbdfb.png\|thumb\|Range of shades of a single colour]]~~The range of shade and tints shown to the ~~right~~ is achieved using two equations:		The ImpVis colour scheme]][[File:Sliderblock.ca8ef98e.png\|thumb\|Slider colours example]]Within components such as the slider, we advise using different shades and tints of a single colour to create a distinction between subsections within a component and combining with the help of black and white text depending on the given background colour. The figure shown to the right highlights this.

			The range of shade and tints shown of the figure below is achieved using two equations:

	* New_rgb = old_r (1 - shade_Factor), old_g (1 - shade_Factor), old_b *(1 - shade_Factor)		* New_rgb = old_r (1 - shade_Factor), old_g (1 - shade_Factor), old_b *(1 - shade_Factor)
	* New_rgb = old_r + (255 - old_r )tint_Factor, old_g + (255 - old_g )tint_Factor, old_b + (255 - old_b)*tint_Factor		* New_rgb = old_r + (255 - old_r )tint_Factor, old_g + (255 - old_g )tint_Factor, old_b + (255 - old_b)*tint_Factor

	The first equation produced darker shades, and the second equation made lighter tints, with the shade and tint factors in each varied to increase change. These colours and their shades are produced once at the page load in '''colorStore.js''' vue bus and may be accessed by using <code>import colorStore from "@/buses/colorStore"</code> the shades of a given colour are then selected using color: <code>colorStore.color_full_list["myColour"]</code>. Note that the selectable colours are accessed using the following keys:		The first equation produced darker shades, and the second equation made lighter tints, with the shade and tint factors in each varied to increase change. These colours and their shades are produced once at the page load in '''colorStore.js''' vue bus and may be accessed by using <code>import colorStore from "@/buses/colorStore"</code> the shades of a given colour are then selected using color: <code>colorStore.color_full_list["myColour"]</code>. Note that the selectable colours are accessed using the following keys:[[File:Sliderblock colours.f57fbdfb.png\|thumb\|Range of shades of a single colour]]

	* "navy": [14,64,111],		* "navy": [14,64,111],
	* "blue": [0,139,210],		* "blue": [0,139,210],