Especialização em criação de sites sem código

Introdução

Esqueça tudo o que você achava necessário para criar um site. O que antes exigia códigos complexos agora está em suas mãos — intuitivo, visual e acessível a todos. Explore a liberdade criativa das ferramentas sem código e descubra como design, estratégia e narrativa se unem para moldar experiências digitais significativas do zero.

2m

Influências | Juan Mora

Aqui você encontrará os designers que influenciaram meu trabalho e explicarei por que e como eles o fizeram.

2m

Influências | Filip Felbar

Agora, gostaria de falar sobre minhas maiores influências e como elas me impactaram como criativo.

7m

Influências | Jan Losert

Quero que você analise cinco pessoas que moldaram meu estilo ou me mantiveram motivado no meu trabalho. E eu vou te dizer porque eu gosto do trabalho deles.

11m

Influências | Mónica Durán

Nesta lição, quero compartilhar com vocês alguns dos web designers especializados em Squarespace que acompanho de perto. Também mostrarei alguns livros e blogs sobre design e web design em geral que foram muito úteis no meu processo de treinamento e que continuo a consultar com frequência.

10m

Influências | Isa Macías

Para mim é super importante ter referências criativas para me inspirar no dia a dia e estar em constante aprendizado. Nesta lição, mostrarei quais estúdios e designers mais me assustam hoje.

2m

Tipos de páginas de destino

Nesta aula você vai conhecer os diferentes tipos de landing pages e vou te ensinar a identificar qual é a mais adequada para o projeto que você vai realizar.

7m

O que é uma boa página de destino?

Agora vou explicar com vários exemplos como identificar os elementos que compõem um site eficaz.

8m

O que é hierarquia no conteúdo?

Nesta lição vou te contar como priorizar o conteúdo e sua importância no storytelling de uma landing page.

5m

Contraste, equilíbrio visual e a regra dos 3 segundos

Por fim, vamos analisar o papel que o contraste e o equilíbrio desempenham na navegação de uma página de destino. Também veremos como usar a regra dos 3 segundos a nosso favor.

4m

O resumo e como investigar

O brief é o documento que nos ajuda a entender as necessidades do cliente. Nesta lição, ensinarei como investigar a partir da interpretação de um briefing.

11m

Estrutura de conteúdo para uma página de destino

Agora vou ensinar como organizar o conteúdo para contar uma história com base na pesquisa anterior.

4m

Como fazer um mood board

Nesta lição veremos como criar um moodboard como ferramenta de análise, inspiração e depuração.

6m

A tipografia certa

Por fim, falarei sobre a importância da tipografia e explicarei como selecioná-la adequadamente para que melhor se adapte ao projeto que você tem em mãos.

4m

Criação de história

Nesta lição você aprenderá a levar em consideração o comportamento das pessoas quando elas interagem com um produto, sistema ou serviço. Também como usar essas informações como base para a organização de sua história junto com a estrutura proposta no planejamento.

7m

Coloque todo o material na tela!

É hora de colocar na tela todos os elementos que você coletou durante o curso para iniciar o design da sua página de destino. Nesta aula explico como fazer.

11m

Crie os recursos necessários para sua página de destino

Por fim, vou lhe dizer como criar seus próprios assets a partir do material que você encontra na internet. Também vou recomendar onde procurá-los.

10m

Definição de projeto

Nesta lição, ensinarei como criar o guia de estilo para moldar sua página de destino. Teremos que definir elementos gráficos e tipográficos para dar consistência e unidade ao design.

10m

Polir seu design: feedback

É hora de buscar feedback sobre o que fizemos até agora. Desta forma podemos ajustar os detalhes necessários para obter o desenho final do projeto de curso.

5m

Apresentação ao cliente

Nesta aula vou mostrar como apresentar seu projeto ao seu cliente e o que você deve levar em conta para explicar as decisões que tomou para mostrar o que fez.

4m

Introdução aos sistemas de design

Nesta lição, apresentarei uma breve visão geral do que são os sistemas de design e como eles são normalmente utilizados. Também explicarei como meu processo exato funciona e por que ele foi benéfico para mim.

6m

Como os sistemas de design podem ajudá-lo a acelerar seu fluxo de trabalho

A seguir, darei alguns exemplos rápidos de como os sistemas de design podem ajudá-lo a aumentar sua eficiência, abordando como estilos e componentes globais são úteis.

8m

Introdução ao projeto e abordagem

Vamos agora repassar o projeto no qual estaremos trabalhando! Vou criar uma análise geral do que precisamos para ter um começo bem-sucedido.

6m

Configurando o arquivo Figma e iniciando as primeiras explorações 1

Primeiro, examinarei como os sistemas de design podem ser criados no Figma. Em seguida, iniciarei as primeiras explorações e coletarei alguns componentes iniciais.

18m

Configurando o arquivo Figma e iniciando as primeiras explorações 2

Com essas explorações iniciais de design, podemos brincar com todas e quaisquer ideias que vierem à mente. Vamos ver mais alguns!

16m

Expandindo o sistema de explorações e design 1

Vou continuar expandindo meus projetos e layouts, bem como o próprio sistema de design. Você verá como utilizo componentes e layouts automáticos, para ter uma noção de como isso funciona.

19m

Expandindo o sistema de explorações e design 2

Uma vez que tenhamos uma ideia mais clara de que direção preferimos levar o projeto, revisamos algumas de nossas escolhas iniciais e atualizamos nossos estilos globais ao longo dos layouts. Vamos ver como meu projeto evolui!

20m

Organizando as páginas do design system 1

Nesta lição, examinarei os componentes e estilos que criei e começarei a colocá-los em páginas dedicadas para ter uma noção inicial da estrutura.

14m

Organizando as páginas do design system 2

Vou continuar refinando meus arquivos de sistema de design. Lembre-se, ser capaz de refinar uma biblioteca de sistema de design nesses estágios iniciais pode reduzir o tempo que levará ao final do projeto, quando estivermos preparando tudo para a entrega final.

11m

Explorando variantes ao criar componentes

Nesta lição, vamos nos aprofundar um pouco mais nos componentes; você entenderá como podemos usar variantes para aumentar ainda mais nosso kit de ferramentas. Você também terá uma noção melhor de como as convenções de nomenclatura entram em ação no Figma e onde você pode explorar para ver quais recursos gostaria de destacar e ter fácil acesso.

14m

Refinando o sistema de design com uma página montada 1

Nesta lição, examinaremos um projeto mais desenvolvido. Agora, nesta fase, passei por algumas iterações em minhas explorações e cheguei a uma direção com a qual estou bastante satisfeito. A partir daqui, mergulharemos mais fundo na criação de componentes e layouts automáticos. Também veremos como a combinação dessas ferramentas pode nos ajudar a criar fluxos e layouts mais dinâmicos.

20m

Refinando o sistema de design com uma página montada 2

Vou continuar refinando o sistema de design. Ao trabalhar com sites que têm muito conteúdo repetido, índices de conteúdo ou arquivos em geral, acho extremamente útil aninhar vários layouts automáticos, componentes e instâncias uns dentro dos outros.

19m

Refinando o sistema de design com uma página montada 3

Gastar um pouco mais de tempo criando um único layout com componentes e layout automático ajudará você a ver como diferentes formatos de conteúdo podem funcionar em diferentes instâncias. Caso percebamos, após alguns ajustes, que o conteúdo com o qual estamos trabalhando realmente não está de acordo com nossa visão inicial, podemos modificar várias instâncias de diferentes partes do conteúdo ao mesmo tempo para ter uma noção melhor de como nosso conceito pode ser utilizado em um ambiente do mundo real. Vamos ver como este sistema de design e site serão estruturados.

15m

Configurando novas páginas com o sistema de design completo 1

Agora vou expandir os designs da web com algumas novas páginas: um arquivo de blog, uma página de contato e uma galeria de produtos. A próxima etapa será testar o sistema de design e ver quais elementos funcionam, o que precisa ser alterado e o que precisaria ser adicionado.

19m

Configurando novas páginas com o sistema de design completo 2

Depois de criar um arquivo de blog e uma postagem de blog, mostrarei como criar uma página de contato. Isso nos permite ver como o sistema de design que criamos pode nos ajudar a criar rapidamente esses novos elementos.

20m

Configurando novas páginas com o sistema de design completo 3

Aqui você verá como crio a página adicional final, que é a página da loja ou galeria de produtos.

20m

Como abordar a criação de documentação para o design system

Nesta lição, abordarei dois exemplos de criação de documentação para um sistema de design, usando Notion e zeroheight.

9m

Limpando e usando um layout automático

Levaremos um pouco de tempo nesses estágios finais para revisar o site e o sistema de design e garantir que tudo esteja configurado corretamente e usando nossas notas padrão.

12m

Utilizando o design em outros elementos da marca

Nosso sistema de design não precisa parar em um site. Nesta lição, mostrarei alguns exemplos de como usar o sistema de design que desenvolvi como ponto de partida na criação de elementos de marca adicionais, como postagens de mídia social e artigos de papelaria.

13m

Pensamentos finais

E isso é um embrulho! Nesta lição, abordarei alguns pensamentos adicionais sobre todo esse processo.

2m

Introdução ao No-Code

Nesta lição, discutirei como os sites são criados e você explorará o Webflow e a biblioteca de recursos da Webflow University.

10m

Recursos principais do Webflow

Vamos explorar todos os painéis e recursos que o Webflow oferece e criar um projeto em branco para iniciar a jornada criativa deste curso.

17m

Projeto

Analisaremos o design e discutiremos o que é essencial focar antes do início do projeto. Em seguida, falarei sobre onde obter imagens isentas de royalties para o seu projeto.

7m

Guia de estilo

Nesta lição, discutirei por que criar uma base no início de cada projeto e adicionar fontes ao projeto em branco.

11m

Criação do Guia de Estilo 1

Nesta lição, começamos a criar! Primeiro, vamos configurar todos os elementos iniciais, como botões e tipografia.

18m

Criação do Guia de Estilo 2

Agora continuaremos explorando alguns botões e classes de combinação.

16m

Seção de heróis

Vamos começar criando a seção superior do nosso site com um telefone e uma fileira de imagens.

18m

Navegação

Nesta lição, falarei sobre a construção do menu de navegação do site e como torná-lo responsivo. Vamos estilizar o componente chamado Navbar.

20m

Seções de Estudo de Caso 1

Agora, vamos criar cartões de imagem representando estudos de caso do estúdio e seções com estatísticas de um negócio.

16m

Seções de Estudo de Caso 2

Continuaremos adicionando elementos ao bloco de estudo de caso.

20m

Colagem Seção 1

Eu vou te ensinar como criar uma seção de colagem com fotos e depoimentos nesta lição.

11m

Colagem Seção 2

Reaproveitaremos a seção de três colunas para criar um bloco com os principais valores do negócio.

10m

Seção de Clientes e Formulário Simples de Newsletter

Esta lição analisará a criação de uma seção de clientes "com quem trabalhamos".

14m

Rodapé

Hora de construir a seção final do site – o rodapé.

20m

Janela de visualização do tablet

Vamos preparar o site para janelas de visualização menores nesta lição, começando com a visualização de tablet. Também compartilharei algumas dicas para facilitar sua vida usando regras mais rígidas para a largura do nosso contêiner e classe wrap.

20m

Janela de visualização móvel em paisagem e retrato

Vamos tornar tudo ainda mais estreito e garantir que o site fique ótimo em retrato e paisagem para dispositivos móveis.

13m

Formulários de teste

Exploraremos ainda mais os formulários e estilizaremos os estados de sucesso e erro. E então, mostrarei onde encontrar os envios de formulários e o que você pode fazer com eles.

7m

Interações

Por fim, vamos tornar o site mais divertido adicionando interações sutis para a seção de heróis. Em seguida, abordarei a diferença entre as interações "Carregar página" e "Rolar na exibição".

13m

Otimização e Hospedagem SEO

Nesta lição, veremos como configurar seu favicon de tags de SEO e, em seguida, colocar nosso site ao vivo com um plano de hospedagem Webflow.

10m

Painel de Manutenção, Editor e Ativos

Vamos falar sobre manutenção. Mostrarei como preparar o site se você quiser trabalhar com mais pessoas no futuro e manter seu projeto arrumado e organizado.

9m

Explorar CMS

Mostrarei como o CMS funciona no kit de ferramentas do Webflow em um blog simples. Em seguida, discutirei como criar coleções e usar os dados dinâmicos em páginas estáticas versus modelos de coleção.

12m

Definindo o objetivo e a estrutura do nosso site P1

Para desenhar um site funcional (além de atractivo) é importante ter muita clareza sobre o objectivo que queremos que nos ajude a alcançar, pois será a partir disso que organizaremos a estrutura do site e de cada uma das páginas.

12m

Definindo o objetivo e a estrutura do nosso site P2

Nesta lição, veremos exemplos de como esses objetivos correspondem às decisões de design dentro da web e os elementos que decidimos incluir em nosso design (quais e como).

10m

O estilo geral do nosso site

Agora que criamos a estrutura da web, vamos definir amplamente o estilo visual que desejamos. Vamos ver, de uma forma muito simples, como combinar fontes e cores, e vou dar exemplos de como você pode usá-los para criar um estilo visual para seu site. Também darei alguns recursos onde você pode procurar inspiração.

14m

Criação, organização e preparação de arquivos gráficos

Já temos todos os recursos gráficos que utilizaremos em nosso site, e um esboço geral do desenho de cada página ... agora temos que preparar todos os arquivos que utilizaremos para que sejam otimizados para uso na web, e organizados de forma que possamos encontrá-los facilmente quando estivermos projetar no Squarespace.

7m

Mudanças na interface do bloco de conteúdo do Squarespace

Nesta lição, eu explico brevemente algumas mudanças recentes no Squarespce para que você saiba as diferenças entre o que verá na interface das próximas lições e a interface que verá no seu site Squarespace ao criá-lo.

3m

Como escolher o template para o seu site

Nesta lição, faremos um tour pelos diferentes modelos que encontramos no Squarespace quando criarmos um novo site. Veremos quais são as características que eles possuem e o que você deve levar em consideração ao escolher a correta para o seu projeto.

9m

Configurações iniciais no Squarespace

Com a conta criada, faremos um tour por todo o painel de administração do Squarespace para que você se familiarize com as diferentes seções: Páginas, Design, Comércio, Marketing, Análise, Comentários, Configurações e Ajuda. [textbox type=alert]Observação importante: Depois de gravar as lições deste curso, o Squarespace lançou uma nova seção no painel de administração, chamada Perfis ou Perfis . Esta seção não é particularmente relevante para o conteúdo do curso, mas vale a pena explorá-la um pouco, pois a partir daqui você poderá visualizar e gerenciar os perfis de: - Clientes: pessoas que compraram no seu site, se você tiver uma loja online configurada (e isso é algo que não vemos no curso). - Assinantes: pessoas que se inscrevem em sua lista de discussão se você usar a opção nativa do Squarespace. Se você usar uma ferramenta de marketing por e-mail externa (como Mailchimp ou Mailerlite), não será possível gerenciá-los aqui. Você pode encontrar mais informações sobre esta nova seção do painel de administração do Squarespace neste link.[/textbox]

12m

Criação de páginas no Squarespace: suas propriedades e configurações

Nesta lição irei explicar os diferentes tipos de elementos que temos no Squarespace para criar a “arquitetura” do site: Páginas, Coleções (ou Páginas de Coleção), Pastas e Links, já que cada um tem funções e características diferentes.

18m

Os blocos de conteúdo no Squarespace

Agora que você sabe como funciona a estrutura geral de um site no Squarespace, veremos como é criada a estrutura de cada uma das páginas e, para explicar melhor, criaremos uma página à qual adicionaremos diferentes blocos de conteúdo, que são os elementos que compõem o design de qualquer página no Squarespace.

8m

As seções da página no Squarespace

Agora que sabemos quais são os blocos de conteúdo que temos no Squarespace, vamos ver como integrá-los com seções de páginas para criar o design de cada uma das páginas da web.

17m

Design e configuração das páginas Home, Serviços, Sobre Mim e Contato P1

Usando os esboços que fizemos na Unidade 2 e o conteúdo que adicionamos em nossa pasta de trabalho, criaremos as páginas Início, Sobre mim, Serviços e Contato, com todas as suas seções, textos e imagens.

17m

Desenho e configuração das páginas Home, Services, About me e Contact P1

A partir dos esboços que fizemos na Unidade 2 e do conteúdo que adicionamos em nossa apostila, vamos criar as páginas Home, Sobre mim, Serviços e Contato, com todas as suas seções, textos e imagens. Por enquanto, não se preocupe com cores ou fontes, pois vamos ajustar isso mais tarde: agora o importante é criar a estrutura das páginas.

16m

Projeto e configuração das páginas Home, Serviços, Sobre mim e Contato P2

Na página de contato, mostrarei como adicionar um formulário e o que você deve fazer para incluir o texto e a caixa necessária para cumprir o RGPD (Regulamento Geral de Proteção de Dados).

16m

Configurações da página P1 do portfólio

Nesta lição, veremos como adicionar um portfólio com projetos para a web. Vou mostrar as diferentes opções de design que você tem para a página principal de seu portfólio, como adicionar novos projetos e os diferentes ajustes que você pode fazer em projetos individuais.

12m

Configurações da página P2 do portfólio

16m

Configurações de blog P1

Agora veremos como configurar um Blog para seu site. Vou mostrar as diferentes opções de design que você tem para a página principal do Blog, como adicionar novas postagens e os diferentes ajustes gerais que você deve fazer em cada postagem antes de publicá-la.

16m

Configurações de blog P2

18m

Configurações de blog P3

11m

Criação de rodapé e ajustes de navegação principais

Nesta lição vou te ensinar como configurar o rodapé da web para incluir tudo o que definimos na Unidade 2. Você verá que é muito simples e muito flexível fazer mudanças no rodapé do seu site, agora que Você já é proficiente nas seções e blocos de conteúdo do Squarespace.

18m

Configurando as fontes e cores do site P1

Nesta lição, vou mostrar as diferentes opções que você tem para definir o estilo dos títulos, subtítulos e corpo do texto do site. Você aprenderá a alterar as fontes que o modelo traz por padrão e a fazer alguns ajustes adicionais para modificar estilos de forma diferente dos padrões.

20m

Configurando as fontes e cores do site P2

12m

Configurações de imagem e outras configurações

Com cores e fontes prontas, agora vamos cuidar de fazer ajustes de imagem e outros detalhes como animações gerais do site, espaçamentos, botões, ícone do navegador (favicon), imagem para redes sociais, estilos de página especiais, entre outros.

13m

Bônus: Estilos da Web no Squarespace 7.0

Esta lição é para pessoas que têm o Squarespace versão 7.0 apenas. Aqui veremos como fazer ajustes em fontes, cores e outros elementos da web em um site desenvolvido na versão antiga do Squarespace.

10m

Configurações de marketing

Vamos ver os elementos que temos no painel de Marketing do Squarespace e vou mostrar como configurar uma barra de publicidade para a web, bem como uma janela pop-up que você pode usar para divulgar alguma informação ou atrair assinantes.

13m

Configurações gerais de privacidade

Nesta lição, ensinarei como criar as páginas jurídicas do site e vinculá-las no rodapé. Também mostrarei como configurar a barra de anúncios de cookies e as configurações que você deve fazer, e darei uma opção alternativa no caso de você precisar de uma barra de cookies mais avançada, se for carregar cookies adicionais em seu site.

8m

Vamos tornar o site P1 público

Por fim, veremos os passos necessários para tornar seu site público: os diferentes planos de pagamento que o Squarespace possui, suas características e qual eu recomendo para um site como o que faremos no curso.

16m

Vamos tornar o site P2 público

6m

Rastreamento de análise de site

Por fim, exploraremos o painel Analytics do site: vou fazer um tour por suas seções e dar-lhe minhas recomendações para tirar o melhor proveito disso.

10m

Referências visuais: onde buscar inspiração

Nesta lição, quero dizer o quanto é importante para mim buscar referências visuais que me inspirem ao desenvolver um projeto de web design. Também direi onde encontro e guardo essas referências para sempre tê-las em mente durante todo o processo de design do site.

6m

Mapa do site e guia de estilo

Agora vou ensiná-lo a traçar a rota que o usuário fará quando chegar ao seu site, o que lhe dará uma ideia mais clara sobre quais páginas você deve criar e como elas estão vinculadas umas às outras. Também veremos como criar um pequeno guia de estilo para reunir os elementos e estilos gerais que queremos para a web.

6m

Preparação da proposta de design 1

Depois de criar todo o conceito visual da web, vamos preparar a proposta de design, que é uma das partes mais emocionantes do processo! Começarei projetando o cabeçalho, o rodapé e minha página inicial.

16m

Preparação da proposta de design 2

Continuo a desenhar no Figma o resto das seções que defini no mapa do site. Durante este processo, lembre-se de manter suas referências em mente!

10m

Primeiros passos no WordPress

Nesta lição vou ensinar como instalar o WordPress e qual é o seu funcionamento básico. Assim você poderá se familiarizar com todo o potencial deste software.

10m

Instalar Elementor

Agora vamos instalar o Elementor, que é a ferramenta com a qual vamos construir todo o web design sem a necessidade de escrever uma única linha de código.

9m

Conhecendo o Elementor 1

Vamos transferir para Elementor todos os elementos e estilos gerais que definimos no guia de estilo. Como já temos tudo pensado e definido em nosso guia, o processo será muito fácil!

8m

Conhecendo o Elementor 2

Agora vou fazer um breve resumo das configurações que mostrei no vídeo anterior. Depois, continuaremos configurando e personalizando outras opções, como o conjunto de fontes.

17m

Cabeçalho e rodapé 1

Nesta lição, explicarei o que é o criador de temas Elementor e por que sou tão fã dele. Além disso, ensinarei como usá-lo para criar o cabeçalho do seu site.

19m

Cabeçalho e rodapé 2

Agora vou mostrar como construo o rodapé do meu site com Elementor. Você vê o quão rápido é trabalhar com este programa?

10m

Pagina inicial

É hora de projetar a primeira seção da web. A página inicial é provavelmente a primeira página que eles verão em seu site, então é onde eu sempre gosto de ser mais criativo e visual.

10m

Modelo para projetos 1

Nesta lição, vamos trabalhar com as opções de modelo do Elementor para criar o layout de página do projeto individual. E, aliás, também incluirei todos os projetos em meu portfólio.

19m

Modelo para projetos 2

Agora vou mostrar como trabalho com a versão responsiva do meu modelo de projeto.

10m

Arquivo do projeto

A próxima coisa que vou ensinar a desenhar é a página principal do portfólio, onde serão arquivados todos os projetos que enviarmos para a web.

6m

"Sobre" e "Contato"

Finalmente, vamos trabalhar em duas seções essenciais em qualquer site: a página "Sobre" e a página "Contato".

15m

Páginas secundárias: privacidade, 404 e manutenção

Nesta lição vou falar sobre algumas seções secundárias do seu site, que não são visíveis a priori, mas ainda estão lá. E também vou te ensinar como colocar seu site em modo de manutenção.

13m

Teste e lance o site

Antes de lançar a web para o mundo, vamos testá-la para verificar se tudo funciona e está como queremos. Eu te ensino como fazer!

8m

Atualização do site

Nesta última lição, quero mostrar a você como é importante fazer backups antes de atualizar seu site.

3m