Crítica de diseño web # 80: el nuevo sitio de WebAppers receptivo
Es hora de otra increíble crítica de diseño web, donde echamos un vistazo a un sitio web real y analizamos el diseño. Señalaremos ambas áreas que están bien hechas, además de aquellas que podrían necesitar algo de trabajo. 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!
Explore los elementos de Envato
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 si un consultor visitara su sitio! Puedes encontrar mas aqui.
Sobre WebAppers
“WebAppers es un blog dedicado a compartir diariamente recursos de código abierto de alta calidad para desarrolladores web y diseñadores web. Como diseñador web, encontrará algunos de los mejores íconos gratuitos, fotos de archivo, pinceles, fuentes e inspiraciones de diseño. Como desarrollador web, también encontrará 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 pregunta si vale la pena una crítica de Design Shack, no necesita buscar más que los clientes habituales. WebAppers fue en realidad el cliente de nuestra decimocuarta crítica de diseño web y han regresado 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 pequeña actualización, han tomado el sitio en una dirección visual completamente nueva y realmente creo que es mejor para él. El antiguo sitio tenía un aspecto empedrado, como si se combinaran varios recursos que no coinciden. El nuevo diseño, por el contrario, es muy limpio y profesional y se presenta como una obra completamente personalizada. ¡Y es sensible al arranque!
Todavía estamos muy temprano en la evolución receptiva de la web, así que me quito el sombrero ante cualquiera que esté tomando la iniciativa de eliminar RWD del área cómoda de la teoría y ponerla en práctica en el mundo real.
Profundicemos en el diseño del sitio y veamos qué está funcionando bien y qué podría mejorarse.
Nuevo logotipo
El antiguo logotipo de WebAppers tenía este tipo de atractivo rockero de los 80. Había un gato de algún tipo, algunas formas de pernos de iluminación; fue peculiar pero divertido.
Sin embargo, siempre me pareció un poco confuso el logotipo. Nunca podría decir si las formas de los rayos debían ser solo eso o si tal vez eran una melena de león. ¿Y qué tenía que ver eso con los recursos web de código abierto?
El nuevo logotipo adopta un enfoque más simple, basado en texto. De hecho, me encanta la imagen del rizo de la página "W", cuyo centro también sirve como una "A". Es solo una idea genial que se logró 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 dirigen al logotipo y sé lo que me ofrece la página. Esto es extremadamente importante y con demasiada frecuencia en estas críticas 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 receptivo, y con eso quiero decir que usa consultas de medios para redistribuir el diseño en varios puntos de interrupción preestablecidos. Para ser "totalmente receptivo", algunos dicen que un sitio también debe construirse en una cuadrícula fluida como la que se ve en Smashing Magazine, un proyecto que sin duda inspiró a este de alguna manera.
WebAppers no se refluye a sí mismo a cada cambio 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 diferentes tamaños de pantalla, que es mucho más de lo que la mayoría de los sitios web pueden reclamar.
En la versión ancha, hay cuatro columnas principales. De izquierda a derecha son la navegación, el contenido primario, la barra lateral de contenido secundario y la publicidad. Las dos barras laterales se han diseñado para parecerse casi a los cajones que se deslizan fuera del contenido principal, una metáfora perfecta teniendo en cuenta que colapsan a medida que el ancho se estrecha.
A medida que estrechamos la ventana, colocamos la columna publicitaria en el extremo derecho. Sin embargo, el contenido no solo 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 muy bien 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 estrecha, el tamaño del texto disminuye y las imágenes reducen su ancho. Si estrechamos la ventana aún más, obtenemos el cambio de diseño más significativo:
Aquí podemos ver que la tercera columna se ha caído por completo y todo 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 ha desaparecido.
Mi único problema real aquí es que desde este punto en el sitio no parece que se pueda buscar. Estoy dispuesto a cambiar el diseño a medida que cambia el tamaño de la pantalla, pero la funcionalidad es un tema más delicado y las reducciones deben abordarse con precaución. La búsqueda parece una característica bastante principal y probablemente me frustraría no poder realizar esta tarea en mi teléfono o tableta.
Finalmente, el sitio se descompone en un diseño de columna única con la navegación que ahora aparece en un simple 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 escena, podemos ver que este proyecto fue ayudado por Twitter Bootstrap, lo cual es bueno porque la página no se parece en nada a su típico proyecto 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 formación de hielo en la parte superior. El sitio adquiere 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, 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 sensación monótona sin nada realmente sobresaliente. Puedo ver cómo la apariencia apagada está destinada a ser agradable a la vista, pero es lo suficientemente soso como para que parezca 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 Patrones sutiles y le di una prueba en el sitio WebAppers con excelentes resultados.
El fondo oscuro agrega un contraste muy necesario al sitio y realmente resalta el contenido principal al ponerlo al frente de su atención. ¡Es sorprendente cuánta diferencia puede hacer un pequeño ajuste!
Otra pequeña cosa que me molesta un poco es el efecto de 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 molesto.
Resumen
Creo que el rediseño de WebAppers es definitivamente un éxito. El sitio es más hermoso que nunca y ha dado un buen salto para ser independiente 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 por completo con la inclusión de un patrón de fondo más oscuro. También soy escéptico sobre la decisión de eliminar la funcionalidad de búsqueda en las versiones más estrechas del diseño. No creo que visitar el sitio en mi iPhone necesariamente deba significar que perdí la capacidad de buscar.
Sin embargo, aparte de estos problemas, 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, participe y ayude dando al diseñador algunos consejos adicionales. Háganos saber lo que piensa 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 un consejo constructivo claro y libre de cualquier insulto.
