35 Designers: como é que vamos encontrá-los?

Cinco perguntas

• Um aspecto do design que você dá a maior prioridade.
• Uma técnica de CSS mais útil que você usa com muita freqüência.
• Uma fonte que você usar em seus projetos com muita freqüência.
• Um projeto-relacionados livro que recomendo a leitura.
• Uma revista de design que você lê diariamente / semanalmente (online ou offline).

Um aspecto do design que você dá a maior prioridade.

1,1 Comunicação

• Comunicação clara. [ Cameron Adams , Austrália]
• A habilidade para a comunicação. Este é também o que eu mais admiro no design. [ Filipe Varela , Portugal]
• Projeto é toda sobre encontrar a solução certa para um problema específico (geralmente um problema de comunicação quando se trata de sites). É por isso que eu sinto que o aspecto mais importante seria a compreensão do usuário e centrar tudo em torno dele / dela. [ Lucian Slatineanu , EUA / Romênia]
• Estágios iniciais de design: o cliente reunião para estabelecer as principais audiências e visa, concepção de rotulagem geral do site e da arquitetura que satisfaça os objectivos destas audiências, testes de layouts iniciais para determinar se eles são com sucesso a realização dos objectivos-chave. Se estes aspectos não foram pensados ​​cuidadosamente e testado, em seguida, o site global poderia falhar - independentemente de quão elegante ou a prática do design.
  [ Russ Weakley , Austrália]

1.2. Usabilidade

• Eu acho que usabilidade de design tem que ser lá em cima. Eu gosto de pensar sobre como as pessoas vão navegar no site, mesmo antes de iniciar qualquer outros elementos de design. Ao receber a navegação clara em minha mente, o projeto começa a se encaixar em torno dele. [ Andy Peatling , Canadá]
• Usabilidade. Há muito espaço para a criatividade, mas eu quero meus sites web para ser funcional em primeiro lugar. Eu vou compromisso de design gráfico para a usabilidade, mas tente não comprometer a usabilidade de design gráfico. [ Patrick Griffiths , UK]
• Usabilidade, sempre! Tudo o que design deve ser fácil de usar. [ Paul Boag , UK]
• Eu acho que eu aplico o mais ênfase na usabilidade em meus projetos. Além de ser esteticamente agradável, um projeto deve ser uma alegria para usar. Não é bom ter a interface de utilizador mais sexy que existe, se o usuário não consegue descobrir como usá-lo. É praticamente inútil. O verdadeiro desafio de design, eu sinto, é procurar fazer algo visualmente bonito - mas combinar isso com um monte de usabilidade. Ninguém diz que algo que é acessível não pode ser esteticamente agradável - na minha opinião, existem diferentes níveis de beleza, e para fazer um trabalho de design, o utilitário tem de ser um dos principais deles. [ Oliver Beattie , UK]
• Usabilidade e funcionalidade é sempre a primeira prioridade, mas o passado que não há limites. Graças ao css e javascript, você pode fazer mais nada aconteça na web agora. [ Nick Francis , EUA]
• Utilidade. [ Mike Davidson , EUA]

1.3. Tipografia

• Projetando em uma grade. Isso torna as coisas muito mais ordenada visualmente, para não falar que permite que o código seja mais modular. Ultimamente, tenho tido clientes que estão a fazer o salto para layouts que são adaptados para os 1024 pixels de resolução × 768. Como tal, eu encontrei-me gravitar para 960 pixels como a largura ideal para trabalhar. [ Nathan Smith , dos EUA]
• Design tipográfico. [ Mark Boulton , UK]
• Simetria e espaçamento igual. [ Kyle Neath , EUA]
• Boa tipografia. [ Mateus Buchanan , Nova Zelândia]
• Hierarquia! Designers muitos ignorá-la em parte ou na íntegra. [ Cameron Moll , EUA]

1.4. Navegação

• Legibilidade e indicação clara do que é a navegação eo que é conteúdo. Não há nada pior do que uma página muito bonita que me deixa pensando que eu sou eo que eu posso fazer. [ Christian Heilmann , UK]
• De navegação. Não importa o quanto o site se parece, ou o que você Javascript truques aderência em diante, se a navegação não faz sentido o site simplesmente não é user-friendly. [ Ryan Masuga , EUA]
• Eu acho que a navegação de qualquer site é o elemento mais importante. Eu tento ter certeza de que o conteúdo do site é organizado em seções lógicas e que a navegação, em seguida, reflete isso. [ Dan Lindop , UK]

1.5. Detalhes

• Detalhes. Pequenas coisas, como espaçamento e botões têm um enorme impacto sobre a concepção global. [ R. Marie Cox , EUA]
• Tento dar maior prioridade aos pequenos detalhes. Você sabe, as coisas que a maioria das pessoas ignoram. Isso significa perceber a 1px extra de preenchimento, a cor do que o gradiente, ou o tamanho do texto. [ Keegan Jones , dos EUA]
• Atenção aos detalhes. [ Wolfgang Bartelme , Áustria]
• Nunca subestime o poder de uma detalhada fio-frame. Aproveite o tempo no início para planejar, ele vai pagar tudo imensamente durante o projeto / desenvolvimento. [ Matt Downey , EUA]
• Eu tento ter uma perspectiva equilibrada sobre a importância de elementos de design individual. No entanto, uma área muitas vezes eu me pego é obcecado com seleção de cores. [ Rob Goodlatte , EUA]

1.6. Padrões de acessibilidade,

• Padrões e acessibilidade. É a principal consideração que tenho com qualquer coisa que eu construir ou design, por vezes em detrimento do próprio design. Projetos acessível e baseada em padrões não significa automaticamente que irão ser feio, mas eu sei que eu sou um programador mais forte do que eu sou um designer, por isso tendem a achar que se eu focar esse aspecto, o projeto sofre de 'negligência' se que faz sentido. [ Ian Lloyd , Reino Unido]
• De acessibilidade. [ Roger Johansson , da Suécia]

1.7. Conteúdo

• Conteúdo - o conteúdo da página vai fazer ou quebrar um site. [ Derek Punsalan , EUA]

1.8. Aproximação

• Eu diria que é impossível de pregá-lo para baixo a uma coisa, mas se eu tiver que, a resposta é simples propósito. É fácil de criar algo que parece ser visualmente sofisticado, mas raramente serve uma purpose.For me, o projeto é sobre o propósito subjacente e que você quer comunicar. Design como decoração ou design sem propósito, muitas vezes dói mais do que ajuda. No entanto, descobri que se o objetivo eo conteúdo subjacente é valioso, o resto do projeto, geralmente cuidar de si mesmo. [ Garrett Dimon , EUA]
• Nós conscientemente não consideram código durante todo o processo de design. Nosso designer ainda faz um monte de trabalho de impressão, eo que é grande sobre impressão é que não há restrições. Design de impressão não tem fronteiras com tipografia, textura ou o menor dos detalhes. Enquanto ele se encaixa na página, ele funciona! Assim, em muitas maneiras, tentamos trazer as camadas e os detalhes do design de impressão para a web. Que leva o dobro do tempo para o código, mas quem se importa, estamos neste grande projeto para. [ Nick Francis , EUA]
• Eu sempre tento dar prioridade a uma solução para o problema em questão, mesmo que isso signifique fazer algo menos agradável esteticamente ou ter que ignorar um padrão de codificação. [ James Mathias , EUA]
• Resto - a mais importante ferramenta (e menos utilizados) no projeto é fazer com que o tempo longe do design, a fim de fortalecer o tempo você gasta projetar. [ Natalie Jost ]
• Eu costumo passar a maior quantidade de tempo dedicada a resolver os meus clientes # objectivo 1 (ou resolver o maior problema). Esteticamente falando, eu tendem a ficar preso nos detalhes sutis de design, tentando se certificar que tudo é * apenas para a direita *. [ Jesse Bennett-Chamberlain , no Canadá]

Uma técnica de CSS mais útil que você usa com muita freqüência.

2.1. Redefinir mundial

• Espaço em branco redefinir . Embora eu sou um pouco mais criteriosa na minha escolha de quais os elementos a zero fora. [ Cameron Adams ]

  1	<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">* { margin: 0; padding: 0; }</span> * {Margin: 0; padding: 0;}</span>

• Eu prefiro todos os elementos (através da placa browser) para iniciar a 0. Ajuda a garantir que as páginas aparência consistente. [ Derek Punsalan , EUA]
• Redefinir os estilos padrão do navegador. Manualmente ou usando os estilos do Yahoo. [ Mark Boulton , UK]
• Eu nunca começar a programar um site sem descascar o estilo navegador padrão. Para rapidamente conseguir isso, estou usando uma versão modificada do "Tantek Celik de undohtml.css ". Mais detalhes podem ser encontrados em Desfazendo html.css e utilização de andaimes de depuração . [ Lucian Slatineanu , EUA / Romênia]
• Espaço em branco reset no CSS (originalmente inspirado por Justified Esquerda ). É ido em todos os meus projetos nos últimos dois anos. [ Kyle Neath , EUA]

  1	<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">* {</span> * {</span>

  2	<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">padding:0;</span> padding: 0;</span>

  3	<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">margin:0;</span> margin: 0;</span>

  4	<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">}</span> }</span>

  5

  6

  <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl, fieldset, address { margin:1em 5%; }</span> h1, h2, h3, h4, h5, h6, p, pre, blockquote, rótulo, ul, ol, dl, fieldset, endereço {margin: 1em 5%;}</span>

  7	<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">li, dd { margin-left:5%; }</span> li, dd {margin-left: 5%;}</span>

  8	<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">fieldset { padding: .5em; }</span> fieldset {padding: .5 em;}</span>

2.2. Problemas Soluções alternativas navegador

• Eu gosto de usar #whatever { height: 1%; } em um msie_patch.css arquivo (relacionada com comentários condicionais), uma vez que corrige uma grande quantidade de problemas com esse browser. [ James Mathias , EUA]
• O sublinhado hackear . [ Mike Davidson , EUA]
• Uma compreensão de que o bug hasLayout é e como trabalhar em torno dele. [ Paul Boag , UK]
• Uma ferramenta particularmente útil são os comentários condicionais, permitindo-me para servir correções para a prestação quebrado no Internet Explorer 6 e 7. Mesmo que o IE7 é mais recente, ainda está longe de ser um bom produto. Sou grato que a Microsoft, pelo menos, nos forneceu uma solução de trabalho-em torno de seus navegadores de má qualidade. [ Nathan Smith , dos EUA]
• Eu adoraria dizer algo como "testes de forma sistemática em toda como muitos browsers e plataformas quanto possível durante a fase de marcação / css". Embora isso seja muito importante, a técnica mais útil para mim é o uso de comentários condicionais para lidar com versões mais antigas do Internet Explorer. Esta técnica permite isolar esses comportamentos navegadores estranha e lidar com eles em um único arquivo - longe de seu css outras regras, sem hacks. É um módulo e forma limpa de trabalhar. [ Russ Weakley , Austrália]
• Se você está tendo problemas para fazer um layout para funcionar corretamente em navegadores diferentes, aplicar cores de fundo diferentes para os elementos que você está lutando. Isto é particularmente útil para resolver os problemas com elementos flutuantes e margens, como você pode ver exatamente onde normalmente é o problema. [ Dan Lindop , UK]

2.3. Substituição de imagem CSS

• A substituição imagem básica CSS para logotipos e cabeçalhos. Eu uso o que em cada logótipo único - dessa forma, é texto abaixo para os motores de busca e leitores, mas olha como deveria para o usuário. [ Ryan Masuga , EUA]
• Eu acho que o poder de usar as imagens de fundo é incrível. Sempre que você precisar para exibir o texto como uma imagem devido a fontes ou para algo como um logotipo, é fácil fazê-lo funcionar e mantê-lo 100% acessível. Isto não é ciência de foguetes, mas é importante. Por exemplo, se eu quisesse exibir um logotipo. O caminho errado: <img src="logo.gif" alt="Company Logo" /> O caminho certo:

  01	<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">XHTML:</span> XHTML:</span>

  02

  03	<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><h1 id="logo">Company Name</h1></span> <h1 Nome da Empresa id="logo"> </ h1></span>

  04

  05	<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">CSS:</span> CSS:</span>

  06

  07	<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">h1 {</span> h1 {</span>

  08	<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">height:100px /* height of logo */</span> height: 100px / * altura do logotipo * /</span>

  09	<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">width:100px /* width of logo */</span> width: 100px / * largura do logotipo * /</span>

  10	<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">background:url(logo.gif) no-repeat;</span> background: url (logo.gif) no-repeat;</span>

  11	<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">text-indent:-9000px;</span> text-indent:-9000px;</span>

  12	<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">}</span> }</span>

  • Olhe para o seu site sobre um telefone móvel se você quiser entender por que o "caminho certo" é melhor. Você também vai apreciá-lo quando chega a hora de reformular o site e você não tem que tocar o html. [ Nick Francis , EUA]
  • Substituição de texto com uma imagem de fundo. Por exemplo, se você deseja exibir o logotipo de sua empresa, em vez de apenas texto simples, você poderia fazer algo assim:
  • Isto não é apenas grande para as pessoas que utilizam leitores de ecrã um, mas também pode
    ter um impacto positivo no seu PageRank do Google.
    [ Wolfgang Bartelme , Áustria]
  • O truque rollover background-position popularizado por Dave Shea - CSS Sprites . [ Rob Goodlatte , EUA]
  • Combinar diversas imagens de fundo em um e usando background-position para exibir a parte que eu quero. [ Roger Johansson , da Suécia]
  • Portas de correr é uma escolha óbvia, especialmente quando a criação de layouts de fluido ou de navegação por abas. Eu quase cheguei ao ponto onde eu uso um monte tão regularmente, todos eles misturam em um! [ Andy Peatling , Canadá]
  • Auto seleção de navegação . [ Jesse Bennett-Chamberlain , no Canadá]
  • A propriedade CSS novo eu tenho usado ultimamente é outline: 0 . Quando você usa text-indent para ocultar o texto fora da tela, você tem uma borda desagradável quando você clicar em links no Firefox. A propriedade esboço resolve isso. O artigo Invisível Coisas CSS: A Propriedade Esboço explica-lo melhor. [ Keegan Jones , dos EUA]
  • Usando overflow:auto para limpar elementos flutuantes. Clearing simples de Floats . [ Mateus Buchanan , Nova Zelândia]
  • Todo site deve ter um menu de algum tipo, então eu vou com o uso de listas desordenadas para criá-las. A flexibilidade permite Espanta-me cada vez que eu usá-lo. [ Filipe Varela , Portugal]
  • Usando mais de uma classe por elemento. Por exemplo, eu poderia dar uma tag de parágrafo duas classes.
    <p class="highlight clear"> . Isto pode parecer extremamente novato, mas eu acho que quando eu falar com as pessoas sobre isso, eles não têm idéia de que é possível. (Isso também vem a calhar quando você quer a classe último elemento a tomar em uma propriedade ligeiramente diferentes das existentes antes dele.) [ Matt Downey , EUA]

    1	<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><p class="highlight clear"></span> <p class="highlight clear"></span>

  • Um truque que eu uso muito a * * em desenvolvimento é o seguinte:
    div { border: 1px solid red; } . Em outras palavras, definir rapidamente as fronteiras para tudo na * * para ajudar a trabalhar fora as questões de layout (eu também uso o Web Developer Toolbar muito para esse tipo de coisa) [ Ian Lloyd , Reino Unido]

    1	<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">div { border: 1px solid red; }</span> div {border: 1px solid red;}</span>

  • Este teria que ser Clearing fácil . [ R. Marie Cox , EUA]

    01	<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">.clearfix:after {</span> . Clearfix: after {</span>

    02	<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">content: ".";</span> conteúdo: ";".</span>

    03	<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">display: block;</span> display: block;</span>

    04	<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">height: 0;</span> height: 0;</span>

    05	<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">clear: both;</span> clear: both;</span>

    06	<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">visibility: hidden;</span> visibility: hidden;</span>

    07	<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">}</span> }</span>

    08

    09	<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">.clearfix {display: inline-block;}</span> . Clearfix {display: inline-block;}</span>

    10

    11	<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">/* Hides from IE-mac \*/</span> / * Oculta da IE-mac \ * /</span>

    12	<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">* html .clearfix {height: 1%;}</span> . Clearfix * html {height: 1%;}</span>

    13	<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">.clearfix {display: block;}</span> . Clearfix {display: block;}</span>

    14	<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">/* End hide from IE-mac */</span> / * End esconder IE-mac * /</span>

  • Fazendo a relação absoluta. Mais sobre esta técnica em Making the Absolute, Relative . [ Christian Heilmann , London, England]
  • Posicionamento absoluto. Eu não diria que eu usá-lo quase tão freqüentemente quanto outras técnicas, mas é inestimável para conseguir resolver difíceis desafios de codificação. [ Cameron Moll , EUA]
  • Design líquido e elástico, se você pode chamá-los de técnicas de CSS! [ Patrick Griffiths , UK]
  • Taquigrafia simples é a técnica mais básica e útil - nada muito elaborado, apenas bela simplicidade. [ Natalie Jost ]
  • Google.com & Firebug. :) [ Garrett Dimon , EUA]
  • Código reutilizável. Em quase todos os CSS que eu escrevi recentemente, eu comecei a desenvolver um código que pode ser aplicado a qualquer elemento. Por exemplo, eu poderia ter uma classe 'esconder' por um elemento em uma página que eu quero ser escondido, ou uma classe 'mute' para algo que eu quero ser "silenciado" (ou seja, com menos ênfase do que o conteúdo regular - notas de rodapé , por exemplo). Para ver esta técnica em ação, basta dar uma olhada em qualquer um dos meus técnica stylesheets.Another eu uso é desenvolver uma rede robusta, com 'coluna bloco' que compõem o grid. Para fazer isso, eu definir várias classes, tais como "col_1 ',' col_2 '- mas não como você poderia esperar. Onde você poderia supor que "col_1 'é a primeira coluna no projeto, eu tomo uma abordagem ligeiramente diferente, definindo esta como uma coluna que se estende por um' bloco coluna '-' col_2" seria span 'blocos de colunas "2 etc [ Oliver Beattie ]
  • Helvetica [ Mark Boulton , UK]
  • Helvetica Nueve. Não é possível obter o suficiente. [ Kyle Neath , EUA]
  • Eu amo fontes simples, como Helvetica, etc Chalet - e há tantas fontes serif clássico que são absolutamente lindos; Times é um clássico, mas os usuários de hoje parecem se cansar dele por causa do uso excessivo - outros, de modo como Garamond, Caslon, Baskerville, Minion Palatino e todos têm um lugar especial para mim. [ Oliver Beattie ]
  • Usando Univers Condensed um pouco justo no momento em que [ Cameron Adams ]
  • Cada projeto é único e se você quiser ajudar a alcançar um adequado grau de diferenciação não existe tal coisa como uma "fonte muito utilizada". No entanto, se eu tivesse que escolher um dos meus favoritos, eu teria que ir com a família Univers da Linotype . [ Lucian Slatineanu , EUA / Romênia]
  • Helvetica sans-serif e Bright Lucida para um serif. [ Natalie Jost ]
  • Lucida Grande. [ Nick Francis , EUA]
  • Lucida Grande. [ Roger Johansson , da Suécia]
  • Lucida Grande é uma bela fonte para o texto normal. Eu também gosto da limpeza de Trebuchet MS ou Arial, quando utilizado em grandes cabeçalhos. [ Filipe Varela , Portugal]
  • FF DIN . [ Keegan Jones , dos EUA]
  • Eu gosto Trebuchet e Verdana (10px e abaixo). Font "Regular": Ultimamente, tenho vindo a utilizar DIN. [ Ryan Masuga , EUA]
  • É difícil escolher apenas um, mas eu estaria mentindo se eu não disse FF DIN. [ Rob Goodlatte , EUA]
  • Eu amo fontes simples, como Helvetica, etc Chalet - e há tantas fontes serif clássico que são absolutamente lindos; Times é um clássico, mas os usuários de hoje parecem se cansar dele por causa do uso excessivo - outros, de modo como Garamond, Caslon, Baskerville, Minion Palatino e todos têm um lugar especial para mim. [ Oliver Beattie ]
  • Eu uso Arial (sans-serif) ou Georgia (serif) em todos os projetos web-site. [ James Mathias , EUA]
  • Manter "fontes web amigável" em mente, a fonte mais usada para páginas de código é Arial. [ Derek Punsalan , EUA]
  • Bem como a Arial usual, Verdana etc para cópia de corpo, que tendem a utilização limpa sans-serif fontes para títulos. Eu tento usar uma variedade de fontes diferentes, mas estou bastante parcial a um pouco de Rockwell no momento. [ Dan Lindop , UK]
  • Arial. Sorry! Eu fui deixando a tipografia, o que eu sei pouco sobre embaraçosamente, para os designers que eu tenho trabalhado com recentemente. [ Patrick Griffiths , UK]
  • Estou totalmente não uma pessoa de fonte, então eu só uso os suspeitos do costume. Arial, Verdana. Tenho certeza de que é como unhas em quadros-negros para algumas pessoas. [ R. Marie Cox , EUA]
  • Web: 11px Verdana (150% à esquerda). Display: Maple (tipo de processo). Impressão: Texto Mercury (H & FJ) [ Matthew Buchanan , Nova Zelândia]
  • Mmm, eu sou um grande fã da Geórgia. Eu sei o que significa que se a Geórgia não está disponível, isso significa cair de volta para a Times New Roman, mas hey ho, eles é a quebra. [ Ian Lloyd , Reino Unido]
  • Eu me encontrar com a Geórgia ea Verdana um pouco. Eles são fontes de boa utilidade e são bastante onipresente. Enquanto eu gostaria que houvesse mais variedade disponível, há apenas um punhado de fontes que são confiáveis, devido à seleção limitada instalados em vários sistemas operacionais. A chave para melhor usar fontes é saber o que fontes estão disponíveis em quais ambientes. Eu tenho visto muito poucos sites que recorrer ao uso de sIFR, mas eu acho que com um pouco de pesquisa e paciência, ainda há um pouco que pode ser feito dentro do próprio navegador. Uma coisa que tenho aprendido por dabbling em tipografia é que o padrão de fonte sans-serif no Ubuntu é consideravelmente maior do que a sans-serif em outros sistemas operacionais. Enquanto o sans-serif para Windows e Mac tende a olhar como Arial ou Helvetica, o padrão sans-serif no Ubuntu é realmente mais perto de Verdana de largura. [ Nathan Smith , dos EUA]
  • Eu uso o Myriad Pro bastante, provavelmente demais. Eu só estou no amor com ele de variações diferentes, cada um pode retratar uma mensagem muito diferente. [ Andy Peatling , Canadá]
  • "Myriad Pro" e "Neue Helvetica" são os meus favoritos. Flexível, elegante e ainda legível. [ Wolfgang Bartelme , Áustria]
  • MetaPlus. [ Mike Davidson , EUA]
  • Gotham . [ Jesse Bennett-Chamberlain , no Canadá]
  • Ele sempre depende do contexto, mas eu encontrei Frutiger ser uma espera de confiança. [ Garrett Dimon , EUA]
  • Warnock Pro (família inteira) [ Cameron Moll , EUA]
  • Dax regular [ Paul Boag , UK]
  • Ultimamente eu realmente gostei da maneira Avenir aparece na tela. A fonte tem uma sensação muito fresca e funciona bem com fontes hum-drum web. [ Matt Downey , EUA]
  • Century Gothic, eu só como a limpeza do mesmo. [ Christian Heilmann , London, England]
  • Muitos de meus clientes corporativos existentes identidades corporativas. Nestes casos, o meu papel é muitas vezes sobre a interpretação identidades corporativas no ambiente web. Isto significa que as fontes são muitas vezes ditadas desde o início. Para outros clientes, eu não acho que eu tenho em particular fontes favoritas. Eu uso fontes diferentes - dependendo do cliente e do sentimento que estamos tentando transmitir. Mesmo dentro de famílias de fontes serif não houve favoritos particular. Eu usei Rockwell , Clarendon , Goudy e até mesmo Typewriter americano . Eu geralmente tentar usar como poucos reais com base em imagens fontes possível. Estou sempre consciente de que o site pode ser visualizado por dispositivos de tela pequena, por pessoas que têm as imagens desligadas, por usuários cegos ou pessoas com ampliadores de tela. Muitas vezes com base em imagens fontes são uma barreira ou uma irritação a essas pessoas. Idealmente, eu prefiro o meu conteúdo para ser capaz de escala, display bem em qualquer dispositivo e ser flexível o suficiente para que os usuários podem substituir o meu settings.I geralmente tentam usar como poucos reais com base em imagens fontes possível. Estou sempre consciente de que o site pode ser visualizado por dispositivos de tela pequena, por pessoas que têm as imagens desligadas, por usuários cegos ou pessoas com ampliadores de tela. Muitas vezes com base em imagens fontes são uma barreira ou uma irritação a essas people.Ideally, eu prefiro o meu conteúdo para ser capaz de escala, display bem em qualquer dispositivo e ser flexível o suficiente para que os usuários podem substituir minhas configurações. [ Russ Weakley , Austrália]
  • "Não me faça pensar" de Steve Krug. [ Jesse Bennett-Chamberlain , no Canadá]
  • "Não me faça pensar" de Steve Krug. É um livro pequeno, com uma grande mensagem sobre usabilidade da web. Se você é um web designer e não lê-lo, eu recomendo fortemente. [ Andy Peatling , Canadá]
  • Não me faça pensar por Steve Krug. Novamente, não tenho certeza se isso é muito 'designer' o suficiente para você, mas eu desejo * * mais desenvolvedores web e designers iria ler isso antes de criar seu primeiro site. Deve ser a lei. [ Ian Lloyd , Reino Unido]
  • "Não me faça pensar" de Steve Krug. É um livro simples, mas também muito poderosa. É um livro ideal para dar a equipes inteiras de ler - incluindo escritores de conteúdo, designers, desenvolvedores e clientes. [ Russ Weakley , Austrália]
  • "Não me faça pensar" - era rápido ritmo suficiente para manter a minha atenção. [ R. Marie Cox , EUA]
  • "Não me faça pensar!" Por Steve Krug. melhor hora do seu tempo você já gastou na aprendizagem de usabilidade. [ Christian Heilmann , London, England]
  • Mãos para baixo, bar nenhum, sem dúvida, o melhor livro escrito sobre web design é Não me faça pensar por Steve Krug. [ Patrick Griffiths , UK]
  • Mais usabilidade do que o projeto relacionado, mas um dos livros influentes para mim era Steve Krug - Não me faça pensar [ Lucian Slatineanu , EUA / Romênia]
  • De Design CSS eu recomendo CSS Mastery por Andy Budd. Para layouts UI design e compreensão utilizável Eu recomendaria Não me faça pensar! por Steve Krug. Muitas pessoas podem não considerar o segundo livro um livro de design, mas eu acho que é crucial para qualquer designer para entender como os usuários pensam. Design não é apenas estética, mas também tem que ser funcional, a fim de criar resultados para o seu cliente. [ Nick Francis , EUA]
  • "CSS Mastery" por Andy Budd é uma ótima introdução à produção de layouts CSS boa. Já li alguns outros sobre este assunto, mas este é o melhor na minha opinião. [ Dan Lindop , UK]
  • Com recursos intermináveis ​​seamingly online, acho que é difícil justificar a compra de um livro real da prateleira. O único livro que eu comprei e pode recomendar CSS Mastery por Andy Budd (com Cameron Moll & Simon Collison). A cartilha grande para qualquer um interessado em construir uma base sólida de que para construir fora. [ Derek Punsalan , EUA]
  • The Elements of Style tipográficas, de Robert Bringhurst. Este é o livro que inspirou WebTypography.net . Outro grande livro sobre design de interface de usuário é Não me faça pensar por Steve Krug. Que incentiva designers web para criar a navegação no site intuitivo e mensagens. [ Nathan Smith , dos EUA]
  • The Elements of Style tipográficas [ Cameron Moll , EUA]
  • Elementos do estilo tipográfico por Bringhurst. [ Mark Boulton , UK]
  • The Elements of Style tipográficas é muito chato, mas é incrível o quanto você pegar a partir dele, enquanto você está cochilando. [ Cameron Adams ]
  • Jeffrey Zeldman "Designing with Web Standards" [ Paul Boag , UK]
  • Eu gosto de "Transcending CSS", tem algumas boas idéias e é ótimo para a inspiração, mais o meu screenshot está lá (página 48). [ James Mathias , EUA]
  • Se há um livro que muitas, muitas pessoas que trabalham na indústria da Web precisam desesperadamente de lê-lo é Ian Lloyd é "construir seu próprio site a maneira direita Usando HTML & CSS". [ Roger Johansson , da Suécia]
  • "Como ser um designer gráfico sem perder sua alma", de Adrian Shaughnessy [ Rob Goodlatte , EUA]
  • Web Standards Solutions por Dan Cederholm. [ Mateus Buchanan , Nova Zelândia]
  • O único livro que eu tenho na minha mesa é "Design Web Bulletproof", de Dan Cederholm. Isso é mais do que CSS design - mas eu não comprar livros de design. Eles estão muito caro, eles ocupam espaço, e eu posso encontrar tudo o que eu preciso online, se eu precisar de alguma coisa. [ Ryan Masuga , EUA]
  • Pro CSS livro Técnicas por Jeff Croft, Lloyd Ian e Dan Rubin. Mas se eu tivesse que escolher um livro que eu recomendo a todos, a partir de sua jornada rumo ao desenvolvimento de normas seria Soluções Web Standards por Dan Cederholm. [ Matt Downey , EUA]
  • Bem, é um não um livro para ler, mas com certeza é colírio para os olhos. E não é apenas um ou: "Los Logos ',' Dos Logos" e "Logos Tres". Love 'em. [ Filipe Varela , Portugal]
  • Não pode lembrar um livro que eu li especificamente sobre design. Mas aqui estão alguns livros relacionados web que eu recomendo: Livros para o seu cérebro . [ Keegan Jones , dos EUA]
  • Todos os livros de Edward Tufte. Eles não estão diretamente relacionadas ao projeto em si, mas eles têm uma incrível riqueza de informações no que diz respeito à comunicação e estética pragmática. [ Garrett Dimon , EUA]
  • Fazer e Breaking the Grid Timothy Samara. Uma introdução aos layouts de grade baseado. Altamente recomendável. [ Wolfgang Bartelme , Áustria]
  • Ogilvy em publicidade. [ Mike Davidson , EUA]
  • Eu só tenho uma cópia da Criatividade Padrões Web (entre muitos, muitos outros) Cameron Adams, Mark Boulton, Andy Clarke, Jeff Croft, Dan Rubin, etc - essa é uma leitura muito boa. Além disso, é bom ler outros livros não diretamente relacionado com projetos web. Por exemplo, eu tenho bastante livros impressos alguns: 1) Tipografia - Os novos pedidos de habilidades tradicionais (David Hury) Sistemas 2) Grid (Kimberley Elam)
    3) Os Elementos do estilo tipográfico, etc
  • Chasing the Perfect por Natalia Ilyin. [ Natalie Jost ]
  • Design Defensivo (37 Signals). [ Kyle Neath , EUA]
  • Dois livros CSS que são absolutamente brilhantes são Transcending CSS por Andy Clarke e Técnicas Pro CSS por Jeff Croft, Lloyd Ian e Dan Rubin. [ Oliver Beattie ]
  • Eu não leio nenhuma revista de design em uma base regular - online ou offline. Eu só comecei a ler Digital Web um pouco. Eu tenho um leitor de notícias que eu quase não abre mais porque estou ocupado com o trabalho! Eu peneirar cssmania.com agora e depois só para ver o que as pessoas estão fazendo, e gastar todo o meu tempo nos fóruns ExpressionEngine. [ Ryan Masuga , EUA]
  • Web Digital . [ Jesse Bennett-Chamberlain , no Canadá]
  • Não há realmente nenhuma revistas impressas que eu leio regularmente. Suponho que a minha lista de leitura on-line é, provavelmente, bastante típico para a maioria dos web designers, que consiste em os suspeitos do costume: Revista Web Digital, A List Apart , UX Revista , Caixas + Arrows , e, claro, Smashing - embora vocês precisam de um design de site exclusivo . [ Nathan Smith , dos EUA]
  • A List Apart. [ Mike Davidson , EUA]
  • Online, eu confio A List Apart, pena que um é provavelmente óbvio. Eu realmente gosto de criar Revista em papel, só porque eu gosto de olhar para os anúncios. [ Nick Francis , EUA]
  • Eu não entendo revistas de design das lojas, em tudo - que tendem a encontrá-los demasiado pretensioso ou até eles mesmos, para ser honesto! Da mesma forma, eu não comprei revistas techie por um longo tempo. Para mim, é tudo online, e mais uma vez eu estou pensando mais na frente / técnicas técnicas. Então, para mim ainda é alistapart.com - grandes escritores, boas idéias e muito bem apresentados. [ Ian Lloyd , Reino Unido]
  • A List Apart. [ Oliver Beattie ]
  • Design Observer . [ Lucian Slatineanu , EUA / Romênia]
  • Faz Wired contam como uma revista de design? É certamente tem alguns dos melhores infográficos que eu já vi. [ Cameron Adams ]
  • PingMag [ Derek Punsalan , EUA]
  • Eu realmente viver a vibe ea variedade que Netdiver características a cada dia. [ Filipe Varela , Portugal]
  • UX revista é uma ótima leitura, e pós uma série de artigos divertido. Eu também encher o meu leitor de feeds com um monte de padrões web / web design / usabilidade blogs e digitalização por meio deles, quando eu posso encontrar um minuto de reposição de trabalhar! [ Andy Peatling , Canadá]
  • Eu Confira Smashing Magazine de vez em quando, mas eu realmente não li um monte de revistas de design, a menos que tenham algo específico. Eu, entretanto, assistir Pixelperfect com Bert Monroy a cada semana. [ James Mathias , EUA]
  • Por Smashing Magazine, é claro. [ R. Marie Cox , EUA]
  • Fontblog.de - um blog sobre tipografia alemã de design e coisas afins. [ Wolfgang Bartelme , Áustria]
  • . Net magazine (batota, eu obtê-lo gratuitamente como eu sou um contribuinte) [ Christian Heilmann , London, England]
  • . Net magazine [ Paul Boag , UK]
  • Revista Blueprint . [ Natalie Jost ]
  • Communication Arts . [ Kyle Neath , EUA]
  • Revista relevantes . É extremamente bem desenhados (mesmo os anúncios!), E é inspirador para folhear. Se nada mais, ajuda faísca boas idéias de projetos. [ Keegan Jones , dos EUA]
  • Computer Arts e . magazine líquida mensal. [ Dan Lindop , UK]
  • COMO revista é sempre uma fonte incrível de inspiração do projeto para mim. Vendo impressos e peças promocionais realmente desafiar-me a pensar sobre como exibir e organizar as informações na web. [ Matt Downey , EUA]
  • Gosto de ler coisas que vão ampliar meus horizontes como designer, e não restringi-las. A revista recentes Peguei no Reino Unido que teve grande projeto, mas o conteúdo também grande, era uma revista chamada Monocle . [ Mark Boulton , UK]
  • Eu não sigo nenhuma revista de design particular. Ocasionalmente eu vou navegar através de uma cópia do Computer Arts ou Artes Comunicação. [ Rob Goodlatte , EUA]
  • Eu não leio qualquer em uma base regular mais - existem tantos hoje em dia eu só seguir os links e sugestões para artigos interessantes. [ Patrick Griffiths , UK]
  • Eu realmente não li nenhuma revista. Passei a maior parte do meu tempo a explorar livros e livros sobre aspectos encontrar clássicos de design, como tipografia e da grade. Eu também achei incrivelmente esclarecedor ler livros de diferentes indústrias ou diferentes períodos da arte e história. É fácil de seguir o mais recente "modismos" e aplicar isso a um projeto, mas é clássico e os princípios imutáveis ​​que realmente fazer um projeto de qualidade destacam-se, independentemente do seu estilo particular. Eu também estou começando a ficar em livros sobre psicologia, antropologia e outros livros relacionados que se prestam a compreensão do comportamento humano e pensar em como podemos aplicar esse conhecimento para a web. [ Garrett Dimon , EUA]
  • Eu não leio revistas de design mais. Eu costumava, mas estes dias eu não tenho tempo. Ou o interesse. [ Roger Johansson , da Suécia]
  • I don't read any particular one on a weekly basis, but I pick up any design-related mags as often as I can with topics that range from food to architecture to aircraft design etc. [ Cameron Moll , USA]
  • I do not read offline magazines now. Even with online magazines, I do not really “read” them in the true sense. I skim across a wide range of sites every couple of days as well as hitting a wide range of RSS feeds. If I find an article that seems interesting, I jump in and read it, bookmark it for others and then get out. [ Russ Weakley , Austrália]

01

XHTML:

02

03	<h1 id="logo">My Company</h1>

04

05

CSS:

06

07

#logo {

08	background: transparent url("pathtoyourimage.png") no-repeat 0 0;

09	<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">display: block;</span> display: block;</span>

10	<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">width: 100px;</span> width: 100px;</span>

11	<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">height: 50px;</span> height: 50px;</span>

12	<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">overflow: hidden;</span> overflow: hidden;</span>

13	line-height: 1000px;

14	<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">}</span> }</span>

2.4. CSS Sprites, Sliding Doors, Techniques

2.5. CSS Properties, CSS Theory

2.6. Aproximação

Uma fonte que você usar em seus projetos com muita freqüência.

Web-typography defines the content. Ou seria o contrário? Nevermind: the point is that if you use web-typography properly, you can not only improve the readability of your content, but also give it a more profound structure and provide your readers with efficient visual cues and hints.
Where to start your search for professional typefaces? Professionals deliver answers.


3.1. Helvetica, Helvetica Neue


[ Source: Slowcode.com]

[ Source: Toddroeth.com ]


3.2. Univers


[ Source: Linotype.com ]


3.3. Lucida Grande, Lucida Bright


[ Source: Wikipedia ]


3.4. FF DIN


[ Source: Wikipedia ]


3.5. Arial, Verdana


[ Source: Wikipedia ]

[ Source: Wikipedia ]


3.6. Georgia


[ Source: Wikipedia ]


3.7. Myriad Pro


[ Source: Wikipedia ]


3.8. Meta Plus


[ Source: Fontshop ]


3.9. Gotham


[ Source: Typography.com ]


3.10. Frutiger


[ Source: Wikipedia ]


3.11. Warnock Pro


[ Source: Veer.com ]


3.12. Dax Regular


[ Source: MyFonts.com ]