making the right choice choice of text colour and layout makes a big difference to the message you...

31

Upload: laura-fowler

Post on 25-Dec-2015

217 views

Category:

Documents


3 download

TRANSCRIPT

Page 1: 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
Page 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

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

Page 3: 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

Page 4: 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
Page 5: 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
Page 6: 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…

An Undertaker

Page 7: 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
Page 8: 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
Page 9: 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 Dentist

Page 10: 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
Page 11: 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
Page 12: 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

Font SelectionThe 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

Page 13: 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

What we write is ImportantGet your work proof read by somebody you

trustYou are the least qualified person to judge

your own work – the customer is always rightBadly 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

Page 14: 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

Select an Appropriate StyleAbstract

Yo dudes. Electronic marking grids (eGrids is another name for em) is a fab tool for helping students learn before they finish their work and after (cool). The eGrids used with another rad idea called “driving tests” and give us a way of giving students the lo down on their crap and help teachers chillax at their pad (just kiddin’). Students get their eGrid off my web site but don’t you think they can write anything they like ... no!. They can take a gander at their grade but only the boss man can change the grade. The governor gets to say wot he likes. Some students may like it some may need a slap. I’m gonna use an action research approach to find out if this crap worked or not (cleaver eh?). Hommies on the second year are gonna use this crack. I’m gonna get my info’ by counting things and seeing what the word is on the street. Gonna read some books n shit to see what the big wigs have to say too. Wicked.

AbstractElectronic marking grids (eGrids) are a

mechanism for formative, summative and continuous assessment. These eGrids used

in conjunction with viva based “driving tests” provide a mechanism for improving feedback to students and making the most

of staff time spent in assessment. The eGrid is made available to students in

read only format via the internet. Students may view their own grid to see progress so

far and model the grades required to achieve their desired outcomes. Tutors have read-write access to the grids and

may input grades with guidance for improvement. The driving test style of

assessment allows students to be critiqued on their work whilst allowing opportunity

for them to recover any problems or misunderstandings. The study will adopt an action research approach to explore

the impact and attitudes to the use of eGrids on two second year Computing modules. The paper takes into account quantitative and qualitative data from

both staff and students along with a review of relevant pedagogic theory.

Abstract for a research paper...

Page 15: 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

Some Design RulesContrast

Make different parts of the site that are different – look different!

RepetitionRepeat visual elements of the design throughout the

site.

AlignmentGive items a visual association to other items.

ProximityItems related to each other should be grouped close to

each other.

Page 16: 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

ContrastWhen you make two items different –

make them really different!

Page 17: 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

Repetition

Page 18: 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

Alignment

Page 19: 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

ProximityMake use of visual organisation to convey content organisation

CSCI1413 Programming Year 1CSCI2608 Multimedia and Internet TechnologyPersonal TutoringFinal Year Project ProposalsCreating Database Applications in VB.NETVisual Basic.NETAccess 2000 TrainerVisual Basic Generic guides for using VB 6 and belowNetworks and CommunicationsGuide to HTMLCSCI2002 Visual Basic as a Second LanguageCSCI2008 Networks & CommunicationsINFO1004 Application DevelopmentCSCI2010 Developing Business Database Applications

Page 20: 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

Better…CSCI1413 Programming Year 1CSCI2608 Multimedia and Internet TechnologyCSCI2002 Visual Basic as a Second LanguageCSCI2008 Networks & CommunicationsINFO1004 Application DevelopmentCSCI2010 Developing Business Database Applications

Personal TutoringFinal Year Project Proposals

Creating Database Applications in VB.NETVisual Basic Generic guides for using VB 6 and belowVisual Basic.NET

Access 2000 Trainer

Networks and CommunicationsGuide to HTML

Page 21: 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

Don’t be Afraid of White Space

Page 22: 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

Rule of Thirds

Which picture is more interesting?

Page 23: 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
Page 24: 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
Page 25: 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

Think of an Image Split into Thirds

Page 26: 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

Unseen Text in MultimediaText 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

Page 27: 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

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" />

Page 28: 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

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

Page 29: 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

Media Centre MasterMedia 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.

Page 30: 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

How this Looks in an Application…

Page 31: 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

XML Hierarchical Structure

XML Declaration : version, encoding

Root element

ElementTag <ProductionYear> </ProductionYear>

Attributes and Values<FilmDetail Title="28 Days Later" IMDBrating="7.6" ProductionYear="2002">

Attribute (Title)

Value “28 Days Later”