Simplicidad es Elegancia, tendencias de diseño web

Estándar

Glass-Ceiling-03-580x434Al paso del tiempo las sociedades van modificando los ideales que les sirven como guía. Los ideales estéticos, las guías para distinguir lo bello, son quizá en los que se dan los cambios más notorios.

Recientemente trate el tema de la belleza en lo que al diseño aplicado a la web respecta, en el post La belleza de la proporción. Pero sentía que me había quedado a penas en la superficie del tema.

En general reconocer lo bello resulta algo relativamente sencillo, puesto que cada uno es portador de estas guías que nos permiten apreciar la belleza. Al intentar distinguir lo excepcionalmente bello y sencillo es donde nos topamos siempre con la complicación.

La elegancia es el atributo de ser excepcionalmente bello y sencillo.

La Elegancia es quizá una de las cualidades estéticas sobre la que menos acuerdo existe. Se ha frivolizado mucho la palabra “elegante” al punto de olvidar su significado verdadero. La palabra “elegancia” viene del latín elegantia y significa “cualidad del que extrae lo mejor”. Sus componentes léxicos son: el prefijo ex- (hacia fuera), legere (escoger, cosechar), -nt- (agente, el que hace la acción), más el sufijo -ia (cualidad). Pero en un mundo donde la diversidad estética es tan amplia y rica en belleza como el Internet. ¿Qué es la elegancia? ¿Qué es ser elegante?

Por mucho un par de escritores han logrado condensar mejor las nocines de la elegancia sintetizando todo lo que necesitamos saber en una frase.

La elegancia es un don natural que permite obtener un logro máximo con el mínimo de medios. – José Ortega y Gasset

Un efecto esencial de la elegancia es ocultar sus medios. – Honorato de Balzac.

Existen cuatro características fundamentales de la elegancia. La primera es lo estético, la percepción de la belleza y la forma que influye en nuestra mente.

La segunda es la naturalidad. Sin naturalidad no hay elegancia verdadera, para ser natural debe derivarse de la espontaneidad y la autenticidad.

La tercera es lo sobresaliente, la distinción, lo excepcional. Y la cuarta característica es la belleza que significa en primer lugar armonía y proporción de las partes dentro del todo, y luego que esta cercano a la perfección o al menos las nociones ideales de esta.

Gerard_Daran-FC4En el arte de cualquier tipo los componentes esenciales del concepto de elegancia son la simplicidad y la consistencia de diseño, enfocándose en las características esenciales de un objeto. Los estímulos visuales son considerados elegantes si son usados un pequeño número de colores y los estímulos, haciendo énfasis en el resto. De la misma forma desde un programa hasta un web es elegante si se utiliza una pequeña cantidad de código y recursos estéticos, de una manera muy ingeniosa, para un gran efecto.

Algunas tendencias hoy constituyen ya casi una norma en diseño web. Señalaremos algunas brevemente.

  • Diseño Adaptativo(Responsive)
  • Imágenes y Videos de ancho completo
  • Diseño Flat

Si están buscando algo de inspiración, lo mejor que les puedo recomendar es darse una vuela por el sitio de AWWWARDS, yo lo encuentro siempre una experiencia refrescante.

Anuncios

La belleza de la proporción, la razón áurea en la web

Estándar

Luego de muchas conversaciones acerca de como debería ser una web, me di cuenta que para mucha gente la web continua siendo un territorio sin reglas; pese a que hay ideas bastante claras sobre principios de diseño aplicado al arte, creación de materiales impresos, desarrollo de productos, arquitectura y varias otras.

Las web modernas deben llenar no solamente las expectativas de los propietarios. Las web y aplicaciones de hoy deben también cumplir las exigencias de un público globalizado, diverso y rico en preferencias. Por ello resulta vital que se utilicen ideales de belleza tan universales como sea posible. Esos ideales de belleza son por tanto aquellos que utilizamos de forma innata y en los que la naturaleza es rica, tal es el caso de la proporción áurea.

Golden Ratio - Proporción Áurea

El número áureo (también llamado número de oro, razón extrema y media, razón áurea, razón dorada, media áurea, proporción áurea y divina proporción ) es un número irracional , representado por la letra griega φ (phi) (en minúscula) o Φ (Phi).

Además de su belleza matemática, su carácter misterioso como número irracional y la aparente armonía que otorgaba a las proporciones, los artistas clásicos utilizaron la razón áurea tras comprobar que aparecía en numerosos diseños de la naturaleza, comenzando por las mismas proporciones del cuerpo humano. Esto les llevaba a pensar que la razón áurea era algo así como un canon divino implantado en el universo. Hoy sabemos que la llamada ‘proporción divina’ tiene que ver con los procesos de crecimiento y optimización de las formas.

Esta proporción ha sido usada por pintores, escultores, arquitectos, matemáticos, escritores, fotógrafos, novelistas, cineastas, músicos y un largo etcétera en diversas épocas. También es utilizado por los diseñadores gráficos de nuestro tiempo. En lo personal encuentro interesante la idea de aplicar la razón áurea al diseño web. ¿Comó se ha aplicado? y  ¿Cómo podemos utilizarla nosotros?

Marcas y Logotipos

Hurgando un poco por la web, encontré que la proporción áurea ha sido aplicada en diseño de logotipos de varias marcas reconocidas. Estos diseñadores han sabido utilizar esta proporción para transmitir esas nociones de ‘proporción’ y ‘armonía’ que las marcas desean asociar con ellas.  Les dejo acá un enlace al artículo y algunas imágenes interesantes.

La Proporción Áurea en el diseño de logotipos (http://www.brandemia.org/la-proporcion-aurea-en-el-diseno-de-logotipos)

Pero de lo que va este artículo es del ¿cómo aplicar la proporción áurea al diseño web? así que vamos a ver algunas ideas y aplicaciones prácticas de esta proporción y algunas herramientas que nos facilitaran el ponerla en uso.

Diseño Web

Al diseñar el aspecto visual de un sitio web o la creación de imágenes en general, el dilema de elegir proporciones surge inevitablemente. Por ‘elegir proporciones’ nos referimos a la idea de diseñar un espacio que contenga la información de un sitio web o la información visual de una imagen. En ocasiones, estas decisiones se vuelven más simples al crear las cajas contenedoras de información(“div”) de forma proporcional, lo suficientemente grandes para contener la información.

Al utilizar una proporción como la proporción áurea, esta relación de aspecto no se altera por la expansión o contracción. El contenido de un sitio web puede ser mostrado en cualquier tamaño y todavía tendría sentido, ya que no se basa en el mundo físico. El colocar la información de un sitio web dentro de un div que tiene las proporciones áureas permitiría una presentación de la información que sigue las ideas clásicas de la belleza visual. Además, ya que el rectángulo de oro se puede dividir en cuadrados para crear rectángulos áureos más pequeños, la información puede ser incrustada como divs con estas proporciones una dentro de otra.

El Mito de la Lectura Superficial. Investigaciones con eyetracking (http://blog.pucp.edu.pe/item/162324/lectura-superficial)

Algunos estudios acerca del comportamiento de los usuarios mientras navegan, como el citado arriba, indican que las webs se leen desde arriba a la izquierda, en diagonal, hacia abajo a la derecha, perdiendo importancia según se va bajando. Los elementos más importantes tienen que ir siguiendo esta tendencia. Información de importancia se coloca dentro del rectángulo más grande, con información de la sub-categoría en los rectángulos más pequeños. El resultado sería un diseño espacial y visualmente agradable, con información organizada de forma conceptual por el tamaño relativo. Podemos apreciar esto en el diseño del sitio web de Twitter.

Legibilidad

No es que la gente lea menos, los sitios web todavía no están diseñados para que el usuario pueda leer textos extensos cómodamente.

LecturaLa legibilidad se define como la capacidad de una forma para poder ser descifrada y se basa especialmente en la eficiencia de la palabra visible. Existen reglas, o al menos, principios, para la legibilidad tipográfica. Para lograr textos más legibles debemos tener en cuenta estos factores:

  • La forma del tipo
  • Su organización en el espacio
  • Su tamaño (cuerpo)
  • Longitud de línea
  • Distribución de blancos: interletra, interpalabra, interlineado, ubicación del texto en relación al tamaño de la página.
  • La jerarquización de la información.

La proporción áurea también puede ser utilizada para logar mayor legibilidad, ya que nos permite establecer valores o al menos rangos para estos factores. En los siguientes artículos se nos explica mejor como podemos utilizar la razón áurea para el calculo de los factores de legibilidad.

[Cómo calcular tamaños tipográficos para Web] (http://www.cristalab.com/tutoriales/como-calcular-tamanos-tipograficos-para-web-c113111l/)

[Tipografía Básica] (http://tipografiabasica.wordpress.com/)

[Secret Symphony: The Ultimate Guide to Readable Web Typography] (http://www.pearsonified.com/2011/12/golden-ratio-typography.php)

Herramientas

Para finalizar y animarlos a que utilicen esta proporción en sus diseños, les dejo acá algunas de las herramientas que encontré y me parecieron útiles.

Golden Ratio Typography Calculator. Nos calcula a partir del ancho de línea el tamaño de la tipografía y el interlineado o bien calcular en base al tamaño de la letra. También puede calcular en base a cantidad de caracteres por línea y permite visualizar el aspecto de el punto en tal tipografía, de un listado básico de tipografías.

Type Scale. Permite previsualizar y elegir la escala tipográfica adecuada para tu proyecto y experimentar con el tamaño de la tipografía, escala y diferentes fuentes web.

The Golden Grid. Es un sistema de rejilla para web. Es producto de la búsqueda de un sistema perfecto de rejilla moderno. Su intención es ser una herramienta de CSS para los sitios web basados en cuadrícula o rejilla. Incluye ejemplos y hojas de estilo para layout, proporciones comunes para tipografía, imágenes y vídeos.

BlockLayer – Golden Ratio Calculator. Permite calcular las dimensiones de objetos proporcionales utilizando la razón áurea, para objetos rectangulares, círculos, elipses y triángulos.

Está infografía es una guía de todo lo que necesita saber. Aprender los conceptos básicos como lo que es la proporción aurea y donde se puede encontrar, además de formas prácticas de utilizarla en sus diseños. Ya sea que encuentren eligiendo una tipografía, en la edición de fotos, la creación de formas o incluso el trabajo en el diseño, pueden utilizar la razón aurea para que su diseño se vea lo mejor posible.

 

Everything you Need to Know About The Golden Ratio #infographic

You can also find more infographics at Visualistan

El trabajo del analista – Estandares y referencias de documentación

software
Estándar

Me decidí a escribir sobre este tema ampliando una entrada que ya tenia sobre manejo de requisitos (Manejo de Requisitos de Software) y tratando de arrojar alguna luz a aquellos que se inician en las labores de análisis y diseño. Algunos de mis colegas me preguntan se sienten aturdidos porque no saben como iniciar, documentar y presentar sus a trabajos. Espero que algunas de la referencias acá señaladas les sean de utilidad para que no tenga que reinventar la rueda y tengan una idea de clara de como conducir sus trabajos y como presentarlos.

Estimaciones del proyecto

El método de Punto de Caso de Uso (UCP – Use Case Point), está basado en los tradicionales Puntos Función. Es un método originado de la tesis de master de Gustav Karner (Karner, 1993), desarrollada mientras trabajaba en Objectory AB, bajo supervisión de Ivar Jacobson (creador de los casos de uso). La técnica ha sido usada por la empresa Rational (posteriormente adquirida por IBM) durante varios años y con buenos resultados.

El método estima el tiempo de desarrollo de un proyecto mediante la asignación de pesos a un cierto número de factores que lo afectan. Finalmente se contabiliza el tiempo total estimado a partir de esos factores.

La especificación de requisitos de software (ERS)

En la fase de análisis se deben identificar claramente las necesidades del producto a desarrollar y documentarlas. Como resultado de esta fase se debe producir un documento de especificación de requisitos en el que describa lo que el futuro sistema debe hacer. Se trata por tanto de una actividad no solo de síntesis sino también de síntesis. En esta fase se establecen las bases contractuales del desarrollo del producto en cuestión.

IEEE 830 es una norma para Especificación de Requisitos de Software. Un buen documento de requisitos debería incluir de una forma o de otra toda la información contenida en esta norma, indica como deba organizarse un documento de requisitos. Esta no es una metodología para el análisis de requisitos sino una recomendación de como debe ser presentado la especificación de estos y no exige que sea presentada en el formato propuesto por la especificación.

Esta definición se extiende y aplica a las condiciones que debe cumplir un sistema y cada uno de sus componentes para cumplir para satisfacer un contrato, norma o especificación.

Una buena especificación de requisitos de software provee un conjunto de ventajas entre las que destacan:

  • Reducción del esfuerzo en desarrollo.
  • Constituye una buena base para estimación de costes y planificación.
  • Constituye un punto de referencia para procesos de verificación y validación.
  • Constituye una base para la mejora de los procesos analizados.

Características de una buena ERS

  • Correcta: cada requisito que figura en ella refleja alguna necesidad real.
  • No ambigua: cada requisito tiene una única interpretación.
  • Completa: incluye todos los requisitos significativos.
  • Verificable: es posible verificar el una ves entregado el producto que cumple con los requisitos.
  • Consistente: ninguno de los requisitos es contradictorio o entra en conflicto con otros.
  • Clasificada: los requisitos pueden clasificarse por diversos criterios, los más comunes son importancia y escalabilidad.
  • Modificable: cualquier cambio puede realizarse de forma fácil completa y consistente, también es deseable evitar la redundancia.
  • Explorable: se puede conocer tanto el origen como los componentes del sistema que realizan cada requerimiento.
  • Utilizable durante las tareas de mantenimiento y uso: el personal que no ha intervenido directamente en desarrollo debe ser capaz de mantenerlo y modificarlo, la especificación actuá como un plano.

Metodología para el Análisis de Requisitos de Sistemas Software

Existe entre muchas otras esta metodología creada por Amador Durán Toro y Beatriz Bernárdez Jiménez del Departamento de Lenguajes y Sistemas Informáticos de la Escuela Técnica Superior de Ingeniería Informática en Sevilla, es una excelente tesis. La metodología que recopila prácticas y conceptos ya aceptados y explica varios formatos para recopilación y descripción de requisitos.

No solo es muy clara sino que también se han dado a la tarea de complementarla con un software. REM (REquirements Management) es una herramienta experimental gratuita de Gestión de Requisitos diseñada para soportar la fase de Ingeniería de Requisitos de un proyecto de desarrollo software de acuerdo con la metodología definida en la Tesis Doctoral “Un Entorno Metodológico de Ingeniería de Requisitos para Sistemas de Información”, presentada por Amador Durán en septiembre de 2000. en este enlace podrán encontrar la herramienta que es de uso libre solo para fines académicos y enlaces a otros documentos y tesis relacionadas.

El formato de salida se puede personalizar mediante XSL, algo que yo mismo he hecho y podemos tener el formato de salida que deseemos.

Tambien esta aNimble Platform que es una herramienta para la gestión de requerimientos descendiente directo de OSRMT. Quizá alguno de Uds. se anime a probar alguna de ellas.

Especificación de diseño de software

Luego de la especificación de requerimientos se siguiente la fase de diseño del sistema en si mismo. En este punto muchos se empiezan a preguntar también como presentar los resultados en un documento que sea claro, bien organizado y compresible para la mayoría de las personas. Por ello abordaremos con brevedad una de las especificación que puede sernos de utilidad.

IEEE 1016 es  un estándar para  “descripción de un diseño de software”, entendiendo por tal la representación que sirve para comunicar cómo está diseñado el sistema. Especifica la información que una descripción de este tipo ha de contener y la organización o esquema de presentación recomendada. Puede aplicarse a software de cualquier tipo destinado a funcionar en un ordenador. Su aplicación no está restringida por ninguna consideración relativa al tamaño, complejidad o carácter crítico del software.

Tampoco está condicionada por la aplicación de una determinada metodología de diseño, gestión de configuraciones o control de la calidad, pues se supone que la información relativa a la calidad o los cambios en el diseño de la descripción será gestionada por otras actividades del proyecto. Asimismo, la norma no apoya ni se ve limitada por una técnica descriptiva particular, pudiéndose aplicar a documentos en papel, bases de datos automatizadas, lenguajes de descripción de diseños, etc.

El estándar especifica que un SDD (software design descriptions) se organiza en una serie de vistas de diseño. Cada vista abarca a un conjunto específico de problemas de diseño de las partes interesadas. Cada vista de diseño es orientada por una perspectiva de diseño. Una perspectiva identifica los problemas de diseño que se centraban en el marco de su vista y selecciona el  lenguaje de diseño que se utilizan para describir esta perspectiva de diseño. La norma establece un conjunto común de perspectivas para el diseño de vistas, como punto de partida para la preparación de un SDD, y una capacidad genérica para definir nuevas perspectivas  y con ello ampliar la expresividad de un SDD.

Los contenidos necesarios de un SDD son los siguientes:

  1. Identificación de la SDD

  2. Los actores de diseño identificados

  3. Los problemas de diseño identificados

  4. Los puntos de vista de diseño seleccionados, cada uno con definiciones del tipo de elementos de diseño y lenguaje permitido.

  5. Los puntos de vista de diseño

  6. Los superficie de diseño

  7.  Justificación del diseño

Podrán encontrar uds  mismos mas información respecto de esta y otras normas y métodos en internet. Las especificaciones presentadas incluyen plantillas para su uso, las que son una recomendación y no obligadamente debe usarse pero si seguirse. Les invito a que la lean y la pongan en práctica en la organización de sus proyectos de software.