Introduction to ID, UI, HTML and CSS

The Interface World

in a web context

Is not enough a working system

Is not enough a good working system too

We need it to be pleasant

Internet was born as a simple public hyper-text

It grows with complex systems

It's with whoever thanks to the new devices


Web Designer

Interface Developer


Product Development



who creates new ways to improve the consumers life

Product Development

Product process production that must evolve to be faster end cheaper



User Centered Desing

Two friendly approaches

1) Identify value

2) Map the value stream

3) Create flow

4) Estabilish pull

5) Seek Perfection

LEAN principles

1) Over Production
2) Waste of Unnecessary Motion
3) Waste of Inventory
4) Production of Defects
5) Waste of Waiting
6) Waste of Overprocessing 

Time wasted

is a framework of processes in which the needs, wants, and limitations of end users of a product, service or process are given extensive attention at each stage of the design process

User Centered Design

No assumption

Data research

Test, Interview, Scenario, Personas

User Centered Design

Tries to optimize the product around the consumer needs and desires, and not to force him to change his behavior

User Centered Design

Interface development

"chi progetta segue un flusso,

un obiettivo tenendo conto della piacevolezza

di averlo raggiunto"

"per processo progettuale si intende una successione consapevolmente organizzata di atti originati da un fine e destinati a realizzarlo"


"l'organizzazione consapevole di tali atti è appunto il metodo, cioè un atteggiamento, un modo di porsi, nel processo tale da farne un'attività razionale"


UX: User Experience Designer

ID: Interaction Designer

UI: User Interface Designer


User Experience

User experience refers to a person's entire experience using a particular product, system or service.

Interaction Design

Interaction design, is defined as "the practice of designing interactive digital products, environments, systems, and services".

User Interface

User interface design is the design of user interfaces for machines and software, such as computers, home appliances, mobile devices, and other electronic devices, with the focus on maximizing usability and the user experience.


New product or service ideas

New feature ideas

Feature/Product naming

Promotion ideas

New process for doing something


No idea is a bad idea
Be creative
Take risks
No criticism allowed


The boss speak first

Going in turn

Expert only

No silly stuff

Write down everything

How to kill


Content map

Interaction map



The first step


is a visual guide that represents the skeletal framework of a web application page

User Interface

is the design of user interfaces for machines and software, such as computers, home appliances, mobile devices, and other electronic devices, with the focus on maximizing usability and the user experience


A prototype is an early sample, model, or release of a product built to test a concept or process or to act as a thing to be replicated or learned from

Pencil and paper

image sequence (JPG, PNG)

Interactive image sequence


How to...

Interactive images





HTML framework


Waterfall and Agile


Born from SGML

Standard Generalized Markup Language

Hyper Text Markup Language

Public domain

Syntax written by W3C

An SGML language

1993 - Tim Burners Lee HTML and HTTP

1995 - HTML 2.0

1997 - HTML 3.2
1999 - HTML 4.01 and CSS 1

2000 - XHTML 1.0 from XML

2011 - XHTML 1.1

2014 - HTML 5



Validation tools:


Web Content Accessibility Guidelines


2001 - WCAG 1.0

2008 - WCAG 2.0



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">


<!DOCTYPE html>





Main Tag




That's all!


Block and Inline

Block elements

Inline elements

Inline-Block elements

Entities & Symbols


Space is not a space

Conditional Comment

<!--[if lt IE 7 ]> ... <![endif]-->

That's It!


Introduction to ID, UI, HTML and CSS

By extrategy

Introduction to ID, UI, HTML and CSS

  • 1,405