Última atualização em 09/07/2023
Se você está tentando construir sites freelance para clientes, ou apenas tentando construir seu portfólio, você pode ter se deparado com este enigma:
Como você constrói um site se você não tem nenhuma habilidade de web design?
Aqui estão algumas opções:
- Você pode contratar um web designer para criar o design para você – mas (bons) designers não são baratos.
- Você pode encontrar um designer barato no Fiverr ou Upwork – mas sabe que pode ser arriscado.
- Ou você pode baixar um tema ou modelo gratuito ou premium – mas às vezes eles não fazem tudo o que você deseja.
Uma outra opção para você é aprender algumas habilidades básicas de layout de site e criar seu próprio front-end.
Agora, você não vai se tornar um designer incrível no tempo que leva para ler este artigo. E para sites complexos, você pode acabar precisando trabalhar com um designer profissional.
Mas acredito que você pode aprender a planejar e projetar sites simples que funcionariam para a maioria das pequenas empresas.
Este método envolve:
- Aprender o básico de como os sites são criados visualmente,
- E pesquisando designs da web existentes para obter inspiração e ideias para você.
Na verdade, é a estratégia que usei para construir o site Coder Coder! Concedido, é um design bastante simples, nada muito extravagante. Mas às vezes simples é tudo que você precisa.
Depois de conhecer os conceitos básicos de layout e design para a Web, você poderá criar sites personalizados que podem ser usados para seu portfólio e clientes freelance.
E, claro, cada site que você construir lhe dará experiência. Com o tempo, você poderá criar designs cada vez mais complexos à medida que continua praticando seu ofício.
Aqui estão as principais etapas desse processo:
- Decida o básico do seu site
- Planeje o layout do seu site
- Junte o desenho
- Construir o produto final
Cada etapa será alimentada por pesquisas – olhando outros sites para ver o que eles fazem e retirando as partes que você deseja reutilizar em seu site.
Uma observação importante: não estou defendendo que você roube CSS ou imagens que não são suas. (Por um lado, você não aprenderá nada com um trabalho de copiar e colar.) A ideia aqui é obter idéias e conceitos criativos e usá-los para criar algo semelhante.
1. Decida o básico do seu site
Antes de começar a escolher cores ou fontes, vamos responder a algumas perguntas gerais sobre este site:
1. Que tipo de negócio o site irá promover?
Uma pizzaria, estúdio de fotógrafo ou livraria? Qualquer tipo de negócio pode se beneficiar de um site, então você pode escolher qualquer coisa.
Para nossos propósitos aqui, escolheremos uma cafeteria fictícia chamada Central Coffee. Porque todo mundo gosta de café, certo?
2. Quais páginas o site terá?
Algumas páginas comuns seriam a página inicial, a página sobre, a página de contato e as páginas específicas do setor em que a empresa está inserida.
A melhor maneira de descobrir as páginas e outros aspectos estruturais gerais do site é fazer uma pesquisa online rápida.
Leia também: Prospect: o que é, como ganhar sua confiança
2. Pesquise sites existentes
Confira outros sites existentes para tipos semelhantes de negócios. Olhe para 3-4 desses sites e veja quais páginas eles têm.
Tente observar como o site é projetado e anote:
- Quais páginas o site tem,
- Qual é o estilo geral,
- Como é fácil navegar e encontrar coisas,
- E qualquer outra coisa que desperte seu interesse.
Um bom lugar para encontrar sites de exemplo éFloresta temática. Tem uma tonelada de modelos de sites gratuitos e premium e temas WordPress. E se você ficar com os temas mais populares, você sabe que geralmente eles serão exemplos de bons designs.
Aqui está um exemplo de cafeteria de um tema que encontrei.
The7
Páginas:
Site de uma página com as seções: Home, About, Location, Offers, Menu, News, Press, Blog Posts
Estilo:
Moderno e clean, com boas fotos
Navegação:
Fácil de navegar
E aqui estão alguns sites que encontrei em uma busca por “café em Chicago”:
O café de minhoca
Páginas:
Homepage, Blog, Localização/Contato, Oportunidades de Emprego
Estilo:
Meio moderno; as fotos da loja são mais nostálgicas
Navegação:
Não é imediatamente óbvio que se trata de um café. É um pouco difícil navegar no site.
Ruas do Café
Páginas:
Site de uma página, as seções são: Home, Caffe (Sobre), Menu, Roasting, Time Machine (sucos), Formulário de contato
Estilo:
Simples e moderno (Squarespace)
Navegação:
Muito fácil de navegar; Eu gosto da barra de menu pegajosa na parte superior que rola para baixo para cada seção.
Construir café
Páginas:
Site de uma página, as seções são: Página inicial, Sobre, Horário, Localização, Loja, Catering, Eventos, Contato
Estilo:
Simples, o design é uma combinação de fotos de largura total entre seções de fundo branco com texto.
Navegação:
Muito fácil de navegar
Café Sawada
Páginas:
Homepage, Sobre, Comida e Bebida, Imprensa, Contato e Horários, Nossos Restaurantes, Empregos
Estilo:
O design é principalmente sobre a fotografia, e o texto parece quase uma reflexão tardia
Navegação:
É um pouco difícil de navegar – quase não vi o menu de hambúrguer no canto direito.
3. Anote notas para o seu próprio site
Agora, depois de analisar vários sites de cafeterias, temos uma ideia muito melhor de quais recursos são comuns. E temos algumas ideias do que achamos que funciona e não funciona.
Com base em sua pesquisa, agora você pode começar a escrever notas para seu próprio site.
Para o Central Coffee, acho que vamos ficar com um site simples de uma página, com as seguintes seções:
- Cabeçalho
- Casa
- Sobre
- Cardápio
- Localização/Contato
- Rodapé
4. Planeje o layout do seu site
Agora que descobrimos o esqueleto do site, vamos detalhar cada página ou seção com os elementos que queremos colocar em cada uma. O layout que vamos fazer também é chamado de wireframe.
No wireframe, não estamos projetando exatamente nada, o que significa que ainda não há fontes, cores ou fotos. Estamos apenas descobrindo o tipo de conteúdo que queremos e aproximadamente onde ele estará na página. É mais como uma planta ou um diagrama neste momento.
Cabeçalho
Gosto da barra de navegação superior que está na página de demonstração do Seven Coffee e do site Caffe Streets.
No entanto, em ambas as páginas ele está centralizado, e eu prefiro tê-lo alinhado à esquerda, com o logotipo primeiro e as seções depois.
Isso é para a versão desktop. Para tablet e celular, teremos apenas o logotipo e o menu do hambúrguer no cabeçalho por padrão.
Clicar no hambúrguer abrirá um menu fora da tela que deslizará da direita para exibir a navegação da seção.
Casa
Como é um site de uma página, a “página inicial” será o que você verá inicialmente na tela quando carregar o site. E eu gosto de como Seven Coffee tem um pequeno slogan sob o nome.
Acho que aqui terei uma imagem em segundo plano (como Build Coffee) com o texto em cima. Será o mesmo no desktop e no celular.
Sobre
Todos os sites têm uma breve seção Sobre, alguns com fotos. Vou colocar um parágrafo sobre o café e também incluir algumas fotos do interior da loja para atrair os usuários que querem vir visitar.
Cardápio
Cada um dos sites lida com menus de forma diferente:
- Seven Coffee tem uma grade de itens de menu com preços,
- Caffe Streets tem apenas uma lista de itens,
- e Build and Sawada link para PDFs do menu.
Pessoalmente, odeio quando estou navegando em um site no meu telefone e tenho que baixar um PDF. Então vou me ater a um menu simplificado com uma bebida e comida, e incluir algumas fotos.
Localização/Contato
Quero colocar o local, horário e informações de contato na parte inferior do site. Meu palpite é que os usuários começarão na parte superior do site e rolarão até a parte inferior.
Colocar a chamada para ação na parte inferior responderá à pergunta: “e agora?” Isso ajudará os visitantes a agir, especificamente obtendo direções para o café e, esperançosamente, visitando!
Rodapé
O rodapé será bem mínimo. Será apenas uma pequena barra com informações de direitos autorais.
5. Construa seu wireframe completo
Aqui estão os wireframes completos do desktop e da versão móvel do site. Eu os criei usando uma ferramenta online gratuita chamada Fluxo de simulação. Eles permitem que você crie um projeto gratuitamente e têm planos pagos se você quiser mais de um projeto.
É bem fácil de usar, e eu gosto da opção de estilo esboçado porque é divertido
(Clique nas miniaturas para ver as imagens completas em uma nova guia)
Leia também: O que é o budget de uma empresa?
6. Decida as especificações básicas do projeto
Novamente, não vamos fazer estilos super detalhados e extravagantes. No entanto, precisamos descobrir alguns dos princípios básicos… coisas como:
Esquema de cores
O esquema de cores é simplesmente as cores diferentes que você está usando no site. Pense nisso como pintar e decorar sua casa. Normalmente você gostaria de ficar com tons neutros como cinzas e branco, para a maioria dos espaços. E uma ou duas cores de destaque brilhantes para os elementos importantes que você deseja destacar, como links e botões.
Se você precisa de inspiração de cores, o Canva tem algumas paletas de cores de amostra que você pode experimentar.
Para o site Central Coffee, vou usar a coleção de outono daquele link do Canva – é uma paleta de cores quentes baseada em marrons.
Estou tentando evocar aquela sensação nostálgica e aconchegante associada às cafeterias.
Fontes
Voltando aos sites, praticamente todos eles usam uma fonte sans-serif (ou seja, letras que não têm a “serif”, ou as barras finais como texto de máquina de escrever). Eu escolheria uma fonte simples para a maior parte do seu texto, e então você pode ficar um pouco mais sofisticado com uma fonte mais pesada para os títulos e manchetes.
Fontes do Google é um ótimo lugar para procurar fontes que você pode carregar em seu site gratuitamente. Só não use muitos, porque cada família de fontes, peso e estilo adicionarão carga adicional ao site.
Imagens/Fotografia
Escolha um estilo geral ou humor que se adeque ao tipo de negócio do site. Para um café, você geralmente gostaria de fotos convidativas com luz suave, sensação aconchegante ou nostálgica para fotos de interiores, pessoas conversando e relaxando no café e imagens de comida e bebida.
Para ilustrações e logotipos, existem algumas ferramentas de design gráfico online gratuitas que vêm com imagens que você pode usar em seu site. Alguns exemplos são:
7. Construa o site!
Agora temos wireframes para nos dizer como tudo está organizado. E temos nossas referências de design, para ajudar a orientar os estilos de front-end.
Como não temos um designer para criar PSDs detalhados, vamos em frente e começar a construir o site a partir dos wireframes que acabamos de desenhar.
Aqui está como eu costumo abordar a construção do front-end de um site:
- Configure os arquivos do site
- Crie e estruture as pastas e arquivos.
- Coloque o executor de tarefas em funcionamento.
- Crie um arquivo HTML separado para cada modelo.
Em seguida, siga estas etapas para cada modelo HTML:
- Crie a estrutura do esqueleto com os elementos HTML básicos.
- Construa os elementos da página um por um.
- Para cada elemento, adicione os estilos CSS, primeiro certificando-se de que cada seção esteja disposta corretamente.
- Verifique a aparência da página no navegador enquanto você trabalha, continuando a fazer as correções.
Leia também: O Que É Sidebar no WordPress?
Certifique-se de que seu site é responsivo
Enquanto você cria um site, geralmente é uma boa ideia verificar se seus estilos estão perfeitos em computadores, tablets e dispositivos móveis.
Você pode verificar facilmente os estilos da área de trabalho em seu próprio computador, com diferentes navegadores. Para dispositivos móveis, você pode usar as ferramentas de desenvolvedor do Chrome, que emulam sites em vários dispositivos móveis.
Tenha em mente que qualquer ferramenta de emulação não será 100% exatamente igual ao que o telefone ou tablet real verá. Então, ao testar seus estilos, você eventualmente vai querer verificá-lo em um telefone real quando o site estiver na internet.
Aqui estão alguns emuladores de dispositivos que você pode usar para testar a exibição do site:
- Responsinator.com(gratuitamente)
- Screenfly por Quirktools (grátis)
- Pilha do navegador (pago) — Browserstack permite testar máquinas virtuais em dispositivos reais.
O produto acabado!
Aqui está uma captura de tela do site da Central Coffee finalizado:
E foi assim que desenhei e construí um site, sem precisar contratar um designer.
Espero que você tenha achado este post útil! Deixe-me saber quaisquer pensamentos que você tem nos comentários abaixo.