Redeseño HA! (Parte 3 — Layout)

Dúas fichas distintas: unha cun cadro de proporcións verticais e outra horizontal, con gamas de cores distintas

Paso 1: distribución

  • Header: Contén o título e subtítulo da obra, así como o nome do artista e ano no que foi creada a obra.
  • Info: O resto de información estruturada da obra: título orixinal, museo no que está, etiquetas, movemento ao que pertence, técnica, etc.
  • Body: O texto co comentario da obra.
  • Image: A fotografía coa obra de arte.
Distintas combinacións dos catro elementos da ficha.

Paso 2: calculando proporcións

Sete noivas para sete irmáns, ou sete proporcións para sete layouts

Paso 3: xuntando todo

Comportamento de cada layout a diferentes anchos
  • Para os espazos en branco, usei un sistema que trata de xeito independente a separación horizontal (entre distintas columnas) e a vertical, usando as medidas tipográficas definidas no capítulo anterior.
  • Para cambiar a distribución dos elementos, non só se controla o ancho do marco do navegador, senón que tamén é moi importante a proporción, que se pode controlar por css con min-aspect-ratio e max-aspect-ratio.
  • E outros detalles como mostrar o texto en columnas, xogar co scroll para que a imaxe estea sempre visible, etc.
Exemplo do layout actual e o redeseño empregado en https://historia-arte.com/obras/muerte-de-pablo-escobar

Testeando

Sequel Pro, un programa gratuíto e moi sinxelo que permite traballar directamente con bases de datos MySQL e facer todo tipo de consultas, como por exemplo obter as proporcións de todas as imaxes.
  • O ano en que a obra se creou ou movemento ao que pertence: poderíamos engadir algún cambio no deseño se a obra é do Quattrocento ou pertence a algunha das vangardas do século XX?
  • Técnica: poderíamos ter en conta se a obra é pintura, escultura ou vídeo?
  • Extensión do texto: poder usar varios layouts tendo en conta tamén se contén moito texto ou pouco
  • Etc…

--

--

--

I design and build websites

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Oscar Otero

Oscar Otero

I design and build websites

More from Medium

Singletons in Unity — Dev Log #9

Grapheene Releases SDK Featuring Cloud-assisted Encryption Empowering Software Developers to Save…

Low-Power Button Replacement with Force-Sensitive Resistor

How do you further improve your favorite application?