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
&nbsp;

Conditional Comment

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

That's It!

prometeia@extrategy.it

Thanks!

Introduction to ID, UI, HTML and CSS

By extrategy

Introduction to ID, UI, HTML and CSS

  • 1,405