convertir ideas diseñando
interfaces con css
ds consultant
CARMEN ANSIO
@carmenansio
...pero antes de comenzar
herramientas que utilizare
-
introducir los fundamentos del diseño web
-
explorar el mundo css y el diseño de ui
-
aprender el proceseo de llevar ideas al diseño y la implementación
objetivos de la sesión
diseño de interfaz de usuario
principios de diseño ui
color
tipografía
jerarquía
percepción
color
tipografía
jerarquía
percepción
grid layout
jerarquía visual
la atención es relativa, como el tiempo
jerarquía visual
jerarquía visual
la percepción también es relativa
la proporción áurea
(a + b) / a = a / b
sucesión de fibonacci
veamos un poco de mates
esta proporción se presenta
en la naturaleza
vale pero... ¿cómo aplicamos
esta proporción al diseñar?
principios de diseño
y patrones
Unidad
Proximidad
Alineación
Alineación
Equilibrio
Equilibrio
Contraste
Énfasis
Repetición
Movimiento
Espacio negativo
Espacio negativo
Proporción
Jerarquía
Jerarquía
herramientas para diseño
y prototipado
introducción a css ¿que es?
y porque es tan importante
box model
block | inline
posicionamiento
<h1 class="title" id="title-id">Carmen Ansio</h1>
cascada - herencia - especificidad
h1 {
font-family: serif;
}
#title-id {
font-family: sans-serif;
}
.title {
font-family: monospace;
}
<button>Carmen Ansio</button>
orden de aparición
button {
color: red;
}
button {
color: blue;
}
<div class=”pink purple”> Carmen Ansio </div>
<div class=”purple pink”> Carmen Ansio </div>
.pink {
color: pink;
}
.purple {
color: purple;
}
custom properties
.card {}
.card:hover {}
/* podemos hacerlo anidando de esta forma */
.card {
&:hover {
}
}
nesting nativo en css
table.colortable {
& td {
text-align: center;
.c {
text-transform: uppercase;
}
&:first-child,
&:first-child + td {
border: 1px solid black;
}
}
& th {
text-align: center;
background: black;
color: white;
}
}
nesting nativo en css
nesting nativo en css
CSS Nesting
Selector data-type y container queries
:is :not
nth:child selector
:has()
:has()
diseÑAR layouts en css
y como implementarlos
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
.item {
flex: 1;
margin: 5px;
}
flexbox
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 10px;
}
.item {
grid-column: span 1;
grid-row: span 1;
}
.item-large {
grid-column: span 2;
grid-row: span 2;
}
css grid layout
combinando flexbox y grid
ejemplos con tipografia
y como implementarla
titulos balanceados
propiedad initial-letter
brilli brilli
Texto degradado
funcion clamp()
h1 {
--fluid-type-min: 2.5rem;
--fluid-type-max: 5rem;
--fluid-type-target: 5vw;
max-width: 15ch;
}
h2 {
--fluid-type-min: 1.8rem;
--fluid-type-max: 3rem;
}
h3 {
--fluid-type-min: 1.5rem;
--fluid-type-max: 2.5rem;
}
h2,
h3 {
max-width: 30ch;
}
p {
max-width: 60ch;
}
/* clamp(min, val, max) */
width: clamp(200px, 50%, 500px);
h1,
h2,
h3,
p {
font-size: clamp(
var(--fluid-type-min, 1rem),
calc(1rem + var(--fluid-type-target, 3vw)),
var(--fluid-type-max, 1.3rem)
);
}
fluid typography
CSS min(), CSS max() and CSS clamp()
Responsive Typography
@font-face {
font-family: "JobClarendon";
src: url("job-clarendon.woff2") format("woff2 supports variations"),
url("job-clarendon.woff2") format("woff2-variations");
font-weight: 100 1000;
}
Formato variable fonts
:root {
--font-fallback: "Helvetica Neue", sans-sans;
}
h1, h2 {
font-family: "JobClarendon", var(--font-fallback);
}
Variable Fonts Web Audio API
ejemplos con colores
y como crear paletas
color-mix(in srgb, blue, white);
color-mix(in srgb-linear, blue, white);
color-mix(in lch, blue, white);
color-mix(in oklch, blue, white);
color-mix(in lab, blue, white);
color-mix(in oklab, blue, white);
color-mix(in xyz, blue, white);
color-mix()
paleta creada con color-mix()
CSS color-mix() Demo
color scheme
accent color
accent color
ejemplos muy animados
y sin utilizar javascript
.progress {
animation: progress both linear;
animation-timeline: scroll(root);
transform-origin: 0 50%;
}
@keyframes progress {
0% {
scale: 0 1;
}
100% {
scale: 1 1; }
}
Propiedad animation-timeline
.progress {
animation: progress both linear;
animation-timeline: scroll(root);
transform-origin: 0 50%;
}
@keyframes progress {
0% {
scale: 0 1;
}
100% {
scale: 1 1; }
}
Propiedad animation-timeline
Scroll Link ed Animations
View transitions API
Zelda Animation timeline
1 - de la idea a la implementación
proceso creativo: del wireframe al prototipo
2 - de la idea a la implementación
proceso creativo: del wireframe al prototipo
3 - de la idea a la implementación
proceso creativo: del wireframe al prototipo
ejemplos creativos
con css
hover con perspectiva
Transición con perspectiva
desafíos comunes en el diseño web
experiencias reales
tendencias en diseño
la tan famosa ia
tendencias en desarrollo
nuevas tecnologías y frameworks
recursos y herramientas
libros, cursos en línea, comunidades...
devrel lead google
una kravets
@una
devrel google
adam argyle
@argyleink
chrome devrel google
bramus
@bramus
the end
UDIT Diseñando y Prototipando Interfaces con CSS: De la idea a la realidad
By Carmen Ansio
UDIT Diseñando y Prototipando Interfaces con CSS: De la idea a la realidad
- 203