Escola de design móvel: o processo de conclusão de uma tarefa de teste. Yandex abriu um curso online gratuito para a School of Design Teamwork

A Yandex, como líder de mercado, realiza regularmente eventos educacionais sobre temas profissionais. No início deste ano lançaram o projeto “Yandex Design School” no Youtube. Em formato de vídeo, especialistas da Yandex falam sobre os princípios e características do web design, analisam vários exemplos e fornecem materiais teóricos valiosos.

Descrição da primeira série de vídeos sobre design:

Vídeo curso para quem deseja se desenvolver na área de design de produto.
Para ser aprovado, você precisa de experiência básica em design de interface ou áreas relacionadas, domínio confiante de ferramentas gráficas e capacidade de projetar interações com a interface para se adequar à tarefa em questão. Além disso, é importante conhecer o básico de HTML, CSS e JavaScript para aprender.

As videoaulas da Yandex Design School são estruturadas de forma que os alunos passem por todo o processo de trabalho de um produto: da ideia ao lançamento.

O programa consiste em quatro seções:
– Design em uma grande empresa
– Prototipagem
- Design de produto
- Trabalho em equipe

Lista de reprodução

A Mobile Design School 2016 começou recentemente.

Curso em vídeo para designers de interface que desejam adquirir conhecimentos e habilidades adicionais na criação de produtos móveis para um grande público. Baseado em palestras da Escola de Design Móvel, realizadas no âmbito do projeto Mobilização. A programação inclui palestras sobre recursos de design, prototipagem e animação de produtos mobile, além de trabalho em equipe. Os vídeos são publicados todas as terças-feiras, de 18 de outubro a 13 de dezembro de 2016.

Recomendo fortemente para qualquer pessoa interessada em design.

No verão de 2015, o primeiro Escola de Design Yandex. Materiais de vídeo filmados durante o verão formaram a base de um curso a distância. Taras Sharov, coautor da escola, fez um vídeo introdutório no qual explica brevemente:

1. A quem se destina a Escola de Design?
2. Sobre o que é a nossa escola?
3. Como perceber corretamente os materiais escolares?
4. Como concluir o treinamento?
5. Por onde começar?

1. PARA QUEM É A ESCOLA DE DESIGN?

A escola não foi projetada para iniciantes em design.

2. DO QUE É A NOSSA ESCOLA?

O treinamento é dividido em 4 blocos:
1. Projete em uma grande empresa.
2. Prototipagem.
3. Design de produto.
4. Trabalho em equipe.
E também o seu projeto pessoal (prática).

3. COMO PERCEBER CORRETAMENTE OS MATERIAIS ESCOLARES?

Deixe de lado as críticas por um tempo e esteja aberto a tudo que é novo. Procure estudar mais detalhadamente os temas que serão abordados nos materiais escolares.

4. COMO TREINAR?

1. Prepare-se para trabalhar.
2. Escolha uma marca e imagine-se como um designer trabalhando para essa marca.
3. Tenha uma ideia de produto que complemente a linha de produtos da marca. Deve ser um produto pequeno – não mais complicado que o Instagram.
4. Trabalhe na versão russa do produto.
5. Durante a primeira e a segunda turma da nossa escola, aja com base na sua intuição. A partir da terceira seção, siga nossas recomendações.

5. POR ONDE COMEÇAR?

Se você não está familiarizado com HTML, CSS e JavaScript, deve começar com os cursos básicos da Codeacademy. Além disso, antes de começar, recomendamos aquecer o cérebro com algumas dicas do Bureau de Gorbunov.

Escola de Design, lançada no verão de 2015 - os participantes do curso poderão percorrer sequencialmente todas as seções da Escola, ouvindo palestras dos funcionários da Yandex e trabalhando simultaneamente em seus próprios projetos. As videoaulas serão publicadas sequencialmente, todas as semanas, às terças-feiras. O curso dura 10 semanas e termina no dia 5 de abril.

Os editores do site aprenderam com os criadores da Escola detalhes sobre o novo vídeo-curso e seu trabalho.

Conte-nos sobre os resultados da Escola de Design. Você está satisfeito com os resultados?

Lola Kristallinskaya, organizadora da Escola de Design, vice-chefe do departamento de design da Yandex: No verão de 2015, realizamos pela primeira vez a Escola de Design. Para a grande equipa de designers Yandex - aliás, já existem cerca de 140 designers na nossa empresa - este foi um evento importante para o qual estávamos a preparar-nos seriamente.

Discutimos acaloradamente sobre o programa e formato do treinamento: “O que é design em uma grande empresa? O que um designer de produto deve saber? Como ele deveria trabalhar com a equipe?” Designers iniciantes têm muitas dúvidas e foi necessário entender como reunir conhecimentos aparentemente dispersos em uma história coerente e encaixá-los em um curso intensivo de 2,5 meses.

Com isso, o programa incluiu não apenas blocos práticos, como prototipagem, mas também sobre trabalho em equipe, benefícios de profissões afins, entre outros. A ordem das seções não foi escolhida por acaso - de acordo com nosso plano, o aluno da Escola desenvolve gradativamente habilidades práticas, atinge uma certa maturidade profissional - e na final está pronto para defender seu projeto.

Há um grande interesse no design de produtos, e não apenas por parte dos empregadores - recebemos 780 candidaturas para formação, com tarefas de teste concluídas, e realizámos 70 entrevistas, que 32 pessoas completaram com sucesso.

Um deles, ainda no início dos estudos, decidiu tentar conseguir um emprego na Yandex e, depois de passar nas entrevistas, juntou-se a nós. Foi muito importante para nós escolhermos caras que levassem o treinamento a sério. Conseguimos e 30 alunos da Escola, dos 31 inscritos, chegaram à defesa final do projeto.

Como resultado da Escola, Yandex contratou 16 formandos; outros foram desenvolver seus próprios projetos ou retornaram às empresas em que trabalhavam.

Taras Sharov, organizador da escola, chefe do grupo de prototipagem de novos produtos de Pesquisa, Yandex: O retrato de um aluno ideal em nossa escola é assim: você, como designer, já cumpriu mais de uma vez as tarefas que lhe foram atribuídas, seus clientes aceitaram seu trabalho e ficaram satisfeitos com ele. Aos poucos, você começou a duvidar que o cliente realmente entende o que precisa. Ou não há nenhum cliente e o candidato mais próximo para essa função é você mesmo. Muitas vezes você se pergunta “como entender: o que é certo e o que é errado?”, você tem a motivação para entender bem essa questão.

Ao desenvolver o programa escolar, tentamos responder à pergunta “o que um designer de produto de uma empresa como a Yandex deve saber e ser capaz de fazer?” Portanto, temos um aspirante a designer de interface. Onde ele deveria se desenvolver?

Usamos a seguinte analogia: o desenvolvimento de um designer é como cortar uma árvore - quanto mais experiência, mais anéis no corte. Mais perto do centro do corte estão as habilidades artesanais - afinal, muitos começam com a prática. E mais perto do anel externo da fatia está o conhecimento abstrato - são reflexões sobre o real significado do trabalho do designer.

Qual é a ideia do vídeo-curso da School of Design lançado hoje?

Hoje, a Yandex está abrindo um curso de vídeo remoto para a Escola de Design - os participantes do curso poderão percorrer sequencialmente todas as seções da Escola, ouvindo palestras dos funcionários da Yandex e trabalhando simultaneamente em seu próprio projeto.

No início do curso você precisa escolher uma marca conhecida e familiar, imaginar-se como um designer trabalhando para ela e ter a ideia de um pequeno produto que irá complementar a linha de produtos. Você trabalhará com este produto ao longo do curso. É improvável que simplesmente assistir a vídeos seja eficaz.

Os detalhes estão na lição introdutória de Taras Sharov:

Esboço da palestra introdutória:

1. A quem se destina a Escola de Design?
2. Sobre o que é a nossa escola?
3. Como perceber adequadamente os materiais escolares?
4. Como conseguir treinamento?
5. Por onde começar?

As videoaulas serão publicadas sequencialmente, todas as semanas, às terças-feiras. O curso dura 10 semanas e termina no dia 5 de abril.

Os participantes do curso podem enviar projetos ao Yandex para revisão?

Lola Kristallinskaya: Estamos prontos para recrutar um grupo experimental que terá a oportunidade de receber consultas de nossos professores durante o estudo do projeto. Iremos informá-lo sobre o início e as condições de recrutamento adicionalmente durante o mês de fevereiro.

Enquanto isso, recomendamos que você se prepare para um trabalho sério: assista a palestras, leia literatura adicional e, ao mesmo tempo, trabalhe no seu projeto. Durante o processo de aprendizagem, seu conceito pode mudar seriamente. Seu objetivo não é tanto o resultado final, mas o processo. A escola dá a oportunidade de ampliar seus horizontes e tentar trabalhar em um produto como se faz nas grandes empresas.

Você está planejando lançar uma segunda entrada na Escola de Design?

Lola Kristallinskaya: Sim, estamos planejando abrir uma Escola de Design Móvel este ano. Iremos informá-lo sobre o início e as condições do recrutamento em março.

Uma excelente oportunidade para ingressar em uma nova profissão. Portanto, decidi realizar uma tarefa de teste.

A tarefa consiste em duas partes:

1. Confira os produtos móveis da Yandex e sugira algumas ideias para melhorar qualquer um deles.
2. Propor um conceito de aplicação mobile para o serviço Yandex.Travel. O resultado deve ser algumas telas principais e uma descrição de como funciona e por quê.

A segunda tarefa acabou sendo mais difícil do que eu pensava. Parece que cometi todos os erros que pude e falarei sobre isso a seguir.

Processo

Fiquei sabendo da matrícula na Escola pouco antes de ir para Yekaterinburg para o DAMP. No caminho do trem, comecei a pensar na interface do aplicativo e a desenhar telas em um bloco de notas.

Este foi o primeiro erro. Comecei a construir interfaces do jeito que queria. A coisa certa a fazer seria primeiro entender quais necessidades a interface deve resolver e construí-la de acordo.

Quando voltei de Yekaterinburg, tive 12 dias para concluir duas tarefas como parte da tarefa de teste. Para entender melhor a passagem do tempo, pendurei um pedaço de papel com os dias pela frente para lembrar o prazo. Todas as noites eu riscava o dia anterior.

Ícone

O usuário conhece o aplicativo antes de iniciá-lo. O ícone do aplicativo é muito importante, então comecei por aí. Tomei como base o ícone de um serviço web Yandex.Travel já existente.

Comecei desenhando um ícone no meu:

Meu segundo erro. Parece bom, mas na realidade não adianta. Quando comecei a desenhar no Sketch, acabou sendo uma porcaria completa:

O certo a fazer não seria redesenhar um ícone existente, mas começar pelas associações que o serviço evoca. Yandex.Travel é um serviço de busca de passeios e escolha de hotéis.

A primeira associação que me veio à cabeça foi um copo de cocktail que permite relaxar, como uma viagem ao mar.

Eu concordo, parece patético. Embora você possa até notar o Y no logotipo do Yandex. Esta opção não é adequada, pois associar o serviço a uma bebida alcoólica não é uma boa ideia. Próximas associações de viagens: palmeiras!

Percebi que havia cometido um erro novamente. Sim, comecei a desenhar ícones com base em associações, mas eles estavam no vácuo. Seria mais correto estudar os ícones dos aplicativos móveis Yandex, destacar recursos comuns e usá-los em combinação com associações para desenhar um ícone.

Quem iria querer aceitar uma aberração dessas em sua família?

Os ícones dos aplicativos Yandex são simples e não carregam muitas associações. Para o Transporte eles têm um ônibus, para os Correios eles têm um envelope e para o Mercado eles têm um carrinho de supermercado.

Começo a procurar associações simples para Viagem: bagagem, mala, passagem. Enquanto procuro implementações simples de ícones, me deparo com uma bússola. Na verdade, a bússola e a sua imagem são familiares a todos. Eu desenho um ícone e o visto com cores corporativas. Verifico como ela se sente na família:

Lembro-me que metade do tempo antes do prazo já passou. Falta uma semana. Desenhar um ícone não é uma tarefa fácil. Escolho a opção com bússola e passo para a interface do aplicativo móvel.

À esquerda está um ícone com bordas para uma página com lista de aplicativos mobile, à direita um ícone para uso em um protótipo, não deve ter bordas.

O ícone se sente bem em seu habitat natural:

Aplicativo móvel

Abri o Yandex.Travel no meu smartphone para ver como é a versão mobile do site. Em seguida, instalei os seguintes aplicativos: Booking, Ostrovok, Travelata.ru, Aviasales e AirBnB para ver como ficaria a interface em aplicativos dedicados a viagens e busca de hotéis/passeios. Instalei todos os aplicativos Yandex disponíveis para iPhone para encontrar padrões comuns nas interfaces.

Comecei a procurar chutes no drible na esperança de encontrar interfaces interessantes e usá-las como base para o meu conceito. Este foi meu próximo erro.

As fotos no drible revelaram-se divorciadas da vida. As telas que encontrei eram lindas, mas estavam no vácuo e não resolviam o problema.

Determinado quem usará o aplicativo móvel Travel. Em primeiro lugar, são aqueles utilizadores que já utilizaram o serviço através da versão mobile do site.

A transição para o aplicativo da versão mobile do site deve ser o mais simples possível para o usuário, portanto a interface deve ser familiar e familiar.

Tomei como base a interface da versão mobile do site e modifiquei-a para se adequar à realidade mobile. O resultado foi um arquivo de esboço de 8,7 MB e 15 pranchetas:

Ao contrário da versão mobile, o aplicativo agora conta com uma página com seleção de tours pessoais, possibilidade de adicionar resultados de pesquisa aos favoritos e um botão “Histórico”, que armazena o histórico das consultas de pesquisa do usuário.

Protótipo

Nesta fase, percebi que cometi o maior erro durante toda a tarefa de teste.

Desenhei interfaces para a tela do meu antigo iPhone 4es para demonstrar o funcionamento do conceito nele. Ao abrir a imagem do aplicativo pela primeira vez, percebi que o tamanho das pranchetas não correspondia ao tamanho da tela do smartphone.

No Sketch, minhas telas tinham dimensões de 320 por 480 pixels, mas precisavam de 640 por 960. Comecei a refazer todas as telas. Então percebi que os elementos ficam bem no Sketch, mas em um smartphone eles são pequenos.

Seria mais correto abordar o processo de forma diferente: não “Desenhar a interface” → “Iniciar a prototipagem”, mas desenhar uma tela e verificar imediatamente como ela é exibida em um smartphone, o que economizaria alguns dias de trabalho.

Antes de iniciar a tarefa de teste, optei por uma ferramenta de prototipagem - Framer Studio. Lá você pode escrever em CoffeeScript e fazer animações legais. Na verdade, não foi fácil dominar os recursos do Framer e implementar minha interface nele em pouco tempo. Não há para onde ir, o prazo está se aproximando, precisamos flexibilizar.

Na escola, Anton Shein mencionou o serviço InVision. Comecei a descobrir.

O serviço acabou sendo intuitivo: você faz upload de fotos e vincula-as a transições. Você pode personalizar animações para transições, definir seu próprio ícone de aplicativo, que será exibido quando salvo na tela inicial do iPhone. Isso é o que eu preciso!

Processo de prototipagem no InVision

Houve alguns problemas. Eu tive que lutar com a barra de status.

A barra de status é uma barra de interface que exibe a hora, a carga da bateria e o sinal do celular. Meus layouts tinham sua própria barra de status, mas o InVision pode exibir a do sistema. Se você salvar o ícone na tela inicial e iniciar o aplicativo por meio dele, a barra de status se fundirá com o plano de fundo.

Quando salvamos o ícone do site na tela inicial e o iniciamos, o site abre através da visualização web. A barra de status pode ser configurada por meio da meta tag apple-touch-icon. Infelizmente, a barra de status não pode ser configurada para ser transparente e ter texto em preto. Somente com texto branco e fundo preto.

Solução para o problema: instale o aplicativo InVision e use-o para demonstração.

Como o conceito teve que ser demonstrado através de outro aplicativo, a integridade da demonstração foi violada. Criei um cenário: mostrar o aplicativo em execução, voltar ao ícone, falar sobre ele e voltar ao aplicativo, sem clicar no ícone.

Resultado

Σ

Sim, esqueci completamente de dizer. Antes da tarefa de teste, eu nunca havia trabalhado no Sketch. Acontece que é fácil de aprender.

É muito mais difícil mudar para o design de aplicativos móveis. Como desenvolvedor web, só tenho interfaces web na minha cabeça. Os aplicativos têm casos de uso e recursos completamente diferentes.

A principal razão pela qual desejo me matricular na Escola de Design Móvel é adquirir conhecimento e experiência na criação de design de aplicativos e aprender a pensar como um designer.

Concluí recentemente o curso Yandex.Design. Estudei o material sozinho. Mas não tive oportunidade de comunicar com outros alunos, fazer perguntas aos docentes e foi difícil sentir o ambiente da Escola.

Por isso, quero me matricular na Escola de Mobile Design e assistir pessoalmente a palestras, tirar dúvidas e, o mais importante, ganhar experiência na criação de um produto junto com outros alunos.

Serão aceitas apenas 30 pessoas, os resultados serão divulgados até 27 de maio. Resta aguardar os resultados e torcer pelo melhor, mas enquanto isso você pode me apoiar curtindo e comentando o post.

Ficarei feliz em ouvir comentários e sugestões sobre a tarefa de teste.