Website Design Document

Headings

  • Headings should be in the center of the page and have a font size of 320%, making it stand out from the other text as it is much larger. They should be in font 'Neucha'

Example Heading

Paragraphs

  • Paragraphs should have an outer margin of 3% so that text does not go right up to the edge of the screen. There should be a line height of 130% so that the lines of text aren't too tight. The paragraph font should be 'Open Sans Condensed' and the text itself should be justified to reach the borders of the page

Sample paragraph. Lorem ipsum dolor sit amet, mei detracto insolens at, an vim affert labores, nam everti debitis scripserit no. Partem nostro urbanitas ut nam, ad sit vidit ornatus. An delectus placerat qualisque eam. Diam sint aperiam an sit, docendi accumsan deserunt no mei. Qui et essent fuisset. Ne eos euismod verterem molestiae. Ea duo honestatis complectitur, nusquam pertinax scribentur ne sea, mel primis consulatu ea. Mea ex mundi gubergren, cum alii legendos vituperatoribus ut.

Cipher Encrypt + Decrypt

  • The encrypt and decrypt text areas for each cipher should have a textured scroll background to contrast with the white background of the page. There should be placeholder text within the text area to make it clear whether the text area is for normal text or encrypted text. The font of the text area should be in font 'Neucha', to match the headings and look more like handwriting rather than the standard font used in paragraphs etc.

YouTube Videos

  • YouTube videos should be displayed on the page with a size of 560 x 315. This is the default recommended size by YouTube as sticks to the standard 16:9 video playback aspect ratio. The video should have a thin black border of 3px in order to make it seem more integrated into the web page instead of just a random video

Images

  • Image examples should be displayed in the same positon on each page and of the same layout in order to aid the users understanding of current web page cipher. They should have informative text integrated to explain what is being demonstrated. For example, 'Shift of 3' (Key = 3)