Como fazer um Layout Profissional para um Site (Para Iniciantes)

Fala meu amigo minha amiga como é que você tá tudo certo meu nome é Gustavo Campelo esse daqui é o meu canal onde a gente fala sobre desenvolvimento web no vídeo de hoje vamos falar sobre como criar um layout bonitão pro seu site para que você possa criar da melhor forma e o layout fique com a impressão de um site profissional não fique igual a maioria das pessoas criam beleza porque você já fechou um projeto você ficou felizão só que na hora que você foi criar aquele layout você foi desenvolver aquele layout você não tinha

ideia de como começar do que fazer e acaba que fica algo ruim então a gente precisa seguir algumas etapas então aqui eu vou falar sobre princípios para que no final desse vídeo você consiga sozinho criar um bom layout profissional bonitão Demorou bora pra tela do computador então Quero mostrar algumas coisas aqui para vocês olha só não sei se você cria apenas o design do seus sites ou se você também desenvolve então isso daqui serve para quem tá criando e um site tanto no Design no figma ou em outra plataforma de prototipação né de ação de

design ou então você já tá desenvolvendo direto pelo WordPress framer webflow qualquer outra ferramenta ou então você é desenvolvedor você desenvolve no código puro só que você não gosta dos layouts que você desenvolve principalmente para quem cria as coisas no código puro tá precisa criar um design antes no figma confia em mim eu crio design e também sou desenvolvedor então eu tenho conhecimento sobre experiência de usuário sobre design visual e também desenvolvimento tanto em plataformas no code como WordPress né que são sem código como também no código puro principalmente para quem faz as coisas no

código puro Aquilo não é muito visual né você cria a estrutura sem ver o que tá sendo criado mesmo se você tá com a página ali com tudo sendo pronto mas é muito mais difícil fica muito mais fácil quando você cria as coisas antes o design antes então vamos lá eh deixa eu entrar aqui ó Nessa abinha aqui de projetos vamos supor que você acabou de fechar um cliente e aí você vai começar a criar o design desse layout beleza seja aqui no figma ou em outra plataforma como falamos antes qual é a primeira coisa

que você precisa pensar antes de já sair enchendo um monte de coisa aqui nesse layout já sair colocando texto imagem botão O que que você precisa pensar Qual é o intuo desse site que eu tô criando qual é a função desse site pode ser um site institucional que é um site que tem várias páginas né Tem uma página que é a página inicial tem a página de sobre nós por exemplo ó eu separei alguns sites aqui que eu já criei também um exemplo de site institucional é esse daqui ó a gente tem a página de

sobre nós tá vendo a gente tem a página de contato de categorias Olha só isso daqui seria um site institucional tem várias páginas a gente tem também Landing pages né que é uma página única Por exemplo essa daqui ó uma página única que aqui vai ter todas as informações necessárias então primeiro de tudo é você saber bem a estrutura que você vai criar mas o que que eu tô falando em qual é o sentido do site Qual é o objetivo principal do site por exemplo dessa página aqui a tecnobr Eu sabia que o objetivo principal

dele é fazer com que os usuários que estão acessando esse site gerem uma proposta ou seja façam um orçamento Esse é o principal tá que eles solicitem uma proposta através do formulário o site pode ter outras funções pode por exemplo tem aqui a chamada no WhatsApp só que qual é a função principal do site chamar pro formulário para que pelo formulário pessoa V um lead né ela preenche o formulário e tudo mais eles tenham esses dados Esse é o principal por exemplo Qual é o objetivo principal desse site aqui que a gente criou também que

o formulário que o formulário que o cliente o usuário ele se inscreva para essas aulas gratuitas aqui no caso que vai ter esse é o principal objetivo tem também mostra resultado mostra depoimento tem outros botões pelo site mas o principal é qual que preenche o formulário vamos ver aqui ó essa Clínica Qual é o principal objetivo esse aqui no caso é uma ling page tá tem as zinhas aqui em cima mas são sessões desse site que já já eu vou explicar para vocês certinho o que que é uma sessão calma Qual o objetivo principal desse

site aqui dessa Clínica Odontológica eles queriam chamar os clientes para o Whatsapp então o principal você pode ver ó o que tá mais chamando atenção que tá aqui fixo na tela é esse botão contato WhatsApp ele chama mais atenção do que qualquer outro tem também a página do Instagram dessa empresa tem mas é algo secundário não chama tanta atenção como o entrar em contato no WhatsApp então o que o usuário pensa quando ele entra aqui a primeira coisa que ele vê é contato WhatsApp pode ser que ele ainda não clique porque ele ainda não conhece

então ele precisa ver mais informações ele precisa passar aqui na página às vezes ele vai precisar entrar nesse Instagram para ver quantos seguidores tem para ver o que que as pessoas comentam nos posts para que ele Gere mais autoridade com aquela empresa mas o principal é contato WhatsApp beleza Vocês já tendo entendido bem qual é a função principal do site vocês vão criar o site em cima disso então olha só vou colocar aqui ó primeiro Qual o objetivo do site na verdade todo o site tem como objetivo converter né mas aí qual é o tipo

da conversão pode ser uma loja virtual o objetivo principal não é que as pessoas chamem no WhatsApp pode ser é que elas comprem um produto E às vezes um produto x tá então qual o objetivo do site o segundo e agora que eu já sei o objetivo já vou partir pra criação não você vai precisar conhecer o seu cliente e conhecer a empresa não só conhecer a empresa o público alvo não você precisa também conhecer o cliente por aquele cliente é o dono daquele empresa e ele tem um gosto também né Cada pessoa tem um

gosto diferente não é porque você criou um designer você acha que é lindo maravilhoso que o seu cliente ele também vai gostar pode ser que não tá tem tem pessoas que gostam de coisas ruins até né mas como a gente tá sendo pago para isso a gente precisa seguir então aqui ó você precisa conhecer o seu cliente e a empresa certo o cliente então como eu já falei você precisa entender bem o gosto dele pergunta para ele quais sites você tem de referência isso é muito importante quanto mais sites o seu cliente te der de

referência mais você vai entender como ele quer o dele com aquelas bases que o seu cliente te der você vai construir o site dele em cima daquilo sem segredo tá você não vai copiar mas você vai construir com base naquilo e você vai pegar também informações sobre a empresa a empresa por exemplo aqui como eu tava mostrando para vocês é uma clínica odontológica maioria das clínicas odontológicas elas querem um site Clean sem muito segredo tá ainda mais a Odontologia usa muito essa cor azul e branca Então para que que a gente vai inventar alguma coisa

para que que eu vou criar um site Dark como se fosse esse daqui ó Ficaria legal Pode ser que fique tá Pode ser que agrade o a maioria dos clientes que entrarem nesse site Mas se a gente já conhece um tipo que funciona a gente pode seguir esse tipo vale muito mais a pena e aí a gente adapta algumas coisas conforme a empresa se a empresa tivesse um visual mais Dark eu poderia criar sim algumas sessões mais escuras e tudo mais só que o padrão que funciona é um site Clean com a alguns detalhes azul

no caso o logotipo já tinha cores azul se tivesse um logotipo de outras cores poderia seguir as outras cores mas ainda sim o que funciona é o site Clean bem Limpo tá vendo bem objetivo mesma coisa esse site aqui tá esse site aqui eu criei para uma empresa que é contabilidade e despachante eles tinha um problema que eles tinha um site único para essas duas coisas mas aí as pessoas ficavam perdidas porque era um site paraas duas coisas então era um WhatsApp pras duas coisas e aí eu conversando com eles eu dei essa solução de

cria uma página para cada parte então por exemplo se você entrar na parte do Despachante Você vai pra página específica que vai vai levar pro WhatsApp do Despachante tá vendo é uma página específica para isso você pode ver que é uma página muito Clean porque Qual é o objetivo levar as pessoas para contato no WhatsApp então você pode ver que tem botões pela página e tudo mais então por isso você precisa conhecer a empresa e o nicho Às vezes o público alvo daquele nicho daquela empresa são pessoas mais velhas Aí sim você tem que fortalecer

ainda mais em sites objetivos e Clean se o público às vezes é um público mais novo é um público que gosta de tecnologia aquela empresa tem a ver com tecnologia como é o caso aqui da tecnobra você pode fazer algo mais personalizado algo com mais efeitos e e brilhos e Blur e tudo mais então isso é de acordo com a empresa não é de acordo com o seu gosto também como Web Designer como desenvolvedor certo então após você entender mais sobre a empresa e você conhecer o seu cliente O que que você vai pedir agora

você já vai começar a criação Não agora você vai pedir para ele as informações quais sessões ou páginas você deseja seu cliente provavelmente não sabe o que que é sessões ou páginas você pode também não saber páginas o que são páginas são essas páginas a parte aqui né tá vendo tem a página de sobre nós tem a página de contato e o que que são sessões você pode ver que na página inicial tem essa primeira sessão tá vendo que é essa azul zona que tem esse slider aqui a gente tem a segunda sessão que é

esse como funciona você pode ver que ter uma divisão o usuário entende que tá entrando em uma outra sessão ou seja ele tá entrando em um outro tópico que vai falar sobre um outro assunto aqui ó mais uma outra sessão tá vendo que mostra categorias aqui outra sessão e aqui outra sessão então cada grupamento desse é uma sessão deixa eu mostrar para vocês aqui ó nesse site aqui por exemplo a gente tem a primeira sessão tá vendo tem alguns sites que pode ser que fique meio complexo isso mas ainda assim dá pra gente saber o

que que são sessões aqui você pode esté em dúvida será que essa partezinha aqui ela faz parte dessa primeira sessão que seria esse grandão aqui ó faz parte isso você vai entender melhor porque às vezes você não vai separar essas sessões apenas com cores de plano de fundo como é aqui né Essa sessão aqui ela tem uma imagem de plano de fundo essa sessão aqui é cinza essa daqui já é um Cinza Mais Escuro por isso que tá bem separado tá bem visível Pode ser que a sessão ela seja separada por espaçamento como como é

esse caso aqui a gente tem essa sessão é que no caso também tem essa faixa branca mas se não tivesse essa faixa branca só pelo espaçamento tá vendo que a gente tem aqui ó já dá para saber que essa daqui é é uma sessão a sobre empresa é um grupamento e esse daqui é outro grupamento certo então você precisa falar pro cliente quais sessões você quer que tenha no seu site você explica para ele então vamos supor você pode dar o exemplo pro seu cliente na página na sua página pode ser que tenha sessão Inicial

que vai ter uma foto da sua empresa como é o caso aqui da Nossa Clínica essa aqui é a sessão inicial Tá vendo é a primeira dobra chamado também que a sessão que aparece logo de cara quando o usuário entra na página logo quando a página carrega já é o que aparece aqui de cara então o que que tem aqui de cara seu novo Sorriso Tem uma frase de impacto essa daqui é a sessão Inicial tem um plano de fundo que é muito importante esse plano de fundo no caso essa empresa aqui queria mostrar a

clínica queria mostrar a frente da clínica então já que é algo tão importante já vamos colocar na sessão inicial de cara tá tem um texto aqui que é só para dar um auxílio mas esse texto é a informação mais importante não aqui a primeira coisa que o usuário bate o olho quando entra é esse título gigantesco e esse botão aqui primeira coisa depois o que que ele bate o olho horário de atendimento endereço contato são informações também que eles queriam que tivessem bem visíveis então já coloca Tudo nessa primeira dobra aqui às vezes é um

senhor mais de idade ou Esses passarin às vezes um senhor mais de idade que tá entrando no site ele não sabe bem como é que mexe Mas logo quando ele entrar ele já vai ver informações fundamentais tá vendo Então você pode dar esse exemplo pro seu cliente Ah você vai querer uma sessão Inicial você vai querer uma sessão que fale sobre os serviços da sua empresa você vai querer uma sessão que mostre depoimentos tudo isso são sessões ó uma sessão que mostra fotos da empresa que mostra os profissionais da empresa tudo isso são sessões E

aí quando ele entendeu o que são essas sessões você vai precisar da copy tá então aqui ó você vai precisar da copy que que seria copy seriam os textos Eu criei esse site aqui você acha que fui eu que vim aqui e coloquei seu novo sorriso na verdade eu acho que esse título aqui fui eu que dei essa ideia de seu novo sorriso mas esse texto aqui embaixo não fui eu que é um texto maior essas informações aqui claramente eu não sabia Eles me passaram essas informações eu não sabia Eles me passaram cada serviço que

eles fazem passaram para mim o tópico ou seja o título de cada serviço por exemplo estética dental e também o texto é um texto curto resumido sobre cada serviço me passaram cada depoimento me passaram um texto falando sobre a clínica bem curtinho então com base nesses textos Ó seu cliente Primeiro vai saber quais são as sessões sabendo as sessões ele vai criar textos para essa sessão que vai ser a copy quando ele criar textos Pode ser que por exemplo aqui não conheça a clínica em vez de Dar Um textinho pequenininho como esse daqui ele vai

dar um texto gigantesco aí você aconselha ele indicado em sites é o mínimo de textos possíveis a gente pode usar bem as imagens ícones isso é muito legal porque é visual Ainda Mais atualmente que todo mundo quer algo muito rápido ninguém tem paciência para ficar lendo texto gigantesco Então não é legal você pode ver que aqui ó tem bem pouco texto bem pouco texto tem mais imagens ícones texto é algo que o cliente ó aqui já é um testinho um pouco grande mas precisava ter às vezes é necessário ter a aí beleza mas tenta usar

o mínimo de texto possível você aconselha isso para seu cliente e às vezes se o seu cliente der um texto muito grande você vai lapidar esse texto Então te deu um texto gigantesco você lapida você pega algumas das informações mais importantes ou você mesmo pede para ele pô Será que você pode diminuir um pouco esse texto porque não faz sentido colocar esse texto gigantesco 2% dos usuários vão ler a maioria vai ficar com preguiça e vai passar essa sessão né vai rolar para baixo então a cópia é muito importante você tendo essas informações aqui que

que você vai fazer agora bom agora que eu já tenho informação eh sobre o cliente sobre a empresa já tenho todas as sessões já tem a cia de Cada sessão que eu vou fazer vamos partir pra criação né não você vai criar um esboço então aqui ó o cinco você vai criar um wireframe que seria um esboço que que seria esse wireframe você vai criar realmente um esboço de como seria essa página por exemplo seu cliente falou que ele vai querer ter uma sessão Inicial nessa sessão Inicial ele quer um título principal no caso ele

vai te falar um título que pode ser o bordão da da empresa deles né algo que a empresa e os clientes já conhecem ele diz que ele vai querer ter Um textinho pequeno então pode ter um texto aqui ó eh sei lá se você não tiver exemplo de texto ó deixa eu pegar o site do Lauren Y aqui às vezes o seu cliente ainda não passou todos os textos para você então você pode entrar aqui ó nesse site Loren y e você pega um texto aqui copia só para você ter uma estrutura para você ter

algo aqui para você criar o formato do seu layout tá ó então mais ou menos temos Um textinho aqui beleza eu sei disso né sei que o cliente quer um título principal e também a principal função dessa Landing page aqui dessa página única vamos supor que é chamar pro WhatsApp então aqui pode ter um botão de entre em contato né já que seria o principal é legal que já tem esse botão Logo no início aqui tá não vou ensinar vocês a mexer no figma né aqui não não é o objetivo dessa aula aqui mas nem

eu tô tô sabendo tô penando aqui calma aí ó dá um espaç mentinho legal aqui beleza ó lá um botão Ah mas qual imagem vai ter aqui qual vai ser a cor desse botão qual vai ser o formato vai ter as bordas arredondadas bordas quadradas Ainda não sei tô só criando um esboço tô só vendo o que que o cliente quer Posso até inclusive ó criar um retângulo aqui ó inicial Tá vendo jogo ele aqui pro final só para eu saber Ó e vou duplicar esse título aqui ó só para eu saber que essa é

a sessão colocar maiúsculo sessão início tá ou sessão Inicial ou então só coloca início certo vou colocar aqui ó Black e vou diminuir bem a transparência só pra gente saber o que que é isso aqui ó essa daqui é o início beleza e agora bom agora o cliente pediu uma outra sessão que vai ser uma sessão que vai mostrar depoimentos como ele passou esses depoimentos para você ele passou esses depoimentos em texto ele passou ess depoimentos em vídeo às vezes foi em vídeo tá se foi em texto você pode pensar em por exemplo fazer dessa

forma aqui você ainda não precisa criar o layout disso né só estamos criando o esboço Então vamos supor que foi em vídeo você pode colocar os vídeos aqui ó se é um vídeo deitado se é um vídeo em pé você vai criar o seu esboço com base nisso então Ó vou colocar três videozinhos aqui tá vendo wireframe Então é isso é a gente criando esse esboço pode ser um carrossel também de vídeos Então você ó já cria um botãozinho aqui embaixo que vai passar um outro botão que volta pode ter uns Bullet zinhos aqui ó

que são bolinhas que mostram em qual vídeo você tá e quantas tem sabe dessa forma aqui se você quiser vai aí no Pinterest entra no Pinterest e pesquisa ó Website wireframe aqui é um wireframe muito bem estrutur estado também eu não recomendo que você crie tão bem estruturado assim dessa forma né Acho não vale a pena at até um plano de fundo tá vendo já tem uma certa estética dos cards do do posicionamento e espaçamento acho que você pode ir com calma só dessa forma aqui mesmo e agora depois vai ter uma sessão de sobre

nós certo vai ter uma sessão de sobre nós aqui ó Então deixa eu esse retângulo aqui vou colocar mais escuro esse aqui seria sobre o nós como que seu cliente pediu a sessão de sobre nós então às vezes a página que ele quer é bem curtinha a sessão de sobre nós ele falou para você pô eu acho que seria bacana mostrar um pouco um pouco da nossa empresa e um texto também falando de forma breve texto não pode ser muito grande sobre a nossa empresa também então o que que ele te deu ele te deu

um texto falando sobre a empresa jogar para cá um texto falando sobre a empresa ele te deu um título tá que você vai usar e pode ter um último botão paraa chamada de ação chamada de ação que seria qual entrar em contato no WhatsApp esse botão que seria a função principal da página é legal que ele esteja espalhado Às vezes você tem uma página que tem 20 sessões então se você colocar só no início quando o usuário tá lá embaixo se ele quiser entrar em contato por exemplo ele tá vendo lá e ele tá conhecendo

mais a empresa ele tá gostando do trabalho se ele quiser entrar em contato ele vai ter que voltar na primeira sessão Então você distribui esse botão pelas sessões não precisa ter em todo o canto também mas mas pode ter aqui na última também como ele falou que ele quer mostrar as imagens da empresa que que você poderia fazer agora pode jogar aqui ó algumas imagens no formato de Carrossel por exemplo vai ter uma imagem aqui aí depois ela passa pr pra próxima e passa pra próximo então pode ter algumas imagens como a gente já seguiu

esse estilo de texto na esquerda sem nada na direita a gente pode colocar o contrário Aqui ó pode ser então aqui os textos Opa na direita e as imagens aqui na esquerda só um exemplo né a gente tá construindo só um esboço por enquanto beleza e agora depois de você criar Warframe Agora sim né Vamos criar o layout na prática é isso não é isso agora depois de você criar esse Warframe esse esboço você já saber todas as sessões os textos é muito importante você criar wireframe porque quando você for criar o design real você

vai saber como você pode encaixar aquela sua ideia dependendo do tamanho do texto Às vezes você tem uma ideia genial de como que pode ficar um layout só que o texto para aquela sessão é muito grande ou falta texto Então não vai ter como você criar aquela ideia que você pensou Então por isso crie o esboço Agora sim o que que a gente vai fazer a gente vai pegar ideias Essa é a parte se não a mais importante é uma das mais importante pegar ideias não pensa Ah eu vou construir tudo do zero tudo da

minha cabeça não precisa muitos designers muitos desenvolvedores já construíram coisas que funcionam coisas que que são bonitas pra maioria dos usuários que tem um bom design visual que tem uma boa experiência o usuário se sente bem naquela página então a gente pode seguir padrões e a gente vai trazer aquelas ideias pra empresa do cliente pra pra forma pras cores eh que o cliente espera daquele site então por exemplo esse daqui é um projeto que a gente pegou vamos supor que também é para uma clínica odontológica o que que eu faria depois de criar esse Warframe

eu entraria no Pinterest pesquisaria aqui ó Website Clínica Odontológica Exatamente isso e a gente vai ver no caso aqui não não apareceu o site né apareceu mais clínicas mesmo vou colocar aqui o odonto Website Olha só o tanto de ideias que a gente pode ter através aqui do Pinterest por exemplo eu sei que eu vou ter uma sessão que são cards tá vendo nos depoimentos eu sei que eu tenho uma sessão de sobre nós eu sei que eu tenho uma sessão de início com essas bases aqui você pode pegar referência ó por exemplo aqui você

pode ver que tem tem alguns cards também tá vendo Será que eu posso adaptar esses cards para mim utilizar no site desse cliente Será que faz sentido Às vezes você pode pegar essa ideia que você adapta pro seu site olha só essa imagem inicial eu achei muito bonita tem algumas informações tem um texto pequeno tem um título um botão Será que eu posso trazer isso pro site do cliente não pegue só uma ou duas ideias nem três pegue várias Olha só esse site Ele é bem moderno ele tem um visual mais moderno Será que eu

posso trazer isso pro site do cliente o que que o cliente falou que ele gosta de site moderno que ele quer um site mais clean que ele quer um site mais objetivo com mais imagens então aqui é hora de você pegar o máximo de referências pegou uma referência ó vou vir aqui tô tô fora da da minha conta aqui ó deixa eu por exemplo você vai salvar essa imagem aqui eu vou tirar só um print da tela só como exemplo e você vai jogar aqui joga todas as ideias que você tiver em volta aqui e

agora no início acho que eu posso fazer isso isso você pode se você tiver usando figma Você pode adicionar comentários ó aqui eu acho que eu vou colocar uma imagem de plano de fundo e e eu vou colocar cards com endereço embaixo e tudo mais e blá blá blá blá isso daqui vai servir para você não esquecer as ideias que você tem Às vezes a gente tem várias boas ideias Mas se a gente não anota a gente esquece depois de você pegar todas as ideias Então até esqueci de colocar o passo seis aqui ó passo

seis pegar muitas ideias não são duas três quatro são muitas tá depois disso aí sim a gente pode ir pra Construção do nosso layout vamos lá construção do Design layout real beleza que agora vai ficar muito mais fácil como você tá vendo muitas ideias você já tem noção do que funciona do que não funciona de espaçamento de como as imag imagens podem ser inseridas de como os títulos ficam bacana porque isso é muito importante vamos supor que a gente vai agora ó criar esse design aqui de uma forma real eu teria que colocar um plano

de fundo aqui certo eu já vi uma ideia aqui ó ó desse plano de fundo que é muito bonito Às vezes o seu cliente te mandou alguns arquivos te mandou imagem da Clínica e ele mandou uma imagem que mostra toda a equipe da clínica Você pode usar ó essa ideia aqui tá vendo você desfoca a parte da esquerda como tá ali é para que fique um bom contraste isso é muito importante o contraste é o quê é ter um texto que você não tem dificuldade em ler por conta do plano de fundo se por exemplo

você tem um texto que é claro e você tem um plano de fundo Claro você vai ter dificuldade para ler isso não é bom os usuários vão não vão se sentir confortáveis Naquele site isso atrapalha a experiência duas coisas que você precisa se atentar design visual algo bonito e também experiência de usuário o usuário se sente bem o usuário tá entendendo qual é o o que ele tem que fazer Naquele site ele tá olhando na ordem certa ele primeiro olha pro título depois pro botão depois pro texto menos importante né então isso tudo é a

experiência de usuário e muito mais né abrange muito mais beleza então aí você vai criando você vai inserindo as imagens e uma coisa quando você esver criando algo muito importante é faça testes construção do Design real vou colocar o ponto 8 aqui ó faça testes porque olha só eu prometo para você que depois de você seguir todos esses Passos aqui quando você chegar no sétimo você vai criar esse layout de forma simples às vezes eu dava um prazo para uma Landing Page para uma página de S dias eu ficava um dia dois buscando ideias quando

eu tinha ideias sobre todas as sessões aí sim eu ia construir algo porque às vezes você tem uma ideia pra primeira sessão que a partir dessa ideia você pode colocar algo na segunda que o plano de fundo às vezes por exemplo aqui ó olha só depois de eu ter a ideia que eu colocaria a produtora aqui no plano de fundo porque eles queriam muito foco nela para gerar mais autoridade e tudo mais depois eu tive a ideia de fazer esse plano de fundo dela juntando com a segunda sessão essa aqui é a segunda sessão Só

que tem um card preto tá vendo que tem um fundo desfocado isso dá uma ideia de moderno então ó e você pode ver que eu já juntei com a terceira sessão tá vendo aí depois ó esse plano de fundo aqui da quarta sessão junta com a quinta mesma coisa aqui a gente tem a sexta sessão que junta com a sétima esse sim eu te entendo essa imagem é uma outra sessão isso daqui é uma outra sessão deixa eu ver se aqui fiz algo do tipo você pode ver que esse plano de fundo também é utilizado

paraa sessão Aqui de baixo tá esse plano de fundo aqui é quase o mesmo né só tem um fac aqui no final Então isso é muito importante peguem essas ideias e faça testes vou te mostrar os testes aqui ó nesse site aqui que é um site que a nossa agência a gente tá desenvolvendo eu atualmente eu não crio mais sites mas a gente tá com uma agência na verdade a gente tem uma comunidade né inclusive para você vai ser muito bom se você é iniciante nessa área do Design do desenvolvimento a gente tem uma comunidade

que é a comunidade webhub Lá a gente ensina design experiência de usuário desenvolvimento tanto sem código com WordPress e outras ferramentas como desenvolvimento com código a parte da programação programação front end backend de banco de dados ensinamos tudo isso e a gente tá com uma ideia de uma agência que todos os trabalhos que estão chegando a mim que eu vou ter que fazer de freelancer atualmente eu não pego mais trabalhos então eu tô direcionando para os membros e fico na supervisão desses trabalhos a gente pegou esse projeto aqui ó ó inicialmente Olha como tava tava

Dessa forma não tava feio nem nada só que aí a gente foi criando ideias criamos essa ideia criamos a ideia de um menu branco não achamos que ficou bacana a gente utilizou sem menu foi passando o cliente falou que ele queria dar mais ênfase nas imagens de plano de fundo como é que a gente pode fazer isso a gente fez dessa forma aqui tá vendo ó a gente fez ainda Beleza a gente gostou de como ficou essa sessão Inicial dessa forma só que o que a gente não gostou muito é como tá ficando isso daqui

então a gente ó colocou um ao lado do outro e aí qual fica melhor visualmente fica muito mais fácil da gente ver quando tá um ao lado do outro que esse da esquerda fica muito mais moderno fica um design mais diferenciado fica algo mais bacana então a gente tá seguindo esse modelo aqui depois de vários testes tá vendo e depois de todos esses testes do seu cliente aprovar o design aí sim você vai partir pro desenvolvimento né que tá sendo feito aqui deixa eu ver se eu se eu acho essa página olha só então só

para vocês verem ó a gente desenvolveu também depois do Design já ser aprovado porque às vezes você desenvolve alo que você não tem certeza Então você vai ter que refazer esse trabalho principalmente se for no código você vai ter que refazer é tudo dá muito trabalho então aqui ó ó layout desenvolvido ficou show de bola aprovado beleza menuzinho aqui ó cheio de Charme tá vendo Então se você quiser aprender mais e acho que provavelmente se você tá vendo esse vídeo você é um iniciante mesmo se não for eu tenho certeza que a comunidade ela pode

agregar muito para você profissionalmente então se você quiser acesso a comunidade você quiser se inscrever o link vai tá aqui na descrição do vídeo para você dar uma olhada em como é que funciona tem um suporte também comigo pela WhatsApp então quando você tiver lá na comunidade você não vai ficar largado a gente vai est te ajudando nesse suporte do WhatsApp um grupo também com todos os membros lá no WhatsApp também aonde eles compartilham como é que tá sendo a experiência deles a jornada conhecimentos então é um Network muito bacana então clica aí dá uma

olhada Verê se faz sentido para você tá então após a gente seguir essas etapas aqui ó Cadê essas etapas eu tenho certeza que você vai ter construído um layout show de bola algo muito importante é você entender o sentido daquele site O que que precisa ser feito para que em cima dele você pegue ideias e construa algo que funciona beleza rapaziada se esse vídeo te ajudou peço que você curta isso daí apoia muito o canal se inscreve também a gente traz vídeos aqui duas vezes por semana sobre desenvolvimento Web Design programação e comenta aqui embaixo

te ajudo como eu puder se você tiver alguma dúvida e muito obrigado até o próximo vídeo tamo junto