top of page

Karen Ortiz

png-transparent-twitter-verified-badge-hd-logo_edited_edited.png

02. Sobre mí

26 de Junio de 2023. · Diseño Web

Detrás de la renovada página web de la revista hypatia.

Querida persona lectora:

Habiéndome decidido a iniciar un blog en el que planeo narrar mi trabajo y esperando no olvidar actualizarlo; estoy muy contenta de abrir este espacio para mí y para quien sea que lea esto.

La problemática.

La cosa con Hypatia es complicada, a veces pienso que más de lo que en un principio parecía.

Hypatia es una revista que admiro, pues llevan más de 12 años trabajando para crear una revista gratuita que tiene como único fin, informar a las personas sobre la actualidad en el mundo de la ciencia y tecnología, lo cual a mí me gusta mucho.

El problema eran los protocolos que utilizaban, eran demasiado antiguos. Utilizaban una plataforma para administrar el contenido de la página que la única posibilidad que les daba era texto plano. 

No teían ningún número en PDF y los 72 que eran hasta ese momento, veinte se habían perdido.

El trabajo más complicado fue la recopilación de multimedia desde los archivos físicos que tenían.

Tuve que copiar y pegar texto plano para ordenarlo en texto sobre una interfaz javascript que copié y pegué un montón de veces con cada número para ahorrarme tiempo y aún así fue bastante tardado.

El comienzo.

Para el UX Design pensé en páginas como National Geographic ó Discovery Channel, pero con una interfaz mucho más elegante. Escogí una paleta de colores rojiza, negra, capri y amarillo mostaza para darle un toque moderno y serio.

Rediseñé los logos y opté por distribuir los artículos con un sistema de etiquetado que permitiera encontrarlos más rápido; también agregué mucha multimedia para que el sitio se sintiera vivo, así como lo de siempre: chatbot, formularios y enlaces de descarga para los articulos.

Les dejo el antes y después:

Screenshot 2023-06-26 at 19.04.38.png
Screenshot 2023-06-26 at 19.06.52.png

El proyecto es de lejos complicado por razones administrativas que salen totalmente de mis manos, más va tomando forma y se va viendo increible.

Seguiré actualizando el blog proximamente que tenga resultados finales.

12/07/23

Digitalizando Hypatia.

Muy bien, después de algo de tiempo la página está terminada en un 90%, tiene todas las funcionalidades que se esperaban desde un principio, pero con una interfaz de usuario mucho más amigable y rediseñada porque la anterior no era precisamente la mejor.

Para hacer todoe sto tuve que rediseñar la maquetación iniciual de la página, quitando sistemas de etiquetado y notas cortas y optando por digitalizar cada uno de los números. Esto llevó un trabajo de recolección de números físicos que más adelante se digitalizaron y utilicé Adobe Acrobat para ordenar y fichar cada uno de los archivos .pdf. 

Más adelante, comencé a subir los archivos a la base de datos que utilizo para esta página. Al ser muy poco lo que se tiene que guardar en la página, pues sólo son archivos .pdf y algunas imágenes y videos, opté por utilizar Google Drive y una hosting web multidominio.

Diseñando el sistema de colecciones.

Con los archivos arriba decidí que se debían ordenar de manera que los números más actuales fueran los más atractivos a simple vista, creando subpáginas diseñadas especialmente para cada número que no sólamente fueran estéticas, sino que mejoraran las funcionalidades que antes según existían. Por ejemplo, la capacidad de leer cada revista sin alterar el diseño ni la maquetación de esta gracias a un visor .pdf.

También cuidar la calidad de las imágenes, los bloques y cajas de secciones; las columnas y el font que permita una UX mucho más acertada a una revista y no sólamente a un visor de texto. 

Para el reso de números por debajo de la edición #60, creé algo a lo que llamé "colecciones", un compilado de galerías carrusel que tienen una metadéscripción HTML sobre una plantilla para facilitarme el trabajo. Copié y pegué la misma sección para cada revista y sólamente cambié la editorial y el hipervicunculo que llevaría a cada número de revista. Esto facilita bastantes cosas, desde la programación hasta la experciencia en el sitio, pues este se vuelve más fluido al no tener que cargar ninguna página, sino que al ser todo un carrusel de imágenes, puede ser abierto sólamente como un pop up, lo que acelera mucho el trabajo. 

También cree animaciones de movimiento sobre las portadas con CSS y de esta manera se agrandan a la hora de pasar el mouse, etc. Lo más frecuente dentro de UX.

El menú principal.

Si hay algo que me encanta de este proyecto es su interfaz limpia 

bottom of page