| Conteúdo |
Construindo belas páginas web<br/>A beleza está nos olhos de seu usuário<br/><br/>É um mundo grande (enorme)... mas quem está realmente nele?<br/>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.<br/><br/>Sua grande chance com a Lanterna Vermelha design<br/>Onde você começa?<br/>Desenhe uma planta primeiro<br/>Determine sua navegação de alto nível<br/>Coloque tudo no contexto<br/>Mostre a Jane alguns esboços básicos de design<br/>Os esboços mantêm o foco na funcionalidade<br/>Não destrua um bom design com uma cópia ruim<br/>O que torna o texto passível de ser varrido?<br/>Web design significa comunicação e seus usuários<br/><br/>Pré- produção<br/>O papel cobre a pedra<br/><br/>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!<br/><br/>Sua primeira exibição internacional <br/>Pense antes de codificar<br/>Uma metáfora visual clara ajuda a reforçar o tema de seu site<br/>Um tema representa o conteúdo de seu site <br/>Unia série de ideias: O caminho para uma metáfora visual<br/>Desenvolva um tema e uma metáfora visual para Mark<br/>Os elementos de sua página formam sua metáfora visual<br/>Construa um modelo XFITML rápido para Mark Eo CSS<br/>Use esboços sequenciais para desenvolver ideias e economizar tempo sem codificar<br/>Não projete para si mesmo!<br/>Criemos um esboço sequencial para Mark<br/><br/>Organizando seu site <br/>"Então, vire à esquerda na torre d'água verde.."<br/><br/>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.<br/><br/>Ajuste SCU Conteúdo ao layout<br/>Organize as informações de seu site<br/>Mantenha seu site organizado com a Arquitetura da Informação (AI)<br/>AI - O modo de classificação de fichas<br/>Classificações de fichas expostas<br/>Classifique suas fichas em pilhas relacionada<br/>Forneça a suas pilhas nomes que sejam Curtos e descritivos<br/>Qual classificação de fichas é certa? <br/>Organize suas fichas, em urna hierarquia do site<br/>Os diagramas AI são apenas classificações de ficha no papel<br/>Os diagramas AI NÃO são apenas links entre as páginas<br/>Vá cia pré-produção para a produção <br/>Construa a estrutura do site de Mark <br/>Crie o index html primeiro...<br/>...e, então, o scrcen.css para o estilo <br/>Pré-produção para a produção: O processo completo <br/><br/>Layout design<br/>Siga a regra de ouro <br/><br/>4 Vale a pena ser um bom ouvinte.., e carregar uma calculadora de bolso.<br/>Estamos falando sobre o design centrado no usuário por alguns capítulos,<br/>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.<br/><br/>Projete para seu público<br/>Sua exibição mais recente: RPM Discos <br/>Identifique o público da RPM com pessoas<br/>Deixe as pessoas serem seu guia<br/>A resolução tem um impacto no design e no layout <br/>O estado real da tela determina quanto de seu site <br/>será exibido no navegador do usuário<br/>Construa uma base XHTML e CSS otimizada para 1024x768<br/>Os humanos gostam ck coisas alinhadas e bem organizadas<br/>Qual largura mml ia grade deve ter? Use a Proporção de Ouro<br/>A regra dos terços: Um atalho para a proporção de ouro<br/>RPM e a proporção de ouro:Um estudo de (anti) caso <br/>Lembra de suas pessoas e do cliente?<br/>Configure o RPM 2.0 com a estrutura Blueprint<br/>Use as regras BIueprint CSS para estilizar o RPM 2.0<br/>Hora de deixar seu RPM maravilhoso<br/>Adicione algum CSS para limpar o layout<br/>Termine o conteúdo e a marcação da navegação<br/>Adicione lavout e detalhes tipográficos com mais algum CSS<br/><br/>Design com cor <br/>Indo além do monocromático<br/><br/>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.<br/><br/>Ajude seu Cenário (te música local <br/>9Rules: O padrão de ouro da rede do blog <br/>Algumas vezes suas escolhas são um pouco... limitadas <br/>A cor tem um impacto emocional<br/>O esquema de cores (onde tudo começa)<br/>Use o esquema de cores para escolher as cores que combinam<br/>Primeiro, escolha sua cor de base<br/>Use o esquema triádico para criar padrões de cores úteis<br/>Inicie na marcação SampleRate<br/>Crie o Iãyout básico da página com o CSS<br/>O oposto de pesado é...leve <br/>Crie uma palheta de cores mais rica com o esquema de cores tetrádico <br/>Atualizemos o SampleRate CSS <br/><br/>Navegação inteligente<br/>"Em 2 segundos, dique em 'Início"<br/><br/>6 O que seria a Web sem a navegação?<br/>É 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.<br/><br/>escola está de volta na sessão<br/>A primeira etapa na boa navegação é uma boa AI <br/>O que existe realmente em um nome, afinal? <br/>Abordagem 1: Navegação com guias horizontais <br/>Abordagem 2: Navegação vertical <br/>Os elementos do bloco são seus amigos <br/>Vamos tornar flutuante a navegação do bloco no site CNM <br/>Os ícones não DIZEM nada... apenas têm boa aparência <br/>Adicione ícones ao seu texto, não o contrário <br/>Atualize o XHTML do CNM para usar links textuais <br/>Agora, podemos estilizar nossos novos elementos do bloco...<br/>A navegação primária não deve mudar...mas a navegação secundária deve<br/>Cada subpágina tem sua própria navegação secundária<br/>Vamos estilizar a navegação com nosso CSS <br/><br/>Escrevendo para Web<br/>Sim, você escaneia!<br/><br/>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.<br/><br/>Construa um jornal on-line melhor <br/>Hipster Iritelligencer On line: Especificações do projeto <br/>O problema é o texto<br/>Melhore seu conteúdo com a Pirâmide Invertida <br/>Compare sua cópia<br/>Adicione listas ao seu XHTML<br/>Os cabeçalhos torna seu texto ainda mais escaneável <br/>Misture as fontes para enfatizar os cabeçalhos e outro texto <br/>O nível, não o tamanho, de um Cabeçalho<br/>transmite importância <br/><br/>acessibilidade<br/>A inacessibilidade destrói<br/><br/>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...<br/><br/>Audio 2-Go:acessibilidade inacessivel<br/>Acessibilidade significa lazer com que seu site funcione para todos<br/>Como seu site é lido<br/>A mensagem de um site deve ser clara... para todos <br/>Encare o fato: OS computadores são estúpidos! <br/>Um computador lera o texto ALT de sua imagem<br/>Converta seu texto ALT longo cm um LONGDESC Suas melhorias estão fazendo a diferença para alguns clientes do áudio-2-Go<br/>A acessibilidade não significa apenas leitores de tela<br/>A tabulação de uma página deve ser' ordenada <br/>O Audio-2-Go agora é muito mais acessível<br/>WCAG Prioridade 1<br/>A cor não dleve ser sua única forma de comunicação<br/>A vida através dos olhos seguros da Web<br/>A vida através dos olhos daltônicos..<br/>Aiulio-2-Go, através dos olhos daltônIco<br/>Aquelas estrelas são um problema real<br/>As imagens de fundo ainda são suas amigas<br/>Há mais para ordenar do que apenas os tabindexes<br/><br/>Ouça seus usuários<br/>Caminho para um design harmonioso<br/><br/>9 O bom design significa realmente ouvir seus usuários.<br/>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.<br/><br/>Problemas no RPM<br/>Deixe seu público falar com você através de grupos de focos e pesquisas<br/>As pesquisas e os grupos de toco não são gratuitos<br/>Pesquisas expostas<br/>Faça as perguntas certas em suas pesquisas<br/>A pesquisa final do usuário do RPM Music <br/>Os resultados estão certos!<br/>Respostas para a pergunta aberta:<br/>Uso do navegador 'Web<br/>Corrija o erro CSS do RPM movendo a propriedade hover <br/>Os blocos de Construção do teste de utilização do orçamento<br/>Use um script moderador para organizar o teste <br/>Os amigos e a família podem ser um problema <br/>Os resultados do teste de utilização - o que os usuário estão dizendo para você <br/>Um problema simples...<br/>As estatísticas do site dão (outra) voz a seus usuários <br/>Ferramentas analíticas do Web site <br/><br/>Design evolucionário<br/>Mantenha seu site novo<br/><br/>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.<br/><br/>Seu portfólio até então<br/>Manter seu site e conteúdo novos mantém<br/>seus usuários retornando<br/>Web design significa evolução, não revolução <br/>Use o CSS para evoluir o design de seu site<br/>Use caixas de luz javaScript para adicionar interatividade ao seu site <br/>Adicione urna Facebox à horne page Lanterna Vermelha <br/>Edite seu arquivo de índice<br/>Adicionando a Funcionalidade do blog com WordPress<br/>Adicione um blog WordPress ao site Lanterna Vermelha<br/>Blog exposto <br/>Mude a aparência de seu blog com ternas<br/><br/>O negócio web design<br/>Dedique-se ao seu próprio negócio<br/><br/>11 Negócios em um livro Web design? Você está brincando?<br/>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<br/><br/>O mas novo cliente em potencial: o Foo Bar <br/>O que o Foo Bar deseja em urna proposta<br/>Vamos construir um modelo rápido para o Foo Bar <br/>Bem-vindo ao mundo da pirataria do design <br/>Que tipo de trabalhador Web é você ?<br/>A Lanterna Vermelha conseguiu um novo cliente futuro <br/>O que realmente entra no projeto de um Web site? <br/>Calcule urna proposta total... <br/>Use urna carta de proposta para enviar uma cotação detalhada para um cliente<br/>O podcast Trilobite: o(outro) novo desafio <br/>Use a Creative Cornmons para licenciar seu trabalho <br/>Licenças Creative Commons <br/> <br/>restantes<br/>As dez coisas principais (que não cobrimos) <br/>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.<br/><br/>#1: Design com cruzamento de culturas e internacional <br/>#2: O Futuro da marcação Web <br/>#3: O futuro do CSS<br/>#4: Projetando para dispositivos móveis <br/>#5: Desenvolvendo aplicativos Web <br/>#6: Ritmo em seu layout<br/>#7: Contraste do texto<br/>#8: Combine os nomes do link com sua página de destino <br/>#9 O contraste é um dispositivo de layout fundamental<br/>#10: Mais ferramentas para o design<br/><br/> |
