Como aprender web design (9 passos)

Compreender os conceitos-chave do design visual

Linha

a Cada letra, a borda e a divisão de um layout é composto de linhas que constituem o seu maior estrutura. Aprender web design significa entender as aplicações das linhas na criação de ordem e equilíbrio em um layout.

formas

as três formas básicas no design visual são quadrados, círculos e triângulos. Quadrados e retângulos funcionam para blocos de conteúdo, círculos funcionam para botões e triângulos são freqüentemente usados para ícones que acompanham uma mensagem importante ou chamada à ação. As formas também têm uma sensação de emoção, com quadrados associados à força, círculos com harmonia e conforto e triângulos com importância e ação.

Texture

Texture Replica algo no mundo real. Através da textura, temos uma idéia de se algo é áspero ou suave. Texturas podem ser vistas em todo o web design. De fundos paperlike aos fios coloridos de um borrão gaussiano, esteja ciente dos diferentes tipos de texturas que podem tornar seus projetos mais interessantes e podem dar-lhes uma sensação de fisicalidade.

cor

para criar designs que não sejam uma fadiga ocular, você deve se educar na teoria das cores. Compreender a roda de cores, cores complementares, cores contrastantes e as emoções às quais diferentes cores estão ligadas farão de você um melhor web designer.

grades

as grades têm suas raízes nos primeiros dias do design gráfico. Eles funcionam tão bem em trazer ordem para imagens, textos e outros elementos em um web design. Saiba como estruturar seus layouts da web usando grades.

Conheça o básico do HTML

Hypertext markup language (HTML) fornece as instruções de como o conteúdo, imagens, navegação e outros elementos de um site são exibidos no navegador da web de alguém. Embora você não precise ser um especialista em HTML, ainda ajuda a ter alguma familiaridade com como funciona, mesmo se você estiver usando uma plataforma de design baseada em visual como o Webflow.

tags HTML são as instruções que um navegador usa para gerar um site. Títulos, parágrafos, links e imagens são todos controlados por essas tags. Você vai querer saber especialmente como tags de cabeçalho como H1, H2 e H3 tags são usadas para hierarquia de conteúdo. Além de afetar a estrutura do layout, as tags de cabeçalho são importantes em como os rastreadores da web classificam um design e afetam como eles aparecem nos rankings de pesquisa orgânica.

Para saber mais sobre os conceitos básicos de HTML (há também uma seção sobre CSS), confira essa lição estamos juntos em Webflow Universidade.

entender CSS

CSS (ou cascading Style sheets) fornece estilo e instruções adicionais sobre como um elemento HTML vai aparecer. Fazer coisas como aplicar fontes, adicionar preenchimento, Definir alinhamento, escolher cores e até mesmo criar grades são possíveis por meio de CSS.

saber como o CSS funciona lhe dará as habilidades para criar sites de aparência única e personalizar modelos existentes. Vamos examinar alguns conceitos-chave de CSS.

classes CSS

uma classe CSS é uma lista de atributos que se juntam no estilo de um elemento individual. Algo como body text pode ter a fonte, o tamanho e a cor como parte de uma única classe CSS.

classes de combinação CSS

uma classe combo é construída em uma classe base existente. Ele herda todos os atributos como dimensionamento, cor e alinhamento que já podem estar no lugar. Os atributos podem então ser alterados. As classes combinadas economizam tempo e permitem que você configure variações de uma classe que você pode aplicar onde precisar em um web design.

saber como o CSS funciona é essencial ao aprender web design. Conforme mencionado na seção sobre HTML, recomendamos que você vá para a Webflow University para ver mais sobre como o CSS funciona.

Aprender os fundamentos de UX

UX é a magia que traz um website para a vida, transformando-a de um estática disposição dos elementos em algo que se envolve com as emoções de alguém percorrer ele.

o esquema de cores, o conteúdo, a tipografia, o layout e os visuais se juntam para atender ao seu público. O design da experiência do Usuário é sobre precisão e evocação de sentimentos. Ele oferece a alguém não apenas uma jornada tranquila, mas uma experiência que os conecta com a entidade ou marca por trás do web design.

Aqui estão alguns princípios de UX que você precisa saber.

personas do Usuário

web design significa entender os usuários finais. Você deve aprender como fazer pesquisa de usuário e como criar personas de usuário. Além disso, você precisará saber como utilizar essas informações na criação de um design otimizado para suas necessidades.

Arquitetura da Informação

sem organização clara, as pessoas ficarão confusas e saltarão. A arquitetura da informação e o mapeamento de conteúdo fornecem um modelo de como o site e cada seção trabalharão juntos para fornecer uma jornada clara do cliente.

fluxos de usuário

a construção de fluxos de usuário pode entrar em jogo quando você trabalha para projetos de design mais extensos, mas você ficará melhor no futuro se começar a pensar neles e construí-los para seus projetos iniciais. Os fluxos de usuários comunicam como as pessoas se moverão por meio de um design. Eles ajudam você a priorizar as seções mais importantes e garantir que as pessoas possam acessá-las.

Wireframes

Wireframes mostram onde em um cabeçalho de página da web, texto, visuais, formulários e outros elementos serão colocados. Mesmo se você estiver construindo um web design simples de uma página, mapear um wireframe lhe dará um guia sólido para trabalhar. À medida que você passa para sites mais complicados, os wireframes são essenciais para criar uma experiência consistente, estruturar layouts e não perder nada que precise ser incluído.

prototipagem

os protótipos podem ter diferentes níveis de fidelidade, mas atuam como uma representação de um design funcional. Imagens, interações, conteúdo e outros elementos importantes estão todos no lugar e replicam o design do mundo real. Protótipos são usados para obter feedback e ajustar um design ao longo do processo.

Familiarize-se com a interface do Usuário

uma interface de usuário é um mecanismo que coloca uma parte da tecnologia em ação. Uma maçaneta é uma interface de usuário. O controle de volume no rádio do seu carro com o qual seu outro significativo não para de mexer é uma interface de usuário. E o teclado no qual você insere seu PIN em um Caixa eletrônico é uma interface de usuário. Assim como botões e outros mecanismos no mundo real permitem que alguém interaja com máquinas, os elementos da interface do usuário em um site permitem que alguém coloque ações em movimento.

vamos revisar dois princípios-chave da interface do usuário: design intuitivo e simplicidade.

como criar interfaces intuitivas

interagir e interagir com um site deve ser consistente e seguir padrões repetíveis. As pessoas que chegam a um site devem entender imediatamente os sistemas que estão em vigor para navegar por ele.

Faça UI simples

UI existe para otimizar a usabilidade. Isso significa tornar os controles fáceis de usar, bem como óbvios em sua funcionalidade. Esteja você minimizando o número de opções de navegação, tornando o processo de checkout rápido ou integrando outros elementos interativos que aumentam a acessibilidade, entender a interface do Usuário ajudará você a otimizar a experiência de alguém ao interagir com um site.

claro, UI é um assunto vasto que não pode ser capturado em apenas alguns parágrafos. Sugerimos que você confira a postagem do blog “10 essential UI (user interface) design tips” como um primer para UI.

Relacionados lê: UX UI vs: diferenças básicas que todo designer deve saber

Compreender os princípios básicos de criação de layouts

Nossos olhos se fixam para determinados padrões de projeto automaticamente, para fazer um caminho mais fácil, através de um web design. Intuitivamente sabemos onde procurar porque vimos esses mesmos padrões repetidamente à medida que consumimos mídia ao longo de nossas vidas. Conhecer padrões de design ajudará você a criar sites que tenham um fluxo suave para o conteúdo e os visuais. Dois padrões comuns de layout da web que você precisa conhecer São z-patterns e f-patterns.

z-pattern

para layouts com uma economia de palavras e imagens e quantidades generosas de espaço negativo, O Z-pattern cria uma maneira eficiente de navegar por um site. Quando você começa a prestar atenção em onde seus olhos estão passando por um design, você reconhecerá imediatamente quando um padrão Z estiver no lugar.

f-pattern

Designs pesados em texto, como para uma publicação on-line ou um blog, geralmente seguem um padrão f distinto. No lado esquerdo da tela, você verá uma lista de artigos ou postagens e, no corpo principal da página, verá linhas de informações relacionadas. Esse padrão é otimizado para fornecer às pessoas todas as informações de que precisam, mesmo que estejam olhando rapidamente por ele.

leituras relacionadas: layout da página da Web: site anatomia todo designer precisa aprender

Aprender sobre tipografia

as Fontes podem transmitir diferentes tons ou emoções, bem como afetar a legibilidade. Se você está aprendendo sobre web design, saber como usar a tipografia é essencial.

a tipografia serve a vários propósitos em web design. Primeiro, serve ao propósito utilitário de tornar o conteúdo legível. Mas também pode servir como decoração, e o uso de bom gosto da tipografia estilizada pode adicionar à estética geral.

Aqui estão três conceitos tipográficos básicos que você deve conhecer.

Serif

os tipos de letra Serif têm linhas minúsculas conhecidas como Serifas que enfeitam cada letra. Este estilo tipográfico pode ser rastreado até a impressão.

Sans serif

como o nome indica, as fontes sans serif não possuem as linhas de identificação das fontes serif. Estes typesfaces são encontrados através do reino digital de sites e aplicativos.

Display

as fontes de exibição são frequentemente usadas para manchetes e podem ser grandes e impactantes ou feitas de linhas finas e afiadas. Eles geralmente têm formas de letras sofisticadas e destinam-se a chamar a atenção de alguém.

Relacionados lê: projeto Tipográfico: estilos de tipo de letra e recursos para os designers

Coloque seu conhecimento em prática e construir algo

Você pode assistir a tutoriais, leia os posts do blog, inscrever-se nos cursos on-line, e absorver toda a teoria e a informação que você pode sobre web design, mas a única maneira de se tornar um web designer é começar de web design.

comece com um projeto simples. Talvez alguém que você conhece precise de Ajuda para criar um portfólio ou tenha uma agitação lateral que não tenha qualquer tipo de presença na web. Ofereça-se para projetá-los algo de graça.

um blog também é outro grande projeto iniciante. Isso lhe dará experiência prática de design em aprender a usar coisas como um CMS, além de fornecer uma vitrine para suas habilidades de escrita.

construir um site para uma empresa ou empresa falsa é outro exercício criativo divertido no desenvolvimento de suas costeletas de design. Além disso, você pode adicioná-lo ao seu portfólio.

obtenha um mentor

os mentores são valiosos porque estiveram onde você está – no início — e desejam ajudá-lo nas lições suadas que aprenderam. Eles têm um profundo conhecimento e conhecimento. Eles são um ótimo recurso para obter feedback sobre o seu trabalho e encontrar o que você está fazendo certo e o que precisa ser melhorado.

na busca do mentor apropriado, certifique-se de encontrar alguém que faça o tipo de design que você admira e se especialize no que deseja aprender. Mentores podem dar – lhe um caminho claro de anos passados no campo para que você não tem que tropeçar através de aprendizagem web design.

Nenhum código fornece uma entrada fácil no web design

houve um tempo, não muito tempo atrás, quando você tinha que ter um profundo conhecimento de HTML e CSS para escrever manualmente o código por trás de um web design. Hoje, sem ferramentas de código como o Webflow, é possível montar um site e lançá-lo em um curto espaço de tempo. O que levou dias ou semanas agora pode acontecer em horas.

claro, muita coisa vai para a criação de um bom web design. Aprender os fundamentos por trás do design visual, os conceitos básicos de UI e UX e saber como a função front-end e back-end fará de você um designer mais completo.Se você está apenas começando ou é um especialista, o Webflow oferece uma plataforma intuitiva baseada em visual para capacitá-lo a realizar sua criatividade. Junto com uma maneira fácil de usar de lançar sites, o Webflow tem uma comunidade inteira para lhe dar conselhos e ajudá-lo a aprimorar suas habilidades. Estamos ansiosos para vê-lo trabalhar em nossa vitrine.