web development

22
Web Development <?php echo '<p>How to build a good website</p>' ?> Pierpaolo Regnante & Diego Viola

Upload: pierpaolo-regnante

Post on 24-May-2015

308 views

Category:

Technology


1 download

DESCRIPTION

the principles of web development

TRANSCRIPT

Page 1: Web development

Web Development

<?php echo '<p>How to build a good website</p>' ?>

Pierpaolo Regnante & Diego Viola

Page 2: Web development

Web DesignWhat does this mean? What are its

principles?

Page 3: Web development

What is web design? Web design describes the tasks of designing web pages to be displayed over the

World Wide Web. Web design encompasses a number of important elements including color, layout, fonts and overall graphic appearance. Web designers consider the site audience, the site functions and the target. All of these are combined into the principles of design, that must be taken into account whenever creating a website:

• Balance• The golden

ratio• Color scheme• Typography

Page 4: Web development

Balance Balance is the distribution of elements on the page.

In any graphic composition, each element has its own 'weight', and is able to occupy a well-defined space. The combination of the different elements - text, graphics or whatever - and their respective weight means that a layout has a certain symmetry or asymmetry of contents.

This image is an example of symmetrical balance: symmetrical balance occurs wheneven decomposing a graphic composition into two parts, the latter appears a mirror image of the other.

Page 5: Web development

Balance This image is an example of

asymmetrical balance: which is in some ways more interesting than symmetrical, because it is able to give a more creative perspective to the layout.

The asymmetrical balance is based on the use of elements arranged in a certain way so that we can - despite their differences in colors, in size or shape - balance the weight of the visual page.

This image shows an asymmetrical balance between the section containing the image of the cover and the one containing the information.

Page 6: Web development

BalanceThe examples just viewed belong to the so-called horizontal balance, where the elements are

positioned from left to right.

However, there also exists the so-called vertical balance, even if it is rarely used.

Page 7: Web development

The golden ratio The golden ratio is a math number (1,62) with which proportional dimensions can be obtained. It

can be represented as a spiral and is useful when a page layout must be divided into two unequal parts (such as content and sidebar).

Page 8: Web development

Color scheme Wheneven a website is drawn, the "psychology of colors“ plays an important role.

This means, in short, that color as such is a sensation that it is perceived by the brain, and affects our behavior.

For example, the red and orange colors are known as intense emotional colors that stimulate the heart and breathing rate.

The color scheme is a harmonious combination of colors in a layout. There are different types of schemes, like monochromatic...

Page 9: Web development

Color scheme...complementary (inconsistent colors, like blue/green or purple/yellow)...

Page 10: Web development

Color scheme...and contrastive color scheme (like blue and red in the example).

Page 11: Web development

TypographyThe typography of a web page means in plain words: "Which are the best fonts for my website?".

Some claim that a good typography represents eighty percent of effective, pleasant and functional graphics, and I'll try and prove you the claim of this theory with one example

...but first we’d better go through some of the most used types of fonts:

- Serif fonts (the graces (or serif) are those ornamental trimmings that ending auctions of some characters)

- Sans-Serif fonts (fonts without serif)

- Monospaced font

- Handwriting fonts.

- Decorative fonts;

Page 12: Web development

Typography...a site with a good font...

Page 13: Web development

Typography...and the same site with a bad font.

Page 14: Web development

Copywriting & Seo

What does this mean? What are its principles?

Page 15: Web development

What is Copywriting?Copywriting is the act of writing a copy of an original text. Some of its

most common purposes can be advertising or marketing.

Three questions:• Title• Paging• SEO

Page 16: Web development

Three Questions

1) Whom I'm writing for ?2) What for?3) How to say it?

Page 17: Web development

Who?

Who are the people that will read my text?

If they are engineers, a suitable jargon must be used , if they are ordinary people, simple and understandable words must be used instead.

Page 18: Web development

What for?What do you want to say?

If you are a company that develops buildings, you want to say outright that you are a builder. People don't care about your grandfather that started the activity in

the old good Sixties, so don't write boring descriptions.

Page 19: Web development

How to say it?Which is the best way to explain it?

 The best way to describe your activity is by explaining how you do your job. Thus a real estate developer must explain that his business uses innovative building

techniques, or that the materials he uses are “state of the art”. 

Page 20: Web development

TitleIf you are writing an article that explains how to clean your computer, you must

say it in the simplest way possible. 

Example:

1 - Keep your pc clean is Important.  

2 - How to keep your pc clean using CCleaner.

The first example doesn't provide a clear explanation of what the article is talking about, so the user can't get a fast solution to his problem.

The second example foretells that in the article the user will find out how to keep his pc clean, if using a specific software. 

Page 21: Web development

Paging

• The block of the written text must consist in at least 250 words and must contain one or two images about the topic.

• Text must be divided into paragraphs.

• The keywords must be highlighted. 

• If you manage to write a text that doesn't require to scroll the page, that will be awesome!

 

Page 22: Web development

SEOWhat is SEO? SEO means search engine optimization, and it is the process of

making a website visible on the search results.

• When you write a text you need to use some solutions that improve the visibility of the site on Internet.

• As already mentioned, a text must consist in at least 250/300 words. The topic must be coherent with the website.

 • On a car website, you must not talk about cakes! • On an article of 200/300 words at least two or

three keywords must be inserted. The keywords density must be around 2 or 3% 

• The keywords are the words that you suppose a person can search on a search engine.

• Example: you wrote an article about the new Lamborghini Gallardo, so the keyword must be "Lamborghini Gallardo".