Flyers vs Posters

The word flyer and poster are commonly used in place of each other, but in fact they are actually two different things.

You should follow the design principles here, but it is also useful to know how the two documents differ from each other.

A flyer is something which is handed out to people, or posted through a door. The most common size for a flyer is A5, although you can get flyers smaller and bigger but no bigger than A4. As a flyer is held by someone and read in their own time, flyers can contain quite a bit of information on them.
Flyers are often discarded by people because they lack an initial impact - so they usually end up on the floor or in a bin!
As much as flyers can contain more, smaller writing - no one really likes reading and they prefer pictures.

A poster is something which is stuck up somewhere. As people might be walking or driving past it (or it might be on a bus going past) then it it needs to have a big impact usually through a short slogan or a image. Whatever is written on the poster needs to be short and memorable so people can glance at it and take it in.

Sometimes posters break their own rules - for a reason!
If the designer knows that a poster is going to be stuck up in a shop window then they know that people can come up to it and read what it says. Therefore some posters might have more writing on that others.
Educational posters normally have more writing on them (some are more or less all writing) but this is because the designer knew it would be stuck up in a school or college somewhere and people would come up to it and read it.

Professional Looking Presentations

Presentations are one of those things that you make in every subject. As well as following the basic design rules here, there are some things to remember when making or giving a presentation.

KISS

Keep It Straight and Simple!

• Make sure that each slide has a short heading.
• Write in bullet points - this means no full sentences.
• Constrast between the background and text is really important as people will be reading it (this means use a really light background colour and a really dark text colour, or vice versa).
• Use colour carefully - use a bold stand out colour to emphasis key points.
• Font size no smaller than 22.
• Pictures speak 1000 words (So do graphs/charts) - if possible use a image to explain what you mean rather than text.
• Don't go overboard on the animations or transitions - avoid the really slow ones at all costs - if you want to add some, keep it consistent. Choose one or two maximum.
• Never read your slides if you are making a PowerPoint - add in speaker notes at the bottom, then print out your presentation.
• Keep the layout and design consistent across all of the slides.

Intro to Creating Professional Looking Documents

Most of the work you will be undertaking in Cmputing/ICT will be for a company, and it is very unlikely that a company would release documents into the world when they have typos, spelling mistakes, or they just look rubbish.

Making a document look professional isn't as difficult as it sounds, so long as you follow some simple rules. These rules can be applied to a number of different documents, you just need to decide if that rule applies to the document or not.

Text:

• One font, in one size, in one colour for all titles/main headings - this font can be a bit funkier, but it needs to stand out and catch peoples attention
• One font, in one size, in one colour for all sub headings (Ideally this should either be the same as the heading font or the main text font - but it should be a different size)
• One font, in one size, in one colour for all the main writing - this font needs to be clear and easy to read.

Colours:

• Two or three colours maximum (Pictures don't count towards this)
• Dark background - bright or light text
• Light background - dark text
• Bright background - just no in most sitations
• Main text colour needs to be easy to read, so stick to strong colours rather than shades.

Images:

• Make sure that the images you use are free from copyright where possible
• Edit out the white background, or put a border around the image.

Alignment:

• Align objects neatly
• This website explains it quite well with images. Make sure that you check it out because alignment is the most important thing in making a document look professional (or not).

Other rules:

• Make sure that what you are making is clear and stands out
• Try to make it have something unique about it that makes people stop and look
• If you are using a text box on a colour or image as a background, make sure that the background of the text box is partly opaque, or that it has a border around it.

If you are making a number of documents for a company, make sure that you come up with a house style and stick to it. Try to make sure that your house style is not too similar to that of another company.

This website has some really great tips on it. It is well worth having a look at it.

Typical Website Layouts

Most websites online seem to follow very similar designs.

This website shows examples of good designs which are used by designers when building a website Click here!

One of the most important things to remember is that most people like things which feel similar or familiar. You know how everyone moans when Facebook changes how the News Feed page works, or what your timeline looks like? That's because people like things which are familiar, and when they are comfortable with something they don't like change.
If something isn't broke don't fix it?
However, if things don't change and progress then things will never get any better.
So whilst it is important to have a look at exsisting designs, there is nothing to stop you trying something totally different - the most important thing is that you test it and see what peoples reactions are!

Here are some of the most common website layouts to get you started:

Make sure that you are thinking about making your website look professional, as well as the audience and purpose. What layout best suits the needs of your website?

HTML and CSS; An intro to...

HTML stands for Hyper Text Mark-up Language and it is the code which all website run on. Generally speaking HTML is for the actual content (like your writing or pictures) and CSS controls the layout (how pretty it looks).
You can code HTML and CSS in Notepad, so you do not need any specialist software.

HTML can control both content and layout though, and if you are new to coding then this is a good place to start. Once you have mastered HTML, you can think about controlling the layout with CSS.
Link to HTML help sheet


You will probably have noticed that most websites have more or less the same layout regardless of what page you are on. The content might change, but the layout probably stays the same.
If you are coding with HTML and you decide to change a layout feature, you are going to have to find where to code is on each page and change it - which would take loads of time!

CSS stands for Cascading Style Sheet.
You can put your CSS at the top of the document, so it is all together in one place, or you can put it in a seperate document.
Link to CSS help sheet

These are some website which are useful when you are learning to code websites:
www.w3schools.com
www.tizag.com

Banners & Buttons for Websites

Banners for Websites
Banners can either be telling you about another website (Advertising it to you, wanting you to click on the banner to take you to that website), or they are what goes at the top of a website to inform the user of what website you are on.

What should it have on it? What should it do?

• It should have the companies logo on it
• It should either make a bold statement or blend in - either way if it is a banner for the website it should follow the house style, if it is a banner for another website/product then it should follow that companies house style

Buttons for Websites
Buttons are pretty important. They are how you get to different pages, or how you add things to your shopping basket.   
If you put many buttons into a row (or column, but this is a less used option) they become a navigation bar. 
It is important that a button looks like a button - otherwise how will someone know how to click on it?

Traditionally buttons change in some way when the user of the website puts there mouse over them.    

Logos

Logos represent a company. Sometimes they tell you about the company (EG: If they sell cupcakes the logo might have a picture of a cupcake on it), sometimes they emphasise some of the letters in the companies name (EG: The McDonald's 'M'), and sometimes they have nothing at all to do with the company. Instead they make a statement which people can remember and overtime they will come to associate that logo with that company or brand (EG: The Nike tick).

This blog has a list of requirements that make up a good logo: http://justcreative.com/2009/07/27/what-makes-a-good-logo/This website gives a list of rules to follow when making design choices: http://voices.yahoo.com/5-easy-tips-making-company-logo-look-more-professional-5375277.html

One example of a apparently  successful logo is this chart comparing Pepsi and Coke's logos (Guess which one is being shown as the success)...

The chart is showing that the logo for Coke has never changed, where as Pepsi have redesigned their logo numerous times!
However, the chart above is not quite accurate....

Image from this website

Despite the inaccuracies in the first chart, Coke have still maintained a (more or less) consistent style to their logo since the 1940s.

How pixels get their colours

This video explains how a pixel gets its colour.

Image Types

There are many different types of images, and each type has its advantages and disadvantages depending on what you want to do with it, but before we get onto image types you need to understand how a picture on a computer is made up.

This blog post gives you an overview of the different types of image files.

Pixels

Pixels are the smallest part of an image, each pixel stores details about how much red, green and blue is in it (RGB) as computers make every colour through a combination of red, green and blue.

Pixels are square and they make up your computer screen. When you change the resolution of your computer screen you are changing how many pixels there are on the screen. The more pixels there are on your screen or in your image the better quality the image will look. The less pixels you have the more blocky your images will look (like Mario!)

Lossy vs Loss less file types

Sometimes image files can be pretty big so they will take up a lot of memory on your computer. In order to reduce the file size some kind of compression is needed.A lossy file type will lose some of the image quality as the file size is compressed. A loss less file type will keep all of the details in the image – creating a perfect copy.

Types of image compression (file types)

JPEG
JPEG stands for Joint Photographic Experts Group. This type of image compression is lossy, and it is commonly used in digital cameras and scanners. With JPEG images you can specify the quality of the image, obviously the higher the quality the larger the file size but it will also result in a higher quality image. The quality of a JPEG file can be reduced if it is edited heavily.

GIF
GIF (Graphics Interchange Format) images are limited to 255 colours. GIFs are commonly used for logos and simple images which do not have a lot of colours in them. GIF images can also be animated. The type of compression is loss less.

TIFF
TIFF stands for Tagged Image File Format. TIFF images can be both lossy and loss less. TIFF files remember a lot of information about the image, so they can be quite big however they are usually quite a good quality.

PSD
This is a Photoshop image file. It remembers all of the details about all the changes you have made to the image and so these files are usually pretty big.

RAW
This type of image is what photographers use. When you take a photograph in RAW format, the camera records all of the details which were present at the time, this means that the file sizes are massive and totally loss less, however RAW images are very easy to manipulate.

Vector images
These images are made up of mathematical formulas which work out the position of the different elements (shapes or objects) in the image. This means that when you zoom into a vector image it remains a good quality because the image is recalculated using the formulas. Due to the formulas and shapes being saved rather than individual pixels the file size for vector images can be small. Vector images normally look cartoon like, and are created from scratch on a computer.

Raster / Bitmap images
Bitmap images are made up of binary code – each pixel is either switched on or off. As the image needs to store details about each and every pixel, the file size for these types of graphics are normally quite big. When you use a digital camera or a scanner you are usually creating a bitmap image. When you resize a bitmap image you lose quality from the image and the closer you zoom in, the more obvious each individual pixel will become. As you can see each individual pixel, each pixels can be edited.



Introduction to Websites

Website components
A website is made up of lots of different parts, most of which will appear on any website regardless of who made it. This is not the final list, more of an introduction to the topic : )

Navigation bar: A collection of buttons in a row (usually horizontally but can be any direction) which allow the user of the website to access the main areas.
Buttons: These are buttons which are seperate to the ones on the navigation bar. They take the user to a different page, or sometimes allow the user to add something to a shopping basket without leaving the page they are on.
Advertising banner: Can either advertise the website that the person is on (this type of advertising banner is commonly found at the top of the page) or can advertise the products that are sold on the websites. Occasionally you will find advertising banners for other websites on a website too.
Search bar: Allows the user to search for what they are looking for. Is quicker that navigating using the navigation bar if you know exactly what you are looking for, however you have to be careful of spellings!
Multimedia elements: These can include sound, video, animations, games. Usually put on a website to make it more interesting and to keep people wanting to come back, although they can be used to help support whatever the website is about (eg, how to videos on a tutorial website).


Purpose, Audience and House Style
Purpose: What is the point of the website? Why was it built in the first place?
Common purposes include: persuade, inform, educate, entertain
Audience: Who is the website aimed at?
Common mistake: "Everyone". Everyone isn't an audience, you need to be more specific.
House style: What are the common features of the website, usually inclues fonts and colours but it can include anything which remains consistent.

A lot of the time we make assumptions about a website (or anything actually!) based on what we already know (this is called prior knowledge).
Based on no other knowledge other than what you could see on the website you were asked to look at the following websites and talk about what you think the purpose, audience and house style for each company is:

www.hugsformonsters.com - www.zunejourney.net - www.maxtronmedia.com - www.meomi.com - www.zincbistroaz.com - www.amazon.co.uk