Diseño interactivo

WebdesignerDepot ¡Rediseñado!

Y aquí está ... Después de demasiadas demoras, innumerables maquetas e ideas, el nuevo {$lang_domain} finalmente está aquí! Este fue un proceso de rediseño increíblemente complejo para todo el equipo de WDD, pero estamos muy orgullosos de los resultados y esperamos que lo ames tanto como a nosotros.

Ayer lanzamos el nuevo diseño y Twittersphere nos ha estado dando excelentes comentarios y ayudando a identificar algunos errores. Hemos solucionado errores durante el día anterior y todavía lo estamos haciendo, así que disculpe algunos fallos tecnológicos que aún puede enfrentar en los próximos días.

Para nosotros era importante que el nuevo diseño mantuviera el alma del sitio antiguo, por así decirlo, al tiempo que inspiraba a nuestros visitantes y los actualizaba según los estándares y las técnicas de diseño web actuales.

La nueva página de inicio, en particular, hace un mejor trabajo presentando nuevos visitantes a nuestro sitio. Notarás que la estructura de navegación e información es mucho más clara y clara ahora.

En esta publicación, veremos más detalles sobre lo nuevo y lo que sucedió detrás de las escenas para ofrecerle esta nueva versión de WDD. Entonces, ¡vamos a sumergirnos!

Si ha sido uno de nuestros 40 millones de visitantes (!) En los últimos años, notará que el diseño es, bueno, ¿cómo decirlo? Radicalmente diferente! De hecho, ninguno de los diseños antiguos se ha mantenido. Lo tiramos todo y comenzamos de cero desde cero. Esto es tan radical como se puede lograr con un rediseño y conlleva ciertos riesgos para nosotros ya que perdemos nuestros beneficios de marca anteriores a favor de lo que creemos que es una mejor opción para nuestro sitio, su contenido y lo más importante: USTEDES, nuestros increíbles lectores !

Comencemos con algunos créditos para ver quién está detrás de todo esto ...

Así que esto es lo nuevo en este diseño:

Diseño híbrido: revista y estilo de blog tradicional

Si bien el diseño anterior tenía un diseño de blog tradicional, con las últimas publicaciones siempre apareciendo en la parte superior, la versión rediseñada es un híbrido entre un estilo de revista y un diseño de blog tradicional. Encontramos que esto funciona bastante bien para nuestro contenido. El diseño más amplio nos permitió traer mucho más contenido a la página de inicio, mientras que las 2 columnas en la página de inicio hacen que sea más fácil de leer que algunos blogs de estilo de revistas tradicionales donde el contenido a veces puede ser abrumador.

Contenido destacado

Las publicaciones del blog están intercaladas por tres áreas destacadas: 2 verticales y 1 horizontal. Las áreas verticales presentan algunos de los temas más candentes en este momento en el sitio (diseño receptivo, jQuery, etc.), mientras que el área horizontal se utiliza para mostrar las últimas ofertas de nuestro sitio MightyDeals.com. En total, podemos presentar 10 publicaciones más de lo que solíamos en el diseño anterior sin abrumar a nuestros lectores.

Balance y peso

Página de inicio: debido a la gran cantidad de imágenes, tratamos de mantener un equilibrio uniforme entre el texto y las imágenes al mostrar suficiente contenido de texto de vista previa para cada publicación. Para las páginas del artículo real elegimos tener imágenes y fragmentos de código a todo lo ancho, mientras que el texto se muestra centrado en un ancho más estrecho para las imágenes. Esto hace que el sitio sea más rápido y fácil de leer (o escanear) y muestra las imágenes en sus tamaños más grandes posibles para un impacto máximo. Para las imágenes en publicaciones antiguas y otras imágenes más angostas, elegimos mostrar barras grises en el lateral, que recuerdan las barras negras que se ven al ver una definición estándar en un televisor HD. ¡Este fue el mejor compromiso que pudimos encontrar para integrar esas publicaciones antiguas en la nueva apariencia del sitio sin actualizar cientos de publicaciones!

Diseño de respuesta

El nuevo sitio ahora es totalmente receptivo y se ve muy bien ya sea que esté en una computadora de escritorio, computadora portátil, tableta o teléfono inteligente. Mira la versión del teléfono inteligente como se ve y se siente más como una aplicación que como un sitio web y estamos muy orgullosos de cómo resultó esta. ¡También se carga rápido!

Retina gráficos

Con Apple implementando más dispositivos Retina, las pantallas de mayor resolución son cada vez más relevantes para los sitios web. El nuevo WDD está publicando retina graphic siempre que sea posible. El diseño del sitio se ve perfectamente nítido en dispositivos Retina. En el futuro, tendremos gráficos retina optimizados en todas nuestras publicaciones siempre que sea posible. Es más fácil decirlo que hacerlo, ya que la web todavía no está lista para retina, de hecho, muy pocos sitios están publicando grandes gráficos de alta resolución en este momento. Algunas de nuestras últimas publicaciones ya están parcialmente listas para retina y algunas llevarán esto en el futuro. También escuchamos que los anuncios retina pueden no estar muy lejos en el futuro.

Navegación mejorada

Observará un signo más en el lado derecho de su navegador (no en dispositivos móviles) cuando vea artículos. Cuando se hace clic en, se abre un mini navegador que le permite navegar a través del artículo actual, como navegar por la tabla de contenidos de un eBook. También puede compartir el artículo actual a través del mini navegador o ver artículos relacionados, así como leer las publicaciones siguientes y anteriores.

El arte

Una vez más, colaboramos con el excelente ilustrador Radim Malinic para crear el arte de nuestro nuevo sitio. Radim es un galardonado director de arte y diseñador gráfico, con sede en Londres, Inglaterra. Bajo el nombre de Marca Nu él trabaja con marcas líderes en el hogar. Desde el diseño original de WDD, ha trabajado con Goldman Sachs, Bacardi, Blistex, London Film Museum y muchos más. Su estilo de trabajo es uno de los más diversos de la industria. Sus diseños audaces y coloridos inspiran a muchas personas que los ven. Le pedimos a Radim que centrara su diseño en los círculos esta vez, ya que esta es una forma atemporal que es extremadamente popular y preferida en los diseños de sitios web actuales.

Paralaje

La nueva imagen y el logotipo en el encabezado cobran vida con un efecto de paralaje de 5 capas (moviéndose a diferentes velocidades) en la sección del encabezado del sitio web. Para verlo, simplemente mueva el mouse alrededor del área del encabezado (no en los dispositivos móviles). ¡Creemos que se ve muy bien y agrega un elemento de diversión al sitio! [ACTUALIZACIÓN] El efecto de paralaje fue amado por la mayoría, pero a algunas personas no les gustó, por lo que agregamos la opción para desactivarlo haciendo clic con el botón derecho en el área de efecto.

Logo

Aunque el antiguo logotipo nos sirvió y nos gustó mucho, ya que se trataba de un rediseño completo, ¡un nuevo logotipo estaba en orden! Colaboramos esta vez con Steven Bonner para rediseñar nuestro logo Es un tipógrafo muy talentoso con sede en Escocia y una envidiable cartera de ilustraciones tipográficas para algunas de las marcas más importantes del mundo. Creemos que resultó excelente y equilibra bien el sitio con un toque personal dibujado a mano, mientras que se ve profesional y pulido al mismo tiempo.

Tipografía

Finalmente descartamos las antiguas fuentes del sistema aburrido a favor de las fuentes web Typekit, que se usan exclusivamente en todo el sitio. Usamos Kulturista para todos los encabezados que se ve muy bien y tiene una personalidad agradable y una sensación única. Para el texto del cuerpo que elegimos Proxima Nova que tiene excelente legibilidad y es ideal para grandes trozos de texto. Para los encabezados, también consideramos Adelle , y para el texto del cuerpo también consideramos Museo Sans, Adelle Sans , Miríada y Helvética .

Pictos Icon fuente

Usamos muchos íconos en este nuevo diseño. Los íconos son parte de lo increíble Fuente del icono Pictos diseñada por Drew Wilson . Incluso lo usamos para nuestros iconos sociales animados en la parte inferior del sitio.

Pie de página

Tenemos 2 áreas de pie de página en la parte inferior del sitio. El primero resalta algunas áreas que creemos que es importante destacar y luego tiene un pie de página de aspecto más tradicional en la parte inferior con enlaces de texto y algunos íconos sociales animados.

Integración social

Queríamos mostrar a nuestros lectores de una manera más amplia, por lo que el nuevo WDD es mucho más social que antes. Ahora mostramos sus comentarios y retweets justo debajo de cada publicación en la página de inicio. Entonces, si quieres un poco de fama, ¡ahora puedes obtener tu avatar allí para que todo el mundo lo vea! Bueno, eso es un poco exagerado!

Menos anuncios

De acuerdo, algunas buenas y algunas malas noticias. Algunos de nuestros anuncios se hicieron más grandes, pero también redujimos la cantidad de anuncios que se publican en el sitio. Admitimos que a lo largo de los años nuestro sitio se ablandó un poco con los anuncios, por lo que esta fue una gran oportunidad para limpiar las cosas. Esto ha hecho que el diseño sea más limpio y estéticamente más agradable de navegar, al mismo tiempo que puede pagar la renta, no se olvide de apoyar a nuestros amables patrocinadores :)

Depot.ly

Este es en realidad un par de semanas: comenzamos a utilizar la URL breve de depósito para nuestros tweets, para que pueda reconocer nuestras publicaciones en los canales sociales que utiliza. ¡Bastante útil, pensamos!

Más contenido

Como habrás notado, recientemente comenzamos a publicar más artículos cada día. A pesar de que las publicaciones editoriales han sido y continúan siendo la esencia de nuestro contenido, ahora también cubrimos noticias relevantes y mini publicaciones que serán una buena opción para los diseñadores y desarrolladores que visitan nuestro sitio. Creemos que esto mantiene al sitio más actualizado y en contacto con lo que está sucediendo en el mundo en este momento sin recurrir a editoriales completas para cada publicación.

Nos encontramos con muchos problemas para que este diseño funcione en todos los navegadores y dispositivos (¡y todavía funciona!). De hecho, esta fue la causa de algunos de los retrasos de último momento que experimentamos. Estábamos destinados a lanzar la semana pasada, pero muchos problemas con los navegadores nos ralentizaron. ¡Lo siento por eso! Firefox fue particularmente desafiante, pero IE 8 resultó ser el peor y la causa de muchos dolores de cabeza y frustraciones para nuestros codificadores. Desde nuestro lanzamiento ayer, hemos recibido mucha información adicional a través de Twitter sobre problemas que aún deben resolverse. Gracias por su paciencia mientras nos dirigimos a estos.

Lo que ves hoy es el nuevo diseño, pero eso no es todo. Estamos planeando agregar algunas cosas nuevas pronto. Aprenderá más sobre esto en las próximas semanas.

Todos amamos personalmente el nuevo diseño y esperamos que siga evolucionando según sus comentarios. Realmente apreciaremos si aún nos puede dejar saber algo que le gustaría que mejoremos. Además, avísenos si encuentra problemas de compatibilidad con el navegador o problemas en cualquier dispositivo móvil en particular que utilice para que podamos solucionarlos rápidamente.

Como siempre, estamos profundamente e inmensamente agradecidos a todos ustedes por apoyar WDD durante todos estos años. De todo el equipo aquí en WDD, muchas gracias a cada uno de ustedes y esperamos que este nuevo diseño lo inspire y lo sirva bien mientras navega por nuestro sitio.

¿Qué piensas del nuevo rediseño de WDD? ¡Recibimos tus comentarios!

diseño de respuesta diseño web rediseñar wdd retina gráficos webdesignerdepot