Construindo belas páginas web
A beleza está nos olhos de seu usuário

É um mundo grande (enorme)... mas quem está realmente nele?
Então, você colocou seu diploma XHTML e CSS brilhante na parede e os futuros clientes estão fazendo seu telefone tocar. Legal, certo? Sim.. Até que você recebe a primeira reclamação sobre um layout ruim ou um logotipo que é de 1998. Assim, como você cria Web sites realmente bonitos e ainda assegura que eles satisfaçam seus usuários? Tudo começa com um bom planejamento. Então, você tem que escrever para a Web, conhecer seu público e, acima de tudo, assegurar que esteja projetando para seus usuários, não para si mesmo.

Sua grande chance com a Lanterna Vermelha design
Onde você começa?
Desenhe uma planta primeiro
Determine sua navegação de alto nível
Coloque tudo no contexto
Mostre a Jane alguns esboços básicos de design
Os esboços mantêm o foco na funcionalidade
Não destrua um bom design com uma cópia ruim
O que torna o texto passível de ser varrido?
Web design significa comunicação e seus usuários

Pré- produção
O papel cobre a pedra

2 Cansado de bater cabeça com um cliente exigente? Sim, você conhece o tipo... sempre que mostra sua última idéia maluca, ele já passou para outra aparência. outro esquema de cor... outro Web site inteiro. Então, como você lida com os clientes instáveis ou aqueles Web sites difíceis de acertar e capciosos? Você começa com papel, lápis e uma grande borracha rosa. Neste capítulo, você aprenderá a trabalhar com inteligência antes de entrar em seu editor HTML. Propor um tema e uma metáfora visual para seu site, imitar esboços a lápis e usar esboços sequenciais irá transformá-lo em um Web designer esperto e flexível. Portanto, iremos sair do esboço e começar a pré-produção!

Sua primeira exibição internacional
Pense antes de codificar
Uma metáfora visual clara ajuda a reforçar o tema de seu site
Um tema representa o conteúdo de seu site
Unia série de ideias: O caminho para uma metáfora visual
Desenvolva um tema e uma metáfora visual para Mark
Os elementos de sua página formam sua metáfora visual
Construa um modelo XFITML rápido para Mark Eo CSS
Use esboços sequenciais para desenvolver ideias e economizar tempo sem codificar
Não projete para si mesmo!
Criemos um esboço sequencial para Mark

Organizando seu site
"Então, vire à esquerda na torre d'água verde.."

3 Um pouco de incerteza na navegação de seu site? Em relação à Web, os usuários são impacientes. Eles não querem perder muito tempo procurando o botão certo ou passando por três níveis de menus suspensos JavaScript. E por isso que você passou tanto tempo organizando seu site... antes de entrar na construção e no design. No último capítulo, você sugeriu um ótimo tema e aparência para o site. Neste capitulo, você realmente irá amplificar as coisas com uma organização clara. Quando tiver terminado, terá um sue que informa a seus usuários aonde ir e os impede de ficar perdidos novamente.

Ajuste SCU Conteúdo ao layout
Organize as informações de seu site
Mantenha seu site organizado com a Arquitetura da Informação (AI)
AI - O modo de classificação de fichas
Classificações de fichas expostas
Classifique suas fichas em pilhas relacionada
Forneça a suas pilhas nomes que sejam Curtos e descritivos
Qual classificação de fichas é certa?
Organize suas fichas, em urna hierarquia do site
Os diagramas AI são apenas classificações de ficha no papel
Os diagramas AI NÃO são apenas links entre as páginas
Vá cia pré-produção para a produção
Construa a estrutura do site de Mark
Crie o index html primeiro...
...e, então, o scrcen.css para o estilo
Pré-produção para a produção: O processo completo

Layout design
Siga a regra de ouro

4 Vale a pena ser um bom ouvinte.., e carregar uma calculadora de bolso.
Estamos falando sobre o design centrado no usuário por alguns capítulos,
mas aqui é onde você realmente coloca em teste suas habilidades de ouvinte. Neste capítulo, obterá o retorno de seus usuários e construirá um site que atenda as suas necessidades. Dos navegadores até o estado de tela real, significa dar a seus usuários o que eles realmente querem. Não só isso, você aprenderá os segredos da regra dos terços. Descubra como teclas pressionadas e fáceis da calculadora, uma régua e algumas linhas de grade podem transformar sua página Web entediada em algo bonito.

Projete para seu público
Sua exibição mais recente: RPM Discos
Identifique o público da RPM com pessoas
Deixe as pessoas serem seu guia
A resolução tem um impacto no design e no layout
O estado real da tela determina quanto de seu site
será exibido no navegador do usuário
Construa uma base XHTML e CSS otimizada para 1024x768
Os humanos gostam ck coisas alinhadas e bem organizadas
Qual largura mml ia grade deve ter? Use a Proporção de Ouro
A regra dos terços: Um atalho para a proporção de ouro
RPM e a proporção de ouro:Um estudo de (anti) caso
Lembra de suas pessoas e do cliente?
Configure o RPM 2.0 com a estrutura Blueprint
Use as regras BIueprint CSS para estilizar o RPM 2.0
Hora de deixar seu RPM maravilhoso
Adicione algum CSS para limpar o layout
Termine o conteúdo e a marcação da navegação
Adicione lavout e detalhes tipográficos com mais algum CSS

Design com cor
Indo além do monocromático

5 A cor é uma heroína não celebrada no Web design. Uma boa palheta de cores pode chamar seu público para seu site, fornecer uma sensação de imersão poderosa e fazer com que volte para ter mais. E quanto à cor e ao Web design, não é apenas selecionar uma boa palheta de cores, também significa como aplicar essas cores. Você pode ter uma ótima palheta de cores, mas se não usá-las com atenção, as pessoas poderão evitar seu site como uma praga. No final deste capítulo, não só estará intimamente familiarizado com o impacto que a cor tem no usuário Web, como também será capaz de escolher uma ótima palheta de cores que seja adequada - e ainda complementa - para os Web sites centrados no usuário.

Ajude seu Cenário (te música local
9Rules: O padrão de ouro da rede do blog
Algumas vezes suas escolhas são um pouco... limitadas
A cor tem um impacto emocional
O esquema de cores (onde tudo começa)
Use o esquema de cores para escolher as cores que combinam
Primeiro, escolha sua cor de base
Use o esquema triádico para criar padrões de cores úteis
Inicie na marcação SampleRate
Crie o Iãyout básico da página com o CSS
O oposto de pesado é...leve
Crie uma palheta de cores mais rica com o esquema de cores tetrádico
Atualizemos o SampleRate CSS

Navegação inteligente
"Em 2 segundos, dique em 'Início"

6 O que seria a Web sem a navegação?
É a navegação que torna a Web um meio de informação tão poderoso. Mas o negócio é o seguinte: a navegação é muito mais do que apenas pressionar alguns botões legais e jogá-los em seu design. A construção de unia navegação inteligente começa com sua arquitetura de informação e continua no processo inteiro do design. Mas como funciona? Como você realmente assegura que seus usuários nunca ficarão perdidos? Neste capítulo, veremos os diferentes estilos de navegação, como a AI conduz os links de sua página e por que os ícones (sozinhos) não são sempre icones.

escola está de volta na sessão
A primeira etapa na boa navegação é uma boa AI
O que existe realmente em um nome, afinal?
Abordagem 1: Navegação com guias horizontais
Abordagem 2: Navegação vertical
Os elementos do bloco são seus amigos
Vamos tornar flutuante a navegação do bloco no site CNM
Os ícones não DIZEM nada... apenas têm boa aparência
Adicione ícones ao seu texto, não o contrário
Atualize o XHTML do CNM para usar links textuais
Agora, podemos estilizar nossos novos elementos do bloco...
A navegação primária não deve mudar...mas a navegação secundária deve
Cada subpágina tem sua própria navegação secundária
Vamos estilizar a navegação com nosso CSS

Escrevendo para Web
Sim, você escaneia!

7 Escrever para a Web é como qualquer outro tipo de escrita, certo? Na verdade, escrever para a Web é completamente diferente de escrever para a impressão. As pessoas não leem o texto na Web como em uma página impressa. Ao invés de ler o texto da esquerda para a direita, do início ao fim, elas escaneiam-no. Todo o texto em seu site precisa ser rapidamente escaneável e facilmente digerível pelo usuário. Se não, os usuários não perderão seu tempo em seu site e irão para outro lugar. Neste capitulo, aprenderá um monte de dicas e truques para escrever um texto escaneável a partir do zero, pegar o texto existente e torná-lo fácil de escanear.

Construa um jornal on-line melhor
Hipster Iritelligencer On line: Especificações do projeto
O problema é o texto
Melhore seu conteúdo com a Pirâmide Invertida
Compare sua cópia
Adicione listas ao seu XHTML
Os cabeçalhos torna seu texto ainda mais escaneável
Misture as fontes para enfatizar os cabeçalhos e outro texto
O nível, não o tamanho, de um Cabeçalho
transmite importância

acessibilidade
A inacessibilidade destrói

8 Quem está perdendo ao experimentar seu Web site, agora? Você pode ter um site bonito, com um bom layout e facilmente navegável.., mas, isso não significa que todos estejam divertindo-se com ele. Seja uma pessoa com problemas de visão, seja simplesmente um usuário que tem problemas ao distinguir o azul do verde, seu site deve ser acessível. Do contrário, você estará perdendo usuários e prejudicando seu negócio. Mas não se preocupe; a acessibilidade não é difícil! Planejando a ordem de sua marcação, usando os atributos ALT, as tags LONGDESC e considerando a cor, você aumentará seu público imediatamente. No decorrer, poderá até conseguir o certificado WCAG. O que é isso? Vire a página e descubra...

Audio 2-Go:acessibilidade inacessivel
Acessibilidade significa lazer com que seu site funcione para todos
Como seu site é lido
A mensagem de um site deve ser clara... para todos
Encare o fato: OS computadores são estúpidos!
Um computador lera o texto ALT de sua imagem
Converta seu texto ALT longo cm um LONGDESC Suas melhorias estão fazendo a diferença para alguns clientes do áudio-2-Go
A acessibilidade não significa apenas leitores de tela
A tabulação de uma página deve ser' ordenada
O Audio-2-Go agora é muito mais acessível
WCAG Prioridade 1
A cor não dleve ser sua única forma de comunicação
A vida através dos olhos seguros da Web
A vida através dos olhos daltônicos..
Aiulio-2-Go, através dos olhos daltônIco
Aquelas estrelas são um problema real
As imagens de fundo ainda são suas amigas
Há mais para ordenar do que apenas os tabindexes

Ouça seus usuários
Caminho para um design harmonioso

9 O bom design significa realmente ouvir seus usuários.
Seus usuários podem dizer o que está errado com seu site, o que está certo com seu site, como você pode corrigir as coisas (se necessário) e como pode melhorar seu site. Há muitos modos de poder ouvir seus usuários. Você pode ouvi-los em grupos (usando ferramentas como pesquisas), ouvi-los individualmente (com ferramentas, tais como teste de utilização) e ouvir suas ações coletivas em seu site (com ferramentas, como, por exemplo, a métrica do site e a estatística). Seja qual for o método usado, tudo isso significa "ouvir" o que seus usuários estão dizendo. Se você ouvir, seu site atenderá as necessidades de seu público e será muito melhor para ele.

Problemas no RPM
Deixe seu público falar com você através de grupos de focos e pesquisas
As pesquisas e os grupos de toco não são gratuitos
Pesquisas expostas
Faça as perguntas certas em suas pesquisas
A pesquisa final do usuário do RPM Music
Os resultados estão certos!
Respostas para a pergunta aberta:
Uso do navegador 'Web
Corrija o erro CSS do RPM movendo a propriedade hover
Os blocos de Construção do teste de utilização do orçamento
Use um script moderador para organizar o teste
Os amigos e a família podem ser um problema
Os resultados do teste de utilização - o que os usuário estão dizendo para você
Um problema simples...
As estatísticas do site dão (outra) voz a seus usuários
Ferramentas analíticas do Web site

Design evolucionário
Mantenha seu site novo

10 Então, você construiu alguns Web sites impressionantes. Agora. é hora de recuar, relaxar e observar os números de visitantes crescerem, certo? Espere, não tão rapidamente. A Web nunca para de evoluir - e seu site precisa acompanhar. Você pode adicionar novos recursos, ajustar o design ou até fazer um novo design completo. Um site que sempre muda reflete suas habilidade de crescimento - o que significa que seu site é sempre sua melhor ferramenta de propaganda.

Seu portfólio até então
Manter seu site e conteúdo novos mantém
seus usuários retornando
Web design significa evolução, não revolução
Use o CSS para evoluir o design de seu site
Use caixas de luz javaScript para adicionar interatividade ao seu site
Adicione urna Facebox à horne page Lanterna Vermelha
Edite seu arquivo de índice
Adicionando a Funcionalidade do blog com WordPress
Adicione um blog WordPress ao site Lanterna Vermelha
Blog exposto
Mude a aparência de seu blog com ternas

O negócio web design
Dedique-se ao seu próprio negócio

11 Negócios em um livro Web design? Você está brincando?
Você dominou a pré-produção, arquitetura da informação, navegação, cor e até acessibilidade. O que resta no caminho para o domínio do Web design? Bem, você terá que lidar com as questões comerciais do Web design. Você não precisa de um MBA em Harvard, mas sabe melhor do que ninguém onde depositar seu cheque... ou os cheques poderão parar de chegar. Vejamos corno estabelecer boas relações com o cliente e compreender seus direitos de propriedade intelectual. O resultado? Lucros aumentados e proteção para seu trabalho aplicado

O mas novo cliente em potencial: o Foo Bar
O que o Foo Bar deseja em urna proposta
Vamos construir um modelo rápido para o Foo Bar
Bem-vindo ao mundo da pirataria do design
Que tipo de trabalhador Web é você ?
A Lanterna Vermelha conseguiu um novo cliente futuro
O que realmente entra no projeto de um Web site?
Calcule urna proposta total...
Use urna carta de proposta para enviar uma cotação detalhada para um cliente
O podcast Trilobite: o(outro) novo desafio
Use a Creative Cornmons para licenciar seu trabalho
Licenças Creative Commons

restantes
As dez coisas principais (que não cobrimos)
Realmente cobrimos muitas coisas neste livro. O fato é que há alguns tópicos importantes e petiscos que não se encaixaram em nenhum capítulo anterior. Sentimos muito por isso e achamos que se não os cobrirmos, pelo menos rapidamente, estaremos prestando um mau serviço. É onde este capitulo entra em cena. Bem, realmente não é um capítulo, é mais um apêndice (tudo bem é um apêndice). Mas é um apêndice impressionante das dez melhores partes do que você não pode ficar sem.

#1: Design com cruzamento de culturas e internacional
#2: O Futuro da marcação Web
#3: O futuro do CSS
#4: Projetando para dispositivos móveis
#5: Desenvolvendo aplicativos Web
#6: Ritmo em seu layout
#7: Contraste do texto
#8: Combine os nomes do link com sua página de destino
#9 O contraste é um dispositivo de layout fundamental
#10: Mais ferramentas para o design