Share
En este post, les mostraré un conjunto de veinte maquetas de pantalla para un proyecto del mundo real en el que he estado trabajando: el próximo rediseño y relanzamiento de nuestra galería de diseño e inspiración FaveUp. Explicaré algunos de los por qué y cómo se incluyó en el diseño, cómo utilizo los simulacros de diseño para especificar una aplicación web, así como algunas notas generales sobre el diseño. El nuevo sitio que llamamos Creattica Inspire ahora está siendo desarrollado por nuestro equipo de desarrollo de Melbourne y llegará a los tubos de interweb como uno de nuestros primeros lanzamientos de 2009..
Esta publicación es el día 6 de nuestra sesión de diseño web. Sesiones creativas "Session Day 5Session Day 7"Creattica Inspire es en realidad una reconstrucción de un sitio existente que ejecutamos llamado FaveUp, que es una galería de logotipos, tarjetas de visita y sitios web. Para ser honesto, FaveUp es un sitio que tiene éxito a pesar de sí mismo. Un contratista externo lo construyó hace un año y, en realidad, no está muy bien organizado: cualquiera que lo haya enviado al sitio sabrá que está bastante lleno de errores. En cuanto al diseño, también tiene algunos problemas reales: un "logotipo" extraño, una interfaz que no funciona bien en algunas páginas, un sistema de calificación estúpido que puedes engañar con mucha facilidad, y quizás lo peor de todo es bastante feo. En general, es lo que me gusta llamar "una enorme pila de vagabundos".
No obstante, el sitio tiene algunas cosas que parecen funcionar bien en el sitio, la principal es que tiene un enfoque muy fuerte en el contenido. Cuando te desplazas hacia abajo en una página, obtienes diseño tras diseño, y no mucho más. Es simple y claro, y eso cuenta mucho para hacer que un sitio sea utilizable. Así es como se ve el sitio actual de FaveUp:
Así que estamos prácticamente reconstruyendo el sistema desde cero e importando todo el contenido antiguo. El nuevo sitio se ubicará en inspire.creattica.com y formará parte del conjunto de sitios y servicios creativos que estamos construyendo en Creattica.com. Hace algunas semanas, comencé a rediseñar FaveUp y al mismo tiempo diseñé un aspecto para Creattica. El resultado final son estas maquetas que voy a discutir:
Las pantallas son un conjunto de maquetas integradas en HTML que están destinadas a representar todas las pantallas clave del sitio. El desarrollador de este proyecto, Erin, ahora los está fusionando en el código base y luego los actualizaremos y modificaremos en el producto final..
Entonces, lo que he hecho a continuación es usar este diseño como una forma de hablar sobre mis propios procesos y pensamientos personales, ligados a un proyecto del mundo real. Espero que encuentres las notas útiles!
Rediseñar un sitio puede ser un proceso difícil porque tiene que lidiar con el peso de la expectativa, la resistencia de los usuarios a cambiar y el espectro siempre presente de que podría estar dando un paso atrás. En mi experiencia, el truco para un rediseño exitoso es preservar la sensación general de un sitio y capturar algunos de los distintivos del diseño antiguo en el nuevo.
Al mantener esa sensación, se asegura de que haya una continuidad en el sitio y los usuarios se sientan familiarizados con el nuevo sitio. Sin embargo, preservar la sensación de un sitio no tiene por qué significar que el nuevo sitio debe tener el mismo aspecto. ¡Esta transición de FaveUp a Creattica Inspire es bastante diferente! Sin embargo, hay una serie de cosas que lo mantienen relacionado:
Ahora, por supuesto, puede rediseñar y cambiar totalmente el diseño de los elementos de la página, revisar las páginas clave del sitio o pasar a un nuevo estilo de diseño. Sin embargo, para un rediseño exitoso, creo que no puede hacerlo todo de una vez. Si va a mover los elementos de la página, debe mantener el diseño y verse muy similar. Si va a cambiar totalmente el diseño, al menos la posición debe ser muy parecida..
Si no mantienes algunas cosas iguales, perderás toda continuidad y es casi como lanzar un sitio desde cero. Hay ocasiones en que esto es necesario (ak, el antiguo sitio apestó) pero en la mayoría de los casos en que un sitio es popular, es mejor mantener algo de continuidad.
El diseñador de Ace UX, Cennydd Bowles, tiene un interesante artículo sobre cómo reaccionan los usuarios a los rediseños, donde menciona las cinco etapas de la reacción del usuario: negación, enojo, negociación, depresión, aceptación..
Un sitio que he rediseñado tres veces es Psdtuts +. Si observa la imagen de abajo, donde puede ver los cuatro diseños, uno tras otro, verá que fue así:
En cada paso, algo cambió bastante significativamente (excepto tal vez el último paso), pero igualmente algunas cosas permanecieron igual. Cuando pasamos del sitio HTML simple a un blog de WordPress, la combinación de colores y los elementos de diseño se mantuvieron igual. Cuando pasamos del diseño marrón de WordPress al blanco, la ubicación de todo siguió siendo la misma. Por cierto, este fue el paso más controvertido :-)
Cuando diseñas un sitio importante, debes dedicar un tiempo a pensar en la construcción, pero esto es particularmente cierto con un rediseño. Debido a que tenemos un conjunto de datos bastante grande para preservar (todos los envíos de usuarios) es muy importante averiguar cómo migrará al nuevo diseño de la manera más simple posible..
Para FaveUp> Creattica Inspire, una de las grandes consideraciones es que estamos pasando de tener una sola imagen por diseño, a tener dos, una lista y una detallada. En la página detallada puede ver cómo he tratado de no tener una imagen grande (un centro simple con un fondo oscuro funciona).
Un buen diseño web debe guiar a los ojos del espectador a través de la pantalla. Esto se puede hacer porque los diferentes elementos de la página pueden tener una prioridad visual diferente según su tamaño, forma, color y posición. A continuación hay un par de pantallas donde he intentado mostrar el camino que estoy esperando el ojo de un espectador tomará ...
Andy Rutledge tiene un artículo fantástico sobre cómo guiar el ojo de un espectador por la pantalla con ejemplos asombrosos. Léelo aquí: Diseñando una visita guiada.
Diseñar un sitio rico en información es muy diferente a trabajar en un sitio ligero. Cuando no hay mucho contenido, puede volverse loco con su diseño y, hasta cierto punto, dejar que el diseño domine el contenido, y eso está bien. Un buen ejemplo de un sitio ligero es un portafolio personal en el que incluso un aspecto con un gran diseño (por ejemplo, consulte Design Design Disease) todavía funciona bien y el sitio es fácil de entender y entender..
Un sitio de contenido pesado, por otro lado, es un hervidor de peces diferente. Como regla general, cuanto más contenido e información en una página, más discreto debe ser su diseño. La razón de esto es que con una gran cantidad de contenido en una página, un diseño completo se interpondrá y confundirá al espectador. Es difícil digerir mucha información a la vez, y al agregar un diseño muy pesado a la mezcla, se corre el riesgo de abrumar a la gente.
Una segunda razón igualmente importante para volver a aplicar el tono al diseño es mantener el enfoque en el contenido en sí. En el sitio de Inspire, los espectadores deben mirar una galería de diseño. Si el diseño de la galería en sí es realmente estilizado y agresivo, restará valor al contenido y debilitará todo el sitio. Por eso, si vas a una galería de arte, todo lo que ves son paredes blancas, ¿te imaginas si tuvieran papel tapiz y luces ornamentales en todas partes??
Los sitios más cargados de contenido, por supuesto, son los sitios de noticias y portales. Si te fijas en el Washington Post, MSN, Yahoo, NY, encontrarás el diseño en todos ellos, y es a menudo relativamente simple..
Aunque un sitio rico en información no requiere imágenes pesadas, todavía hay mucho trabajo por hacer. Cuando esté trabajando en este tipo de sitio, tendrá que trabajar mucho más para asegurarse de que su interfaz sea súper limpia y utilizable. En el sitio de Inspire, he intentado mantener la navegación muy clara, hacer uso de mucho espacio y usar capas de negro, rojo, gris y blanco para delimitar diferentes secciones de la interfaz..
Una cosa que hacemos mucho en Envato es crear familias de sitios web. Tenemos la familia TUTS, Marketplaces, y ahora estamos trabajando en esta familia de sitios Creattica. Esto me ha dado mucha experiencia en la creación de diseños que se pueden reutilizar en varios sitios para crear una apariencia unificada. Aquí hay algunas cosas que he aprendido:
Cuando lanzamos el primer subsitio de Creattica hace un par de meses - Creattica Daily - Tontamente no planifiqué adelante. En su lugar, solo diseñé un diseño de blog limpio y lancé el sitio sin pensar en lo que haría por los otros sitios. Bueno, como se puede ver en este aspecto de Creattica Inspire, he tenido que empezar de cero otra vez. El aspecto antiguo ya está a la venta en ThemeForest como un tema de WordPress, por lo que no es un desperdicio total, pero aún así vale la pena pensar en el futuro y diseñar un aspecto que se adapte a varios sitios..
Para que un solo diseño funcione en unos pocos subsitios se requiere al menos un elemento de marca secundaria. En Creattica y TUTS es color, en Marketplaces es una combinación de color y logotipo / tema animal. Lo que elijas, tiene que haber algo para diferenciar los sitios cuando cambias entre ellos..
Mantener una familia de sitios es mucho trabajo, por lo que vale la pena hacer que la mayor parte del diseño sea coherente. Esto no solo significa que los usuarios se familiaricen mucho con la sensación de los sitios, sino que a nivel práctico también significa que no tiene que hacer mucho trabajo!
Antes de comenzar un proyecto como este, siempre me tomo un tiempo para navegar. Además de hacer que mi trabajo sea mucho más placentero, generalmente tengo dos objetivos en mente:
Entonces, ¿cuál es la inspiración detrás de Creattica Inspire? Es un pequeño sitio llamado CNN! Estaba viendo la CNN y cómo gestionaban una cantidad tan grande de información y tantos subsitios, y decidí que me gustaban dos cosas sobre el sitio: el diseño general y la idea de cuadros blancos sobre un fondo gris claro..
¿Los dos diseños se ven iguales? Realmente no. ¿Puedes ver el parecido ahora que lo he señalado? Probablemente, ¡especialmente porque ambos usan el rojo! ¿Es esto algo malo de hacer? No estoy seguro. Creo que es falso pretender que estoy trabajando en un vacío y de alguna manera estoy inventando nuevas ideas..
Supongo que mi opinión es que está bien inspirarse en otros diseñadores; de hecho, creo que es imposible no hacerlo. No está bien copiar directamente los diseños. Por lo tanto, si te inspiras en otro diseño, es esencial darle tu propio toque e interpretación y dejar que se desarrolle hasta el punto en que tenga poca semejanza..
¿Cual es tu opinion? ¿Está bien la inspiración? ¿Cuándo cae en la imitación? Es mi ejemplo demasiado lejos o bien?
Un proyecto como Creattica Inspire es interesante porque implica mucho más que simplemente crear un sitio HTML o incluso personalizar un producto CMS como WordPress. Es lo suficientemente grande como para involucrar algunos problemas de desarrollo, niveles de acceso múltiple y una variedad de características. Éstos son algunos de mis pensamientos sobre el trabajo en una aplicación web:
En proyectos grandes como Inspire o FlashDen, no tiene sentido tratar de pensar en cada una de las pantallas que están o estarán en el sitio. Confíe en mí cuando diga que hay páginas que de alguna manera se pasarán por alto, o nuevas características que nadie ha pensado aún y que deberán incorporarse al diseño más adelante en su vida..
Un plan mucho mejor es diseñar una estructura de tipo flexible y modular. El diseño de Inspire se realiza de tal manera que una nueva página se puede construir fácilmente al juntar algunas de esas cajas blancas, agregar un nuevo elemento de menú o submenú y usar elementos de diseño estándar como mini listas de galerías o cajas de comentarios de usuarios. Es posible que se necesite más diseño en el futuro, pero ciertamente crear una página o función nueva no va a romper el diseño!
Casi cualquier aplicación web implicará algún tipo de administración. En el caso de Inspire, necesitamos poder aprobar nuevos diseños, editar elementos, etc. En los viejos tiempos, solía diseñar siempre un área de administración especial para funciones como esta, algo así como WordPress tiene ese panel de control de WP-Admin. Aunque en algunos casos es una buena idea tener un área de administración, en muchas situaciones es mejor utilizar la administración en línea..
La administración en línea significa trabajar en una funcionalidad adicional en el diseño de front-end regular que solo aparece cuando el usuario es un administrador. Por ejemplo, en Inspire, cuando un usuario es un administrador, obtendrá un par de funciones adicionales en las páginas normales. Por ejemplo, pueden buscar en el sitio como una persona normal y luego editar los elementos que encuentren.
La razón por la cual la administración en línea es preferible aquí es que ya estamos construyendo un conjunto de formas para navegar por el sitio, como la búsqueda y el etiquetado, así como una excelente manera de ver el contenido del sitio, así que ¿por qué rediseñar y reconstruir todo eso nuevamente en un administrador? zona. Con la administración en línea, un usuario puede enviarle un enlace a un elemento y, en lugar de volver a invocarlo en el área de administración, puede editarlo directamente en una página..
En algunos trabajos, se desempeñará como diseñador web y administrador de proyectos. En mi caso, se debe a mi trabajo en Envato, pero incluso en el trabajo con clientes habituales, es posible que esté encargando y desarrollando un proyecto en nombre de su cliente. En situaciones como estas, deberá informar al desarrollador o al equipo de desarrolladores para construir el proyecto en el que está trabajando..
Hay varias formas de informar y trabajar con un desarrollador en un proyecto. Muchos de ellos dependen del tamaño y alcance de un proyecto. Para un proyecto pequeño como este, esto es lo que yo hacer:
Además, desde el punto de vista del diseño web, estas 20 pantallas tienen en cuenta casi todos los tipos principales de diseño del sitio.
Tiendo a pensar que los diseños reales ilustran la funcionalidad mejor que los wireframes, pero eso es bastante discutible.
Teóricamente, puede especificar un proyecto completo usando escenarios de usuario y hay mucha literatura en software y desarrollo web al respecto. Recomiendo leer el diseño de la interfaz de usuario de JoelOnSoftware para programadores, incluso si usted es un diseñador y no un programador.!
El punto de estos pasos es este:
Ese es mi proceso aproximado para informar a un desarrollador. ¿Qué haces? Y si usted es un desarrollador, ¿hay algo que debería estar haciendo mejor??
Para obtener un tratamiento más exhaustivo de informar a un desarrollador, le recomendamos que consulte Cómo crear una aplicación web en ReadWriteWeb. También puede hablar con su propio equipo de desarrollo para ver qué necesitan y desean..
Creo que la razón por la que el diseño web es un trabajo tan impresionante es porque hay muchas facetas diferentes en el trabajo. En este artículo, he tratado de mostrar cómo un solo trabajo de diseño de sitios web puede involucrar todo tipo de habilidades y problemas, desde la inspiración del diseño hasta el trabajo con los desarrolladores, desde la satisfacción de los usuarios en un rediseño hasta la planificación de cómo se administrará un sitio. Claro que es un reto, pero eso es lo que lo hace tan bueno.!
En cuanto a Creattica Inspire, deberíamos ver su debut a principios de 2009 (¡no puedo creer que estemos a la vuelta de la esquina!) Y escuchará sobre el lanzamiento aquí mismo, en Psdtuts.+!
Esta publicación es el día 6 de nuestra sesión de diseño web. Sesiones creativas "Session Day 5Session Day 7"
Accentsconagua