Processo prático de web design - como roubar de inspirações | Muhammad Ahsan Pervaiz | Skillshare
Menu
Pesquisar

Velocidade de reprodução


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

Processo prático de web design - como roubar de inspirações

teacher avatar Muhammad Ahsan Pervaiz, UI UX Visual Designer 15+ Years

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

    • 1.

      Introdução ao processamento de projetos de web Design

      1:54

    • 2.

      Interpretação do cliente com exemplos do mundo real

      10:32

    • 3.

      Como obter a direção do site da concorrente

      5:09

    • 4.

      Como faturo meu cliente web Design

      6:18

    • 5.

      Como obter direção de design em qualquer projeto de web Design

      7:52

    • 6.

      Como melhorar seu design com feedback

      13:52

    • 7.

      Estender suas inspirações com sucesso sem copiar

      7:15

    • 8.

      Como selecionar tipos para seu projeto de web Design

      12:33

    • 9.

      Experimentos de esquema de cores para design web

      8:32

    • 10.

      Usando e criar componentes e símbolos no design web

      7:02

    • 11.

      O design vai melhorar com tempo

      8:23

    • 12.

      Colaboração com desenvolvedores no projeto de web Design

      7:09

    • 13.

      Otimização de desempenho e carregamento preguiçoso

      9:08

    • 14.

      Implementação de projeto web design e serviço de pós-venda

      4:31

    • 15.

      O que o que fazer NEXT

      0:37

  • --
  • 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.

652

Estudantes

--

Projeto

Sobre este curso

Este curso é sobre o PRACTICAL WEB DESIGN . Muitos designers e mesmo desenvolvedores não saber como lidar e entregar um projeto de web Design desde a notícia do cliente ao breve resumo do cliente em uma verdadeira inspiração do cliente e como transformar as especulações e design em um design web

Este curso tem sua abordado. Isso vai ensinar você você

  • Como ler e interpretar o resumo do design web do cliente
  • Aprenda com a análise e inspiração de concorrente
  • Como roubar suas inspirações
  • Configurando o projeto de design web
  • Como seu design no site melhora com o tempo
  • Superar os problemas de colaboração com desenvolvedores web
  • Entrega do projeto de web Design
  • Problemas de desempenho, otimizações de imagem e dicas de carregamento
  • Como fornecer serviços de pós-venda

Este curso não ensino sobre as ferramentas de design mas todo o processo em que compartilhei meus dois dois projetos de Web Design do início ao final ao fim. Vou compartilhar com você todas as ferramentas, dicas e técnicas que uso o uso para entregar um projeto de web design web com sucesso .

Estou à espera de você dentro de . Vamos começar

Conheça seu professor

Teacher Profile Image

Muhammad Ahsan Pervaiz

UI UX Visual Designer 15+ Years

Professor

I started my Freelancing Career 10+ years ago and learned everything the hard way myself. I went from scratch to end up working for FORTUNE 500 companies like INTEL, PANASONIC and Coca-Cola.

In just 2 years of Serious UI Designing, I made my place on DRIBBBLE
Working with Art Directors from Coca-Cola and Project Managers from the UK, I learned a lot in short period of time.

Worked from App Icon Design to App UI Design, from wireframes, prototypes and Mockups Design. I have a hunger of perfecting User Interface from all aspects

What my students are saying about my Classes?

 

AWARDS & WINS

I am a multi-talented person who has won One Gold Medal, won a nationwide Poster Design competition from PANASONIC and won many Landing ... Visualizar o perfil completo

Level: Intermediate

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui aulas 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. Introdução ao processamento de projetos de web Design: Bem-vindo ao meu curso sobre como lidar com o projeto de design. Agora nas pontuações, eu vou compartilhar com vocês todo o meu processo de fazer um projeto de Web design de levar clientes breves traduzindo esses resumos e inspirações de clientes em design real. Como eu realmente experimento com diferentes tipos de letra, cores diferentes. Como meus Voss design moldou e mudou drasticamente depois de obter clientes feedbag. Como você pode obter feedback de outros designers e usá-los para melhorar seu design e como você está indo. Colabore com seus desenvolvedores como você está indo. Na verdade, implantar seu projeto para o seu cliente serviços pós-venda e um monte de coisas fora. Portanto, há muita informação valiosa escondida dentro desta classe. Então, se você está confuso sobre como, na verdade, todo o processo fora da Web design funciona e como você pode concluir isso com sucesso partir de clientes, Resumos toe realmente concedeu um design de página de destino, o que eu fiz na minha última projeto. Eu vou compartilhar com vocês dois exemplos dos meus últimos projetos nesta aula ou curso então, se você tiver alguma dúvida, este é um curso de abordagem prática que eu não vou te ensinar design. Isto é sobre todo o processo que eu uso ele vai melhorar Como você olha para o design, como você está indo dedo do pé Pegue o seu design no reboque Uma direção específica. Então há muito fora que você pode dizer técnicas que eu uso. Eu vou compartilhar com você. Espero que goste das pontuações. Se você tiver alguma dúvida, você pode sempre me perguntar ou começar uma discussão. Espero vê-lo em breve dentro das escolas. 2. Interpretação do cliente com exemplos do mundo real: nesta lição neste redo, eu vou falar sobre clientes Especificações para um projeto de Web design ou o que você chama clientes breve para um projeto de Web design. Vou compartilhar com vocês um resumo da vida real que recebi há três meses . Recentemente fiz este projeto. Era uma página inicial para o Nick responsável. Ótimo design para ah ah ah, Iris ou coleção de texto, Serviço ou textos. Direito é nos Estados Unidos, e eu vou compartilhar com vocês como eu realmente, você sabe, obter o dedo este relatório clientes Hoy realmente lê-lo. Como você realmente aponta coisas diferentes e o que temos que considerar ao ler breves clientes e classificações de clientes. Então eu mantenho a maioria das coisas em uma pasta chamada Client Specs. Então, quando eu abri-lo, você pode ver aqui são diferentes recursos É re fontes que são enviadas pelo cliente. Eles já estavam trabalhando em algo que era esse projeto, e eles já, você sabe, desenvolveram. Então eu não queria que tivesse uma armação de arame. Então, quando eles já têm alguma coisa, é alguma forma fora da ideia deles? Eu entendo que isso é realmente eles queriam construir então eu não, você sabe, você sabe, dizer a eles dedo desenhar arame arame principalmente. O que eu faço é deixá-los desenhar a moldura da barra. Então, se eles me enviaram algo assim, eu envio um e-mail de volta e digo que o que você está procurando? Então, o que realmente quer ser, então deixe-me mostrar-lhe um exemplo. Ok, então aqui temos outra página inicial, que eu fiz no ano passado. Página inicial do Vmc. E se você olhar para ele ou aqui você pode ver aqui nós temos documentos de embarque cães-docas, e esta é na verdade a página de destino deles. Este é, na verdade, o resumo deles. E este é o esboço que recebi deles, então eu disse isso a eles. O que você está procurando? Que tipo de página de destino. Você está procurando corpos em sua mente. Então desenham algo assim. Aqui temos chamada de logotipo, botão de chamada. Então temos esta imagem vai ouvir casa acessível e fácil de usar. Formulário de sinalização digital aqui. Algumas informações aqui indústrias esses produtos podem funcionar e coisas assim. Vídeos de dever. E este é um número de telefone e um endereço assim. Então isso é o que eu realmente faço eu digo a eles para desenhar algo para que eu possa você sabe, eles podem fazer isso em qualquer palavra ou qualquer software. O ponto de poder chato. Qualquer que seja o uso, eles podem desenhar algo assim e podem enviá-lo para mim. Estes são todos os recursos diferentes que eu tenho deles. Na verdade, esta é a página inicial, que eu vou mostrar a vocês. Estas são as outras especificações. Duas ou três coisas que devem ter seu breve deve ter cobertura é o que realmente eles querem . Em segundo lugar, qual é a concorrência deles. Então você pode ver Sky Kit. Eles me garantiram que estes são este é um site fora de seus concorrentes. Então eles me garantiram que o quê? Na verdade, eles alertaram o que são diferentes Você pode dizer características fora de seu produto. Hum, estes são diferentes, você pode dizer que usa o produto deles. E isso é também estes são este é realmente o breve. Então este resumo era muito pequeno. Mas se eu mostrar a vocês a recente que acabei de abrir aqui, esta é uma grande dor, que tem nove páginas. E a razão é que eles já estavam trabalhando em algo que é este modelo de trabalho. Então eles queriam integrar este formulário, que é na verdade um formulário de pesquisa no reboque, o design que estavam fazendo. E acho que a pessoa que desenvolveu isso é diferente e eu, eu, eu, que eu era designer. E eu também vou prepará-lo no reboque concedido para Mitt porque eu estou trabalhando com um desenvolvedor agora, então eles eram diferentes. Então este foi citado por outra pessoa. Não sei quem era. Então eso há mais algumas especificações que você pode ver. Mova isto para cá. Mova isto para cá. E se você olhar para este, eles eram que havia um monte de especificações diferentes como esta é a concorrência deles. Então eles me mostraram que esta é uma competição e assistir o que eles têm em sua versão móvel . Então eu tive que olhar para abrir meu dispositivo móvel e ver o que realmente esses links passam e o que eles realmente significavam. Então você tem que ler seus clientes de disco documentação de especificações específicas, palavra por palavra. Você tem que anotar tudo o que eles estão lhe dizendo. Você tem que saber para baixo. Você pode usar o papel e papel ruim emparelhado a lápis e você pode ver aqui Temos diferentes seções para desktop. Então este é o meu cliente de, tipo, dois ou três, eu acho que há mais de quatro ou cinco anos. Este é o único cliente para quem trabalho. Eu não tomo muitos projetos de design nos dias de hoje, então você pode ver o que aqui. Ei, é muito específico sobre as coisas que eu gosto. Precisamos de algo cabeçalho neste cabeçalho do que precisamos. Esta é a próxima seção do que tivemos este ouvir e ler testemunhos de alívio fiscal real onde vamos ter algum tipo de thes players de áudio html cinco players de áudio. Então esta especificação, este documento é na verdade sobre o design e o desenvolvimento fora do discurso, nem apenas um design. Então eu sou realmente você pode dizer, Jack Off altera quase. Deixei o desenvolvimento da Web e dei-o a uma pessoa que é mais experiência e mais . Você pode dizer exportação em cordas e mais rápido do que eu. Então eu mantive o meu manter sozinho apenas em apenas para a tarefa de design. E eu adorava desenhar. Aproveite isso. Eu quando eu fiquei preso em algum problema de acordo , realmente você sabe, sonhos. Minha energia, muito com muito discurso, então eu tento me abster disso. Então estas são todas as especificações diferentes. Até eles me garantiram alguns roteiros lá. Google scripts que eles queriam Toby carregado com sua página paralaxe com números. Havia algumas seções, vídeos do YouTube, e algumas seções que não foram incluídas lá. Especificações estão lá já construído página ou aqui, Deixe-me mostrar-lhe se eu tê-lo aberto aqui em algum lugar. Não. Ok. Então, para o celular , eles tinham , eles tinhamespecificações diferentes. Então, o que chamamos, chamamos de design adotivo. Então, em um dispositivo móvel, seu layout , suas coisas, eles vão mudar. E eles serão representados de forma diferente quando você estiver em sua versão desktop. Assim, a versão para desktop e as versões para dispositivos móveis não eram as mesmas. Vou te mostrar em um minuto. Esta é a última vez que você pode ver. Isto é o que realmente desenvolvemos. Então esta é uma versão final desenvolvida fora do mesmo site, então você pode ver que este é o cabeçalho. Basta olhar para ele. Eu estou indo dedo do pé, troque o dedo do pé. Hum, isso é um Então eu vou mudar para trás do dedo do pé normal. Você pode ver que esta é a versão desktop. Deixa-me mostrar-te isso. Aqui temos o número de telefone no topo, e depois temos este fardo. Obter uma análise de texto livre de impostos, e quando você clicar neste botão, esta fazenda está indo para o pé. Não se esqueça de ser mostrado aqui, e você pode usar isso e seguir em frente. Continua a senti-lo. E coisas assim estão passando para a próxima fase. Agora, quando você se move para essa quando você se move para essaversão responsiva, você pode ver ou ouvir tudo isso muda. versão responsiva, Não temos número de telefone aqui, e temos um Addo e depois do adulto, temos este formulário de sentimento e número de telefone está grudando na parte inferior. Então, se você se mover assim, você pode ver que o número completo vai ficar na parte inferior. E isso é realmente o que os clientes precisam de suas especificações. Eles queriam enfiar seu número de telefone aqui, então havia duas ou três coisas que eram realmente importantes, a linha número um está em toda essa área inteira ou a primeira vez que alguns usuários vêem lá. Sítio Web. Eles devem ver este formulário aqui para que no fundo você possa ver a forma Saray. Eles estavam muito orgulhosos de fazer isso, então eles queriam mostrar a todos. Então o segundo foi este número de telefone e algumas outras coisas. Como se tivessem depoimentos, depoimentos áudio. Eles realmente queriam que eles fossem, você sabe, com precisão jogáveis, facilmente acessíveis ou coisas assim. Além disso, eles queriam que ele carregasse muito rápido. Havia três ou quatro requisitos que eram realmente necessários, e eles realmente não querem se parecer com seus concorrentes. Então este é o problema mais difícil. Quando um designer tenta obter inspiração ou tentar ver a concorrência, eles tentam dedos 10 dedos, criam um design que é muito próximo da concorrência. E isso vai, você sabe, parecer uma cópia da concorrência deles. Não queremos ficar assim. Então tente ler seus clientes breves palavra por palavra, nem para baixo pontos diferentes. Vou recapitular o que realmente eu queria que você fizesse no relatório do cliente, e então o que você ia fazer era deixar seu cliente desenhar seus quadros vis. Você tem que saber o que eles realmente significavam. Quais são as partes mais importantes lá fora. resumo deles. Então essas são coisas diferentes, o que eles querem realizar. Este é um deles. Acho que não quero essa palestra, Toby, demorando muito. Então vamos passar para a próxima lição onde eu vou mostrar a vocês o que realmente é meu design aquecimento e o que eu realmente faço, como eu obter a inspiração, usando inspiração de meus concorrentes e o que eu realmente faço nesse rosto. Então vamos passar para a próxima lição. 3. Como obter a direção do site da concorrente: Agora neste vídeo, eu vou dizer a vocês como vamos olhar para seus concorrentes, seus clientes, seus clientes, computadores e o que são diferentes. Você pode as mesmas sugestões de design ou projetar direções de design. Você vai pegar de seu site a partir de seus projetos. E o que você vai fazer no seu projeto? Formar-se? Então, para o passo, Quando eu entendi o breve clientes, o segundo passo que eu dei é que eu visitar este site que é o centro de alívio fiscal dot org e você pode ver esta é a sua forma apenas pop up. E isso é quase a mesma coisa que nós desenvolvemos. Então você pode ver pessoal e você preencher este formulário e você obter avaliação gratuita. Portanto, este é apenas um formulário de um passo. O que tivemos é, na verdade, um formulário de pesquisa de várias etapas. Então, se eu tentar fechá-lo, você pode ver que eu voltarei. Então, no geral, o que eu sinto é que é azul no topo, que é azul escuro, que é profissionalismo feminino, que eles são realmente profissionais. O notado fora coisas sérias de negócios. Então por aqui, que é azul muito pálido, um azul claro céu azul que é meio convidativo. Então eles estão me mostrando que eles são realmente calmos e eles estão convidando o realmente querem que eu preencha obter uma revisão gratuita. E isso, mas você pode ver que isso é realmente laranja escuro, o que eu realmente não gosto. Esta é uma cor muito afiada, talvez apenas para atrair a atenção. E quando estávamos preocupados na tela, poucas palavras aqui são o número do celular. Apenas este número de celular é clicável, não todo o texto. E , partir daqui, muito genético. Você pode ver que eu calos não muito profissional olhando aqui novamente, ícones muito genéricos. Não consigo distinguir a distância entre estas rubricas e estas quatro características ou o que quer que tenhamos. Mais uma vez, eles viram algo parecido com este. Ouça Richard ou quem quer que eles tenham. Então eles têm três vídeos aqui, e você pode ver que algo está mudando ao longo das linhas. O que é que você pode ver. Você pode ver toda esta linha azul ou esta seção azul ou aqui, que está mostrando que esta é uma seção nova, mas no topo, ela não tem nada parecido com isso. Então isso é como se eu tentasse julgá-lo, é muito, você sabe, não olhar profissional. Ele não tem uma equipe visual. Apenas seções diferentes combinadas. Então este é todo o seu projeto. Além disso, eles estão mostrando um monte de rostos aqui só para tirar a confiança do usuário ou do visitante . Então é realmente Ah, um efeito psicológico, que é de fato, um fato real que quando você vê rostos, você vai ser mais frouxo. Que este é o Ah, este site vai te ajudar. Então, depois de obter algumas direções de design ou coisas de seu site de computadores, eu vou falar com meu desenvolvedor e eu vou ter certeza de que ele pode facilmente chamá-lo e hey, não tem nenhum problema. Então eu tenho que decidir meu sistema de grade. Por exemplo, se meu desenvolvedor estiver usando bootstrap, eu tenho que usar as mesmas bootstraps do sistema de grade, para ele possa facilmente cortejar isso. Então essas são as poucas coisas que eu, você sabe, obtenho do computador. Depois falei com o meu programador e mostro-lhe que estas são as especificações. É assim que vamos tocar Ah, terminar este produto ou este projeto e esta página de destino você será é ele vai ser Quais são as suas perguntas? Então, se eles têm algumas perguntas lá, lembre-se de perguntar às cegas sobre isso ou aquilo e que nós vamos fazer todas essas perguntas antes de começar qualquer coisa. Então é assim que na verdade eu tenho direções de design diferentes. Estou realmente testando? O que? Na verdade, a palavra do computador deles. Quais são as direções de design que meu cliente está procurando? Por que, na verdade, eles acham que isso é o que eles querem. Então, por que isso? Porque é muito convidativo. Mostra um monte de rostos. Tem um botão de revisão gratuito, que é muito proeminente aqui. Estas são todas as coisas diferentes. Então, isso é realmente o que vamos implementar em nosso design. Muito grande. Em seguida, muito grande botão de atenção caranguejo. Poucos rostos. Então para torná-lo olhos humanos e todas essas coisas diferentes. Então, eu espero que você tenha entendido o que realmente você precisa fazer quando você olha para um site da concorrência . Vamos passar para a próxima lição e ver mais algumas coisas sobre projetos de Web design e como lidar com eles. 4. Como faturo meu cliente web Design: neste vídeo, vou mostrar-lhe algumas dicas práticas e reais da vida real e como eu realmente construir meus clientes e eu vou mostrar-lhe minha fatura recente para alguns de você. Essa fatura pode ser muito para alguns de você. Pode ser muito, muito menos dependendo de onde você realmente em qual mercado você está. Na verdade, se você estiver nos EUA, isso pode parecer uma fatura muito baixa de qualquer maneira. Então o primeiro passo que vou dar a vocês como quando você está cobrando seus clientes, mas eu normalmente faço é construí-los para trabalho de design e desenvolvimento separadamente. Então, quando eu terminei o projeto deles ou quando eu preparar minha fatura, eu tenho que mostrar que este é o custo para o seu projeto. Eu normalmente cobro dólar 300 a 500 às vezes 700 para projetar um único Babbage para uma página de destino. Se o comprimento é muito, normalmente cobro 500 em média é 500 dólares por projetar uma única cadela de pouso. Então, aqui estão algumas dicas. Número um. Quantos dias você vai alocar esse design? Então, se você está cobrando US $500 o 1º 3 dias eu projeto e, em seguida, quatro. A seguir, eu tento refiná-los. Mas antes dos meus refinamentos finais, mostro o meu design ao meu cliente. Porque se você tentar continuar, você sabe, você sabe, melhorar seus projetos e fazer muito fora simples e menor apenas significava espaçamentos e tudo mais. Mas seu cliente rejeita esse projeto, e ele disse que ela disse que não era por isso que eu estava procurando. Você tem que mudar um monte de coisas ou ele. Então isso vai desperdiçar seus primeiros 44 dias de folga do trabalho. Então, antes do seu show final de refinamentos, uma vez que você é projetado para o seu cliente e às vezes o que eu faço é eu apenas desenhei a primeira cabeça separada fora do design e mostrá-los ou forçados a seções fora de seu design e mostrar-lhes que este é o direção que eu estou indo. E isso é ótimo. Isso está ótimo. Então eu continuo me movendo e criando mais seções. Então, se eu acho que o declínio é, você sabe, preocupado com a minha cabeça e isso é que isso não está olhando o que realmente queremos. Então eu parei lá e tentei criar outra equipe para o projeto. Então, tudo isso é sobre construir seu trabalho e como você está indo dedo do pé não perder seu tempo agora. Duas coisas que eu tenho você pode experimentar na minha vida, que é, que é, sempre que você está lidando com um novo cliente e um clima confiável é seu antigo cliente as coisas estão indo muito diferente. Então, quando você está falando com seu novo cliente são clientes muito novos, eles vão falar sobre custos muito que isso é muito caro. Hum, você pode atrair o curso de coisas assim? Mas quando você tem um cliente confiável que ele sabe que essa pessoa pode fazer isso ou ele é um especialista em seus olhos, você é um especialista. Então você vai ter. Ah, comportamento fora um pouco de pessoa fria e um pouco quente. Então, para a aula social, vamos enviar e-mails como “Oi, Charlie “, como vai? Espero que sua equipe esteja indo bem. Vou te mostrar algumas coisas ou atualizações que estou fazendo agora. Estas são as minhas actualizações e isto vai acabar. Demora mais 15 dias. Então, apenas quatro ou cinco linhas que são muito escuras não mostram e contam histórias apenas muito diretas e um pouco fora de boas-vindas no início. Ou talvez no final, isso é tudo muito direto. Um pouco legal. Ah, um pouco quente. E isso é tudo isso está indo para a taxa de trabalho. Mas com um novo cliente, quando você tem um cliente muito novo, você tem que ser muito caloroso, muito acolhedor. Você tem que simpatizar com o problema deles. O que quer que eles tenham, você tem que dizer a eles que isso pode ser resolvido assim. Você pode receber mais e-mails, você pode obter mais clientes. Ele vai correr rápido, coisas assim e mostrar-lhes que há valor trabalhando com há um monte de valor se eles sentem falta de trabalhar com você. Então estas são todas as coisas e não, eu vou mostrar a minha fatura e esta é a fatura. E este é o projeto de volta Texas Halldor calma 12 de outubro design página de destino mais desenvolvimento para mais otimização. Então, sempre que faço algo, tento pensar que este é o meu próprio projeto. Meu próprio site e eu tentamos dar o produto final na forma mais perfeita. Então, qualquer que seja a forma mais benéfica ou perfeita ou forma fora desse projeto, eu tento entregar isso para que você possa ver o design da página de destino 500 de acordo com a página de destino com os quadros I 1000. Então eles realmente tentaram mudar algumas coisas. Então eu adicionei a $50. Então, quando lhes propus o pão, diga-lhes que vos vou cobrar $1500 pela cortejamento e desenho deste projecto. Mas no final, a mudança poucas coisas. Então eu adicionei um pouco de custo para o seu cabelo, e eu terminei , tipo, $300 aqui. Então total é 1800 que eles já apareceram, e eu já reintegrado. De qualquer forma, isso está na história. Então, hum, é assim que na verdade eu lido com meus clientes, eu crio-os eso espero que os passos que eles vão trabalhar para você, e eles vão ajudá-lo a construir seu último negócio de web design gratuito. Ou se você está dirigindo uma empresa de software ou você está fazendo, hum , algum freelancing, isso vai realmente ajudá-lo, então vamos passar para a próxima lição e ver o que mais eu tenho para você. Então vamos chorar e dizer um pouco mais de magia. 5. Como obter direção de design em qualquer projeto de web Design: neste vídeo, vamos falar sobre a questão mais difícil. Quando você começa nosso projeto, você está quase cego. Você tem que decidir em que direção esse projeto vai seguir. Então eu vou dar algumas dicas e ângulo para mostrar a vocês dois fora dos meus projetos. Foi assim que eu realmente consegui minha direção de design e como eu realmente desejei técnica. Eu uso o dedo do pé, sabe, superar esse problema. Então jejum é que tentar descrever cada projeto de design em poucas palavras, associar palavras com que esses poderiam ser objetivos ou palavras semelhantes. Então, no caso do meu último projeto, que era a empresa de Aiyar ou tributação, essa empresa de adesão é basicamente advogados. Então eles são sérios. Eles estão entediados. Eles estão confiantes de que querem representar sua fazenda. Ser profissional e seguro é porque na maioria das vezes, quando os usuários vêm a qualquer site, eles realmente precisam de ajuda. Então eles querem alguma segurança. Eles precisam de alguma segurança. Da mesma forma, em contraste com isso, vou mostrar-vos o meu design, que é um pouco diferente, que mais tarde é uma empresa multimédia. E usei essas poucas palavras como multimídia acolhedora, convidativa e criativa. Então nós realmente queríamos. Então, estas são duas direções de design diferentes para dois projetos diferentes. Eu vou mostrar a vocês dois fora desses projetos e como realmente inventou essas placas. Então vamos começar com este, que é multimídia, o de baixo. Criativo, multimídia, convidativo e acolhedor. Então este é um design claro. E eu fiz isso em quatro para fazer compras porque tínhamos apenas de uma página. Então aqui temos. Vamos ampliar. Ok, então, como você pode ver, um, todo o design é Ah, o rosto tailandês, as cores. Eles são muito criativos. Eles são um pouco, você pode dizer, recebendo o show, algum tipo multimídia fora efeito. Olhe para o tipo de letra. Você vê a seleção de tifo, tudo está combinando com toda a equipe. Então esta vai ser toda a direção de design que você pode ver aqui. Aqui temos poucas características do que temos mais cores ou cabelos. Então eu estou usando um monte de cores diferentes aqui, e da mesma forma, você pode ver aqui novamente nós temos um vídeo, esta barra multimídia ligada, e então nós temos novamente algumas cores ou cabelos, algumas linhas, linhas de barras e coisas assim. Então, muitas cores usadas por aqui. Ah, bom. Int ganancioso para azul ver um knish Azul luz azul Die rosto é um pouco Você pode dizer que areia humanista Saref tem algum toque humano nele. Então, estas são na verdade as direções de design. Então por que eu fiz isso, porque era um sinal digital. Ege e correto originar Ou então ele waas vai exibir algumas imagens para seus clientes Quando a visita, seu bar, seu hospital, sua faculdade Você pode ter visto telas diferentes telas de TV onde você obtém informações sobre essa empresa ou como as coisas diferentes acontecem ou aqui. Então esta é uma direção de design. Então isso era sobre este acolhedor, convidativo, criativo e multimídia. Não, vou mostrar-vos o segundo exemplo. Então vamos ver que agora aqui está o segundo design e esta direção de design é totalmente diferente. Trata-se de segurança. É sobre segurança. Trata-se de ajudar a obter ajuda desses profissionais para que você possa ver seu slogan, que diz que ajudamos 300.000 mais em todo o país a obter alívio fiscal. Agora o que? Este tinha linha transmite o que este texto de cópia transmite. Diz que somos profissionais. Estamos confiantes e ousados no que fazemos. Nós temos muita experiência, então você estaria mais segura conosco fazendo negócios estão ficando textualmente de nós. Você vai se sentir seguro porque somos especialistas, sabemos o que fazemos. Então este slogan e o imposto relativo Eles realmente me mostraram a direção do projeto. Então eu fui com isso. Você pode ver o fundo é escuro esverdeado tenda luz azulada fora azul e principalmente cor verde . E também para este botão tivemos algo que é Ah, cor verde muito claro esverdeado quando nós sobre este Ah, mas eu vou mostrar-lhe a página real para que você possa ter a idéia de que cor eu estou falando . Então vamos ver o que a página real citado Page Waas. Agora, este é o resultado final e você o que eu queria mostrar é este botão. Então, se você tem mais palavra que você pode ver na sombra jazz está acorrentado e este botão vira tela Agora por que este botão vira tela? Porque o meu cliente no meu cliente fala quando lhes perguntei o que é que queres com isto? Mas e assim é que ele deve ficar verde. Então, para dar ao usuário algum alívio que eu estou seguro e estou. O que estou tentando fazer é uma ação segura. Então esta é uma cor âmbar amarelada waas para atrair o usuário e este waas dedo do pé sentir o usuário um pouco seguro com esta empresa Agora, no geral, se você olhar para esta tipografia, é um pouco fora. Você pode dizer Eddie, você pode ver que temos limites. É um tipo geométrico baseado em círculos perfeitos, quase perfeitos e coisas assim. Então, porque esta empresa waas profissional, era uma tributação de imposto de texto de ah sólido ou você pode dizer negrito profissional, negócio sério. Então eu usei este tipo fora Desculpe, este tipo de tifo tipográfico Da mesma forma que você pode ver que temos um monte de espaço em branco e cores roxas muito escuras cor roxa azulada porque mostra que sabemos o que estávamos fazendo. Temos Estamos tomando uma posição de touro que sabemos o que estamos fazendo. Então isso é muito limpo, muito minimalista. Um verde você pode ver este rumo verde escuro. Também mostra segurança e segurança. Então, essas são na verdade minhas direções de design Quando eu comecei este projeto, eu vou compartilhar com vocês um monte de dicas e, na verdade, isso vai ser muito pequeno você pode dizer jornada fora do que corre em minha mente e o que eu faço quando eu projetar um site ou página de destino. Portanto, é um pouco fora como conhecimento prático. Não está relacionado com o dedo do pé, você sabe, aprender uma ferramenta ou design em si. Então, eu espero que este vídeo irá ajudá-lo muito em seu próximo design do que você vai fazer algo. Alguns. A técnica similar, como eu fiz, como associar palavras com seus projetos e escolher a equipe fora de seu design e direção de design de acordo com isso e essas palavras. Então vamos passar para a próxima lição. 6. Como melhorar seu design com feedback: há um problema com muitos designers, que é que eles tendem a trabalhar sozinhos. Eles pensam que sabem tudo sobre design, deixá-los projetar e que eles fazem o trabalho em sua própria ferramenta e eles estão em seu velho mundo imaginativo mundo. Agora aqui está o seu maior místico, que é que você tem que depender de duas ou três outras mentes para obter um design bonito . Se você olhar para B, haas ou drible ou qualquer site, se você olhar para um trabalho criativo ou projetar fora de uma equipe como três ou quatro designers ou três ou quatro pessoas, você vai se surpreender com a qualidade ea direção fora que design. Então eu vou te dar uma dica de sua vida, que é sempre receber feedback de seu cliente. Não tente o dedo do pé. Sabe, acho que eles não sabem nada sobre design. Eles não sabem. Eles sabem coisas sobre o produto deles. Eles sabem coisas sobre o que votam com seus clientes. Eso tentar obter feedback de seus clientes o mais cedo possível. Mostre a eles o Haider que eu projetei essas poucas seções para seções Stroh fora do seu lado rap como eles parecem. Quais são as suas ideias sobre o segundo mergulho? É goto qualquer designer se ele é seu amigo ou família ou qualquer um que sabe um pouco sobre design e obter sua opinião dedo duas mentes são sempre melhores do que um. Você tem que receber alguns comentários de pessoas diferentes. Você tem que mudar a perspectiva em seus projetos Web ou qualquer coisa que você está projetando. Você tem que obter as idéias de outras pessoas que o que você acha que este design está faltando. Então, se você está perguntando a um designer, você vai perguntar a eles. O que você acha que este projeto está faltando? O que? O que você acha que pode ser melhorado? Então, do cliente, você pode perguntar isso a eles. Quais são os seus pensamentos sobre o projeto inicial. Então eles vão lhe dar alguns comentários. Então, vou mostrar-te o meu caso. Estudar O que aconteceu comigo no meu último projeto? Eu também vou mostrar a vocês o redesenho do meu site onde perguntei ao meu irmão mais novo , ele também é um designer, e ele está trabalhando em uma empresa de software. Então eu perguntei a ele o que você acha desse projeto. O que você acha que está faltando neste design? E ele me conta uma ótima dica. Eu vou te dar um segredo, que é design é uma história. Você tem que construir uma história. Você tem que mostrar seu design em uma fazenda de histórias, e você tem que torná-lo interessante. Então eu vou dizer a vocês que quais são os efeitos de ter as opiniões de outras pessoas ou de seus clientes em seu projeto e como ele vai melhorar. Então deixe-me mostrar o primeiro exemplo Agora, este é o primeiro projeto que fiz para o meu cliente. Então você, este é realmente o mesmo design de que falamos. Você pode ver o fundo, um monte de rostos. Parecem mais falsas. Hum, mesmo título. Parece tudo. O botão estava muito escuro. E eu pensei que isso é muito profissional porque o botão está escuro e vaichamar atenção. E eu pensei que isso é muito profissional porque o botão está escuro e vai É escuro, mas em um fundo claro. Mas meu cliente disse que isso forçou essa imagem no fundo. Esses rostos parecem muito irrealistas. Então eles parecem falsos. Então temos que mudar nossa direção. Além disso, se você se lembrar que a nossa concorrência, que foi o nosso site concorrentes waas. Também muito semelhante a este. Apenas a troca de cores que eles têm alguns por Bill cor azulada e este tem tela. Então eu disse OK, então eu vou pegar seu feedback de design e eu vou melhorar isso. E então eu tentei mudar a cor de fundo e usar o mesmo plano de fundo. Um novo passado me assegurou qual era este e novamente eu mostrei este e este anúncio Ok, Hum por quê? O botão é tão preto. Queremos ter algo verde ou talvez fazer principalmente nas cores seguras próprias, como mostrar segurança. Ok, e então? Eu fiz eu disse Ok, que marcou eu vou melhorar isso para que você possa ver Você vai ver como este design mudar totalmente para este. Então você pode ver agora ele está olhando criar. Então, sempre que você está projetando algo tentou dedo do pé, pergunte aos outros. O que você acha desse projeto? Agora você pode ver que este é quase o mesmo design. Se você olhar para isso, isso parece muito fraco. Isso não mostra uma personalidade ousada e confiante. Mas se você olhar para esta tela, ela nasce, está confiante que é. Parece profissional. Ele tira a atenção do usuário. Transmitiu a mensagem de uma forma poderosa. Nós ajudamos 300.000 mais em todo o país a obter alívio fiscal. Então é assim que quando você está trabalhando com duas ou tty mentes, seu design realmente muda e muda sua forma e forma e cria um design muito agradável. Quando você receber feedback de seus clientes, quando você recebe feedback de outros seus designers, seus colaboradores, isso vai acontecer. Seu design está sempre indo melhorar o dedo do pé. Agora vou mostrar-vos o segundo desenho que recebi o feedback do meu irmão. Eu inicialmente trabalhei com ele junto com ele que como você pode melhorar este design. Então vou mostrar-lhes antes e depois, e vocês decidirão que estou errado ou que sou verdade sobre usar duas ou três mentes para cada projeto. Agora, este é o segundo exemplo que eu estava falando. Então este é na verdade o projeto final. E se eu mostrar a vocês como eu realmente comecei esse projeto, você vai ficar, você sabe, espantado. Então, se você olhar para este projeto. Oops. Então deixa-me mostrar-te. Então aqui temos este design e vocês podem ver que este é o design final para o meu novo site. Meus cursos tiveram esse recurso nesses muitos lugares. Por que fazer meus cursos? Nossos alunos estão falando sobre o instrutor. Comece a aprender agora entre em contato. E esta é a comida. Então você pode ver que este é o projeto final. E se eu te mostrar o que eu comecei e quando eu receber o meu, você pode dizer feedback do meu irmão. Ele mudou totalmente e mudou o design. Você pode dizer direção de design. Então eu vou mostrar a vocês como era o meu projeto anterior. Este é o projeto com o qual comecei. Então comecei a criar algo assim. E isto era um botão. Este é um design totalmente diferente. Então você pode ver que esses números são diferentes. Por que tomar meus cursos como destaque em todos esses ícones foram em cores O que os alunos estão dizendo Waas algo assim. Um design totalmente diferente. Foi com isto que comecei. Esta é a minha introdução sobre o instrutor. E aqui está o er comida Então você pode ver isso é, embora seja um bom design. Mas há muitos problemas como você pode ver por aqui. Aqui. Ah, sobre o setor. Só tenho a minha imagem. Meu irmão disse que o feedback que recebi dele é que você precisa mostrar sua interação com os alunos. Você já fez alguma conferência ou algum workshop? Você deu ou forneceu algumas oficinas em algum lugar que eu disse sim. E ele disse: Tenta o dedo do pé, põe ali umas fotos com os teus alunos. Então, nesta seção, ele disse, Tente, você sabe, torná-lo mais simples. Isto é Ah, há muita atenção deste lado à direita do que para este. Ele disse que estas são em cores. Eles estão exigindo muita atenção. Tente o dedo, subjugue-os. Tenta o dedo do pé, minimiza a atenção aqui. Então eu virei todos eles muito preto e branco ou cinza também, hum, a principal coisa a idéia principal que eu tive dele waas Esse design é uma história. Ele disse que esta, uh, esta imagem desta ilustração à direita, parece bastante genérica. Não parece que seja muito emocional, ou que esteja se conectando com seus alunos. Então o que eu fiz foi para a primeira iteração. Deixe-me mostrar-lhe como é provável o progresso do meu design. Então eu fui a este. Então aqui eu realmente Jane, o layout disso você pode ver agora eles estão em quatro caixas aqui. Ah, um pouco mutável. Aqui, aqui temos tudo em cinza. Ah, um pouco mais de limpeza limpa aqui. Eu tento remover alguns do Você pode dizer alguns fora dos depoimentos a partir de agora. Então pense que esta outra vez. O mesmo. Aumentei o espaço branco aqui para torná-lo mais perdioso. E então, com o feedback dos meus irmãos, toda a direção do projeto muda. Ele disse que eu quero usar esta ilustração específica. Eu tinha comprado esta ilustração. Estas não são ilustrações gratuitas. Baixei este e este para não tentar usar que ilustrações gratuitas quecostumo usar, orou ou ALS premium. Eles têm mais qualidade. Ele disse que isso parece um pouco mais interessante para mim tão alto. Este é, na verdade, o projeto dele. Ele começou. Eu disse, OK, tente trabalhar no meu projeto. Quais são os seus pensamentos? Trabalhar? Harvard. Você começa este projeto. Ele disse que eu vou fazer algo assim. Então ele começou com este cabeçalho. E assim que entendi o que está acontecendo na mente do meu irmão, tentei mudar meu projeto e deixe-me mostrar o último. Oops. Então aqui temos o projeto final. Reduza o zoom. Certo, então aqui temos o projeto final. E se você olhar para este design, isso é totalmente mudado. É o tifo. Ele disse que você tem que melhorar seu tipo de letra. Então eu tento usar essa prova de lacaios que eu realmente amo. E também este é o dia do projecto, que também é um forte premium que eu comprei. Estes são ambos força premium são ambos diferentes eso Eu tento usá-los. Então eu tentei dedo do pé obter mais cores para eles que para a minha marca cores azul e laranja. Então eu tento colocar que eles usá-los aqui na ilustração. Então o que? Ele disse que Waas usou como história. Então eu adicionei mais algumas ilustrações. Elementos de design amore dedo do pé torná-lo mais humanizado. Não apenas caixas e impostos e cores. Eu tentei usar outra ilustração da mesma série da cidade e colocá-lo aqui fazendo parecer apenas meus alunos. E então eu tentei simplesmente lutar fazendo quatro críticas assim. Então você pode ver isso é que brilha sobre instrutor. Eu tento usar outras imagens também. Como este aqui, este em que estou com a minha oficina em Lums, Lahore em outra cidade. E ah, aqui está minha, hum as mesmas seções que eu tentei criar uma nova aqui novamente, uma ilustração é adicionada novamente, uma ilustração é editada. Então tente o dedo do pé, tente o dedo do pé, pegue algumas reviravoltas nas minhas histórias Eu tentei mudar o layout mudou ilustrações, mudou um rosto de gravata com base no feedback do meu irmão. Então é muito, muito importante que você receba feedback de outros designers. um, Outros designers sênior ou qualquerum,se eles são como você ou seu gerente de produto ou qualquer um, se eles têm alguma experiência. Todo mundo tem experiência diferente em design, então eles podem tentar lhe dar algumas dicas que vão melhorar seu design. Espero que tenham gostado desta lição. Eu não quero que ele queria que fosse muito longo. Mas este é um tópico muito importante que está recebendo feedback e como você vai melhorar esse feedback. Então deixe-me mostrar-lhe a segunda página. Você pode ver que isso também vem da mesma equipe do lado direito. Ah, e mais uma coisa. Na verdade, perguntei a mais um designer, que se refere a derreter, que é e ele era designer, muito grande designer e trabalhando com grandes empresas e coisas assim. Eu também tentei obter seu feedback sobre este design. Ele ficou surpreso com este design, que eu não estava esperando, mas ele disse que você pode melhorar seu rodapé e cabeçalho. Eu tinha poucas perguntas em minha mente, então eu perguntei a ele naquele e-mail e ele me respondeu muito bem e em muitos detalhes. Então, isso é tudo sobre obter feedback e como você pode melhorar seus projetos com base nesse feedback, espero que você tenha aprendido muitas dicas úteis neste vídeo. Vejo-te em breve. No próximo 7. Estender suas inspirações com sucesso sem copiar: neste vídeo, eu vou falar sobre um problema que muitos designers têm, e é assim que você pode usar inspirações ou seu site concorrentes ou projetar idéias outros sites em seu próprio design. Como você vai implementá-los agora. O truque é que você não precisa copiá-los. Você tem que aprender com eles como eles usaram espaçamento, como eles usaram diferentes tipos de letra, como eles usaram cores diferentes, como eles usaram de forma diferente para fora. Então você vai obter direções de design e dicas desse design ou suas inspirações. Não tente roubar deles. Se você realmente quer dedo do pé, seja designer de sucesso. Tente roubar de muitos. Então, se você tem três ou quatro sites diferentes, tente aprender suas direções de design e obter dicas e você pode ver equipes que eu quero meu site Toby indo nessa direção. Então este é o truque para você roubar suas inspirações de design, então eu vou compartilhar com vocês minha experiência recente. Este curso é realmente prático, então eu vou compartilhar com vocês exemplos reais fora. Oh, eu projeto todo o nosso eu abordo diferentes problemas de design e como eu realmente uso inspirações em diferentes em meus projetos. Então vamos ver este exemplo. Eu já mostrei este site que vai ser o meu próximo design recente para o meu site. Está chegando talvez dois meses próximos dois meses de qualquer maneira. Então aqui temos o design e você pode ver que você vai ver este design. Este é todo o projeto. Ok, então você tem Eu já mostrei a você uma vez este projeto e agora eu vou te mostrar. Vamos voltar para o topo aqui e eu vou mostrar a vocês como realmente isso é a inspiração ou para este design? Qual é a inspiração que usei? Então vamos para aquele site inspirador. Então aqui está um site chamado Designer Fund em eu realmente amo este design. Esta é a inspiração para o meu design de tamanho VEP. Acha que tenho algo corporativo daqui? Se olhar de perto, verá que não copiei nada daqui. Você pode ver este design é totalmente diferente que você pode ver o conteúdo é diferente. Cabeçalhos são diferentes e ah, um monte de grande e gravata rosto mistura muito fora Você pode ver por aqui. Então este é todo o design deste site. Ok, então agora se você olhar para esta seção aqui e comida ou você pode ver que eu tenho poucas idéias fora, como dividir meu rodapé em duas porções como esta aqui e deixe-me mostrar como eu fiz isso. Então, se eu for para a comida aqui, espero que sim, vamos como este. E eu vou te mostrar o pé de E se você vai para o rodapé, você pode ver que ele está dividido em duas seções e eu usei ah! Ah! Sobrecarga gráfica pesada. Uh, mais uma coisa. Se você olhar atentamente para o tifo está aqui. Deixa-me mostrar-te. Ok, então vamos ver. O Dreyfus de topo é o cabeçalho aqui. Você pode ver se você olhar para este tipo de letra e eu posso encará-lo Will. Vista local vai sentir alguma semelhança nesta combinação fora tifo é então vamos eu vou mudar muito rapidamente para que você possa sentir essa mesma direção, um pouco fora de semelhança neste design. Ok, então você vê alguma coisa para que você possa ver este tifo, que é o meu esconderijo. É como 70% semelhante e futuro ficou de tifo que eles usaram. Então a segunda coisa que você vai notar é muito fora do espaço branco por aqui. Assim, da mesma forma, se você olhar para aqui, você verá um monte de espaço em branco. cabeçalhos estão nessa direção na direção vertical. Mas as mentes estão na direção horizontal. Você pode ver assim porque eu não tenho muito conteúdo para filmar. Ok, então foi assim que eu peguei alguma inspiração. Além disso, você verá que alguns dos assassinos como você podem ver este escuro, uma cor azul pálido e este afiado, esta cor verde afiada. Peguei-o emprestado daqui. Então, se você olhar para este logotipo estrangeiro designer, não é da mesma cor. Eu não copiei esse valor de cor ou o valor decimal Hexi, mas é fechado com essa combinação. Então temos azul e verde quase azul e verde. Ou aqui também. Então temos fundo azul escuro e verde. Aqui temos contraste escuro, azulado preto e amarelo novamente você pode ver a tela ou aqui e se nós nos movermos para o fundo, você pode ver novamente. Temos o início fundo azulado. Então, a linha de fundo aqui é que tente tirar a equipe do projeto. Não tente copiá-lo como você pode ver esta seção aqui. É muito semelhante ao seu pé. Nosso cabelo que temos, que é como Deus, atualizações ocasionais nas notícias. Eles têm algo assim, mas o meu é um pouco diferente. Eu adicionei alguma ilustração aqui e também mudei minha direção para fora desta seção. E eu tenho Você pode dizer que eu mostrei essas técnicas de design de layout fora, invadindo outras seções em detalhes na minha classe de design de camada fora do curso. Se você estiver interessado em melhorar suas habilidades de design de camada, você pode tomar isso de qualquer maneira, Então, há algumas mudanças aqui. Como eu te mostrei. Eu fiz isso. Você precisa reunir idéias de design diferentes. Escolha-os. Você pode ver, alterá-los para o seu próprio ou adotá-los para o seu próprio design. Não deve parecer uma cópia desse desenho. E se você olhar para o rodapé aqui, você pode ver que ele não está parecendo com este aqui. Mas se você olhar de perto, você pode ver aqui nós temos texto, e aqui temos termos muito pequenos política de privacidade ou coisas assim. Agora, se você olhar para o meu projeto, ele tem coisas semelhantes aqui. Então, se você pode ver se eu movê-lo aqui Política de privacidade, política de cookies, algumas coisas semelhantes acontecendo aqui. Portanto, não é copping seu design, Mas tentando dedo do pé você pode dizer recebendo idéias e usá-los em seu próprio design recebendo ah sensação semelhante. E você pode dizer combinações semelhantes de tifo. Hum, fora desse design. Uso similar do espaço Dwight. Então estas são todas as fitas que mostrei nesta lição. Se tiver alguma pergunta, pode sempre me perguntar, vamos passar para a próxima lição. 8. Como selecionar tipos para seu projeto de web Design: Sempre que começo a projetar meus projetos de site ou meus projetos de laboratório móvel, eu sempre começo com um empate face eleições. Então, o primeiro passo que vou dar é selecionar o tiefest são a força que vou usar no meu projeto agora. Você já tem a direção de design de suas inspirações, que discutimos nas lições anteriores, e você vai usá-las para selecionar seu tifo. Então, se o seu projeto o profissional sério, ousado e confiante, você pode ir com telefones sensoriais geométricos ou dramáticos tipo off ou tifo é se o seu projeto está mais relacionado com emocional ou acolhedor ou calmo tiefest você quer usar do que você está indo para ter algumas características humanistas sensíveis, Mawr curvas em seu empate. Eu vou te mostrar. Os exemplos adoram 40 então o próximo é mais fora os designers, até eu. Às vezes pensamos que temos que combinar dois tipos de letra porque ele vai mostrar que sabemos sobre projetos. Não há vergonha em usar um único rosto de mergulho em seu design. Ele vai para Lourdes mais rápido quando você está indo para usar apenas um laço em seu design. Ele vai para Lourdes rápido porque temos apenas um laço. Talvez vamos usar placa ou regular ou itálico três vezes diferentes formas daquele tiefest. Mais uma coisa é que sempre que você estiver decidindo sobre o uso de tifo, certifique-se de selecionar um tifo que é premium. Você tem que comprá-lo e usá-lo. Eles estão indo dedo do pé sempre brilhar em seus projetos. Eu comecei a usá-los em projetos de meu cliente em meus próprios projetos, e vou mostrar a vocês o exemplo de como eu experimento com Iniciar experimentando com Diversos Is e combinações e como eu acabo usando diferentes telefones ou tifo é para meu projetos. Então vamos ver esses exemplos agora. Agora este é o playground que eu usei para selecionar tifo é para o meu eu dirigi página de destino excisão , que eu mostrei a você, e é assim, na verdade um começo combinando diferentes defesas, Eu escolhi o texto real ou conteúdo real e um parágrafo e um título e eu começar a usar para selecionar o tifo. Antigo título porque ele vai chamar muita atenção, é o primeiro ponto de atenção para os nossos usuários. Então, para selecionar tifo para parágrafos, tenso a usar algo que é mais legível, mais legível. Então essas outras coisas que você vai dedar têm em sua mente para que você possa ver isso nesta combinação. Eu selecionei este alimentar nossas areias para o meu rumo e é hap regular, que é um dos meus Ford favoritos. Para parágrafos você eles vão combinar com um monte de tifo é então este outono minha primeira combinação. Eu tento usá-lo no primeiro design. Eu fiz. Então, para o 2º 1 eu usei inter. Então, se você olhar para tudo isso, eles são um pouco sérios. Eles são, Ah, grandes profissionais. Você pode ver este aqui. Aqui é a Inter. É muito sério. Nenhum avião meio fora, você sabe, você sabe, você sabe que ele não mostra nenhuma emoção Oh, isso é muito simples tipo fora já Helvetica tipo off off sensorial ford ou die punhos. E no fundo, estou usando rubi, o que é um pouco estranho Fazer tifo mágico. Você pode ver se você olhar de perto, você vai ver que isso é construído em algum geométrico em tem alguns hum, você pode dizer Ah, letras perfeitas. Então não é perfeitamente dramático, mas tem algumas dicas geométricas. Então estes são os dois rostos de morte. Esta é a segunda combinação. Então eu continuo tratando combinações diferentes do que eu tento usar texto carmesim, que é o tipo de telefone Satya com algum sentido de que se Deus descer aqui, que eu não gostei, então eu rejeitei este. Na verdade. Meu cliente Ah, eu queria ter algo assim, mas eu não achei que fosse uma boa idéia. Então este outro ativo, grosseiro e grotescos Extra ousado com ace up você pode ver que um passo é fácil de combinar com o Senhor fora da forma tipográfica. Então eu realmente amo esta é outra fita Tente usar uma seiva e eu acho que vai corrigi-lo com um monte de defesas fora. Da mesma forma, este Mas para mim foi evita largo, tipo fora pela primeira Muli Mouly e ah, foi novamente dramática tipografia E tem algum estranho para ele. Então era grande, então eu não gostava desse tipo fora de estilo e também Nieto, ele não, você sabe, pertence à seleção. Então eu rejeitei no lado esquerdo. Você pode ver que eu selecionei a escala de tipografia. Então, se você não sabe que tipo de escala facial é, é como grandes passos diferentes fora do tifo será. E eu falei muito sobre isso na minha aula de tipografia. Ou claro que você pode tomar isso se você quiser aprender sobre isso. Então eu seleciono qual é o maior, menor, menor e diferente tamanhos de amarração antes de saltar para os meus designs. Uh, aqui temos. Ok, então no último aqui é apenas um único rosto de morrer que é Marcher Mártyr é uma cara de morrer premium e é um tipo geométrico fora de tiefest sensível você pode ver aqui havia círculos perfeitos e eu realmente amo isso porque era muito poderoso, muito entediado em sério e eso Acabei de selecionar este marcher, Este é preto. Isto é Ah, muito piscina. Eu acho que usamos placa extra no título em vez de preto preto é tomar. E para o meu texto eu usei livro tiefest sábado regular Então, se você for para regular, você pode ver Ah, este é um ford muito escuro escuro ou aqui significa que ele tem um monte fora de cor nele. Então, se você diminuir o zoom. Você verá que esses textos aqui estão parecendo muito leves por causa de sua espessura aqui. Se você olhar para ele, espere aqui. Parece muito demorado. Então o que eu fiz foi pensar que vai ser muito preciso. Então eu mudei o dedo do pé dos outros punhos Ford, que é livro. Então eu selecionei este livro e parece muito bem no design final. E deixe-me mostrar a vocês como eu realmente comecei meu projeto. Então eu comecei isso. Você pode ver que esta é a primeira seção que eu comecei a construir e eu comecei a usar com a sensação Sands junto com Recep. Essa foi a minha primeira tentativa, mas menos areias tinham curvas. Algum humanista, sensível, meio que toque para ele. Então eu no final, eu deixei cair. E escolhi este “Ah, Marcher “em vez dele. Então deixe-me ver se temos então aqui nós temos um partido características ou o que quer que seja. Então este é o Isto é como eu jogo com diferentes tipos de letra e combiná-los no meu você pode ver intuição e ah, hum você pode dizer tipografia seleção sentido. Eu não uso nenhuma regra. Eu só continuo usando diferentes tipos de letra, que eu acho que eles estão ótimo. Por exemplo, este alimentar nossas areias e isso é olhares felizes criados. E se nos mudarmos para cá, aqui de novo, este entrar estava ótimo para as rubricas. Hum e eu acho que você também pode combinar intercambiavelmente como se você mover isso por aqui e se mudar para cá, você pode ver a maquiagem. Um par perfeito aqui. Então entre e é para cima. Eles parecem certos. Então, se você tentar experimentar antes de mergulhar no design, eu acho que isso é melhor. Então é assim que eu realmente seleciono minhas fontes. Agora eu vou mostrar a vocês o design real que vocês podem ver. Aqui temos este tifo trabalhando criar. Aqui é Marcher Bull. Este é o livro. Este é o livro e este é novamente o livro. Então é assim que ele está realmente ótimo em situações diferentes e diferentes. E você pode ver que é assim que o design real se parece. Agora aqui está outro projeto que você já viu. Estes são dois dos meus últimos projetos, quais estou trabalhando nos últimos nos quais estou trabalhando nos últimos seis meses. E aqui você pode ver que este rosto de gravata tem é San Serif e tem algum ah, pouco estilizado seria clássico um pouco clássico, um pouco fora. Você pode parecer, hum, curvas e ah toque humanista para ele porque é mais clássico. Não é Morgan Sensory para Então, se você selecionar este, este é rascunho. Estes são ambos premium para um é muito popular. Minion Pro Ford e realmente amo este tiefest. E então este é rascunho. Então, se olharmos de perto, você verá quais são características diferentes para este tipo de letra. E temos cada um está inclinado aqui. Então é um pouco basicamente clássico Tiefest é velho. Tifo é então nós temos isso. Se você olhar de perto este, uh, areia Sedef que é um grande Morgan, você pode ver que é um pouco Ah, telefone alto. Tão alto que é mais alto e este é mais curto. Então, esta é novamente uma técnica de contraste. Às vezes eu uso se você tem tipo muito largo de telefone, muito, muito, que está em, hum em uma forma fora de um retângulo ou mais vital do que os outros fortes como eu já mostrei antes. Então você tenta usar um elegante ou fino quatro ou tipo de letra com ele. Isto é diferente. Combinando técnicas. Você pode aprender mais sobre eles no meu curso de tipografia de qualquer maneira, então você pode ver esses dois que eu combino porque este é, uh, este é um site criativo para designers. A maioria das pessoas procurando por design, eles vão vir aqui então eu não posso usar, embora eu possa usar uma gravata dramática aqui. Mas, hum, mas eu acho que isso transmite a mensagem melhor se tornar uma interface de usuário e experiência de usuário designer aprendeu habilidades em vez de ferramentas de design, experiência de aprendizagem unida com mais de 12 cursos de vídeo e juntou-se 31 dimensional. Eu acho que eu tenho cerca de 37 mil alunos e eles estão aumentando, e eu estou tentando ensinar pelo menos 100.000 alunos. Vamos ver como, quando eles vão vir de qualquer maneira. Então estas são as fitas práticas. Quando você está tentando selecionar o nosso rosto de gravata, combinando seus rostos morrer diferentes. Ford não tentar usar mais de dois ou três V. É, por exemplo, este é duff regular, e este é rascunho, e este é Minion Pro. Então eu não estou usando mais do que esses três. Se você tentar usar mais do que estes três ou quatro força diferente, suas páginas indo dedo do pé carga muito lento. Ok, então eles vão adicionar mais peso à sua página. E quando alguém vai cortejar, eles estão indo para o pé. Ter tempo diferente, difícil, você sabe, carregar esta página, será mais lento. Então isso é tudo sobre como eu seleciono meu tiefest é como são combinados diferentes tipos de letra, como eu experimento com diferentes tipos de letra. E quais são as coisas que você precisa ter em mente enquanto slacking Typhus é. Eu queria este curso, Toby. mais prático que possa ser porque não se trata de aprender habilidades, é sobre praticidade e como você vai usar e lidar com nosso projeto de design, web design ou design de aplicativo móvel com sucesso. Então vamos passar para a próxima lição e ver o que temos lendo para você. 9. Experimentos de esquema de cores para design web: Não, depois de ter selecionado o nosso tifo é I. Normalmente o que eu normalmente faço é selecionar começou a escolher minhas cores ou esquema de cores, e as cores serão baseadas na direção de design que temos. Nós já temos ID associado. Poucas palavras com o nosso design, como segurança, como placa de profissionalismo confiante Ah ah, entidade bolsa onde sabemos que o que estamos fazendo, temos conveniência e coisas assim. Então, de eu vou compartilhar com vocês para como eu realmente comecei. Seleção de tifo é para o meu último projeto, que eu mostrei a você empresa de tributação, eo que eu fiz é eu selecionei uma cor vibrante ou muito você pode cor doente e confiante para a cidade ou chamada para o botão de ação. Portanto, a razão é que queremos atrair nossos usuários instantaneamente. Sempre que alguém aterrissar em sua página de destino ou na primeira página fora de seu lado positivo, você quer que ele perceba algum botão ou algum texto porque queremos que ele tome medidas. Então isso vai ser chamado para o botão de ação, e ele vai ser vibrante ou ter um monte de bom contraste com o fundo. Então o 2º 1 O segundo assassino que eu selecionei era verde verde escuro, que está relacionado com a segurança, e tem alguns tons frescos para ele. Então, não parece muito maçante ou cor escura. Mas em vez disso, olha, você pode dizer promissor e esperançoso, tipo de cor verde. Então, para o profissionalismo, Eu selecionei escuro, cor azul púrpura em que também foi um pouco relacionado com a sua própria marca angular para os impostos atrasados ajudar ponto com e eu vou compartilhar com vocês agora o projeto e como eu selecionei são eu comece a selecionar cores. Deixa-me mostrar-te. Da mesma forma, o que fiz com o tifo está aqui. Você pode ver no último S e tivemos alguma experimentação acontecendo. Eu também começo a experimentar a seleção de uma ou duas cores no início. Então eu tenho esta cor, por exemplo, esta e esta parece um pouco boa para mim. Ele me deixou compartilhar com você, , azul e verde. Então é uma mistura de azul e verde. É que não é perfeitamente verde. Então, tem. Tem alguma esperança nisso. Então foi assim que comecei com eu comecei com essa cor do que eu produzi sob ações mais leves. Poucos. Este. Isto está mais perto do azul. Então eu comecei com esta cor escura, marrom, que eu acho que estava relacionada com esta. Mas eu não usei este porque para mim, estava um pouco fora, tipo, tipo, mais perto do perigo. Então eu evitei usá-lo no final. Então eu comecei aqui como você pode ver se você olha para ele aqui. Comecei com esta cor de tela, mas você pode ver aqui na primeira classe que parece que este assassino foi usado demais. A estrela de tela limpar esta tela azulada. Eles estavam acabados. Eu estava tentando usá-los demais aqui. Então, esta é realmente as cores reais para esta, hum, marca. Você pode ver que eles têm verduras e este azul púrpura. Por isso, tenho a tendência de tirar algumas ideias deste também. Então eu não queria usar Estes são muito simples, azul escuro e verde simples. Eu queria ter alguma variação ou uma mistura fora para. Então eu vou mostrar a vocês como eu realmente acabei usando cores. Deixe-me ver. Ok, então aqui temos o mesmo sonho um pouco fora do verde, que é este e este é novamente azul. Mas tem alguma rua roxa, roxa, uh, dica de novo. Você pode ver este fundo. Isto é muito leve. Fundo azul esverdeado, mesmo esquema de cores. As principais cores que selecionei usavam este azul púrpura este verde e este amarelo e esta cor âmbar amarelada que usamos apenas para eles para o isso recebendo a atenção do usuário e este verde no fundo parece muito seguro porque é verde Mais azul. Então, foi assim que eu selecionei minhas cores de palha. Eles também são as cores do céu e das árvores. Então, você pode vê-lo Estabilidade para árvores e ah, céu está aberto e acolhedor para mim. Não sei o que é para você, mas na verdade eu queria que fosse sério. Então você pode ver isso. A cidade aqui de novo está usando a mesma cor. Esta cor é, na verdade, deixe-me mostrar-lhe. Acho que é um dedinho, roxo e azul. Então ele tem algum reboque vermelho algum verde e a maioria dos azuis. Então, se formos para sair sm no Hugh é 22 de qualquer maneira, então é assim que eu limito minhas cores. Você pode ver que você não gosta de nazistas 15 assassinos ou aqui grandes assassinos são apenas três. Este amarelo este azul e a tela. Então é tudo o que precisamos. Podemos significar fumaça, ou você pode dizer ações mais leves, como aqui usando os ícones. E então, um, você pode ver que isso também é da mesma cor que dois tons oferecidos. Se você quiser saber mais sobre como criar um esquema de cores, você pode fazer o meu esquema de cores projetado curso. Mas sempre que você está começando um projeto que diminui o zoom, você tem que experimentar com cores diferentes. Você tem que fazer experimentação como eu fiz aqui. Você tem que começar a criar algo assim e ir a partir daí. Comece a aplicar essas cores e veja como elas ficam. Experimente com eles. Tente melhorar seu esquema de cores por tempo e tempo. Eu não tento o dedo do pé. Selecione todas as cores que continuo melhorando e experimentando. Então, se eu ver que eu preciso de uma sombra mais clara aqui, eu tentei gerar isso, então continue experimentando com as cores continue melhorando elas. No final, você pode ter Ah, produto diferente que você nunca pensou que você vai acabar se encaixando. Por exemplo, como este aqui temos cores totalmente diferentes e você pode ver que há poucas telas móveis ou aqui que eu projetei ou redesenhado. Você pode ver que estou usando esta cor amarela neste campo de número de telefone. Hum também você pode ver aqui fundo esverdeado claro verde por aqui. Então é assim que eu experimento com cores diferentes e continuo melhorando nelas. Eu não fico com as cores. Eu, você sabe, eu escolhi em primeiro lugar da mesma forma aqui você pode ver que eu continuei experimentando . Eu tentei muitas cores para este fundo, este fundo, mas em combinação e eu acabei neste. Esta é uma onda de cor azul muito vinda . Fundo muito claro. Não muito. Você sabe, você pode dizer brilhante, mas muito fraco, tipo fundo claro um pouco fora de cor maçante, acinzentada está neste fundo e porque eu queria usar um azul muito escuro em cima dele, então cria um design muito bonito. Da mesma forma, você pode ver este botão aqui. A cor é, ah, uma noiva porque queremos que os usuários cliquem sobrecarga. Amarelo também é outra cor. Eu usei âmbar amarelado, então azul e amarelo e verdes aqui temos os diferentes tons para eles. Eles não são os mesmos que eu usei aqui, que é este. Isto é totalmente diferente. Então é assim que as personalidades fora de suas cores, eles vão falar no seu design. Eles vão contar a história do seu projeto. Eu acho que você entendeu como eu uso cores. Alta seleção de cores altas. Continue melhorando meu esquema de cores durante meu projeto de design. E se tiver alguma pergunta para me fazer, vamos para a próxima lição. 10. Usando e criar componentes e símbolos no design web: neste vídeo, eu vou falar sobre a geração de elementos reutilizáveis ou ativos reutilizáveis ou caras de estilo reutilizáveis , botões e tudo isso para seus projetos de design de representante ou seus projetos de design de APP móvel ou qualquer usuário interface que você está tentando projetar. Agora, no primeiro, sempre que você começa a projetar, você está experimentando cores diferentes. Você está experimentando estilos diferentes. Depois de ter quase finalizado um ou dois fora de suas páginas como 1º 1 por exemplo, esta página inicial, uma vez que eu tenha finaliza, Eu sei que este botão este botão vai ser padrão i ni eu vou precisar dele em um muitas outras páginas do site. Por exemplo, como você pode ver, temos cursos de navegação, cursos futuros. Blawg, contacte-me a mim e ao Logan. Então eu vou usar reutilizar este elemento. Então eu vou torná-lo em um símbolo ou ah adicionado para também torná-lo um componente. Se estás a usar o estigma, estás o Toby. Na verdade, é um componente, e se você estiver usando, desenhe seu símbolo, então tente criar símbolos como você pode ver aqui à esquerda. Eu tenho um monte de símbolos. Estas são todas as cores que você pode ver como 7 a 9 ações diferentes de cada cor, diferentes matizes e tons de cada cor, três ou quatro tipos diferentes off gosta em então temos um monte de blues aqui publicados blues. Então estes são três grandes estudiosos. Então eu também tenho alguns estilos de colecionador para definir meus títulos diferentes ou coisas assim . Então eu tenho pequeno Eu tenho Ah, 19 pontos, que é eu acho, o parágrafo. Então eu tenho 38 44 50,50 anos 67 quando eu tenho 25 44. Então estes são todos laços de prática diferentes que usei no meu projeto. E deixa-me mostrar-te mais algumas coisas. Temos componentes para espaçamento que eu mostrei no meu curso de design de camada como usá-los e como eu criá-los e aplicá-los. Então eles têm poucos botões como você pode ver que este é o principal fardo. Em seguida, temos pequeno botão que é 45 exerce algo assim. Da mesma forma, temos curso mais. Você vai gostar deste. Você pode ver que eu posso apenas criá-lo assim. Assim que eu tiver finalizado, vou usar algo assim. Então deixe-me mostrar-lhe mais alguns lançamentos. Como você pode ver por aqui. Aqui eu tenho todos os cursos diferentes e ah, se nós descermos, você pode ver que eles também são simplesmente os mesmos elementos. Então eu criei um deles e Johnny apenas substituiu imagens e texto em outros Ah, nos outros. E estou farto do meu design. Então isso é realmente útil. Você tem que criar alguns fora dos elementos reutilizáveis, mas você tem que criá-los. Depois de ter finalizado pelo menos um fora de suas páginas ou um fora de suas telas ou talvez um ou dois fora de suas skins. Porque nessa altura é melhor saberes que isto vai ser, sabes, sabes,algo assim. Este é o nosso padrão. Então, primeiro você estabelecer alguns padrões de interface do usuário experimentando e, em seguida, usando o era re usando esses padrões. Então, isso é tudo sobre usar. Você pode ver um sistema de cores como este. Você pode ver por aqui. Eu tenho esses documentos que você pode ver Eu gerei isso. Estas cores que você pode ver são poucos mania impulso mania. Estas são ações laranja de estrangeiros. Estes são verduras. Estes são vermelhos. Estas são uma mania branca. Estes são blues. Então estas são todas cores diferentes que eu tenho usado neste site. Então agora é basicamente o meu site para designers, então ele pode ter um monte de cores. Mas para outros sites, você pode precisar de três ou quatro tons talvez. Você não precisa sempre de todos esses assassinos? Da mesma forma, você pode ver que eu crio meus têxteis aqui como este em outro documento, todos os tamanhos diferentes e como eles vão combinar e olhar um com o outro. Além disso, você pode ver que eu criei alguns para links, links, estilos aqui. Você pode ver aqui que é um estilo para as condições. Então, estas são todas formas diferentes. Eu realmente tento combinar diferentes tipos de letra em diferentes escalas. Então, se você quiser saber mais sobre o que é uma escala, como você gera esses diferentes tamanhos de tipos, você tem que assistir meus discursos de tipografia sobre como eu realmente projetei meus projetos e como nós os manipulamos e como eu praticamente criar diferentes arquivos ou afirmações ou qualquer coisa que eu usei nesses projetos. Então aqui temos mais algumas coisas. Tipo, eu tenho ícones diferentes. Eu os reuni por aqui. Então temos todos os tipos diferentes de cinco ou seis tipos de botões. Você pode ver que este é o botão fantasma. Estes são todos botões preenchidos. Então eu tenho alguns estilos para ah, para os formulários e deixe-me mostrar-lhe mais algumas coisas. E também, tento manter as ilustrações assim. Então, sempre que eu preciso de uma ilustração, eu apenas arrasto a partir daqui, ou eu posso criar um componente fora dele e usá-lo no meu design para que você possa ver que eles estão em diferentes planos de fundo. Estão na progressão roxa acinzentada, fundo azul. Estes são fundos brancos e estes são em fundos escuros. Então eu tento você pode dizer experimentar e olhar para diferentes ângulos e perspectivas que como ele pode olhar em nossa cor escura, como ele pode olhar em um fundo de cor brilhante vita e criar ativos diferentes para ambos para escuro e fundos leves. Então este é o meu arquivo realmente parece e este vai ser o novo design para o meu site, e é assim meu site, que eu projetei a página de planejamento tablet e móvel e isso é tudo que eu espero que você tenha aprendido muito fora de dicas e como você pode realmente lidar com a criação do nosso sistema de design. Não tente gastar tipo, ah, ah, centenas de horas criando seu sistema de design. Primeiro, experimente com uma ou duas páginas de telas honráveis fora do seu design e vá a partir daí e crie diferentes ativos. Cores diferentes, caras de estilo diferente, diferentes elementos utilizáveis, diferentes componentes e símbolos. Espero que tenham gostado desta lição. Se você tem alguma pergunta para me fazer, vamos para a próxima lição. 11. O design vai melhorar com tempo: um monte de designers. Eles não entendem que o design é progressivo, então ele tomará forma e tomará sua forma com o tempo. Então você tem reboque, dar algum tempo para o seu projeto. Então aqui estão algumas dicas que são práticas e que eu uso na minha vida real em projetar sites ou mais por lapso número um é que não projetar em uma única sessão. Você não precisa se sentar. E nas primeiras 3 horas você vai pular fora do projeto e sair e tudo bem, então eu fiz o projeto da filha na sessão Von. Sempre que você estiver projetando, projetado por uma ou duas horas, então vá para fora, receba feedback de outros, ande por aí e sente-se novamente. Você vai. Você vai sentir a diferença de que você é você pode ter mais idéias em sua mente. Então tente o dedo do pé, saia da sua alegria e veja um mundo ou conheça seus amigos ou coisas assim. Faça algumas outras coisas jogar ao redor, volte e você terá mais algumas idéias em seu design. Estão na sua mente? Então este é o primeiro passo. Não crie nenhum site ou aplicativo móvel em apenas uma sessão. Segundo é que o design não desejado com apenas uma perspectiva, que é sua própria mente única e seus dois olhos. Você tem que mudar sua perspectiva. Você tem que perguntar aos outros da sua equipe seus membros da equipe, sua esposa, seus amigos, sua família. Minha esposa não sabe muito sobre design. Mas eu sempre pergunto a ela porque ela pertence a você pode dizer usuários que não são muito tecnológicos. Por isso, pergunto-lhe sempre que desenhei um design tão rico. Você acha que está ótimo? O que é Ah, você confia neste design? Então ela responde como se eu não gostasse disso. Isso está parecendo muito acontecendo aqui. Algo não está certo. Então eu tento e tendem a, você sabe, obter feedback dela. Eu não desvalorizo seu feedback de que ela não sabe de nada porque qualquer usuário sua perspectiva lá eles estão longe. Ver coisas é diferente. Então você tem que começar pelo menos para rt diferentes perspectivas e, em seguida, melhorar o seu design para eles. Você é o construtor de soluções que você tem dedo, você sabe, entender o que os outros estão tentando expressar e usar isso e criar mais idéias. 3º 1 é que você tem que dar algum tempo ao seu design que ele vai tomar forma. Vai ficar mais detalhado. Ele terá mais refinado quando você está indo para dar-lhe algum tempo. Então sempre dê tempo ao seu design. E eu vou mostrar a vocês como ele pode realmente melhorar e como meus projetos ficam horríveis quando eu os comecei e qual foi o resultado final? Você vai se surpreender que como é possível, como eu comecei com este feio ou você pode dizer fora de equilíbrio design. E quando terminei, foi totalmente diferente. Então vou compartilhar com vocês o último projeto que fiz. Posso mostrar-lhe os últimos dois projetos, mas acho que será um vídeo muito longo. Então este é o projeto de ajuda do Texas e esta é a minha tentativa de adoção. Então você pode ver depois de terminar minha tipografia e selecionar algumas cores, eu comecei com este design. Ok, então isso foi muito aberto e não tem alguns. Você pode dizer personalidade poderosa ou ousada. E para mim, foi tudo bem desenhado. Não foi que não estava pronto. Você pode dizer design único ou não mostra muito valor ou você pode dizer profissionalismo para o discurso. Muito simples. Design não tão único ou não muito poderoso. Não havia nenhuma chamada à ação, mas em Shone sobrecarga estava aqui, que não era muito escuro do dedo do pé. Era uma luz e tinha a mesma cor que este saco o atropelou. Então eu continuei melhorando e este é realmente o resultado final. Então eu vou mostrar a vocês e resultado Este é o resultado final. Agora você pode ver que esta é uma direção totalmente diferente. Este é um design totalmente diferente para o que começamos. Comecei em primeiro lugar. Então você pode ver agora se você olhar para este design esperanças. Não, se você olhar para este design, você pode ver vamos diminuir o zoom e você pode ver que é totalmente um design diferente. Tem personalidade para ele. Tem ótimas cores. É equilíbrio. Está tudo lá. A primeira tentativa inicial Waas Não assim continuar melhorando em seus projetos. Continue dando tempo a ele. Eu também posso mostrar-lhe o entre as diferentes fases. Deixe-me mostrar-lhe o dedo do pé como cheguei a este projeto e ah, quais são as diferentes etapas? Este foi o primeiro 1 Deixe-me mostrar-lhe o segundo 1 Agora, neste arquivo, você pode ver que esta é toda a história deste projeto. Foi assim que comecei aqui. Esta é a primeira tentativa à esquerda. Então eu comecei a mover isso aqui no topo, e vocês podem ver aqui nós temos alguns, hum , pequenos ícones aqui, e eu tento equilibrar isso no começo da construção. Outras seções estavam aqui, mas eu ainda não estava, você sabe, feliz com o cabeçalho aqui. Então me mudei para este. Este é outro, um fundo um pouco mais forte e a mesma coisa, um pouco mais forte, mas tivemos um primeiro aqui. Então essa é a idéia real do meu cliente e mostrar isso muito ousado aqui. E tem muito maçante, azulado, púrpura, púrpura tela arbusto de fundo esverdeado, e não estava olhando muito original ou poderoso. Então recebi alguns comentários do meu cliente que está adicionando mais perspectivas a este. E acabei por ter mais espaço aqui do que tentei outra cor que era azul . Ainda assim, o cliente disse que não, não, quero outra coisa. Por que você não tenta usar uma cor roxa Desculpe, uh, laranja porque eles tinham visto no site de seus concorrentes. Então, ao invés de usar laranja, eu selecionei esta equipe que waas verde e amarelo ou âmbar cor verde amarelado, amarelado bob Chamá-lo cor laranja amarelada. Então eu realmente amei essa cor. Então é assim que meu projeto progride TSA em vários estágios diferentes, você pode ver em quantos quadros de arte eu trabalhei. Você também pode ver algumas das variações aqui nestas seções. Você pode ver este Waas preto e então eu mudei para cá, que é azul púrpura. E também você pode ver no início. Tento copiar o mesmo desenho que mostrei do Fundo Designer. Você pode ver a mesma técnica. Mas, no final, resolvi este porque este olhar parecia mais profissional. Então você pode ver que há muitas iterações que eu fiz para este projeto. 1234567 Na sétima última iteração. Melhorou muito com o tempo e o meu esforço e o feedback do cliente. Então, isso é tudo sobre melhorar seu design. O tempo que você tem para dar o seu tempo. O design é progressivo. Vai levar algum tempo. Vai desenvolver-se em etapas. Ele vai precisar de mais de um dedo mental, ter, ah, criar e construir um grande design. Espero que você obtenha muito fora do valor deste vídeo ou desta lição. Se tiver alguma pergunta para me fazer, vamos para a próxima lição. 12. Colaboração com desenvolvedores no projeto de web Design: Neste vídeo, vou falar sobre como você vai colaborar com seus desenvolvedores de uma forma significativa e tentar economizar o máximo de tempo que puder. Agora, muitas vezes quando você inicia um projeto ou inicia, você sabe, entregando seu design para seus desenvolvedores, os problemas começam a ocorrer. Então, como você pode lidar com esses problemas fora de nós para o passo é que sempre que você quiser seu dedo do desenvolvedor, entender algo, tentar gravar ou tela. Grave a tela curta ou a tela fora do vídeo. Desligue seu design para que você possa ver aqui. Se você olhar para ele aqui, você pode ver que eu tenho 1234567 vídeos diferentes nos quais eu expliquei ao meu desenvolvedor que essas são as mudanças que eu preciso. Não é assim que vai chamar Ed. Não é assim que deve parecer ou executar. Da mesma forma, você pode ver que eu tenho pastas diferentes com datas como mudanças de 2 de setembro. Eu tinha dois shorts de tela diferentes que você pode ver aqui. É assim que eu realmente faço. Eu uso uma ferramenta chamada Jing. Deixa-me mostrar-te. Este é DJing na verdade e eu realmente uso esta ferramenta por decks Mitt e eu uso este para pegar shorts de tela e montar coisas diferentes ou o dele como você pode ver que estamos aqui. Por quê? Isso está se movendo para a segunda linha. Então eu queria o Toby escondido em uma linha. Da mesma forma, as distâncias eram eram como 186 pixels. Mas no meu projeto, eram 120 fotos. Então eu tive que, você sabe, conversar com meu desenvolvedor mesmo no telefone, para que pudéssemos entender os problemas uns dos outros. Então o que estava acontecendo é que no web design, temos alguma margem na parte inferior desta e marchamos para o topo desta. Então, se meu desenvolvedor tivesse que, você sabe, usar 120 ele tinha que deixar uns 60 pixels nesta seção e 60 porcos nesta seção. Ele estava tendo um tempo difícil, você sabe, fazendo essas mudanças de modo semelhante você pode ver que eu tenho diferentes mudanças para telas móveis. Então eu também havia mais um problema que eu estava enviando para ele. Ah, Adobe realmente arquivo. Não, O problema estava acontecendo que ele não era muito você pode dizer familiarizado com adobe realmente ferramenta porque ele era um desenvolvedor. Então perguntei-lhe o que se passa? Você não está fazendo o que eu mostrei ou o arquivo. Você não está de acordo com o arquivo carregado mais recente ou mais recente. Ele disse: Onde está o último arquivo enviado? Eu disse, é ah. Então ser arquivo extra que eu tenho em sua pasta, que é nomeado pelo Yep, Este é o nome dos desenvolvedores. Então eu criei uma pasta. Mas ele disse que ele está usando realmente Zeppelin. Então ele está oferecendo uma ferramenta chamada Zeppelin Zeppelin Dot Você é? Se você não sabe, eu tenho muito fora. Tenho muitos vídeos sobre como usar isso. Como você pode usar este dedo do pé. Entregue seus projetos para seus desenvolvedores. Você pode ver que ele pode mostrar todos os tamanhos diferentes, diferentes núcleos que você pode ver à direita. Você pode gerar todo o tribunal a partir desse projeto. Então eu usei. Então decidimos usar Zeppelin. Então, para todo esse projeto, acabei de atualizar em um único lugar. Portanto, não tente duplicar arquivos do Replicator em muitos lugares diferentes. Não incomode seus desenvolvedores com ferramentas de design. Tente dedo do pé encontrar uma ferramenta que está indo trabalhar para eles. Isso será mais fácil para eles entenderem e copiarem o código e usarem isso no desenvolvimento do tribunal. Então, isso é sobre colaboração, então você tem que facilitar e tentar se estabelecer. Tente falar com o seu desenvolvedor que vamos usar apenas esta ferramenta e você precisa encontrar todas as coisas diferentes a partir daqui. Então isso é tudo, hum, sobre a colaboração com seus desenvolvedores, como você vai falar com eles. Eles podem precisar de arquivos SPD. Eles podem precisar de arquivos de perigo ou PNG. Você tem que falar com eles que se precisar de algum arquivo, como no meu caso, deixe-me mostrar o que estava acontecendo. No meu caso , este está aberto. Então havia um problema que era muito único para mim, que me deixava mostrar a vocês. OK, então aqui temos o logotipo para este. Ok, então você pode ver se você olhar para este logotipo. Este é realmente um arquivo PNG, e foi fornecido pelo meu cliente. Então este arquivo PMD tem muitos pixels transparentes em torno de seu tamanho real se você clicar sobre isso, ele tem 120 pixels de altura. Você pode ver se eu mexo. É. Foi alguma coisa. Tinha muito limite em torno dele. Então meu desenvolvedor, ele estava tendo problemas, você sabe, alinhando aqui porque você pode ver no meu projeto que eu realmente coloquei este PNG fora terceirizar fora desta tela. Desculpe. Então, mas para ele, quando ele tentou cortejar este hey estava tendo problema colocar o Você pode ver a distância entre esses dois elementos. Então, se você clicar aqui, você pode ver o 72. Mas ele estava com problemas, então eu disse: “ Por que não? Vou te dar um arquivo. Vou remover todos os pixels vazios ao redor. E eu abri na loja de fotos. E eu usei a função de sonho para a loja e removi todos os pixels transparentes em torno dele. Então ele tem uma caixa delimitadora assim. Então este é, eu acho, o design antigo. Mas no design recente, usei isso. Então estes são diferentes tipos de problemas que vão acontecer. Você tem que dizer a eles como estes, mas sob indo para interagir, como as sombras vão mostrar como essas belezas de vídeos realmente Senhor ou coisas assim . Então eu espero que você tenha entendido como você está indo para o pé, colaborar com seus desenvolvedores. E quais são os diferentes problemas que normalmente são enfrentados pelos desenvolvedores e pelos designers quando eles tentam colaborar uns com os outros? Mais uma coisa é nomear convenções. Você tem que nomear suas camadas ou tudo corretamente, para que os desenvolvedores possam entender facilmente seus designs. Espero que tenha entendido este conceito. Se tiver alguma pergunta para me fazer, vamos para a próxima lição. 13. Otimização de desempenho e carregamento preguiçoso: Agora neste vídeo, eu vou falar sobre algumas dicas sobre desempenho fora do seu site carregando fora do seu site, Hauspie. É o que é diferente. Você pode dizer ajustes de desempenho que você pode fazer quando você está desenvolvendo ou projetando para qualquer site. Ah, e como você está indo mostrar ao seu cliente e como eu realmente fiz neste projeto. Então meu desenvolvedor realmente usou get hub e ele costumava, você sabe, empurrar e cometer mudanças diferentes. Então eles têm o controle de todas as diferentes mudanças ou versões daquela página. Version ing é um dos recursos que recentemente os designers também começaram a usar. E acho que vai ser a introdução de Kobe. Na verdade, alguns de seus designers, eles estão usando no esboço com algumas ferramentas de terceiros. Então, em obter hub, tente contratar ah, desenvolvedor que tem é vell versado em tecnologias mais recentes como meninas ou obter hub ou todas essas coisas. Então o que ele fez foi, na verdade, me mostrou seu progresso usando isso. Obter, hein Buehrle? Então, sempre que eu queria ter algumas mudanças, eu digo a ele, ou dar-lhe as mudanças são revisões e ele fez isso nesta página, e eu tinha apenas um dedo, você sabe, ir para esta página dedo, ver todas as mudanças diferentes. Você pode ver como este botão está realmente tendo a mudança de sombra e um pouco de pressionado e ficando verde. Então, estas são todas coisas diferentes. Eu disse a ele que deveria ser assim. Da mesma forma, temos este botão play para ouvir de qualquer maneira. Então, Então, isto é uma coisa. Então, não há segundo é assim que você está indo, obter diferentes mudanças e ver seu projeto ao vivo. Você tem que ter um mural que você pode postar seu cliente. E você também pode ver diferentes mudanças acontecendo com vida em um LifeBridge. Então, Então, segunda coisa, problemas de desempenho como você pode ver ou ouvir. Aqui temos este passado. Esta é uma imagem PNG da imagem Jip. Então temos estas quatro imagens aqui. Então temos esses dois vídeos nesses ícones. Ícones Spc. Eles são leves. E então tivemos esses três arquivos do MP. Ah, estes são novamente ícones. Ícones SPG. Ah, e, hum, esses são poucos roteiros que estamos executando aqui e eu acho que aqui nós temos mais uma coisa que está mostrando essas ah, perguntas. Perguntas comuns de desagravamento fiscal. E depois temos isto. Ok, então o que? É o meu desenvolvimento. A coisa mais rápida em desenvolvimento Web é JavaScript. Então, ao invés de carregar Jake Yuri como um arquivo separado Ah, que também vai gostar de ter ah, 70 a 80 KB de descarregamento. Se você é desenvolvedor pode fazer coisas em javascript, que seria muito mais rápido. Então, o que? Meu esquartejado é um desenvolvedor louco. Lizzie carregou esses dois vídeos. Então eles estavam carregando depois que toda a página é carregada apenas para fornecer mais, você pode dizer atrasos no carregamento desses vídeos do YouTube. Isto é uma coisa. Em segundo lugar, tentamos comprimir essas imagens imagens de fundo usando PNG. Acho que é uma compressão diferente. Há um monte de compressão PNG ponderar ou algo assim. Não me lembro de PNG minúsculo. Então eu normalmente uso isso para que você simplesmente solte, arraste e solte seu arquivo J peg ou PNG, e ele vai compactá-los, que vai principalmente perder menos compressão. Então você não vai perder sua qualidade. Então eu usei tudo isso e um erro que eu cometi foi eu tentei, você sabe, usar o novo tipo de compressão, que era ser imagem. Assim, a extensão de suas extensões para imagens é dardo w E B e B Web ser imagem Agora, eu comecei a usar imagem vermelha rep e na sugestão fora do Google. Então, se você não sabe o Google velocidade Google teste de velocidade Então esta é a velocidade do Google dentro. Então, sempre que você quiser ver como suas páginas estão carregando, basta copiar o u.R l e baseá-lo aqui e analisar. E ele vai mostrar o quão longe ele está e quais são os diferentes problemas com ele, por que ele está carregando lentamente e coisas assim. Então, o que estava acontecendo? O Google só me fez algumas coisas. Eu mudei o tipo de imagem do dedo do pé webby. Então você pode ver aqui ele mostra página muito lenta. Mas nem sempre ouça o Google. Você tem que realmente ver como sua página Na verdade, Senhor, você tem que tentar alguns outros serviços como nós tivemos. Você vai começar a ser burro ponto com, então eu também uso este. Então eu estou mostrando minhas ferramentas fora do comércio, que eu normalmente costumava testar diferentes sites carregando tempo e coisas assim. Então isso é sobre o tempo de carregamento e depois mais uma coisa, que é o irmão Stack. Esta é uma ferramenta que usamos para testes de aplicativos ou navegadores. Então o que este banco faz é que ele vai levar a sua página e ele vai ordenar esta página em vários dispositivos nativos diferentes. Então, por exemplo, eu quero testar minha página. Você pode ver, por exemplo, este espaço. Você pode vê-lo carregado em 1,14 segundos, o que é muito rápido. Embora o Google esteja mostrando que este são 24. Mas eu queria ver em quanto tempo apenas indo para Lourdes. Ainda assim, isso é muito fora do tamanho da página. Na verdade, esta é a página antiga. Eu reduzi os tamanhos de imagem e não, Eu acho que é em torno de 3 a 4 MB. Então este aplicativo isso realmente poeira em diferentes dispositivos que você pode ver ou ouvir. Você pode testá-lo em diferentes telas móveis que, como celular, Um, como se você quiser testar uma única página no iPhone 5678 iPhone x ah, e acessar ou qualquer dispositivo que você quiser. Então, se você quiser ver que Como Minha página vai olhar em todos os dispositivos diferentes. Você pode usar esta pilha irmão, e ele vai mostrar-lhe em tempo real. Quais são os problemas com sua página? Então, o que estava acontecendo quando eu mudei esse dedo do pé e qual era essa imagem? Acho que esse plano de fundo Ah, iPhone X não estava suportando imagens Webby na época. Por isso, neste momento não tem imagens felizes. Eu ouço o Google Page dentro e eu mudo. E estávamos tendo alguns problemas para aprender a página no iPhone X. Meu cliente ligou de volta e eu sou, você sabe, todo meu desenvolvedor. E ele disse: Mudaste alguma imagem? Muito feliz por ter dito que sim. E ele disse, Este é o problema no acidente iPhone e esporte feliz. Então, nem sempre pense que você sempre tem que optar-se por mais um lu ah, tamanho baixo fora do arquivo ou você tem que olhar, você tem que ouvir o Google. Sempre tente usar seus próprios sentidos e usá-los na avaliação do você sabe Ah, este testando seus sites em diferentes navegadores e diferentes APS e diferentes dispositivos. Então, estas são todas as ferramentas que eu usei principalmente minúsculo PNG Brother Stack. Acho que isso é dado pelo meu cliente. Eu comecei a usá-lo, eu acho que 56 anos atrás agora eu acho que eles têm polido muito. Naquela época, era velocidade paga grátis dentro, sendo ferramentas dom, minúsculo PNG para compressão. E isso é tudo. Então espero que você tenha gostado desta lição de otimização de desempenho lated Ah, relação ao seu Web design e como você vai lidar com isso. Se você tem alguma pergunta para me fazer, vamos para a próxima lição. 14. Implementação de projeto web design e serviço de pós-venda: agora, No final, a coisa mais importante que eu acho que um monte fora freelance é um monte de designers e desenvolvedores que eles ignoram é implantação. E serviço pós-venda, como você estava indo para o pé, dar todos os arquivos para o seu desenvolvimento para o seu cliente e como você vai criar valor para usar técnicas de serviço pós-venda. Então, sempre que for Clyde, seu projeto está terminado. A primeira coisa é, que s não deixar seu cliente após o pagamento para que eles possam ter problemas quando eles tentam carregar esses arquivos no servidor. Ou eles podem ter algo que não está funcionando lá atmosfera ou lá você pode dizer servidor de teste. Então, a primeira coisa é que você estava indo para enviar-lhes arquivos zip e também tentar ajudá-los a carregar esses arquivos toe lá servidor FTP. Diga-lhes que vou mostrar-vos como aplaudir isso. E se algo não está funcionando, estou aqui para você. Estou sempre aqui. Basta me enviar um e-mail e eu vou responder e eu vou tentar corrigir o seu problema. Então meu cliente, quando eu enviei este projeto eu enviei tudo tem que ser vários. Eles estavam tendo problemas como quatro ou cinco problemas diferentes e eu continuei resolvendo-os. Até meu desenvolvedor, ele estava fora da cidade e eu usei o meu próprio. Você pode ver, acordo com as habilidades que eu deixei o setor de cortejamento fora deste desenvolvimento. Mas ainda assim tentei resolver os problemas dele. No entanto, eu posso então primeira coisa é dar-lhes serviço gratuito para pequenas mudanças. Então, se as mudanças são como 15 minutos, 30 minutos, não julgue por elas. Se eles tentarem, eles estão tentando fazer uma mudança muito grande ou que não foi definido nos requisitos do projeto . Então você pode acusá-los. Isso vai mostrar que você é um profissional. Você realmente se importa com o projeto deles. Então mostre a eles que você realmente se importa com esse projeto. Você é realmente uma pessoa séria. Você é um profissional que implanta seu trabalho perfeitamente em perfeitas condições. Por exemplo, se você comprar um carro e quando você está trazendo seu carro novo para sua casa, algo parou de funcionar e você não é capaz de ligar seu carro. Então, o que? Quais serão seus sentimentos, você vê? Então não tente deixá-los. Mostre a eles que podemos ajudá-lo. Podemos levar o seu carro à sua porta onde quiser. Nós vamos ajudar você se você estiver indo para fazer pequenas mudanças neste projeto. E ah, nós realmente nos importamos com este trabalho e nós somos profissionais estavam indo para ajudá-lo até o sucesso deste projeto. Então isso é tudo sobre como lidar com este projeto de Web design freelance e como eu dou o serviço pós-venda para o meu cliente. Acho que tivemos cinco ou seis mudanças diferentes e eu não cobrei nada por elas. Embora eu tenha enviado, eu dei alguns Você pode dizer que sim. Eu paguei algo como uma pequena quantia de $20 para o meu desenvolvedor, mas eu não cobrei meu cliente por isso. Então, tenha essas dicas em mente. Eu acho que eles estão indo para ajudá-lo a construir uma boa reputação em seus clientes e ajudá-lo a obter projetos mawr Web design. Você pode ver a sensação que eu fiz este e não, meu cliente está dizendo que eu tenho mais uma página de destino para você então é assim que você ganha uma confiança quando a confiança de seus clientes e eles sabem que esta é a pessoa que devemos ir quando nós Temos que fazer algo assim. Então isso é tudo sobre esta aula e os resultados se você tiver alguma pergunta, ainda tem alguma pergunta para me fazer? Vejo-te em breve em mais vídeos novos. Se eu conseguir mantê-los, vou adicionar mais vídeos. Mas até lá, acho que é tudo. Ah, pegue seu e te vejo em breve em meus outros cursos. 15. O que o que fazer NEXT: Muito obrigado por ter tido esta aula. Se você tiver alguma dúvida sobre design ou sobre esta aula, você sempre pode me perguntar na seção da comunidade. Além disso, não se esqueça do dedo direito. Alguns revisam algumas palavras agradáveis. Então, para mim, que eu possa, você sabe, obter alguma inspiração para criar mais aulas como essas. E também não se esqueça de verificar meus outros cursos porque eles são. Eu tenho muitos cursos sobre design de UX, design interface de usuário e freelancing e design visual. Até lá, vejo-te em breve na próxima aula.