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
Designer
Web Designer
Interface Developer
Professionals
Product Development
Vs
Production
who creates new ways to improve the consumers life
Product Development
Product process production that must evolve to be faster end cheaper
Production
Lean
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"
Munari:
"l'organizzazione consapevole di tali atti è appunto il metodo, cioè un atteggiamento, un modo di porsi, nel processo tale da farne un'attività razionale"
Munari:
UX: User Experience Designer
ID: Interaction Designer
UI: User Interface Designer
Professionals
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.
Brainstorming
New product or service ideas
New feature ideas
Feature/Product naming
Promotion ideas
New process for doing something
Objectives
No idea is a bad idea
Be creative
Take risks
No criticism allowed
Rules
The boss speak first
Going in turn
Expert only
No silly stuff
Write down everything
How to kill
Flow
Content map
Interaction map
Share
Validate
The first step
Wireframe
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
Prototype
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
HTML
How to...
https://proto.io/
https://atomic.io/
Interactive images
Bootstrap
Foundation
Materialize
...
HTML framework
TEST!
Waterfall and Agile
HTML
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
Story
Recommendations
Validation tools:
https://validator.w3.org/
W3C
Web Content Accessibility Guidelines
2001 - WCAG 1.0
https://www.w3.org/TR/WCAG10/
2008 - WCAG 2.0
https://www.w3.org/Translations/WCAG20-it/
WCAG
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html>
DTD
<html>
<head>
<body>
Main Tag
<div>
<span>
That's all!
:-)
Block and Inline
Block elements
Inline elements
Inline-Block elements
Entities & Symbols
https://dev.w3.org/html5/html-author/charref
Space is not a space
Conditional Comment
<!--[if lt IE 7 ]> ... <![endif]-->
That's It!
prometeia@extrategy.it
Thanks!