Difference between revisions of "Team:Cambridge-JIC/Wiki Design"
Simonhkswan (Talk | contribs) |
Simonhkswan (Talk | contribs) |
||
| Line 4: | Line 4: | ||
<style> | <style> | ||
p { | p { | ||
| − | font-family: Open Sans; font-weight: 300; font-size: 120%; | + | font-family: Open Sans; font-weight: 300; font-size: 120%; line-height:30px; |
} | } | ||
| − | li { | + | li.list { |
| − | font-family: Open Sans; font-weight: 300; font-size: 120% | + | font-family: Open Sans; font-weight: 300; font-size: 120%; line-height:30px; |
</style> | </style> | ||
| Line 47: | Line 47: | ||
</center> | </center> | ||
<p><ul> | <p><ul> | ||
| − | <li>We used four different hues that were all cool colours.</li><br> | + | <li class="list">We used four different hues that were all cool colours.</li><br> |
| − | <li>Each hue then had two or three shades, made by changing the lightness and saturation.</li><br> | + | <li class="list">Each hue then had two or three shades, made by changing the lightness and saturation.</li><br> |
| − | <li>For backgrounds, avoid using highly saturated colours. None of the colours we chose were very saturated, this is to reduce the strain on viewers' eyes. This is why pastel palettes can be so visually pleasing.</li><br> | + | <li class="list">For backgrounds, avoid using highly saturated colours. None of the colours we chose were very saturated, this is to reduce the strain on viewers' eyes. This is why pastel palettes can be so visually pleasing.</li><br> |
| − | <li> It's useful to have both dark (around 80/255 lightness) and light (around 220/250 lightness) colours when considering text on backgrounds. High contrast is needed to easily make out the features of words. Note also that fine details in bright blue can be hard to resolve with the human eye due to the lower abundance of S-cone receptor cells in the eye.</li><br> | + | <li class="list"> It's useful to have both dark (around 80/255 lightness) and light (around 220/250 lightness) colours when considering text on backgrounds. High contrast is needed to easily make out the features of words. Note also that fine details in bright blue can be hard to resolve with the human eye due to the lower abundance of S-cone receptor cells in the eye.</li><br> |
| − | <li> Once you have picked a few colours then find their RGB values, ready to use for your website!</li><br> | + | <li class="list"> Once you have picked a few colours then find their RGB values, ready to use for your website!</li><br> |
</ul></p> | </ul></p> | ||
<h3> Fonts </h3> | <h3> Fonts </h3> | ||
Revision as of 19:15, 18 September 2015
Graphic Design
Colours
Before creating too many images and colouring in your wiki, deciding on a colour scheme can ensure your wiki looks professional.
Colours in HTML are given as RGB values. These can be difficult to visualise and match. Instead pick your colours first with HSL (hue, saturation and lightness) values. As a guide, three to four different hues is easy to work with.
- We used four different hues that were all cool colours.
- Each hue then had two or three shades, made by changing the lightness and saturation.
- For backgrounds, avoid using highly saturated colours. None of the colours we chose were very saturated, this is to reduce the strain on viewers' eyes. This is why pastel palettes can be so visually pleasing.
- It's useful to have both dark (around 80/255 lightness) and light (around 220/250 lightness) colours when considering text on backgrounds. High contrast is needed to easily make out the features of words. Note also that fine details in bright blue can be hard to resolve with the human eye due to the lower abundance of S-cone receptor cells in the eye.
- Once you have picked a few colours then find their RGB values, ready to use for your website!
Fonts
Unify your fonts across your webpage. Ideally, decide on one or to serif fonts and one or two sans-serif fonts. Serifs are the ticks on text that can make it easier to read, as letters are identified more easily. Our wiki uses three fonts: Sabon - a serif font, Open Sans, and Hiragino Sans GB.
When including fonts in style tags in your wiki, assign a family of fonts using font-family: font1, font2,... where font1, font2,... is the preferential order of similar fonts to be displayed in case a certain font isn't supported by the user's browser.
Making Images with Inkscape
