Las tendencias de diseño también se aplican a la industria del automóvil

26, marzo, 2012

En cosassencillas siempre nos hemos centrado en cómo han evolucionado las tendencias de diseño aplicadas sobre todo a las páginas web y cómo se han desarrollado nuevas tecnologías web. Sin embargo, he considerado interesante destacar cómo esto también ha sucedido en la industria del automóvil. Es curioso ver como cada vez más tendencias de diseño se aplican de un modo muy similar en ámbitos tan diferentes como las páginas de Internet y el diseño de los nuevos automóviles. Seguramente algunos pensaréis que esto no tiene mucho sentido, sin embargo no hay más que echar un vistazo a las líneas cada vez más imperfectas de algunos de los últimos modelos que encontramos en el mercado.

Uno de los últimos lanzamientos del popular fabricante Porsche, nos enseña unas líneas que no tienen nada que ver con respecto a anteriores prototipos que ha ido sacando para otros modelos, se trata del nuevo Porsche Macan, un vehículo todo terreno que llega para ser el hermano pequeño del Cayenne. Si observamos sus líneas, tienen elementos redondeados a la vez que irregulares, siguiendo una estética muy similar a la de algunos de los portales de Internet que encontramos hoy día de diseño más moderno.

Y es que cada vez las tendencias son más irregulares, formas que llaman más la atención gracias a una mayor irregularidad de las formas que componen toda la pieza. Un ejemplo de esto lo vemos en el fabricante americano Dodge, que tradicionalmente ha fabricado modelos con unas líneas muy rectas, evolucionando a unas líneas mucho más curvadas con el popular Dodge Viper pero que finalmente ha optado por líneas más irregulares, un concepto que actualmente da incluso una sensación de mayor deportividad en el caso de los automóviles. En el caso de las páginas de Internet lo que solemos apreciar es una mayor atención, al ver formas, colores y elementos más novedosos, sobre todo para aquellos que pasamos el día enteros navegando por cientos de webs. Un ejemplo de estos nuevos modelos de coches es el Dodge Charger, que basta con observar su parte delantera para darnos cuenta cómo se trata de un vehículo totalmente irregular, con un diseño que no llega a ser de líneas rectas ni curvas. Sin duda una revolución si lo comparamos con los diseños de otros modelos anteriores del fabricante americano.

Sin duda el mundo y sus tendencias cambia constantemente, atrás quedan diseños obsoletos de muchas redes sociales que caen en el olvido como consecuencia de la constante evolución que experimentan redes mas grandes como Twitter o Facebook. Llama la atención ver cómo sucede algo similar en el caso de los automóviles, basta con ver modelos cuadriculados como el Chrysler Crossfire y compararlo con alguno de los modelos novedosos que hemos mencionado antes. Sin duda las tendencias nunca se mantienen estáticas. Así que os aconsejo que cuando preparéis una página nunca la dejéis años con el mismo diseño, tratad de cambiar constantemente su diseño, lograréis unos visitantes más interesados en el contenido de la página, los anunciantes de la página tendrán también mejores resultados y la experiencia global en todos los aspectos será mejor. ¿O no os gustaría cambiar de coche cada año?


Elements of Design: escaparate de elementos web

19, septiembre, 2007

En SENTIDO WEB descubro a Elements of Design, una galería de elementos contenidos en páginas web que nos puede ayudar a diseñar partes de la página y añadirlas a algún diseño en concreto. Es como CSSMania pero en vez de diseños completos, está enfocado únicamente a elementos.

Podremos encontrar diseños de formularios para comentarios de blogs, comentarios de blogs, calendarios, código, iconos, texto entrecomillado, formularios de registro, cajas de búsqueda, tipología de cabeceras, etc.


Recursos para simplificar tu vida como diseñador web

12, septiembre, 2007

En INFECTED FX encuentro un enlace a una buena recopilación de 77 Resources to Simplify Your Life as a Web Designer (de Vandelay), donde nos proporcionan una lista con 77 recursos para diseño web. Algunos de estos recursos es posible que los conozcas, ya que han sido ampliamente comentados en la blogosfera de una manera u otra, pero otros pueden ser novedad, así que aquí tienes un buen listado de entre los cuales podrán encontrar:

• Herramientas del color. Elegir la combinación adecuada del color puede ser una tarea difícil. Pero puedes intentar algunas de estas herramientas para que tu decisión sea más fácil:

Para ver herramientas relacionadas con el color puedes ver Find the Perfect Colors for Your Website.

• Menús de navegación con CSS. Los menús de navegación basados en CSS, son utilizados por la mayoría de los sitios Web. No necesitan ser creados desde cero, pues hay centenares de menús ya creados y disponibles para su uso. Puedes utilizarlos tal cual o modificarlos para adaptarlos a tus necesidades particulares:

• Menús de la navegación de DHTML. Xtreeme DHTML Menu Studio es una gran herramienta para crear rápidamente los menús dinámicos de navegación (coste: $49)

• Fotos para tu Web. Las imágenes de la calidad realzan grandemente el aspecto de una página Webe. Puedes encontrar las fotos para libre o comprar fotos de alta calidad a bajo precio:

• Iconos:

• Plantillas en blanco de WordPress. Si diseñas los temas de WordPress puedes ahorrarse mucho tiempo descargando estos temas en blanco (de Tomorrow’s Laundry). Puede ser un punto de partida básico para tu trabajo.

• Plantillas básicas en CSS. Puedes ahorrar tiempo comenzando con una plantilla básica en CSS. La mayoría de las Web se construyen a partir de una plantilla con diversas disposiciones:

• Escultor de CSS de Eric Meyer. Uno de los diseñadores principales del CSS ha creado el CSS Sculptor para acelerar la creación de diferentes diseños básicos en CSS. Si diseñas muchas páginas este software de $149 puede ser provechoso.

• Inspector de enlaces que no funcionan. Los enlaces que no nos llevan a ningún lado frustran en gran manera a los visitantes, la comprobación de cada uno de ellos de forma manual es algo casi imposible, estas herramientas lo harán automáticamente para ti:

• Prueba en diferentes navegadores. La pruebas en diferentes navegadores son una parte del proceso del diseño, y por desgracia eso significa perder mucho tiempo realizandolas:

Para más información sobre este tema puedes ver Effectively Testing Your Website in Multiple Browsers.

• Pruebas para validar códigos. El código válido es generalmente más accesible y debe ser una de las primeras cosas que pruebes cuando encuentras algun problema:

• Scripts. No hay necesidad de reinventar la rueda, puedes utilizar scripts libres que otros han creado:

• Generador de favicones. Los favicons son muy popular hoy día, y no son difíciles de crear. Intentalo con estas herramientas libres para crear los tuyos propios y ayudar a calificar tu sitio Web:

• Tipografía. El encontrar la tipografía adecuada para tu diseño, puede ocuparte mucho tiempo, puedes intentar mejorar ese aspecto con algunos de estos recursos:

• Herramientas Web 2.0. La mayor parte de la web 2.0 y los sitios sociales, tienen varias características del diseño comunes. Estos recursos te ayudan a incorporar algunas de estas herramientas de diseño:

• Diseñando botones. Los botones son un recurso que están por todas partes. Crea fácil y rápidamente tus propios botones con estas herramientas:

• Herramientas para genera la imagen del gradiente. Las imágenes con gradiente son otra característica de la web 2.0. Si no tienes Photoshop hay algunas otras maneras de crear gradientes:

• Cajas de esquinas redondeadas. Crear cajas con las esquinas redondeadas es fácil cuando tienes las herramientas adecuadas:

• Burbujas con CSS. Las burbujas para incluir algun tipo de información son otro recurso que añaden cierta variedad y hacen agradable tu diseño:

• Herramientas para el CSS. Si quieres limpiar, optimizar y comprimir tu código del CSS, aquí están algunas opciones:

• Misceláneo:

  • Web Host Uploader – Una herramienta sencilla ftp que elimina la necesidad de cargar manualmente los cambios a un cliente del ftp. Esta herramienta carga los cambios fácilmente.
  • Web Standards Checklist – Lista de comprobación del diseño de los estándares del Web.
  • Firebug Add-On for Firefox – Puedes corregir, eliminar errores y supervisar de tu CSS, HTML y el Javascript en cualesquier página Web.
  • Web Developer Firefox Add-On – Para agregar una barra con las herramientas más características en cuanto al diseño y desarrollo web.


Más de 30 extensiones Firefox para desarrollo web

31, agosto, 2007

En SENTIDO WEB destacan una lista Mashable con más de 30 extensiones para Firefox que nos pueden ayudar en nuestros desarrollos web. Algunas te resultarán familiares, pero otras es posible que desconozcas y pueden ser interesantes. Las puedes encontrar en 30+ Firefox Add-ons for Web Developers & Designers.


CssBased, para votar los mejores diseños web

21, agosto, 2007

cssbased-logo.pngEn WW WAHTS NEW nos da a conocer a CssBased , que puede ser una referencia o ayuda a la hora de definir el aspecto de nuestras ideas, pues podemos navegar por verdaderas obras de arte propuestas y votadas por los usuarios. Dispone de una enorme lista de sitios basados en CSS y clasificados por temas y por etiquetas, resultando relativamente sencillo encontrar el diseño que pueden servirnos de inspiración. Cada layout mostrado puede comentarse creando una red social de personas interesadas por el buen gusto.


Descubre la tecnología usada por un sitio web

16, agosto, 2007

En BLOGMUNDI comentan que mediante BuiltWith podemos saber todos los datos acerca de un sitio web:

  • El sistema de estadísticas que usa.
  • Información del servidor en el que se aloja.
  • Las librerías Javascript que usa.
  • Una estimación de sus visitas.
  • La plataforma o el lenguaje en el que está desarrollado el sitio web.
  • El sistema de publicidad que utiliza.

Una herramienta no apta para curiosos, por que seguro que empiezas a fisgonear un montón de sitios web.


Cien herramientas y recursos online para diseño web

14, agosto, 2007

logoEn XIBERNETICOS comentan que en Design Vitality han realizado una extensa lista de 100 herramientas online relacionadas al diseño web 100 Web Design Template Sources, Tools and Resources. En el artículo encontraremos buenos enlaces donde encontrar un poco de cada cosa: plantillas web, generadores de css, etc.


Cien recursos esenciales para desarrolladores Web

9, agosto, 2007

En BLOG VECINDAD… encuentro una lista de todo lo que puedes necesitar si te dedicas al desarrollo web, se trata de 100 Essential Resources for Web Developers. Contiene muchos enlaces a revistas en desarrollo web, blogs, recursos en código, usabilidad, foros, etc.


Stemplate: Diseños gratuitos de diversos elementos en formato PSD

3, agosto, 2007

logo

En el blog LEANDONO´S nos presenta un buen enlace a Stemplate, una web que ofrece diversos recursos con varios diseños gratuitos en formato PSD, de diferentes elementos como de buena calidad: botones , barras de navegación , logos , banners , badges entre otros.


Algunos headers, colores, estilos y fuentes para el diseño de tu blog

30, julio, 2007

En el blog ZONA CEREBRAL tenemos una recopilación de diversos detalles gráficos para que podamos darle un retoque innovador o personal a nuestra página, así que es recomendable echarle un vistazo a esos recursos con los que quizás encuentres el estilo que andas buscando para convertir tu bitácora en un blog de diseño actual.

Headers:

  • Enrico’s blog. 53 imágenes listas para añadirlas al fondo del título en tu blog. Hay de todo un poco, aunque la mayoría de ellas están relacionadas con lugares, paisajes y objetos.
  • Digital Westex. Fantástica colección de imágenes listas para utilizar, con una resolución genérica de 800 x 200. Destaca la sección de headers artísticos para remplazar la imagen del título en los themes Kubrick y K2 para WordPress.
  • Free Web Page Headers. Galería con más de 700 fotografías e imágenes clasificadas por categorías y enviadas por los usuarios. Es un buen sitio donde alojar y promocionar tus propios diseños para compartirlos con el resto de internautas.
  • Image Abstraction. Unos 80 diseños de backgrounds abstractos con alta resolución, patrones y texturas para diseñadores gráficos y artistas de Photoshop.
  • Free Photo Clips. Interesante web con 36 clips dedicados principalmente a objetos. La mejor elección si lo que buscas es una imagen simple para transformarla a tu antojo.
  • More Doubts. Este blog ofrece una colección de imágenes gratuitas con una resolución de 760 x 200 compatibles con cualquier tipo de blog y plataforma.
  • The Philip. 10 estupendos headers gratuitos listos para utilizar en el theme Cutline de 2 ó 3 columnas. También puedes echarle un vistazo a los de CaptainHops.com.
  • 100 Pixel. Blog dedicado exclusivamente a publicar nuevos diseños de imágenes de fondo para incluir en el título de tu blog.
  • Urban Dirty. Librería de fotos actualizada regularmente que cuenta con 189 archivos inspirados en diseños urbanos.
  • BG Themes. Lista bastante completa con multitud de headers gratuitos para blogs basados principalmente en paisajes y lugares.
  • Blogger Talk. Galería gratuita de headers para blogs. El único requisito exigido para agregar cualquiera de sus imágenes es mantener un enlace hacia su página.
  • Web Song Designs. Más de 10 fotografías e imágenes gratuitas para colocar como fondo en el título del blog.
  • Header Art. Diseños optimizados para plantillas de WordPress clasificados en función de su resolución.
  • Writer Space. Artículo con 18 imágenes de 820 x 145 listas para utilizar y una colección de 16 exquisitos gradientes de colores.

Colores:

  • Daily Color Scheme. Una excelente página que publica una paleta de colores diaria, incluyendo el código hexadecimal de cada muestra. Un sitio perfecto para conseguir una combinación de colores en armonía.
  • Colour Lovers. Toda una colección con más de 100.000 paletas de colores archivadas por colores, número de votos, códigos y por fechas. Es necesario registrarse como usuario de forma gratuita para poder acceder a cada una de las paletas.

Fuentes:

Inspiración:

  • Snap 2 Objects. Artículo con más de 85 recursos gratuitos que todo diseñador debería conocer.
  • Cool Site Collection. Colección de sitios que recoge las páginas web con los diseños más atractivos de la red.
  • CSS Liquid. Fluidos y elásticos diseños en CSS que te pueden ayudar a definir la apariencia y el estilo de tu blog. También dispone de una sección con recursos y plantillas gratuitas listas para descargar.
  • Zeniltuo. Lista con más de 250 sitios sobre CSS, Flash y otros recursos para mejorar el diseño de tu web.

16 técnicas CSS para mostrar esquinas redondeadas

30, julio, 2007

En el blog XYBERNETICOS encuentro un buen artículo en donde habla sobre las esquinas redondeadas y comenta que  son una las técnicas mas populares en Internet, sobre todo si hablamos del universo denomino 2.0. Podemos verlas incluso en servicios tan populares como Google Adsense, que permite a los usuarios optar por esquinas redondeadas para mostrar los anuncios.

Existen varias formas de llegar al mismo resultado, y más aun de adaptar esta técnica a nuestros diseños. Pero si bien la técnica es agradable, es bueno saber donde utilizarla, y de que forma combinar esta técnica con el resto de nuestro diseño.

A continuación podremos ver 16 técnicas de esquinas redondeadas con CSS, con la idea de que puedas obtener mejores opciones:

  • ThrashBox – Para crear esquinas redondeadas con una sombra suave visual y con un margen mínimo.
  • Schillmania, con un bello artículo que detalla un método para hacer esquinas redondeadas con CSS. En este caso, diálogos de esquinas con imágenes, en todas sus partes utilizando Png, bordes líquidos redondeados, transparencia alfa, gradientes, patrones y cualquier otra cosa que tú (o tu diseñador) podría desear. Podrás ver un demo aquíDescarga de Códigos e imágenesArticulo original
  • DomCorners – Una técnica muy simple para conseguir esquinas redondeadas.
  • virtuelvis.com esquinas redondeadas con CSS que permite que adaptes esto a los diseños existentes sin alterar ningún margen de beneficio.
  • Esquinas redondeadas líquidas utilizando CSS – Una caja redondeada reutilizable, esta técnica utiliza en total 6 imágenes. Pero su diseño es realmente bello.
  • Esquinas Nifty de Anti-aliased – Basadas en las esquinas Nifty y modificadas por Steven Wittens.
  • Caja simple realizada por tedd – Ideal para diseños no muy cargados.
  • Las esquinas redondeadas herméticas – Con esta técnica podremos realizar una caja con las esquinas redondeadas usando solamente una imagen, y fijando esa imagen para cada esquina.
  • Crear un bloque redondeado – Una técnica que requiera dos imágenes una actuando como encabezado y otra para el contenido, es muy fácil de utilizar y nos da lugar a conseguir resultados muy agradables y además fácilmente.
  • Esquinas redondeadas en CSS por Adán Kalsey, requiere 4 imágenes para la esquinas. Muy sencilla y fácil.
  • Roundedcornr.com – Herramienta sencilla para generar las esquinas redondeadas.
  • Spiffycorners.com – Es la manera mas sencilla de generar el CSS y HTML en las esquinas sin usar imágenes o Javascript.
  • Spiffybox.com – otro proyecto de los mismos creadores de esquinas Spiffy

Recursos y utilidades para diseñar un blog al estilo web 2.0.

26, julio, 2007

 En ZONCEREBRAL leo un artículo muy interesante que pongo en su totalidad, donde comentan que si tienes una página web, un blog o simplemente te gusta navegar por la red y leer algún que otro blog, seguramente has visto la palabra «web 2.0» en multitud de ocasiones, de una segunda generación de la web formada por un conjunto de aplicaciones y servicios nuevos que se basan principalmente en la participación del usuario, la interactividad, las redes sociales, ajax, etc.

El diseño es uno de los aspectos que más me suele llamar la atención de este tipo de sitios 2.0, como por ejemplo el de Flickr, Digg o Linkedin y siempre me suelen llamar más la atención aquellos blogs que tienen un estilo parecido, usando botones, iconos, badges, gradientes, paletas de colores… versión 2.0.

Las características más comunes que suele tener una página web de este tipo son las siguientes:

  • Simplicidad.web 2.0
  • Orientación centrada.
  • Diseño del contenido, no de la página.
  • Efectos 3D, en poca cantidad.
  • Suavidad, colores de fondo neutros.
  • Colores fuertes, sin exceso.
  • Iconos exquisitos.
  • Espacios en blanco.
  • Textos grandes.

Aquí podrás encontrar lo necesario para transformar tu blog y crear un diseño con estas características:

Otros enlaces de interés:


Aardvark Firefox Extension

24, julio, 2007

Continúo con el blog WEBADICTO que hoy tiene cosas muy interesantes. Comenta sobre una extensión, que yo recuerde fue de las primeras que instalé cuando descubrí a Firefox. Cuando empezaba en eso del diseño de paginas, y me ha dado una gran alegría pues me había olvidado de la Aardvark Firefox Extension. Por lo que ya la acabo de instalar.

Una vez instalada, nos mostrara las características, código fuente, elementos, etc. de cualquier pagina web con solo mover el ratón sobre de ellos.

Además aunque no nos dediquemos al diseño web, esta extensión resulta muy útil a la hora «limpiar» banners, barras y demás barbaridades de una pagina web con el fin de poder imprimirlas.


Lista de herramientas para diseño web

20, julio, 2007

En BLOG VECINDAD… encuentro una buena relación en una lista de herramientas para diseño web, recursos y plantillas “open source”, lo tenemos en The Open Source Web Design Toolbox: 100 Tools, Resources, and Template Sources de Designvitality.

Aquí tienes la misma lista, tal y como la presentan en SENTIDO WEB: