Descrição: a criação de um site não é um processo fácil. Todos provavelmente sabem que um web designer e um programador estão envolvidos em sua criação, mas muitos não sabem sobre um designer de layout. Mas é o trabalho do designer de layout que coloca todos os elementos de design em seus lugares. Quer aprender isso? Em seguida, leia o artigo sobre como se tornar um designer de layout do zero.
Forma de pagamento: em média $ 10 por hora ou $ 50-100 por projeto.
Requisitos: perseverança, atenção, saber html, css, JavaScript, Photoshop

Muitas pessoas nem sabem sobre essa profissão, então primeiro vale a pena entender o que um designer de layout faz e qual é o seu trabalho.

Designer de layout cria um wireframe usando um layout de um designer. Ele é responsável por adaptar o recurso para navegadores diferentes, monitores e telas de smartphones / tablets para que o site tenha uma certa aparência em todos os lugares. Em outras palavras, ele recebe uma imagem estática do designer e a "anima".

O que é necessário para o trabalho? O conjunto mínimo de um designer de layout inclui:

• Notepad ++ para escrever código;
• Photoshop ou outro editor gráfico semelhante;
• Navegadores populares para ver como o trabalho é exibido em diferentes navegadores.

O que você precisa saber e quais qualidades são necessárias?

• HTML.
• JavaScript.
• Photoshop ou algum outro programa semelhante.
• Perseverança.
• Atenção plena.
• Memória visual.
• Precisão.

Como se tornar um designer de layout?

É desejável ter um ensino médio ou superior nessa área, mas muitos designers freelancers são autodidatas. Ou eles estudaram todas as informações necessárias por conta própria ou se formaram em cursos especiais na Internet. Felizmente, existem algumas dessas escolas agora.

1. Primeiro você precisa aprender HTML, CSS e JavaScript. Você não tem que memorizar todos os significados na hora, mas crie uma folha de cola compreensível e conveniente. Preste atenção especial aos seguintes pontos:

• como a página HTML é construída - as principais tags da página (cabeçalho, corpo) e o que elas podem conter.
• os principais elementos HTML são a, p, div, table, h1-h6, ol, ul, span, etc. Aprenda a soletrá-los corretamente, aprenda por que eles são necessários. Compreenda a diferença entre elementos de bloco e inline.
• Verifique as versões HTML e quais tags elas incluem.
• Aprenda a diferença entre layout tabular e de bloco, quais são suas vantagens.
• Elementos HTML5 básicos.

• Explore os tipos de seletores.
• Propriedades CSS básicas (fundo, tamanho, cor, fonte, bordas, etc.) e especiais (posição, flutuação ...).
• Confira as versões CSS, quais propriedades elas incluem.
• Quais propriedades funcionam de maneira diferente em alguns navegadores.
• Aprenda a fazer uma estrutura de blocos de uma página da web.
• Aprenda o básico do CSS3.

JavaScript:

• Por que e quando aplicado.
• Como ocultar ou mostrar um bloco específico.
• Como adicionar animação (rolagem ou controle deslizante).
• Como alterar a classe e o estilo de um elemento.
• Como obter ou alterar o valor de um elemento específico.

2. Domine o Photoshop, porque você tem que trabalhar em um editor gráfico e bastante. O designer de layout não precisa ser capaz de desenhar, porque você está trabalhando com um layout de página pronto. Basicamente, você precisará de:

• Corte o layout.
• Determine as dimensões.
• Obtenha as cores que deseja.
• Corte elementos específicos do layout.

3. Aprenda os conceitos básicos de layout - Compreender a terminologia (compatibilidade entre navegadores, validade, semântica). Leia alguns livros sobre este assunto ou assista a pelo menos cursos gratuitos - há muitos deles. É aconselhável aprender a trabalhar com WordPress e Joomla, pois muitos sites funcionam nesses CMS, e eles possuem muitos recursos em seu trabalho.

4. Pratique - não há necessidade de ir direto para a bolsa de freelance e pegar o pedido mais difícil. Faça 2-3 testes para pôr as mãos em prática e aprimorar suas habilidades práticas.

Trabalhe como designer de layout remotamente

Onde posso encontrá-lo? Na verdade, no freelancer, o principal problema é encontrar um pedido. E é muito, muito difícil para iniciantes fazerem isso, especialmente se você for autodidata e não tiver experiência real de trabalho.

1. A primeira experiência é gratuita. Essa. ofereça seus serviços para feedback positivo. É fácil encontrar clientes - encontre sites e ofereça-se para fazer um layout para uma avaliação positiva. Muitos webmasters ficarão felizes com essa oferta e, no futuro, entrarão em contato com você com outras perguntas (já pagas) ou aconselharão amigos. O principal é mostrar o seu melhor lado.
2. Você pode encontrar um emprego em que precise criar ou modificar sites constantemente. Portanto, você deve entrar em contato com estúdios de web design ou grandes projetos de internet. Você pode escrever diretamente para os estúdios da web com uma oferta de cooperação. No início, você pode trabalhar gratuitamente (período experimental + treinamento), e depois de um mês você pode receber o pagamento. Dessa forma, você pode obter experiência de trabalho real e, em seguida, assumir um trabalho remoto permanente. Mas aqui depende muito de suas habilidades, talentos e sorte.
3. Não se esqueça da opção mais comum - as trocas freelance. É aqui que os iniciantes podem obter sua primeira experiência, embora seja problemático aceitar o primeiro pedido. O site weblancer.net tem muitos pedidos de layout e a concorrência não é tão forte quanto no fl.ru

5 dicas para designers de layout novatos:

1. Pensar. Layout não é um negócio simples e fácil de aprender.
2. Esteja ciente de tudo que há de novo nessa área - leia blogs, fóruns, sites e outras fontes de informação sobre o assunto. Novas tecnologias e técnicas estão surgindo constantemente, erros comuns são revelados - você deve manter o dedo no pulso para não perder informações importantes.
3. Html + css - tente usar javascript ao mínimo para acelerar o carregamento da página.
4. Use as melhores práticas - salve suas ideias antigas para que possa voltar a elas e usá-las em um novo projeto.
5. Só faça layout se você estiver realmente interessado nele. Não é suficiente apenas aprender Html e CSS - você tem que conviver com o layout. Na verdade, em certo sentido, esta é uma arte na qual você precisa dar toda a sua força, tempo e interesse, e só então você pode desfrutar do seu trabalho e chegar ao sucesso.

Portanto, antes de fazer a pergunta "como me tornar um designer de layout do zero", pergunte-se "gosto de trabalhar como designer de layout remotamente ou é melhor tentar algo diferente?" Afinal, as opções são muitas, e esta não é uma área em que valha a pena ir só por dinheiro.

• Estilos são um conjunto de parâmetros que determinam a posição, aparência e funcionalidade dos elementos em uma página da web. A principal vantagem dos estilos é que eles fornecem muito mais opções de formatação, design e layout em comparação com o HTML que já é nativo para você. Este poderoso sistema pode ser montado em documentos separados, portanto, não se mistura com o código HTML. Esta é a base; mais, mais simples e claro - aqui: http://htmlbook.ru. Comece a se familiarizar com a seção “CSS” do “Auto-Tutorial” e o livro de referência simplificará muito a compreensão de termos desconhecidos. No futuro, você também precisará da seção "Layout de bloco".
• Para aqueles que são especialmente persistentes e curiosos sobre programação, recomendamos os sites http://www.xiper.net, http://css-live.ru. Aqui estão os tutoriais que revelam os segredos do uso de técnicas "avançadas" de HTML e CSS. Se você possui língua Inglesa - certifique-se de visitar os recursos http://css-tricks.com/, http://net.tutsplus.com/, onde você pode encontrar não apenas texto, mas também tutoriais em vídeo.

Acrobacia - JavaScript!

Usar o JavaScript dará interatividade às suas páginas da web. Conforme você estuda esse layout mais avançado, incorpore gradualmente o JavaScript em seu HTML.

• Uma base de informações suficiente para aprender este idioma é de propriedade do recurso http://javascript.ru. Inclui muitos materiais essenciais, discussões e dicas para um ensino de qualidade.
• A primeira parte do livro de David Flanagan “JavaScript Guia detalhado”Será um ótimo guia para os fundamentos do JavaScript. A segunda parte descreve o ambiente de desenvolvimento para scripts fornecidos pelos navegadores. A terceira parte é uma referência extensa ao JavaScript básico e a quarta é o lado do cliente.
• Para simplificar a implementação do JavaScript em uma página web, é utilizada a biblioteca jQuery, também escrita em JavaScript. O site oficial http://jquery.com e o livro "jQuery A Comprehensive Guide to Advanced JavaScript" (Ber Bibo, Yehuda Katz) fornecem um guia fácil de entender para tudo o que você precisa saber sobre a linguagem.
• A estrutura modular gratuita Mootools fornece assistência significativa no desenvolvimento de JavaScript.

Pequenos truques de grandes mestres

Mesmo para designers de layout experientes, estamos prontos para fornecer informações que podem melhorar significativamente o trabalho. No que diz respeito à criação de um código de layout otimizado, o site hthttp: //www.xiper.net certamente será útil. Siga as seções “Aprendizagem” e “Técnicas Prontas”, que contêm soluções e tecnologias avançadas para o uso de scripts.

Existem também muitos serviços para otimizar o layout. Recomendamos prestar atenção aos recursos dedicados a este tópico:

1. http://www.google.com/webfonts ; - fornecerá uma coleção de fontes que você pode conectar às suas páginas.
2. http://www.fontsquirrel.com/fontface/generator - Converte qualquer fonte e gera CSS para ser colado em uma folha de estilo.
3. http://stm.dp.ua/web-design/color-html.php - uma ampla gama de cores e seus códigos.
4. O CSS Sprite Service reduzirá o número de solicitações HTTP para downloads de imagens que seu site envia. O artigo http://www.xiper.net/collect/html-and-css-tricks/overclock-site/sprite.html fornecerá mais informações sobre isso.
5. A seção "Validação de documentos" no site http://htmlbook.ru irá familiarizá-lo com o conceito de validadores. O código de cada página deve estar de acordo com a especificação, que é desenvolvida pelo Consórcio W3 www.w3c.org. Alguns exemplos de validadores (código html e validação de código css) são fornecidos aqui: http://validator.w3.org/, http://jigsaw.w3.org/css-validator/.
6. http://caniuse.com - cross-browser checker - um serviço que ajudará a evitar a exibição de layout diferente em vários navegadores.

+ Bônus agradável prometido

Se a sua sede de conhecimento profissional ainda não foi totalmente satisfeita, nos apressamos em agradar - isso não é tudo. Você também pode aprender HTML e CSS usando a seguinte literatura:

• Mark Pilgrim “HTML5. Funcionando "
• Eric Meyer “CSS - Cascading Style Sheets: A Comprehensive Guide”
• Peter Lubbers, Brian Albers, Frank Salim "HTML5 para profissionais: ferramentas poderosas para o desenvolvimento de aplicativos da Web modernos"
• Stephen Schafer “HTML, XHTML e CSS. Bíblia do usuário "
• Eric Freeman, Elizabeth Freeman "Aprendendo HTML, XHTML e CSS".

P.S. Depois de tomar a decisão de aprender HTML, pare de usar editores especiais. Escreva em um caderno normal ou Notepad ++, isso o ajudará a adquirir rapidamente as habilidades necessárias. Se você é um defensor da comunicação interativa - torne-se um convidado frequente de fóruns especializados:

• http://www.cyberforum.ru/html/
• http://ru.html.net/forums/viewforum.php?f\u003d49
• http://www.html.by/
• http://forum.htmlbook.ru/

Peça conselhos a colegas mais experientes, compartilhe seu próprio conhecimento com os recém-chegados!

Esperamos que este artigo seja um guia valioso para você no aprendizado de programação. O próximo material será dedicado à linguagem do lado do servidor de programação PHP.

Você está interessado em uma pergunta como estudar o layout de sites você mesmo? Com a devida perseverança, todos podem estudar o layout dos sites.

Tópico da postagem de hoje: Por onde começar a estudar layout? Esta questão está longe de ser ociosa, e cada um escolhe seu próprio caminho. Vou contar como comecei essa fascinante jornada pelo mundo. Html e CSS. Espero que para alguns de vocês isso se torne, se não uma estrela-guia, pelo menos um guia para o objetivo.

Então, o que é layout do site? Se você ainda não está em um tanque, ouça: layout, neste caso, não significa digitar em letras iniciais um artigo novo no jornal Iskra, mas a transformação de um layout de site desenhado no Photoshop diretamente em um site funcional.

Em outras palavras, layout é codificação, gravação de dados em HTML, que qualquer navegador que se preze transformará em um site bonito e compreensível.

Para um visitante comum do site, esse código permanecerá invisível, escondido atrás da parte de trás do navegador. No entanto, isso não significa de forma alguma que possa ser de qualquer maneira. O código deve ser bonito, conveniente e correto!

Então, por onde você começa a aprender HTML? A primeira coisa que me vem à cabeça é comprar um livro. E quanto mais grosso, melhor. Talvez alguém se beneficie com isso.

Mas pessoalmente, depois de alguma experiência em lidar com tais “tijolos”, desenvolvi um claro reflexo de repulsão. Pela simples razão de que as informações são fornecidas em excesso.

Lembra da escola? O cidadão comum não precisa saber química, física, anatomia, etc. na medida em que está tentando aprender no cérebro.

Assim é aqui: em um livro grosso há muito que é supérfluo, e quando há muito, turva os olhos, evoca um bocejo e transforma o treinamento em 2 a 3 dias de tormento, seguido por jogar essa ciência bem longe na fornalha. E isso é tudo.

Portanto, eu pessoalmente escolhi um caminho diferente. Eu comprei um livreto. Nem um pouco grosso. E ainda não me canso de recomendá-lo aos meus alunos, porque a relevância do livro ainda é recente e muito procurada. autor de livro Artemy Lomov, e é chamado "HTML, CSS, scripts: a prática de criar sites"... Editora "BHV-Petersburg".

Nesse livro, tudo é moderado: há um pouco de história da web, um pouco de padrões. Mas o mais importante é que o material básico em HTML, CSS e JavaScript seja apresentado de forma bastante inteligível e simples. Para um iniciante aprender o layout de um site, ele é obrigatório!

Mas um livro não é suficiente. Meu método de estudo não é novo, mas também é muito eficaz. Você não precisa de um livro, mas de vários. O truque aqui é que cada autor escreve de maneira um pouco diferente. Quando você lê o mesmo tópico em diferentes variações, o quadro geral se torna claro muito mais rápido e é muito mais lembrado.

Meu segundo livro foi uma versão eletrônica de um tutorial sobre Dreamweaver da Macromedia, de autoria de Vladimir Dronov.

Em geral, para começar, é muito útil adquirir este programa. Dreamwiever é um editor visual que permite ver tanto o exterior quanto o interior do site. Ou seja, sua apresentação externa quanto para os visitantes, e interna - diretamente o código.

Uma grande vantagem deste programa é a capacidade de visualizar (novamente em modo dual) qualquer site que exista na rede.

Por exemplo, gostei de um site com uma colocação bonita e conveniente de blocos, salvei a página inteira com fotos e depois lancei esta página no Dream. E voila! Tudo é visível onde e o quê. Embora no início nem tudo seja tão óbvio como gostaríamos. Este livro é apenas um grande ajudante aqui.

Claro, eu não usei nenhum editores visuais, mas consigo sobreviver com um editor de texto simples como o PSPad. Mas uma experiência considerável foi adquirida. E o mais importante - versátil. É por isso que o próprio objeto é fácil e estruturado o suficiente para caber na cabeça.

A propósito, a estrutura é o fator mais importante no aprendizado de qualquer idioma. E o HTML também é uma linguagem. E falarei sobre essa estrutura na próxima vez.

Enquanto isso, compre alguns livros úteis. E leia meu blog Conselho Web. Aqui você também encontrará muitas dicas úteis para o layout de um site. Comece a aprender o layout do site com pelo menos.

UPD de 25.10.2012: Para iniciantes, recomendo este artigo - The Way of a Layout. Tudo é descrito com muito mais detalhes lá, com links e outras coisas úteis.

Do autor: Dia bom! Para os não iniciados, há algo misterioso e até, pode-se dizer, assustador no layout. Quando visitamos o site, vemos uma bela imagem, uma estrutura esguia e um menu deslizante suavemente. Mas por trás de tudo isso está o trabalho de uma boa pessoa, um elo de ligação entre um web designer e um programador web - um “cardeal cinza” que não apenas criou o código para todos os elementos do site, mas também tentou fazer com que eles fossem exibidos corretamente em todos os navegadores. Vamos falar sobre as nuances dessa profissão de internet e como se tornar um designer de layout do zero.

Não repita seus erros!

Como você sabe, o avarento paga duas vezes ou mais. No entanto, muitos sites aparentemente atraentes sofreram com a mesquinhez de seus clientes e, após um exame mais detalhado, têm códigos nojentos. Freqüentemente, os sites são fixados às pressas em programas especiais que não são totalmente dominados. Como resultado, o código acaba sendo desajeitado, desordenado, inflexível e mais parecido com um dump do que uma série delgada de tags HTML, propriedades CSS e scripts Java.

No futuro, economizar em um layout de alta qualidade pode representar um péssimo serviço: devido ao código não otimizado, os custos de promoção do site aumentam, surgem problemas de compatibilidade entre navegadores (certos elementos do site são exibidos de forma inadequada em alguns navegadores e em diferentes telas de usuário) e, então, tudo deve ser redigido novamente. Choramingar ...

Mas não vamos repetir os erros desses aspirantes a construtores de sites? Se você está pensando em como se tornar um bom designer de layout, então imediatamente entre em um estudo sério de HTML e CSS e, no futuro, poderá dominar PHP, Java e outras linguagens de programação. Além disso, existem muitos cursos de vídeo excelentes sobre layout de HTML para iniciantes na Internet.

Como um designer de layout começa?

Como você já entendeu, o designer de layout desempenha o papel mais importante ao criar um site. Ele gera código de página da web usando linguagens de marcação HTML e XHTML usando tabelas em cascata estilos CSS.

JavaScript. Início rápido

Primeiro, um designer de layout recebe um layout de site de um web designer, na maioria das vezes no formato do programa Adobe Photoshop - um modelo PSD, que é um modelo para layout. O modelo reflete totalmente o design da futura página da web, seu tamanho e layout de todos os componentes (imagens, logotipo, botões, menus, etc.).

A principal vantagem do modelo PSD é que ele suporta uma estrutura de imagem em várias camadas. Isso significa que cada elemento do design está em uma camada separada, de modo que podem ser editados independentemente um do outro. Isso simplifica muito o layout, pois leva em consideração seus recursos ao recriar um design com usando CSS e HTML.

Tendo admirado o layout, o designer de layout prossegue diretamente para o layout. Ele escreve cada elemento do site na forma de código HTML em um programa especial ou editor de texto projetado para programadores, por exemplo, Notepad ++.

Claro, para se tornar um compositor de HTML, você tem que praticar muito, aprender tags, atributos e propriedades. Neste artigo, não vou me alongar em explicar esse material, você mesmo pode descobrir que, na minha opinião, até um colegial pode dominar.

Noções básicas de layout por exemplo

Por exemplo, vamos pegar um modelo básico de logotipo de 2 colunas que usaremos como imagem de fundo. O restante das partes é definido em HTML, e os tamanhos e estilos são definidos em classes CSS.

O site em nosso exemplo consiste em "Conteúdo", "Barra lateral" e "Rodapé". A estrutura de uma página da web pode ser definida usando tags div. Cada elemento deve estar localizado em uma camada de contêiner de modelo separada. Por exemplo, as partes Conteúdo e Barra lateral estão dentro de uma camada:

JavaScript. Início rápido

Aprenda os fundamentos do JavaScript com um exemplo prático de construção de um aplicativo da web

< div class = "header" > < / div > < div class = "pages" > < div class = "content" > < h2 > Conteúdo< / h2 > < / div > < div class = "sidebar" > < h2 > Painel lateral< / h2 > < / div > < div class = "foot" > < / div > < / div > < div class = "footer" > < h2 > Porão< / h2 > < / div >

Usamos classes CSS para definir as configurações de estilo. O parâmetro background especifica a cor do background. Definimos as dimensões usando as propriedades de altura e largura. As margens das bordas superior, esquerda e direita da janela são definidas pelos valores margin-top, margin-left e margin-right.

A cor e o fundo são definidos imediatamente para o topo. O caminho para o corte da imagem do modelo PSD é especificado no campo especial da imagem de fundo.

Cabeçalho (margem esquerda: automático; margem direita: automático; margem inferior: 10px; largura: 1000px; altura: 100px; borda: 1px sólido # 000000; plano de fundo: # 009966; imagem de fundo: url (img / 1. gif);) .pages (margin-left: auto; margin-right: auto; width: 1000px;) .content (margin-right: 10px; width: 806px; height: 450px; border: 1px solid # 000000; background: # 999999; float: left;) .sidebar (width: 180px; height: 450px; border: 1px solid # 000000; background: # FF9900; float: left;) .foot (clear: both;) .footer (margin-top : 10px; margem esquerda: automático; margem direita: automático; largura: 1000px; altura: 50px; borda: 1px sólido # 000000; plano de fundo: # 333399;)

Cabeçalho ( margem - esquerda: automático; margem - direita: automático; margem - inferior: 10px; largura: 1000px; altura: 100px; borda: 1px sólido # 000000; plano de fundo: # 009966; background - imagem: url (img / 1.gif); Páginas ( margem - esquerda: automático; margem - direita: automático; largura: 1000px; Conteúdo ( margem - direita: 10px; largura: 806px; altura: 450px; borda: 1px sólido # 000000; plano de fundo: # 999999; flutuar: esquerda; Barra Lateral ( largura: 180px; altura: 450px; borda: 1px sólido # 000000; plano de fundo: # FF9900; flutuar: esquerda; Esse layout permite a separação do estilo dos elementos do código HTML, bem como a possibilidade de sobrepor camadas. Facilita a criação de vários efeitos visuais: dicas de ferramentas, menus suspensos, listas, etc. O principal elemento do layout do bloco é a tag div que mencionamos anteriormente. Ele seleciona um determinado trecho de código em ambos os lados - uma camada. Todas as tarefas de estilização são movidas para fora dos limites do código HTML em CSS, que são acessados \u200b\u200busando classes ou identificadores. Simplificamos o processo de layout Em geral, não é necessário puxar todo o fardo do conhecimento sobre o layout em sua corcunda. Na Internet, você pode baixar modelos pré-construídos ou usar estruturas CSS, por exemplo, Bootstrap. A beleza de usar esse framework é que seus criadores já cuidaram de todas as nuances do layout (suporte para diferentes resoluções de tela, compatibilidade entre navegadores, etc.). Você só precisa especificar o que, quando e como exibir na tela, o Bootstrap faz o resto sozinho. Além disso, graças à sua popularidade, será mais fácil para seu colega completar seu código. Claro, os frameworks têm suas desvantagens, então como podemos ir sem eles. Suas ferramentas são mais adequadas para prototipagem e criação de páginas da web secundárias, como páginas de administração. Design mais específico é melhor para escrever com "canetas". Vamos resumir Na Internet, existem recursos com uma estrutura complexa e muito complexa, em que o layout é a etapa mais demorada na criação de um site. O posicionamento absoluto com código JavaScript e o aninhamento complexo de camadas complicam significativamente o trabalho de um designer de layout, mas ao mesmo tempo o tornam um dos mais bem pagos em Runet. Para se tornar um designer de sites do zero, você não precisará apenas passar por alguns, mas também colocar o máximo de desejo, esforço e tempo no negócio. Também é útil assinar as atualizações do nosso blog e ler regularmente artigos úteis que irão aumentar suas qualificações e, portanto, seu valor no mercado de trabalho. Boa sorte com o seu layout, e até breve nas páginas deste blog! JavaScript. Início rápido Aprenda os fundamentos do JavaScript com um exemplo prático de construção de um aplicativo da web

Olá, meu nome é Alexander Zelenin e sou um desenvolvedor web.
Muitas vezes eu ouvi a opinião de que o layout é o destino dos novatos. Embora, na verdade, esta seja a parte mais importante de qualquer projeto (quase) da web. Isso é o que os usuários veem primeiro. No momento, o layout de alta qualidade (especialmente o design de blocos) em um grande projeto requer muitas habilidades diferentes.

Neste artigo, apresento um esquema para o desenvolvimento de um designer de layout

[grande no clique]
Claro, este não é um esquema abrangente e apenas correto. Há também uma montanha de habilidades relacionadas, tecnologias relevantes e assim por diante. A graduação é subjetiva.

Quero acrescentar imediatamente que não haverá links específicos para materiais de treinamento no artigo. Eu ficaria feliz em ver acréscimos nos comentários.

O que estamos esperando?

Em primeiro lugar, é necessário entender o que esperamos de uma pessoa em cada um dos níveis. Suas expectativas podem variar.
Júnior - conhece as tags principais, pode corrigir o conteúdo do site html finalizado, sabe como formatar corretamente o texto, inserir um elemento incorporado (vídeo do YouTube, mapa Yandex) sem problemas, funciona através do sistema de controle de versão apenas para ele (mestre, 1 contribuidor). Pode inventar algo simples do zero, e isso nem vai embora (pessoalmente dele). Em geral, não é uma unidade independente e requer orientação de cima.
Meio - unidade mais ou menos autônoma (ou completamente autônoma para pequenos e médios projetos). Pode ser um bom layout para um site de médio porte e será exibido corretamente em todos versões atuais navegadores. Entende como os mecanismos de modelagem funcionam e pode usá-los (desde que o restante do código seja fornecido). Sabe planejar e documentar seu trabalho e estimar prazos. Compreende a importância de manter o estilo do código. Entende por que existem sistemas de grade e estruturas css. Sabe tirar todas as informações necessárias dos layouts do designer. Pode interagir com uma pequena equipe, criar branches e puxar solicitações.
Senior - pode projetar um sistema de blocos para um grande projeto. Sabe como evitar repetições e gargalos ao usar seu código por outros desenvolvedores. Sabe como decompor tarefas complexas e formular tarefas corretamente. Sabe como aplicar pelo menos uma metodologia de desenvolvimento (por exemplo, BEM). Pode fazer o projeto abrir o mais rápido possível. Compreende bem vários motores de template populares. Capaz de escrever coletores e automatizar o processo associado a ele. Pode conduzir revisões de código e supervisionar outros designers de layout.
Vamos agora considerar um pouco mais especificamente o que cada um dos blocos em cada nível inclui.

Júnior

Html - conhecimento das principais tags, atributos. Compreender como escrevê-lo em princípio.
Tipografia - capacidade de formatar texto. O texto é a base de quase qualquer projeto. Insira espaços não separáveis \u200b\u200bonde necessário, negrito, itálico, abbr e assim por diante. Você pode usar um tipógrafo ou serviço semelhante, mas ser capaz de entender o resultado.
Semântica - entender que existem certas tags para certas tarefas. Ser capaz de selecionar a tag desejada.
meios de comunicação - quais tipos de mídia podem ser incorporados na página.
Iframe - incorporação de widgets de terceiros (vídeo, áudio, mapas, etc.).
Áudio vídeo - você pode adiar o estudo, porque parcialmente resolvido com iframe. Entenda quais formatos o navegador pode reproduzir, como projetar o player e assim por diante.
Imagens - quais formatos gráficos e de que forma o navegador percebe. Prós e contras de usar um formato ou outro.
Raster - jpg, png, gif. Compreenda a diferença de formatos e saiba aplicar o que e onde for necessário.
SVG - você pode adiar o estudo, porque aplicado com menos frequência do que o desejado. Compreenda os prós, contras, limitações, etc.
Fontes - você pode adiar o estudo. Na verdade, um tópico bastante complexo e, em geral, eu aconselharia iniciantes a usar fontes do sistema. Ser capaz de carregar fontes, otimizar a exibição e minimizar o atraso de renderização com fontes personalizadas.
Layout da mesa - opcional. Para quem deseja criar campanhas de e-mail de alta qualidade no futuro.
CSS 1 - fontes, cores, alinhamento, tamanhos.
CSS 2.1 - controle do comportamento do bloco, posicionamento, design completo.
Seletores - seletores simples para tag, classe, elemento aninhado. Pseudo-seletores simples como: hover.
Nomeação - como nomear as classes para que não doa terrivelmente.
Layout de bloco - dividir a imagem em blocos conscientes, incorporar os blocos em HTML, projetar com CSS.
Navegadores - você pode adiar o estudo. Quais navegadores existem, quais são suas diferenças.
Ferramentas de desenvolvimento - você pode adiar o estudo. Use as ferramentas do navegador para entender os problemas de exibição.
Editores de texto - quais editores de texto existem para desenvolvedores e por quê. SublimeText e Notepad ++ são apenas exemplos, como estou familiarizado. Ser capaz de personalizar coisas básicas neles, como recuo, quebras de linha e assim por diante
Sistemas de controle de versão - Eu pessoalmente considero a capacidade de usá-los pelo menos individualmente, para mim pessoalmente, muito importante. Para entender por que esses sistemas foram criados e o que são.
Git - compreender em termos gerais o propósito e os princípios do sistema de controle de versão mais popular.
Github / bitbucket - ser capaz de usar uma das plataformas git populares.
Check-out / commit / push / pull - operações básicas para uso pessoal.
Stash - para armazenar temporariamente dados desnecessários no momento.
10 trabalhos - fazer pelo menos 10 trabalhos em designs diferentes... Você pode testar, não importa. É importante ser completo dentro da estrutura do conhecimento atual.

Meio

CSS 3 - gradações, sombras, anti-aliasing, filtros, transformações.
Seletores avançados - elementos seguindo o definido (+), definido por contagem (n-ésimo-filho), shadow-dom, antes / depois, e assim por diante.
Animações - opcional. transição e animação. Transições suaves, animações. Compreenda as limitações e os contras.
Grades - por que existem, como construir, quais são as soluções prontas. Por exemplo, você pode olhar para a grade do Flexbox ou qualquer coisa que encontrar.
Frameworks (CSS) - por que somos necessários, como aplicar. É aconselhável aprender a usar bem pelo menos um. Muito útil para prototipagem. Melhora significativamente a qualidade do projeto na ausência de um orçamento de design (não único, mas utilizável).
Pré-processadores CSS - você pode adiar o estudo. Otimização do trabalho, código mais bonito e legível. Variáveis, mixins, etc. Trabalhe com um ou vários pré-processadores populares como SASS, LESS, Stylus.
Consultas de mídia - você pode adiar o estudo. Exibe os estilos desejados dependendo das condições (dispositivo, tamanho da tela, densidade de pixels, versão de impressão, etc.).
Estilo de código - entenda porque existem convenções de estilo, estude e comece a aplicar alguma (recomendo do AirBNB).
SECO / BEIJO / SÓLIDO - você pode adiar o estudo. Compreenda os princípios de desenvolvimento importantes que simplificam significativamente o suporte ao projeto.
OOCSS - opcional. Entenda o que é css orientado a objetos e para que serve. É usado de uma forma ou de outra em muitos projetos (embora sem perceber que é isso). Idealmente, aprenda a projetar. Pode ser ótimo para grandes projetos.
Documentação - entender o que e como documentar. Documento. Pode ser adiado, mas certifique-se de olhar para remarcação no futuro.
Planejamento - aprenda a estimar o período de tempo pela imagem e determinar a seqüência de trabalho.
Decomposição - você pode adiar o estudo. Aprenda a dividir uma tarefa em subtarefas. Isso é mais difícil do que parece :-)
Estabelecendo objetivos - você pode adiar o estudo. Aprenda a descrever claramente as tarefas em texto para que outros desenvolvedores, incluindo aqueles com menos qualificações, entendam claramente o que precisa ser feito para concluí-las.
Flexbox - compreensão do modelo, capacidade de aplicação plena.
Layout de letras - opcional. Em geral, a habilidade não é supérflua. Entenda os recursos sistemas de correio, mantenha-se bem aparência e não caia em spam (a menos que seja spam).
Polyfills - descobrir como usar os recursos de desenvolvimento mais atualizados enquanto mantém a compatibilidade com versões anteriores. Entenda os prós e os contras dessa abordagem.
Layout multiplataforma - entenda o que precisa ser feito para que o projeto tenha uma boa aparência, não apenas no Windows, Linux e Mac, mas também no SmartTV ou PS.
Layout para vários navegadores - compreender a diferença na renderização dos navegadores e fazê-los mostrar o mesmo. O site CanIUse ajuda muito com isso.
Layout móvel - você pode adiar o estudo. Compreenda as limitações das plataformas móveis. Use o espaço limitado com sabedoria.
Otimização - você pode adiar o estudo. Compreenda o "preço" de certas técnicas. Compreenda as fases de exibição do site ao usuário. - você pode adiar o estudo. Otimizações relacionadas a tamanho, cache, compressão, pool de recursos, etc.
Renderização - você pode adiar o estudo. Otimizações relacionadas à velocidade de renderização após o carregamento.
SEO - você pode adiar o estudo. Pelo menos uma compreensão básica de como funcionam os motores de busca. Capacidade de "ajudar" motor de pesquisa descobrir onde olhar e o que é importante.
Engenheiros de Modelos - descubra como você pode reutilizar código, elementos de grupo e organizar páginas. É altamente recomendável aprender a renderização do lado do servidor e a renderização do lado do cliente. Isso também inclui modelos em uma linguagem "pura" (como inserções simples de PHP). Não estamos interessados \u200b\u200bno trabalho "antes" (fluxo de dados) do mecanismo de template.
PHP - você pode adiar o estudo. Compreenda a sintaxe básica e seja capaz de fazer pequenas edições relacionadas ao design da página.
CMS - você pode adiar o estudo. Descubra quais CMS existem e por que foram criados. Aprenda a escrever modelos para pelo menos um (eu recomendo Wordpress).
Javascript - você pode adiar o estudo. Aprenda a sintaxe básica, entenda como desligar os manipuladores mais simples e faça um trabalho simples com o DOM.
jQuery - você pode adiar o estudo. Aprenda como economizar muito tempo para resolver tarefas bastante comuns usando plug-ins para a biblioteca js mais popular (após vanilla.js, é claro).
NodeJS - você pode adiar o estudo. Descubra como iniciar um servidor simples, distribuir estatísticas e renderizar no lado do servidor. Você pode usar o Express ou qualquer outra estrutura.
Montagem - opcional. Aprenda como montar um projeto a partir de um monte de arquivos CSS / HTML no que você precisa. Eu recomendo que você se familiarize com, pelo menos, grunhir e engolir, como representantes de campos "diferentes".
IDE - opcional. Aprenda porque os IDEs são necessários e como usá-los. Mude para o uso de um IDE para economizar tempo. Importante: Aprender um IDE é como aprender completamente uma linguagem de programação, e investir muito tempo nisso pode não valer a pena. Eu pessoalmente uso editores de texto (e apenas para projetos muito grandes eu incluo um IDE).
Ramificação - aprenda como gerenciar branches no git.
Unir - aprenda como fundir ramos com resolução de conflitos.
Buscar / Rebase - para descobrir por que eles são, quando usá-los e começar a usá-los conforme necessário.
Editor gráfico - para descobrir o que é, para quê. Como o vetor difere do raster. É importante entender o editor pelo menos no nível de "leitura" do layout do designer. Escolha a fonte correta, tamanho, cor, etc. Não de vista, mas com certeza. Recomendo trabalhar com pelo menos 1 bitmap (Photoshop) e 1 vetor (Figma).
50 obras de arte - ao final do estágio, você tem cerca de 50 empregos diferentes demonstrando habilidades nas áreas estudadas.

Senior

Embora este grupo pareça pequeno no diagrama, na verdade é o maior. Porque a esta altura, é necessário estudar tudo o que foi adiado.
Layout responsivo / responsivo - compreender ao mais alto nível e combinar todos os conhecimentos adquiridos anteriormente. O projeto deve ter uma boa aparência em todos os lugares e em tudo (dentro do razoável).
Degradação gradual / melhoria progressiva - para entender o que é e por quê. Usar.
Gitflow - ser capaz de explicar a outros desenvolvedores como criar branches, onde injetá-los, como, ser capaz de conduzir uma revisão de código (layout, é claro, não código).
BEM - opcional. Compreenda a metodologia que permite criar grandes projetos ilimitados para que, com sincronização mínima, equipes diferentes possam usar os blocos umas das outras. Existem outras metodologias que não dão os piores resultados. Nesse momento, você de alguma forma saberá sobre eles e poderá, se desejar, estudar.
100 trabalhos - ter um total de cem trabalhos que demonstrem as várias competências adquiridas. Na verdade, tudo isso é condicional. Você pode ter um trabalho (composto por diferentes partes) em seu portfólio, que já mostrará que você não tem medo de nada.

Conclusão

Na verdade, muitos desses tópicos são pequenos. No entanto, é muito difícil manter vários fatores diferentes em sua cabeça. Por 15 anos, tenho me comunicado com menos de dez designers de layout (e na verdade programadores em geral), que eu classificaria como Sênior (havia muito mais designers de layout, bons programadores).
Imediatamente - é bem possível passar um ano em um estudo completo e prática de layout apenas do zero (e mais se você for para o design de componentes).

Espero que para aqueles que estão no início do caminho, o diagrama diga onde você ainda pode se mover, e que não é necessário imediatamente (ou você não pode fazer nada) para executar a programação.

Também pretendo criar um curso grátis com um exame detalhado de cada um dos tópicos-retângulos do diagrama. Eu ficaria feliz em ter uma oferta, feedback, desejos e assim por diante.
O curso provavelmente será em formato de vídeo tutorial com texto completo e duplicação gráfica. Se for, irei anexar links nos comentários no futuro.

atualiz
Existem muitos relatórios de que um designer de layout não é necessário sem o conhecimento da estrutura. Isso é escrito principalmente por desenvolvedores em grandes projetos. E, para eles, isso é bem verdade. Mas ainda existem muitos estúdios fazendo landing pages, vários templates para WordPress e outros CMS. Este é um mercado muito bom e uma oportunidade de ganhar dinheiro. Existem alguns projetos completamente pequenos com muito menos requisitos que o designer de layout é capaz de fechar perfeitamente.