convertir ideas diseñando

interfaces con css

ds consultant

CARMEN ANSIO

@carmenansio

...pero antes de comenzar

herramientas que utilizare

codepen

  1. introducir los fundamentos del diseño web

  2. explorar el mundo css y el diseño de ui

  3. 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

bit.ly/salmorejotech

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

  • 725

More from Carmen Ansio