1 / 31

Text and Layout

Text and Layout. Making the Right Choice. Choice of text colour and layout makes a big difference to the message you communicate Take a look at the following examples. Consider the Design for…. A Children’s Nursery. Consider the Design for…. An Undertaker. Consider the Design for….

francescantu
Download Presentation

Text and Layout

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Text and Layout

  2. Making the Right Choice • Choice of text colour and layout makes a big difference to the message you communicate • Take a look at the following examples

  3. Consider the Design for… • A Children’s Nursery

  4. Consider the Design for… • An Undertaker

  5. Consider the Design for… • A Dentist

  6. Font Selection • The two main types of fonts are those with serifs and those without - sans serif. • It is worth looking at font catalogues on-line to see what we can find that is close to what we want • As we have seen font selection makes a big difference to the message we communicate • Take time thinking about your fonts

  7. What we write is Important • Get your work proof read by somebody you trust • You are the least qualified person to judge your own work – the customer is always right • Badly written text is unprofessional and is a good way to send out the wrong message • http://webpagesthatsuck.smugmug.com/Other/Bad-Web-Design/6837311_tyvTi#!i=706067647&k=yMUkG&lb=1&s=O

  8. Select an Appropriate Style Abstract for a research paper...

  9. Some Design Rules Contrast • Make different parts of the site that are different – look different! Repetition • Repeat visual elements of the design throughout the site. Alignment • Give items a visual association to other items. Proximity • Items related to each other should be grouped close to each other.

  10. Contrast • When you make two items different – make them really different!

  11. Repetition

  12. Alignment

  13. Proximity Make use of visual organisation to convey content organisation CSCI1413 Programming Year 1 CSCI2608 Multimedia and Internet Technology Personal Tutoring Final Year Project Proposals Creating Database Applications in VB.NET Visual Basic.NET Access 2000 Trainer Visual Basic Generic guides for using VB 6 and below Networks and Communications Guide to HTML CSCI2002 Visual Basic as a Second Language CSCI2008 Networks & Communications INFO1004 Application Development CSCI2010 Developing Business Database Applications

  14. Better… CSCI1413 Programming Year 1 CSCI2608 Multimedia and Internet Technology CSCI2002 Visual Basic as a Second Language CSCI2008 Networks & Communications INFO1004 Application Development CSCI2010 Developing Business Database Applications Personal Tutoring Final Year Project Proposals Creating Database Applications in VB.NET Visual Basic Generic guides for using VB 6 and below Visual Basic.NET Access 2000 Trainer Networks and Communications Guide to HTML

  15. Don’t be Afraid of White Space

  16. Rule of Thirds • Which picture is more interesting?

  17. Think of an Image Split into Thirds

  18. Unseen Text in Multimedia • Text in Multimedia is not just about what the user sees • Text is used to mark-up documents via HTML 5 and CSS • Text plays an important part in communication of data via XML

  19. HTML 5 • HTML 5 has three types of mark-up: • Elements • Attributes • Values • Elements • An element comprises: • Start Tag • Content <h1>This is a heading</h1> • End tag • Attributes and Values • Attributes contain information about the data specified by the attributes value e.g. <img src="mypicture.jpg" />

  20. XML • A meta-language contains data used to describe data • May be used to define other mark-up languages (e.g. HTML 5) • Provides a set of rules and a basic structure and from this other document formats may be devised • E.g. PDF, DOCX, HTML 5 • Applications of XML extend beyond the web • XML may be used in many other non web related contexts

  21. Media Centre Master • Media Centre Master is a free program that may be used to manage films saved as DivX files • http://forums.mediacentermaster.com • The program allows the creation of “scan folders” into which you place your video file (MP4, AVI etc) in a folder named as the title of the film • For example... • Program communicates with remote data source e.g. IMDB to obtain data about the film e.g.

  22. How this Looks in an Application…

  23. XML Hierarchical Structure XML Declaration : version, encoding Root element Element Tag <ProductionYear> </ProductionYear> Attributes and Values <FilmDetail Title="28 Days Later" IMDBrating="7.6" ProductionYear="2002"> Attribute (Title) Value “28 Days Later”

More Related