BAIXE OS ARQUIVOS DE EXERCÍCIO AQUI

Projeto do curso 01 – Página inicial da Wireframe e entre em contato conosco

Revise o resumo e a persona do cliente: Maynooth Furniture.
1. Arquivos de exercícios > Projetos do curso 1 > Resumo - Maynooth Furniture.pdf
2. Arquivos de exercícios > Projetos do curso 1 > Persona - Maynooth Furniture.pdf
Página inicial
1. Usando as habilidades que aprendemos até agora, faça um wireframe da página inicial usando a função da página inicial listada no brief:
  1. Logotipo
  2. Nav
    1. Sala de estar
    2. Quarto
    3. Cozinha e jantar
  3. Cesta de compras
  4. Contato
  5. Caixa de pesquisa
  6. Slider de herói
  7. vii.New na loja
  8. viii.Ideias de inspiração
  9. Ofertas de folga
  10. Rodapé
Fale conosco
1. Crie uma segunda prancheta chamada “entre em contato conosco”.
2. Usando exemplos do modelo XD de “fios” ou criando sua própria versão. Crie um formulário simples entre em contato conosco.
3. Consulte outros sites para obter exemplos.
Crie JPG do trabalho finalizado.
1. Arquivo > Exportar todas as pranchetas > Jpeg
Compartilhe seu trabalho em qualquer um ou em todos estes:
1. Seção de assinaturas deste site
2. Adicione aos comentários da página.
3. Redes sociais e a tag Dan
  1. Instagram: @bringyourownlaptop
  2. Twitter: @danlovesadobe
  3. Grupo do Facebook aqui.
4. Todos os â˜º acima

Projeto do curso 02 – protótipo

Conecte sua página inicial às suas pranchetas entre em contato conosco.
Sua página de contato conosco pode ser uma página ou um modal pop-up.
Faça uma captura de tela do seu protótipo.
1. Certifique-se de que você esteja no modo de protótipo.
2. Editar > Selecione tudo
3. Tire a captura de tela
  1. Mac
    1. CMD + Shift + 4
    2. Em seguida, arraste uma caixa em torno de suas pranchetas.
    3. Sua captura de tela será exibida na área de trabalho.
  2. PC
    1. Tecla do logotipo do Windows + PrtScn
    2. OU tecla do logotipo do Windows + Ctrl + PrtScn
      1. OU tecla do logotipo do Windows + Fn + PrtScn
    3. Sua captura de tela aparecerá em uma pasta chamada “Screenshots” dentro da pasta padrão “Pictures”.
Compartilhe seu trabalho em qualquer um ou em todos estes:
1. Seção de assinaturas deste site
2. Adicione aos comentários da página.
3. Redes sociais e a tag Dan
  1. Instagram: @bringyourownlaptop
  2. Twitter: @danlovesadobe
  3. Grupo do Facebook aqui.
4. Todos os â˜º acima

Projeto do curso 03 – símbolos e grades de repetição

Limpe seu painel de ativos de quaisquer ativos não intencionais.
Torne sua navegação e rodapé um símbolo nomeado em seu painel de ativos de assets.
Crie uma nova prancheta chamada “Página de categoria – sala de estar”
Como usar suas habilidades de wireframes atuais, incluindo a grade de repetição para criar uma página que lista todos os produtos que aparecem nessa categoria.
1. Liste as coisas que você sente que precisam estar nesta página. Se houver cartões, o que deve estar nos cartões. Ele precisa de um navegador à esquerda como o mockup do instructorHQ? Lembre-se de manter Katherine em mente!
2. Consulte os sites de comércio eletrônico existentes para obter ideias sobre como uma página de categoria pode funcionar.

Por exemplo: www.ikea.com, www.dfs.co.uk, www.habitat.co.uk, www.amazon.com, www.ebay.com.

Crie uma nova prancheta chamada “Página do produto”
1. Usando suas habilidades de wireframes atuais, crie uma página que mostre detalhes sobre o produto final.
2. Como acima, liste todas as coisas que você acha que deveriam estar nesta página para ajudar Katherine a fazer uma compra.
Protótipo de todas as páginas.
1. Conecte-os todos em um modelo de trabalho.
Faça uma captura de tela e compartilhe usando as opções listadas anteriormente.
1. Após compartilhar seu trabalho, consulte as versões de outras pessoas e ofereça incentivos e críticas construtivas.

Projeto do curso 04 – feedback do Wireframe

Crie um protótipo público.
1. Dê um nome: Maynooth Prototype V1.0
Compartilhe o link com alguém que você conhece e peça para que ele deixe um comentário.
Grave a si mesmo fazendo uma demonstração básica.
Compartilhe seu link e vídeo em qualquer um destes casos:
1. Seção de assinaturas deste site
2. Adicione aos comentários da página.
3. Redes sociais e a tag Dan
  1. Instagram: @bringyourownlaptop
  2. Twitter: @danlovesadobe
  3. Grupo do Facebook aqui.
4. Todos os â˜º acima
Não se esqueça de comentar o modelo de outra pessoa para entender como é ser o cliente. Alguém vai fazer o mesmo por você para que você possa ver como é receber feedback.

Projeto do curso 05 – Moodboard

Com o mobiliário Maynooth em mente, crie um moodboard para ideias de estilo, fonte, cores e layout.
Adicione o quadro de humor à sua prancheta ou niiice.io.
Faça uma captura de tela do seu moodboard.
Compartilhe seu moodboard em qualquer um ou em todos estes:
1. Seção de assinaturas deste site
2. Adicione aos comentários da página.
3. Redes sociais e a tag Dan
  1. Instagram: @bringyourownlaptop
  2. Twitter: @danlovesadobe
  3. Grupo do Facebook aqui.
4. Todos os â˜º acima

Projeto do curso 06 – cores

Opção 1: usando as cores existentes.
1. Importar o logotipo da Maynooth.
  1. Arquivos de exercícios > Projeto do curso 1 > Logos > Logo-Maynooth-Option1.svg
2. Adicione as cores do logotipo ao seu painel Asset.
3. Adicione as cores do logotipo ao seu painel Amostras.
4. Reordene ambos os conjuntos de cores.
Opção 2: usando suas próprias cores.
1. Escolha suas próprias cores e atualize o logotipo.
2. Importar o logotipo da Maynooth.
  1. Arquivos de exercícios > Projeto do curso 1 > Logos > Logo-Maynooth-Option1.svg
3. Desagrupe o logotipo.
4. Atualize com suas próprias cores.
Compartilhamento
1. Compartilhe seu trabalho apenas no momento se você tiver escolhido suas próprias cores.
2. Faça uma captura de tela do seu novo logotipo colorido e compartilhe:
  1. Seção de assinaturas deste site
  2. Adicione aos comentários da página.
  3. Redes sociais e a tag Dan
    1. Instagram: @bringyourownlaptop
    2. Twitter: @danlovesadobe
    3. Grupo do Facebook aqui.
  4. Todos os â˜º acima

Projeto do curso 07 – texto e buttons

Crie sua pilha de texto.
1. Título 1, título 2 etc.
Adicione aos seus estilos de personagem.
Crie seu texto de herói (título 1 e corpo do texto).
1. Como seu site é um site de comércio eletrônico, você vai descobrir que o espaço de herói é mais sobre promoções e especiais e menos sobre o desenvolvimento da marca, então teremos uma imagem de herói sazonal.
  1. Por exemplo, primavera, Natal, sexta-feira negra, etc.
2. Busque inspiração, para sites de móveis existentes.
Crie um button na seção de heróis
1. O que sempre se encaixa com a promoção que você decidiu usar.
  1. Por exemplo, comece a comprar, compre agora, mais detalhes.

Projeto do curso 08: desenhe seus próprios ícones

Como usar qualquer uma das ferramentas que aprende até agora no curso (caneta ou booleano) crie:
1. Ícone da conta.
2. Ícone do carrinho de compras.
3. Além disso, mais um ícone de sua escolha.
Adicione ao seu modelo de móveis da Maynooth.
Faça uma captura de tela dos ícones do seu modelo e compartilhe.
1. Seção de assinaturas deste site
2. Adicione aos comentários da página.
3. Redes sociais e a tag Dan
  1. Instagram: @bringyourownlaptop
  2. Twitter: @danlovesadobe
  3. Grupo do Facebook aqui.
4. Todos os â˜º acima

Projeto do curso 09: mockup completo de Hi Def

Esta é uma grande para você! Aprendemos muito sobre a criação de imagens e gráficos. Agora é hora de colocar as ferramentas em prática para transformar seu modelo em um design finalizado. Quero que você use todas as ferramentas/técnicas listadas abaixo em seu design de móveis da Maynooth. Você vai ser melhor em algumas coisas do que em outras. Quero que você se concentre nas coisas nas quais não é bom â˜º

Competir com as visualizações do site da área de trabalho para as páginas seguintes. Vamos trabalhar nas versões para celular/aplicativos mais tarde no curso. Lembre-se de que você está criando para Katherine!
1. Página inicial
2. Página de categoria, por exemplo, sala de estar
3. Página do produto, por exemplo, sofá de 3 lugares
Certifique-se de incluir todas as características do resumo (Arquivos de exercícios > Projeto do curso > Brief — Maynooth Furniture.pdf).
1. Observação: se houver alguma coisa na lista que você não entenda o significado de simplesmente ignore e siga em frente. Normalmente, você obteria esclarecimentos do cliente, mas é provável que não possa voltar para você com a rapidez suficiente e você será retido por mim.
Use pelo menos uma instância das seguintes ferramentas/técnicas em seu design.
1. InDesign
  1. Crie pelo menos um objeto/gráfico no InDesign e leve isso para seu modelo XD.
2. Unsplash
  1. Baixe pelo menos 1 imagem para usar em seu design do Unsplash.
  2. Adicione a imagem à biblioteca da CC por meio do Photoshop ou do Illustrator ou do InDesign e encontre imagens visualmente semelhantes.
    1. Cabe a você decidir usar a imagem do Adobe Stock com marca d'água em seu design, mas certifique-se de que você registrou seus resultados na Biblioteca da CC e compartilhe com sua própria lição de casa.
3. Photoshop
  1. Abra uma das suas imagens Unsplash no Photoshop.
  2. Adicione-o à sua biblioteca da CC.
  3. Em seguida, adicione isso ao seu mockup do XD.
  4. Em seguida, abra o item da Biblioteca CC (não o original)
  5. Lembre-se de que, para abrir o item da Biblioteca da CC no XD, você precisa abrir a biblioteca: Arquivo > Abra as bibliotecas da CC e clique com o botão direito do mouse e escolha “editar”.
  6. Ajuste a imagem no Photoshop
    1. Por exemplo, mascaramento, nível/curves, filtros, escala de conhecimento de conteúdo: qualquer coisa.
  7. vii.Salve e feche a imagem atualizada e veja ela ser atualizada no XD… eventualmente.
4. Mascare pelo menos uma imagem.
5. Ajuste o desfoque ou a treva de pelo menos uma imagem.
  1. Talvez como uma imagem de fundo como a que fizemos na página de perguntas frequentes.
Faça uma captura de tela da página 3 do seu modelo e compartilhe.
1. Seção de assinaturas deste site
2. Adicione aos comentários da página.
3. Redes sociais e a tag Dan
  1. Instagram: @bringyourownlaptop
  2. Twitter: @danlovesadobe
  3. Grupo do Facebook aqui.
4. Todos os â˜º acima

Projeto do curso 10: APP/site para dispositivos móveis

O cliente solicitou uma versão de APP do site de comércio eletrônico.

Crie versões móveis das 3 páginas que você criou para a visualização de área de trabalho do site.
1. Página inicial
2. Página de categoria, por exemplo, sala de estar
3. Página do produto, por exemplo, sofá de 3 lugares
Como este é um aplicativo, quero que você crie uma página de login e de inscrição.
Não se importe com a prototipagem nesta fase. Vamos ver a prototipagem específica para dispositivos móveis nos próximos vídeos.
Faça uma captura de tela da versão móvel do seu mockup e compartilhe.
1. Seção de assinaturas deste site
2. Adicione aos comentários da página.
3. Redes sociais e a tag Dan
  1. Instagram: @bringyourownlaptop
  2. Twitter: @danlovesadobe
  3. Grupo do Facebook aqui.
4. Todos os â˜º acima

Projeto do curso 11: micro interações

Com seu projeto da Maynooth Furniture, crie pelo menos 3 exemplos de suas microinterações. Você pode usar qualquer uma das técnicas aprendidas no curso até agora ou criar a sua própria.
Grave a si mesmo testando as animações.
Crie uma versão GIF animada do seu protótipo
1. Você pode usar o Adobe Media Encoder ou https://ezgif.com/video-to-gif
Compartilhe seu GIF animado:
1. Seção de assinaturas deste site
2. Adicione aos comentários da página.
3. Redes sociais e a tag Dan
  1. Instagram: @bringyourownlaptop
  2. Twitter: @danlovesadobe
  3. Grupo do Facebook aqui.
4. Todos os â˜º acima

Projeto do curso 12: testes com usuários

Quero que todos façam um teste moderado. Isso é feito pessoalmente. Faça notas e alterações com base no feedback deles.
Inscreva-se para uma conta de avaliação com usertesting.com e tenha seu design do Maynooth testado.
Neste exercício, quero que você compartilhe sua experiência com todos, em vez de capturas de tela ou protótipos. Conte-nos como foi. O que você aprendeu. O que você faria diferente da próxima vez. Faça perguntas.

Projeto do curso 13 – ciclos de rugido

Esta é uma grande. Isso pode ser tão grande ou pequeno quanto você queira tomar. Seria um projeto perfeito para seu portfólio. Use todas as habilidades que você aprendeu no curso para criar um site e/ou aplicativo móvel para ciclos de rotação.

Revise o resumo e a persona do cliente: Roar Bikes.
1. Arquivos de exercícios > Projetos do curso 2 > Brief: Roar Bikes.pdf
2. Arquivos de exercícios > Projetos do curso 2 > Persona - Roar Bikes.pdf
O logotipo está disponível em Arquivos de exercício > Projeto do curso 2 > Logotipo
Você vai precisar criar wireframes e protótipos de alta fidelidade.
Fontes, cores e imagens são todas da sua responsabilidade.
Tenha seus protótipos de HiFi testados.
Crie e compartilhe:
1. Flats
  1. Capturas de tela das versões de wireframes e de hifi.
2. Links públicos para seus exemplos de hifi.
3. Mockups in situ
  1. Exemplos do seu trabalho em que estão sendo usados.
  2. Como as versões que fizemos com objetos inteligentes no Photoshop usando os gráficos do “Adobe Market > para posicionamento”.
4. Micro interações x3
  1. Gostaria que você animasse qualquer uma das suas micro interações ou transições de prancheta e compartilhasse por MP4 ou GIF animado
  2. Pontos extras: exemplos do After Effects ou da torta proto.
Compartilhe seu trabalho em qualquer um ou em todos estes:
1. Seção de assinaturas deste site
2. Adicione aos comentários da página.
3. Redes sociais e a tag Dan
  1. Instagram: @bringyourownlaptop
  2. Twitter: @danlovesadobe
  3. Grupo do Facebook aqui.

Todos os â˜º acima