Prototipo, diseño y maquetación del sitio web

En este hilo iremos compartiendo:

  • Evolución del prototipo y mockpus.
  • Pantallas gráficas que vayan componiendo el sitio web, los personajes y la iconografía general de la campaña.
  • Opiniones y comentarios sobre el diseño, la estructura y la maquetación general del sitio web.
1 me gusta

Hola,

como dije a @bernimel, estoy disponible para echar un cable. No para hacer todo el desarrollo, pero sí para poner ideas de cómo hacerlo, revisar PR y demás.

Un saludo

1 me gusta

Hola a todos! Aquí se reúne el mejor equipo del mundo!
Un placer contar con todos, vamos a hacer un frontal que sacuda los cimientos del mundo!

Para poder estar alineados en la parte de diseño, minimizar los problemas que puedan surgirnos y cualquier inconveniente, he pensado en algunas indicaciones, si os parece bien:

Tesa, por tu parte, estaría genial que nos dijeras si utilizas algun framework en CSS como Bootstrap, Foundation, Pure, etc. Eso nos permitirá trabajar con los archivos correctos en Photoshop y cuadrar todos (o casi) los píxeles, a la hora de crear columnas y ajustar :smile:

  • También Tesa, cualquier ayuda en interactividad (animaciones, sobre todo) que esté en tu alcance para incluir en la web y que quieras proponer, son más que bienvenidas!

  • Juan, ahora que somos compis :smiley: debemos buscar tanto una línea gráfica para generar los personajes, como una más enfocada al look de la web y, he creado un tablero en [Pinterest][1] y compartir ahí todo lo que nos inspire. por supuesto, el resto estáis más que invitados!

Un gran abrazo a todos, encantado de ser uno de los vuestros! Allá vamos! :relaxed:
[1]: https://es.pinterest.com/serranoperpina/hello/

1 me gusta

Hola,

En este enlace tenéis la guía de estilo de las marcas de Mozilla. En este la guía de Mozilla Hispano. Y en este otro tenéis la página oficial de Firefox Hello. Si queréis algún material gráfico oficial que no esté en esas páginas por favor comentadmelo y lo solicitamos a Mozilla.

Por si os inspira a los diseñadores, comparto qué es lo creo que tiene que transmitir la gráfica que hagamos en este proyecto:

  • Los colores que usemos tendrían casi que abrazar al usuario. Nada de estridencias. Tiene que ser un sitio en el que el usuario se sienta a gusto. Cercano. Y si es posible, alegre. La idea es que la campaña genere entretenimiento. Y esto es un juego, debe ser divertido.
  • Del mismo modo me pasaría con las estructuras y las animaciones. No veo muchos picos, ni formas poliédricas. Veo más bien líneas y estilos redondeados. No hay saltos de página rápidos al clic, los movimientos son suaves.
  • Con respecto a los personajes, me rondan por la cabeza algunas ideas: una es el hiperrealismo. Personajes que sean prácticamente humanos. No sé cómo añadir imágenes al tablero, lo siento. Os dejo un enlace a modo de referencia. Së que esto es demasiado. Algo como esto sería otra fórmula que quizás sería menos ambiciosa, pero que aportaría credibilidad. Otra idea que me gusta mucho es que sean animaciones, como por ejemplo en los iconos de Hearthstone, que se mueve el fondo y algún elemento. Siempre midiendo el rendimiento del site, claro. Otra referencia podría ser esta, aunque no sé si es un poco infantil.

Poco más. ¡Seguimos!

Genial punto de vista Berni, mil gracias por la inspiración! :blush:

  • Primero que todo disculpas, ha sido un fallo mio no daros acceso al Pinterest, pero primero necesitaba vuestros usuarios. Si me los podéis facilitar mucho mejor (Berni, ya te he dado acceso)

  • Respecto a la forma redondeada, es más fácil para conseguir cercanía y alejarnos de lo sofisticado, Hello en cierto modo es un icono “abrazable” y por lo que ese ve, intenta respirar de ese estilo. Podemos dirigirlo hacia las ilustraciones también!

  • Respecto al hiperrealismo, es actualmente un estilo arriesgado, sobre todo para alcanzar un público tan amplio. Las lineas de estilo actuales que se suelen adaptar, tienden más a la abstracción y al impacto con colores y formas, antes que a lo completamente humano o esquehuomórfico. Un viaje por Behance puede que nos ayude a darnos con el bloque que buscamos. Un ejemplo de la línea que tengo en mente sería esto también el segundo ejemplo de Berni me parece un punto de partida sólido, que quizás nos daría apoyo en ilustraciones.

  • También es una línea en la que soy mucho más práctico y quizás me desenvuelva mejor, pero estoy hablando por mi. Me encantaría que Juan pudiera aportar más al respecto y conocer su punto de vista y habilidad. Seguro que como ilustrador está a años luz de mi :smile:

Es maravilloso. A mi me encanta.

Hola a todos!

Acabo de actualizar los wireframes con las últimas indicaciones, está todo actualizado en este link de Drive. :smile:

Para la presentación y desarrollo, Berni, tendremos que detallar las páginas una a una, con toda la funcionalidad que tienen, verdad? Cómo lo hacemos, un documento conjunto donde vamos anotando por cada pantalla?

Un abrazo!

Quizás lo más sencillo es usar InVision y meter todos los detalles de funcionalidad como comentarios. ¿Qué te parece? Además, tendremos una sesión específica con los desarrolladores para verlo conjuntamente.

Me han gustado los diseños, no tengo ninguna sugerencia adicional.

1 me gusta

Hola,

Mañana miércoles, a las 20:00 UTC, tendremos la primera reunión con el equipo de desarrollo para revisar los wireframes, empezar a hablar de las funcionalidades que necesitará la web de campaña y coordinar las distintas tareas y plazos.

La reunión ya está documentada en la wiki.

Hola! por fin puedo conectarme y echar un vistazo a los avances que vais haciendo.
Había pensado echar mano de Boostrap si os parece bien, creo que es bastante flexible y rápido, además de que responde bastante bien a diferentes resoluciones/dispositivos.

Si os va bien, voy adelante con ello!

Un abrazo a todos

Yo escucharé la grabación, hoy no puedo asistir. Un abrazo!

Tesa por mi parte genial, y que yo sepa, los chicos también tienen experiencia con Bootstrap así que comunicarse no será un problema
. Lo tenemos en cuenta a la hora de proporcionar el diseño.

Un gran abrazo! :smile:

1 me gusta

Hola,
Ya está subido el audio completo de la reunión a la página y he creado un hilo específico para toda la conversación sobre desarrollo.

1 me gusta

Ayer me enteré de que Mozilla está cambiando su imagen de marca. No creo que nos afecte mucho, pero quizás hay algún logo que cambia o se actualiza, o la fuente, … Lo vamos viendo sobre la marcha.

Perfecto!! no soy la gran experta en Bootstrap ni mucho menos pero creo que me defiendo bastante bien. Es bueno compartir información, así que genial :relaxed:

Vaya! y no se ha “filtrado” por algún sitio cómo será ese cambio de marca? :innocent:

jajaja, no mucho. De todas formas, no nos debería afectar demasiado ya que esto es una campaña comunitaria. No es que necesitemos validación por su parte, solo que lo vean y les parezca bien. Si acaso, podrán decirnos alguna cosa de uso de sus logos, branding, etc…

Yo seguiría las publicaciones en https://blog.mozilla.org/creative/ ahí puedes ver algunos cambios que se estaban moviendo a finales del año pasado

2 me gusta

Muchas gracias @nukeador! Hay muchas cosas interesantes