O Papel do Design no Desenvolvimento de Sites e Aplicativos

00:48:24
https://www.youtube.com/watch?v=4eboDBkPwSM

الملخص

TLDRNa palestra, Guilherme Miller explora o papel essencial do design gráfico no desenvolvimento de sites e aplicativos, enfatizando a evolução do design e a colaboração entre designers e desenvolvedores. Ele critica o uso de layouts estáticos e defende que essas abordagens se tornaram obsoletas na era da responsividade e interação. A palestra destaca também as novas práticas, como design modular e prototipagem rápida, que são essenciais para criar experiências digitais eficazes. Miller conclui que as tendências atuais demandam uma nova mentalidade, onde a automatização e as tecnologias modernas revolucionam o design, exigindo que os designers se adaptem e colaborem estreitamente com os desenvolvedores.

الوجبات الجاهزة

  • 🎨 A evolução do design na web requer colaboração entre designers e desenvolvedores.
  • 📐 Layouts estáticos não são mais suficientes para atender às necessidades modernas.
  • 💻 Design modular e prototipagem rápida são novas abordagens eficazes.
  • 🖥️ HTML5 e CSS3 trouxeram avanços significativos para o design de sites.
  • 📱 A responsividade é essencial para uma boa experiência do usuário.
  • 🛠️ Designers devem estar cientes das tecnologias de desenvolvimento.
  • 🌐 A automatização está transformando o desenvolvimento web.
  • 📊 Tendências atuais em design incluem modularidade e sistemas de design.
  • 👩‍💻 A integração entre design e desenvolvimento é o futuro do design gráfico.
  • 🔍 O design deve sempre considerar a usabilidade e a acessibilidade.

الجدول الزمني

  • 00:00:00 - 00:05:00

    Introdução à palestra sobre o papel do design gráfico no desenvolvimento de sites e aplicativos, destacando a importância da colaboração entre designers e desenvolvedores. Apresentação do palestrante, Guilherme Miller, que é designer gráfico e desenvolvedor web, com uma breve descrição de sua formação e experiência.

  • 00:05:00 - 00:10:00

    Histórico do desenvolvimento web desde os anos 90, destacando a evolução do papel do webmaster e a transição para um design gráfico mais elaborado e colaborativo. Menciona a influência de técnicas e padrões web ao longo dos anos e a alteração no design gráfico na web com a introdução do CSS e layouts dinâmicos.

  • 00:10:00 - 00:15:00

    Discussão sobre os sites em Flash e sua popularidade, incluindo as vantagens na animação e design, mas também suas limitações em usabilidade e responsividade. A transição para HTML e CSS, e a falta de preocupação com a adaptação a diferentes tamanhos de tela naquela época.

  • 00:15:00 - 00:20:00

    Adoção do HTML5 e CSS3 a partir de 2009, destacando a colaboração entre desenvolvedores de navegadores para melhorar o suporte às novas especificações. O impacto do crescimento de dispositivos móveis e a necessidade de layouts responsivos.

  • 00:20:00 - 00:25:00

    A queda do Flash com a popularização de dispositivos móveis, levando a um aumento na importância do HTML e CSS dinâmicos. O desenvolvimento web se torna mais complexo devido à variedade de tamanhos e tipos de telas, exigindo uma mudança nas abordagens de design.

  • 00:25:00 - 00:30:00

    Apresentação do conceito de design responsivo como uma revolução nas práticas de desenvolvimento web, com a utilização de grades flexíveis, unidades percentuais e media queries que se adaptam a diferentes tamanhos de tela, e sua aceitação ao longo do tempo.

  • 00:30:00 - 00:35:00

    Evolução do trabalho do designer gráfico, que agora deve ser colaborativo com desenvolvedores desde as fases iniciais do projeto. Promove-se um design modular, onde cada componente é desenvolvido e testado junto com a equipe de desenvolvimento, minimizando os desencontros entre as partes.

  • 00:35:00 - 00:40:00

    A importância de trabalhar com protótipos e ferramentas modernas que facilitam a colaboração e a teste interativo sem depender exclusivamente de mockups estáticos em Photoshop. As metodologias ágeis são destacadas como um caminho para manter o design e desenvolvimento em sincronia.

  • 00:40:00 - 00:48:24

    Finalização e convite à reflexão sobre a evolução do design para web e a necessidade de um conhecimento mais profundo das interações e demandas dos usuários em um ambiente digital diversificado. Sugestões de leitura sobre design de sistemas e atualizações nas práticas de design.

اعرض المزيد

الخريطة الذهنية

فيديو أسئلة وأجوبة

  • Qual é o papel do design gráfico no desenvolvimento de sites?

    O design gráfico é crucial para criar layouts que funcionem de forma eficaz em diversos dispositivos, colaborando com desenvolvedores para garantir uma boa experiência do usuário.

  • Por que os layouts estáticos não são mais relevantes?

    Layouts estáticos não respondem às necessidades de responsividade e interatividade que são essenciais em sites modernos.

  • O que é design modular?

    Design modular é uma abordagem onde componentes de design são criados e testados individualmente, permitindo uma implementação mais flexível e coesa.

  • Que ferramentas podem ser usadas para a prototipagem?

    Ferramentas como Sketch, Figma e Adobe XD são eficazes para prototipagem e colaboração entre designers e desenvolvedores.

  • Como a tecnologia HTML5 e CSS3 impactou o design?

    HTML5 e CSS3 permitiram avanços significativos na estética e funcionalidade dos sites, facilitando a criação de layouts responsivos e dinâmicos.

  • Qual é a importância da responsividade em design?

    A responsividade garante que sites funcionem bem em uma variedade de dispositivos e tamanhos de tela, melhorando a experiência do usuário.

  • Como os designers devem se adaptar às novas tecnologias?

    Os designers devem adquirir conhecimentos de desenvolvimento para entender como seus designs serão implementados e funcionarem em diferentes contextos.

  • Quais são as tendências atuais em design para web?

    As tendências atuais incluem o design responsivo, modular e o uso de sistemas de design para garantir a coesão na identidade visual.

  • Qual é o futuro do design gráfico na web?

    O futuro do design gráfico na web verá uma maior integração entre design e desenvolvimento, com uma ênfase na automação e na criação de experiências virtuais mais ricas.

  • Como o design pode afetar a usabilidade de um site?

    Um bom design considera a experiência do usuário, garantindo que a navegação e a interação sejam intuitivas e acessíveis.

عرض المزيد من ملخصات الفيديو

احصل على وصول فوري إلى ملخصات فيديو YouTube المجانية المدعومة بالذكاء الاصطناعي!
الترجمات
pt
التمرير التلقائي:
  • 00:00:00
    olá a todos é essa uma palestra sobre o
  • 00:00:03
    papel do design gráfico no
  • 00:00:05
    desenvolvimento de sites e aplicativos
  • 00:00:07
    então o papel do design e também do
  • 00:00:09
    profissional do design gráfico no
  • 00:00:12
    desenvolvimento de sites e aplicativos
  • 00:00:14
    a intenção aqui apresentar pra cá todo o
  • 00:00:17
    designer o estudante de design gráfico é
  • 00:00:21
    um panorama geral do de como o design
  • 00:00:26
    tem sido feito para web e algumas idéias
  • 00:00:29
    pra como esse trabalho em conjunto com o
  • 00:00:33
    desenvolvedor deve ocorrer
  • 00:00:36
    então hoje em dia a gente vê muito ainda
  • 00:00:40
    o pessoal mexendo
  • 00:00:43
    só o photoshop fazendo layouts estáticos
  • 00:00:46
    né então fazendo aquele aquele mockup do
  • 00:00:48
    site no photoshop e aqui eu gostaria de
  • 00:00:53
    mostrar por que que isso não se aplica
  • 00:00:54
    mais a realidade da da internet então um
  • 00:01:02
    pouquinho sobre mim o meu nome é
  • 00:01:05
    guilherme miller
  • 00:01:07
    talvez você não conheça aqui pelo do
  • 00:01:09
    canal no youtube
  • 00:01:11
    eu sou desenvolvedor de web sites mas
  • 00:01:14
    tem esse lado não é que eu sou design
  • 00:01:16
    gráfico é formado na ufpr em 2007 som
  • 00:01:22
    freelancer também desde 2007 no entanto
  • 00:01:25
    desde o último ano de faculdade
  • 00:01:27
    trabalho com desenvolvimento de websites
  • 00:01:29
    e nos primeiros aí pelo menos cinco anos
  • 00:01:32
    de até ali e 2012 mais ou menos eu
  • 00:01:36
    trabalhei bastante com a parte de design
  • 00:01:38
    então conheço bem essa parte de de
  • 00:01:42
    desenvolvimento visual de layouts para o
  • 00:01:45
    site e também a parte de montagem
  • 00:01:47
    programação
  • 00:01:48
    eu sou especializado em html css e na
  • 00:01:53
    parte de montagem não seja justamente
  • 00:01:55
    nessa tarde de pegar o layout é pegar
  • 00:01:58
    essa idéia que o design passou e
  • 00:02:01
    transformar isso num site funcional e o
  • 00:02:05
    meu site r 10 mil de fundo como br
  • 00:02:10
    então o que o designer gráfico faz hoje
  • 00:02:13
    na web é para responder essa pergunta é
  • 00:02:16
    necessário fazer aqui um breve histórico
  • 00:02:19
    de como isso evoluiu
  • 00:02:22
    então você começa a gente começa ali com
  • 00:02:25
    um com 11 5 início da internet ali por
  • 00:02:30
    volta dos anos é 90 entre 90 e 2000 e
  • 00:02:34
    2001 2002 ali que você tem aquela idéia
  • 00:02:37
    do do webmaster aquela pessoa que fez
  • 00:02:42
    praticamente tudo no site não fez a um
  • 00:02:44
    html
  • 00:02:45
    ali nós no programa usando front page
  • 00:02:48
    usando versões iniciais alívio de um
  • 00:02:51
    livre é fez as imagens é pegou aqueles
  • 00:02:55
    cliparts na web ele parte do word tudo o
  • 00:02:58
    que que tem à disposição e foi montando
  • 00:03:00
    aquela página aqui como como exemplos o
  • 00:03:04
    sol de cheio o é um exemplo além de um
  • 00:03:08
    site acho que mais recente aquela
  • 00:03:10
    primeira imagem ali e há aqueles o site
  • 00:03:15
    da apple que acredita ele pela fonte eu
  • 00:03:17
    peguei seja realmente um site da uefa na
  • 00:03:21
    época então você tem aqui um design
  • 00:03:24
    gráfico ainda muito rudimentar né que
  • 00:03:26
    trabalha com as ferramentas a linha
  • 00:03:30
    disponíveis na época né além do também
  • 00:03:32
    do amadorismo que está ligado e com o
  • 00:03:35
    início da internet
  • 00:03:38
    na sequência você já tem a melhoria do
  • 00:03:41
    suporte de css nem tão antes você fazia
  • 00:03:45
    o site só com html css uma coisa aqui
  • 00:03:48
    que não existia uma dancinha css já
  • 00:03:51
    existia faz algum tempo só que ainda não
  • 00:03:53
    existia o suporte do navegador
  • 00:03:56
    a partir dali de de 2003 2004 o
  • 00:04:01
    movimento dos padrões web dos dutos
  • 00:04:04
    webstandards começa a ganhar força e
  • 00:04:08
    você tem site super influentes como se
  • 00:04:11
    essas em garden que mostram o que é
  • 00:04:14
    possível fazer com css deus e já começa
  • 00:04:17
    a ter layout mais mais elaborados e com
  • 00:04:20
    isso e também com o crescimento da
  • 00:04:22
    internet você já tem um pouquinho mais e
  • 00:04:24
    de designers realmente trabalhando numa
  • 00:04:27
    direção de arte pra pra site há aqui
  • 00:04:30
    como exemplo coloquei o gmail animais ou
  • 00:04:33
    menos em 2005 comum como ela e o site do
  • 00:04:37
    msn com um uma matéria de 2006 então é
  • 00:04:41
    mais ou menos por essa época é quando
  • 00:04:44
    teve quando já começa o desenvolvimento
  • 00:04:47
    de aplicativos online como o próprio
  • 00:04:49
    gmail ali
  • 00:04:52
    depois disso na verdade ao mesmo tempo
  • 00:04:55
    né que está acontecendo você tem é o
  • 00:04:58
    site em flash
  • 00:05:00
    então aqui eu peguei não achei muitos
  • 00:05:03
    exemplos de sites sim em flash antigos
  • 00:05:08
    ali um pouco difícil de achar imagens
  • 00:05:10
    agora né até os meus projetos antigos eu
  • 00:05:13
    fiz muitos sites em flash eu não
  • 00:05:16
    consegui encontrar aqui no meu
  • 00:05:17
    computador mas aqui com alguns exemplos
  • 00:05:20
    é com esses template aqui já dá pra ver
  • 00:05:22
    que o flash por outro lado era a
  • 00:05:25
    preferência dos designers da então eu
  • 00:05:27
    trabalhei muito com agências aqui eles
  • 00:05:29
    passamos ele pediu para fazer o site em
  • 00:05:33
    flash para poder realizar um layout do
  • 00:05:36
    tipo que vocês estão vendo aqui então
  • 00:05:39
    você tem uma liberdade muito maior é de
  • 00:05:43
    por exemplo de onde está o menino onde
  • 00:05:45
    que vai de que forma que este site vai
  • 00:05:50
    trabalhar então você tinha todo aquele
  • 00:05:51
    poder de animação do do flash e depois
  • 00:05:55
    entra também a questão do actionscript
  • 00:05:56
    que possibilitava algumas algumas
  • 00:05:59
    interações bem avançados assim que o
  • 00:06:02
    simplesmente html css javascript e não
  • 00:06:05
    conseguia fazer na época então só que
  • 00:06:08
    ele tinha um problema né do site em
  • 00:06:10
    flash
  • 00:06:11
    o problema da usabilidade o problema de
  • 00:06:13
    por exemplo um site como esse aqui ele
  • 00:06:16
    só funcionava nesse tamanho né então um
  • 00:06:19
    assim você fazia o site que cabia lhe
  • 00:06:22
    numa tela de 800 por 600 e e acabou né
  • 00:06:26
    depois a gente começou a deixar o site
  • 00:06:27
    100% da tela né
  • 00:06:30
    aí você diminui até o site diminuía como
  • 00:06:33
    um todo junto nessa que se você tivesse
  • 00:06:35
    uma tela muito pequeno não conseguia ver
  • 00:06:36
    nada só que nessa época você não tinha
  • 00:06:39
    essa preocupação
  • 00:06:41
    essa preocupação porque é você não tinha
  • 00:06:45
    essa preocupação porque você é tinha um
  • 00:06:48
    tamanho fixo de tela então sim todo
  • 00:06:51
    mundo tinha a um monitor de tubo de x
  • 00:06:54
    polegadas e resolução da tela era 1024
  • 00:06:58
    por 768 alguns ainda continuaram noite
  • 00:07:01
    por 600 e você tinha aquela garantia de
  • 00:07:03
    que de que a pessoa a trabalhar lá com a
  • 00:07:06
    tela maximizada né do do navegador e e
  • 00:07:09
    até aquele tamanho de tela e acabou né
  • 00:07:11
    mas e se esse foi o tempo é bem
  • 00:07:15
    interessante assim do do desenvolvimento
  • 00:07:17
    de sites onde o desenvolvimento em flash
  • 00:07:21
    e dizer desenvolvimento de um site em
  • 00:07:23
    flash era totalmente diferente de um
  • 00:07:26
    site html css então você tinha que ter
  • 00:07:30
    aí um conjunto de habilidades muito
  • 00:07:35
    variado a partir de 2009 e 2010 seja já
  • 00:07:41
    têm essa evolução né do html5 e css3 né
  • 00:07:46
    que basicamente a o pessoal que fazia os
  • 00:07:52
    o que faz nos navegadores até hoje a
  • 00:07:54
    música ópera a apple faz o safari e tudo
  • 00:07:57
    mais a microsoft faz o transporte se
  • 00:07:59
    juntaram pra desenvolver uma nova
  • 00:08:03
    especificação html5 é porque há um órgão
  • 00:08:06
    que que regulamenta html que é aqui que
  • 00:08:10
    o documento não faz toda essa parte
  • 00:08:12
    técnica que é o w3c não estava fazendo
  • 00:08:17
    nada mais de dez anos em html 4 saiu em
  • 00:08:20
    1999 e se não me engano e e não ia a
  • 00:08:26
    especificação não ia pra frente então o
  • 00:08:29
    pessoal que faz navegadores se tocou
  • 00:08:32
    assim falou pô gente que implementa as
  • 00:08:34
    coisas no realmente na internet né
  • 00:08:38
    porque o navegador oferecendo suporte aí
  • 00:08:40
    você tem um avanço na internet mas se
  • 00:08:44
    todo mundo oferecer suporte para um
  • 00:08:46
    certo recurso
  • 00:08:47
    aí a gente está avançando com a internet
  • 00:08:50
    a única coisa que precisa fazer se
  • 00:08:52
    combinar entre si
  • 00:08:54
    os desenvolvedores de navegadores pra
  • 00:08:56
    realmente fazer um negócio sólido neles
  • 00:09:00
    criar um grupo de trabalho que chama o
  • 00:09:03
    hati wg né o ato que nem o que em dois
  • 00:09:06
    meses o wh a twg é e desenvolver essa
  • 00:09:12
    especificação que chamaram um cigano de
  • 00:09:15
    html nexo alguma coisa assim mas virou
  • 00:09:17
    html5 e além disso também tem a questão
  • 00:09:22
    do css3 tudo mais isso de uma explosão
  • 00:09:24
    na internet de de desenvolvimento de
  • 00:09:28
    desviar de possibilidades de
  • 00:09:30
    desenvolvimento
  • 00:09:31
    então você tem aqui aqui eu coloquei
  • 00:09:35
    dois sites que fiz mas na época ainda
  • 00:09:37
    não tinha o site responsivo né mas você
  • 00:09:41
    já tinha um site que que já tirava o
  • 00:09:46
    flash é de questão tão assim steve jobs
  • 00:09:50
    é na época ele enterrou foi à china
  • 00:09:52
    quando ele lançou o iphone eo ipad fosse
  • 00:09:54
    a gente não vai
  • 00:09:56
    o iphone saiu em 2006 e ipads em 2010 e
  • 00:10:00
    ele falou assim a gente não vai estudar
  • 00:10:01
    oferecer suporte a flash porque flash é
  • 00:10:04
    muito então muito obrigado e tal
  • 00:10:06
    e nessa época a adobe que já tinha
  • 00:10:08
    comprado a macromedia né que fez o flash
  • 00:10:11
    favor sim raça que que sacanagem mas
  • 00:10:14
    acabou flash acabou sendo assim é
  • 00:10:17
    assassinado naquela época a popularidade
  • 00:10:20
    do iphone e do ipad ou o flash começou a
  • 00:10:22
    sair de cena e também tem seus problemas
  • 00:10:24
    de usabilidade e tudo mais que você
  • 00:10:27
    começa a ter os sites mais destinos html
  • 00:10:30
    e já começa a ter essa barriguinha aqui
  • 00:10:32
    do lado também que estende aqui para o
  • 00:10:34
    lado porque você já começa a ter uma
  • 00:10:36
    variedade maior de monitores mas ainda
  • 00:10:39
    não tinha como fazer um site pro assim
  • 00:10:43
    você poderia fazer um site separadamente
  • 00:10:45
    por celular mas para desenvolvedores
  • 00:10:47
    pequenos como eu assim o cliente não
  • 00:10:49
    queria pagar por uma versão só para o
  • 00:10:51
    celular você fazer um site que
  • 00:10:54
    trabalhava um pouquinho com jogo de
  • 00:10:55
    cintura em termos de presença dessas
  • 00:10:58
    bairros do lado se abre num
  • 00:10:59
    num monitor muito grande - o site
  • 00:11:02
    estende para o lado estende a corpo não
  • 00:11:05
    ficar muito pequenininho na tela antes
  • 00:11:07
    você tinha aquele site centralizado no
  • 00:11:09
    meio da tela assim que só tinha um
  • 00:11:11
    tamanho mesmo então html5 css3 da outra
  • 00:11:15
    possibilidade é que você por sombra você
  • 00:11:17
    for de grandeza é transparência
  • 00:11:20
    o suporte à png muito muito maior ali e
  • 00:11:23
    aqui não é só não é do html5 mas é uma
  • 00:11:26
    coisa aqui o uso de peniche e começa a
  • 00:11:28
    aumentar bastante
  • 00:11:29
    e você é uma série de melhorias que
  • 00:11:33
    começa a surgir os suportes navegadores
  • 00:11:38
    começa a aumentar
  • 00:11:41
    é enormemente nenhum suporte html a
  • 00:11:44
    novos recursos de html css então você
  • 00:11:46
    tem uma suma uma explosão assim na área
  • 00:11:50
    do design também que possibilita muito
  • 00:11:52
    mais possibilidades por exemplo esse é
  • 00:11:55
    esse site aqui eu me engano os dois já
  • 00:11:58
    têm as fontes embutidas então dá uma
  • 00:12:01
    liberdade
  • 00:12:01
    o design é muito maior de fazer o layout
  • 00:12:05
    com as fontes que ele quer e com isso
  • 00:12:09
    você tem aí realmente uma melhoria muito
  • 00:12:12
    grande no processo de direção de arte né
  • 00:12:15
    só que daí junto com isso 1 em 2010 é
  • 00:12:21
    lançado esse artigo aqui nesse artigo
  • 00:12:25
    neste site a lista parte que só trabalha
  • 00:12:28
    com ele conhece mas todo o resto do
  • 00:12:30
    mundo não conhece sabe se ela tinha aqui
  • 00:12:33
    é inocente como dizer assim do itombe
  • 00:12:36
    marcotte responsável design que
  • 00:12:40
    revoluciona o modo como a gente faz
  • 00:12:43
    sites e se realmente foi uma revolução
  • 00:12:45
    porque acabou mudando tudo né
  • 00:12:48
    associativo aqui é mostrando como você
  • 00:12:53
    pode pegar uma mesma base html e css do
  • 00:12:57
    site e usar alguns recursos como um
  • 00:13:04
    uma grade flexível unidades baseadas em
  • 00:13:07
    porcentagem e m e o principal o total
  • 00:13:11
    dos media players né
  • 00:13:13
    já há alguns assim as requisições de
  • 00:13:15
    mídia é traduzido livremente português é
  • 00:13:19
    onde você poderia ter esse e se essa
  • 00:13:23
    adaptação do site é você tem um site com
  • 00:13:25
    uma tela bem grande e vai diminuindo a
  • 00:13:27
    tela é essa parte que passa por três
  • 00:13:29
    colunas esse menu diminui depois esse
  • 00:13:32
    conteúdo diminui até ficar tudo em uma
  • 00:13:33
    coluna só então ele foi o primeiro a
  • 00:13:38
    realmente é compilar todas essas
  • 00:13:41
    técnicas em um artigo né
  • 00:13:43
    até se você acessar o artigo ele hoje
  • 00:13:45
    tem o pessoal falou assim ah mas o
  • 00:13:47
    navegador não suporte a mídia crise tal
  • 00:13:50
    só que não demorou muito tempo para você
  • 00:13:53
    ter um suporte amplo com esse tipo de
  • 00:13:55
    coisa é pressa pra esse recurso do css
  • 00:13:59
    né
  • 00:14:00
    e com isso aí deu uma reviravolta enorme
  • 00:14:04
    na web não demorou a sair pelo menos 15
  • 00:14:07
    anos pra todo mundo se adaptar e
  • 00:14:09
    realmente hoje você não tem como
  • 00:14:12
    publicar um site sem ter uma versão num
  • 00:14:16
    meio de uma versão mas sim você ter essa
  • 00:14:18
    configuração da adaptação para as telas
  • 00:14:20
    maiores e protege as menores que o
  • 00:14:23
    pessoal fala muito site pra celular para
  • 00:14:25
    tablet tudo mais mas é importante
  • 00:14:28
    lembrar que têm os maiores também
  • 00:14:30
    precisam de adaptação então é a gente
  • 00:14:33
    acaba fazendo o site aqui na nossa tela
  • 00:14:35
    por exemplo eu tenho aqui uma resolução
  • 00:14:37
    de 1920 por 1200
  • 00:14:40
    só que não é só isso você tem lá por
  • 00:14:44
    exemplo aqui no monitor da apple a4 cá
  • 00:14:47
    que tem uma solução gigantesca de tela e
  • 00:14:50
    você também precisa planejar pra isso
  • 00:14:52
    então essa discussão ocorre até hoje
  • 00:14:55
    você tem assim essa essa ambiente web
  • 00:15:01
    virar de cabeça para baixo se
  • 00:15:03
    perguntando como é que eu faço então
  • 00:15:04
    essa técnica é muito interessante mas
  • 00:15:06
    como eu faço por exemplo com o site da
  • 00:15:07
    da microsoft que é gigantesco como faz
  • 00:15:11
    com o site da apple como eu faço do site
  • 00:15:13
    com o site do governo federal que tem
  • 00:15:16
    milhões de
  • 00:15:17
    milhões não né mães é tem centenas de
  • 00:15:20
    outros diz de braços de outros sites de
  • 00:15:23
    ministérios e tudo mais como é que eu
  • 00:15:25
    faço isso você responsivo é possível
  • 00:15:28
    enfim é uma discussão que daria uma
  • 00:15:31
    palestra por por si só mas aí você tem
  • 00:15:34
    todas a ir a volta e também traz
  • 00:15:36
    implicações a parte de design que aí que
  • 00:15:39
    ocorre um problema importante né
  • 00:15:42
    assim como o design vai trabalhar com
  • 00:15:44
    todas essas variáveis aqui
  • 00:15:46
    o layout estático ele não funciona mais
  • 00:15:48
    então eu vou apresentar algumas algumas
  • 00:15:50
    ideias daqui pra frente e hoje é você
  • 00:15:54
    tem aqui né uma tendência a deixar de
  • 00:15:57
    desenvolvimento que acaba refletindo
  • 00:15:59
    também não faz design é a era da
  • 00:16:01
    automatização então é que qualquer um
  • 00:16:05
    site os sites anteriores que eu
  • 00:16:07
    desenvolvi para 19 educação de nosso
  • 00:16:09
    investimento é que você já tem um pouco
  • 00:16:11
    dessa parte de automatização onde eu
  • 00:16:13
    usei o cesso sss para gerar o meu código
  • 00:16:18
    css então já não sei mais uma folha de
  • 00:16:21
    still só css que eu usei o sucesso pra
  • 00:16:24
    gerar uma paleta verde e uma paleta azul
  • 00:16:26
    pra dos sites diferentes mas a base é a
  • 00:16:29
    mesma então você tenha a se eu não
  • 00:16:34
    tivesse o sesi instalado aqui isso aqui
  • 00:16:36
    seria muito mais complicado de fazer
  • 00:16:39
    então esse foi o primeiro site que eu
  • 00:16:42
    usei o sesi assim de forma massiva mesmo
  • 00:16:45
    no site e depois disso não tem mais
  • 00:16:48
    volta né
  • 00:16:49
    se você vê hoje o que os desenvolvedores
  • 00:16:51
    estão fazendo é automatizando todo o
  • 00:16:54
    processo de produção os assim o site
  • 00:16:58
    html exagerado através de um do outro
  • 00:17:01
    código o css é gerado pelo os arquivos e
  • 00:17:05
    sé são gerados pelo sucesso
  • 00:17:07
    o javascript é gerado por por outros
  • 00:17:10
    processadores e tudo mais então tem toda
  • 00:17:12
    essa essa esse processo assim aqui eu
  • 00:17:17
    peguei 111 uma ilustração aqui desse
  • 00:17:21
    esse autor né
  • 00:17:22
    mostrando aqui por exemplo você tem o
  • 00:17:25
    npm elbow e terá seu gerenciador de
  • 00:17:28
    pacotes não seja do que é necessário
  • 00:17:31
    porque o site rod nealy instalar todo
  • 00:17:33
    automatizado é de forma automática
  • 00:17:36
    é aí para o cse se você tem um gerador
  • 00:17:38
    os processadores pode ser o sexo pode
  • 00:17:40
    ser o espa seus estilos javascript vai
  • 00:17:43
    ser o cofre escrito eu tenho script de
  • 00:17:45
    html tem um remo tem um jeito moleque
  • 00:17:48
    down
  • 00:17:48
    enfim e de você tem os gerenciadores de
  • 00:17:51
    tarefas que os principais são o golpe o
  • 00:17:54
    grande então a partir de html css nem
  • 00:17:59
    que eu sempre falo dos meus cursos e
  • 00:18:00
    assim html não é programação css não é
  • 00:18:02
    programação é porque não tem lógica
  • 00:18:05
    já essas linhas essas linguagens aqui é
  • 00:18:07
    tirando essas de html mas essa daqui que
  • 00:18:11
    geram css que geram javascript
  • 00:18:13
    já são 11 acima como se fosse uma subida
  • 00:18:19
    linguagens assim uma das linguagens
  • 00:18:21
    derivadas do css mas mais derivados do
  • 00:18:23
    java script no javascript a programação
  • 00:18:26
    dessas linguagens simplificam javascript
  • 00:18:29
    abstrai o javascript para você gerar um
  • 00:18:32
    código mais rápido
  • 00:18:33
    já o césio existiu são linguagens de
  • 00:18:36
    programação ao contrário do css então
  • 00:18:38
    você tem aqui todo mundo de programação
  • 00:18:40
    que foi criado para gerar esse é sim e
  • 00:18:44
    essa parte automatização é pra casa
  • 00:18:47
    porque os sites estão cada vez mais
  • 00:18:49
    complexos e preciso um ano é a você
  • 00:18:53
    trabalhando um time nem toda aquela
  • 00:18:55
    questão você precisa cada vez mais de
  • 00:18:59
    desse tipo de ferramenta para se
  • 00:19:02
    organizar
  • 00:19:03
    né aqui eu coloquei um exemplo de uma de
  • 00:19:07
    uma desenvolvedora que se chama a
  • 00:19:11
    unicred né ela fez por exemplo e se esse
  • 00:19:16
    cachorro aqui fez conforma css só que
  • 00:19:20
    você vê aqui que isso aqui não é código
  • 00:19:21
    css daqui um código que tem if tem
  • 00:19:26
    lógica e tudo mais e depois ele gera
  • 00:19:29
    esse código css que está aqui né então
  • 00:19:33
    um é uma coisa que chegou pra ficar
  • 00:19:37
    mesmo é hoje no desenvolvimento né
  • 00:19:41
    então eu tô falando bastante
  • 00:19:42
    desenvolvimento mas qual quê a
  • 00:19:44
    qualquer implicação que o que gera ali
  • 00:19:47
    pra próprio design quer dizer que para
  • 00:19:52
    você chegar é pra você chegar nesse tipo
  • 00:19:55
    de resultado é interessante você saber
  • 00:19:59
    pelo menos um pouco do processo que o
  • 00:20:01
    qual o desenvolvedor está passando né
  • 00:20:04
    então hoje um layout estático não
  • 00:20:09
    funciona mais que o motivo que eu estou
  • 00:20:12
    mostrando aqui que você tem que levar
  • 00:20:14
    isso em conta se você tem uma enorme
  • 00:20:17
    quantidade de variáveis de telas e
  • 00:20:20
    dispositivos e tudo mais que vai levar
  • 00:20:25
    vai levar uma complexidade maior do
  • 00:20:28
    trabalho design também então o trabalho
  • 00:20:30
    dos desenvolvedores como é complexo
  • 00:20:31
    trabalho de design é também está ficando
  • 00:20:34
    mais complexo é e com isso também com a
  • 00:20:38
    toda essa evolução na internet você tem
  • 00:20:40
    uma evolução também da quantidade
  • 00:20:42
    profissões que se criaram então você tem
  • 00:20:45
    o iof designer o ilsi spears design
  • 00:20:48
    desenvolveu o a pessoa que desenha
  • 00:20:51
    experiência do usuário no site um
  • 00:20:53
    aplicativo mas só isso não seria uma
  • 00:20:56
    tribo antes era uma atribuição também o
  • 00:20:58
    desenvolvedor você tem um arquiteto da
  • 00:21:00
    informação na que planeja toda a parte
  • 00:21:02
    de um banco de dados de conteúdo do site
  • 00:21:05
    até o arquiteto de conteúdo
  • 00:21:07
    então é você tem um profissional decide
  • 00:21:11
    e aciona que faz o dia do word que faz é
  • 00:21:14
    especializado nessa parte de como deixar
  • 00:21:17
    o site em primeiro nas buscas ou como
  • 00:21:19
    fazer um anúncio eficiente netword você
  • 00:21:22
    tem um desenvolvedor de fronteira que é
  • 00:21:24
    o meu trabalho principal ele quer
  • 00:21:26
    trabalhar com html css e javascript
  • 00:21:28
    agora todas aquelas outras linguagens
  • 00:21:31
    que apareceram ali você tem o
  • 00:21:33
    desenvolvedor java script e uma pessoa
  • 00:21:35
    que trabalha só com javascript java
  • 00:21:36
    script hoje a linguagem é muito
  • 00:21:40
    desenvolvida e que é capaz de fazer
  • 00:21:43
    qualquer coisa hoje então não só sites
  • 00:21:46
    mas até coisas do do mundo real vamos
  • 00:21:49
    assim é eletrônicos hoje tentamos
  • 00:21:52
    eletrônicos que hoje são problemas com
  • 00:21:54
    javascript e muitas outras
  • 00:21:57
    e as a como tá falando ali você tem as
  • 00:22:00
    características e tendências dos sites
  • 00:22:02
    aplicativos hoje não se tem sites cada
  • 00:22:04
    vez maiores e mais complexos é essa
  • 00:22:08
    noção do site como o sistema tanto na
  • 00:22:10
    parte funcionamento como o design está
  • 00:22:12
    muito presente então o eu fazia muitos
  • 00:22:15
    sites antes que que eram de cinco
  • 00:22:18
    páginas 10 páginas aqui sites é mais
  • 00:22:22
    estático não é que eu colocava um
  • 00:22:23
    sistema de atualização mas era para
  • 00:22:25
    atualizar o texto ali um texto aqui uma
  • 00:22:27
    imagem aqui uma imagem minha coisa bem
  • 00:22:29
    simples
  • 00:22:30
    hoje absolutamente todos os sites que eu
  • 00:22:32
    faço tem sistemas têm formulários é tem
  • 00:22:35
    cadastro tem água do cliente é tem uma
  • 00:22:39
    variedade de coisas de funcionamento nem
  • 00:22:41
    você tem ali a parte dos céus é parte do
  • 00:22:44
    css já está bem mais desenvolvidas têm
  • 00:22:46
    sistema degrad você tem um sistema de
  • 00:22:49
    links de gerar link sistema de tudo que
  • 00:22:52
    é coisa então você tem uma variedade
  • 00:22:55
    enorme de das variáveis de design e
  • 00:22:58
    desenvolvimento então uma variedade
  • 00:23:01
    enorme de dispositivos de resoluções de
  • 00:23:03
    densidade de pixels na tela tudo mais é
  • 00:23:06
    o fim das molduras fixas então não
  • 00:23:08
    adianta você fazer o layout para aquela
  • 00:23:11
    tela né ainda tem design que me pergunta
  • 00:23:14
    hoje na qual o tamanho que eu faça o
  • 00:23:18
    tamanho do site falou se você for fazer
  • 00:23:21
    o layout estático photoshops sei lá faz
  • 00:23:24
    uns quatro pelo menos façam uma largura
  • 00:23:26
    de de 900 só que eu preciso ver 1.200
  • 00:23:30
    preciso ver em ao real no entorno do
  • 00:23:33
    site como é que fica aí faz um pouquinho
  • 00:23:35
    menor para uma resolução ali de mil
  • 00:23:37
    homens 24 né
  • 00:23:40
    depois faz um pouquinho menor para 76 8
  • 00:23:42
    de largura mas de uma um pouco menor pra
  • 00:23:45
    pra 600 500 400 e depois uma para 320
  • 00:23:50
    largura já deu cinco aqui então é isso
  • 00:23:54
    aí é que começa a ver que isso já com a
  • 00:23:57
    escola uma loucura no design não vai
  • 00:23:59
    fazer cinco mockup salientam tem outras
  • 00:24:01
    formas ali hoje aqui que que a gente
  • 00:24:04
    pode trabalhar com isso e também a
  • 00:24:07
    necessidade de demonstrar visualmente as
  • 00:24:09
    interações então layout você tem
  • 00:24:11
    é algo estático ali só que você não
  • 00:24:13
    consegue demonstrar como é que o link
  • 00:24:15
    vai funcionar como é que esse botão vai
  • 00:24:17
    fazer por exemplo você clica num negócio
  • 00:24:19
    e aparece outra parte do formulário
  • 00:24:21
    fazendo você pode demonstrar isso no
  • 00:24:23
    photoshop uma forma muito simples né e
  • 00:24:28
    vai dar trabalho também o design é mais
  • 00:24:30
    fácil demonstrar isso no no site
  • 00:24:34
    então como fica o trabalho de design
  • 00:24:37
    para web é a abordagem antiga aqui como
  • 00:24:40
    está falando você tem um layout
  • 00:24:42
    estáticos no photoshop então aqui todos
  • 00:24:45
    são alguns dados que uma agência fez 11
  • 00:24:47
    site aqui que já não está mais no ar
  • 00:24:51
    você vê aqui o site está inserido em uma
  • 00:24:54
    parte da tela ele tem um tamanho tal e o
  • 00:24:56
    fundo vamos pôr vai ser isso daqui né aí
  • 00:24:59
    o que eu faço
  • 00:25:00
    foi esse fundo na tela inteira e põe o
  • 00:25:02
    site desse tamanho aqui né isso alguns
  • 00:25:06
    anos atrás ainda era feito né mas hoje
  • 00:25:10
    já o pessoal passa no layout assim foi
  • 00:25:14
    assim ó já está um pouquinho defasados
  • 00:25:17
    esse tipo de idéia
  • 00:25:19
    né aí a abordagem não tão antiga então
  • 00:25:23
    em seu site do do jayme bernardo que
  • 00:25:26
    está no ar hoje ainda jayme bernardo
  • 00:25:27
    quanto ponto br
  • 00:25:29
    é você faz de vários layouts estágio
  • 00:25:31
    photoshop então vou fazer um layout aqui
  • 00:25:33
    pra tela grande tamanho definido aí um
  • 00:25:37
    layout para a telinha aqui dos euá
  • 00:25:39
    tudo bem isso já ajuda um pouco né pra
  • 00:25:43
    pra mim como o desenvolvedor como pensar
  • 00:25:45
    como viabilizar isso
  • 00:25:47
    só que você não vai ter idéia é
  • 00:25:49
    exatamente de como isso vai funcionar
  • 00:25:51
    até a hora que eu fizer realmente um
  • 00:25:54
    mockup na internet ea gente ficar bem
  • 00:25:57
    mudando também de tela acessando do
  • 00:25:59
    celular acessando pelo ipad para vencer
  • 00:26:01
    o seu tamanho está certo e você vê que
  • 00:26:03
    entre essa tela e essa tela aqui tem uma
  • 00:26:05
    distância muito grande de de variáveis
  • 00:26:09
    tudo mais
  • 00:26:10
    além do fato do que você acessa o site
  • 00:26:13
    aqui por exemplo por um por um iphone 5
  • 00:26:16
    s pra cima que tem a tela retina
  • 00:26:19
    você vai ter uma dupla densidade de
  • 00:26:21
    pixels na tela
  • 00:26:22
    então se eu por essa imagem também
  • 00:26:25
    mal no iphone vai ficar borrada né seu
  • 00:26:28
    acesso a uma tela 4k que tem densidade
  • 00:26:30
    sei lá é de pixels de mais do que um
  • 00:26:34
    pixel por uma necessidade de mais do que
  • 00:26:37
    um pixel por pixel né média de pontos
  • 00:26:41
    por pixel vamos dizer assim é você vai
  • 00:26:44
    ter as imagens borradas então é hétero
  • 00:26:47
    que tem mais coisas aqui que a gente
  • 00:26:49
    precisa pensar além disso então qualquer
  • 00:26:52
    abordagem mais moderna e tatá surgindo é
  • 00:26:55
    o design modular
  • 00:26:57
    então aqui você vê o o design que esse
  • 00:27:02
    design é daniel móveis é pra acabar com
  • 00:27:07
    a equipe de design da empresa dele pra
  • 00:27:10
    para o techcrunch na época o site
  • 00:27:12
    techcrunch
  • 00:27:13
    então você vê aqui que ele desenvolveu
  • 00:27:16
    módulos para aprovar com cliente antes
  • 00:27:19
    de desenvolver idéias assim pra ir
  • 00:27:21
    desenvolvendo navegador junto com os
  • 00:27:24
    desenvolvedores estão assim esse
  • 00:27:27
    trabalho junto com o desenvolvedor hoje
  • 00:27:28
    é fundamental é você vê aqui que você
  • 00:27:31
    tem as cores e alguns alguns exemplos de
  • 00:27:34
    fontes é que eu cortei mas mais para
  • 00:27:35
    baixo tem um exemplo de outras fontes
  • 00:27:38
    pro cliente ver como é que fica mesmo né
  • 00:27:41
    e não é e não é só a fonte no photoshop
  • 00:27:44
    isso aqui foi passado depois pra pra pro
  • 00:27:48
    navegador mesmo porque você precisa
  • 00:27:51
    testar renderização das fontes no
  • 00:27:53
    navegador realização da fonte no
  • 00:27:55
    photoshop é linda maravilhosa só que
  • 00:27:57
    você passa pelo navegador no windows vai
  • 00:27:59
    ter uma renderização da fonte no windows
  • 00:28:01
    10 a ter uma renderização do windows 7
  • 00:28:03
    vai ter outra e no mac oeste vai ter
  • 00:28:06
    outra no celular você vai ter outro
  • 00:28:08
    entendeu
  • 00:28:08
    às vezes uma fonte que fica como aqui
  • 00:28:11
    nessa tela fica super leve né
  • 00:28:14
    você vai ter uma numa tela às vezes no
  • 00:28:18
    mec o mec ele fica um pouquinho mais
  • 00:28:20
    reforçada às vezes a fonte
  • 00:28:23
    então você precisa fazer esses testes é
  • 00:28:25
    aí você tem aqui um mockup da navegação
  • 00:28:28
    de artigos não impede que você tem só o
  • 00:28:32
    módulo da notícia é do artigo como ele
  • 00:28:35
    vai aparecer
  • 00:28:37
    é aqui você tem um estudo de como vai
  • 00:28:39
    funcionar o compartilhamento é preciso
  • 00:28:42
    mais espaço em cima mudou para acordar
  • 00:28:44
    da marca daquele daquela rede social e
  • 00:28:47
    assim vai
  • 00:28:48
    então alguns princípios aqui do design
  • 00:28:51
    modular essa é uma coisa que está assim
  • 00:28:53
    em discussão então é é o que eu
  • 00:28:56
    conseguir pesquisar e também toda a
  • 00:28:59
    minha experiência de desenvolvimento
  • 00:29:00
    então envolve o trabalho além do
  • 00:29:03
    photoshop
  • 00:29:04
    então o designer vai trabalhar com o
  • 00:29:06
    photoshop vai mas de uma forma um pouco
  • 00:29:09
    diferente e vai trabalhar também com com
  • 00:29:12
    o papel vai trabalhar com um pouco com o
  • 00:29:14
    desenvolvimento se o design tem um
  • 00:29:16
    pouquinho o dia de domínio de html css
  • 00:29:18
    também vai trabalhar um pouquinho com
  • 00:29:20
    essa parte não envolve a prototipagem
  • 00:29:22
    rápida o esquete né então esquete não só
  • 00:29:26
    no photoshop você fazer esboços rápidos
  • 00:29:28
    como vocês também fazer esboços a todos
  • 00:29:30
    no navegador como funciona isso passa lá
  • 00:29:34
    para desenvolvedor vai lá no navegador
  • 00:29:35
    já faz um exemplo daquele modo de ver se
  • 00:29:38
    funciona bem né vai configurar um
  • 00:29:41
    servidor lá acesso ao celular vistas
  • 00:29:43
    está dando tudo certo
  • 00:29:46
    você tem o gerenciamento de expectativas
  • 00:29:50
    do cliente porque o corinthians não vai
  • 00:29:52
    mais receber um layout estático né ele
  • 00:29:56
    não vai receber um layout estático e daí
  • 00:29:58
    você é você tem que conversar com
  • 00:30:01
    clientes
  • 00:30:02
    nessa hora você vai receber assim os
  • 00:30:04
    pedaços do site
  • 00:30:05
    depois você vai vendo o site completado
  • 00:30:08
    a gente vai fazer isso junto né então
  • 00:30:10
    uma mudança do fluxo de trabalho
  • 00:30:12
    você tem então um trabalho em conjunto
  • 00:30:14
    com o desenvolvedor e com o cliente no
  • 00:30:18
    navegador o quanto antes
  • 00:30:20
    então isso é muito importante você a
  • 00:30:23
    partir do momento que você já tem algum
  • 00:30:25
    conceito ali no photoshop você passar
  • 00:30:27
    isso para o navegador já começar a
  • 00:30:29
    testar isso e depois volta o photoshop
  • 00:30:31
    de volta para ter essas voltas photoshop
  • 00:30:34
    né e e assim vai se esse ciclo mais
  • 00:30:39
    interativo é de iterações que você faz
  • 00:30:43
    várias várias tentativas tentativa e
  • 00:30:46
    erro tentativa de ter o braço da falta
  • 00:30:48
    dessa alternativa o braço do atacante
  • 00:30:50
    dividido em três festa com a melhor
  • 00:30:53
    depois vai selecionar melhor mistura
  • 00:30:55
    tudo tem um trabalho mais mais orgânicos
  • 00:30:58
    é deus tem a mudança no fluxo de
  • 00:31:01
    trabalho e também novas ferramentas que
  • 00:31:03
    eu vou mostrar aqui agora não desanimou
  • 00:31:07
    a ele ele contrapõe aquele aquele modelo
  • 00:31:12
    de cascata né de waterford de
  • 00:31:14
    gerenciamento de projetos que você faz
  • 00:31:16
    um negócio para a próxima fase mas um
  • 00:31:18
    negócio passo a passo a próxima fase faz
  • 00:31:20
    um negócio a próxima fase é e daí o
  • 00:31:24
    risco aumentando de acordo com a fase
  • 00:31:27
    não seja você chega lá no final está
  • 00:31:30
    quase tudo pronto nem isso aconteceu né
  • 00:31:32
    o cliente chega e fala assim meu deus eu
  • 00:31:33
    tal rio esse negócio aí que vai fazer
  • 00:31:36
    vai voltar lá para o começo do
  • 00:31:37
    desenvolvimento né o problema de você
  • 00:31:42
    tenha metodología mais ágil nessa
  • 00:31:45
    metodologia interativa que você é
  • 00:31:48
    definir um protótipo constrói e já lança
  • 00:31:51
    definir constrói lança definir e
  • 00:31:52
    construir lançar e se lança não quer
  • 00:31:54
    dizer que eu vou lançar na internet já
  • 00:31:55
    mas eu posso por exemplo lançar o
  • 00:31:57
    cliente vê eu posso lançar para a equipe
  • 00:31:59
    de desenvolvimento ver né
  • 00:32:01
    se tá ok aquele negócio e daí vamos
  • 00:32:04
    fazer um protótipo e mostrar o cliente a
  • 00:32:06
    deu certo não deu certo né fala que o
  • 00:32:08
    cliente que aquilo é é é uma coisa claro
  • 00:32:11
    em desenvolvimento ainda finalizada mas
  • 00:32:16
    assim essa prototipagem rápida nem que
  • 00:32:18
    eu falei antes
  • 00:32:19
    então aqui algumas ferramentas aí que a
  • 00:32:22
    gente pode utilizar para conseguir esse
  • 00:32:24
    design modular os freios já são
  • 00:32:27
    conhecidos né então os frames a e já
  • 00:32:32
    podem ser usado pra esse tipo de
  • 00:32:34
    prototipagem facilita né ou até um ódio
  • 00:32:37
    frame rabiscado no papel
  • 00:32:39
    aí você tem as estatais ou seja uma
  • 00:32:42
    ferramenta mais para o design
  • 00:32:44
    então você tem aqui o template que está
  • 00:32:47
    nesse site aqui e aqui você tem um
  • 00:32:50
    exemplo dessas estatais que o também o
  • 00:32:53
    designer daniel móveis crown
  • 00:32:55
    entertainment wwe
  • 00:32:57
    então você tenha que um todos os grupos
  • 00:33:00
    de cores que podem ser utilizados
  • 00:33:03
    algumas alternativas de de título de
  • 00:33:06
    texto que fonte que usa né então é
  • 00:33:10
    algumas palavras-chave que desenvolveu
  • 00:33:12
    que que tem a ver com aquele site com
  • 00:33:15
    aquela marca qualquer identidade visual
  • 00:33:18
    as texturas é um exemplo de botão
  • 00:33:20
    exemplos de ícones que podem ser
  • 00:33:22
    utilizados no site né ao há alguma
  • 00:33:25
    algumas alternativas de bordas estão
  • 00:33:27
    aqui são só ideias do design são vamos
  • 00:33:31
    assim jogadas aqui né de servem de guia
  • 00:33:36
    para fazer outras coisas do site mcv que
  • 00:33:38
    não estou definindo o que vai ser a
  • 00:33:40
    largura do site que surge é muito
  • 00:33:43
    relativo não estou definido aqui o que
  • 00:33:46
    vai ficar onde então essa é uma
  • 00:33:47
    definição inicial do do da parte visual
  • 00:33:51
    do site deve ser também tem um
  • 00:33:55
    inventário da interface quando você vai
  • 00:33:57
    fazer o rio design de um site
  • 00:33:59
    então o brasil fosse definiu isso aqui o
  • 00:34:01
    interface inventory é por exemplo foi no
  • 00:34:05
    site do banco dele e fez um inventário
  • 00:34:07
    de todos os botões que eles usavam no
  • 00:34:09
    site você vê aqui a variedade enorme de
  • 00:34:13
    estilos de fonte do tipo de abordagem
  • 00:34:18
    visual de cada botão você vê que o site
  • 00:34:20
    ele vai crescendo e você acaba se se
  • 00:34:24
    perdendo terreno na linguagem visual né
  • 00:34:27
    e aqui já mostra o os botões que tem um
  • 00:34:31
    outro site chama s que já é muito mais
  • 00:34:35
    padronizado né claro mudança de cor é
  • 00:34:37
    esperado mas você vê que segue um certo
  • 00:34:40
    padrão então essa é uma outra ferramenta
  • 00:34:42
    para que você possa trabalhar assim com
  • 00:34:47
    esse ambiente da internet mesmo de você
  • 00:34:51
    tem a colagem de elementos no célebre
  • 00:34:53
    escola diz
  • 00:34:56
    você tem aqui é parecido com estael tal
  • 00:35:00
    só que um pouquinho mais desenvolvido
  • 00:35:03
    você tem que uma colagem de vários
  • 00:35:04
    elementos já desenvolvidos do site pra
  • 00:35:07
    você ver se tem uma certa coerência
  • 00:35:08
    visual
  • 00:35:10
    então é esse daqui mostra que a presença
  • 00:35:14
    de cores mostra um pouquinho dos módulos
  • 00:35:16
    do site
  • 00:35:17
    como funcionaria a linguagem visual de
  • 00:35:19
    ícones por exemplo uma um exemplo aqui
  • 00:35:22
    de um painel do site nem usar essa cor
  • 00:35:25
    exemplo de botões e tal então você tenha
  • 00:35:28
    uma colagem de elementos do site
  • 00:35:31
    aqui você tem a fonte elementos da
  • 00:35:33
    galeria é elemento saque de d
  • 00:35:38
    por exemplo um widget é que a gente
  • 00:35:39
    chama esse tipo de coisa que às vezes
  • 00:35:41
    fica flutuando na direita na esquerda ou
  • 00:35:43
    do layout
  • 00:35:44
    você tem que colar jens já de elementos
  • 00:35:46
    tomando um pouco mais em forma
  • 00:35:51
    aqui também um exemplo de prototipagem
  • 00:35:52
    rápida é esse aqui é o que eu fiz pra um
  • 00:35:57
    tutorial que eu gravei ali pra o site
  • 00:35:59
    ponto no site chama faith ponto e aqui
  • 00:36:04
    estou testando esse módulo - assim como
  • 00:36:07
    eu faço esse tipo de de botão né
  • 00:36:12
    o que muda para ligado desligado num
  • 00:36:15
    estudo de um estudo de de um conceito
  • 00:36:18
    aqui que eu estava demonstrando e você
  • 00:36:20
    vê aqui que citar que eu estou colocando
  • 00:36:23
    aqui esse exemplo que está no site chama
  • 00:36:27
    quanto tempo seu o seu clique aqui eu
  • 00:36:30
    consigo chegar nessa nessa pena que ele
  • 00:36:34
    chama né
  • 00:36:35
    e consigo pegar aqui e consigo acreditar
  • 00:36:39
    né consigo acreditar aqui a azul a cor
  • 00:36:48
    conseguiu editar essa pena aqui e e já
  • 00:36:54
    vê o efeito na hora então esse tipo de
  • 00:36:56
    site que chamam de cold play ground por
  • 00:36:59
    exemplo legal do código é facilita muito
  • 00:37:03
    a prototipagem então posso posso chegar
  • 00:37:05
    aqui numa pena começar a escrever html
  • 00:37:07
    css tal nem preciso criar um arquivo no
  • 00:37:10
    computador nem nada já compartilha esse
  • 00:37:12
    link aqui com as pessoas e falou esse
  • 00:37:15
    módulo aqui está funcionando bem e tal
  • 00:37:19
    então você tem muitos recursos hoje aqui
  • 00:37:23
    que ajudam nesse nesse aspecto
  • 00:37:26
    aí você tem também site 1up ps que é
  • 00:37:28
    muito bom pra design você pode fazer
  • 00:37:31
    a conta aqui e fazer um estudo da
  • 00:37:33
    tipografia direto no direto no navegador
  • 00:37:39
    então aqui você testa cor de fundo
  • 00:37:42
    concórdia de texto com um veio uma
  • 00:37:46
    variedade de tipos de fonte e você
  • 00:37:49
    consegue ver exatamente como fica a
  • 00:37:51
    renderização no navegador
  • 00:37:53
    então essa é uma coisa muito muito
  • 00:37:57
    importante assim então não adianta você
  • 00:37:59
    fazer o design só no photoshop você tem
  • 00:38:01
    que chegar num sistema como esse ver
  • 00:38:05
    como que aparece no navegador de verdade
  • 00:38:07
    eu posso pegar uma página dessa aquela
  • 00:38:10
    história acessado acessar do tablet
  • 00:38:13
    acessar de vários e usa seu horário
  • 00:38:15
    diferente e ver se a legibilidade
  • 00:38:16
    realmente está boa
  • 00:38:21
    e aí você tem você chega no conceito é
  • 00:38:24
    chamado atômica e design criado também
  • 00:38:27
    do brasil francioli que é você
  • 00:38:30
    desenvolveu os átomos ou seja a menor
  • 00:38:33
    parte do módulo a parte indivisível
  • 00:38:35
    assim que esse status se juntam em
  • 00:38:38
    moléculas que se junte em organismos que
  • 00:38:40
    se juntam em template que depois viram
  • 00:38:42
    páginas não ser tanto um vídeo bem
  • 00:38:46
    simples demonstrando você tem as partes
  • 00:38:48
    de uma busca de um site as mãos átomos
  • 00:38:51
    que se forma uma molécula que se forma
  • 00:38:53
    no organismo
  • 00:38:54
    desse forma no template uma base numa
  • 00:38:57
    página
  • 00:38:58
    e daí se forma em uma página específica
  • 00:39:00
    por exemplo a home do site também é um
  • 00:39:03
    conceito bem interessante assim que é
  • 00:39:05
    também de uma palestra por si só tem
  • 00:39:08
    mais informações aqui no smash magazine
  • 00:39:11
    no site do draft e daí você também tem
  • 00:39:17
    as bibliotecas e padrões dos peter liars
  • 00:39:22
    que você faz um site mesmo pode ser uma
  • 00:39:25
    intranet alguma coisa assim onde você
  • 00:39:27
    descreve os módulos que vão ser usado
  • 00:39:30
    que estão sendo utilizados no seu site
  • 00:39:33
    as janelas modais aquela janelinha
  • 00:39:35
    quebra aqui no meio é que escurece o
  • 00:39:37
    resto da tela
  • 00:39:38
    as mensagens de alerta os cartões nem se
  • 00:39:41
    aqui é o da genii um exemplo da jetta
  • 00:39:43
    tem um outro exemplo aquino pedra web
  • 00:39:46
    mostrando aqui esse aqui já segue esse é
  • 00:39:49
    um site feito o brasil próximo então
  • 00:39:51
    onde ele já segue esse exemplo do ator
  • 00:39:55
    no design então você tem as cores têm as
  • 00:39:57
    fontes têm como como que aparece o
  • 00:40:00
    select com o que aparece nesse botão de
  • 00:40:02
    rádio como que aparece x box
  • 00:40:05
    enfim tem uma linha guia de todo os
  • 00:40:09
    elementos do site você pode também ver
  • 00:40:12
    as moléculas como as moléculas se se se
  • 00:40:17
    junto né mídia blocos da imagem fica
  • 00:40:20
    assim o texto fica assim você tem essas
  • 00:40:26
    moléculas aqui aí você tem os organismos
  • 00:40:29
    roda o rodapé do site é um organismo
  • 00:40:32
    o cabeçalho do site
  • 00:40:34
    mesmo assim por diante deus template dez
  • 00:40:37
    páginas pode acessar isso depois de ver
  • 00:40:40
    com calma nesse endereço aqui e daí por
  • 00:40:45
    último você tem os guias de estilos
  • 00:40:47
    style guy diz que é parecido ali com que
  • 00:40:49
    a gente viu no nó nuno peter lely
  • 00:40:53
    naquele exemplo anterior que é um tipo
  • 00:40:56
    de guia de estilo né
  • 00:40:57
    e esse daqui ele envolve um pouco mais a
  • 00:41:00
    parte de design também na verdade os
  • 00:41:03
    conceitos e mistura assim a biblioteca
  • 00:41:05
    de padrões é uma coisa um pouquinho mais
  • 00:41:08
    recente está lugares já existia desde
  • 00:41:10
    antes nesse site style guide ponto eo
  • 00:41:14
    você consegue ver vários exemplos aqui e
  • 00:41:17
    navegar vários exemplos de stargardt
  • 00:41:23
    então resumindo as entregas do designer
  • 00:41:26
    o cliente tem que mudar né você entregar
  • 00:41:30
    um layout estático de você entregar o
  • 00:41:34
    psd está acho que o cliente a provar meu
  • 00:41:36
    cliente a prova e você passa por um
  • 00:41:38
    desenvolvedor externo como eu
  • 00:41:41
    aí já que léo se aprovado nem conversou
  • 00:41:43
    comigo e tudo mais
  • 00:41:45
    você está correndo um sério risco porque
  • 00:41:47
    vai chegar aqui mim foi assim ó isso
  • 00:41:50
    aqui não funciona aqui não vai dar certo
  • 00:41:51
    aqui não vai dar certo que não vai dar
  • 00:41:53
    certo
  • 00:41:54
    o cliente já provou aquele negócio e
  • 00:41:56
    acontece um certo desencontro com o
  • 00:41:58
    cliente porque é eu tenho que explicar
  • 00:42:01
    por que a gente é assim ó hoje a gente
  • 00:42:03
    está numa época de daniel consigo você
  • 00:42:06
    tem que fazer com o seu ar deputado de
  • 00:42:08
    própria tudo entre essas vezes é pra
  • 00:42:11
    portal do profaa black naquele celulares
  • 00:42:14
    que parece estar longe do tão grande
  • 00:42:16
    você tem enfim milhões tipo de tela e de
  • 00:42:19
    de resoluções e total e de tipos de
  • 00:42:24
    interação e não funciona mais um estágio
  • 00:42:27
    você já entrega aprovado é pré-aprovado
  • 00:42:30
    pelo cliente e vou ter que construir
  • 00:42:32
    aquilo e o cliente vai ter um resultado
  • 00:42:34
    abaixo do esperado porque o site não vai
  • 00:42:37
    ficar muito bom então você tem que
  • 00:42:39
    trabalhar junto com o desenvolvedor você
  • 00:42:42
    tem que ter um outro fluxo de trabalho
  • 00:42:44
    então a entrega porque a gente tem que
  • 00:42:46
    mudar
  • 00:42:47
    photoshop apenas uma das
  • 00:42:48
    ferramentas né é interessante ver as
  • 00:42:51
    outras ferramentas que existem ali que
  • 00:42:52
    eu mostrei como cupim newtime qs
  • 00:42:55
    protestar parte de d
  • 00:42:58
    a área de tipografia do site enfim
  • 00:43:01
    várias várias coisas aí né é eo design
  • 00:43:05
    tem que ser para web nem isso é uma
  • 00:43:07
    coisa mas particular do brasil
  • 00:43:09
    assim começou minha experiência que os
  • 00:43:13
    designers ainda trabalham muito com a
  • 00:43:14
    visão editorial na cabeça
  • 00:43:16
    então a formação de design para web aqui
  • 00:43:19
    ainda está muito fraca então já o
  • 00:43:21
    pessoal me passa o design de um site por
  • 00:43:23
    exemplo não tem roda pé não tem as
  • 00:43:25
    informações básicas que precisam ter no
  • 00:43:28
    rodapé do site né
  • 00:43:30
    ou então a pessoa faz o site me mandar
  • 00:43:32
    um arquivo o site tem tem 2.000 de
  • 00:43:35
    tamanho ou seja ela está a a resolução
  • 00:43:40
    das 150 dp está 72 né
  • 00:43:44
    no psd é claro que o design ainda não na
  • 00:43:49
    aacd acaba não tendo a noção ainda que
  • 00:43:51
    ele precisa me mandar só uma idéia do
  • 00:43:54
    layout
  • 00:43:55
    depois ele me passa os é o 77 papel a
  • 00:44:00
    todas as imagens as fontes que ele usou
  • 00:44:03
    ele me passa em separado
  • 00:44:04
    ele vai ter que me passou separado agora
  • 00:44:06
    porque eu preciso gerar logo em 2 x 1 em
  • 00:44:11
    duas vezes o tamanho depois é preciso
  • 00:44:13
    gerar a logo menor né
  • 00:44:15
    mas eu não preciso receber o layout
  • 00:44:17
    inteiro um mockup da página inteiro
  • 00:44:19
    o layout da página inteira é em duas
  • 00:44:22
    vezes o tamanho então ainda essa
  • 00:44:25
    conversa com com design está muito tá tá
  • 00:44:33
    muito assim não dá uma pessoa está muito
  • 00:44:35
    isolado do outro então eu estou
  • 00:44:37
    inclusive monta essa essa palestra
  • 00:44:40
    pra começar e se esse diálogo e então
  • 00:44:46
    assim outra outra questão do design que
  • 00:44:48
    tem que ser pra lá é bené os tem que
  • 00:44:50
    realmente pensar é hoje todo mundo tem
  • 00:44:52
    celular hoje todo mundo tem
  • 00:44:55
    tem um computador em casa um notebook as
  • 00:44:58
    pessoas nem têm justamente na nintendo
  • 00:44:59
    mas computador só tem o celular acessa
  • 00:45:01
    mais força
  • 00:45:02
    outra coisa então pense um pouquinho
  • 00:45:04
    nessa realidade assim né ainda recebo
  • 00:45:08
    muitos e layouts para a tela grande
  • 00:45:11
    enquanto o do layout plantel a pequena
  • 00:45:14
    tem que ser o primeiro
  • 00:45:15
    se você realmente vai fazer um bom
  • 00:45:17
    capital mas também tem que pensar
  • 00:45:18
    naquela questão dos modos como qual como
  • 00:45:21
    cada módulo vai se comportar dentro
  • 00:45:25
    dessas dessa variedade de ambientes que
  • 00:45:28
    a gente tem na internet e também não se
  • 00:45:32
    esqueça do usuário
  • 00:45:34
    então a gente faz o aqueles é tem casos
  • 00:45:39
    de altas mais que a beleza a quando o
  • 00:45:42
    mouse passa por cima acontece tal coisa
  • 00:45:44
    e tal mas você já parou para pensar que
  • 00:45:46
    no seu lar não existe essa interação do
  • 00:45:48
    que o mouse passa por cima
  • 00:45:50
    não existe mouse no um dispositivo de
  • 00:45:53
    toque né ea gente nem sabe o quê que
  • 00:45:55
    outros dispositivos vão vir no futuro
  • 00:45:57
    pode ser que essa interação pelo toque
  • 00:46:00
    está com os dias contados também pode
  • 00:46:03
    vir outra coisa interação com já estão
  • 00:46:05
    aparecendo na interação com gestos a
  • 00:46:07
    interação com a fácil né então outro com
  • 00:46:11
    tudo isso quer dizer que o lê aquele
  • 00:46:13
    layout no psd que fazia estático que
  • 00:46:15
    fazia home de a página quem somos e tal
  • 00:46:18
    no layout taxa já está completamente
  • 00:46:21
    defasado não precisa pensar diferente
  • 00:46:24
    isso aqui só foi pra pra lançar algumas
  • 00:46:27
    idéias e mostrar um pouquinho que o que
  • 00:46:30
    a gente pode ver aí já de de processos
  • 00:46:34
    mais modernos pra projetos de web site e
  • 00:46:38
    também acaba sacrificando está
  • 00:46:40
    aplicativos aqui pra finalizar queria
  • 00:46:44
    deixar dois links o livro que acabou de
  • 00:46:46
    sair do méxico assim chamado design
  • 00:46:49
    sistema ons
  • 00:46:50
    então esse livro design sistemas mostra
  • 00:46:53
    justamente isso como você fazer um
  • 00:46:54
    sistema de design pra realmente você
  • 00:46:59
    poder é ter uma linguagem digital para
  • 00:47:03
    sua empresa você você poder fazer um
  • 00:47:05
    site mais versátil e que seja baseado
  • 00:47:09
    numa linguagem de design não é na
  • 00:47:13
    linguagem nos sistemas design não num
  • 00:47:15
    num psd estático aqui que foi que foi
  • 00:47:19
    aprovado e também tem um livro que saiu
  • 00:47:23
    faz pouco tempo o livro otoni design do
  • 00:47:25
    brasil lost que você pode ler
  • 00:47:28
    gratuitamente na internet ou então
  • 00:47:30
    comprar a versão e book e tudo mais
  • 00:47:36
    então é isso aqui num site eu já vou
  • 00:47:40
    passar o link para a palestra você
  • 00:47:41
    encontra a todas as referências que eu
  • 00:47:44
    utilizei a de pesquisa e agradeço a por
  • 00:47:50
    ter assistido a expressão antes existia
  • 00:47:52
    até o final e os slides dessa palestra
  • 00:47:55
    estão disponíveis aqui neste link né ou
  • 00:47:58
    a própria apresentação com vocês viram
  • 00:48:00
    é um site então é só pra mostrar pra mim
  • 00:48:04
    como como a gente tem recursos hoje aqui
  • 00:48:08
    dentro html css para desenvolver uma
  • 00:48:11
    grande variedade de de coisas em que não
  • 00:48:14
    são só os sites disse
  • 00:48:17
    então agradeço aí a audiência e até a
  • 00:48:21
    próxima
الوسوم
  • design gráfico
  • desenvolvimento web
  • responsive design
  • prototipagem
  • modular design
  • HTML5
  • CSS3
  • colaboração
  • experiência do usuário
  • tendências de design