Proyecto ShinFDuran Home: Día 2 comienza el diseño

Pues sí, hoy ya había que empezar con la divertida (para otros) tarea de ponerse con lo que sería el diseño de la web.

Como ya comenté, mi idea era la de hacer el diseño flat design, aunque para ser sincero tampoco estaba muy seguro de lo que era así que inicialmente me dediqué un tanto a informarme más en detenimiento.  Parte de esa información está subida en algunos documentos del proyecto.  En mi github tenéis tanto esos documentos como archivos sobre el wireframing posterior (txt explicativo, imágenes y xmls para cargarlo en Balsamic Mockups).



Sobre wireframing, para no extenderme en esta entrada ya realicé otra explicándolo:  ¿Qué es el wireframing?

¿Qué es Flat Design?

Flat design busca una mejor experiencia de usuario al tener páginas no tan sobrecargadas.  A su vez, el recurrir a esas imágenes 2D y al uso de colores planos y tipografía en lugar de imágenes en relieve facilita el renderizado de la página y al prescindir de grandes efectos nos ayuda a mejorar el rendimiento en general.

Tiene mucha sinergia con el RWD al no recurrir tanto al pixel perfect, además si se usan las imágenes mediante glifos nos facilita más aún la tarea de adaptar la página al tamaño de pantalla.

Wireframing inicial

Como ya se comentó, es comenzar a diseñar desde el móvil olvidándonos de toda la información que no es necesaria, posteriormente ya se verá la posibilidad de en tamaños más grandes añadir contenido adicional o darle otra estética. Este sería el diseño inicial de contacto y del índex/sobre mi.

Decir que el segundo todavía no me había dado cuenta de como usar los iconos y ese button bar fue un intento de emular lo que aparece en la izquierda.  En home y sobre mí aparecerá un poco de texto referido a esa sección.

Decir que cada sección (salvo blog que es un link a este blog) en lugar de tener una imagen, tendrá un rectángulo de color sólido junto con el nombre de la sección, se le añade una característica diferenciadora pero dentro del flat design.

Para los iconos que aparecen lo más probable es que use o bien fuente con glifo asociado a esos iconos o alguna imagen en css o svg.  El footer, aunque sólo se ve en la imagen de la derecha estará presente en todos lo que no se es si añadir una breve información o agregar también iconos sociales.

A continuación se vería lo que es el portfolio.  Aquí aunque realmente no es necesario y es más una complicación adicional usaré MongoDB para inicialmente rellenar un listado de proyectos tal y como aparece en la imagen derecha y luego al pulsar sobre un proyecto aparecería el proyecto con una serie de detalles adicionales y link hacia donde está hospedado en su versión operativa.