Cabecero Theme Keratin

Construyendo mi web

Este es el resumen de los pasos, decisiones y selecciones que he realizado para reflejarme en mi web.

Theme Keratin original

Tema Keratin original

Comenzamos mirando páginas en la red, de ilustradores, diseñadores, fotógrafos, etc. Después ya empezamos a buscar temas que reunieran los siguientes requisitos: que utilizaran lenguaje HTML5, CSS y fueran RESPONSIVE (adaptables a otros dispositivos como móviles, tablets, etc.)

Después de mucho buscar, de que varias posibilidades fueran echadas atrás, ya desesperándome, di con el tema del estilo que buscaba: KERATIN, diseñado por Themecot.com.

Tenía claro que su diseño tenía que ser ELEGANTE y SENCILLO.  Así que este tema discreto me venía como un guante, el PROTAGONISTA no era la web si no el CONTENIDO. Ya fueran fotografías, dibujos o diseños diversos, sus imágenes tenían un espacio que les dejaba respirar, donde destacaban organizados en mosaico. Un pequeño efecto de lupa al pasar por encima de las imágenes les da dinamismo.

Comparativa entre tema original y modificado, cabecero.

En el header aumenté el margen para darle más espacio y aire. Cambié un poco la distribución del logotipo y el encabezamiento. Con inspeccionar elemento aprendimos a “destripar” una página web.

Inspeccionar elemento

El tema daba varias posibilidades, como ponerle un fondo que se apreciaría por los laterales, pero finalmente fue descartada esa opción y lo dejé con fondo liso y claro. De hecho seleccioné un gris casi blanco para que no fuera tan agresivo leer encima. Las letras de los encabezamientos no son negras, sino grises también. No quería llamar la atención con otros colores ajenos a los dibujos y las fotografías, por lo que seleccioné un COLOR para “Ilustración & Diseño” en la cabecera, que he utilizado también para el hover de los enlaces, un granate oscuro. Comprobé que una persona daltónica podía verlo decentemente.

Comparativa del footer

El footer me resultaba muy pesado así que lo reduje un poco de tamaño.Comparativa de una entradaA los accesos a las entradas les quité la fecha modificando su php correspondiente, ya que si una persona entraba a echar un vistazo y no había sido actualizada en un tiempo, podría dar mala impresión. Ya dentro de dicha entrada si que aparece la fecha, pero no hacía falta que apareciera la persona que la había realizado, como en el tema original.

Comparativa tipográfica

Realicé un cambio de TIPOGRAFÍA para el cuerpo de texto entre otras cosas en su CSS. Originalmente tenía la Questrial y la sustituí por la Lora, una tipo con serif de buena lecturabilidad que contrastaba con la sin serif Questrial formando un conjunto atractivo.

Comparativa de página de error

Para la página de error 404, hice esta ilustración, más a tono con la web de una ilustradora. Reconocible al primer vistazo. Para ello tuve que realizar cambios en su php.

Añadí en el aside con un plugin los ICONOS SOCIALES de Flikr y Pinterest, los que utilizo habitualmente para temas de ilustración, diseño, fotografía, arte en general. También cree un FAVICOM con mi logo que en estos momentos es provisional.

Galería muestra

Lo único que no me convencía tanto de Keratin era su galería, así que utilicé el plugin de Flickr Albun Gallery para poner tres galerías: de fotografías, ilustraciones y diseños, y así tener un resumen de todos los trabajos que había metido con las entradas en solo imágenes. Así los interesados se pueden hacer una idea de mis trabajos de un solo vistazo.

En el aside ya tenía dividida en otras tres CATEGORÍAS (reservando una de “sin categoría” para el futuro) que se dividían en: Diseño, Fotografía e Ilustración.

Otro aspecto que he trabajado también es el SEO, que es la estrategia de preparar tu web para lograr un buen posicionamiento al ser relevante para los motores de búsqueda. Esto exige trabajo, un contenido mínimo bien redactado, etiquetar correctamente las entradas, etc.

Una de las cosas que dan un buen posicionamiento y hacen una página más amigable son las descripciones de las imágenes de cara a personas con problemas de visibilidad o invidentes. Y eso lo he tenido muy en cuenta en mis entradas.

He tenido suerte con Keratin porque está muy bien desarrollado, organizado y con comentarios que son de ayuda.

He podido utilizar recursos en la web que no había probado y me han venido muy bien: google fonts, wordpress, webs de paletas de colores, de otros diseñadores, etc.

En resumen, creo que me ha quedado una web elegante y fresca, cómoda de navegar y con contenido interesante, que espero sirva de ayuda también.

Construyendo mi web he ido aprendiendo muchas cosas y lo mejor es que me queda mucho por aprender, todo lo que quiera sobre este tema.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *