Githawk: Wireframe / perfil de design

Eu não sou um designer gráfico, mas talvez isso possa gerar a discussão aqui. Tentei mostrar uma possível progressão lenta de um conceito.

Eu também vou apontar. Eu realmente não gosto que os favoritos sejam o ícone central na barra de guias. Por alguma razão eu sinto que deveria ser perfil ou caixa de entrada. Mas eu não estava realmente focado nisso

🔥🔥🔥 @Huddie !

Incluindo as seguintes imagens aqui para referência rápida em relação a alguns dos designs atuais do GitHub. Seria legal encontrar algumas novas fontes de inspiração além do GitHub.

@BrianLitwin Eu concordo muito. Eu acho que o perfil do Github é ótimo para web, mas não pode ser bem replicado em dispositivos móveis. Devemos procurar inspiração fora, mas tentar manter uma interface familiar. Eu tentei manter a página bem simples para começar. Eu sei que pode ser construído melhor mais tarde.

Como as direções! Acho que devemos começar com o que nossa hierarquia de informações deve ser antes de ir muito fundo. Tem tanta coisa que poderia existir no perfil!

• Avatar
• Nome do usuário
• Nome em Exibição
• Bio, localização, links
• Organizações
• repositórios fixados
• Reposições
• Seguidores seguindo
• Estrelas
• Atividade

Em seguida, há ações a serem tomadas:

• Siga, deixe de seguir
• Participação
• Bloquear, denunciar

chuva de ideias

Fazendo um brainstorming um pouco, podemos dividir isso em buckets classificados por prioridade:

1. Quem?
   uma. Identidade pessoal
   
   
   
   1. Avatar
   
   
   2. Nome de usuário, nome de exibição
   
   
   3. Biografia
   
   
   4. Localização, empregador, links
   
   
   5. Estrelas
      
      b. Identidade da rede
   
   
   6. Seguidores
   
   
   7. Seguindo
   
   
   8. Repositórios
   
   
2. O que eles fazem?
   uma. Organizações
3. O que eles têm feito?
   uma. Repos fixados
   b. Atividade

Inspiração

Puxando algumas imagens do Dribbble que me atraíram:

Aqui está um arquivo de esboço inicial que preparei no voo para casa ontem. Devemos manter o estilo de fundo branco que estamos usando agora nos problemas.

Coisas incríveis! Estou terrivelmente 😍😍😍 por aquela foto de perfil centralizado, moldura circular... organizada, elegante, plácida. EG no design de Huddie em #2127 ou em Antony Marshal acima.

Trabalhando no arquivo de esboço @rnystrom . Mesclando alguns dos meus pensamentos originais. @BrianLitwin Não vou repassar meu design antigo, pois estou muito feliz com este tomando seu lugar.

Este fim de semana, comecei a montar um documento do Sketch modelado para facilitar o wireframing. Tem cores, texto e ícones em componentes compartilháveis: app.zip

Não está totalmente completo, mas sinalizando, pois pode ajudar com um pouco da linguagem de design.

cc @cieslakdawid

@Huddie alguns pensamentos imediatos:

• Eu não sou fã do design de perfil centralizado porque ele não será bem dimensionado para iPad sem espaço em branco massivamente não utilizado. Eu gosto de respirar espaço, mas acho que será exagerado quando for ampliado.
• Os designs dos botões não são consistentes com o resto do aplicativo:
  
  
  
  • Vários botões em negrito/contraste: por que "Seguindo" e "recente" têm o mesmo peso?
  
  
  • "Seguindo" deve ser "Parar de seguir" (o mesmo que GitHub.com)
  
  
  • Admito que o aplicativo também não possui um design de botão totalmente consistente. Deve ser outro template que adicionamos no arquivo Sketch e deixamos tudo consistente! Volta à discussão do gradiente (talvez usemos botões de gradiente completo como todo o GitHub ...)
  
  
• Precisamos de títulos de formulário para tudo? por exemplo, "bio" provavelmente desnecessário
• Eu quero me livrar de ter o identificador de usuário na exibição e apenas tornar o título do item de navegação

Devemos resumir o que o perfil 1.0 do GitHawk deve fazer.

Quais são as ações mais comuns ao visualizar o perfil do GitHub de alguém? Para mim, verifico onde eles trabalham, encontro seu site/informações de contato ou vejo o quão "notáveis" eles são (seguidores, grandes projetos que possuem)

Depois de fazer isso, podemos nos concentrar apenas nos recursos que satisfazem apenas essas ações e ignorar os outros para mais tarde. Caso contrário, adicionaremos muitos recursos complicados que não são prioritários (por exemplo, atividade de contribuição).

@rnystrom

• design do iPad
  Eu acho que no iPhone a aparência centralizada é legal. Eu vejo o que você quer dizer que o iPad pode parecer muito aberto. Eu nunca tentei o GitHawk no iPad, mas os layouts são sempre os mesmos? Eu sugiro que no iPad o nome e o identificador (ou o que o substituirmos) fiquem horizontalmente em vez de empilhados verticalmente

• Consistência do botão
  Eu realmente estava tentando dar um esboço, tenho certeza de que há muitas inconsistências no caixa eletrônico, mas vou retocar se seguirmos esse caminho.

• Títulos de formulários
  As seções acima do botão "Seguindo" não têm títulos. Eu não acho ótimo se algumas seções abaixo tiverem e outras não, tentando manter a consistência. Eu poderia mover a biografia acima da linha, mas sinto que se encaixa melhor abaixo.

• Removendo a alça à vista
  Claro que posso tirá-lo da vista. Posso substituí-lo por localização/e-mail

• Ações mais comuns
  Concordo que provavelmente existem alguns comuns. Acho que repos fixados + org. mostrar seu notável trabalho. A atividade permite que você veja o que eles estão fazendo atualmente. Acho que seguir/deixar de seguir é essencial junto com nome + identificador e biografia e acho que links rápidos para repo/seguir e seguidores são apropriados, em vez de exibi-los na exibição principal.

• Site e contato
  Eu sinto que isso pode ser encontrado em um Action Controller ou algo assim. Tentei manter a visão principal preenchida com coisas que todo usuário do GitHub tem. (Organizações e Bio são exceções). Nós sempre poderíamos adicioná-los embora.

Poderíamos remover a atividade de contribuição, mas ela está na página de perfil do github mobile e github web. Eu pessoalmente gosto, mas posso ver que não é necessário V1.

Deixe-me saber a sua opinião.

Prefiro manter o layout consistente e responsivo do que criar layouts específicos para dispositivos. Muito difícil de gerenciar e testar. Os dispositivos ATM são todos dispostos da mesma forma, exceto o colapso e a expansão da visão dividida.

_{Enviado com GitHawk}

Ok, então mude o nome e (em breve será adicionado) local + e-mail para horizontal?

Atualizada.

Quase perdi uma coisa tão boa aqui <3

@rnystrom Você tem um plano para trabalhar mais no esboço de wireframes antes do fim de semana?
Subestimei minha semana e estou um pouco fora do cronograma com o starter pack , mas nesta sexta estou de volta à vida(xCode + Sketch ;) ) e quero terminar em 2/3 dias. Para evitar duplicação, postarei o estado do trabalho antes de começar na sexta-feira.

Acho que uma consideração é que, se tivermos abas no futuro para Repos e Starred Repos, como no design de Sherlouk, a interface de usuário atual "Repos/Followers/Following" exigiria um re-design significativo como é agora:

Não tentando olhar muito para frente, mas quanto mais proeminente a interface do usuário estiver em nosso 1.0, mais complicado será desacoplar mais tarde.

Também gostaria de observar que, a menos que as guias Repos e Starred Repos tenham uma aparência diferente do ViewController de Search Repos que usamos atualmente, podemos reutilizar SearchRepoResult + SearchRepoResultSectionController, o que torna essas guias muito fáceis de construir. Veja este controlador de exibição , que pode ser usado para Repos e Starred.

Não vejo um grande motivo para gastar tempo criando links para uma visualização da Web do GitHub quando já temos muito da arquitetura para exibi-los nativamente já em vigor.

Acho que os botões Repo/Followers/Following devem levá-lo a uma nova visualização em vez de tê-los como guias. E a nova visão deve ser nativa com certeza.

Só falando que tudo isso ficou lindo e bem melhor que o meu desenho de envelope 😂

@Sherlouk Você começou. Tem que começar em algum lugar. Obrigado

_{Enviado com GitHawk}

@cieslakdawid não muito, muito mal nas próximas duas semanas e depois saindo da cidade.

_{Enviado com GitHawk}

Alguma ideia de terminar este design para que @BrianLitwin possa ajustar seu ramo de perfil? @rnystrom Alguma sugestão de melhoria na última renderização de design acima?

@Huddie deixa eu fazer um protótipo do Sketch do design original de @Sherlouk do #317 para que possamos colocar isso na discussão. Farei isso nos próximos dias.

Claro que soa bem. 👌🏻

_{Enviado com GitHawk}

Ainda não sou um profissional do Sketch, então o melhor que posso fazer é uma captura de tela por enquanto:

@BrianLitwin parece bom para mim

_{Enviado com GitHawk}

@BrianLitwin Eu realmente curto!!

Talvez seguir / deixar de seguir é um item da barra de navegação ou aparece em um controlador de ação?

_{Enviado com GitHawk}

Envelope com aparência interessante 😂 Ficou ótimo!

Acho que eu tinha planejado ter um ... menu na barra de navegação que faz coisas como seguir / deixar de seguir e compartilhar

Isso tudo é muito legal. Obrigado por marcar este bilhete @brianlitwin

Sem pressa, mas o objetivo seria também ter atividade de pulso para o usuário (incluindo talvez um feed dedicado apenas a postagens e comentários) e repositório

Alguém está trabalhando nisso no momento?

Pode tentar obter um MVP básico - pense que uma vez que a base esteja estabelecida, podemos começar a construir em cima disso com mais guias e informações!

@Sherlouk Eu fiz passes suaves em # 2125 e # 2113 - acho que o material client/graphql desses prs é válido. Se eu postar essa parte (duas centenas de linhas), vocês podem conferir o pr e construir em cima dela?

Vou dar uma olhada na ramificação UserProfile e ver como ela está atualmente. Eu acho que o design acima é bom, está apenas tentando obter uma versão mínima primeiro para que possamos iterar em oposição a um MR enorme com tudo!

@Sherlouk ok, deixe-me limpar o branch UserProfile então, acho que não está atualizado. vou fazer isso hoje

@Sherlouk Update: Esse ramo não é tão embaraçoso quanto eu lembrava. Eu consideraria descartar tudo na pasta "Perfil do usuário" além da pasta "Modelos de perfil" - os modelos seguem o padrão em Repositories/Repositories Client bem de perto. Mas eu jogaria fora todas as visualizações/controladores de visualização/cabeçalhos de seção. Para começar, acho que devemos usar o SwiftList ViewControllers.

A única sensação forte que tive na frente do ViewController foi que era muito fácil/direto incluir as duas guias: Repositórios com estrela e Repositórios do usuário, porque já temos ótimos controladores de seção e células do pipeline SearchRepositories. Basta pegá-los e soltá-los.

Olá pessoal 👋, sou designer e queria ajudar.

@Sherlouk e @BrianLitwin são os designs postados em 2 de outubro No que você está trabalhando atualmente?
Posso fornecer qualquer suporte de design para ajudá-lo?

No momento, acho que posso trabalhar em um projeto aproximado;

• Aba de repositórios
• Aba Estrelas
• Compartilhar / Seguir Gaveta?
• Repos expandidos

Deixe-me saber como posso ajudar!

@kocheck não se sinta constrangido por nenhum dos designs deste tópico; não há consenso que eu saiba. Se você tiver outras ideias, sinta-se à vontade para compartilhá-las.

Entendido! Eu queria tentar dar uma boa rachada nisso neste fim de semana, obrigado!

Aguardo o desenho! Parece legal

_{Enviado com GitHawk}

Ei, pessoal 👋 Encontrei algum tempo para pular para o arquivo de design esta manhã. Como você vai se sentir sobre essa direção? Algum comentário ou feedback?

## Visão geral do projeto 1
O mais próximo dos últimos designs postados.

Atualizações

• A guia ViewController foi movida para baixo para fornecer um pouco mais de hierarquia.
• Incluída uma versão com (aprox) contagem máxima de caracteres para a biografia.
• Moveu as ações Seguir e Compartilhar para uma Folha de Ação acionada pelo ícone Menu na Barra de Navegação

| Curta biografia | Longo Bio | iPhone SE |
| :---: | :---: | :---: |
| | | |

Visão geral do projeto 2

Este design sai um pouco mais longe. Se você quiser que eu continue e vá ao mar me avise 😄

Atualizações

• A guia ViewController foi movida para baixo para fornecer um pouco mais de hierarquia.
• Contagem máxima de caracteres incluída (aprox) para a biografia.
  
  
  
  • Bio movida para dentro da visualização da tabela.
  
  
• Fez um passe rápido nas Estatísticas do Perfil
  
  
  
  • Reposições
  
  
  • Seguidores
  
  
  • Seguindo
  
  
• Adicionado o botão Seguir/desseguir
• Moveu as ações Seguir e Compartilhar para uma Folha de Ação acionada pelo ícone de menu ao lado do botão Seguir

| Deixar de seguir | Siga | iPhone SE |
| :---: | :---: | :---: |
| | | |

Ainda projetando / Próximos passos

• Eu gostaria de explorar uma versão em que os Repos fixados estão contidos em uma caixa. Como neste comentário que @Huddie criou. Eu gosto disso.
• atividade de pulso para o usuário *
• atividade de pulso para repositório *
• Estados expandidos. para itens na visualização de tabela
• Repositórios (guia)
• Estrelas (guia)
• Folha de Ação

Desconhecidos

• Estou supondo que o Githawk suporta o iPhone SE com a ferramenta de layout automático, da conversa acima 👆falando sobre o suporte do iPad.

• Eu também estou fazendo algumas suposições de design aqui e ali, deixe-me saber se você encontrar algo drasticamente horrendo.

• * para a atividade do pulso, eu tenho uma pergunta estúpida. O Githawk exibiria esses itens como o Github ou isso seria mais personalizado?

Sinta-se à vontade para continuar explorando @kocheck , mas eu realmente ❤️ Design 2.

Em particular, estou feliz que você conseguiu colocar repo/followers/following em um local de destaque. Ryan mencionou que essas informações são de alta prioridade quando ele verifica perfis.

Eu gosto das guias na seção Cabeçalho. O que os outros pensam?

Concordo totalmente que descer a barra de guias fica muito melhor +1

Para o segundo projeto:

• Follow/Unfollow Eu sinto que é uma ação de 1 ou 2 vezes. Parece ocupar uma grande parte da vista superior e provavelmente nunca mudará para a maioria das pessoas uma vez clicada.
• Repos parecem aparecer duas vezes (guia e na parte superior)
• Pessoalmente, acho que a biografia está anexada ao nome, local etc. e não deve estar na seção inferior quando as outras estão na seção superior.

Gosto dos dois na maior parte. Acho que a biografia curta do design 1 é um bom lugar para começar e o design 2 pode ser mais elaborado em nossa segunda versão

_{Enviado com GitHawk}

@kocheck yo que parece TÃO BOM! Adoro mover o bar para baixo, muito limpo!

@Huddie @BrianLitwin bancando o advogado do diabo comigo mesmo, talvez a contagem a seguir/etc _não deva_ ser tão proeminente (como a opção 1), já que o GitHub é sobre fazer trabalho e menos sobre quem é quem. Mas acho que é uma métrica útil para "capital social" ao conhecer novas pessoas.

Eu também adoro a ideia de mover o Siga para a folha de ação. Remova os aspectos sociais e mantenha o foco em "quem é essa pessoa e que trabalho ela faz" versus redes sociais.

Eu sei que estou meio que me agitando aqui, mas quando vi o design 1 e comparei com 2, senti que 2 é muito Twitter/Instagram e menos _trabalho_.

Pensamentos?

Também me inclino para o aspecto profissional de 1 versus a ênfase social de 2 como @rnystrom.

Sou mais pela 1ª opção 😄. Ele aponta informações mais “importantes” sobre quem é essa pessoa e o que está fazendo, em vez de redes sociais (a segunda se parece com o Insta).
Além disso, sugiro deixar a biografia de fora e criar mais espaço para as informações do pager.
Além disso, eu teria trocado de lugar entre nome/nome de usuário e localização/empresa/site. Para mim é mais intuitivo ver o nome/nome de usuário no lado direito da foto do perfil. (como a versão que @BrianLitwin sugeriu acima) 😊

_{Enviado com GitHawk}

Obrigado pelo ótimo feedback! Vou trabalhar em algumas composições que refletem o feedback acima.

@jdisho eu troquei o nome/nome de usuário com localização/empresa/site etc para ajudar com nomes mais longos. Posso pesquisar e trocar os campos. Veja se consigo fazer um caso de borda ficar bem naquele local 😄

_{Enviado com GitHawk}

Rápida atualização

Ainda movendo as coisas, pensei em compartilhar o pior caso de ponta que estou enfrentando. Um usuário com nome máximo de 39 caracteres e a cópia máxima da biografia em um iPhone SE. 😆

@kocheck tão legal que você está girando por todos esses casos de borda!

_{Enviado com GitHawk}

A tela inteira pode rolar para que as guias se tornem um cabeçalho fixo quando você rola o suficiente? Isso significaria que toda a biografia estaria visível em todas as guias e que a tela inteira poderia ser preenchida com repositórios, se necessário.

@ j-f1 Isso é o que estou pensando. 👍

Eu posso trocar o nome/nome de usuário com o local, empresa e informações de contato novamente. Aproveite a altura da tela.

Viajando nas férias, e tive uma ideia enquanto estava no carro ontem. Simulei muito rápido esta manhã. O que você acha de mover o perfil para a direita?

• As informações podem fluir para baixo, à medida que o usuário adiciona ou remove mais.
• No iPad, isso causaria problemas para aumentar a imagem do perfil? Ajude a preencher esse espaço vazio à direita.

@kocheck Acho que parece _fantástico_. Ame o ícone à direita. Torna toda a interface muito legível.

_{Enviado com GitHawk}

Isso é incrível! Revisitando a questão do kochecks na outra semana, acho que ele perguntou sobre a atividade de pulso compartilhando como o github faz isso ou parecendo mais personalizado, não tenho certeza se isso já foi respondido de que maneira a equipe estava inclinada e curiosa ...

Kocheck, você imaginaria a atividade sendo fixada abaixo, ou como uma quarta guia, ou mesmo como uma opção de estouro? Ao contrário dos seguidores que vocês perceberam que não era uma visão central, pelo menos para mim, a atividade é a visão mais importante em um perfil.

@ijm8710 Ainda preciso examinar os documentos do GitHub, mas se pudermos exibir esses dados, adoraria soltá-los na parte superior da guia Visão geral. 👍

Se nos sentirmos bem com isso como uma solução, qual seria a melhor maneira de enviar ou enviar para vocês? Um projeto Zeplin ou devo fazer uma solicitação Pull para o repositório de design com o arquivo de esboço atualizado?

_{Enviado com GitHawk}

Liso 🤩!!! @cookcheck

@kocheck api.github.com/users/:user/events

@kocheck PR para projetar repo seria 👌

_{Enviado com GitHawk}

Nenhuma das imagens deste tópico está ativa. Alguém os tem e pode carregá-los como um anexo do GitHub?

Os designs foram mesclados no arquivo de esboço mestre, acredito @TigPT

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

@TigPT Deixe-me saber se você precisa/quer um tipo de arquivo diferente e eu posso exportar isso para você.

Os designs foram mesclados no arquivo de esboço mestre, acredito @TigPT

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

E as imagens agora estão carregando, parece que foi um problema de rede do meu lado e eu assumi erroneamente que elas estão offline.

Obrigado por apontar para o repositório de design.

Novos desenhos chegando? Animado!