Typography and grids
•Télécharger en tant que PPTX, PDF•
5 j'aime•3,047 vues
The basics of using Typography and Grids
Recommandé
Recommandé
Contenu connexe
En vedette
En vedette (11)
Similaire à Typography and grids
Similaire à Typography and grids (20)
Plus de Graeme Smith
Plus de Graeme Smith (20)
Dernier
Dernier (20)
Typography and grids
- 2. Typography Use Arial, if they haven’t got Arial, use Helvetica, if they haven’t got either, use a sans-serif font. Dreamweaver gives a limited choice.
- 3. Typography S Serif fonts (a serif is the little tags on the letters.) Are tagged because it was found that when reading from paper, the tags help the eye to perceive the type. S Sans serif fonts (Sans is french for without). Are considered easier to read on screen.
- 4. Typography Dancebase have got around the problem of limited typefaces by making jpeg images of the typeface in logos and their banner. The rest of their type is font-family: Verdana, Arial, Helvetica, sans-serif.
- 5. Typography The art of good typography is about subtlety. You can make a value judgement based on typography, use of colour and the look and feel. On the next slide are two websites from two different banks. Which one does the Queen bank with? How can you tell just from the look of the site?
- 7. Typography tells its own story
- 8. Typography tells its own story
- 9. Typography tells its own story
- 10. Visual Language Your visual design needs to match your site objectives. Very often a site objective is to communicate brand identity. Your whole site needs to reflect brand values.
- 11. Grids Designing with grids has become very fashionable. The first principle to understand is the rule of thirds.
- 12. Rule of Thirds
- 13. Splitting a page. images from http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_designing_grid_systems_part_1/
- 14. Splitting a page. images from http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_designing_grid_systems_part_1/
- 15. Splitting a page. images from http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_designing_grid_systems_part_1/
- 16. Splitting a page. images from http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_designing_grid_systems_part_1/
- 17. Splitting a page. Adding gutters helps stop text running into each other . Elements can then be designed to complement the grid structure. images from http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_designing_grid_systems_part_1/
- 18. Splitting a page
- 19. Splitting a page
- 20. Splitting a page
- 21. Splitting a page
Notes de l'éditeur
- Students should be familiar by now with the limited choice they get from Dreamweaver. It is worth repeating that this is due to the fact that the type is displayed by the browser and one has to be certain that the font is in the user’s system.
- There is enormous amount of work on typography and recently, Georgia and Verdana have been specifically designed for computers. Typography has a long tradition and we can only scrape the surface here.
- This is quite a common work around solution. Students need to be aware of image size constraints. If they load up with too many large images, their pages will take a long time to download.
- One of the easiest ways to spot amateur work is when too many different fonts are used.
- Obviously it’s Coutt’s but the important thing for the students is to realise that the way these sites are designed is to appeal to their target user base. Gets students to spend some time looking at the different sites and explain what underlying messages they get from the look of the pages.
- Spend some time discussing the fonts here with the class. Which is more appropriate and why? What do the different fonts communicate? Where would they be suitable. There are many free font websites as well as paid for. Ask students if they think it would be worth buying a typeface.
- Ask students if they recognise this font. The roundel appears after clicking but this font, designed by Edward Johnston is a famous example of a company using a font for corporate identity. London Transport kept ownership of this font extremely seriously and would not allow any other institution to use it. Owning their own typeface allowed them to communicate identity in all of their communications.
- Jamie Reid’s cover for the Sex Pistols demonstrates the power of type and how it can be effectively used to communicate a whole sub culture. You may have to discuss the wide reaching cultural effect of punk across music, art and design. Ask the students to look at http://sexpistolsofficial.com/ As a continutiy break, get them to discuss the site. Point out how polished the site looks and the amount of detail in the typography to give the impression of unpolished and thrown together look.
- Discuss the monarchy website shown. The site is heavily purple, seen as a colour of royalty in Britain, discuss how the banner photograph, the large crown and the text impress the image the royal family want us to have of them.
- The rule of thirds comes from photography and is relatively simple. Point out how the picture is broken into 9 sections, splitting it into distinct groupings of threes.The theory is that if points of interest is put on the intersections then the picture becomes balanced. There are more examples on the next slide.
- These three pictures demonstrate the rule of thirds. Of course, understanding rules give students the tools to break them.
- Here, a page of A4 is split. Af has a ratio of 1:1.414. The ratio is repeatedly used here to break the page up.
- The ratio is used to split the page into a grid.
- The grid can then be used to hang page elements.
- We can use the grid to fix the look of our pages. This layout assumes a page width of 750 pixels.
- We can use the grid to fix the look of our pages. This layout assumes a page width of 750 pixels. KhoiVinh at subtraction.com suggests making a photoshop gif image of your grid and making it the background of your image whilst designing, thereby making layout a matter of fitting to the grid.
- This is the first of several examples. Point out that the page is centered and surrounded by a purple background colour. This means that the site can fix its dimensions and be reasonably certain that it will look the same on any size monitor.
- This is the first of several examples. Notice that the large photo at the top breaks the visual grid, but keeps to the invisible grid.
- Though this appears to be freeform, it keeps rigidly to a grid.
- A box grid.
- There is also the desire to break a grid. If students are tempted to do this then they need to be careful not to abuse the technique.