Category: Front-End

Sites responsivos – 7 razões para aplicar design responsivo

22 de junho de 2017

Sites responsivos – 7 razões para aplicar design responsivo

Eae? Tudo bele?
Você já se deparou com a seguinte situação? Um cliente possui um website um site há muitos anos que, na visão dele, funciona muito para desktop e ele deseja agora uma versão mobile deste site.
Não deixa de ser uma solução o que propõe seu cliente, porque em certas circunstâncias um site mobile dedicado mobile atender as necessidades requisitadas, porém você como Designer deve alertar sobre os custos e consequência decorrentes desta escolha e alertar sobre outras possibilidades.
E aí que o desenvolvimento de um site responsivo entra com uma possibilidade forte que traz muitas vantagens em relação a um site exclusivo para mobile.
Sites responsivos são desenvolvidos levando em consideração conceitos e técnicas do design responsivo que cada vez mais está sendo empregado na construção de todo tipo de websites.
Neste artigo eu listei 7 razões para você construir sites responsivos que farão:

Você enxergar essa possibilidade, caso não tenha enxergado;
Você ter argumentos para que clientes que possuem um antigo layout de desktop pensam na reestruturação dos mesmos;
Você fornecer o que há de melhor do design responsivo para clientes que ainda não tem presença online a partir de sites.

E então preparado?
1 – Sites que utilizam design responsivo são compatíveis a diferentes dispositivos

Esta é uma questão óbvia para quem já conhece e trabalha com o design responsivo. Porém se você nunca se aprofundou no assunto segue uma definição que gosto, retirada do site Smashing Magazine:
O Web design responsivo é a abordagem que sugere que o design e o desenvolvimento devem responder ao comportamento e ao ambiente do usuário com base no tamanho da tela, na plataforma e na orientação.
Isso quer dizer que um site desenvolvido de forma responsiva deve alternar para acomodar a resolução conforme o usuário muda de dispositivo. Essa é a grande vantagem de construir sites responsivos, eles se adéquam a diferentes dispositivos, como smartphones, tablets e desktops sem a necessidade de construir um site específico para cada dispositivo.
Só esta primeira razão é suficiente para você procurar se aprofundar no assunto. Para isso quero te fazer uma oferta gratuita. Que tal baixar nosso Manual de Web Design Responsivo?
2 – É mais fácil manter e gerenciar um site responsivo

Sites responsivos são desenvolvidos em um só ambiente e estrutura. Se trata de sites únicos. Você não precisa se preocupar com duas ou mais bases com todo conjunto de arquivos que formam um site. Muitos menos se preocupar em gerenciar dois diferentes CMS. Consequentemente você ganha tempo com todas as tarefas de gerenciamento do site.
E outra grande vantagem a destacar é que pelo fato dele ser responsivo a manutenção fica muita mais rápida e simples de ser executada por não ter que se preocupar em fazer alterações em cada site construído para um dispositivo específico.
3 – Projetos que usam design responsivos provém melhor experiência aos usuários

Atualmente é imprescindível que um site fornece a melhor experiência aos usuários possível porque isso aumenta as conversões no site, melhora a percepção da marca e diminui a taxa de rejeição. Uma das prioridades do design responsivo é cobrir todos esses aspectos para atender as necessidades comerciais dos proprietários de sites e fundamentalmente garantir uma ótima e fluente experiência a quem visitas esses sites.
Tente acessar um site antigo desenvolvido para desktop em um celular. É inevitável o uso do zoom com a posterior rolagem lateral para ver um conteúdo que não cabe dentro deste dispositivo. Não é uma das melhores experiências web. Com sites responsivos isso não ocorre.
4 – Sites responsivos são melhores classificados nos mecanismos de buscas

Essa é para quem se preocupa em classificar bem seus sites e de seus clientes nos mecanismos de buscas.
O Google privilegia sites que atendem, além de desktop, dispositivos móveis como smartphones e tablets. Tanto que preparou uma ferramenta para testar se os sites estão funcionando bem nesses dispositivos. O próprio Google Search Console verifica a facilidade de uso em dispositivos móveis.
Para ele sites responsivos terão melhores resultados nos rankings de busca, pois proporcionam uma melhor experiência do usuário.
E tem mais. O Google gosta de sites que usam urls únicas, coisa que não acontece com sites que tem diferentes versões mobile. Geralmente esses sites tem um url para a versão desktop e uma versão estilo m.seusite.com para mobile.
Além do mais o Google tem um algoritmo separado para sites mobiles o que significa que não só porque um site classifica bem em uma busca no desktop deverá acontecer o mesmo em busca feitas por celulares.
Temos que ficar preocupado com isso porque o consumo de internet por dispositivos móveis é cada vez mais crescente e ter um site responsivo se faz a cada vez mais necessário.
5 – O uso de dispositivos móveis está em ascensão
Segundo a 27ª Pesquisa Anual de Administração e Uso de Tecnologia da Informação nas Empresas, realizada pela Fundação Getúlio Vargas de São Paulo (FGV-SP), a projeção é que, no Brasil até 2018, o número de smartphones chega a 236 milhões. Isso porque não temos os dados de uso nos outros países de língua portuguesa.
Sabe o que significa esse crescimento? Significa que cada vez mais potenciais compradores verão o seu site e de seus clientes a partir de um dispositivo móvel. E se a experiência de interação com a interface deles não for boa serão grandes as chances de os usuários partirem para os sites da concorrência.
6 – O maior consumo de redes sociais se dá em dispositivos móveis

Naturalmente que com o aumento do número de dispositivos móveis aumenta também o consumo de redes sociais nestes dispositivos, portanto, compartilhar links de sites em redes sociais como Facebook, YouTube, Twitter ou Google Plus significará ainda mais tráfego e visualização de seu site a partir de celulares e tablets. Consequentemente um site responsivo é indicado para sua estratégia de compartilhamento social.
Só para você ter uma ideia, de acordo com agência eMarketer, o Brasil é o maior usuário de redes sociais da América Latina. Os números mais recentes estimaram um total de 93,2 milhões até o final do ano de 2016.
7 – Maior uso de smartphones e tablets impulsiona compras online pagas com estes aparelhos

Segundo um estudo do instituto de pesquisa Ipsos e da PayPal, o Brasil está à frente da média mundial no hábito de comprar pela internet usando um smartphone ou tablet.
Isso é o tipo de notícia que agrada qualquer proprietário de site que vende algum produto online. Principalmente se ele não tem que se preocupar se seu site está funcionando para todos dispositivos.
E muitos usuários gostam de fazer compras no conforto do seu lar ou em qualquer lugar sem se preocupar com deslocamentos. Hoje é tudo muito simples. Com simples ações na interface de um site ele já pode concretizar uma compra. Mas lógico se estiver acessando um site preparado para seu dispositivo.
Se os produtos e serviços de seus clientes não são fáceis de visualizar a partir de tablet ou smartphone, eles não devem estar felizes com a solução que você encontrou para os problemas deles.
Conclusão
Espero que os argumentos aqui apresentados sejam suficientes para te alertar sobre a importância de adotar o design responsivo em seus projetos. Como falei em um dos tópicos é imprescindível que um site forneça a melhor experiência aos usuários. Isso porque, além do nosso objetivo como profissionais da web de oferecermos o que é adequado aos usuários, temos que também nos preocupar com os objetivos comerciais de nossos clientes e a ação de desenvolver sites responsivos vem de encontro a esses objetivos.
Para te auxiliar na construção de sites responsivos vou te indicar dois matérias especiais. Um e-book e um artigo. Os links estão a seguir:
1 – E-book Manual de Web Design Responsivo
2 – Como usar o CSS3 media queries para que seu site atenda a diferentes resoluções de tela
Muito bem Galucho! E você se preocupa em construir sites responsivos? Deixe aqui seu comentário e compartilhe com amigos que gostariam de saber mais!
Forte abraço.
Até mais.
Referências:

Responsive Web Design – What It Is And How To Use It


http://www1.folha.uol.com.br/mercado/2016/04/1761310-numero-de-smartphones-em-uso-no-brasil-chega-a-168-milhoes-diz-estudo.shtml

Brasil é o maior usuário de redes sociais da América Latina


http://www.bbc.com/portuguese/noticias/2015/02/150226_pagamentos_celular_rb
The post Sites responsivos – 7 razões para aplicar design responsivo appeared first on Chief of Design.

Sites responsivos – 7 razões para aplicar design responsivo
Fonte: Chef of Design

Web Design e Desenvolvimento Web: 50 perguntas e respostas

2 de junho de 2017

Web Design e Desenvolvimento Web: 50 perguntas e respostas

Eae, tudo bele?
Já pensou que  se as suas principais dúvidas sobre  Web Design e Desenvolvimento Web fossem respondidas? Aquelas que que mais te intrigam e te deixam com várias dúvidas?
Pois é! Eu pensei em te ajudar e criei este artigo com 50 questões respondidas sobre Web Design e Desenvolvimento web.
É claro que não é humanamente possível responder a todos que me procuram, e as diversas dúvidas que recebo. Entretanto separei uma parte considerável de perguntas elaboradas por leitores aqui do blog , que me acompanham de forma mais próxima, acessando meus e-mails e participando dos conteúdos.
Tendo em mãos essas questões, hoje decidi tirar  informações importantes de dentro do baú do Chief para esclarecer  em 50 perguntas de Web Design e Desenvolvimento Web, as as principais dúvidas da galera.
Aproveite e confira! Quem sabe você não encontra uma questão semelhante àquela dúvida que ainda pairando em sua mente?
Entre os principais assuntos que vamos tratar estão dúvidas sobre: Web design, Front-end, Carreira, WordPress, HTML e CSS, entre outros.
Preparado? Então sigam-me os bons!
1 – Como anda o mercado de web design brasileiro?
O segmento de web design e afins está em franco crescimento. O cenário propicia isso. Veja: temos no Brasil mais de 51,3 milhões de e-consumidores, o que pressiona o empresariado a possuir presença online para seus empreendimentos e consequentemente a contratação de profissionais para construção de seus websites.
Isso sem contar que 54,9% das residências no Brasil tem acesso a internet o que reflete em um grande caminho a percorrer onde surgirão oportunidades.
Outro dado relevante é que, segundo a ABRADi, o setor criativo responsável pelo crescimento e desenvolvimento de sites foi responsável pela maior fatia de faturamento do setor digital atingindo 30,4% do total obtido. Esse dado é segundo o último Censo realizado em 2013 e só revelado em 2016. E segundo este mesmo Censo, o faturamento do setor foi de R$ 2,7 bilhões, um crescimento de 25% em relação a 2012, quando faturou R$ 2,2 bilhões.
Eu gravei um vídeo onde falo mais sobre essa parte, você pode conferir clicando aqui!
2 – Onde pode trabalhar um Web Designer?
Há espaço em departamentos de comunicação, marketing, em agências de publicidade, empresas de TI , Startups, produtoras de vídeo, editoras de jornais e revistas on-line, ONGs, entre outras opções que necessitam ter um site ou que tem um negócio online. Também pode atuar de forma independente, como Freelancer  ou agência, prestando serviços.
3 – Como está o mercado para o Web Designer com tantas plataformas prontas como Wix e Uol, entre outros?

Esse é um assunto que gera muita discussão, porque certas pessoas acreditam que o uso de certos construtores online do “tipo clica e arrasta” prejudicam os profissionais da área.
Eu acredito que o público que vai atrás desses construtores não deve ser o seu público-alvo. Eles estão em outro estágio onde a preocupação com a facilidade e, até em alguns casos, com a gratuidade de certas plataformas são prioridades. Não acredito que você deve pensar que está perdendo clientes.
Um dia muitos desses clientes mudarão de estágio e necessitarão de algo mais robusto  e específico que essas plataformas não oferecem. Nesse momento que eles se enquadrarão em sua faixa de público-alvo, porque saberão, enfim, de verdade o que querem.  E nesta hora será sua vez de entrar em campo.
Tem um lado bom de ver o Wix no topo da parada: muita gente que não tinha recursos para contratar um profissional web se encorajou a ter uma presença online. Muitos não irão prosperar, isso é normal no mundo dos negócios. Os que prosperarem perceberão que precisam de algo a mais. E a vida seguirá!
Outro ponto importante é que essas empresas contratam designers para criarem os layouts e templates que vendem. Logo por mais que possa parecer, eles não atrapalham de forma efetiva a carreira de um Web Designer.
4 – Quais os tipos de trabalho um Web Designer faz?
Ele pode criar layouts para diferentes tipos de sites, banners, peças gráficas para mídias sociais, entre tantas outras peças digitais. Mas para você ficar mais por dentro das tarefas que um Web Designer executa sugiro que você assista este vídeo
5 – Mexer com Web Design é para todos?
Todo mundo que gosta de design, de tecnologia, de artes, etc; e se dedicar para estudar e praticar, pode sim se tornar um Web Designer.
6 – Vale a pena trabalhar como Web Designer?

Vale muito a pena se você se identifica com área( como você verá no tópico a seguir).
Afinal trabalhar com o que se gosta é o que fará você levantar todos os dias para enfrentar os desafios.
7 – Como saber se eu terei gosto pelo Web Design?
Na questão anterior falei que vale a pena trabalhar se você se identifica. Mas como saber se ainda você não teve contato com área?
Segue algumas pequenas dicas que podem te orientar. Veja se você se enquadra nesses requisitos:

Você é criativo;
Você gosta de comunicação;
Você sente empatia pelas pessoas;
Você gosta de tecnologia;
Você admira artes e comunicação visual;
Você possui bom raciocínio lógico;
E o principal; você tem disposição para resolver problemas.

Se você se enquadra bem nesses requisitos você tem uma grande chance de gostar de atuar na área.
Claro que existe diferenças entre trabalhar com algo e simplesmente gostar. Mas caso tenha  esse tipo de perfil, já é meio caminho andado.
8 – Qual é o salário médio de um Web Designer?
Depende de vários fatores: região do país, seu nível e experiência, o segmento da empresa, etc.
Em média um web designer ganha de 2 a 3 mil reais. Mas isso é apenas uma média. Esses números podem variar.
9 – Por onde devo começar? HTML, CSS e JavaScript ou Design?
Depende do seu objetivo. Os itens citados na pergunta estão correlacionados as profissões de Web Designer e Desenvolvedor Front-end.
Caso seu interesse seja seguir a carreira de Web Designer sugiro que comece pelos fundamentos de Design de uma forma geral e aprofunde nos conceitos de Web Design.
Se tiver facilidade para aprender coisas simultaneamente, comece também a praticar em softwares de edição de imagem como o Photoshop e de arte vetorial como Corel Draw ou Illustrator. Depois parta para as linguagens HTML e CSS.
Tenho um material muito massa ( e não é porque fui que fiz, não. Ele é bom de verdade.) que auxilia Designers a lidarem com estas linguagens de um site mais simples e focando no essencial . Se tiver interesse sugiro que confira aqui o meu eBook de HTML &CSS!
Porém se objetivo é ser um Desenvolvedor Front-end corra para aprender HTML e CSS. Javascript? Não antes de você compreender lógica de programação.
E para aqueles que possuem interesse em se tornar um Desenvolvedor Back-end, se este for seu caso, comece com lógica de programação que você estará apto a aprender qualquer linguagem do lado do servidor.
10 – Qual é o melhor caminho de aprendizado que devo seguir para aprender os princípios do design na área?

Acredito que o melhor caminho de aprendizado é aquele que traga organização aos estudos para ganhar tempo, boa didática e desafios de ordem prática. Aliado a tudo isso você também pode considerar ao qual você melhor se adapta.
Existem diferentes caminhos. Você optar por se um autodidata ou por cursos. Dentre os cursos existem os presenciais e os online.
Eu gosto de cursos online e não digo isso só porque ofereço um curso online da área cujo conteúdo engloba os fundamentos de Design e Web Design. Digo isso por os cursos online reúnem o melhor de todos os mundos:

Primeiro porque é um especialista que está instruindo;
Segundo é que muitos dos cursos estão organizados de tal forma que dificilmente você encontraria organização igual, seja na web ou presencial.

Você ganha tempo com isso, além de não se preocupar com deslocamentos para cursos presenciais. Na maioria deles você pode estudar de onde quiser, na hora que bem entender e com a possibilidade dar replay quantas vezes quiser, caso não entenda ou queira rever algo.
Mas escolher entre um curso  presencial, online ou até mesmo estudar por conta pesquisando na web, varia de cada perfil. Tem gente que precisa de um presencial. tem outros que tem menos tempo e preferem o online.  O melhor é avaliar o que é melhor para você.
11 – Quais as funcionalidades de cada linguagem – HTML e CSS?
HTML é uma linguagem de marcação. Ela tem a função de dar semântica ao conteúdo marcado.
Já o CSS é uma linguagem de formatação. Ela tem a função de dar estilo visual aos elementos HTML de uma página.
12 – Qual o melhor programa gratuito para quem está querendo aprender as linguagens HTML e CSS?
O bloco de notas é a melhor para aprender. Para trabalhar existem melhores. Porém no caso de aprendizado o bloco de notas é indicado porque não possui ferramenta de auto completar o que vai te obrigar a digitar certo e memorizar a sintaxe das linguagens.
Entre as opções de software para trabalhar temos inúmera opções como: Sublime Text
Brackets, Notepad++, NetBeans.
13 – Como entender melhor JavaScript e jquery?
Para entender melhor você deve aprender antes lógica de programação. Depois deve se aprofundar na sintaxe dessa linguagem. Esse  é o caminho certo.
14 – Sou iniciante, preciso obrigatoriamente dominar as ferramentas gráficas?
Deve dominar sim. Não existe Web Designer sem o domínio mínimo de ferramentas gráficas. Porém não antes de se qualificar nos fundamentos de Design. Ferramentas são apenas uma parte do processo e, talvez, seja até uma das etapas mais fáceis de aprender.
Sugiro também que você assista também o vídeo do link a seguir:
➡ Fundamentos de Design são mais importantes do que Softwares (Ferramentas).
15 – Quais as principais ferramentas que um Web Designer precisa saber utilizar para se destacar na área?

Não que ferramentas vão fazer você se destacar, mas são necessárias para seu bom desempenho.
As ferramentas que vale a pena investir seu tempo para aprendizado são Photoshop, Illustrator, Corel Draw e algum editor de códigos como o Sublime Text por exemplo.
Também existem ferramentas especificas para layouts como Sketch (só para MAC) e Adobe XD.
E por fim você também pode lidar um pouco com InDesign, After Effects, Premiere, entre outros.
Nestes dois artigos a seguir você terá uma relação de ferramentas alternativas à citadas e outros para funções específicas que eventualmente você poderá usar.
➡ O que todo Web designer precisa saber
➡ Ferramentas de Front-End
16 – Como ser mais criativo na hora de criar qualquer tipo de gráfico? No caso só conhecer a ferramenta é necessário?
Para mim criatividade está relacionada com as coisas que você experimenta e observa. O que determina o que você fará na hora de criação estará relacionado com o problema a ser resolvido e o que você vivenciou até então.
Criatividade é organizar de forma coerente todo o seu repertório.
Logo, não existe uma chavinha que você liga e vem a criatividade. Para ser criativo na hora do trabalho, você deve sempre vivenciar novas (claro que não todas ( ͡° ͜ʖ ͡°) ) coisas em sua área de atuação, em outras ciências e pessoal.
E não se apague muito a ferramentas gráficas. Um bom lápis e papel são ótimas ferramentas. Rabisque muito, faça esboços, deixe externar suas ideias e você verá que errará muito antes de chegar aonde quer. Não existe criatividade sem experimentações.
17 – Qual é o melhor programa? Photoshop, Corel Draw, Illustrator?
O Web Designer normalmente lida mais com o  Photoshop ou Sketch (só para MAC) e Adobe XD, dependo do profissional.
Mas você criar até mesmo no Corel ou Illustrator, ou em qualquer outra ferramenta. Se você conseguir entregar o trabalho com qualidade, dentro do prazo e do combinado, pouco importa a ferramenta.
Não seja refém de ferramentas e nem tenha mente fechada. Afinal, você é um Web designer ou um micreiro, né?
18 – Qual a dica para acompanhar o máximo das novas tendências da área de Web Designer diante do tempo escasso sem se desestimular?
Se o seu tempo está escasso é bom sinal para ter calma. Na verdade, na maioria dos casos, essa questão de empo trata-se mais de uma má administração do mesmo do que falta de tempo.
E cuidado. Querer acompanhar o máximo de informações com o tempo curto é um bom caminho para a desestimulação.
Meu conselho é que foque em um assunto de cada vez, sempre dando prioridade para aquele que julgar mais importante. Você não sabe o poder que se tem ao dedicar a somente uma matéria de cada vez.
19 – Qual é a diferença entre profissionais Front-end e Back-end?
Desenvolvedor Front-end é aquele responsável por projetar as interfaces de um website, trabalhando com a parte da aplicação que interage com o usuário. Para isso, este profissional, lida com as linguagens do “lado da frente” como HTML, CSS e Javascript.
O Desenvolvedor Back-end lida com linguagens do “lado de trás”, também conhecidas como linguagens do servidor como PHP, Java, Python, Ruby, entre outras. Também  trabalha diretamente com banco de dados como MySQL, SQL Server, PostgreSQL, entre outros. Este profissional, atua no que o usuário não pode visualizar. Ele desenvolve o sistema que vai ser utilizado para gestão dos dados utilizando a interface desenvolvida pelo desenvolvedor Front-end.
Para visualizarmos melhor imagine quando você loga em um sistema.
A parte da frente, onde você inseri seu login e senha, é de responsabilidade do  Front-end. Já o back-end fica com o sistema procura e valida se o nome de usuário e a senha estão corretos, permitindo que você acesse a área restrita.
20 – Qual a diferença de um Web Designer para um Desenvolvedor Web?

O Web Designer trabalha com o design do site, mas se preocupando com questões que visam a facilidade de uso experiência do usuário.
Já um Desenvolvedor Web, como já vimos na questão anterior, lida com a parte dos códigos da interfaces. E aí podemos ter uma divisão entre front-end,  que lida com a parte que o usuários interagem ou back-end que desenvolve o sistema que vai ser utilizado para gestão dos dados.
21 – Tem como trabalhar com Web Design sem necessariamente aprender programação? Ou é realmente necessário?
Por definição um Web Designer não efetua programação. Não acho essencialmente necessário. O máximo que ele pode lidar são com linguagens de marcação e formatação, que diferem muito das linguagens de programação. Porém pode ser um diferencial se um profissional saiba programar, mas é pouco comum.
Criar o design da página ao mesmo tempo  programar  pode te tornar em um profissional único, desde que faça os dois super bem.  porém aí que mora a questão: é muito raro alguém que consegue fazer isso em alta qualidade. Por isso normalmente o ideial é focar em um dos dois.
Tome cuidado para não se tornar um profissional “pato”. Não anda direito, não nada direito. Se proponha a fazer algo que faça bem. Talvez o caminho mias seguro é se especializar em uma área somente e focar nela.
Para aprofundar mais sobre essa questão assista este vídeo.
22 – Desenvolvedor é obrigado a saber design?
Obrigado é uma palavra forte, por isso minha resposta é não. Principalmente os desenvolvedores back-end.
Mas existem alguns desenvolvedores front-end que se aventuram com o Design. Isso porque é ele, o front-end, que vida ao layout no navegador,  aplicando-o no código. Muitos front-ends entendem de design e programas de edição gráfica.
O grande benefício disso é se sentir capacitado para assumir jobs freela mais completos e poder cobrar mais por isso.
23 – Preciso realmente saber tudo de código para ser Web Designer?
Não é necessário. Porém sempre bato na tecla que um Web Design deve conhecer HTML, CSS e um pouco de Javascript para poder criar pensando nas limitações que a área de desenvolvimento pode encontrar quando se depara com layout complexo.
Isso sem contar o bônus de poder assumir jobs mais completos trabalhando como freela.
24 – Existe alguma forma de trabalhar só com o design da página, sem precisar aprender códigos?

Existem softwares que permitem você trabalhar no modo visual em que você não precisa lidar com códigos. Mas isso não é legal!  Eu não indico você utilizar o modo visual.
Lidar com códigos, no caso HTML e CSS, é também pensar em Design. Quando você pensa na melhor forma de codificar, no desempenho que as páginas terão por causa dos códigos é pensar em projeto.
25 – Por que a maioria dos programadores reclamam de programas como Adobe Muse e Dreamweaver?
Esta pergunta vem de encontro com a pergunta anterior. O Adobe Muse é um software que permite a trabalhar no modo visual sem precisar de escrever uma linha de código.
A primeira vista ele é maravilhoso, porém como todo editor visual ele gera um código sujo. Mas o grande problema nem é este. Imagine se você precisar fazer manutenção em páginas já publicadas, o Adobe Muse não poderá te ajudar. Você precisará de conhecer a sintaxe da linguagem utilizada.
Por isso tais programas, normalmente, são combatidos por desenvolvedores.
O Adobe Dreamweaver também tem essa possibilidade, porém tem  a opção de utilizá-lo sem o modo visual.
26 – Trabalho com Photoshop e manjo um pouco de Illustrator. Gostaria de saber se existe setores de criação somente ou terei que saber programar também?
Depende da empresa. Existem algumas que possuem profissionais com funções bem definidas. Alguns trabalham com criação enquanto outros trabalham com desenvolvimento web.
Mas existem lugares onde o criativo também tem lidar com códigos, principalmente HTML e CSS as quais eu friso sempre que um Web Designer deve aprender.
A tendência é que cada vez mais seja dividido entre setores (design, programação) e cada vez menos você veja vagas que pedem para que faça de tudo.
27 – É muito essencial ter conhecimento do WordPress hoje?

Considero que sim. Atualmente o WordPress atinge cerca de 25% dos sites o mundo, está instalado em cerca de 75 milhões de websites de acordo com a Forbes. Imagine a potencial necessidade de manutenções que essa plataforma exige.
Sem contar os benefícios que esse CMS proporciona como fácil instalação, configuração, manutenção, temas e funcionalidades diversas. Se você ainda não conhece o WordPress corra para conhecer agora. Saiba mais sobre ele aqui!
28 – Ainda vale a pena criar sites em HTML, ou o WordPress seria a opção mais válida atualmente?
Isso vai de acordo com a necessidade do projeto. Se o projeto consiste em um site pequeno, de páginas estáticas e com pouca atualização pode ser feito só com HTML e CSS.
Lembrando que um site em WordPress é um site que resulta em páginas HTML. A grande diferença é que o WordPress possibilita a criação de sites dinâmicos, porque utiliza a linguagem php.
29 – Quanto tempo em média leva para a pessoa desenvolver bem um site do zero?
Essa pergunta é uma preocupação recorrente dos Galuchos. Gostaria de ter uma resposta precisa, mas talvez não consiga. Primeiro, porque não existe uma pesquisa sobre isso e segundo que mesmo hoje em dia, depois de vários anos,  eu sigo me aperfeiçoando para desenvolver bem um site do zero. Mas o mais importante é que eu desenvolvo dentro das minhas habilidades.
Aprender a desenvolver um site é como aprender a dirigir:
No começo você aprenderá a engatar a primeira e a segunda marcha, e mal dará sua primeira volta no quarteirão. Terá a impressão que precisa ser um alienígena com 3 braços para volante e freio de mão, 3 pernas para os pedais e vários olhos para o painel e retrovisores.
Depois de um tempo você já consegue dar voltas pelas ruas do bairro com só uma mão no volante e mais um tempo a frente você está encarando rodovias.
Para desenvolver sites é similar: no começo seus layouts podem sair confusos e cheios de problemas de usabilidade, depois de um tempo começa a criar bons layouts , mas estará apanhando no CSS. Quando menos você esperar estará estilizando temas WordPress.
Então senão se preocupe  com tempo e sim em superar etapas. Se aperfeiçoe na etapa de aprendizado que você está agora. Você será capaz de desenvolver dentro das suas habilidades e cada vez mais elas ficarão melhor.
E quando menos você esperar você estará desenvolvendo sites que satisfarão seus clientes.
30 – Como conseguir os primeiros clientes sem ser os amigos?
Para conseguir clientes você terá que ter algo para mostrar, no caso, um portfólio. E não é de todo mal que os primeiros clientes sejam amigos, ainda mais se eles pagarem por isso.
Porém não fique preso somente a essa questão. Caso não tenha clientes para construir o seu portfólio, crie-os. Se a porta tá fechada para você, tente entrar pela janela, pela chaminé ou se precisar crie a sua própria passagem.
Você pode criar projetos pessoais, redesign de sites, crie para ONGs, etc. fFaça algo que forme seu portfólio e mostre para o mundo. Com o tempo os clientes não serão somente os amigos.
31 – Como montar um portfólio do zero?

Já dei uma dica na questão anterior, mas vou dar uma melhor agora. Clique aqui e baixe gratuitamente nosso Guia Definitivo sobre Portfólio. Nele você aprenderá:

Por onde começar o seu Portfólio;
Como conseguir trabalhos para o Portfólio;
Como promover o seu Portfólio;
Como se apresentar de forma Profissional;
Como construir um Currículo Eficiente;
Como criar um vídeo de apresentação.

32 – Como posso ganhar dinheiro trabalhando como Web Designer?
Existem basicamente duas formas de você ganhar dinheiro trabalhando como Web Designer: como empregado ou como freelancer.
Se você tiver tempo e disposição pode potencializar seus ganhos trabalhando das duas formas.
Também existem outras possibilidades como consultoria, docente, etc.
33 – Posso ser bem-sucedido me tornando um Designer freelancer e trabalhando a partir da minha casa?
Lógico que sim. E isso tem a ver, além de se preparar tecnicamente, com sua atitude mental. Se você procurar agir positivamente, sem ficar estático na zona de conforto, você irá focar com afinco naquilo que você mais deseja no momento. O sucesso então será consequência de suas ações.
Atuar como freelancer é um dos caminhos promissores no cenário atual.
34 – Como posso aumentar minha captação de clientes?
Não existe regra, fórmula milagrosa e nem nada do tipo. O que pode aumentar a captação de clientes é:

A qualidade do seu trabalho, ou seja, ter um bom portfólio;
Se apresentar e ter uma postura profissional, cumprindo prazos, entregando com qualidade, etc;
Divulgar o seu trabalho. Essa divulgação pode ser feito através de propagandas e também no clássico “boca a boca”.

35 – Como cobrar sendo freelancer?
Outra questão que não existe regra específica.
Na minha opinião, o ideal é cobrar por projeto. Para isso você precisa saber o valor médio, da peça que esta desenvolvendo, no mercado e cobrar de acordo com os seus custos e habilidades/histórico profissional.
Para sabe o valor dos seus custos, você pode definir o valor hora. Existem várias fórmulas que fazem isso. A seguir segue uma fórmula simples  que aprendi com um professor para definir o valor hora:
Somes os seus custos:
Despesas pessoais + 20% ou 30%
Custos profissionais (internet , softwares, hospedagem de site, etc)
Por exemplo:
Despesas pessoais R$2500,00 + 30% = 3250.
Custos= R$1000
3250 +1000=  4250
_________________
Agora faça vezes um Lucro de 20% (lucro médio de serviços):
Por exemplo:
Lucro = 4250 x 20% = 850
_________________
Depois some todos os valores ( despesas pessoais, custos profissionais e lucro) e divida por 160 horas que seriam 40h semanais.
.
Por exemplo:
3250 +1000+850 (/160) = 31,80.
Valor hora: R$31.80
_________________
A partir dessa base você saberá o mínimo que pode cobrar por um projeto. Mas o valor final vai depender de outra variantes importantes como o valor médio de mercado daquela peça, se você é muito requisitado, se você tem alguma habilidade única, é especialista naquilo e etc.
Não existe uma regra para isso!
36 – É possível entrar na área sem realizar um curso especializado?

É possível, mas o caminho pode ser mais longo por dois motivos:

Você vai ter que angariar pela web conteúdos que estão espalhados.
Como você não tem conhecimento prévio sobre diversos assuntos fica difícil saber o que pesquisar quando nunca se viu falar na vida sobre determinado assunto, técnica ou ferramenta.

E foi para essa galera e também para quem já até está atuando na área que criei um o Web Designer PRO, um curso que visa cobrir assuntos como fundamentos de design, conceitos de web design, design de conversão, processo criativo, aulas de Photoshop, fluência em HTML, CSS e WordPress.
37 – Como ser um profissional sem curso superior?
Quem conhece minha história sabe que comecei a trabalhar na área sem ter curso superior e até conquistei uma vaga de emprego concorrendo com profissionais que já tinham curso superior. Acredito que o grande diferencial foi meu portfólio. E olha que não tinha tantos trabalhos.
Então o que sugiro é que pesquise muito e ponha em prática o que absorver, procure por um curso livre que atenda suas necessidades enquanto você não pode fazer uma faculdade e principal, construa seu portfólio para ontem.
Neste link eu disponibilizo um vídeo em que falo sobre o momento de fazer uma  Faculdade de Design agora. Que tal dar uma conferida?
38 – Existe um curso exclusivo só para Web Designer?
Se pesquisarmos no Google por “Faculdades de Web Design” ou “Design Digital” nas primeiras páginas pouca coisa encontraremos. O que existem mais por aí são cursos livres de Web Design.
Um caminho que muitos seguem é fazer uma faculdade de Design Gráfico, e durante ou após o término da mesma, fazer um curso livre de Web Design.
Eu te sugiro o Web Designer PRO que é indicado para aqueles que não tem muito tempo e pretendem fazer um curso com relativo baixo investimento, porém com muito conteúdo.
39 – Certificação acrescenta valor real?
Certificação é uma prova que, em tese, garante que um profissional domina determinado assunto tratado e está habilitado a trabalhar neste assunto.
Para mim este tipo de comprovação é válido apenas para vagas que fazem exigência do mesmo, que normalmente são poucas. Para muitas, ou maioria, das empresas o suficiente para te considerar capacitado o que você apresenta em seu portfólio ou em um teste prático positivo.
Tudo depende da cultura contratual da empresa.
40 – O que é design responsivo?
Basicamente é desenvolver websites que se adequam a diferentes dispositivos como celulares, tablets e desktop.
Pensar em design responsivo é inerente a construção de websites. Atualmente construir sites é sinônimo de executar design responsivo.
41 – Como fazer páginas responsivas?
Primeiro você deve saber como aplicar os conceitos do design responsivo e segundo compreender o uso das CSS3 Medias queries.
Para te ajudar te forneço 2 materiais essenciais.

O primeiro é o Manual de Web Design Responsivo para você entender os conceitos e que você pode baixar neste link.
E segundo sugiro a leitura do artigo “Como usar o CSS3 media queries para que seu site atenda a diferentes resoluções de tela”.
42- Quais as melhores práticas para criar um bom UX?
Vou citar algumas:

Pesquisar sobre o público alvo e entender seus anseios e necessidades;
De acordo com a pesquisa oferecer conteúdo relevante para este público;
Garantir que as pessoas encontrem esse conteúdo de forma simples;
Garantir que naveguem facilmente por todo o site sem dificuldades e constrangimentos;
Garantir que elas acessem e que a boa experiência seja preservada mesmo em dispositivos de tamanhos e sistemas diferentes;
Garantir que a pessoa que acessou o site saia de lá com as expectativas atendidas.
Garantir que nada que seja importante tenha passado despercebido;
Reduzir as interações negativas que não temos controle e/ou não podemos prever quando pode acontecer.

Para se aprofundar mais sugiro ler este artigo.
43 – Vale a pena migrar do design gráfico para o web design?
Sim, claro. Na verdade acredito que é mais fácil fazer o inverso: começar no web/digital e depois estudar sobre design gráfico. E na verdade você não precisa fazer uma escolha abruta em um ou outro. Você pode trabalhar com os dois.
Eu tenho um vídeo onde falo um pouco sobre isso. Você pode assistir aqui.
44 – Dá para aplicar conceitos do design impresso na web sem perder muito do design?
O Web Design como já diz no nome é Design aplicado para web. Portanto conceitos de Design de uma forma geral são os mesmo para ambas as áreas.
O que difere, fundamentalmente, é que na web o Designer não se preocupa com os processos de impressão e sim como as cores, tipografia e outros elementos funcionam no digital. Também se preocupa com a adaptação do layout  a diferentes resoluções de telas de forma, para proporcionar uma ótima experiência do usuário.
45 – Como funciona o domínio de um web site, ou seja, o que é necessário para ter um?
Domínio é o endereço principal pelo qual seus visitantes poderão encontrar seu projeto na internet. Para adquirir um é preciso visitar algum site  responsável por registro de domínios, fazer uma pesquisa para verificar se o nome escolhido está disponível, efetuar um cadastro no site e posteriormente pagar a taxa de registro.
Para você obter mais informações sugiro a leitura deste guia detalhado.
46 – Criar um site a partir do zero ou utilizar plataformas como o WordPress?
O bom de aderir a plataformas como o WordPress é que você tem uma boa estrutura pronta. Só que ainda sim você terá muito trabalho.
Existem casos que você ou sua equipe terão que partir do zero, por exemplo, pela complexidade do projeto que requer um CMS próprio com funcionalidades que o WordPress não possui, ou até pela simplicidade de um site que não precisa de um gerenciador.
No geral depende do projeto, tempo disponível e do objetivo do site.
47 – Para ser um Web Designer é preciso saber desenhar?

Um Web Designer não precisa ser um desenhista da Pixar. O que ele precisa é saber expressar suas ideias, quando precisar, através do desenho. Coisa bem diferente de ser um Ilustrador. Eu explico melhor sobre esse tema nesse vídeo.
48 – O que você me indica para me sentir mais confiante para uma entrevista?
Como Web Designer eu te respondo que uma  das coisas fundamentais, é que você tenha um portfólio para apresentar. Isso mostrará que você está preparado.
Outra coisa importante é você ter bem em sua mente como é empresa e seus princípios. Investigue-a, sabia sobre a sua cultura e se prepare para entrevista.Saiba muito o que você tem de bom para resolver os problemas que o cargo pretendido proporcionará.
E seja você: seja sincero, não tente inventar ou bancar quem não é. Se for contratado, bem, senão bola para frente.
49 – Trabalhando com web eu terei tempo para minhas coisas, minha família e meus estudos?
Isso é bem relativo. Tanto como freela quanto como funcionário depende de inúmeros fatores. A grande questão é você saber utilizar o seu tempo e não deixar, caso ocorra, que outras pessoas mandem nele.
Trabalhar com web com certeza dá mais possibilidades para isso, porque você pode trabalhar de casa, o pessoal que tua na área tende a ter a mente mais aberta, você pode atuar de forma independente ,etc.
Entretanto tudo depende de como você se porta como profissional, como ajustas as suas prioridades e como organiza o seu tempo.
50 – Web Designer precisa saber de SEO?
Considero um diferencial. Em projetos freelancer é importante que você tenha pelo menos noções de SEO onpage.
Muito do sucesso de alguns projetos se dá graças ao grande número de visitas. Para conseguir visitas você pode pagar, fazendo anúncios, ou conseguir tráfego de graça e ultra segmentado que é através do SEO. É algo mais demorado e trabalhoso, mas vale a pena.
Neste artigo apresentamos as melhores práticas de SEO para Web Designers e Desenvolvedores. Vale a pena conferir!
Considerações finais
Procurei responder da melhor forma possível as 50 questões. Espero que as respostas sirvam para te dar um impulso na busca de seus sonhos e objetivos. E aproveito para pedir que você compartilhe com seus amigos que também tenham dúvidas sobre o mundo do web design e desenvolvimento web.
Caso tenha alguma dúvida que não foi tratada até aqui, sinta-se a vontade para descrevê-la nos comentários. Não sabemos tudo, porém aquilo que sabemos estamos dispostos, sempre que possível, a compartilhar com você da melhor maneira.
E aí? Você tem alguma coisa a acrescentar? Concorda ou discorda de alguma resposta?
Forte Abraço.
Até mais.
The post Web Design e Desenvolvimento Web: 50 perguntas e respostas appeared first on Chief of Design.

Web Design e Desenvolvimento Web: 50 perguntas e respostas
Fonte: Chef of Design

Hostnet – Hospedagem de sites oficial do Chief of Design

27 de abril de 2017

Hostnet – Hospedagem de sites oficial do Chief of Design

Eae, tudo bele?
Hoje o artigo é muito especial, porque eu estou aqui para falar da parceria do blog com a empresa de hospedagem Hostnet e como você também pode ganhar 30% de desconto em qualquer plano da Hostnet.
Antes de falar de da empresa, eu quero compartilhar com você a minha história com a Hostnet, pois ela foi a primeira empresa de hospedagem de sites que contratei sozinho, como freelancer.
As primeiras versões do meu site portfólio ficaram alguns anos hospedados na Hostnet. Nunca tive problemas e sempre fui muito bem atendido. Além disso o meu primeiro freela onde faturei acima de 1mil reais, foi via Hostnet.
Antigamente, não sei se eles ainda tem, existia um espaço gratuito dentro do site da Hostnet, onde quem tinha hospedagem podia divulgar o seu trabalho de Web Designer, Desenvolvedor e etc.Então logo após colocar o meu site no ar eu preenchi os dados e divulguei o meu nome, marca e serviços nesse espaço de anúncios.
Depois de algum tempo recebi um e-mail de uma moça que tinha um blog em WordPress, mas que estava travada e não conseguia atualizá-lo. Conversamos via e-mail, depois marcamos uma reunião presencial e assim eu fechei o freela, na época foi a personalização do blog mais o tratamento de algumas imagens, em torno de 1300 reais. Depois desse trabalho ainda fiz mais alguns serviços de Design para a cliente onde tive ganhos acima de 2mil reais.
O tempo passou…Eu fui testar outros serviços… E agora no início de 2017 eu tive  oportunidade de  fazer um PodCast, com o Kauê Linden, fundador da Hostnet., e o Gustavo Guanabara. O pessoal da Hostnet gostou do nosso trabalho e desde então  fechamos uma parceria onde eu migrei TODOS os meus sites para a Hostnet, como por exemplo:

O Blog da Designimador – site sobre Design, Web Design, Design Gráfico, 3D e criatividade.
O site do eBook Solidário de HTML e CSS
O site do meu curso de Web Design. O Web Designer Pro (WDPRO)

Era um objetivo nosso mudar de hospedagem, pois estávamos tendo problemas com a anterior. Quando surgiu a oportunidade de migrar para a Hostnet logo me veio em mente todo o bom trabalho que eles prestaram no passado, então ficou fácil decidir a volta.
Agora, se você não conhece a Hostnet a seguir eu vou falar um pouco sobre ela e quais vantagens você pode ter se optar, assim como eu, em utilizar seus serviços.
Sobre a Hostnet
A Hostnet é uma empresa de hospedagem de sites brasileira e possuí datar centers aqui no Brasil.  Ela foi fundada em 2001 e  é uma empresa  que valoriza a criação, criatividade,  inovação e que acredita no uso de software livre (de código aberto). E 90% dos servidores dela rodam Linux.Todos os aplicativos oferecidos na hospedagem são de código aberto.
Só para você ter uma ideia que essa filosofia de apoio a comunidade e iniciativas  é verdade, a Hostnet apoia vários projetos de educação e tecnologia, como por exemplo o nosso blog Chief of Design e o Curso em vídeo do Professor Guanabara, além de apoiar outras iniciantes e contribuições em código.
Painel de controle próprio
A empresa conta com um painel de controle da hospedagem próprio e  diferenciado, onde os clientes podem administrar a sua hospedagem e todos os recursos, como e-mails marketing e outros aplicativos. E como o painel é feito pela própria Hostnet a melhoria é contínua, pois é baseada nas opiniões e sugestões de seus próprios clientes.
CDN  – Rede de distribuição de conteúdo
Caso você não saiba do que se trata, CDN é o acrônimo de Content Delivery Network, ou em português “Rede de Distribuição de Conteúdo”.
A ideia  dessa tecnologia , como o próprio nome já sugere,  é o de distribuir conteúdo digital através da internet. No caso, o conteúdo de um único site é distribuído por diversos data centers. Assim o seu site ganha muito em velocidade, desempenho e em segurança.
E se você tiver dúvidas, basta fazer uma pesquisa no Google para conferir as vantagens de usar uma CDN em seu site. Para você que tem um blog em WordPress, igual o Chief, por exemplo, isso é ainda mais essencial.
A Hostnet  tem uma parceria com a empresa CloudFlare, que é uma das maiores, quiçá  maior, empresas de CDN do mundo.  Além da  distribuição e proteção do conteúdo do servidor, caso precise, você também pode obter gratuitamente um certificado SSL (protocolo de segurança) em nome da CloudFlare.
O Suporte
Uma das coisas mais importantes em um serviço de hospedagem é o suporte. Não importa o seu nível de conhecimento, o tamanho do seu site ou da sua empresa: uma hora ou outra você precisará do suporte do serviço de hospedagem. Infelizmente a gente lembra apenas dessa parte quando o site “dá pau”.
O suporte da Hostnet é excelente e eu comprovei isso na prática, pois requisitei muito (enchei o saco dos caras) quando precisei migrar todos os meus sites.  E não é somente eu que acha isso, mas sim os clientes da Hostnet também. Tanto que ela ganhou o selo de qualidade RA1000, do site Reclame Aqui. O índice de aprovação da empresa no Reclame Aqui é considerado ótimo. E isso nenhuma outra empresa de hospedagem conseguiu fazer.

E todo esse suporte em português, feito por brasileiros. Muitas vezes ao adquirir uma hospedagem estrangeira, temos dificuldade na comunicação com o suporte ou até mesmo no fuso horário de atendimento, coisa que com a Hostnet você não terá problema.
A Hostnet  é uma das grandes empresas do segmento no Brasil. possuindo mais de 50 mil sites hospedados e mais de 100 mil domínios registrados. Atualmente está  expandindo os seus negócios, lançando um plano de Franquia para quem quer trabalhar com web .
Você pode saber mais sobre neste link: https://www.hostnet.com.br/seja-uma-franquia-hostnet/
Então se você está insatisfeito com a sua hospedagem atual  ou está  pesquisando para adquirir uma, sugiro que faça um teste com a Hostnet.
Aproveite agora o cupom CHIEFOFDESIGN2017 e ganhe  30% de desconto nos planos da Hostnet por 3 meses.
E caso não goste, não tem problema. Você tem 7 dias de garantia para receber o seu dinheiro, centavo por centavo, de volta.
Forte abraço.
Até mais.
The post Hostnet – Hospedagem de sites oficial do Chief of Design appeared first on Chief of Design.

Hostnet – Hospedagem de sites oficial do Chief of Design
Fonte: Chef of Design

Guia introdutório de CSS Grid Layout

7 de abril de 2017

Guia introdutório de CSS Grid Layout

Eae? Tudo bele?
Hoje trago um assunto que poderá mudar a forma de enxergarmos a construção de layouts web. Falo do CSS Grid Layout.
Para quem desenvolve a algum tempo basta olhar para o passado para enxergar alguns modelos que não foram criados de forma específica para esta função, como por exemplo, o uso de tabelas.
Já o CSS Grid Layout fornece uma nova forma mais interessante e natural de fazer layouts avançados facilmente sem apelar para modelos não adequados.
Neste guia vou apresentar esta nova forma de criar layouts em CSS. E para você ter seu primeiro contato com este recurso trarei alguns exemplos de aplicações. Ok?
Então, sigam-me os bons!
O que é CSS Grid Layout?
CSS Grid Layout é um sistema bidimensional de layout baseado em grid que permite lidar com colunas e linhas , que segue a especificação da W3C. E é também considerado o primeiro módulo CSS criado especificamente para resolver os problemas de layout que muitos de nós já lidamos no passado.
E o que tínhamos antes?
Historicamente começamos o processo de construção de layouts com tabelas e usamos recursos CSS como floats, posicionamentos, inline-blocks, entre outros. Porém na essência estes métodos eram considerados hacks. Mais tarde surgiu o Flexbox, e é ele que mais se aproxima do CSS Grid Layout.
Layout Flexbox versus CSS Grid Layout
O Flexbox destina-se a layouts unidimensionais mais simples que possam ser dispostos em linha reta. É mais apropriado para os componentes de um aplicativo e layouts em pequena escala.
Já o CSS Grid Layout destina-se a layouts bidimensionais mais complexos. É adequado para organizar a estrutura de layout de elementos de nível mais alto, como cabeçalhos, rodapés, sidebar e seções.
Portanto a grande diferença então entre os dois é que Flexbox é essencialmente para a colocação de itens em uma única dimensão (em uma linha ou uma coluna). E CSS Grid Layout é para layouts de itens em duas dimensões (linhas e colunas).
Bom, agora que você agora já sabe que este sistema pode ser a solução para problemas corriqueiros na construção de layouts sem uso de hacks, uma questão que devemos nos preocupar é o suporte aos navegadores.
Suporte a navegadores
Conforme as atualizações forem surgindo vou deixando este artigo em ordem, mas no atual momento (abril de 2017) a maioria dos navegadores modernos suportam o CSS Grid Layout conforme podemos ver no suporte Can I Use. Entre os mais famosos o IE 11 e o Edge tem suporte parcial utilizando-se o prefixo –ms.

Terminologia
Agora vamos conhecer os termos envolvidos para este módulo antes de passarmos para os exemplos práticos. Isso será necessário para entendermos conceitualmente seus significados.
Grid Container
É o pai direto de todos os itens do grid e elemento em que display: grid é aplicado. Veja a seguir que a class “container” será responsável para atribuir o valor grid ao elemento pai.
HTML:<div class=”container”>
<div class=”item”></div>
<div class=”item”></div>
<div class=”item”></div>
<div class=”item”></div>
<div class=”item”></div>
<div class=”item”></div>
</div>
CSS:.container {
display: grid;
}
Visualmente é toda área que contém as linhas e colunas, como você pode ver a seguir:

Grid Line
Corresponde as linhas divisórias que compõem a estrutura do grid. Temos dois tipos:
As linhas verticais (que formam as colunas do grid) e as horizontais (que formam as linhas do grid).
Na imagem a seguir identificamos as linhas verticais indicadas pelas setas vermelhas e horizontais pelas setas laranjas.

Grid Item ou Grid Cell
Refere-se aos elementos descendentes diretos do contêiner onde o grid é aplicado. É a menor unidade do grid. Veja no exemplo a seguir:

Podemos notar que o Grid Item está entre as Grid Lines de linha 1 e 2 e as Grid Lines de coluna 2 e 3.
Como já frisei somente um elemento filho direto pode ser um Grid Item. No exemplo a seguir o elemento que recebe a class “subitem” não poder ser um Grid Item:<div class=”container”>
<div class=”item”></div>
<div class=”item”>
<p class=”sub-item”></p>
</div>
<div class=”item”></div>
</div>
Grid Tracks
É o espaço horizontal ou vertical entre duas Grid Lines.

Grid Areas
É o espaço total que contornado por quatro linhas de Grid e pode ser composto por qualquer quantidade possível de Grid Cells/Grid Items.

Noções básicas
Para trabalhar com CSS Grid Layout se aplica CSS tanto para um elemento pai que se torna o contêiner quanto para os elementos filhos que se tornam itens Grid.
No contêiner você define a grid com display: grid e também os tamanhos de coluna e linha com grid-template-columns e grid-template-rows, em seguida, coloca seus elementos filho no grid com grid-column e grid-row.
No contêiner também é possível usar declarações com display: inline-grid, que gera um grid com comportamento de linha, e display: subgrid, que é usado quando seu grid está aninhado dentro de outro grid. Logicamente que display:block gerará um grid com comportamento de bloco.
Exemplos
A seguir vou disponibilizar alguns exemplos usando o JSFiddle. Para melhor entendimento você pode navegar entre as aba result, HTML e CSS para ver o aspecto visual dos Grids e a codificação usada.
Exemplo 1:

Você também pode ver esta demonstração ampliada clicando aqui »
Neste exemplo setamos a propriedade display para o valor grid para a div com a classe “container”. Em seguida dividimos o Grid em 3 colunas e 2 linhas resultando em 6 Grid Items. Repare que a largura das colunas tem tamanho igual e isso acontece também com a altura das linhas. Esse resultado foi obtido porque usamos o valor 1fr para cada coluna e para cada linha. 1fr é uma fração do espaço livre dentro do grid nas propriedades grid-template-columns e grid-template-rows. No exemplo, como estamos usando três colunas a declaração CSS pega o valor total disponível da largura que é 100% e divide por três partes iguais. O mesmo ele faz com a altura total resultando em 1 fr de 50% para cada linha.
Além do valor 1fr você pode definir largura e altura (Grid Tracks) com pixels, porcentagem, viewport hight ou viewport width.
Exemplo 2:
No exemplo anterior conseguimos posicionar de forma simples cada Grid Items. Entretanto também é possível posicioná-los manipulando as Grid Lines com as propriedades grid-column-start, grid-column-end, grid-row-start e grid-row-end. Basta você saber atribuir corretamente os números de linha inicial e final a essas propriedades. Além destes as versões shorthand grid-column e grid-row também executam o posicionamento.
Olhando para o exemplo anterior, é assim que o navegador posiciona os elementos por padrão para nós:.item-1 {grid-column-start: 1;
grid-column-end: 2;
grid-row: 1;
background-color:#fd7701
}
.item-2 {grid-column-start: 2;
grid-column-end: 3;
grid-row: 1;
background-color:#fe861d
}
.item-3 {grid-column-start: 3;
grid-column-end: 4;
grid-row: 1;
background-color:#ff9538
}
.item-4 {grid-column-start: 1;
grid-column-end: 2;
grid-row: 2;
background-color:#fea354
}
.item-5 {grid-column-start: 2;
grid-column-end: 3;
grid-row: 2;
background-color:#feb474
}
.item-6 {grid-column-start: 3;
grid-column-end: 4;
grid-row: 2;
background-color:#ffcca0
}
Agora vamos utilizar essas declarações alterando o código do exemplo anterior no JSFiddle.

Você também pode ver esta demonstração ampliada clicando aqui »
Logicamente que visualmente não se mudou nada. Entretanto vemos a alteração na aba de CSS. E conhecer essa novas propriedades vai ser útil para o próximo exemplo.
Exemplo 3:
Uma das grandes novidades do CSS Grid Layout é que não importa a ordem que vem os elementos HTML do seu grid, você pode altera-las como bem desejar. É o que vamos fazer agora mudando as Grid Lines do exemplo anterior.

Você também pode ver esta demonstração ampliada clicando aqui »
Veja o poder desse módulo em suas mãos. Com apenas algumas mudanças de linhas em seus CSS você pode fazer uma alteração rapidamente em seu layout.
O que feito neste exemplo? Veja explicação comparando com o exemplo anterior:

Invertermos Os Grid Items 1 e 6 em relação a linha vertical e posicionamo-los na coluna central;
O Grid Item 2 foi para coluna 3, linha 1 através de grid-column-start: 3, grid-column-end: 4 e grid-row: 1;
O Grid Item 3 foi para coluna 1, linha 1 através de grid-column-start: 1, grid-column-end: 2 e grid-row: 1;
Já o Grid Item 4 foi para coluna 3, linha 2 através de grid-column-start: 3, grid-column-end: 4 e grid-row: 2
E o Grid Item 5 foi para coluna 1, linha 2 através de grid-column-start: 1, grid-column-end: 2 e grid-row: 2.

Exemplo 4:
Este exemplo demonstrará o posicionamento de Grid Items através de nomes de áreas, as chamadas Grid Areas. Podemos nomear uma área de grade usando a propriedade grid-template-areas, então podemos colocar um item de grid em uma área específica usando a propriedade grid-area. Veja no exemplo a seguir:

Você também pode ver esta demonstração ampliada clicando aqui »
Exemplo 5:
Para encerrar os exemplos vamos mostrar um um pouco mais complexo em relação aos anteriores com inserção também de outros elementos HTML com listas e parágrafos.

Você também pode ver esta demonstração ampliada clicando aqui »
Como você pode ver no bloco anterior construímos um esboço de uma página com topo, sidebar com navegação, área de conteúdo e rodapé. Foram usados elementos do HTML5 para dar semântica aos blocos e como no exemplo anterior foram usados Grid Areas.
Em relação aos exemplos anteriores temos duas novidades:
Uma é o uso de áreas de respiro (gaps) entre os Grid Items através das propriedades grid-column-gap e grid-row-gap e o grande destaque neste exemplo que o uso de um grid dentro de outro.
Note que a grande área cinza escura corresponde ao grid principal. Olhando o CSS vemos que a class “container” recebe “display: grid” que é responsável por atribuir características de grid ao bloco.  Veja também que existem blocos de cor azul que estão inseridos dentro de um bloco de cor cinza mais claro. Este bloco também está recebendo “display: grid” e está aninhado no bloco de class “container”. Identificamos este grid interno no CSS como a class “wrapper”.
Portanto uma das possibilidades do CSS Grid Layout é trabalhar com grids aninhados. E isso com certeza é mão na roda!
Conclusão
Como podemos ver o CSS Grid Layout pode ser uma revolução no modo de desenvolver layouts comparando-se com outros métodos. E você pode fazer seus primeiros testes nos navegadores que já dão suporte a esta tecnologia. O objetivo deste artigo foi dar uma pincelada sobre aspectos introdutórios deste sistema. Para uma pesquisa mais avançada você pode recorrer a documentação W3C.
Em breve notaremos o crescimento deste módulo. Sugiro que observe a evolução de uso nos grandes portais, templates de grandes CMSs como o WordPress, Drupal e Joomla e nas discussões na comunidade web em geral.
E você? O que achou do CSS Grid Layout? Já utiliza em seus projetos? Deixe sua opinião e aproveite e compartilhe sobre esse assunto com seus amigos!
Forte abraço.
Até mais.
Referências

A Complete Guide to Grid


http://codepen.io/simoneas02/post/grid-layout

An Introduction to the CSS Grid Layout Module


http://gridbyexample.com/examples/
https://drafts.csswg.org/css-grid/
http://codepen.io/simoneas02/post/grid-layout#sim-mas-devo-usar-flexbox-ou-grid-layout-3
The post Guia introdutório de CSS Grid Layout appeared first on Chief of Design.

Guia introdutório de CSS Grid Layout
Fonte: Chef of Design

Utilidade Pública: 54 sites para baixar vetores, imagens, ícones e mockups de graça

22 de dezembro de 2016

Utilidade Pública: 54 sites para baixar vetores, imagens, ícones e mockups de graça

Eae, tudo bele? Hoje trago para você uma coletânea de link para você baixar vetores, imagens, mockups e ferramentas em geral para agilizar trabalho e facilitar a sua vida na hora da criação. Existem muitas coisas boas na internet, gratuitas ou pagas, que com certeza podem nos ajudar no trabalho do dia a dia. Design […]O post Utilidade Pública: 54 sites para baixar vetores, imagens, ícones e mockups de graça apareceu primeiro em Chief of Design.

Utilidade Pública: 54 sites para baixar vetores, imagens, ícones e mockups de graça
Fonte: Chef of Design

Weekweb: Semana de Design orientado a Web – Evento Gratuito e Online

28 de novembro de 2016

Weekweb: Semana de Design orientado a Web – Evento Gratuito e Online

Eae, tudo bele? Trago uma novidade para você amigo Galucho. Está rolando um evento que você não pode deixar de participar. Principalmente se você gosta, trabalha com Web Design ou pretende trabalhar nesta área. Falo da Week Web, Semana de Design orientado a web. A Week Web é um evento de vídeos aulas online e […]O post Weekweb: Semana de Design orientado a Web – Evento Gratuito e Online apareceu primeiro em Chief of Design.

Weekweb: Semana de Design orientado a Web – Evento Gratuito e Online
Fonte: Chef of Design

Tipografia para web – Parte 01

28 de outubro de 2016

Tipografia para web – Parte 01

Eae, td bele? Você sabia que há tempos passados existia uma limitação que restringia o trabalho com tipografia a um pequeno número de fontes para uso em um site? Essas fontes eram aquelas geralmente já instaladas em nossos computadores e caso um site exigisse uma fonte não instalada o navegador não processava a solicitação. Hoje (graças […]O post Tipografia para web – Parte 01 apareceu primeiro em Chief of Design.

Tipografia para web – Parte 01
Fonte: Chef of Design

11 SUPER Dicas para Designers iniciantes (ou não)

7 de outubro de 2016

11 SUPER Dicas para Designers iniciantes (ou não)

Eae, tudo bele? Recentemente recebi um e-mail de um Galucho que estava tentando entrar na área de web design, mas estava um tanto abatido com algumas pedras que encontrou no caminho. Quando li o e-mail lembrei de algumas coisas que passei durante a minha jornada. Coisas que com certeza se estivesse começando agora eu teria […]O post 11 SUPER Dicas para Designers iniciantes (ou não) apareceu primeiro em Chief of Design.

11 SUPER Dicas para Designers iniciantes (ou não)
Fonte: Chef of Design

123