• Saltar a la navegación principal
  • Saltar al contenido principal

Sebastián Thüer

Comunicación, diseño y tecnología

  • Acerca
  • Blog
  • Contacto
  • Show Search
Hide Search

Diseño Web

El manual de estilo visual de Google

Sebastián Thüer · 09.07.2013 ·

Preferencias por las formas geométricas, sombras duras en lugar de degradados y atención a cada pixel para evitar la ruidos en la imagen al modificar el tamaño. Son algunos de las normas que desarrolló Google en su manual de estilo visual que de forma no oficial está circulando por la web: Google Visual Assets Guidelines Part 1 y Google Visual Assets Guidelines Part 2.

En una empresa dominada por ingenieros no hay detalles librados al azar. Por ejemplo, a la hora de definir un ícono hay directivas bastante claras: deben ser extremadamente simples, exagerados y caricaturizados de una manera tal que puedan ser utilizados a escalas muy pequeñas.

Pero todo esto se entiende mucho mejor de manera visual.

92e4fbf53a96ceff9a9b403eb8583be3

Color y tipografía

Otro aspecto de importante en la identidad visual de Google es el color. Atrás quedaron los tiempos de coloridos y chillones para pasar una paleta mucho más racionalizada con secuencias de uso del color. Además, hay un cuidado por las cajas donde se presentan los íconos, cuidar los píxeles y la tipografía que deben ser completamente legible en diferentes escalas.

9f94a56613cc1830a36cb99786265ca7

Íconos para la interfaz de usuario

A la hora de emplear íconos en la interfaz de usuario de sus programas Google se mantiene fiel al principio de reducción de elementos, la preferencia por formas geométricas y un uso del color bastante restringido donde el negro y los grises son protagonistas.

bdcd5885f2055ad7ce72da55d9f9be99

Ilustraciones

La ilustraciones de Google son otra marca registrada de la compañía. Simples, coloridas y a veces al borde de lo naïf, los artistas visuales de Google deben diferenciar los trabajos para el mundo de los negocios de los productos de uso personal. Los principios de simpleza, preferencias por las formas geométricas y el «colorido controlado» se aplican también al arte gráfico de la empresa.

d461e7d40aa4d684a94d0f40d788bac5

WebSite X5, un sencillo y eficaz creador de sitios web

Sebastián Thüer · 26.06.2013 ·

WebSiteX5Las herramientas de escritorio para el diseño web parecen estar teniendo un resurgimiento, especialmente en el nicho de productos pensados para usuarios no expertos que desean tener presencia online sin complicarse demasiado. WebSite X5 apunta en este sentido y ofrece producto que permite crear un sitio web sin complicarse demasiado a partir de una serie de plantillas predefinidas que pueden modificarse.

El programa cuenta con una interfaz intuitiva y visual para que con pocos clics se puedan crear elementos tales como una lista de productos, un blog, formularios de contacto, galerías de fotos, o cualquier otro contenido. Además, los creadores de WebSite X5 aseguran haberle presetado atención a aspectos técnicos tales como optimización de motores de búsqueda (SEO), compatibilidad con diferentes navegadores y diseño adaptado para verse bien también en tablets y smartphones.

WebSite X5 incluye una galería de más 1.500 plantillas para el diseño de la página web  que se pueden personalizar con un editor interno. Además, puede ser modificada en cualquier momento. Si el usuario lo prefiere, puede crear su propia plantilla desde cero y para ello cuenta con más de de 6.000 fotos gratuitas  y libres de derechos.

WebSite X5 dispone de más de 1500 plantillas para elegir
WebSite X5 dispone de más de 1500 plantillas para elegir

WebSite X5 también permite crear la estructura del sitio web a partir de lo cual se genera automáticamente el menú de navegación. Luego, se añade el contenido como texto, imágenes, videos, galerías de fotos, mapas, formularios de contacto, listas de productos o botones de integración con las redes sociales. Todo mediante una interfaz de arrastar y soltar (drag & drop) para que el usuario pueda ver cómo el sitio web cobra vida a medida que se trabaja en él.

WebSite X5 permite publicar el sitio a través de un motor FTP interno
WebSite X5 permite publicar el sitio a través de un motor FTP interno

Finalmente, la publicación se realiza directamente desde el programa que incluye un  motor FTP interno incrustado se encarga de poner el sitio web en línea. Esta herramienta realiza conexiones seguras y ahorra tiempo al usuario realizando múltiples conexiones, lo que permite transferir simultáneamente varios archivos. 

En definitiva, WebSite X5 es una herramienta pensado para los usuarios menos exportes con ganas de experimentar en el mundo digital sin sacrificar calidad técnica ya que ofrece compatibilidad con los últimos estándares como HTML5 y CSS3.

Diseños de navegación no convencionales

Sebastián Thüer · 25.06.2013 ·

Un diseño de navegación claro, lógico y consistente es parte del ABC del diseño web. Sin embargo, hay veces donde romper las reglas favorece nuevos modos de percepción e interacción con las interfaces. «A Showcase of Websites with Unusual Navigation» es un interesante post que recorre diferentes propuestas de diseño que han buscado innovador en la navegación más allá de la clásica barra horizontal que domina el diseño en la web hoy en día.

Obviamente este tipo de propuestas no son aptas para todo tipo de sitios. Se emplea como recurso cuando sabemos que el usuario estará dispuesto a aceptar nuevas reglas, tendrá ganas (y tiempo) de explorar nuevas alternativas para acceder a los contenidos y, sobre todo, cuando su uso está plenamente justificado desde lo conceptual y con una excelente realización en la práctica.

Más diseños en A Showcase of Websites with Unusual Navigation.

Adobe Cloud, el diseño ahora se muda a la nube

Sebastián Thüer · 20.06.2013 ·

creative-cloud

No es una nueva versión de su suite, es un cambio de paradigma. Adobe Creative Cloud (CC) acaba de lanzarse con renovadas versiones de su software más popular:  

  • Photoshop CC para la edición y composición de imágenes,.
  • Illustrator CC para ilustraciones y gráficos vectoriales.
  • InDesign CC para diseño, composición y publicación de páginas
  • Dreamweaver CC para sitios web, diseño de aplicaciones y codificación.
  • After Effects CC para efectos visuales cinematográficos y gráficos animados.
  • Premiere Pro CC para producción y edición de vídeo.
  • Adobe Muse CC para diseño de sitios web sin escribir código.

Y el cambio fundamental no pasa por nuevas herramientas, renovación de la interfaz o mejores funcionalidades. Creative Cloud entierra la idea de que se puede seguir vendiendo software en una caja y propone un modelo de suscripción. Esto es, un modelo de licenciamiento donde se paga un monto fijo -por mes o por año- para usar una o todas las aplicaciones de la suite.

Mitos y verdades de Creative Cloud

¿Significa esto que ejecutaremos Photoshop en la ventana del navegador? No, sigue siendo un programa de escritorio básicamente. 

¿Habrá que estar conectado permanentemente a Internet para emplear un programa de Adobe? Para la mayor parte de las funciones, no. Solo hay que validar la licencia cada 30 días.

¿Se borran mis archivos si cancelo una licencia? No, se pueden seguir abriendo con versiones anteriores de la Creative Suite o con Creative Cloud si se reanuda la licencia.

¿El software se actualizará compulsivamente a la última versión? No, es opcional.

¿Y cuál es el cambio, entonces? Básicamente, que el software no te lo venden sino que lo alquilás. La principal ventaja es bastante clara: para tener acceso a la suite más completa para trabajo en diseño gráfico, diseño web y producción audiovisual solo hay que pagar unos USD $50 al mes. Bastante accesible para cualquier profesional que haga del diseño su trabajo.

Y la desventaja también es bastante obvia: como ocurre con la luz o el teléfono, el mes que no pagamos nuestras cuentas nos cortan el servicio. Los archivos seguirán estando allí, podremos verlos con versiones anteriores de nuestros programa o de forma ilegal. Pero nada se borrará ni Adobe tendrá derechos sobre nuestras creaciones.

Además,  los suscriptores de Creative Cloud contarán con 20GB para almacenar archivos en la nube y así poder sincronizar sus trabajos con diferentes dispositivos. Incluso, al estilo Dropbox, podrán enviar links para mostrar el trabajo a un cliente sin necesidad de que este esté suscripto.

Las críticas

En un principio este modelo recibió bastante críticas por parte de los usuarios. Especialmente, porque si consideramos que Adobe renueva su suite cada 2 años al final terminamos pagando casi lo mismo por una serie de programas cuya licencia es provisoria. Hagamos cuentas: USD $50 multiplicado por 24 meses es igual a USD $1200. Adobe CS6 cuesta hoy USD $1300 pero la licencia es perpetua. Es decir, a largo plazo Creative Cloud es más caro.

Otra crítica es que Creative Cloud no es una opción, es la única posibilidad para seguir utilizando las últimas versiones de la suite de Adobe. Para los más reacios se sigue comercializando -por ahora- CS6, pero no habrá nuevas versiones.

Otro interrogante son los precios ¿Qué pasa si Adobe decide aumentar su tarifa de suscripción? La oferta es atractiva hoy, pero si los precios suben representa un gasto fijo de importante que termina por afectar a los freelancers o pequeños estudios.

Y finalmente la gran pregunta que nos hacemos todos. Si por alguna razón los servidores de Adobe dejan de funcionar, ¿qué hacemos? ¿Cómo seguimos haciendo nuestro trabajo?

Sin embargo, estas preguntas que hacen varios especialistas no están afectando a los usuarios. Creative Cloud ya pasó las 700.000 suscripciones.

Pinterest para diseñadores

Sebastián Thüer · 28.05.2013 ·

 pinterest-design

Pinterest es la nueva red social basada en imágenes a la cual los diseñadores les pueden sacar mucho juego. Ya analizamos cómo funciona, publicamos una guía de uso y vimos cómo usar Pinterest para el marketing. Ahora, Carrie Cousins publica Pinterest for Designers: Using It to Your Advantage, un interesante artículo que nos muestra cómo los diseñadores podemos aprovechar Pinterest tanto para mostrar nuestro trabajo como para buscar inscrpicación.

Pinterest como portfolio

Obviamente, deberemos crear nuestra cuenta sino lo tenemos y completar el perfil. Un paso muy importante es verificar nuestro sitio web, algo que se puede hacer fácilmente descargando un archivo y subiéndolo nuestro sitio web. Con esto, ya no quedarán dudas de quién es el autor de las imágenes que publicamos en nuestros tableros.

Un tema controvertido: ¿Hay que publicar las imágenes con marca de agua o no? Particularmente, no me gusta mucho esa idea sin embargo muchos diseñadores optan por esta opción para evitar ver su trabajo reutilizado en otras producciones sin su consentimiento. En todo caso, habrá que ser consistentes y si una imagen lleva marca de agua todas las deberían llevar. 

El siguiente paso es crear y comenzar a utilizar tableros. Cada tablero funciona como una categoría que contiene las imágenes que publicamos. En general, hay que seguir las leyes generales del SEO: mientras más información y palabras claves introduzcamos más fácil será que otros encuentran nuestro contenido googlenado o usando el buscador interno de Pinterest.

También conviene hacerse una idea de los tamaños en que se mostrarán las imágenes. Este gráfico lo explica con bastante claridad

Tamaños de imágenes para Pinterest. Fuente: http://designshack.net
Tamaños de imágenes para Pinterest. Fuente: http://designshack.net

Pinterest como inspiración

Aquí no hay muchos secretos. La clave está en seguir gente interesante que publica contenido de calidad con cierta regularidad. Aquí un pequeño listado para comenzar:

Tipografía

  • David Schewn – Typography
  • Veronica Blaylock – Free Fonts
  • Joy Cho – Typography
  • Leah Den – Letters and Numbers, 
  • Laura Bolter Design – Words of Wisdom and Nice Type.

Diseño impreso

  • Leah Dent – Margins and Columns
  • Sarah Jones – Design
  • Kayla Meyer – Flyers + Posters
  • Hazim Al Radadi – Identity & Print Design
  • Emma Farley – Magazine Covers

Diseño Web

  • Violeta Patolova – Web 
  • aDONNAdesign  -Web Design Tips
  • Dan Otis – UI Inspiration
  • Amanda Hawkins – Web Portfolio 
  • Paula Cevasco – Web Design

Packaging

  • Violeta Patolova – Package Design
  • Blair Thomson – Packaging.Love
  • Ophella Quixote – Design and Packaging
  • The Cool Hunter – Graphic Design/Packaging
  • Kristina Miletieva – Packaging Design

Color

  • Sarah Jones – Colour Schemes
  • COLOURlovers – TEALlovers
  • JM Necheles – Color
  • Pantone – Everything Pantone
  • Isabel Moises – Color Inspiration Palettes

Logos

  • Rinee Shah – Logos
  • Mike D – Badgography
  • Carolina Beiertz – Great Logos
  • Manuel T – Hipsters Logos
  • Graham Smith – Logo & Brand Identity
  • « Ir a la página anterior
  • Página 1
  • Páginas intermedias omitidas …
  • Página 4
  • Página 5
  • Página 6
  • Página 7
  • Página 8
  • Páginas intermedias omitidas …
  • Página 38
  • Ir a la página siguiente »

Sebastián Thüer

Creative Commons Atribución 4.0 Internacional © 2025 · Less Is More · Acceder