Contente
- Benefícios de projetar com código
- Dados primeiro
- Produtos móveis de graça
- Encontrar uma linguagem comum
- Aprenda mais rápido
- Iteração rápida
- Tempo mais rápido para o lançamento
- Por que HTML5?
- O atributo mágico de dados
- CSS3 - é o novo Photoshop
- Sass + Compass: magicamente delicioso
- jQuery: oh, sim, você pode
- Frameworks
- Pensamentos finais
Este artigo apareceu pela primeira vez na edição 235 da revista .net - a revista mais vendida do mundo para web designers e desenvolvedores.
Nunca fui um grande fã de fazer mais trabalho do que o necessário. Eu tendo a avaliar métodos e ferramentas com base em sua capacidade de me tornar, ou à minha equipe, mais eficaz. Com que rapidez eles nos levam a um produto funcional? Eles são eficazes na comunicação? Eles ficam fora do nosso caminho?
Ao longo dos anos, ajustei meu processo de design e ferramentas. Eu imagino que vou continuar fazendo isso. Essa é a natureza do design para tecnologia e para a web. Esta indústria está em constante evolução; nosso processo e ferramentas também precisam evoluir.
HTML5 e CSS3 tornam mais fácil a transição do processo de design upstream - do Photoshop e mais para um design vivo e vibrante. Ferramentas como Foundation, Bootstrap e jQuery tornam mais acessível a movimentação do seu processo de design para o código.
Benefícios de projetar com código
Em primeiro lugar, não estou defendendo a retirada do Photoshop ou de qualquer outro editor de design visual do seu fluxo de trabalho. Em vez disso, vou me concentrar nos benefícios de mover esse design para o código mais cedo ou mais tarde.
Dados primeiro
O que sempre gostei em projetar com HTML é que isso incentiva o pensamento a partir de uma perspectiva de dados em primeiro lugar. Em contraste, usando programas de desenho como Illustrator, OmniGraffle ou Balsamiq, você começa com uma caixa e a preenche com dados.
Em HTML, você constrói o DOM (modelo de objeto de documento), mais ou menos como construir um índice analítico. É um retorno ao verdadeiro design de informação com hierarquias significativas. O HTML5 dá um passo adiante com a adição de novos elementos semânticos: artigo, seção, cabeçalho, à parte, rodapé e assim por diante. Essa abordagem de dados em primeiro lugar combina muito bem com designs responsivos em primeiro lugar para dispositivos móveis.
Produtos móveis de graça
Se você está lendo isto, provavelmente está projetando para celular. E é provável que você tenha que projetar um ou dois formulários. Com HTML5, você está com sorte. Antes do HTML5, seus tipos de entrada eram basicamente um campo de texto ou de senha. HTML5 introduziu vários tipos de entrada adicionais, incluindo:
input type = "email"> input type = "tel"> input type = "url"> input type = "date"> input type = "date-time">
O que é realmente incrível sobre esses tipos de entrada adicionais e exclusivos é que os navegadores móveis no iOS e Android os reconhecem e trocam automaticamente um teclado contextual - sem a necessidade de plug-ins ou hacks especiais do jQuery. Ah, e se o seu navegador não sabe o que é tipo de entrada = "email"> é, então o padrão é apenas uma entrada de texto.
Encontrar uma linguagem comum
“É incrível como nossos designers e desenvolvedores podem trabalhar na mesma linguagem” - John Drago, desenvolvedor de aplicativos da Inflection.
Veja se isso soa familiar. Estou em uma sala de conferências com meia dúzia de desenvolvedores de aplicativos do lado do servidor que podem codificar círculos ao meu redor em Ruby, Python, Java ou .NET. Eu sou o único designer. Algumas de minhas sugestões são inicialmente descartadas por serem muito complicadas de implementar. Eu ando até o quadro branco e começo a escrever algum HTML e CSS no quadro para saber como o design pode ser implementado. De repente, o tom da conversa muda e um dos desenvolvedores relutantemente diz: “Bem, sim - se fizermos assim, pode funcionar”.
Mover mais do meu processo de design para o código melhorou as conversas com os desenvolvedores. Há uma camada adicional de respeito conquistada por saber como criar seus projetos em código. Você não precisa ser um especialista para ganhar esse respeito. Embora minhas habilidades em HTML e CSS sejam sólidas como uma rocha, minhas habilidades em JavaScript são, na melhor das hipóteses, medíocres. E não tenho vergonha de admitir isso. Ainda assim, ao trabalhar com front-end, ou desenvolvedores do lado do servidor, o fato de podermos falar em uma linguagem comum, ou nos encontrarmos no meio do caminho, é uma grande vantagem.
Aprenda mais rápido
Embora wireframes e compostos visuais possam ajudar no planejamento, esses artefatos estáticos são teóricos. Quantas vezes você tentou explicar uma interação para alguém, apenas para ouvir a resposta: "Acho que vou ter que ver." Quanto mais cedo você chegar a um protótipo, algo com o qual as pessoas possam interagir, mais cedo você poderá experimentar o design e ver se as ideias funcionam.
Iteração rápida
Quando foi a última vez que um design final enviado para produção correspondeu exatamente à sua composição do Photoshop? Quase nunca. Com o design de produto digital, as mudanças acontecem constantemente. Além disso, mudanças como aumentar o tamanho dos cabeçalhos de 22pt para 24pt em algumas dezenas de telas podem levar horas no Photoshop. Objetos inteligentes fornecem algum nível de design orientado a objetos no Photoshop. Infelizmente, a maioria dos designers visuais que conheço não utiliza objetos inteligentes o suficiente. Com o CSS, por encorajar uma abordagem mais sistemática do design, as mudanças tipográficas levam minutos em vez de horas.
Que tal alterar os gradientes lineares em todos os seus botões? Ou do tamanho de uma borda? Que tal mudar de cantos quadrados para arredondados de 2 px? No Photoshop, isso pode levar horas e você ainda precisa codificá-lo. A capacidade de projetar em código ajuda a evitar a viagem de volta ao Photoshop para iterar no design visual. Quando você move essas alterações para o código, usando CSS3 e Sass (que abordarei mais tarde neste artigo), elas podem acontecer em tempo real e levar apenas alguns minutos.
Tempo mais rápido para o lançamento
Com o passar dos anos, conforme eu transicionava mais do meu fluxo de trabalho de design para o código, experimentei uma melhoria real - uma redução de cerca de 20 a 30 por cento no tempo de lançamento no mercado. Quanto mais faço isso, menos tempo gasto duplicando esforços. Estou gastando menos ciclos indo para o Photoshop ou Fireworks e, em seguida, repetindo o trabalho em código.
Em algum ponto, o design precisa interagir com algum tipo de back-end, seja um CMS, aplicativo Rails ou qualquer outra coisa. Como a maior parte do meu trabalho de design é em código, a integração acontece mais cedo ou mais tarde. Há alguns anos, um de meus clientes, PointRoll, passou do protótipo à produção em cinco dias.
Por que HTML5?
O HTML5 é mais fácil do que as versões anteriores do HTML. Veja, por exemplo, a declaração do tipo de documento. Nas versões anteriores do HTML, o DOCTYPE parecia algo assim:
! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.1 // EN" "http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd">
E havia seis versões diferentes. Felizmente, o HTML5 DOCTYPE se parece com isso:
! DOCTYPE HTML>
A sério. É isso. Chocantemente simples.
Ao criar uma página HTML padrão, existem vários elementos comuns, como cabeçalho, área de conteúdo principal, barra lateral e rodapé. Tenho certeza que você já viu algo assim antes:
div id = "header> div id =" nav "> / div> / div> div id =" main "> div id =" sidebar "> / div> / div> div id =" footer "> / div>
Nada fora do comum aqui. Mas, uma vez preenchido com o conteúdo, esse modelo se transforma em sopa div. Em contraste, com os novos elementos semânticos do HTML5, você obtém algo muito mais simples e fácil de digitalizar, como este:
cabeçalho> nav> / nav> / header> artigo> à parte> / à parte> / artigo> rodapé> / rodapé>
Olhe para isso. Algo que faça sentido.
O atributo mágico de dados
HTML5 vem com outro gancho incrível que lhe dá a capacidade de criar seu próprio significado semântico: o dados-. Anteriormente, se você quisesse atribuir algo significativo a um elemento DOM, estava limitado a IDs, classes e funções.
Infelizmente, os IDs devem ser exclusivos. As aulas são universais (yippee!), Mas usá-las pode rapidamente se tornar uma bagunça. As funções são um ativo subutilizado que fornece um significado significativo para ARIA. Recentemente, tenho usado dados para uma plataforma de análise de rastreamento de eventos que estamos desenvolvendo na Inflection.Somos grandes fãs de testar nossos projetos. Ao trabalhar em aplicativos ou páginas com grande interatividade, gostaríamos de ter uma visão mais granular do envolvimento do cliente na página.
Introduzir o dados-. Com ele, você pode atribuir, passar adiante e se conectar a um modelo de significado "defina seu próprio". Então, por exemplo, você pode fazer isso:
input type = "botão" data-id = "facebook" dataregion = "main" data-event = "registrar"> input type = "botão" data-id = "twitter" dataregion = "main" data-event = "registrar "> input type =" button "data-id =" linkedin "dataregion =" main "data-event =" registrar ">
Podemos anexar um ouvinte com JavaScript à página e sempre que um cliente passa o mouse ou clica neste botão, podemos rastrear essa atividade. Em vez de apenas rastrear que alguém se registrou via OAuth com o Twitter, podemos ver que ele pairou sobre o Facebook, o Twitter, o LinkedIn e finalmente decidiu escolher o Twitter como modelo OAuth.
Imagine estender isso para um site como o Pinterest ou o novo design do MySpace, onde os clientes arrastam e soltam blocos para reordená-los com base no interesse. Ou possivelmente escondendo blocos nos quais eles não estão interessados. dados- atributo permite anexar ou atribuir uma camada adicional de significado semântico para coisas que você pode definir. Para sites e aplicativos que dependem fortemente do Ajax, ele abre oportunidades ilimitadas.
CSS3 - é o novo Photoshop
O CSS3 trouxe um nível totalmente novo de aparência e comportamento de design que costumava exigir imagens de fundo, fatias e a famosa técnica de "portas deslizantes". Felizmente, isso tudo é coisa do passado.
Vamos dar uma olhada em como fazer um botão extravagante com um gradiente linear, cantos arredondados, sombra de texto que dá um belo efeito de pressionamento de letra e um brilho ao pairar. Aprender essas técnicas irá percorrer um longo caminho. Cada um deles pode ser usado de forma independente ou em várias combinações para obter qualquer uma das tendências visuais atuais da web.
Primeiro, vamos fazer alguns ajustes ao padrão botão> e tipo de entrada = "enviar"> elementos Supondo que você use uma das redefinições CSS padrão, vamos apenas adicionar um pouco de dimensionamento e espaço para respirar.
/ * Botões de botões, de quem os botões. ============================================= * * / botão, input [type = "enviar"] {height: 2.7em; preenchimento: .4em .7em; altura da linha: 1,9; }
Protip: Botões e entradas que são enviados podem ser difíceis de reestilizar. Descobri que, ajustando a altura da linha para 1,6 ou maior, você pode evitar o hack de precisar de um div extra ou extensão dentro do botão> marcação.
Agora que "corrigimos" nosso problema com o botão, podemos criar um .btn classe para nos dar um bom botão limpo com cantos arredondados, um gradiente linear, contorno e aquele aspecto de impressão tipográfica.
.btn {display: bloco embutido; borda: 1px sólido # d4d4cc; -moz-border-radius: 4px; -webkit-border-radius: 4px; raio da borda: 4px; preenchimento: .4em .7em; plano de fundo: # edeff2; plano de fundo: -webkit-gradiente (linear, 0% 0%, 0% 100%, de (#fefefe), interrupção de cor (0,55, # edeff2), para (# e4e6e9)); plano de fundo: -moz-linear-gradiente (centro superior, #fefefe, # edeff2 55%, # e4e6e9); -moz-box-shadow: rgba (160,172,187, .7) 0 0 .2em 0; -webkit-box-shadow: rgba (160,172,187, .7) 0 0 .2em 0; sombra da caixa: rgba (160,172,187, .7) 0 0 .2em 0; cor: # 6c7786; tamanho da fonte: 1.1em; sombra do texto: #fefefe 1px 0 1px; altura da linha: 1,375em; cursor: ponteiro; }
E então um bom efeito de foco com um brilho sutil usando o Sombra da caixa método:
.btn: hover, .btn: focus {-moz-box-shadow: # 129ceb 0px 0px 2px; -webkit-box-shadow: # 129ceb 0 0 2px; sombra da caixa: # 129ceb 0 0 2px; plano de fundo: # e6e9eb; fundo: gradiente -webkit (linear, 0% 0%, 0% 100%, de (# f7f7f7), interrupção de cor (0,55, # f6f6f7), para (# e6e9eb)); plano de fundo: -moz-lineargradient (centro superior, # f7f7f7, # f6f6f7 55%, # e6e9eb); cor: # 45484b; sombra do texto: rgb (255,255,255) 1px 1px 0; border-color: # c9c9c0; }
Agora, eu não sou um grande fã de escrever o código de gradiente linear. É longo e confuso. Como você pode ver, incluí apenas a versão para -moz, -webkite o modelo padrão. Se quiser incluir as versões -o e -ms, você precisará dobrar o código.
Existem duas outras opções. Um é um gerador CSS3; existem vários disponíveis na web, incluindo ColorZilla. Mas se você quiser melhorar um pouco o seu jogo, considere mergulhar no Sass: combinado com o Compass, é uma dádiva de Deus.
Sass + Compass: magicamente delicioso
Você pode parar de esperar pela edição de unicórnio CSS4. Está aqui e se chama Sass + Compass. Sass significa Syntactically Awesome Stylesheets: você herda todos os benefícios tradicionais do CSS3 com as alegrias adicionais de variáveis, mixins, extensores e outras guloseimas.
Recentemente, refatorou um arquivo CSS de 5.000 linhas que tinha mais de 30 variações no mesmo tom de azul. Com Sass, substituí todas as variações por este código:
cor: $ blue;
Definindo $ azul no meu _variables.scss arquivo, posso criar uma cor padrão à qual todos os arquivos CSS ou SCSS podem fazer referência. Qualquer pessoa que escreva CSS pode usar $ azul e não precisa se preocupar em usar um conta-gotas, em encontrar um código hexadecimal, ou cores RGB, RGBA ou HSL.
Lembra daquele código de gradiente linear? Em vez de escrever várias linhas de código, que tal isto:
@include background (gradiente linear (# b1cfdc, # 7a9cac));
Deixe o Sass e o Compass fazerem o trabalho pesado e gerar a sintaxe correta para você: pronto. Digamos que você queira uma versão mais escura ou mais clara de uma cor. Você pode mover o conta-gotas no Photoshop ou apenas usar os comandos clarear / escurecer no Sass:
@include fundo (gradiente linear (escurecer ($ litegray, 2%), escurecer ($ off-white, 5%)));
Isso criará um gradiente linear com 2% escurecido $ lite-grey e 5% escurecido off white. Voil! Você nem mesmo precisa dos códigos HEX ou RGB.
jQuery: oh, sim, você pode
Eu tenho uma confissão a fazer. JavaScript costumava me intimidar. Então eu encontrei o jQuery. Não pretendo ser um guru do JavaScript, mas estou bastante confiante de que posso realizar praticamente qualquer tipo de transição ou função de que preciso para usar o jQuery.
Considere, por exemplo, a capacidade de exibir uma entrada de número de telefone secundário na tela clicando em um link Adicionar novo número. Usando jQuery, você simplesmente escreve isto:
// - Revelação progressiva - // $ (’. Novo-número’). Click (function () {$ (’. Alt-número’). FadeIn (’rápido’);});
Procurando algo mais avançado? Provavelmente existe um plug-in para ele. Os comportamentos básicos são fáceis e os complexos são acessíveis com jQuery.
Frameworks
Duas das estruturas mais robustas hoje são Foundation e Bootstrap. Agora, antes de descartar os frameworks CSS, deixe-me perguntar uma coisa. Você usa jQuery? Ruby on Rails? Django? Todas as estruturas.
Assim como jQuery e RoR, Foundation e Bootstrap nasceram do reconhecimento de que há um bom número de coisas que fazemos continuamente (como redefinições, tipografia, grades, formulários, botões, nav e listas). Foundation e Bootstrap oferecem suporte para designs responsivos por meio do uso de classes auxiliares. Ambos estão bem documentados e foram testados, portanto, você pode usá-los com confiança.
Uma diferença importante entre os dois: o Bootstrap é baseado no sistema LESS para pré-processamento CSS, enquanto o Foundation é baseado no Sass. Eu prefiro Sass a LESS devido às suas capacidades adicionais, mas tanto Sass quanto LESS esmagam CSS tradicional em pedaços.
Um último pensamento sobre frameworks. Para aqueles que não querem herdar o inchaço extra da estrutura de outra pessoa, considere escolher uma existente e reduzi-la ao básico, ou escolher alguns para criar o seu próprio. De qualquer forma, não há realmente nenhuma razão para começar do zero sempre.
Pensamentos finais
Deseja maior controle sobre como seu projeto finalmente ficará? Mova mais processos upstream para o código. O HTML5 finalmente traz algum sentido para o DOM. Boa viagem para o absurdo DOCTYPEse divitis. CSS3 é o novo Photoshop: gradientes lineares, borderradius e sombras de caixa FTW! E com ferramentas como Bootstrap, Foundation, Sass e jQuery, mover o design upstream para o código nunca foi tão fácil.
Descubra 55 exemplos incríveis de HTML5 no Creative Bloq.
