Quinto round “EL DISEÑO”

Finalmente el proyecto llega a la etapa de diseño después de realizar las pruebas de usuario. Antes de ponerle color al lienzo, es muy importante que el grupo de expertos este totalmente de acuerdo en cuales son los puntos débiles que se van a mejorar y cuales se van a mantener de los prototipos. Tras una larga discusión logramos asentar las bases para el rediseño.

Con las ideas más claras y datos de cuales son los elementos más conflictivos dentro de la aplicación, se plantea un diseño flat, neutro de escalas de grises y blancos rotos, usando el color solo para aquellos puntos que requieren atención por parte del usuario. Otro de lo puntos importantes en los que se ha trabajado es la legibilidad, ya que el producto no es una web que los usuarios visitarán puntualmente con un objetivo, si no que es una herramienta de trabajo y el usuario la usará cada día durante su jornada laboral.

Para empezar con el diseño optamos por usar Photoshop, para centrar todos los elementos nos apoyamos de una retícula de 24 columnas, que nos descargamos de los templates que aparecen en: http://960.gs/. 960 Grid System es principalmente una colección de recursos de CSS orientados a la maquetación de una página web, aunque también ofrece retículas compatibles con diferentes software, lo cual fue útil en este proyecto.

Otro de los puntos importantes es la elección de la tipografía, nos decidimos por una fuente de Google Web Fonts, que posee un catálogo de 632 tipos de fuente distintas y open source. Además es muy fácil de integrar en la hoja de estilo. Escogimos la familia Open Sans porque fue diseñada con un énfasis en posición vertical, las formas abiertas y una apariencia neutral, pero familiar. Está optimizada tanto para la impresión como para su uso en la web gracias a su excelente legibilidad, porque que es ideal para el producto que estamos desarrollando.

Para finalizar a la hora de diseñar siempre es una buena idea tener referencias de cómo es el look and feel que se quiere conseguir, recursos que faciliten el trabajo de diseño. Hay muchos sitios web que ofrecen recursos gratuitos con los que se puede ahorrar algo de tiempo y con los que además se puede aprender muchísimo al ver cómo están hechos.

The Starter Kit una gran selección de los mejores recursos y enlaces de interés para los desarrolladores web y diseñadores.

Blue Graphic vectores y Psd Freebies: Templates, Mockups, Websites, Iconos.

Pixeden proporciona recursos web de calidad. Acceso a todos nuestros archivos premium de sólo $ 6 por mes.

Creative Market similar a Pixeden, Creative Market nos ofrece recursos de mucha calidad, gratuitos y de pago.

Freebies bug últimas novedades en PSD gratuitos y otros recursos para diseñadores,
Premium pixels recursos gratis, con muy pocas restricciones.

Psddd es un sitio de recursos gratuitos.

Subtle Patterns puedes encontrar patrones de texturas listos para usar en web.

Retovectors es un sitio donde puedes descargar gráficos vectoriales gratuitos creados a partir de ilustraciones antiguas.

Dribble es una enorme comunidad de diseñadores y puedes encontrar recursos gratuitos en Fribbble de manera más organizada.

Flypixel: es un recopilatorio de recursos gratuitos de diferentes sitios webs, supervisado por @n33co, el mismo de Html5Up.

строим дом