Es hora de otra crítica de diseño web impresionante, donde echamos un vistazo a un sitio web real y analizamos el diseño. Señalaremos las áreas que se realizan bien además de las que podrían ser útiles. Finalmente, terminaremos pidiéndole que proporcione sus propios comentarios.
El sitio de hoy es WebAppers, un gran lugar para encontrar recursos web de código abierto. ¡Saltemos y veamos lo que pensamos!
Si desea enviar su sitio web para que aparezca en una futura crítica de diseño, solo le llevará unos minutos. Cobramos $ 49 por criticar su diseño, ¡mucho menos de lo que pagaría por un consultor para que visite su sitio! Puedes encontrar mas aqui.
Acerca de los WebAppers
? WebAppers es un blog dedicado a compartir recursos de código abierto de alta calidad para desarrolladores web y diseñadores web diariamente. Como diseñador web, encontrarás algunos de los mejores iconos gratuitos, fotos de archivo, pinceles, fuentes e inspiraciones de diseño. Como desarrollador web, también encontrarás algunos de los mejores componentes de Javascript y Ajax como ventanas modales, menús, galerías, información sobre herramientas, gráficos, complementos de calendarios y mucho más.
Aquí hay una captura de pantalla de la página de inicio:
Primera impresión
Si se está preguntando si una crítica de Design Shack vale la pena, no necesita buscar más que los clientes habituales. WebAppers fue en realidad el cliente de nuestra 14ª crítica de diseño web y han vuelto para que echemos un vistazo a su nuevo sitio de respuesta completamente rediseñado.
Mis primeros pensamientos para el nuevo diseño son muy positivos. Esta no es una actualización pequeña, han tomado el sitio en una dirección visual completamente nueva y realmente creo que es mejor para eso. El sitio antiguo tenía una apariencia de adoquinado, como si se hubieran juntado varios recursos no coincidentes. El nuevo diseño, por el contrario, es muy limpio y profesional y se presenta como un trabajo completamente personalizado. Y es sensible para arrancar!
Todavía estamos muy al principio de la evolución receptiva de la web, por lo que mi amigo se va para cualquiera que esté tomando la iniciativa de eliminar la RWD del área cómoda de la teoría y ponerla en práctica en el mundo real.
Vamos a profundizar en el diseño del sitio y ver qué funciona bien y qué podría mejorarse.
Nuevo logo
El antiguo logotipo de WebAppers tenía este tipo de atractivo de los 80. Había un gato de algún tipo, algunas formas de luces de pernos; era peculiar pero divertido
Aunque siempre encontré el logo un poco confuso. Nunca podría decir del todo si las formas de los rayos debían ser solo eso o si eran quizás una melena de león. ¿Y qué tenía todo eso que ver con los recursos web de código abierto?
El nuevo logotipo tiene un enfoque más simple, basado en texto. De hecho, me encanta lo visual de la página rizo "W", cuyo centro también sirve como "A". Es solo una idea genial que fue sacada con bastante éxito.
También me gusta que el logotipo indique claramente de qué se trata el sitio. Tan pronto como cargo la página de inicio, mis ojos se desvían hacia el logotipo y sé lo que la página me ofrece. Esto es extremadamente importante y con demasiada frecuencia en estas críticas que le digo a un diseñador lo contrario (que es difícil ver de qué se trata su sitio).
Diseño
Como mencioné anteriormente, el nuevo diseño es sensible, y con eso quiero decir que utiliza consultas de medios para hacer que el diseño fluya en varios puntos de interrupción preestablecidos. Para ser? Plenamente sensible? algunos dicen que un sitio también debe construirse en una red fluida como la que se vio en Smashing Magazine, un proyecto que sin duda inspiró este de alguna manera.
WebAppers no se adapta a cada cambio de minuto en el ancho del navegador (al menos hasta la iteración más pequeña), y para ser sincero, mientras juego con eso, creo que está bien. Sigue siendo un diseño notablemente flexible que se adapta bien a todo tipo de tamaños de pantalla diferentes, que es mucho más de lo que la mayoría de los sitios web pueden reclamar.
En la versión amplia, hay cuatro columnas primarias. De izquierda a derecha son la navegación, el contenido primario, la barra lateral de contenido secundario y la publicidad. Las dos barras laterales han sido diseñadas para parecerse a los cajones que se deslizan fuera del contenido principal, una metáfora perfecta considerando que colapsan a medida que el ancho se estrecha.
Al reducir la ventana, dejamos caer la columna de publicidad en el extremo derecho. Sin embargo, el contenido no simplemente desaparece en este punto, sino que los anuncios aparecen sobre la barra lateral derecha, empujando ese contenido hacia abajo. Esta es una solución elegante que se ve genial y aún mantiene la mayor parte del contenido original.
Hay un salto sutil después de esto que reduce ligeramente la columna de contenido principal. El contenedor se vuelve más estrecho, el tamaño del texto disminuye y las imágenes reducen su ancho. Si acortamos aún más la ventana obtenemos el cambio de diseño más significativo:
Aquí podemos ver que la tercera columna se ha eliminado por completo y que el contenido que estaba dentro se ha ocultado. Esto significa que los anuncios han desaparecido por completo (Smashing Magazine hace lo mismo) y la barra lateral que contiene el contenido popular y el campo de búsqueda también desapareció.
Mi único problema real aquí es que a partir de este punto en el sitio no parece que se pueda buscar. Estoy a favor del cambio de diseño ya que el tamaño de la pantalla cambia, pero la funcionalidad es un tema más delicado y las reducciones deben abordarse con precaución. La búsqueda parece ser una característica bastante primordial y probablemente me frustraría no poder realizar esta tarea en mi teléfono o tableta.
Finalmente, el sitio se divide en un solo diseño de columna con la navegación que ahora aparece en un sencillo menú desplegable nativo, que generalmente funciona bien en dispositivos móviles y de escritorio.
En general, creo que el diseño funciona realmente bien, y con la excepción de la funcionalidad de búsqueda, no estoy seguro de que cambiaría mucho al respecto.
Mirando detrás de la escena podemos ver que Twitter Bootstrap ayudó a este proyecto, lo cual es bueno porque la página no se parece en nada a su proyecto típico Bootstrap de copiar / pegar y demuestra que puede usar ese kit de herramientas bajo el capó sin sacrificar diseño personalizado.
Estética
Ahora que hemos discutido cómo funciona la estructura o los huesos del sitio, echemos un vistazo a la guinda en la parte superior. El sitio adopta un esquema de color en gran parte gris con sutiles toques de color aquí y allá. Hace un uso intensivo de iconos atractivos y mínimos y, por supuesto, de Helvetica como su tipo de letra principal y casi exclusivo.
Mi aspecto menos favorito de todo este sitio es la falta de contraste. Todo en la página tiene una especie de sentimiento monótono, sin nada realmente sobresaliente. Puedo ver cómo la apariencia apagada está pensada para que sea fácil para los ojos, pero es lo suficientemente suave como para que se sienta un poco tenso.
La solución para esto, en lo que a mí respecta, es tan fácil que solo implica reemplazar un solo archivo: la textura de fondo. Tomé una textura oscura de los patrones sutiles y la probé en el sitio de aplicaciones web con excelentes resultados.
El fondo oscuro agrega un contraste muy necesario al sitio y realmente resalta el contenido principal al empujarlo a la vanguardia de su atención. ¡Es increíble la gran diferencia que un pequeño pellizco puede hacer!
Otra pequeña cosa que me molesta ligeramente es el efecto de la sombra en los títulos de los artículos, que se ve en la siguiente captura de pantalla:
Por un lado, creo que es un efecto genial. Por otro lado, creo que hace que el texto sea mucho más difícil de leer. Quizás si la opacidad de la sombra se redujera simplemente sería menos distraído.
Resumen
Creo que el rediseño de WebAppers es definitivamente un éxito. El sitio es más hermoso que nunca y ha dado un gran salto hacia la agnóstico del dispositivo. Es fácil de usar, la marca es más lógica y la presentación del contenido es realmente agradable.
Mi única gran preocupación es la falta de contraste visual, una preocupación que desaparece completamente con la inclusión de un patrón de fondo más oscuro. También soy escéptico acerca de la decisión de abandonar la funcionalidad de búsqueda en las versiones más estrechas del diseño. No creo que visitar el sitio en mi iPhone deba necesariamente significar que perdí la capacidad de búsqueda.
Aparte de estas cuestiones, sin embargo, es un gran sitio. Asegúrese de pasar y darle una prueba de manejo. Creo que te va a gustar lo que ves.
¡Tu turno!
Ahora que ha leído mis comentarios, contribuya y ayude, dando al diseñador algunos consejos adicionales. Háganos saber lo que cree que es genial sobre el diseño y lo que cree que podría ser más fuerte. Como siempre, le pedimos que también sea respetuoso con el diseñador del sitio y que ofrezca consejos constructivos claros y sin insultos severos.