getlistas / web

https://listas.io
8 stars 2 forks source link

Preguntas diseño #7

Open gillchristian opened 3 years ago

gillchristian commented 3 years ago
  1. Cómo deberían verse las listas que tienen un sólo elemento? El caso que no tiene sentido un "Show more" digamos.
  2. Cómo deberían verse las listas que no tienen elementos?
  3. Que onda con la altura de las listas? Tienen que mantener como en el screenshot o no?

image

  1. Cómo deberían verse las listas cuando están expandidas? Digamos, la lista de los siguientes links
  2. Deberían las listas que están en la misma columna mantener la misma altura que la lista expandida (como en el screenshot) o no?

image

  1. Colores: faltaría un par de versiones light & dark de cada uno para los casos en que están con hover (1er screenshot) o deshabilitados (2do screenshot)

image

image

  1. Faltarían los diseños del form para agregar items a las listas. La joda es que el mismo diseño se pueda después usar como una extensión de Chrome/Firefox. Pero tendríamos que poder reusarlo en la web porque obviamente no todo el mundo va a tener la extensión. Y tampoco es que voy a hacer la extensión al principio :sweat_smile: Creo que una onda como la de pocket estaría piola. El tema es que a diferencia de Pocket acá primero tendrían que elegir una lista para que se guarde el link a esa lista. De paso eso de "Choose a list" es un "dropdown" que se abre. Así que habría que meter un diseño para eso también :grimacing:

image

image

  1. Dónde te parece mejor ponerlo en la web? Quizá abajo de todo como está aca, fixed, superpuesto al resto del contenido. Que te parece? Y que esté cerrado y haya un bottón +. O quizá podría aparecer en la misma línea que "Read Next" (que aparece en el Dashboard) pero al extremo derecho.

image

dvnahuel commented 3 years ago
  1. Las listas que tienen un solo elemento igual tendrían el ca pero disabled
  2. Se puede crear una lista sin elementos? 🤔 todavía no diseñe la sección de crear listas, tenia pensado que si o si pongas mínimo 1 link
  3. Las listas tendrían que tener un alto fijo de 288px
  4. Ahora diseño el 'show more' pero también me lo imagine como esta en el screen y en el costado derecho el favicon del link
  5. Al expandir tendría que a ver una animación en la cual se expande el alto de la card sin modificar el tamaño del contenido superior (superior al botón show more)
  6. Colores ahora chequeo devuelta pero creo que la escala de grises la había planteado (para disabled y demás) o podemos jugar con la opacidad del fondo del elemento
  7. Perfecto, tenia una idea también para hacer eso la tengo que diseñar todavía
  8. Creo que depende de donde esta el call to action del form pero me gusta donde esta
gillchristian commented 3 years ago
  1. Se puede crear una lista sin elementos? No lo habia pensado como que no se pueda. Ahora la vista de crear listas no pide un elemento. Podria pedirlo igual. Pero de todas formas estaria el caso cuando el user lee todos los elemento de una lista y terminaria quedando sin elementos. Quiza en ese caso en lugar del elemento podriamos poner algo parecido al “agregar lista” pero que sea un “agregar elemento” como parte del card de la lista. (cc) @ndelvalle


  1. Al expandir tendría que a ver una animación en la cual se expande el alto de la card sin modificar el tamaño del contenido superior (superior al botón show more) Decis que al expandir se veria como A o B 👇?

image

  1. Los colores digo no de los grises sino de los otros. Ejemplo un kiwi dark y light. Creo que con opacity tambien podria ser. El gris de los inputs tambien falta. Creo que no es ninguno de los que estan ahora (400, 300, 200 y 100)


  1. Yo la posta no estoy 100% convencido del call to action del form estando ahi pero podriamos verlo con @ndelvalle tambien
dvnahuel commented 3 years ago
  1. Tenés razón, hay que plantear eso tmb
  2. Me lo había imaginado como el B, ahi hice ese boceto en el figma para que chusmeen
  3. No termino de entender bien el tema de colores 🤔 el color de los input no están ya en el form de registro? O ver como quedarían los colores con un fondo negro?
  4. Dale, habría que chequearlo.
gillchristian commented 3 years ago

Lo de los colores digo que no son los mismos que la paleta. Pero capaz Figma me tira el codigo del color en el form. Estaria piola igual que los colores esten todos en la paleta y después directamente usar esos.

dvnahuel commented 3 years ago

Diseño de issues 7, 8

Screen Shot 2021-01-04 at 20 38 25
dvnahuel commented 3 years ago
  1. El color gris de los forms ya esta planteado como 'gris 100' (el anterior 100 ahora es 10)
gillchristian commented 3 years ago

Guacho va quedando re fachero todo! :heart:

Ahí tiré un par de comentarios en Figma.

Que opinas del form? Le dejamos los labels o no? En general me gusta que esten porque sólo con placeholders una vez que el user escribe algo ya no tiene referencia de que era el form.

image