Aplicativos de assassino de design para compradores móveis | Beckii Adel | Skillshare

Velocidade de reprodução


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Aplicativos de assassino de design para compradores móveis

teacher avatar Beckii Adel, Designer

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

13 aulas (19 min)
    • 1. Apresentação

      1:17
    • 2. Preparando-se para o curso

      0:39
    • 3. Explorando

      0:40
    • 4. Criando um moodboard

      0:50
    • 5. Design de aplicativos 101: práticas recomendadas

      2:27
    • 6. Como pesquisar UI/UX

      1:06
    • 7. Listando os passos essenciais

      1:27
    • 8. Quadros de fio ásperos para desenhos animados

      0:48
    • 9. Montagem

      1:05
    • 10. Iterações de Wireframe

      1:11
    • 11. Iterações de design

      0:43
    • 12. Finalizando!

      0:35
    • 13. Como criar meu aplicativo Everlane

      5:54
  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

631

Estudantes

5

Projetos

Sobre este curso

Becki Adel, Designer do Dínamo a agência de design digital em Montreal, dá uma olhada em seu processo criativo ao projetar um aplicativo. O objetivo do curso é projetar as telas principais de um aplicativo de comércio eletrônico para a marca de moda favorita do aluno. Usando estilos e gráficos existentes da marca, os alunos vão criar quadros de humor, fazer muitas pesquisas de UI e UX, desenhando wireframes ásperos e iterando em seus wireframes e desenhos até que eles estejam desenhando seus desenhos finais.

Conheça seu professor

Teacher Profile Image

Beckii Adel

Designer

Professor

Beckii is Dynamo's resident app designer and she'll tell you that her role isn't just to make interfaces usable, it's to make them highly addictive. Having already worked with quite a few prestigious companies, this unapologetic overachiever joined Dynamo as an intern in 2013 but was swiftly advanced to a permanent position as a designer, and to some, 'lil sister'. Young but fierce, the future is bright for this hot-yoga practicing, Skillsharing, 30 Day Self-Challenging, design ninja firecracker. She may be smiling 24/7, but some of us are convinced that she's secretly plotting to take over the world.

Visualizar o perfil completo

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%
Arquivo de avaliações

Em outubro de 2018, atualizamos nosso sistema de avaliações para melhorar a forma como coletamos feedback. Abaixo estão as avaliações escritas antes dessa atualização.

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui cursos curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. Apresentação: Oi, sou Becky Adele. Sou designer na Dynamo, uma agência de design digital em Montreal, Quebec. Nós projetamos e construímos sites e APS para empresas em crescimento em todo o mundo, incluindo a tonalidade de ervas puras de um comprador brilhante e Cry termina a semana apenas para citar alguns. Eu sempre digo aos meus amigos designers que se há uma coisa que eles precisam criar durante sua carreira criativa, tem que ser um aplicativo. É como um mundo totalmente novo quando comparado com a impressora Web, e eu estou totalmente apaixonado por ele. Então, aqui está a sua chance de criar um aplicativo próprio. Minha aula de escultura se chama Design Killer APS. Para mais enquanto os compradores, vamos estar projetando as telas chave Oven e Commerce App Para sua marca de moda favorita , vamos nos concentrar em projetar telas e funcionalidade que tornam um aplicativo de comércio e exclusivo. A categoria da tela inicial é exibida na tela de detalhes do produto. Vamos dar uma olhada em profundidade no processo de como projetar um aplicativo do início ao fim. Como estudante, você estará criando quadros de humor fazendo toneladas de pesquisa, simulando quatro quadros e iterando em seus próprios projetos Com essa experiência e minhas dicas e truques, você será capaz de aplicá-lo a qualquer APS futuro que você estará projetando, então vamos começar. 2. Preparando-se para o curso : Primeiro de tudo, obrigado por se inscrever na minha aula de habilidades curtas. Eu realmente espero que você goste. Para se preparar para esta aula, basta baixar um aplicativo ou dois para criar seus designs pessoalmente. Eu amo o Adobe Illustrator e vou usá-lo para esta classe. Eu também conheço designers que preferem usar a loja de eleitores, o que é totalmente legal, também. Você pode baixar um teste gratuito de 30 dias de qualquer um dos aplicativos adobe em seu site. Outras opções são o esboço Accenture e Balsâmico, todos os quais são aplicações construídas para simular e projetar cochilos. Links para esses sites para saber mais e Donald eles estão listados na seção de recursos da atribuição do projeto. 3. Explorando: Agora é a hora de descobrir em que marca de moda você deseja basear seu aplicativo. Dê uma olhada no seu armário. Que marcas de moda adoram o que sites de comércio e Você constantemente se encontra atraído para selecionar sua marca e deixar a exploração começar? Vou criar o meu APP para o Everly. Eles têm produtos de alta qualidade que são lindamente projetados, assim como seu site ISS. Portanto, o primeiro passo é familiarizar-se com o seu site de marcas de moda escolhido. Então vá comprar vitrines, vá pelo site e analise o fluxo que você percorre desde o momento em que você pousa na página inicial deles até quando você está prestes a clicar. Check out. Mas não, a menos que você esteja planejando fazer compras em vez de fazer essa aula. 4. Criando um moodboard: passar por suas marcas de moda escolhidas trabalha eu analisando minuciosamente o seu estilo. E não estou só a falar das roupas. Estou falando sobre os gráficos, a tipografia, as cores, as texturas, os botões, a fotografia que iconografia, tudo, o que fontes e estilos de texto fazem que eles usam para seus títulos? Legendas. Body Tex e Links Eles usam fontes Saw Sarah? Sarah, ambos. Como e onde eles são olhos talus ou texto em negrito? Eu quero que você vá através do site de moda e faça capturas de tela de cada peça e cada estilo que eles usam com essas capturas de tela. Eu quero que você faça um quadro de humor, colocando-os todos juntos em uma página e ilustrador foto shopper em design, salvá-lo como um J pic e postado na Galeria de Projetos. 5. Design de aplicativos 101: práticas recomendadas: Quando se trata de projetar APS, há um novo conjunto de regras e diretrizes que você geralmente não precisa lidar com outros meios. Capacidade de alcance do polegar Quando você segura seu telefone, há áreas mais acessíveis e menos acessíveis na tela. Claro, essas zonas mudam dependendo do tamanho do seu telefone. Portanto, ao projetar um aplicativo, é sempre bom ter isso em mente ao descobrir onde colocar seus botões. Você realmente quer que seu usuário alcance o topo da tela? Tamanho do botão Repetitivo Lee? Nossos dedos são maiores do que o tamanho de um cursor do mouse, então a Apple recomenda que todos os nossos botões ou links áreas de ervas um mínimo de 44 por 44 pixels para que o usuário possa facilmente clicar com a navegação dos dedos, as farpas superior e inferior da APP são os lugares mais seguros e limpos para colocar elementos de navegação à medida que deixa espaço no meio da tela. Para o conteúdo real, No entanto, muitos APS remover as barras completamente e simplesmente têm botões flutuantes, que em alguns casos funciona muito bem. Ah, é altamente recomendável que você leve alguns minutos para ler explosões de design, mapeamento no IOS, onde elementos de navegação do Google Maps e mapas da Apple são comparados. Eu postei o link na seção de referências da Atribuição do projeto. O Hambúrguer. O hambúrguer é um ícone que representa um menu. É um ícone era geralmente três linhas horizontais que, quando clicado, puxa para fora uma navegação oculta. Esta funcionalidade é muito útil em telas pequenas que não têm espaço suficiente para exibir muitos botões ou ícones nas barras superiores ou inferiores. Não use o hambúrguer como faria com uma gaveta de lixo. O lugar onde jogamos coisas para escondê-lo. Por favor, mantenha este espaço organizado, e Jeffrey, apenas os links mais importantes devem ir neste menu. Google Material Design Este é um animal por conta própria, por isso é altamente recomendável que você olhe através de suas diretrizes para obter uma análise aprofundada da análise do Google de sua linguagem visual. Isso também está vinculado na seção de referências da atribuição do projeto. Essencialmente, trata-se de como os designs digitais espelham e reagem como objetos maduros quando um usuário interage com ele. Ele também tem uma base muito proposital onde tudo sobre design de material foi extremamente pensado para proporcionar ao usuário uma experiência visual impecável. 6. Como pesquisar UI/UX: pesquisa, pesquisa e pesquisa um pouco mais. Durante toda a aula, você vai estar indo e voltando entre seu trabalho e fazendo pesquisa. Quero que você acesse o Pinterest e os outros sites que eu listei na seção de referências da atribuição do projeto. Primeiro, procure exemplos específicos que você I que poderia inspirá-lo para a sua tela inicial do seu aplicativo. Preste atenção aos layouts e ao conteúdo das telas. Alguns mapas podem ter na navegação Leah em sua tela inicial, enquanto outros podem ter produtos diretamente. Analisar as possibilidades que existem para a Europa. Além disso, fique de olho em todos os exemplos de UX que você possa gostar por nós. Refiro-me à interatividade. Se você clicar em uma foto ou botão, o que acontece também, como você vai incorporar design de material em seu aplicativo? Salve suas imagens favoritas em uma pasta em sua área de trabalho e, em seguida, continue a fazer pesquisas para a exibição da categoria e as telas de detalhes do produto quando você terminar, crie uma página de pesquisa para cada tela e publique-as como J. Paga no Galeria de projetos para que eu pudesse ver o seu progresso 7. Listando os passos essenciais: Vamos encarar, a Internet é um lugar grande e potencialmente assustador. Há muita informação por todo o lado. Nossa queda é um designer é simplificar e criar a melhor experiência de usuário possível enquanto faz nossos clientes felizes. Neste caso, queremos que os usuários convertam para clientes pagantes, então vamos nos concentrar estritamente no comércio e. Vamos começar com a tela inicial, abrir seu site de marcas de moda e tomar notas sobre o que precisa ser incluído. No meu caso. Ever Lean precisa de um logotipo, saco de compras, navegação e categoria chamada Ações ou C T.A s para exibição de categoria. O que precisa ser incluído? Deitado para sempre. Preciso incluir os títulos da seção do saco de compras de navegação, imagens do produto com seus nomes, preço e cor. Dependendo do seu site, você pode até precisar de uma funcionalidade de pesquisa ou filtro. Todas as pistas não incluem uma no seu estado, por isso vou continuar com o que eles têm por enquanto. Para obter detalhes sobre o produto, veja o que precisa ser incluído para tudo o que precisamos. Uma imagem principal com fotos adicionais. Preço do nome do produto com um detalhamento, opções de cores no menu suspenso. Suspirar seleção em um botão de bolsa e, em seguida, detalhes sobre o próprio produto. Mas o tamanho do estilo e eles se sentem sobre a fábrica 8. Quadros de fio ásperos para desenhos animados: Lembra quando fizemos toda aquela pesquisa para cada uma das telas chave? Bem, isso está prestes a tornar-se super útil. Pegue um lápis e papel, e eu quero que você comece a criar alguns quadros de guerra para você com a lista que você acabou de fazer. Quero que você passe por cada um dos exemplos de pesquisa de tela que você encontrou e veja como outros atos incluíram cada um dos elementos essenciais. Por exemplo, como outros APS exibem a categoria? C. T está na tela inicial? Onde eles são colocados? Encontre a melhor solução para a sua marca escolhida e praticamente zombe dela no papel para ter uma ideia de tamanho e posicionamento para todos os elementos essenciais que você listou. Isto vai ajudar-nos para quando começarmos a desenhar. Poste a tua armação até à galeria do Projecto para que eu possa ver o teu progresso. 9. Montagem : agora que temos algumas armações de arame áspero, órgão iterando neles. Tudo estará se reunindo no palco, então certifique-se de ter seus exemplos de pesquisa de quadro de humor e quadros de arame concluídos e próximos . Ao longo desta lição. Abra seu software de escolha e crie uma nova tela que mede 750 por 1003 134 pixels para um iPhone. Aplicativo seis. Se não for fã da Apple, não se preocupe. Sinta-se livre para projetar seu aplicativo para em um dispositivo móvel de sua escolha, pausa vídeo e reserve um momento para recriar seu quadro de arame áspero digitalmente. Em seguida, abra seu site de marcas de moda e vamos descobrir qual patrocinador usando nosso destaque uma seção de seu texto. botão direito do mouse e selecione Inspecionar elementos. Se a sua marca usa mais de uma diversão, certifique-se de fazer isso para todos os principais tipos de estilo sempre Laden usa tanto um serif quanto um pires . Se assim for, usando a ferramenta de elemento inspecionar, eu poderia ver que eles usam livro escolar século uma antena. Felizmente, tenho as duas tempestades para poder usá-las nas minhas simulações. Se você não tem as fontes que sua marca escolhida usa, você pode baixar uma fonte semelhante de fontes do Google ou fonts squirrel dot com 10. Iterações de Wireframe: Vejamos uma armação de arame e analisamos o quão equilibrado ou desequilibrado lá. No meu caso, a tela de detalhes do produto tem a maior quantidade de conteúdo e precisa da maior quantidade de estrutura para torná-lo não só intuitivo para o usuário, mas também visualmente agradável e minha armação de arame áspero. Eu inventei algo fácil e simples para cada um dos meus elementos essenciais, mas eu não estou inteiramente feliz com isso. Tenho problemas com onde colocar o preço, como exibir as opções de cor e tamanho, onde e como exibir o detalhamento do preço. E mesmo que qualquer uma das três seções de detalhes deva ou não estar escondida na área dobrável, através dela aeração, você poderá experimentar diferentes opções, e eu recomendo que você retorne ao seu exemplos de pesquisa. Se você não tem nenhum bom exemplo de um caso particular, não seja tímido de fazer mais pesquisas. Se alguma coisa , será vantajoso para você fazer o trabalho extra. Para simplificar o meu processo de criação. Gosto de duplicar minha tela para trabalhar em minhas iterações. Assim eu poderia ver o que funciona e o que não funciona. É também uma ótima maneira de ser capaz de dar um passo para trás e ver o quão longe eu cheguei para o meu primeiro post marcação seu melhor quadro de arame. É orações para a galeria do Projeto para que eu pudesse ver o seu progresso. 11. Iterações de design: Agora que temos um Leo sólido, podemos começar a adicionar a personalidade da marca. E finalmente dar vida às armações de arame. Comece lentamente a percorrer seus quadros de arame e adicione as fontes que a marca usa. Olhe para trás para o seu quadro de humor e veja como eles estilo lá. Cabeçalhos, subcabeça, links texanos do corpo de er. Eles usam uma variação de tamanhos de tipo e pesos? Incorpore esses estilos e suas armações de arame. Experimente um monte de opções através de orações Maurin e veja quais refletem a marca. Melhor começar. Eu não fiz nos Bryans fotografar nas caixas de espaço reservado e adicionar as cores da marca . Depois de terminar, tudo o que vai a milha extra e até mesmo zombar com as interações pode parecer o design do menu de navegação suspenso ou do carrinho de compras. Divirta-se com ele. 12. Finalizando!: e isso é um embrulho. Obrigado por participar da minha aula de compartilhamento de habilidades. Eu realmente espero que conosco nos bastidores vislumbre meu processo de criação que você seja capaz de aplicar o que você aprendeu a qualquer ato futuro que você esteja projetando. Estou ansioso para ver seus projetos finais, e por favor certifique-se de incluir todo o seu processo, incluindo suas placas de humor,exemplos de pesquisa, exemplos de pesquisa quadros de arame áspero e suas melhores iterações de arame e design. Quanto mais eu puder ver melhor eu poderei lhe dar uma crítica completa, então obrigado novamente, e espero que você tenha gostado. 13. Como criar meu aplicativo Everlane: Eu sempre adoro ver como outras pessoas criam seus projetos do início ao fim. Então eu vou entregar vocês nos bastidores. Olhe para como eu projetei o meu sempre lane up quando eu estou fazendo um quadro de humor para uma marca existente, eu gosto de ir através de seu site e fazer screenshots de todos os tipos de elementos gráficos e gráficos. Ao fazer isso, eu tenho um exemplo físico de como sua marca é visualmente representada on-line. Eu coloco todas as capturas de tela em uma tela em nenhuma ordem particular, e com isso eu sinto que eu tenho uma boa compreensão de como a marca se parece e se sente. Quando eu estava no colegial, eu tinha um técnico durante a aula onde eu era um super nerd e tinha vantagens e até mesmo fiz o dever de casa do outro aluno. Neste ponto, minha vida, minha vida, eu estava pensando em me tornar um arquiteto. É loucura pensar que agora estou fazendo algo dessa mesma linha. Mas para sites e APS, esboçar quadros de arame parece super chato e inútil. Mas eles são tão úteis. É uma maneira fácil e simples de exibir e entender como o aplicativo será estruturado antes ficar joelho profundamente no design, meus amigos são exatamente o que eles soam como. Molduras com fio. Todos os elementos são feitos de linhas e não incluem absolutamente nenhum design. Quando você sabe quais são os elementos essenciais, você o configura onde cada peça precisa ir. Se você nunca adivinhar o posicionamento de algo, vá fazer alguma pesquisa e veja como outros APS fazem isso, mantendo em mente as melhores práticas que mencionei em uma lição anterior. O maior erro de que qualquer um pode fazer enquanto seu design em é tentar caber tudo dentro de uma tela, que é como o acima do mito dobra para pessoas da Web Role especialmente em dispositivos móveis , Então tome tanto espaço quanto você precisa. E não esmague todo o seu conteúdo quando se trata de comida nas minhas armações. Tentei um monte de opções para tentar descobrir o que funciona. Comparei as marcas, a funcionalidade do site existente com os meus exemplos de pesquisa e vejo como as funcionalidades traduzem da web para o celular. Tente também replicar a funcionalidade do que eu gosto em outras operações, mas para a marca específica em que estou trabalhando. Por exemplo, quando eu tentei admitir Minkow, o site sempre lane, exibe suas opções de cor e tamanho no APP. Parecia chato e estranho. Então eu fiz algumas pesquisas e descobri que outro aplicativo, apesar de todas as cores e tamanhos centrados assim, eu achei que era interessante, então eu zombei dele. Ainda me pareceu estranho. Então eu voltei e caminhou até um par de outras opções em, e eu finalmente re exportado a primeira idéia e continuou a reiterar e refiná-lo. Até eu chegar a isso, eu costumo sugerir que você faça pelo menos 10 iterações, se não mais, antes de selecionar seu favorito e continuar. Quando eu estava na universidade dos meus lucros para nos pedir para fazer 30 orações por aula para lição de casa. Agora eu só faço uma tonelada mais de pesquisa e cuidadosamente reduzo minha inspiração, então eu sei exatamente o que zombar. Desenhar é a parte divertida. Eu olho para o meu quadro de humor e ver que estilos de ar usado e replicá-los para o aplicativo. É como um quebra-cabeça gigante, eles tentando descobrir quais estilos funcionam e onde eles devem ir. É aqui que a experiência em qualquer tipo de design gráfico ou visual é útil. A consistência é fundamental, e não ter muitos tipos, estilos ou distrações é o que manterá seu design limpo e com boa aparência. Na tela de exibição da minha categoria, experimentei várias opções sobre como exibir o produto, nome, preço e cor adicionando os estilos de tipos da marca. E mais uma vez referindo-se ao meu quadro de humor, eu fui capaz de selecionar o meu favorito e, em seguida, empurrar isso para a frente voltando para as opções de cor e tamanho. Eu pensei que desde que eu precisava de um drop down para exibir todas as cores que eu poderia usar um dos outros mock ups que eu fiz nos quadros de arame. Eu não queria que nenhum conteúdo fosse oculto quando a seção realmente fosse suspensa. Então eu decidi empurrar todo o conteúdo que está por baixo quando o usuário interage com ele. Então aqui estão meus projetos finais para minha tela inicial. Eu queria manter as coisas simples e certifique-se de incluir todos os elementos essenciais, que eram o logotipo, saco de compras de navegação e categoria CTS. Para a exibição da minha categoria, eu incluí uma imagem de banner que não era elemento essencial, mas eu senti que ele foi adicionado ao design geral por baixo. Incluí títulos de seção e, em seguida, as imagens do produto com o nome do produto, preço e cor. Enquanto fazia minha pesquisa, me deparei com UX do Instagram e realmente gostei de como. Quando você passa pelo feed, o nome de usuário fica na parte superior da tela até que o próximo nome de usuário o substitua. Eu pensei que isso iria ajudar a melhorar o u Y geral e u ex do meu aplicativo. Então eu mocked com isso funcionalmente pode parecer em uma tela separada, minhas páginas de exibição do produto preenchidas com conteúdo. No entanto, tentei mantê-lo o mais simples possível para que o usuário não fique muito distraído ou sobrecarregado com o conteúdo. Ao espaçar tudo, consegui manter a tela limpa e organizada. Todos os elementos essenciais estão incluídos, e eu incluí mesmo que seção de preços transparentes de sua página de produto, que eu pensei que era muito importante porque é parte do que faz sempre pista tão único como uma marca. Porque eu gosto de ir a milha extra. Eu também marquei com o menu de navegação seria parecido, como se isso não fosse o usuário estava interagindo com ele. Eu me certifico de incluir setas em cada módulo drop-down como uma educação visual para os usuários que em ação é necessário para prosseguir. E finalmente, a bicicleta de compras. Eu mantive super simples, usando as imagens do mesmo tamanho que a exibição da categoria e alinhado à esquerda o texto no lado direito, tendo em mente o estilo do texto para mantê-lo consistente com as outras telas. Sendo um perfeccionista Tipo B, sei que há muito mais para mim para continuar trabalhando e melhorando. Para mim, a parte mais desafiadora é tentar me orientar sobre o que realmente precisa ser melhorado e trabalhado. Acho útil fazer mais pesquisas e ver o sucesso da APS projetou seus elementos. E com isso, eu sou capaz de olhar para trás e analisar EF menos até parte ou falta alguma coisa. Depois de finalizar todos os meus designs, eu gosto de zombar deles dentro de um dispositivo iPhone simplesmente para fins de exibição. Se esta loja em design real para se tornar um aplicativo real, Eu fui enviado sobre o arquivo ai pacote para o desenvolvedor IOS para eles para construir. Mas desde que este é apenas um projeto pessoal que eu acabei de fazer para projetar e usar quaisquer aplicativos ou serviços que estão disponíveis para mim. Então, se você quer que seu projetado se sinta mais vivo, você pode experimentar. Visualização através da visão. Você pode carregar suas capturas de tela e adicionar pontos de acesso para que você possa interagir com elas. Você pode até adicionar um ícone e baixado para o seu telefone, que ele literalmente se pareça com um aplicativo real.