Githawk: Estructura alámbrica / perfil de diseño

No soy un diseñador gráfico, pero tal vez esto pueda provocar la discusión aquí. Traté de mostrar una posible progresión lenta de un concepto.

También señalaré. Realmente no me gusta que los marcadores sean el ícono central en la barra de pestañas. Por alguna razón siento que debería ser perfil o bandeja de entrada. Pero no estaba realmente enfocado en eso.

🔥🔥🔥 @Huddie !

Incluyendo las siguientes imágenes aquí para referencia rápida contra algunos de los diseños actuales de GitHub. Sería genial encontrar nuevas fuentes de inspiración más allá de GitHub.

@BrianLitwin Estoy muy de acuerdo. Creo que el perfil de Github es excelente para la web, pero no se puede replicar bien en dispositivos móviles. Deberíamos buscar inspiración fuera pero tratar de mantener una interfaz familiar. Traté de mantener la página bastante simple para comenzar. Sé que se puede construir mejor más adelante.

¡Como las direcciones! Creo que deberíamos comenzar con cuál debería ser nuestra jerarquía de información antes de profundizar demasiado. ¡Hay tantas cosas que podrían existir en el perfil!

• Avatar
• Nombre de usuario
• Nombre para mostrar
• Biografía, ubicación, enlaces
• Organizaciones
• repositorios anclados
• Repos
• Seguidores Siguiendo
• Estrellas
• Actividad

Luego hay acciones a tomar:

• Seguir dejar de seguir
• Cuota
• Bloquear, denunciar

Idea genial

Haciendo una lluvia de ideas, podemos dividir esto en cubos clasificados por prioridad:

1. ¿Quién?
   un. Identidad personal
   
   
   
   1. Avatar
   
   
   2. Nombre de usuario, nombre para mostrar
   
   
   3. biografía
   
   
   4. Ubicación, empleador, enlaces
   
   
   5. Estrellas
      
      B. identidad de red
   
   
   6. Seguidores
   
   
   7. Siguiente
   
   
   8. Repositorios
   
   
2. ¿Qué hacen?
   un. Organizaciones
3. ¿Qué han estado haciendo?
   un. Repos anclados
   B. Actividad

Inspiración

Extrayendo algunas imágenes de Dribbble que me atrajeron:

Aquí hay un archivo de boceto inicial que preparé ayer en el vuelo a casa. Deberíamos apegarnos al estilo de fondo blanco que estamos usando ahora en los problemas.

¡Cosas geniales! Estoy terriblemente 😍😍😍 para esa foto de perfil centrado, marco circular... ordenado, elegante, plácido. EG en el diseño de Huddie en #2127 o en Antony Marshal arriba.

Trabajando con el archivo de boceto @rnystrom . Fusión en algunos de mis pensamientos originales. @BrianLitwin No voy a volver a publicar mi diseño anterior, ya que estoy bastante contento con que este tome su lugar.

Este fin de semana comencé a armar un documento de Sketch con plantilla para facilitar la creación de esquemas. Tiene colores, texto e íconos en componentes compartibles: app.zip

No está totalmente completo, pero marcar como podría ayudar con algo del lenguaje de diseño.

cc @cieslakdawid

@Huddie algunos pensamientos inmediatos:

• No soy un fanático del diseño de perfil centrado porque no escalará bien para iPad sin espacios en blanco masivos sin usar. Me gusta mucho el espacio para respirar, pero creo que será exagerado cuando se amplíe.
• Los diseños de los botones no son consistentes con el resto de la aplicación:
  
  
  
  • Múltiples botones en negrita/contrastados: ¿por qué "Siguiente" y "reciente" tienen el mismo peso?
  
  
  • "Siguiendo" debe ser "Dejar de seguir" (igual que GitHub.com)
  
  
  • Admito que la aplicación tampoco tiene un diseño de botones totalmente consistente. ¡Debería haber otra plantilla que agreguemos en el archivo Sketch y hacer que todo sea consistente! Se remonta a la discusión sobre el degradado (tal vez usemos botones de degradado completo como todo GitHub...)
  
  
• ¿Necesitamos títulos de formulario para todo? por ejemplo, "bio" probablemente innecesario
• Quiero deshacerme de que el usuario maneje en la vista y solo hacer que sea el título del elemento de navegación

Deberíamos resumir lo que debería hacer el perfil 1.0 en GitHawk.

¿Cuáles son las acciones más comunes que se realizan al ver el perfil de GitHub de alguien? Para mí, verifico dónde trabajan, busco su sitio web/información de contacto o veo qué tan "notable" son (seguidores, grandes proyectos que poseen)

Una vez que hagamos esto, podemos centrarnos solo en las características que satisfacen solo esas acciones e ignorar las demás para más adelante. De lo contrario, agregaremos muchas características complicadas que no son una prioridad (por ejemplo, actividad de contribución).

@rnystrom

• diseño de iPad
  Creo que en el iPhone el aspecto centrado es agradable. Veo lo que quieres decir con que el iPad podría parecer muy abierto. Nunca probé GitHawk en iPad, pero ¿los diseños son siempre los mismos? Sugeriría que en el iPad el nombre y el identificador (o lo que sea que lo reemplacemos) se apilen horizontalmente en lugar de verticalmente

• Consistencia del botón
  Realmente estaba tratando de dar un boceto aproximado, estoy seguro de que hay muchas inconsistencias en los cajeros automáticos, pero lo retocaré si seguimos por este camino.

• Títulos de formulario
  Las secciones sobre el botón "Siguiente" no tienen títulos. No creo que se vea muy bien si algunas secciones a continuación tienen y otras no, tratando de mantener la coherencia. Podría mover la biografía por encima de la línea, pero siento que encaja mejor debajo.

• Quitar manija a la vista
  Seguro que puedo moverlo fuera de la vista. Puedo reemplazarlo con ubicación/correo electrónico

• Acciones más comunes
  Estoy de acuerdo en que probablemente haya algunos comunes. Creo que fijó repos + org. mostrar su notable labor. La actividad le permite ver lo que están haciendo actualmente. Creo que seguir/dejar de seguir es esencial junto con el nombre, el identificador y la biografía, y creo que los enlaces rápidos al repositorio/seguimiento y los seguidores son apropiados en lugar de mostrarlos en la vista principal.

• Sitio Web y Contacto
  Siento que estos se pueden encontrar en un controlador de acción o algo así. Traté de mantener la vista principal poblada con las cosas que tiene cada usuario de GitHub. (Organizaciones y Bio son excepciones). Sin embargo, siempre podríamos agregarlos.

Podríamos eliminar la actividad de contribución, pero sucede que está en la página de perfil para github mobile y github web. Personalmente me gusta pero veo que no es necesario V1.

Déjame saber lo que piensas.

Prefiero mantener el diseño coherente y receptivo que hacer diseños específicos del dispositivo. Demasiado difícil de manejar y probar. Todos los dispositivos de cajero automático están dispuestos de la misma manera, salvo el colapso y la expansión de la vista dividida.

_{Enviado con GitHawk}

De acuerdo, ¿cambiar el nombre y (próximamente se agregará) ubicación + correo electrónico a horizontal?

Actualizado.

Casi me pierdo un material tan bueno aquí <3

@rnystrom ¿Tiene un plan para trabajar más en el boceto de los wireframes antes del fin de semana?
Subestimé mi semana y estoy un poco fuera de horario con el starter pack , pero este viernes estoy de vuelta en la vida (xCode + Sketch ;) ) y quiero terminar en 2/3 días. Para evitar la duplicación, solo publicaré el estado del trabajo antes de comenzar el viernes.

Creo que una consideración es que si vamos a tener pestañas en el futuro para Repos y Starred Repos, como en el diseño de Sherlouk, la interfaz de usuario actual "Repos/Followers/Following" requeriría un rediseño significativo tal como está ahora:

No estoy tratando de mirar hacia adelante demasiado, pero cuanto más prominente sea la interfaz de usuario en nuestro 1.0, más complicado será desacoplarlo más adelante.

También me gustaría señalar que, a menos que las pestañas Repos y Starred Repos tengan un aspecto diferente del ViewController de Search Repos que usamos actualmente, podemos reutilizar SearchRepoResult + SearchRepoResultSectionController, lo que hace que esas pestañas sean muy fáciles de crear. Vea este controlador de vista , que se puede usar tanto para repositorios como para destacados.

No veo una buena razón para dedicar tiempo a crear enlaces a una vista web de GitHub cuando ya tenemos gran parte de la arquitectura para mostrarlos de forma nativa.

Creo que los botones Repo/Followers/Following deberían llevarlo a una nueva vista en lugar de tenerlos como pestañas. Y la nueva vista debería ser nativa con seguridad.

Solo digo que todo esto se ve hermoso y es mucho mejor que el dibujo de mi sobre 😂

@Sherlouk Lo hiciste empezar. Tengo que empezar en alguna parte. Gracias

_{Enviado con GitHawk}

@cieslakdawid no realmente, bastante criticado las próximas dos semanas y luego salir de la ciudad.

_{Enviado con GitHawk}

¿Alguna idea de terminar este diseño para que @BrianLitwin pueda modificar su rama de perfil? @rnystrom ¿ Alguna sugerencia para mejorar el último renderizado de diseño anterior?

@Huddie déjame hacer un boceto prototipo del diseño original de @Sherlouk del n.° 317 para que podamos incluirlo en la discusión. Lo haré en los próximos días.

Claro suena bien. 👌🏻

_{Enviado con GitHawk}

Todavía no soy un profesional de Sketch, así que lo mejor que puedo hacer es una captura de pantalla por ahora:

@BrianLitwin me parece bien

_{Enviado con GitHawk}

@BrianLitwin ¡Realmente me gusta!

¿Tal vez seguir/dejar de seguir es un elemento de la barra de navegación o aparece en un controlador de acción?

_{Enviado con GitHawk}

Sobre de aspecto interesante 😂 ¡Se ve genial!

Creo que había planeado tener un... menú en la barra de navegación que hace cosas como seguir/dejar de seguir y compartir

Todo esto es genial. Gracias por etiquetar este boleto @brianlitwin

No hay prisa en absoluto, pero el objetivo sería también tener actividad de pulso tanto para el usuario (incluido quizás un feed dedicado solo a publicaciones y comentarios) como para el repositorio.

¿Alguien está trabajando en esto en este momento?

Podría intentar poner en marcha un MVP básico: ¡piense que una vez que se establezcan los cimientos, podemos comenzar a construir sobre eso con más pestañas e información!

@Sherlouk Tomé pases suaves en el n. ° 2125 y el n. ° 2113. Creo que las cosas del cliente / graphql de esos prs son válidas. Si publico esa parte (un par de cientos de líneas), ¿pueden revisar el pr y construir sobre él?

Echaré un vistazo a la rama UserProfile y veré cómo se ve actualmente. ¡Creo que el diseño anterior es bueno, solo está tratando de obtener una versión mínima primero para que podamos iterar como opuesto a un MR masivo con todo adentro!

@Sherlouk está bien, déjame limpiar la rama UserProfile entonces, no creo que esté actualizado. lo hare hoy

Actualización de @Sherlouk : esa rama no es tan vergonzosa como recordaba. Consideraría desechar todo en la carpeta "Perfil de usuario" además de la carpeta "Modelos de perfil": los modelos siguen el patrón en Repositorios/Repositorios Cliente bastante de cerca. Pero desecharía cualquier vista/controlador de vista/encabezado de sección. Para empezar, creo que deberíamos usar SwiftList ViewControllers.

La única sensación fuerte que tuve en el frente de ViewController fue que fue muy fácil/directo incluir las dos pestañas: Repositorios destacados y Repositorios de usuarios, porque ya tenemos excelentes controladores de sección y celdas de la canalización de SearchRepositories. Solo tráelos y déjalos entrar.

Hola gente 👋, soy diseñador y quería ayudar.

@Sherlouk y @BrianLitwin son los diseños publicados el 2 de octubre ¿En qué estás trabajando actualmente?
¿Puedo proporcionar algún soporte de diseño para ayudarlos?

En este momento creo que puedo trabajar en un diseño aproximado para;

• Pestaña Repos
• Pestaña de estrellas
• ¿Compartir/seguir cajón?
• Repos Pined Expandidos

¡Déjame saber cómo puedo ayudar!

@kocheck no se siente limitado por ninguno de los diseños de este hilo; no hay consenso que yo sepa. Si tienes otras ideas, no dudes en compartirlas.

¡Entendido! Quería intentarlo y probarlo este fin de semana, ¡gracias!

¡Esperamos el diseño! Suena bien

_{Enviado con GitHawk}

Hola, amigos 👋 Encontré algo de tiempo para saltar al archivo de diseño esta mañana. ¿Cómo te sentirás acerca de esta dirección? ¿Algún comentario o comentario?

## Descripción general del diseño 1
Lo más parecido a los últimos diseños publicados.

Actualizaciones

• La pestaña ViewController se ha movido hacia abajo para proporcionar un poco más de jerarquía.
• Incluida una versión con (aprox.) número máximo de caracteres para la biografía.
• Se movieron las acciones Seguir y Compartir a una Hoja de acción activada a través del ícono de Menú en la barra de navegación

| Breve biografía | Biografía larga | iPhone SE |
| :---: | :---: | :---: |
| | | |

Descripción general del diseño 2

Este diseño avanza un poco más. Si quieres que siga adelante y me vaya por la borda, házmelo saber 😄

Actualizaciones

• La pestaña ViewController se ha movido hacia abajo para proporcionar un poco más de jerarquía.
• Número máximo de caracteres incluido (aprox.) para la biografía.
  
  
  
  • Biografía movida para estar dentro de la vista de tabla.
  
  
• Hice un pase rápido en Profile Stats
  
  
  
  • Repos
  
  
  • Seguidores
  
  
  • Siguiente
  
  
• Se agregó el botón Seguir/dejar de seguir
• Se movieron las acciones Seguir y Compartir a una Hoja de acción activada a través del ícono de menú al lado del botón Seguir

| Dejar de seguir | Seguir | iPhone SE |
| :---: | :---: | :---: |
| | | |

Todavía diseñando / Próximos pasos

• Me gustaría explorar una versión en la que los repositorios anclados estén contenidos dentro de una caja. Como en este comentario que creó @Huddie . Prefiero eso.
• actividad de pulso para el usuario *
• actividad de pulso para el repositorio *
• Estados expandidos. para artículos en la vista de tabla
• Repos (pestaña)
• Estrellas (pestaña)
• Hoja de acción

Desconocidos

• Asumo que Githawk es compatible con iPhone SE con la herramienta de diseño automático, de la conversación anterior 👆 hablando sobre la compatibilidad con iPad.

• También estoy haciendo algunas suposiciones de diseño aquí y allá, avíseme si ve algo drásticamente horrendo.

• * por la actividad del pulso, tengo una pregunta tonta. ¿Mostraría Githawk estos elementos como Github o sería más personalizado?

Siéntase libre de seguir explorando @kocheck pero realmente ❤️ Diseño 2.

En particular, me alegro de que hayas podido poner repo/followers/following en un lugar destacado. Ryan mencionó que esa información es de alta prioridad cuando escanea perfiles.

Me gustan las pestañas debajo de la sección Encabezado. ¿Qué piensan los demás?

Totalmente de acuerdo, bajar la barra de pestañas se ve mucho mejor +1

Para el segundo diseño:

• Seguir/Dejar de seguir Siento que es una acción de 1 o 2 veces. Parece ocupar una gran parte de la vista superior y probablemente nunca cambie para la mayoría de las personas una vez que se hace clic.
• Los repositorios parecen aparecer dos veces (pestaña y en la parte superior)
• Personalmente, creo que la biografía se adjunta al nombre, la ubicación, etc. y no debería estar en la sección inferior cuando los demás están en la sección superior.

Me gustan los dos en su mayor parte. Creo que el diseño 1 breve biografía es un buen lugar para comenzar y el diseño 2 puede ser una segunda versión más completa.

_{Enviado con GitHawk}

@kocheck ¡ eso se ve TAN BUENO! Me encanta mover la barra hacia abajo, ¡muy limpio!

@Huddie @BrianLitwin jugando al abogado del diablo conmigo mismo, tal vez el siguiente recuento/etc. _no_ debería ser tan prominente (como la opción 1) ya que GitHub se trata de trabajar y menos de quién es quién. Pero creo que es una métrica útil para el "capital social" al conocer gente nueva.

También me encanta la idea de mover Seguir a la hoja de acción. Elimine los aspectos sociales y manténgalo enfocado en "quién es esta persona y qué trabajo hace" frente a las redes sociales.

Sé que me estoy agitando un poco aquí, pero una vez que vi el diseño 1 y lo comparé con el 2, sentí que el 2 es demasiado Twitter/Instagram y menos _trabajo_.

¿Pensamientos?

También me inclino por el aspecto profesional de 1 frente al énfasis social de 2 como @rnystrom.

Yo soy más por la 1ra opción 😄. Señala información más "importante" sobre quién es esta persona y qué está haciendo, en lugar de las redes sociales (la segunda se parece a Insta).
Además, sugeriría omitir la biografía y hacer más espacio para la información del buscapersonas.
Además, habría cambiado de lugar entre nombre/nombre de usuario y ubicación/empresa/sitio web. Para mí es más intuitivo ver el nombre/usuario en el lado derecho de la foto de perfil. (como la versión que @BrianLitwin sugirió arriba) 😊

_{Enviado con GitHawk}

¡Gracias por los excelentes comentarios! Trabajaré en algunas composiciones que reflejen los comentarios anteriores.

@jdisho Cambié el Nombre/nombre de usuario con Ubicación/empresa/sitio web, etc. para ayudar con nombres más largos. Puedo investigar un poco e intercambiar los campos. A ver si puedo hacer que un caso de borde se vea bien en ese lugar 😄

_{Enviado con GitHawk}

Actualización rápida

Todavía moviendo cosas, pensé en compartir el peor caso extremo con el que me estoy encontrando. Un usuario con un nombre de 39 caracteres como máximo y la copia de biografía máxima en un iPhone SE. 😆

¡@kocheck es genial que estés dando vueltas a través de todos estos casos extremos!

_{Enviado con GitHawk}

¿Podría desplazarse toda la pantalla para que las pestañas se conviertan en un encabezado fijo cuando se desplaza lo suficiente? Eso significaría que toda la biografía estaría visible en todas las pestañas y que toda la pantalla se puede llenar con repositorios si es necesario.

@ j-f1 Eso es lo que estoy pensando. 👍

Podría cambiar el nombre/nombre de usuario con la ubicación, la empresa y la información de contacto nuevamente. Aprovecha la altura de la pantalla.

Viajando para las vacaciones, y Ayer tuve una idea mientras estaba en el auto. Lo simularon muy rápido esta mañana. ¿Cómo te sentirías al mover el perfil hacia la derecha?

• La información puede fluir hacia abajo, a medida que el usuario agrega o elimina más.
• En iPad, ¿causaría problemas agrandar la imagen de perfil? Ayuda a llenar ese espacio vacío a la derecha.

@kocheck Creo que se ve _fantástico_. Me encanta el icono de la derecha. Hace que toda la interfaz sea muy legible.

_{Enviado con GitHawk}

¡Esto es increíble! Revisando la pregunta de kochecks la otra semana, creo que preguntó sobre la actividad de pulso, compartiendo cómo lo hace github o apareciendo más personalizado, no estoy seguro de si alguna vez se respondió de qué manera se inclinaba el equipo y yo mismo tenía curiosidad...

Kocheck, ¿imaginaría que la actividad estaría debajo anclada, o como una cuarta pestaña, o incluso como una opción de desbordamiento? A diferencia de los seguidores que ustedes se dieron cuenta de que en última instancia no eran una vista fundamental, al menos para mí, la actividad es la vista más importante en un perfil.

@ijm8710 Todavía necesito revisar los documentos de GitHub, pero si podemos mostrar esos datos, me encantaría colocarlos en la parte superior de la pestaña Resumen. 👍

Si nos sentimos bien con esto como una solución, ¿cuál sería la mejor manera de enviarlo o enviarlo a ustedes? ¿Un proyecto de Zeplin, o debo hacer una solicitud de extracción al repositorio de diseño con el archivo de boceto actualizado?

_{Enviado con GitHawk}

Resbaladizo 🤩!!! @chequedecocina

@kocheck api.github.com/users/:usuario/eventos

@kocheck PR para diseñar el repositorio sería 👌

_{Enviado con GitHawk}

Ninguna de las imágenes en este hilo está disponible. ¿Alguien los tiene y puede subirlos como un archivo adjunto de GitHub?

Los diseños se fusionaron en el archivo de boceto maestro, creo @TigPT

https://github.com/GitHawkApp/Design-Resources

@TigPT Avíseme si necesita/quiere un tipo de archivo diferente y puedo exportarlo por usted.

Los diseños se fusionaron en el archivo de boceto maestro, creo @TigPT

https://github.com/GitHawkApp/Design-Resources

Y las imágenes ahora se están cargando, parece que fue un problema de red de mi parte y asumí erróneamente que están fuera de línea.

Gracias por señalar a Design repo.

Vienen nuevos diseños? ¡Emocionado!