Como criar um Site Épico [Parte 02] – 11 passos da criação de um Site Épico

Confira 11 passos que lhe ajudarão a criar um site épico

site épico

É impossível nascer dominando algo, seja em qualquer área do conhecimento humano. Isso é óbvio. Qualquer habilidade é construída treinando e primeiramente adquirindo conhecimentos. E não poderia ser diferente em se tratando em Design para web. Por isso, hoje, o Chief of Design tem a missão de tentar explicar a sequência de processos para construção de um website, e o mais importante, quais conhecimentos você deve ter para construí-lo.

Porém  queremos que você construa, como foi dito no artigo anterior, um site épico. Aquele website, que como um herói, ampare seus usuários, que transmite valor e generosidade, e promova conquistas e realizações ao usuário.

Agora reflita:

O quanto você se tornaria valorizado ao se habilitar na construção de sites épicos?

Por que seus clientes, usuários e o mercado precisam de sites que transmitam valor e promovam realizações com precisão?

Continue comigo e veja  como vamos definir agora a sequência de tarefas (11 passos – o terceiro e o décimo primeiro te aproximam do heroísmo) para construção de um site qualquer. Qualquer não, Épico.

O que você verá neste artigo?

#1 – Conhecendo a proposta do projeto

briefing

Não dá para construir nada sem informações. Deve existir um problema ou missão para que algo seja construído. E decorrente destes deve-se extrair as informações para resolver os problemas e concluir a missão.

Quanto a construção de websites o processo de extrair informações é através da elaboração de um briefing.

Este é um processo de planejamento do site que praticamente inicia os trabalhos. Pular esta etapa é a mesma coisa que viajar para um destino nunca antes visitado sem um guia, um mapa, um GPS ou sem abrir a boca para perguntar como chegar a tal lugar.

É necessário que você saiba elaborar um briefing  que colete todas as informações necessárias para desenvolver o projeto.

Briefing é um questionário respondido pelo cliente com um conjunto de informações que darão direção para construção do website.

O que você precisa saber para elaborar o questionário de um briefing?

Você precisa saber as questões que envolvem o conhecimento do público, a definição de identidade visual de sites, comunicação visual, objetivos de comunicação, funcionalidades, história e concorrência de uma instituição.

Perguntas comuns em um questionário do tipo são:

  • Qual o negócio de sua empresa?
  • Qual os objetivos do projeto?
  • Qual o público-alvo?
  • A empresa possui Manual da marca e da Identidade visual?
  • Qual conteúdo será fornecido no site?
  • Quais são seus concorrentes?
  • Quais funcionalidades você gostaria em seu site?

Esses são alguns tópicos que você pode usar.

Caso queira saber mais leia este artigo: Como ter ideias para construir interfaces digitais que realmente tragam soluções.

Com estas informações em mãos está na hora de organizar os próximos passos.

#2 – Categorizando as informações em uma estrutura coerente e de fácil compreensão para as pessoas

arquitetura de informação

Todo bom site tem determinado a melhor forma como as informações devem ser dispostas levando em conta o quão fácil e rápido o conteúdo será encontrado e qual conteúdo tem prioridade nos caminhos que o usuário deve percorrer.

Uma das formas de se fazer isso é a categorização das informações.

E para que tudo funcione de maneira coesa, você precisa também se preocupar com uma boa hospedagem. Existem várias no mercado, a que podemos indicar é a WebLink.

O que você precisa saber para categorizar as informações de um site?

Existem profissionais especializados no assunto. São especialistas em Arquitetura da Informação. Dependendo do tamanho e complexidade do projeto é possível que você trabalhe com profissionais que dominem o assunto. Eles definirão as diretrizes, conjuntos de ações, entre outros. Porém nem sempre você contará, ou o projeto contará, com esses incríveis profissionais. Você terá que ser seu próprio Arquiteto, afinal como Designer você tem missão, tendo um Arquiteto da Informação ou não, de cuidar da experiência do usuário e da usabilidade do site.

Então para categorizar seu site, você, no mínimo, deve estar habilitado a:

  • Agrupar conteúdo e definir taxonomias ;
  • Definir um mapa do site através de um organograma que exibe as páginas que o site contará;
  • Definir quais outros sistemas interligados com o site (aplicativos, redes sociais, hotsites, etc).

Com esta organização fica mais fácil imaginar o sistema de navegação e interação do usuário com o sistema.

#3 – Esboçando a estrutura da interface

wireframe esboço

Antes de partir para qualquer tipo de editor gráfico você pode tomar decisões que podem se tornar mais fácil e rápidas de serem revisadas e até mesmos descartadas quando você esboça a estrutura de um layout. Isso evita e diminui o custo e perda de tempo com refações de layouts maus projetados.

Esse processo de esboço chamamos de prototipação.

Entretanto o fator mais importante de elaborar um esboço é a simulação do que poderá ser o seu layout épico. Ele é desenvolvido baseado nas informações colhidas no briefing.

Você poderá estruturar organizadamente os elementos da interface e o conteúdo no espaço que pretendes usar; definindo a navegação, funcionalidades e outros componentes que compõe o site, focando na interação do usuário.

Pode ser feito simplesmente utilizando lápis e papel para esboçar e tomar certas decisões. É um processo de antever e resolver problemas de usabilidade que não podem ser resolvidos com sombras, degradês e efeitos diversos do Photoshop. Deixe para se preocupar com esses efeitos em uma etapa mais a frente. Isso te deixará livre para compreender de forma clara sobre as reais necessidades do layout, somente o essencial.

Ao antever os possíveis problemas não se esqueça de pensar em soluções que além de técnicas  despertem sentimentos de amparo. Tenha empatia com usuário e promova a função de um site de despertar sentimentos de valor e de confiança, impactando o usuário.

O que você precisa saber para esboçar a estrutura de um site?

Você deve estar habilitado a desenvolver wireframes. O wireframe é o esboço do site, simples assim. E não é exatamente a habilidade de operar um software de construção de wireframes, apesar de ajudar, mas sim, a capacidade de transpor para o esboço as informações do briefing e das informações categorizadas na arquitetura que tornarão o wireframe eficaz. Por isso além de entender as etapas anteriores, é importante conhecimentos de usabilidade, navegabilidade  ,acessibilidade, interação, design responsivo e leiturabilidade.

Você pode utilizar entre dois tipos de wireframes: o de baixa fidelidade ou o de alta fidelidade.

Wireframes de baixa fidelidade são simples e podem ser até desenhados a mão. São basicamente compostos somente por quadrados, linhas, círculos, triângulos sobre um fundo simples e com alguns rótulos.

Wireframes de alta fidelidade são mais incrementados e podem se aproximar mais de como ficará o site. Existem softwares como o Axure que são capazes de simular uma navegação das páginas do esboço similar a mesma tarefa em um site.

O nível de detalhamento do wireframe depende do projeto, da finalidade e da preferência de quem está projetando.

Sugiro ler este artigo onde detalho sobre Wireframes:
Descubra como Wireframes podem lhe auxiliar na elaboração dos seus projetos.

Nesta etapa é importante já esboçar pensando em diferentes tipo de dispositivos. Portanto sugiro também que baixe meu e-book de design responsivo.

#4 – Partindo para criação e diagramação

grids

Seu esboço já está pronto e agora você está louco para abrir o Photoshop. Porém vamos com calma. Não é porque você esboçou os elementos corretamente que é fácil a tarefa de desenhá-los ordenadamente em seu editor gráfico favorito. Chamamos este processo de diagramação.

Diagramação é usada para dispor elementos gráficos em jornais, livros, revistas e em nosso caso, websites.

Obs.: Só por curiosidade saiba que existem Designers com habilidades em HTML e CSS que ignoram o Photoshop e definem a interface direto com códigos.

É importante que se preocupe em desenhar seu layout determinando o posicionamento, alinhamento e dimensão dos elementos gráficos e seções em proporções harmoniosas, e determinando o fluxo de leitura e hierarquia do conteúdo.

O que você precisa saber desenhar ordenadamente sua interface?

Aprenda a usar Grids e pesquise sobre técnicas para diagramação. Isso vai ser uma revolução na sua forma de desenvolver layouts e compor as formas e aspectos visuais do site.

O uso de grids permite executar esta tarefa com mais facilidade e simplicidade.

A função principal do Grid é organizar as informações dentro de uma estrutura, conservando um padrão, uma consistência visual do layout.

Para saber mais leia: Guia sobre Grid

#5 – Escolhendo sua paleta de cores

cores

É obvio que chegaríamos a esta etapa porque as cores têm o poder de enriquecer um projeto, dando função e sensações a uma interface.

Esta etapa de escolha de cores é muito importante para transmitir os objetivos de comunicação indo muito além de estabelecer os aspectos visuais e estéticos de um website. Como já disse neste meu blog a cor informa.

E a tarefa de escolher cores não é tão simples como parece. Uma escolha equivocada pode fugir a objetivos do projeto e se transformar em uma salada de cores

A princípio eu sugiro que use um grupo limitado de cores para que seu site não fique com uma sobrecarga visual.

O que você precisa saber na hora de definir as cores para seu site?

É indicado que você conheça as funções das cores quanto a sintaxe, semântica e a sintaxe conceitual. Essas funções atribuem as cores funções de organização, classificação e simbolização. Conhecendo essas funções você será capaz de transmitir sensações e os objetivos do site com mais precisão.

Conheça mais detalhes aqui:
Guia sobre Cores – Escolhendo uma paleta de cores perfeita.

Você deve se preocupar também com possíveis limitações visuais de seus usuários. Uma dica é oferecer um contraste eficiente entre as cores usadas no site e os graus de luminosidade destas cores.

Existe um artigo aqui no blog dedicado especialmente a acessibilidade no uso das cores. Você pode conferir aqui:
Guia sobre Cores – Cores e Acessibilidade.

E para você que gosta dos significados das cores é importante se atentar que estes significados podem muitas vezes limitar o poder de comunicação se não levarmos em conta o contexto cultural que o público-alvo está inserido e suas experiências, e até mesmo o contexto da própria informação a ser transmitida.

Eu abordo sobre os significados, psicologia e os contextos para uso da cor neste artigo:
Guia sobre Cores – Significado das Cores.

E para quem está ainda engatinhando quando o assunto é cores sugiro que estude sobre as teorias das cores:
Guia sobre Cores – Teoria das Cores.

#6 – Escolhendo as “fontes” para seu site

tipografia

Como já relatei em outro artigo a escolha de uma boa “fonte” somada a uma aplicação correta é fundamental para o sucesso da peça, tudo porque incita a vontade de ler e diminui o esforço para a compreensão.

Esta etapa é muito importante porque grande parte das informações que encontramos por aí é textual e devemos nos preocupar com a leiturabilidade e legibilidade dos textos do site que projetamos. Mas, assim como as cores, pode parecer simples escolher uma “fonte”, só que não.

O que você precisa saber na hora de escolher as “fontes” de seu site?

Primeiro você não deve escolher uma fonte porque é somente “bonitinha”, e segundo você deve conhecer conceitos de Tipografia. O objetivo principal da tipografia é dar ordem estrutural e forma à comunicação escrita.

Para conhecer os conceitos seguem mais sugestões. Leia os artigos:

Guia sobre Tipografia [Parte 01] – Escolhendo a fonte certa.
Guia sobre Tipografia [Parte 02] – Escolhendo a fonte certa.

A diante você pode avançar em seus conhecimentos para que você utilize as funções que uma boa escolha tipográfica pode proporcionar.

Você deve entender quando uma “fonte” é para ler, ou para ver. Para ler, o importante é a função da leitura que ela pode fornecer, a facilidade de leitura. E para ver é quando se pretender ter um impacto visual e chamar a atenção.

Outra coisa importante é compreender a função de hierarquizar conteúdos e como estabelecer “fontes” para títulos, subtítulos e corpo de texto.

O contraste da tipografia e o uso não exagerado na quantidade de “fontes” diferentes também é importante.

Para saber mais leia sobre a parte 3 de nosso guia sobre Tipografia.

#7 – Transformando o que foi projetado em páginas web

html

Depois de todo o processo de criação você precisa transpor o layout no código para que o navegador (Chrome, Mozila firefox, entre outros) entenda e apresente o site par ao usuário. Caso você tenha zero experiência com publicação de sites na web você pode ficar tentado em usar o editor gráfico e exportar toda sua obra. E lá vai em “Exportar como..”

Caso você faça esse tipo de coisa, eu peço para você que interrompa esta ação e nunca mais o faça. O máximo que você vai conseguir com isso é uma página web formada por uma imagem única e impossível do usuário interagir.

Mas talvez você já passou desta fase e recorte o layout, isso possibilita construir páginas sem poluição nos códigos. É  claro que você já põe a mão na massa. Porém ainda dá para melhorar. Hoje existem recursos que substituem grande parte das imagens que você recortou deixando suas páginas mais leves.

Portanto para transformar o que você projetou no Photoshop, Firewoks entre outros, você deve se preocupar em usar somente as imagens que não são possíveis obter via codificação, pois hoje é possível inserir formas, cantos arredondados, degradês, sombras, animações, entre outros; sem necessidade de imagens, fazendo com que o site fique o mais leve possível. Também atribuir semântica aos elementos que formam o site e estilizar de forma que o ele funcione em diferentes navegadores e dispositivos.

Tudo isso você consegue executar em duas etapas. Marcação dos elementos e conteúdo, e estilização. Sempre seguindo os padrões web. Vamos a primeira etapa!

O que você precisa saber sobre marcação para transformar seu projeto em páginas web?

Você deve dominar a linguagem mais simpática de todos os tempos. Falo do HTML. E não se trata de linguagem de programação, e sim de marcação.

Caso você não saiba, HTML é um acrônimo para HyperText Mark-up Language, que em português quer dizer linguagem de marcação de hipertexto. Nós a utilizamos para publicar conteúdo (texto, imagem, vídeo, áudio e etc) na Web de forma semântica.

Para ser mais preciso o domínio do HTML 5 é que possibilita que você dê semântica aos elementos que fazem parte de suas páginas. Quero dizer com isso, por exemplo, que para um título em uma página existirá um código específico que marca e dá sentido a este título. Isso deve ocorrer com qualquer elemento desde um parágrafo, passando por uma seção, até campos de formulários.

E todo estes códigos, ou melhor dizendo, marcação é feita através de tags que informam aos navegadores como as informações devem ser apresentados.

Caso queira aprender sugiro um artigo introdutório e um e-book que preparei sobre o assunto. Veja:

18 coisas sobre HTML que eu gostaria que tivessem me dito quando comecei a criar meu primeiro site.

E-book Solidário de Fluência em HTML & CSS

Com o HTML você dará um grande passo. Entretanto seu site ainda não terá a aparência que você projetou em seu editor gráfico. Então vamos a próxima etapa.

#8 – Transformando o que foi projetado no editor em páginas web [Segunda etapa]

css

Chegou a hora onde são separados os bons dos ótimos. Você não precisa trabalhar com HTML para entender HTML. Saber HTML, mesmo sem utilizar em seu dia a dia, o fato de você dominar esta linguagem aumentará sua percepção sobre as nuances dos projetos e as próximas etapas que os envolvem, fazendo que facilite o trabalho de toda equipe e reduzindo retrabalhos.

Isso sem contar que para trabalhos freela será uma mão na roda.

E a vantagem de dominar uma linguagem, mesmo que você não use o tempo todo, também é um diferencial para construção de um site épico quando o assunto é estilização. E onde você deixa de ser um bom e se torna um ótimo.

Você tem duas opções:

Você pode se fechar no seu mundo cercado pelo maravilhoso pacote Adobe e explorar todas as possibilidades do Photoshop ou Fireworks para construir algo de difícil aplicação no desenvolvimento. Ou aprender os códigos para estilização de páginas web que possibilitarão você fazer novas amizades e conquistar a admiração de desenvolvedores e desenvolvedoras :).

E de quebra poderá pôr a mão na massa e transformar, você mesmo, o que foi projetado em seu editor em páginas web. E agora com cores!

O que você precisa saber sobre marcação para transformar seu projeto em páginas web?

Você deve dominar a linguagem mais simpática de todos os tempos, empatada com o HTML. Falo do CSS.  E não se trata de linguagem de programação, e sim de estilização, ou formatação, se preferir.

CSS, ou Cascading Style Sheets é uma linguagem de folhas de estilo criada para dar forma aos elementos, estilos aos conteúdos criados em HTML, e principalmente separar a marcação da apresentação. Com isso a manutenção de páginas é mais simples e o carregamento mais rápido do que os métodos antigos de apresentação até então atribuídos a elementos e atributos HTML.

Com ele é possível definir, para uma página HTML sem estilos, cores para textos e blocos, fundos, bordas, tamanhos e tipos de fontes, espaçamentos, posição de blocos, até fazer animações, entre outros.

HTML e CSS juntos formam uma dupla implacável para desenvolver sites épicos.

Quer conhecer melhor o CSS? Aquele e-book que sugeri no tópico anterior tem muita coisa sobre ele. Você também pode ler este artigo: CSS e suas Propriedades mais usadas.

Bônus extra: O CSS também tem papel fundamental na construção de sites responsivos, através das medias queries. Aliando o conhecimento conceitual do Ebook de Design Responsivo, com o E-book Solidário de Fluência em HTML & CSS você terá um ótimo arsenal para construir suas primeiras páginas que atenderão a diferentes dispositivos.

#9 – Tornando seu site dinâmico

programação

Você, após emprego do HTML e CSS seguindo os padrões web, possui um site bem codificado e navegável. Boa parte daquilo que você imaginou como visual e grande parte do que foi pensado na fase da elaboração da arquitetura da informação e do Wireframes está realizado.

Se o seu projeto foi concebido para possuir apenas páginas estáticas ele está próximo do fim. Porém se a ideia inicial também exigia uma interação com usuário através de formulários, processamento de informações e com possibilidade de administração via cliente, ainda tem muito chão pela frente.

E o nível de dificuldade para atender estas exigências também é maior.

O que você precisa saber para tornar seu site dinâmico?

Sites dinâmicos são aqueles capazes de receber e processar informação de seus visitantes e muitas vezes armazena-las em um banco de dados. Este mesmo processo de recebimento e armazenamento se aplica à administração e publicação de conteúdos para o site.

Para tornar um site dinâmico você precisa conhecer linguagens de programação para web e domínio em banco de dados. Com bastante fama, PHP e MySQL podem ser utilizados. Também Javascript para validações de formulários e efeitos, e outras tarefas do lado do cliente.

Resumindo, você deve saber programar. E cá para nós, pelo menos os que são Web Designers, HTML e CSS ainda é bem possível, porém programação é mais difícil dominar. É mais fácil fazer uma parceria com um programador, caso você seja freelancer. E caso você seja empregado, e por sorte sua empresa não exija que você domine tanto o Design quanto a programação, como vemos em alguns anúncios de emprego, com certeza terá alguém para executar a a função de programar.

Seu site precisa ser dinâmico? Existem duas opções que dispensam o programador.

A primeira é você acreditar no seu poder de aprendizado e investir em um curso como o  da PlayCode, do meu amigo Harlley [Clique aqui para conferir o curso]. Outra opção é transformar o site desenvolvido com HTML e CSS em um tema para CMS.

CMS, do inglês Content Management System, e que quer dizer Sistema de Gerenciamento de Conteúdo é um aplicativo usado para criar, editar, gerenciar e publicar conteúdo com facilidade.

Recursos básicos de um site dinâmico como usabilidade, temas e administração já estão pré-estruturados e prontamente disponíveis para uso em um CMS. As ferramentas de publicação de conteúdo são tão simples como utilizar um editor de texto como o Word, possibilitando que o administrador tenha total autonomia sobre o conteúdo.

O mais famoso CMS é o WordPress. É o que eu utilizo em meus projetos. Com ele é possível criar blogs, lojas virtuais e até redes sociais.

A curva de aprendizagem para publicação e administração é curta. Já para construção e personalização de temas, um dos grandes atrativos deste CMS, exige mais estudos.

Estou preparando um material sobre WordPress para aqueles que querem ter autonomia para criar seus sites dinâmicos. Fique ligado nos e-mails do Chief se você tiver interesse.

#10 – Fazendo seu site ser encontrado

seo

O seu site pode parecer épico agora que você cumpriu todas as etapas. Porém quem vai te mostrar isso é o comportamento da audiência em relação aos objetivos esperados pelo projeto. Isso deve ser mensurado. Entretanto nada disso faz sentido se o site não for encontrado.

Existem dois caminhos para que isso aconteça. Entretanto não é preciso você trilhar os dois, se não desejar.

O que você precisa  saber para que as páginas de seus sites sejam encontradas pelo seu público?

Existem especialistas que podem fazer este trabalho para você. Uma parte deles conseguem tráfego de forma orgânica (sem precisar pagar) e outros através de tráfego pago.

Tanto orgânico, quanto pago, é possível obter audiência segmentada através de algumas redes sociais. Não é função, propriamente dita, de um Web Designer mexer com redes sociais, porém não queremos que, pelo menos, seu site fique as moscas.

No mínimo, você pode começar integrando seus sites as redes através dos botões de compartilhamento. Também você pode usar suas habilidades para criar as capas de fanpages e páginas de outras redes. Você pode até conseguir uma renda fazendo isso para seus clientes. Mas se quiser que seu site cresça nas redes sociais pra valer terá que investir em anúncios. Talvez você não tenha tempo para criar e gerenciar anúncios e talvez nem goste. Daí terá que contratar um especialista. Caso ache que deva aprender sugiro este material.

Por outro lado existe algo que você pode contribuir para que um site seja mais facilmente encontrado. Talvez você não considere uma atribuição para um Web designer, porém alguns já trabalham com otimização de sites para que as páginas apareçam em melhores posições em buscadores como o Google. O nome disso é SEO.

É possível sim, mesmo não sendo um especialista em SEO, usar suas atribuições de Web Designer para contribuir com os aspectos técnicos de SEO em um projeto web.

É e o que eu mostro no artigo:Melhores práticas de SEO para Web Designers e Desenvolvedores.

#11 – Garantindo que seu site seja mesmo épico

super-chief

Site publicado, porém nunca finalizado.  E você se pergunta: “Como assim?”

Apesar de você usar todos seus conhecimentos, todas as informações coletadas e tecnologias para garantir que os objetivos sejam alcançados e que o usuário seja “amparado” em uma bela experiência de navegação, não podemos cair na pretensão de que tudo dará certo. Pode até não ser o padrão, mas um site construído deveria ser considerado o início de tudo e flexível para possíveis ajustes conforme surjam os percalços não previstos no período do planejamento.

Mesmo que doa, cada decisão de Design deve ser colocado a prova em prol do usuário e de suas sensações. É a única forma eficiente para garantir um site épico.

Por mais que tenhamos escutado o cliente e os usuários na fase de planejamento, nem todo plano sobrevive ao campo de batalha e modificações podem ser necessárias. Mas como descobrir quais mudanças serão necessárias para garantir que seu site seja mesmo épico? Que seja o guardião da experiência do usuário?

O que você precisa para descobrir quais mudanças são necessárias para garantir que o seu site seja épico?

A melhor forma de descobrir o que será modificado é entender o comportamento do usuário durante sua navegação.

Para isso você precisa conhecer, por exemplo, ferramentas parar testar variações de elementos da interface (Teste A/B). Esses testes indicam qual versão testada tem mais aceitação pelo usuário.

Outra ferramenta indica são os mapas de calor. Eles permitem entender como o usuário visualiza suas páginas e a partir daí podemos executar as alterações necessárias para que direcione o olhar do usuário para os pontos mais importantes do site.

Caso queira aprender mais sobre Teste A/B clique aqui.

Otimizando os objetivos do site de acordo com o comportamento do usuário teremos um indicativo sobre qual as decisões tomar que aproximarão esse mesmo usuário de uma bela experiência de navegação.

Conclusão

As etapas aqui citadas neste artigo são processos básicos na construção de um site e conforme o objetivo, um ou outro, poderá não necessariamente ser aplicado. Em alguns casos algum procedimento mais específico e não citado pode ser aplicado. Porém alerto para o fato de estar atento aos conhecimentos necessários para dominar os processos. Processos que incluem, investigação, planejamento, execução, divulgação e principalmente controle para o site seja épico.

É importante ter em mente que estamos criando sites para outras pessoas utilizarem e por isso devemos pensar nos visitantes do site proporcionando sempre a melhor experiência possível.

Sites são que nem filhos: a gente cria para o mundo e não para nós mesmos. E com certeza todo site épico deve ser projetado por um web designer pensando na performance, criatividade, originalidade e experiência do usuário

E você domina estes conhecimentos?

O que mais você acredita ser necessário para construir um site épico? Deixe seu comentário.

Até Mais!

Forte abraço

David Arty

Olá. Sou David Arty, fundador do blog Chief of Design.
Sou natural de São Paulo, Brasil. Trabalho com design, principalmente com design para web, desde 2009. Procuro transformar ideias loucas e complexas em peças simples, atrativas e funcionais.