Sim, é perfeitamente possível ensinar a si mesmo de web design. Perguntei por volta desta semana para ver como as pessoas conseguiram adquirir as habilidades e tentei me lembrar do que funcionou para mim.
existem três maneiras principais de ensinar a si mesmo web design.
- fazendo. As pessoas aprendem criando sites.
- usando recursos online. Todo mundo em algum momento encontra respostas on-line sobre como projetar sites.
- por leitura. Este me surpreendeu. A maioria dos designers diz que aprende web design, em parte, lendo livros.
então, vamos passar por cada uma dessas categorias para descobrir como ensinar a si mesmo web design.
aprendendo web design fazendo
a melhor maneira de começar a entender as páginas da web é ver como os sites existentes são montados e construí-los você mesmo.
Observe como outros sites funcionam
para começar, a maioria das páginas da web na internet é escrita, pelo menos em parte, em HTML. Para ver o HTML que cria esta página, você precisa “visualizar a origem” no navegador que você está usando. Tente ir Cmd / Ctrl-U( para Firefox), vá Cmd/Ctrl-Alt/Opt-U (para Chrome), e se você estiver usando o Internet Explorer, você realmente precisa se perguntar se o web design é a carreira certa para você.
tente examinar o HTML para ver como os diferentes elementos de uma página da web estão marcados. Você pode ser capaz de identificar certas tags imediatamente. Por exemplo, <p> é para parágrafo, <h1,2,3> são títulos, <img> é para uma imagem, etc. Você notará que a maioria dessas tags funciona em pares para denotar o início e o fim da marcação, por exemplo <p>Text here</p> mostra a abertura e o fechamento da tag de parágrafo com a barra (/) anterior à tag de fechamento. Outras tags não funcionam em pares, por exemplo, a tag de imagem auto fecha <img src = "https://robcubbon.com/images/rob.jpg" /> isso instrui o navegador a exibir uma imagem com um endereço da web específico como fonte (src).
outra coisa que você pode notar da fonte HTML é que todas as páginas HTML têm estrutura semelhante. Todos eles começam com uma declaração <!DOCTYPE> dizendo em qual versão do HTML está, seguida por uma declaração <HTML>, seguida pela <head> do documento que é um contêiner de vários elementos, incluindo links para scripts, folhas de estilo, meta Informações, etc. Após o <head> vem o <body> onde os elementos da página da web estão marcados.
exercício: Selecione todo o código – fonte desta página em um documento NotePad (PC) ou TextEdit (Mac) e salve-o em seu computador como “teste.html ” ou algo assim. Abra este arquivo em um navegador e ele deve ter exatamente a mesma aparência da versão online. Agora desligue sua conexão com a internet e veja como é a página de teste. Muito diferente, não é? Tente descobrir o porquê.
ferramentas do comércio
enquanto você estiver fazendo isso, haverá certas ferramentas que você precisará.
- vários navegadores e telefones inteligentes. Tente testar seus próprios sites em diferentes navegadores e telefones (é aqui que você iniciará um caso de ódio de longa data com o Internet Explorer).
- editor de texto. Você pode usar o bloco de notas básico (PC) ou TextEdit (Mac), ou talvez Coda (Mac) ou Dreamweaver – não use o Dreamweaver no modo visual, apenas trabalhe no código, você precisa entender como essas coisas funcionam sob o capô.
- validador. Valide suas páginas da web com o validador HTML e o validador CSS (use um plug-in de navegador como o Web Developer for Chrome para chamá-las rapidamente).
- Chrome Developer Tools e Firebug para Firefox. Essas ferramentas ajudam você a entender CSS e JavaScript que, se você achava que HTML era difícil, exigem algum entendimento.
- gráficos e Editores de imagem. Central para web design são Editores de imagem como Photoshop ou fogos de artifício. Estes são muito caros, mas há GIMP mais uma série de editores de imagem on-line, se você está apenas começando.
criando seus próprios sites HTML estáticos
enquanto sua compreensão de HTML, CSS e JavaScript cresce, você deve criar sites HTML estáticos, localmente ou em um servidor web. Jogue continuamente com o código para tentar fazer coisas legais. Tente recriar certos elementos em outros sites copiando bits do Código.
embora os sites que você eventualmente cria não sejam provavelmente feitos de arquivos HTML, é vital que você entenda como criar sites HTML estáticos antes de começar a usar PHP e/ou sistemas de gerenciamento de conteúdo (CMSs) para criar HTML.
Criando seus próprios sites com CMSs
a Maioria dos sites são criados por CMSs – software que pode criar páginas HTML dentro de modelos especificada. Os melhores São WordPress, Joomla e Drupal, mas há uma série de CMSs mais leves e de código aberto com os quais você pode experimentar, que ensinarão como o PHP e outros CMSs, ASP, são usados para reunir sites.
Use MAMP (Mac) ou WAMP (Windows) em seu computador para executar esses sistemas localmente para que você possa ter uma boa compreensão de como eles funcionam.
usando editores de imagem
você precisará saber como usar o Photoshop ou algo semelhante. Você precisará disso para criar gráficos para o site, bem como fornecer visuais completos de como o site ficará quando terminar para ajudar no processo de design.
get designing
claro, não mencionei que os sites resultantes não só terão que validar, trabalhar, ser encontrados pelos mecanismos de pesquisa, servir um propósito e ser comercializados, mas também … eles têm que ter uma boa aparência.
para melhorar seu olho artístico, produza regularmente trabalho e tente melhorá-lo. Esboce desenhos no papel e trabalhe neles no Photoshop ou em qualquer programa gráfico que você tenha. A prática o ajudará a se tornar um designer melhor. Vou recomendar mais recursos mais tarde que irão ajudá-lo com os princípios de design.
recursos On-line
Quando as pessoas querem respostas, elas vão para a internet e “Google” ou pesquisar no YouTube. Web design não é diferente. Existem muitos recursos que o ajudarão online. Em primeiro lugar, existem escolas W3 às quais os web designers se referem como o melhor recurso de auto-ensino on-line, há também o Tizag. Algumas pessoas recomendam Lynda.com embora eu não tenha usado pessoalmente.
Blogs
existem vários ótimos blogs de design por aí. Existem grandes que podem ajudá-lo como SmashingMagazine, WebDesignerDepot, 1stWebDesigner e a rede Envato.
pessoalmente, recebo mais dos designers independentes da web e gráficos que blogam. Há, no entanto, cargas que aprendi ao longo dos anos, então aqui estão apenas alguns e peço desculpas a todos os excelentes blogueiros que deixei de fora da lista.
- Chris Colyer CSS Tricks é um grande olhar sensível site, mas também tem grande web design informações e truques
- Veerle Pieters tem grande do Photoshop e do Illustrator tutoriais sobre Veerle do blog
- David Airey é alguém que eu segui por um tempo em seu próprio blog homônimo, LogoDesignLove e IdentityDesigned. David está interessado na identidade abrangente das organizações, entre outras coisas.
- Chris Spooner me ensinou muito com tutoriais em seu blog Na SpoonGraphics e mais informações e inspiração na Line25
- o site maravilhosamente projetado de Fabio Sasso Abduzeedo oferece grande inspiração e estranheza.
- Nick La’S N. Design Studio e WebDesignerWall têm algumas informações fantásticas e grande inspiração.
sinta-se à vontade para adicionar seus blogs de design favoritos nos comentários abaixo.
fóruns
quando você está batendo a cabeça contra uma parede de tijolos fóruns são ótimos lugares para obter respostas. Publique uma descrição do seu problema e do endereço da web e, muitas vezes, alguém entrará em contato com você com uma solução. Aqui estão alguns dos meus fóruns favoritos.
eu gosto Estetica Design Forum, DesignForums.co.uk, e Designer, S falar. Lá, S ponto Digital e Sitepoint para consultas mais amplas, O Fórum WordPress é excelente e há, é o Fórum Guerreiro para marketing na internet.
livros
muitos web designers afirmam que bons livros físicos antiquados ajudaram a ensinar-lhes web design. Aqui estão alguns dos meus favoritos e alguns outros que foram recomendados para mim. Os links são Amazon.com links afiliados.
- Construa seu próprio site da maneira certa usando HTML & CSS 3ª (terceira) edição de Ian Lloyd é um livro Sitepoint que li anos atrás. Isso realmente me ajudou na época, pois se concentra nas melhores práticas de web design. Certifique-se de comprar uma edição atualizada (no momento a terceira edição que inclui muito no HTML5).
- CSS: o manual ausente de David Sawyer McFarland inclui explicações, exemplos e tutoriais passo a passo. Este livro é especialmente recomendado, pois fornece o plano de fundo para CSS e inclui muito sobre CSS3.
- os princípios do belo Web Design, 2ª Edição de Jason Beaird, mantém que o design é uma habilidade que pode ser aprendida e ensina os princípios fundamentais do design.
- Color Design Workbook: um guia do mundo Real para usar a cor no Design Gráfico por AdamsMorioka (editor) fornece as informações vitais necessárias para aplicar a cor de forma criativa e eficaz para projetar o trabalho.
- não me faça pensar: Uma abordagem de bom senso para usabilidade na Web, 2ª Edição de Steve Krug um clássico instantâneo sobre usabilidade na web, carregado de insights e conselhos práticos.
- Getting Real: a maneira mais inteligente, mais rápida e mais fácil de construir um aplicativo da web bem-sucedido por 37 Sinais pode ser sobre a criação de aplicativos da web, não sites, mas tem uma maneira tão maravilhosa de simplificar os processos da web que achei uma leitura tão útil.
- cavando em WordPress por Chris Coyier & Jeff Starr vem altamente recomendado como o Grande Livro WordPress. Disponível como uma versão PDF (útil para copiar código), bem como uma versão física.
existem muitos mais livros que eu poderia ter incluído especialmente sobre a teoria do design. Se você tiver alguma sugestão de livros que o ajudaram com o web design, informe-nos sobre eles nos comentários.
o que você pode fazer
muitos designers afirmam que o fracasso é realmente o melhor professor. Então vá lá e crie sites! Quando, como sem dúvida vai acontecer, você se deparar com uma parede de tijolos, você pode usar alguns dos recursos on-line aqui para ajudá-lo. E, quando você não pode mais olhar para a tela do computador, pode ler um livro sobre isso!