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

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.

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.

Influências | Isa Macías

Módulo 2

Pronto para descobrir como a narrativa pode moldar o design? Juan Mora, com experiência no Google, Amazon e YouTube, mostra como técnicas de storytelling podem transformar uma simples landing page em uma experiência memorável. Mãos à obra com o Figma e comece a criar layouts que não apenas sejam bonitos, mas que realmente conectem com os usuários.

14 aulas (1h 46m)

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.

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.

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.

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.

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.

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.

Como fazer um mood board

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

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.

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.

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.

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.

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.

Definição de projeto

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.

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.

Módulo 3

Sente que seu fluxo de trabalho criativo vira uma bagunça rápido demais? Esta é a sua chance de trazer clareza e consistência aos seus projetos. Descubra como os sistemas de design podem agilizar seu processo e elevar o nível dos seus sites. Com o Figma como ferramenta principal, você vai explorar estruturas inteligentes que economizam tempo — e fazem seu trabalho brilhar.

20 aulas (4h 51m)

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.

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.

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.

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.

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!

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.

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!

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

Pensamentos finais

Módulo 4

Esqueça as linhas de código — o Webflow permite criar sites elegantes e funcionais apenas com design visual. Com a orientação de Jan Losert, você vai sair de uma página em branco e chegar a um site de marketing completo, aprendendo a criar experiências digitais marcantes para qualquer marca com ferramentas intuitivas e sem código.

21 aulas (5h 0m)

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.

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.

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.

Projeto

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.

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.

Criação do Guia de Estilo 2

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

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

Seção de heróis

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.

Navegação

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.

Seções de Estudo de Caso 2

Continuaremos adicionando elementos ao bloco de estudo de caso.

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

Colagem Seção 1

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

Colagem Seção 2

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

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

Rodapé

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.

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.

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.

Formulários de teste

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

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.

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.

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.

Definindo o objetivo e a estrutura do nosso site P1

Módulo 5

Cor, estrutura e estratégia se combinam enquanto Mónica Durán te guia pela liberdade criativa de construir seu próprio site com o Squarespace. Com sua orientação, você vai explorar como criar um espaço digital que seja pessoal e profissional — sem precisar codar. Liberte ferramentas e técnicas para projetar um portfólio que fale pelo seu trabalho e atraia o público certo.

28 aulas (6h 13m)

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.

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

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.

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.

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.

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.

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]

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.

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.

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.

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.

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.

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

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.

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

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.

Configurações de blog P1

Configurações de blog P2

Configurações de blog P3

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.

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.

Configurando as fontes e cores do site P2

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.

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.

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.

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.

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.

Vamos tornar o site P2 público

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.

Referências visuais: onde buscar inspiração

Módulo 6

Leve suas ideias para o mundo online com personalidade e propósito enquanto Isa Macías te guia por sua abordagem criativa ao design web. Começando no Figma e seguindo para o WordPress com Elementor, você aprenderá a criar sites dinâmicos e sem código que reflitam seu estilo, mas que também sejam práticos e fáceis de gerenciar.

18 aulas (3h 23m)

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.

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.

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.

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!

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.

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.

Instalar Elementor

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!

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.

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.

Cabeçalho e rodapé 1

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

Cabeçalho e rodapé 2

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

Pagina inicial

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.

Modelo para projetos 1

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

Modelo para projetos 2

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.

Arquivo do projeto

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