OUGD504 SB03 Seminar - Search Engine Optimisation

Search Engine Optimisation (SEO) uses algorithms to access the suitability and ranking of websites based on search terms. This is a way of making alterations to websites according to the criteria that search engines use when 'crawling' web content.

What factors ?
On-the-page :
- content
- HTML
- Architecture
Off-the-page :
- links
- trust
- social
- personal
Violations :
- irrelevant/weak content
- spam
- paid for links

Video by Google about SEO :

Task : additional research on SEO

The positioning of a site is generally good-considered if it's in the top 10 search engines.

The issues:
- Make a website visible in a sustainable way
- Capture qualified traffic from search engines
- Make a brand to users

Strategy:
- Define the terms which have the best correspondence with your website :
TOO SPECIFIC terms do not generate enough traffic
TOO GENERIC terms are not sufficiently qualified
- Accurately describe the page's content : choose a title that effectively communicate the topic of the page's content.
- Create unique title tags for each page
- Use brief but descriptive titles

Another video about common mistakes in SEO :

OUGD504 SB03 Seminar - User Experience Design

User Experience Design (or UXD) is a method that shows how users interact with a product/service. It's not just the way they use it. It is also the role that the product plays in the life of a person.

Must take into account the empathy, the affects of the client. That's why brand identity exists, it creates a direct link between us and the brand. We need to believe in the company to consider a product.

Dicussion : what products or services can you think of that have significant user experience concerns ? Particularly in contrast to competing products/services.

Facebook/Twitter
Firefox/Chrome/Safari/Internet Explorer
Ebay/Amazon
YouTube/Vimeo

Design for the wild : design to where it's supposed to be.

Garrett's model of UXD : abstract to concrete, the prupose is to know what and why is the content of the product, aesthetics, etc.

Task : consider Garett's model in relation to your website :

Strategy : to present videos in a different way, explain the meaning of viral videos with a text content.

Scope : its function is based on surprise. The interaction between user and interface needs to be easy to manipulate in order to see the more of videos.

Structure : links to random videos, search bar to tap key words to find specific subjects.

Skeleton : when you are on a video page, there are links to other videos, a homepage with a selection, an about page and and a top videos page.

Sensory Design : equiity between video/text content, soft design with geometric and simple forms.

UXD Methods :

1° User research : real life user reasearch - goals of particular user groups, attitudes and behaviours

2° Personas : there are documents that describe a user type based on research

3° Content Strategy : based on user research, persona docs as well as the overall brand/project. What is the necessary content ? Hierarchy ? What content reflects brand identity ?

4° Site maps/Task flows/User journeys :

5° Wireframes :

6° A/B Testing : method of testing a variation of a system against the existing

Task : try to apply persona to your own website.

'I want to see viral videos because I'm bored.'

Key goals :

- want to be diverted

- have no precise objectives

- curious to learn new stuffs

Behaviour :

- looking for video websites

- don't want to search for a long time

- ok if someone/something choose videos in my place

Must :

- communicate in an interaction way with user to make him/her wanting to go further on the website

Not must :

- getting boring the user more than he's already

In conclusion, it's important to know precisely how the user interacts with your product/website to correspond with his needs.

OUGD504 Seminar Canons of page construction 2/2

Grids fields

Use of columns and grid fields is a common consistency in Modernist approaches to page layout.
The grid system by Josef Müller-Brockmann is a good example to follow :

The columns system can afford us a lot a possibilities of disposition.

How it works :

1. Determine type area (Van de Graaf?)
2. Divide into 2 (or more) columns, separate columns with an intervening gutter
3. Divide text columns into 2, 3 or more fields
4. Determine type size and leading
5. Insert "empty lines". Field lines  must be separated in order to accommodate gaps between images. Separate field lines (must be same width as 1 line of type + leading)
6. Each field should contain a number of lines of type while each empty line should be able to contain a single line of type. Images placed on the ajacent column will perfectly align with the type, as will the images.

Practice session

OUGD504 Brief 03 A brief history of… - Introduction to Design for Web

☞ On the 6th August 1991, the CERN, the European nuclear research laboratory, authorized the use of the World Wide Web protocol on which is based on the majority content on the Internet. We can find below the first web page.

Le 6 août 1991, le Cern, le laboratoire européen de recherches nucléaires, autorisait l'utilisation du protocole World Wide Web sur lequel est basé la majeure partie des contenus créés sur internet. En dessous se trouve la première page web.

http://info.cern.ch/hypertext/WWW/TheProject.html

The first published photo represents a girl false band, the Cernettes :

Pour la première photo mise en ligne sur le web, le Cern a créé un faux girl band, les Cernettes :

☞ Terminology :

- HTML (Hypertext Markup Language) : the standard language used in the creation of web pages

- HTTP (Hypertext Transfer Protocol) : the basis for the transfer of data across the World Wide Web

- URL (Uniform Ressource Locator) : also known as a web address and used to refer web pages

- CSS (Cascading Style Sheet) : a style sheet mark up language used for formatting

Il existe plusieurs formats de données :

- HTML (Hypertext Markup Language) : le langage standard utilisé dans la création de pages web 

- HTTP (Hypertext Transfer Protocol) : la base pour le transfert de données sur le World Wide Web 

- URL (Uniform Ressource Locator) : également connu sous le nom d'une adresse internet et utilisé pour référencer les pages web 

- CSS (Cascading Style Sheet) : une feuille de style utilisé pour le formatage

☞ Before starting to design a website, here's what we have to think about :

- What is the purpose of this website?
- Who is the target audience ?
- Why this website needs to exist ?

Avant d'élaborer un site internet, voici à quoi on doit réfléchir :

- Quel est le but du site ?

- À qui il est destiné ?

- Pourquoi ce site doit exister ?

☞ Considerations to design :
- Size : there are other sizes to take into account, they're different compared with print supports and it's necessary to work with all screens 
- Colours : they're not the same as print, we can use the RGB pallet but it needs to stay "safe"
- Fonts : we have to use common web fonts (like Arial, Times) because it replaced if our "fantasy fonts" are not installed in the users computer

Paramètres pour la conception :

- Taille : il y a d'autres tailles à prendre en compte, elles sont différentes de celles des supports imprimés et elles doivent s'adapter pour les écrans des utilisateurs

- Couleurs : le choix des couleurs se limite à la palette RVB et leur cobinaison doit rester harmonieuse

- Typographies : on doit choisir des typographies communes (ex : Arial, Times) car elles peuvent être remplacées si elles ne sont pas installées sur l'ordinateur des utilisateurs

☞ Trends
- The decline of skeuomorphism (a derivative object that retains ornamental design cues from structures that were necessary in the original)
- The rise of flat design
- Single page website (ex : Cyclemon)
- Responsive design
- Type based websites

Tendances :
- Le déclin du skeuomorphism (un objet dérivé qui réutilise les propriétés du modèle original) 
- L'essor du flat design 
- Les sites web en une page
- Responsive Design 
- Sites basés sur la typographie

Example of skeuomorphism : the digital shelf

As a conclusion, a website needs to be effective to catch the audience in the first few second after its opening.

En conclusion, un site doit être efficace pour attirer l'attention du public en quelques secondes après son ouverture.

OUGD504 Seminar Canons of page construction 1/2

☞ This week we have seminars about how to design a page with system grids.

What are canons ?
Canons are systems, methods or approaches to a particular practice. In a design way, it's how to organise type and image on the page. They can be useful when you design publication layouts and also encourage complacency.

↠ De Divina Proportione by Pacioli (Italian Renaissance)

This based on the Golden Ratio which is a mathematical harmonious proportion and used in arts and mathematics. It's considered as being able to deliver aesthetically "pleasing" and harmonious composition.

The principle :
a to b = 1:1,618
a+b to a = 1:1,618

How to practice :
100cm ÷ 1,618 = 61,80cm
100cm = 61,80 + 38,20
ratio of 61,8 to 38,2 is 1:1,618

You can also add by 1,1618 (100cm x 1,618 = 161,8cm)

Examples :

To divise a page :

To type :

To logos :

Practice session

Then in groups, we talked about positive and negative points about grid layouts :

- On the one hand, grids can be a good structure for designing and organise a page, they brings an aesthetic treatment of it.

- On the other hand, we need sometimes to stay away and have a critical sight on grids to avoid creative standardization.

↠ Van de Graaf canon

He was a 19th century Dutch scholar of book design.

Practice

As a conclusion for this first part, canons aren't simply grid layouts but methods and systems that inform our process in design.

The Vignelli canon (homework)

See the whole PDF document

This looks like the Pacioli spiral but it's more "geometric".

Here's the Vignelli's grid system :

He divides the page in rectangles to build his grid.

Then he could place type and image :

What is his thought about grids, it's amazing to see how can it be useful for designing :