Hoy analizaremos las prácticas de diseño web y las tendencias del nombre más grande en software para ver si podemos aprender algo sobre algunos errores que debemos evitar en nuestro trabajo.
Siéntase libre de comentar para estar de acuerdo o en desacuerdo con las sugerencias a continuación. Como diseñadores profesionales, su percepción es valiosa y espero sus pensamientos.
La perorata ocasional
A todos los que odian los artículos llenos de críticas, les pido disculpas por el hecho de que esta publicación es un poco dura a veces. Normalmente prefiero elogiar el buen diseño por criticar el mal, pero cuando David Appleyard y yo decidimos hacer una publicación sobre las tendencias de diseño de Microsoft, parecía que había mucho más que aprender sobre las cosas desordenadas, feas y / o desaconsejables que Ellos hacen que la alternativa.
Para cortarlo en los comentarios, no mencionaré ni haré una sola comparación con Apple en el análisis a continuación. Esto no pretende ser un argumento de PC contra Mac en lo más mínimo, sino un vistazo a lo que creemos que son prácticas realmente deficientes en diseño y desarrollo web. Para ser justos, Microsoft es una empresa muy exitosa y no está fallando debido a cualquiera de estos problemas. De hecho, como señalamos a continuación, Microsoft realmente parece tener algunos diseñadores estelares en el equipo para ciertos sitios, simplemente sugerimos que se implemente un mayor nivel de control de calidad en todos los ámbitos.
Con eso en mente, analicemos algunos lugares en los que Microsoft parece no cumplir con sus prácticas de diseño y desarrollo y cómo puede beneficiarse de este conocimiento.
# 1 cuidado con mandar ciertos plugins
Si hemos aprendido algo de los recientes rasguños entre Apple y Adobe, es posible que la creación de sitios totalmente dependientes de complementos de terceros cerrados pueda llevarnos a un grave revés. Microsoft parece estar repitiendo este mismo error a medida que su propia red de sitios se vuelve cada vez más deponente en Silverlight.
Mientras exploraba los diversos sitios de Microsoft que se preparaban para este artículo, Windows me acosaba constantemente informándome que no había instalado Silverlight y, por lo tanto, no podía ver la página web de la forma en que estaba destinada a ser vista. Mi pregunta es, "¿por qué ir esta ruta?" Especialmente cuando hablamos de presentaciones de diapositivas simples y animaciones que se pueden hacer con tecnologías más ubicuas. Por supuesto, Microsoft es dueño de Silverlight, por lo que es lógico para los negocios respaldar su inversión, pero eso no significa que sea la mejor opción para que te subas a su carro.
Ya sea que sea un gran fan de Silverlight o no, mi consejo es que sea extremadamente cauteloso al basar la funcionalidad de su sitio en esta o en cualquier otra tecnología similar. A medida que el debate sobre si tiene sentido o no desarrollar sitios con Flash continúa calentándose, los sistemas de segunda línea como Silverlight se convierten en una apuesta aún mayor. Siempre que sea posible, apueste por el código y las herramientas que no requieran ningún trabajo o instalación adicional por parte de sus visitantes.
# 2 mira tu resolución
Esta es una de mis mayores quejas sobre Microsoft simplemente porque parece un diseño descuidado. Sin lugar a dudas, hay una línea delgada para caminar entre mantener el tamaño de su archivo hacia abajo para aumentar la facilidad de uso y mantener sus imágenes limpias y nítidas, pero no puedo evitar sentir que Microsoft parece ser más propenso a mostrar JPG feos y dentados que cualquier otro. Sitio profesional que he visto en los últimos años.
La cantidad cada vez menor de usuarios de Internet de acceso telefónico continúa aumentando el tamaño de imagen aceptable. Esto de ninguna manera implica que no debe tener especial cuidado en hacer que todo sea tan pequeño como sea razonable, pero en el momento en que comienza a pesar tanto en el diseño que reduce drásticamente la calidad aparente del sitio, ¡las imágenes se vuelven contraproducentes!
Usted está viviendo una pura ironía si usa imágenes para hacer que su sitio se vea mejor pero, en última instancia, reduzca su atractivo estético en el proceso. Cuando sea posible, obtenga una vista previa de las imágenes procesadas en diferentes monitores y preste mucha atención a la cantidad de distorsión y artefactos que considere aceptables.
# 3 desorden organizado
A veces, puedes seguir todas las reglas de diseño obvias y aún así terminar con algo que parece visualmente insatisfactoria. Al buscar en los sitios de Microsoft, me topé con innumerables áreas como la que se muestra a continuación, que a pesar de sus intentos de organización basada en columnas, parecían desordenados.
¿Entonces, cuál es el problema? En pocas palabras, hay una tonelada pasando en un espacio relativamente pequeño aquí. Incluso aunque definitivamente intentaron organizar el contenido y mejorar la legibilidad visual a través de los íconos, el resultado final todavía está bastante fuera de balance.
Si observa detenidamente lo que está pasando aquí, se siente como cuatro columnas de información diseñadas por cuatro personas diferentes que se han agrupado. El lado izquierdo parece muy pesado con imágenes en comparación con el derecho, el color del texto es un poco esporádico, el contenido es incómodo y las columnas carecen de espacio suficiente para que parezcan las áreas independientes que son.
La lección aquí es tener cuidado de empaquetar una sola área de su página demasiado llena de información dispar. Indudablemente, hay muchas ocasiones en que la situación requerirá mucho contenido, pero la organización debe manejarse de una manera coherente y atractiva, como se ve en los hermosos ejemplos a continuación (de sitios que no son de Microsoft).
# 4 inconsistencia
A partir de Microsoft.com, abra los gigantescos menús desplegables de navegación y elija un área del sitio para visitar. No importa en qué enlace haga clic, la página resultante tendrá un aspecto bastante diferente al de la página de inicio y diferente de la mayoría de los otros enlaces disponibles en el mismo menú desplegable.
Explorar el sitio de Microsoft es como hacer girar una ruleta.Prácticamente no tiene idea de dónde aterrizará y qué esperar de la página siguiente. Algunas páginas cuentan con fondos suaves, mientras que otras usan gradientes suaves o incluso círculos explosivos. La mayoría de las páginas parecen favorecer el azul, pero no necesariamente el mismo azul, y también hay muchas páginas que ignoran por completo la tendencia azul.
El punto es, ya sea que su sitio tenga dos páginas o doscientas, la consistencia es una necesidad. Hace que los usuarios se sientan más cómodos cuando pueden familiarizarse con la forma en que funciona y se ve un sitio en unos pocos segundos. Darles algo drásticamente diferente cada pocas páginas hace que la navegación sea una experiencia más confusa y menos eficiente.
Además, existe la idea de que crear una marca sólida y consistente es solo un buen negocio, ya que ayuda a los clientes a relacionarse con su empresa de una manera más personal. Es cierto que Microsoft está haciendo malabarismos con muchas marcas y micrositios diferentes que se derivan de la página de inicio, pero incluso entre lo que podría considerarse como las páginas centrales de Microsoft.com, los temas de imagen y los métodos de navegación parecen drásticamente diversos.
# 5 Diseño Centrado en Clipart
Obviamente, esta sugerencia es un poco absurda, ya que el clip art y Microsoft Office siempre se han entrelazado inexorablemente. Sin embargo, el diseño de íconos ha avanzado mucho desde 1995 y es hora de renunciar a ese estilo específico en las imágenes que utiliza.
Los ejemplos de arte anteriores extraídos de varias páginas de Microsoft simplemente me hacen temblar, especialmente ese horrible ¿Desarrollador principiante? logo. No tengo idea de por qué un boomerang está atacando una planta o si el monitor de computadora flotante mágico está ayudando en el ataque o huyendo de la escena. Todo lo que sé es que la comunicación visual aquí es un lío indescifrable.
Esta es una de las razones principales por las que existen galerías CSS como la nuestra. No para que puedas robar el diseño de otros, pero sí puedes echar un vistazo al estado del diseño en la década que estás desarrollando. Navegar por estas galerías es como visitar tiendas de ropa populares en el centro comercial para mostrarle a tu tía loca que ella no tiene que vestirse como alguien del show de Sunny y Cher.
Siéntase siempre libre de romper los límites y moverse más allá de las tendencias actuales de diseño, iniciando las suyas propias. Solo tenga cuidado de permanecer obstinadamente estancado durante años mientras el resto del mundo avanza.
# 6 Texto desbordado desalineado
Otra tendencia que es difícil pasar por alto en los sitios de Microsoft son las columnas de texto constantemente rotas que desbordan sus límites obvios.
Este es bastante fácil de arreglar y realmente solo requiere un poco de esfuerzo y atención. Solo asegúrese de aprovechar las herramientas gratuitas como el laboratorio de búsqueda de Adobe para asegurarse de que sus diseños no se rompan cuando se ven en los principales navegadores.
Aunque el diseño de CSS es una bestia ciertamente complicada cuando se trata de la coherencia entre navegadores, pequeños errores como este realmente reducen la calidad de su sitio y vale la pena el tiempo de resolución de problemas que necesitan resolver.
# 7 alineación pobre
A veces, una página dada me presentaba el desafío de decidir qué diseño podía señalar. Por ejemplo, en la página de abajo, originalmente consideré elegir el uso de una pequeña captura de pantalla que no aumenta al hacer clic en ella, pero cuanto más miraba la página, más me confundía sobre lo que estaba pasando con el diseño
Si está familiarizado con la teoría básica del diseño, sabe que aprender a implementar alineaciones sólidas y consistentes es la clave para un buen diseño de página. La extraña mezcla de alineaciones visuales izquierda, central y derecha que tienen lugar en el sitio de arriba, junto con el espacio vacío incómodo cerca de la parte superior, hace que para un flujo visual realmente extraño de la información que se presenta.
Además, si visita la página de arriba, verá que el contenido en su conjunto parece estar centrado, pero en realidad está desechado por la franja en el centro, lo que hace que la página parezca bastante correcta.
# 8 desorden de anuncios
Los blogs de diseño libre como este tienen que presentar muchos anuncios, es simplemente la forma en que obtenemos ingresos y continuamos brindándole contenido. Sin embargo, si está ejecutando un sitio de negocios profesional, debe considerar cuidadosamente si desea desviar su mensaje y profesionalismo con la publicidad.
Las páginas de Microsoft.com están llenas de varios anuncios que realmente reducen la estética de la página en la que están. A veces, estos anuncios apuntan directamente a otras páginas de Microsoft, a veces a otras compañías o socios. No hay nada de malo en el concepto de dirigir el tráfico a otras partes de su sitio, pero cómo lo logra puede hacer una gran diferencia.
Si hay algo que la mayoría de los usuarios web han aprendido a detectar, ignorar y posiblemente reenviar, es un anuncio de banner. No quiere decir que este tipo de publicidad no funcione con la orientación y el diseño adecuados, o incluso que los usuarios de Microsoft no hagan clic en ellos, pero me pregunto si no hay una mejor manera.
Si Microsoft desea dirigir el tráfico a sus teléfonos móviles y otros proyectos, la manera más fácil de hacerlo es configurar un sistema de anuncios abarrotado y no estándar (de diseño) que se extienda por todo su sitio. Sin embargo, parece que la integración de este contenido como parte del sitio real tendría una tasa de clics mucho mayor, ya que más usuarios tomarían nota del mensaje y no tendrían que romper ninguna regla interna sobre cómo evitar los anuncios publicitarios a toda costa.
Además, tal integración obligaría a los diseños a ser más consistentes porque se crean como una sola unidad en lugar de por equipos separados. Nuevamente, este es un escenario en el que puedo entender la relación costo-eficacia del enfoque de Microsoft, pero quiero advertirle que no siga su ejemplo.Lo más probable es que los sitios que diseñe no compitan con la mega red de los sitios de Microsoft y, por lo tanto, es más probable que se presten a un diseño sólido e integrado para que pueda evitar el desorden visual del exceso de anuncios.
Obviamente, hay muchos géneros de sitios donde esto no se aplica en absoluto ya que se espera que la publicidad esté presente. Solo asegúrese de considerar si su sitio debe estar dedicado a vender su producto o servicio, o si requiere el ingreso adicional y la distracción de la publicidad.
# 9 A falta de sala de respiración
En el diseño de impresión, los diseñadores configuran cada página con un área en vivo. Por lo general, este es un recuadro rectangular del recorte de la página que define el área en la que es seguro colocar el contenido para evitar el corte de la página o el apiñamiento de bordes. La mayoría de los diseñadores web hacen esto de manera intuitiva, ya que es bastante obvio que no desea que su contenido esté demasiado abarrotado contra el costado del navegador.
Sin embargo, como se muestra en la captura de pantalla anterior, hay algunas páginas de Microsoft que no parecen tener en cuenta tales opiniones. En cambio, el contenido comienza tan pronto como la página lo hace con cero relleno horizontal o margen (al menos en los navegadores con los que verifiqué).
El panel de navegación no se siente como si estuviera integrado al lado de la página, se siente como si se estuviera cortando (de nuevo, puede estar haciendo eso debido al hecho de que no tengo IE). La lección aquí es simple: siempre sé consciente del borde de la ventana del navegador. A menos que esté rompiendo la regla para un efecto de sangrado visual obvio, coloque su contenido, especialmente las partes y enlaces interactivos, dentro de un margen seguro para que los usuarios no se sientan atestados cuando intenten usarlo.
Si observa detenidamente la captura de pantalla anterior, puede ver algunos ejemplos más de diseñadores de Microsoft que simplemente no consideran si su texto fluirá correctamente en todos los navegadores principales. Esta es una tendencia bastante entretenida para Microsoft, ya que muchos diseñadores web pasan sus días intentando hacer adaptaciones especiales para Internet Explorer de Microsoft, pero la empresa multimillonaria no puede molestarse en devolver el favor al revisar su propio trabajo en otros sistemas.
# 10 no aprovechando tu talento
Aunque hay muchos comentarios negativos sobre los diseñadores web en Microsoft, me sorprendió gratamente ver que sí tienen algunos sitios y páginas que parecen simplemente asombrosos.
Los ejemplos anteriores son solo dos de los muchos lugares donde creo que Microsoft realmente lo eliminó del parque con su diseño, opciones de color, gráficos y compatibilidad entre navegadores. Lo que esto me dice es que en algún lugar del vasto grupo de cubículos de esta compañía se encuentran algunas personas realmente talentosas capaces de sacar a la compañía completamente fuera de su caída de diseño.
Estos diseñadores, quienesquiera que sean, deben ser promovidos a puestos que les permitan cooperar juntos y establecer estándares consistentes que, literalmente, todos los diseñadores web de Microsoft se verían obligados a seguir. En lugar de un laberinto de confusiones desconectadas de contenido, podrían crear una red de sitios hermosos con una marca fuerte que claramente pertenezcan a la misma familia.
La sugerencia final que les presento es que encuentre este tipo de personas sobresalientes en su propia empresa y les dé una voz. En lugar de lamentarse por la falta de talento entre los otros miembros de su equipo, designe a los diseñadores y desarrolladores más fuertes para que ocupen puestos en los que puedan influir en cada pieza de comunicación visual que se desarrolle asociada a una marca específica.
Esto se puede hacer de manera eficiente y efectiva mediante la creación de pautas de marca claras, coherentes y estrictas que se distribuyen a cada diseñador y desarrollador para cada marca distinta con la que trabaje.
Pensamientos de cierre
En resumen, aunque Microsoft posee bastantes diseñadores web extremadamente talentosos, el trabajo de estos individuos se ve casi completamente opacado por la gran cantidad de contenido que ni siquiera cumple con los estándares que esperaríamos de los diseñadores y desarrolladores novatos en su primer año. .
Afortunadamente, podemos usar compañías como Microsoft como ayudas de instrucción para ilustrar claramente que de hecho hay una manera incorrecta de hacer las cosas. Nunca se imagine que solo porque es un profesional independiente solitario o una pequeña empresa de diseño, no puede superar completamente a las mega corporaciones y las empresas de diseño cuando se trata de la calidad del trabajo que produce.
Descubrí que a menudo es más fácil encontrar ejemplos de diseñadores de calidad en las oficinas domésticas de todo el mundo que sentarse en los escritorios de grandes empresas. Tenga confianza en el hecho de que no tiene que coordinar y controlar la calidad de cientos de diseñadores. Haga su mejor esfuerzo para crear algunos de los mejores sitios en la web con la pequeña cantidad de recursos que posee junto con una gran cantidad de unidad personal para crear diseños bellamente funcionales.