Category: Applied Art For The Web

Class 6: What I Learned This Week…

Colour

A range of different colours can have a variety of different meanings and interesting historical reasons. For example, whilst it is quite commonly known that purple is a colour used a lot by royals, I didn’t know that this was because back in the day purple was the most expensive colour to dye, and so the royal family used it a lot to show their wealth. Red can also be percieved as hatred, anger or a warning, as well as love.

Colour Combinations

• Depending on the background colour, it can either illuminate the foreground or make it blend into the background and disappear.
• Certain combinations are bad for colour blindless aspects such as red and blue. High brightness and saturation also hurts the eyes to look at.
• For logo design it is best practice to start in black and white so that you can work with shape and from first, and then you can match colours to the density of the shade later on.
• Monochromatic is the combination of tones and shades within the same colour/hue.
• Analogues – The combination of adjacent colours
• Complementary – The combination of two colours from opposite sides
• Triadic – The combination of three colours evenly spaced around the colour wheel
• Compound – Combination of colours that are often in two groups.

Methods To Choose Colour Scheme

• Brand Based – We need to reserve an accent colour for buttons
• Rooted in Content
• Looking Sideways – Put together a moodboard of items such as tea leaves, tea cup, tea pots etc and draw colour schemes from that

Typography with CSS

• The width should be 80% of the parent element. You need to include a max-width to stop the content from stretching too far on a larger screen. Similarly the min-width is needed so that text doesn’t become too narrow on a smaller screen size.
• Margin: 0 auto; centres the elements within the parent element with equal margin on either side. This means 0 top and bottom, auto left and right.
• <div id=…> allows you to have a shape underneath your content to act as a visual container and can make the background more interesting.
• 960px is the comfortable measurable width for screen that is the most commonly used. Screen width is always measured in pixels.
• It is good practice to use off-black and off-white so that the contrast isn’t as high and is easier to read, making your website more accessible.
• Use margin-top or margin-bottom for typographic design. One or the other should be used, but never both as ideally you don’t want two margins coming together.

Images and Colour with CSS

• JPEG – Joint photographic experts group. They are true colour, 24 bit, have variable compression and used for photographs
• GIF – A gif has 256 colours, 8 bit, and used for frame animation or simple graphics
• PNG-8 – Has 256 colours, 8 bit, smaller than equivalent GIF, good for logos and used for simple graphics
• PNG-24 – True colour, 24 bit, alpha transparency – no other file format has this and is used for complex graphics
• WebP – Developed by google. One file format for the web
• Colour dithering – mosaic/pixelated effect on photos when not using the true colour formats
• Make sure image is under 100KB for use on web
• Vector file formats – SVG (scalable vector graphics) are flexible to edit, you can edit the colour in html file.

Class 4: What I Learned This Week…

Typography

Your website idea can include a specific target audience, such as children, but when implementing the design you need to make sure its accessible to everyone regardless of the target audience. There may be others who would enjoy using it too so don’t exclude them.

“Web design is 95% typography” – Oliver Reichenstein

• Looks at what type can express
• Serifs originated from print
• The differences between screen and paper is that there is no glare on paper so you can easily adjust position or angle, whereas on the web you can’t and so this makes serif more difficult to read online.
• Preferences: Some people prefer dark mode, some people prefer light mode. You need to ensure you are designing with this in mind.
• The 5 font families are: serif, sans serif, monospace, cursive, and fantasy. Monospace has the same amount of space between each letter and in pop culture it is used as a way of rebelling.
• You must always declare the font before the font family and ensure the fallback font is similar so that it doesn’t ruin your design/layout.
• By default, browser settings are set to 16pt
• You should declare at least 5 properties in the body section of the stylesheet: background colour, font colour, font family, margin, and padding. Links should be declared after the body.
• Advised not to use Lorem Ipsum as it is distracting and takes away from the design and layout
• White text on black backgrounds should always be scaled up and increase the line height as this is more difficult to read than black text on a white background.
• Headings should always have more top space than bottom space. This allows the reader to breathe and digest what they’ve just read before starting a new section.
• You shouldn’t underline or change the colour of something in the main text body that isn’t a link as these are the well known appearance of links, therefore it will be assumed.
• You can adjust text size for different screen sizes depending on the distance away from the eyes. For example a desktop pc might want a larger text as opposed to an iPad that would use a smaller text as it is held closer to the eyes. Whilst both are using different font sizes, they are perceived as the same because of the distance.

Design Principles

1. Balance
2. Gradation and contrast
3. Repetition and rhythm

Left aligned text is best practice as it creates an easy flow of reading as opposed to centre aligned text which has different distances required for eye movement. To check legibility, it is a good idea to read text out loud – this will highlight how well it flows or bring your attention to any issues. The designer’s job is to create a reading experience that is a joy, not a chore. Menu links should be written as the words, lowercase, as this is much easier to read due to our brains being able to recognise the shapes of letters, as opposed to uppercase which would just look like blocks and also doesn’t create a nice calm atmosphere as it is shouting at you.

White Space

• Never set the line height to 1 as it is proportional. It should be at least 1.3 and the default is 1.5
• Gestalt Theory – This is the whitespace within and around shapes that can influence how the audience might perceive our layouts.
• Proximity – Grouping elements together will imply a relationship between them so layout needs to be well thought through
• Justify-text means text uses both left and right alignment to create neat edges on both sides. However this isn’t good practice to use as it makes text look like a block and difficult to read. This also creates uneven word spacing that makes ‘white rivers’ appear and draw your focus. This is especially difficult for dyslexic people as it can have the appearance of motion.
• You should try to use as few fonts as possible but as many variants as you like.
• Kerntype – Spacing between letters.