Maquetación de la Home

Abro este hilo para que comentemos las capturas que os pasaré de la Home, Login y Sobre Nosotros. Las iré subiendo a medida que las tenga muy avanzadas.
La maquetación está basada en los SVG que me dejó @adriagm en esta conversación.

2 Me gusta

Hej hej @gutz :smiley: quin currasuu!!! :clap: :clap: :clap:

Aquí comentaris, molts petits detalls:

Home

  • Distancia entre paraules Twitter i github sembla ser menor que la que proposavem
  • Textos del footer semblen estar en regular, a la proposta estan en medium.
  • El text en general del footer sembla estar més amunt del que es proposavem ( que floti a 50 px)
  • La T de Terminos del servicio esta en minúscula
  • A la barra superior proposeu que hi hagi ‘sobre timeoverflow’ enlloc de ‘ajuda’. Bona idea!, pero llavors mouria el ‘ajuda’ que proposavem a abaix a l’esquerra enlloc de repetir ‘sobre time overflow’. Aquest ‘ajuda’ pot ser ‘ajuda’ o ‘contacte’ns’, i sigui quina sigui la paraula podria dirigir a un pop up de mailto: a info time overflow.
  • La tipo del logo Timovwerflow proposavem 30 semibold. No m’ho sembla que sigui així?
  • La dels altres elements de la barra proposavem 20 medium. No ho sembla tampoc, si podeu confirmar?
  • Entenc que el dropdown menu no s’ha volgut fer com es proposa per simplificar codi, that’s fine.
  • La tipo del subheading, ‘hay un banco…’ proposavem medium i sembla regular.

Login

  • els icones que proposavem son els oberts de google icons -https://material.io/icons/ no semblen els que heu fet servir.
  • Respecte a les (potser massa) opcions de contrasenya es podria entendre que:

a ‘No recordo la contrasenya’ - l’usuari vol crear una nova contrasenya
a ‘Encara no tinc contrasenya’ - l’usuari vol crear una nova contrasenya
a ‘Enviar correu de confirmació’ - l’usuari vol entrar amb la seva contrasenya pero no pot, per tant ha de crear una nova contrasenya
a ‘Enviar correu de desbloqueig’ - l’usuari vol entrar amb la seva contrasenya per no pot, per tant ha de crear una nova contrasenya

Per tant, proposaria que només hi hagi un boto de ‘crear nova contrasenya’. Veure nou pdf i svg amb proposta al attachement.

  • El recuardre de checkbox de ‘recorda’m’ que proposem no te ombres, només taca de color.
  • El boto de entra, com el de la home, te un radi de 3px en la proposta, diria que aqui es sense arrodoniment.

About

  • no es redisseny, pero incorporant el que deieu de que la abuela o vegi més viu, podriem afegir una imatge de fons al call to action, i cambiar el fons gris per un de blanc

Resset password fly

  • hem creat la pagina que veu comentar de resetear contrasenya. Enlloc de ferne una, aprofitar la mosca.
  • intencionalment, seguint la linia d’abans la idea es que l’usuari només envia un correu sigui quin sigui el problema que tingui.

register

  • com que tecnicament no es poden registrar, igualment si que ho deixaria a la mosca de log in per si hi ha algú que arriba rebotat d’algun lloc i vol sumar-shi tingui una via de fer-ho. Simplement es repetir el que ja es diu al ‘sobre tof’ redirigintlo al mapa de bconline

Aquí els pdfs i svg

Hola @adriagm

Respecto los links, el problema es que cada cosa son estados diferentes:

  • No recuerdo mi contraseña o aún no la tengo Es para si olvidas la contraseña o si te han creado el usuario en TO pero aún nunca has entrado
  • Volver a enviar correo de confirmación Te pide confirmación en caso de que cambies el mail, entonces debes confirmar el nuevo para que el cambio sea efectivo
  • Enviar correo de desbloqueo El bloqueo ocurre cuando te equivocas en el login más de 5 veces, tu cuenta se bloquea y tienes que ir a desbloquear

Lo que se podría hacer es que si sale un alert de “tu cuenta esta bloqueada” o debes “confirmar tu cuenta” y no te deja entrar por eso, en el mismo error salga el enlace de donde puedes realizar la acción y que sea la misma página donde te llevan los links actuales, pero ya no haria falta mostrarlos en el login, que te parece @enricostn creo una tarea para hacer esto?

Hola @adria,

Felicidades también por vuestra propuesta y por vuestro trabajo :clap::clap::clap:.
Perdón por los fallos de tipología y demás. He tenido problemas con el svg y no lo estaba viendo bien. Esta última vez me has pasado los pdfs, fantástico, así podré verificar el acabado final.

Creo que ahora se parece más a vuestra propuesta:

De la home he corregido:

Ampliado distancia Twitter Github
He cambiado todos los textos a medium, menos el logo que está en semi-bold y la frase central a bold.
El texto del footer a 50px de separación
Términos del servicio en mayúscula la primera
Creado enlace ayuda con mailto en footer
El dropdown del idioma con el icono de Google y con el border

@sseerrggii,

¿esto que comentas afecta al diseño que ha pasado @adriagm?

En principio no, el diseño que ha mandado para cambiar tu password puede servir para las 3 acciones (con diferentes textos)

Lo único que para poder quitar los 3 enlaces del login y solo dejar uno, se deberían moner los enlaces a las otras dos opciones en caso de que te aparezca el error concreto de que necesitas confirmar el mail o de que tu cuenta está bloqueada, este cambio se tendría que hacer a la vez, o si no dejar los 3 links por ahora y luego hacer esta tarea de cambiarlos y ponerlos en los mensajes de errors @enricostn?

Yo voto por esta opcion ya que customizar vistas y errores de devise (la libraria que usamos en TO para gestionar login/signup) es algo que siempre cuesta bastante.

Entonces mi propuesta es dejarlo igual de momento y abrir otra tarea para ver como mejorar este tema.

Mas info sobre como customizar los errores de devise:

https://github.com/plataformatec/devise/wiki/Override-devise_error_messages!-for-views
http://stackoverflow.com/questions/4101641/rails-devise-handling-devise-error-messages

1 me gusta

Hola hola equipasu!

@gutz sii, super bé! Quedo atent a les altres coses!

i guay @sseerrggii i @enricostn ja m’imagino que la logica de com esta montat tot no ho deixa, simplement apretava per fer net, però veig que és millor per la propoera iteració

2 Me gusta

Hola nois!!

@adriagm, creo que no hemos tenido en cuenta la estética de los alerts que aparecen a la hora del rediseño.

Please, ¿me lo puedes confirmar?

Aprovecho para enseñaros la pantalla Login finalizada:

O envío también la pantalla de Creación de nueva contraseña. @adriagm, al final he tenido que hacer un poco más ancho el form por temas técnicos (Bootstrap) ¿Es un inconveniente?

Como ha comentado @enricostn, los enlaces del Login, de momento, no se tocarán:

Para cada uno de los links te llevará a los siguientes formularios:

Por favor, validadme que los textos estén correctos.

Hola, hola!!

Ya tengo lista la última de las páginas que había que maquetar… por fiiiiinnnn!! :smiley_cat:

@adriagm, solo me falta que me paséis la foto definitiva que irá.

1 me gusta

holans holaaans equipo!

Igual que les anteriors, yeah @gutz

Aquí alguns detalls sobre l’iteració respecte al que proposavem:

La ultima pagina:

  • no ho habia aclarit al wireframe, pero en termes de text, perque s’entengui millor podriem posar ‘por y para’, i a la seguent linia ‘los bancos del tiempo’
  • en variis llocs (a la area gris on estan els check points, als botó de idioma) els rectangles acaben en perpendicular, la proposta proposava cantos arrodonits a 3 px.
  • en la caixa de text superior, la distancia del text que funciona de titol, ‘gestion de banco de tiempo…’ i ‘red social’… si mires el svg veuras que son de mes píxels que la resta per la part de dalt. Es proposa aixi per ajudar a separar els blocs i a la legibilitat
  • es proposava un guió llarg — enlloc d’un normal - al text de ‘ver mapa’
  • la imatge es proposava que agafés tot l’ample, i amb la capa de gris o enfosquida (recordo que veu dir que ja ho mirarieu de fer a traves de codi)

i

Respecte el login:

  • Molt bona observació amb lo del missatge d’error! Que us semblaria baixar tot el login dialoge uns pixels i que hi hagi la mateixa distancia que hi ha del dialeg d’error a la barra superior?
  • a login tambe, es prosava que la distancia del checkbox de recuerdame i el boto login sigui la mateixa que del checkbox a password,
  • sobre els dialegs de recuperar contrasenya i demes, son petites diferencies, pero les distancies entre elements son diferents del que proposavem, ho he mirat i per exemple entre entre caixes de usuario i contrasenya son 28px, i del boto al final del rectangle 39px.

Esto es todo, seguim buscant imatges, quan ho tinguem les passem.

Perdoneu si sembla tot molt detallista, però el diablo esta en los detalles :slight_smile:

Som-hi!

1 me gusta

Hola nois!

@adriagm, don’t worry, intentaré ajustarme al máximo a los wireframes que me pases. Perdóname tu a mi si me dejo algo. Temas que ya están corregidos:

  • salto línea por y para
  • bordes redondeados
  • distancia texto titulos
  • guión largo

En cuanto al resto de temas pendientes:

  • Imagen que ocupe todo el ancho. Tal y como está hecha la web ahora no se puede hacer. Cuando se haga el restiling de la web completa se podrá contemplar este tema. En cuando a oscurecerla, esto es sencillo hacerlo cuando se trata de un fondo de imagen web. En este caso se trata de una imagen que está en medio de la pantalla. Mejor si nos la podéis pasar ya oscurecida.
  • Distancias: tenemos que sentarnos juntos y coordinarnos para ajustar estos tamaños. Con el Inkscape me salen otras medidas distintas a las que me comentas. Podemos hacer un Hangout? Cuándo os va bien?
  • Mensaje de error: no acabo de entender bien bien lo que quieres decir. Lo hablamos también en el Hangout.

Saludos!!

1 me gusta

Hola @gutz !! Está muy bien, lo he probado en local, te comento algunos temas a mejorar:

  • que los links github y twitter sean en pestaña nueva
  • Al hacer login, el boton del ojo para ver la contraseña no funciona
  • Al hacer login, el check de “recuerdame” no se ve apenas
  • Dentro del sistema el select de idioma me sale el texto más abajo que el resto
  • Si entro como admin me sale el menú en dos lineas, si no cabe lo que se podría hacer es poner informes y estadísticas dentro de “Administrar”

También cuando estoy dentro del sistema, si le doy al logo puedo ir a la home y antes no se podía.

Merci por el feedback @sseerrggii.
Vamos por feina:

  • Lo de los links hecho!

  • Lo del ojo también!

  • Lo del check me he basado en el diseño de Holon. Lo cierto es que se ve poco. A mi se me ve así:

  • Lo del select de idioma no entiendo bien lo que quieres decir. Puedes pasar una captura?

  • El menú del backend lo he dejado así teniendo en cuenta que en la próxima iteración Holon nos pasarán la nueva maquetación:

Y esto es lo que se ve desde la Home:

Creo que podríamos dejar el link activo ya que no afecta a la usabilidad. Lo que se podría hacer más adelante es mostrar una home personalizada para usuarios logueados.

Mira, así es como lo veo yo, cuando puedas actualiza tu rama de github para que pueda ver los últimos cambios, quizás es solo que tengo una versión no acabada :slight_smile:

Gràcies!

@sseerrggii acabo de subir los cambios. A ver qué tal :smile: