Protótipos para Web II: visual para UX e Branding

1. Trailer: Sou Erika Heins. Eu sou um web designer e desenvolvedor web. Trabalho há mais de 10 anos no campo em Nova Iorque. Nesta aula vamos falar sobre web design visual e como planejar sua direção visual, como levá-lo em escolhas de cores, escolhas tipográficas, escolhas imagem e, em seguida, como adaptar esse processo para web design responsivo. Então, criando colagens de elementos ou layouts de Frankenstein, e, em seguida, entrar em layouts responsivos específicos que você vai tarefa com vários usuários e continuar iterando. No final, você terá seu quadro de inspiração e a partir disso você terá criado uma colagem de elementos ou layout de Frankenstein para servir como guia para o resto de seus layouts e você também terá layouts responsivos completos que você pode entregar a um desenvolvedor, ou você pode levá-los para a próxima classe e construir um site você mesmo. Esta classe é lindo Web Design: identidade visual, interface do usuário e protótipos visuais. 2. Apresentação: Olá, e bem-vindos ao lindo Web Design. Nesta classe, você fará o branding, o design da interface do usuário e os protótipos visuais de um site responsivo. Você pode então entregá-lo a um programador ou continuar com a próxima classe para construí-lo você mesmo. Você já deve ter um sitemap e esboços ou wireframes. Caso contrário, você pode fazer a primeira classe nesta série para ajudar a planejar este site. Vou começar com esta citação de Scott Adams sobre criatividade permitindo-se cometer erros e que o design é saber quais manter. Então, isso vai ser um tema de nós queremos fazer um monte de exploração e, em seguida, ter muito para escolher enquanto editamos, polimos e refinamos. Então, as ferramentas que usaremos nesta classe são o Illustrator e o Photoshop para fazer maquetes. Você também pode usar o Sketch que eu estou experimentando agora e gostando muito, mas isso talvez seja um tópico para uma aula futura. Tweet para mim se você quiser ouvir sobre isso. Então, vamos começar. Certo, então vá em frente e prepare-se. Baixe Sketch se você não tiver. Você pode usar o Illustrator ou o InDesign ou outro aplicativo de design de sua escolha, mas vou recomendar o Sketch por causa da facilidade com ele se converte em desenvolvimento da Web e as ferramentas que ele possui. Então, obtenha uma conta do Google Drive também se precisar de uma e, em seguida, obtenha uma conta icebergs.com enquanto estiver nela. É realmente útil para fazer moodboards e outras coisas. 3. Direção visual: Ok. A primeira coisa que precisamos para o nosso web design visual é um sentido de direção. Queremos pensar sobre o que é apropriado para nossos usuários em particular. Então, como vamos fazer isso? É tentador olhar para as tendências as diferentes maneiras que ilustração, arquitetura, cor, refletem a cultura dos tempos e a tecnologia dos tempos através da art nouveau, sua art déco, através do Bauhaus, e agora nós até vemos isso com web design. As pessoas estão sempre copiando a Apple como líder em bom design, especialmente em software e hardware. Mas se olharmos para trás, vemos que não podemos imaginar copiar isso agora, mas isso refletia o espírito dos tempos. Por exemplo, quando a Apple começou a fazer essa superfície espelhada refletida sob o iPhone, você começou a ver que sob cada produto que foi apresentado na web, e a mesma coisa com suas barras de navegação, aqueles eram estilos comuns que você começou a ver todos esses tutoriais de photoshop de como recriar isso. Em seguida, grades finalmente se tornou possível na web e bastante de insight foi copiado uma tonelada para as pessoas que estavam tentando explorar como usar uma grade, e agora design plano é as últimas tendências. Então, LayerVaults foi uma das execuções mais claras desse estilo, e assim eles tiveram kits de interface do usuário copiando todo o site. Muitas pessoas apenas tentando fazer o que parece atual, e o que parece fresco e moderno. Então, é útil a um ponto porque obviamente, uma tendência para servir o apetite cultural atual. Se você está liderando essa tendência, você está mostrando seu gosto, você está mostrando que você é moderno, que você entende tipo do que é atual e legal na cultura de hoje, e se você está seguindo essa tendência, você está meio tentando entrar nessa equidade de marca como a Apple. Estás a tentar dizer que és tão sofisticado ou que tinhas um design tão bom como maçãs. Então, você está tentando ganhar um pouco dessa mesma reputação. Mas é claro que eles são um pouco coxos também porque quando você está seguindo as tendências torna o seu trabalho menos distinto, ele também data ele para um determinado período, e também aborrece você está pensando porque você está começando a apenas copiar outras fontes visuais em vez de realmente tentar criar uma nova linguagem visual própria. Então, você quer começar a partir de um senso de sua própria marca, quais são seus valores, quais são suas personalidades, e então a classe anterior desta série passou por algumas perguntas detalhadas que irão ajudá-lo a articular isso, coisas como um mapa de personalidade ou seus métodos de engajamento que você pode usar. Então, você precisa ter uma noção do que é sua marca e do que você é antes de entrar em design visual. Então, uma vez que você está lá, o primeiro passo para mim é sempre um quadro de inspiração onde eu começo a tentar descobrir onde eu começo a tentar colocar meus materiais em um formato digital. Então eu preciso capturar cores, eu preciso capturar fotografia, eu preciso começar a ver todas essas coisas juntos para que eu possa começar a visualizar o que meu site vai tomar forma. Então, Dropmark é uma ótima ferramenta para isso. Aqui está uma coleção que eu estava fazendo para o site de protesto, e aqui está outra recente de mais de uma marca de estilo de vida, e você pode ver que alguns deles eu estou apenas pegando para a cor e alguns deles são eu estou pegando para exemplos de fotografia. Então, por exemplo, queremos que os livros que estavam vendendo sejam brancos e queremos mostrá-los em um fundo silhueta. Isso permite que meu cliente visualize como ele vai ficar. Mas outras coisas, eu nem sempre mostro quadros de humor ou placas de inspiração para os clientes porque não está claro por que você escolheu cada imagem lá dentro. Então, por exemplo, este vestido à direita, Eu escolho porque eu tenho a cor azul que eu quero usar. Mas se eu mostrar este quadro de humor a uma cliente, ela pode pensar, vamos mostrar fotografia de moda no site? Eles nem sempre entendem. Então, realmente sua placa de inspiração deve ser apenas para você para que você tenha cores, que você tem fontes, você começa a ter uma noção de qual família seu site vai cair em. Então começar por aí, eu gosto de Icebergs porque novamente ele permite destacar certas fotos como favoritos e ele permite que você agrupá-los, e você quer coletar um monte de fotos que você pode usar, tentar obter as reais. Então, se você sabe que você tem um monte de fotos de usuários que vão para o seu site, vá em frente e coloque-os em seus quadros de inspiração, para que eles começam a se tornar parte da mistura. Se você não fizer isso, então vá em frente e procure por assunto semelhante tiro da maneira que você planeja atirar neles. Você quer começar a coletar cores. Assim como você navega na web, seus blogs favoritos, seus sites favoritos, basta procurar cores e pegar as imagens que parecem boas na web. Design de impressão, design de interiores, web design, todos têm maneiras distintas nas quais você usa cores. Então você quer tentar encontrar ativos que já estão em um formato digital, que você saiba que essas cores vão renderizar bem ainda na tela. Então você também quer começar a coletar tipografia que fala em tons semelhantes à voz da sua marca. Então, você pode procurar por tipografia na rua, você pode olhar para a sinalização, você pode olhar para a embalagem. Basta começar a visualizar o que vai refletir, novamente, sua personalidade raiz e valores de sua marca. 4. Cores expressivas: Ok, avante para a cor. Eu realmente gosto de começar Visual Design decidindo minha cor. Esta marca é clara ou escura? Brilhante ou macio? Porque as cores escolhidas criam uma forte impressão não verbal. Então, pense na celebridade que você pode escolher para representar sua marca. Eles são silenciosos ou barulhentos? Eles são de rosto fresco ou resistido? Nas diretrizes da sua marca, você gostaria de ter uma descrição do seu esquema de cores geral, seja pastéis, cores brilhantes, neutros ou qualquer outra coisa. Então, à medida que entramos nos detalhes, precisamos entender nosso meio. Então, a coisa que ainda me surpreende depois de anos e anos no campo é apenas RGB versus CMYK, cor aditiva versus subtrativa. Que na tela, vermelho azul e verde juntos fazem branco. É a luz realmente brilhando para fora da tela e para dentro de seus olhos, não é a luz brilhando no papel e sendo absorvida pela tinta. Então, eu penso no web design como uma oportunidade de usar um monte de cores mais brilhantes que você não tem de outra forma. CMYK não pode fazer esses azuis e verdes brilhantes da Internet que você pode fazer no RGB. É como cores livres, você tem que pagar um monte de dinheiro e taxas Pantone são em tintas para obter essas cores particulares em impressão. Então, eu penso em que design muito parecido com artistas trabalhando na luz. É como Dan Flavin fazendo esculturas com luz, James Turrell, estas são algumas das referências de como eu penso sobre web design. Uma boa idéia é manter uma roda de cores perto de você quando você está tentando escolher cores para que ela refresque sua memória, que você não seja apenas como azul, vermelho, as cores que você pode nomear, mas você está realmente vendo todas essas estranhas entre cores que não têm nomes. Então, há todos os tipos de formatos diferentes para rodas de cores, você pode apenas pesquisar pela Internet e ver qual deles fala com você, e novamente procurar um que é RGB que é realmente feito em um meio no qual eu estarei trabalhando. E olhe para um por um tempo e veja quais cores parecem representar sua marca. Eu gosto de escolher uma cor como a minha cor base. Então, veja a que cor seus olhos continuam voltando. A cor é uma coisa do cérebro direito, é visual, não é verbal, mas eu sempre gosto de ir à esquerda e considerar seu simbolismo também. Então, você pode pensar em todas as coisas que você já viu que eram azuis. Como eles fazem você se sentir? Este é o simbolismo agregado de uma cor. E, obviamente, há diferenças culturais com a cor, então você precisa entender isso e pesquisar seu público. Então, vamos apenas passar por algumas das principais famílias e suas conotações, tanto quanto as conhecemos no Ocidente, em ordem de popularidade. Estes passos são todos do manual de cores Stephen Sidelingers. Os diagramas são do site colorido graficamente falando e de um estudo de cores Kissmetrics. Então, o azul é a cor mais apreciada dos adultos, mas é apenas o número cinco com crianças, o que é engraçado. É legal, é calmo, é seguro, é clássico. Você raramente, se alguma vez, terá um cliente rejeitar azul. É bastante legível em branco ou como tipo invertido. Vermelho é o próximo mais popular, é quente, é vibrante, é forte, é atraente, é ótimo para chamadas à ação ou como uma cor de acento. Você sempre terá o maior número de cliques em grandes botões vermelhos. Também é supostamente atraente para as papilas gustativas como frutas vermelhas doces, é por isso que muitas marcas de doces são vermelhas. É legível em branco, não é tão legível em preto. Verde é o número três com adultos, mas são apenas seis com crianças. Há uma grande diferença entre verduras amarelas e marines azuis, mas em geral você pode dizer que é natural e animada e também é bastante legível. Roxo é o número quatro no geral, mas é a única cor que tem uma forte diferença para homens e mulheres. Em um estudo, 23 por cento das mulheres disseram que o roxo era sua cor favorita, mas zero por cento dos homens. Muitas vezes é usado para transmitir espiritualidade, realeza ou relaxamento como lavanda. Amarelo é o número seis com adultos, é alegre, emocionante e atenção recebendo. Na minha experiência, é muito polarizante. As pessoas adoram amarelo ou odeiam. Se eu quiser usar amarelo para uma marca, eu sempre perguntei primeiro ao cliente, como você se sente sobre amarelo? É super legível com preto e é por isso que é usado em sinais de alerta. Teal é a nossa última cor, que está incluída como um olhar de lembrete entre as cores, é útil para a web, você pode empurrá-lo para azul ou verde e combiná-lo com quase qualquer coisa. É calmante, claro e afável. Novamente, aqui está o estudo de roxo foi a única cor com uma grande discrepância entre homens e mulheres. Então, isso é algo a considerar se você foi direcionado para não tornar a marca muito feminina, mas eles estão dizendo para você usar o roxo como sua cor da marca, você pode ter um pouco de desconexão lá. Laranja é outro, é o número cinco com adultos e o número quatro com crianças, é visto como extravagante, quente e brilhante, mas em um estudo de 2011 foi a cor menos favorita de 22% dos homens e 33% das mulheres. E é também a cor vista mais frequentemente é barata ou barata, que pode ter algo a ver com isso. Mas parece entrar e sair de moda porque é uma cor contrastante ao azul. Então, ele é usado por marcas que querem ser vistas como uma alternativa. Há alguns bancos que usam laranja porque todos os bancos usam azul. Então, isso é algo a considerar, mas apenas observe se parece certo para você neste momento da história. A cor também é uma maneira que você está trazendo emoção para seus layouts. Então, aqui está um gráfico divertido de como diferentes empresas estão escolhendo cores para transmitir sentimentos diferentes. Tome-o com um grão de sal, mas há uma razão pela qual tantos bancos estão usando azul, e isso adiciona emoção aos seus projetos ou que pode ser por isso que algumas pessoas têm medo dele. Há também alguns estudos que dizem que as mulheres nomeiam muito mais variações de cor do que os homens. Então, se você está escolhendo muitos neutros, você pode ter pessoas diferentes em seu público pegando neles ou não. Então, novamente, eu gosto de escolher uma cor como minha base. Então, eu penso nisso como o principal sentimento que eu estou tentando transmitir com minha marca. Então, digamos que eu escolha este azul popular. Você pode parar por aí. Se você tem apenas uma cor com preto e branco, isso lhe dá muito para trabalhar. Aqui está o guia de voz e tom do Mailchimps e você pode ver que eles estão fazendo muito com apenas uma cor. Eles realmente são se você descer o navegador esquerdo deste site eles estão usando uma cor diferente para cada seção. Então, ele cria um pouco mais de vivacidade com este arco-íris de cores, mas para cada layout, eles estão indo bem com apenas um. Então, a partir de sua cor base, se você quiser ir mais longe em ordem de complexidade aqui estão algumas opções, você pode adicionar tons e tons, você pode adicionar cores análogas, você pode adicionar cores contrastantes, ou você pode até tentar cores discordantes. Então, matizes e tons, 0-255 é uma ferramenta muito boa onde mostra aqui alguns códigos hexadecimais para cores tons e tons da mesma cor. E isso é útil porque uma cor que é boa para um botão não é o mesmo tom que vai ser bom para uma cor de fundo ou para a cor da borda. Então, muitas vezes você precisa em especialmente um design de aplicativo versus design de site, muitas vezes você precisa de mais cores do que você pensa e você precisa de um monte de tons e tons da mesma cor. Há também ferramentas que irão sugerir cores análogas, cores contrastantes, combinações que você não encontraria necessariamente por conta própria e que você não escolheria. Este é um tipo de tijolo vermelho e como um azul pavão tealish, como se você não pensasse nessas cores fora de mão, mas quando você está mudando para as boas ferramentas de alguém que vai ajudá-lo a encontrá-las. Ian Storm Taylor tem um bom artigo chamado “Nunca use preto” sobre como você pode usar esses tons e tons para reforçar sua marca, mas o aplicativo do Facebook é todos os tons de azul do Facebook em vez de preto ou cinza médio. Eles só estão usando saturações diferentes. Novamente, mesmo que você faça, você normalmente precisa de mais cores do que você pensa. Design de aplicativo, você tem destaques, você tem alertas, você tem erros, mesmo nos temas de texto sublimes ainda há um monte de cor acontecendo mesmo se você apenas pensar nisso primeiro sua primeira impressão é que é apenas um aplicativo cinza. Slack é um exemplo realmente agradável de cor também que eles usam este tons de ameixa de ameixa para o seu nav lado com acentos desta cor salmão e azul-petróleo claro. Então, você realmente não percebe isso depois de usá-lo por um tempo, ele só se sente como luz da noite ou algo assim, mas ele realmente cria um clima realmente único para este aplicativo. Aqui está outro site bonito dos Ministérios Urbanos de Durham, também usando cores para adicionar muita emoção e beleza a objetos baratos muito cotidianos. Aqui está um site para turismo em Bruges. Então, você verá que eles estão usando cores vivas supersaturadas para transmitir a diversão que você vai ter em suas férias e como este lugar é ativo, quanto há para fazer. Assim, a cor é usada para reforçar o sentimento ou a importância do site. Novamente, grandes botões vermelhos são sempre uma clara chamada à ação e aqui está um com um uso ousado de amarelo como um fundo que lhe dá um todo é uma sensação muito diferente do que apenas um fundo branco liso. XOXO é uma conferência para designers e outras pessoas criativas e seu site inicial foi tão louco roxo ou azul gradiente que transmitiu a idéia de que este é um lugar para pessoas criativas. A cor geralmente aumenta os cliques. Então, as pessoas que fazem anúncios de banner dirão isso que quanto mais brilhantes você os tornar, mais cliques eles receberão. Então, você pode fazer isso novamente com um grão de sal mas adicionar cor ao seu design muitas vezes aumentará os cliques. A última advertência é que, claro, as cores não têm a mesma aparência em todas as plataformas, você vai querer testá-las em Mac e PC. No PC suas cores tendem a ser um pouco mais saturadas, um pouco mais escuras. Mac tendem a ser um pouco mais largo, pode ser um pouco apagado. Portanto, tenha cuidado se você estiver usando cores muito claras em um Mac e também seja realmente especialmente com laranjas e marrons. Eu nunca vou esquecer um site que eu projetei para um caminhão de café e eu orgulhosamente fui para mostrá-lo a alguém em um PC e parecia horrível. Então, você sempre quer ter cuidado com isso qualquer coisa na família amarela e verde. Então, apenas para referência, vamos começar a fazer este arquivo de ativos. Então, no Illustrator, é bom ter um arquivo grande com todas as peças comuns que você usará para o design do seu site. Então, aqui está Teehan e Lax lançaram um monte de modelos e kits do Photoshop e aqui está um exemplo em uma longa postagem de blog que escreveram descrevendo o processo de design para o meio, o que vale a pena ler. Aqui está um exemplo de seu arquivo de ativos de interface do usuário que eles criaram. Então, à medida que você começar a escolher suas cores, cole-as no arquivo de ativos do Illustrator e comece a ver como elas se encaixam. Então, vá em frente e inicie um novo arquivo no Sketch, você deseja usar o modelo de web design que ele tenha as diferentes placas de arte para cada um dos seus pontos de interrupção responsivos e você criará uma paleta de cores no página de símbolos. Você verá duas páginas no documento padrão, há uma onde você criará seus layouts reais e , em seguida, há uma segunda que contém todos os símbolos. Se estiver fazendo isso no Illustrator, você pode criar um arquivo de ativos separado ou apenas um quadro artístico de ativos ou símbolos no arquivo. Você também pode usar algumas ferramentas web, como Kuler ou ColorLovers, para pesquisar e configurar paletas, se quiser. 5. Tipografia expressiva: Em seguida, vamos trabalhar na tipografia que expressa a personalidade do site. Então, como escolhemos os tipos de letra? Bem, há algumas fontes que são inapropriadas. tipografia prática tem um bom exemplo disso. Um roteiro chique seria inapropriado se você estiver dirigindo 80 milhas por hora, e da mesma forma, há algo que simplesmente não será legível na tela. Legibilidade significa que você pode realmente distinguir a forma de cada letra. Então, quando você estiver observando seus layouts no Illustrator ou em outro programa vetorial, eles parecem perfeitos, mas quando você os renderiza como um bitmap de 72 dpi, você começa a ver onde a suavização de serrilhado está tentando sombrear esse grade de pixels não está realmente fazendo justiça à forma de letra. Não estamos trabalhando em pedra, não estamos esculpindo letras com um cinzel. Estamos pintando no papel. Temos que entender o nosso meio. Não vamos esculpir letras em pedra com um cinzel ou pintá-las em papel com um pincel. Estamos sombreando grades de pixels com código. Certos rostos parecem horríveis em uma grade de 72 dpi. suavização de borda tenta renderizar arredondamento ou traços que são mais finos do que um pixel, mas não está fazendo a justiça de formato de letra. As qualidades que tornam Garamond ou Bodoni especiais são perdidas em baixa resolução. Um tipo Web legível tende a ter formas retas, uma grande altura x, contadores abertos e um peso de linha uniforme. Isso é mais importante para rótulos de corpo de texto e outros elementos pequenos, um tamanho maior que você tem mais flexibilidade. telas de alta resolução alteram todas essas regras, mas elas ainda não são universais, então ainda precisamos reconhecer 72 dpi. A grade de pixels também é por isso que você vê tão poucos itálico na Web. A linha diagonal simplesmente não parece muito boa em 72 dpi. Lucy de Grant nem sequer oferece itálico. Serif itálico foram projetados como rostos complementares com um monte de caráter distinto. Sans-serif itálico são basicamente apenas versões inclinadas. Então, eles geralmente não dão ênfase suficiente. Quando você estiver definindo suas fontes e escolhendo fontes apropriadas para sua marca, basta pensar na mesma topografia que você pode ter aprendido em impressão ou design gráfico. Se você quiser que uma linha de texto seja lida como uma linha divisória ou que as maiúsculas se destacem como formas geométricas, você pode usar todas as letras maiúsculas. Se você quer que ele seja mais legível em tamanhos pequenos ou para alguém com visão que não é tão bom, minúsculo tem os ascendentes e descendentes que dão uma silhueta mais distinta que é mais legível. É claro que você pode escolher fontes ou fontes por razões práticas que uma fonte condensada permite que você encaixe muito mais palavras no mesmo espaço. As manchetes podem ser um pouco mais aventureiras porque você está trabalhando com elas em tamanhos maiores. Chuck Walton tem uma série muito boa de artigos onde ele está brincando com a manchete. Diferentes desenhos das manchetes para cada artigo. Jason Santa Maria também explora design editorial exclusivo para cada artigo em seu site, e incluindo a série de gramas de doces aqui é um de Jesse Arrington onde ela escreve a manchete em doces. Então, lembre-se de que a tipografia também pode ocorrer fora do computador. Se você está procurando por tipo para refletir um certo período ou um certo sentimento, você pode olhar para Jason projeto paralelo chamado Typedia, onde é uma enciclopédia inteira e você pode classificar através de tipos de letra por designer, por período histórico, por estilo e realmente obter uma sensação de um nível muito mais profundo de informações sobre um tipo de letra. Temos sorte agora porque agora podemos hospedar esses tipos de letra na Web. Antes, nos velhos tempos da Web, teríamos que exportar cada manchete chique como uma imagem e fazer upload para o servidor com o resto de nossos arquivos, mas agora há muitas empresas que descobriram com os requisitos técnicos e de licenciamento para fazer isso por nós. Você pode olhar para a tipografia de nuvem que tem fontes da Web que parecem boas até mesmo até nove pixels em itálico. Você pode olhar para Typekit que tem montado um monte de grandes listas para alternativas para tipos comuns rostos ou alguns dos favoritos da multidão. Você pode olhar para MyFonts onde você pode navegar em uma enorme biblioteca de fontes da Web que você pode hospedar em seu próprio servidor e, em seguida, o Google Fonts é uma maneira rápida e fácil usar um monte de fontes de código aberto e incluí-los em seu com apenas uma linha de código. Claro, há problemas de plataforma cruzada com o tipo dois. Então, à esquerda está a nossa versão para PC da mesma fonte que está à direita e você pode ver que eles quase não têm a mesma aparência. Então, com cada tipo de letra que você escolher, você realmente precisa testá-lo em um navegador Mac e em diferentes versões do Internet Explorer e no Firefox, versões mais antigas do Firefox, mas graças a Deus Typekit nos permite testar todos Tudo isso em um só lugar. Então, esse é outro ótimo lugar para começar a escolher tipos de letra da Web por esse motivo. Você também quando você está escrevendo seu CSS ou especificando-o para o seu programador, você deseja especificar alguns fallbacks. Então, antes de carregar a fonte da Web ou no caso de ela não carregar, o que você usaria em vez disso. Então, estes são chamados pilhas de fontes então eu poderia dizer usar Franklin Gothic meio, mas se isso não está disponível usado Franklin Gothic, bla bla bla, fallback para Verdana ou outra coisa. Você quer, claro, escolher tipos de letra que refletem a personalidade da sua marca e as características mais importantes. Então, pense em quanta personalidade um tipo pode carregar. Aqui está um ótimo site chamado Obrigado a Type Designer sobre o que se os designers de marca tivessem acabado de usar fontes do sistema e ver como esses logotipos seriam diferentes. Será que eles realmente têm o mesmo apelo universal e duradouro se eles foram apenas colocados em fontes padrão de estoque? Então, faça alguma pesquisa e realmente pense em como você pode transmitir os valores de sua marca. Aqui está um site que faz a China vintage e por isso eles estão usando títulos pintados à mão para transmitir o charme artesanal de sua cerâmica. BK Swiss ou BX Swiss está usando Helvetica para transmitir neutralidade e modernismo. Use All Five é usar avant garde, sans-serif para mostrar sua modernidade e usá-lo com transparência para transmitir uma sensação de mistério. Essence está usando didot para parecer elegante e clássico. Oscar saúde está usando um serif laje para parecer humano, mas ainda mais web savvy. I'm Not There, o filme usou tipografia grunge que é a qualquer momento que você está cortando ou angustiando o tipo para transmitir o tema dos filmes de dissolução. Então, a última coisa é que uma vez que você escolheu algumas fontes e você está trabalhando com os layouts de página reais, há algumas preocupações com a legibilidade, que é a rapidez ou facilidade que você é capaz de ler o texto. Então, geralmente, há um certo comprimento de linha que é considerado legível e algumas pessoas dizem que é entre 45 e 75 caracteres. Algumas pessoas dizem que você pode ir até 90 e as velocidades de leitura não diminuem, mas nada mais do que isso e é considerado para causar fadiga para o olho ter que viajar todo o caminho de volta para o início da próxima linha para encontre por onde começar. Então, o que você pode fazer, este é um truque de Trent Walten novamente, é soltar um caractere marcador depois de 45 caracteres, e então soltar outro depois de 75 ou 90 e, em seguida, contanto sua linha se rompa entre esses dois marcadores que você sabe que isso é um bom comprimento para o seu parágrafo. Então, se você estiver fazendo colunas mais estreitas, você sabe que você pode apertar a liderança, mas uma coluna mais larga vai precisar de um pouco mais de liderança porque o olho tem que ter um pouco mais de espaço para fazê-lo de volta até o início da próxima longa fila. Se você está batendo o tipo para fora, você pode precisar de um peso mais leve do que em seu texto normal em um fundo branco que é o oposto da impressão porque novamente, o branco é luz brilhando em seus olhos que está comendo em o tipo escuro onde é como se você estivesse imprimindo este layout, o preto seria tinta, que estaria sangrando para o tipo knockout. Então, é o inverso. Você quer garantir que haja contraste adequado para evitar a tensão ocular. Existem ferramentas na paleta de desenvolvedores que vão ajudá-lo a testar isso uma vez que você tem um protótipo HTML, mas apenas tentar usar seu julgamento quando você está fazendo maquetes que não vai ser difícil para as pessoas ler. Uma última coisa é que sublinhar é um atraso da idade da máquina de escrever. Reduz a legibilidade porque estás a perder. Se você piscar os olhos, você pode ver que você não pode ver os descendentes neste parágrafo de texto, bem como quando ele é sublinhado. Então, sublinhados eram apenas em torno de máquinas de escrever e você pode usar cor, você pode usar ousadia. Existem outras maneiras de indicar comprimentos e ainda ter seu site ser muito utilizável. Até mesmo o grupo de pesquisa de Jacob Nielsen, que é a principal empresa de pesquisa de usabilidade, removeu os sublinhados de seus comprimentos. Então, assim como o Google fez recentemente. Então, se alguém está tentando dizer que você deve sublinhar seus links, você pode dar a eles o grupo Nielsen Norman como refutação. Ok, então, agora vamos configurar nosso sistema de tipos para pesquisar e escolher algumas fontes que podem servir para sua marca e, em seguida, entrar na sua página de símbolos ou arquivo de ativos e testar algumas amostras. Veja como essas fontes funcionam como manchetes , parágrafos, chamadas. Você pode precisar de mais de um para servir propósitos diferentes. Experimente-os também em guias de botões e elementos interativos. Você também pode tentar Typecast ou Typekit para ver como esses rostos realmente ficarão no navegador. 6. Imagens poderosas: A última peça importante do nosso design visual é a imagem. Fotografias bem escolhidas podem levar um design. Imagens contam sua história em vários idiomas com velocidade e emoção. Estas fotografias de Rosie Holtom de sem-teto como eles desejam ser vistos, mudaram totalmente a história de como você percebe a comunidade de sem-teto. Mas antes de entrar em busca de imagens, tenha certeza de que reuniu seus pensamentos. Volte para as diretrizes de sua marca e faça algumas anotações sobre o tipo de imagens que sua marca capturaria. Eles seriam fundos atmosféricos ou retratos pessoais? Deliciosas naturezas-mortas ou ilustrações encantadoras? Você gostaria de mostrar estilos de vida aspiracionais ou talvez mapas? E sorte sua, a web está finalmente na largura de banda onde essas imagens serão carregadas em milissegundos e não em minutos. Http significa protocolo de transferência de hipertexto que era tudo o que podia lidar nos primeiros dias, mas agora estamos vendo mais e mais sites contam suas histórias através imagens e até vídeos de fundo como este. Se você não tem o orçamento de tempo ou acesso a fotografia personalizada, existem alguns recursos online que podem ajudar muito. Mas não exclua a possibilidade de contratar um fotógrafo e tirar algumas fotos profissionais e personalizadas, eles irão atendê-lo bem por muitos anos. No arquivo de recursos, porém, eu listei alguns dos meus lugares favoritos para fotografia de código aberto e reutilizável. Você também pode usar imagens do Google para pesquisar e filtrar as imagens em qualquer um desses sites de código aberto, colocando os pontos do site e, em seguida, url na frente de seus termos de pesquisa. Fotógrafos colocam muito trabalho em suas imagens. Então, novamente, certifique-se de que você tem os direitos certos para as imagens que você escolher. Mas é claro que você vai ter que lidar com algumas imagens ruins. Se você está organizando um evento que eles só podem ter fotos da câmera do ano passado, você pode apenas ter um tiro de cabeça vacilante e alguém se recusa a tirar um novo. Então você vai ter que lidar com isso. O número um é cortar. Tente encontrar as melhores partes da foto e apenas se concentre nisso. Você também pode borrar a coisa toda e usá-lo como uma foto de fundo e colocar algum texto no topo. Você também pode vir acima com alguns filtros de photoshop particular ou estilos de coloração que podem fazer com que todas as imagens em seu site tenham uma sensação coesa, ou você pode gastar algum tempo e retocá-lo. Certifique-se de que você orçamento para isso porque é o mais demorado de qualquer uma dessas opções. A outra metade das imagens é a iconografia. Veja os símbolos definidos para um ótimo exemplo de como isso pode ser usado para trabalhar em seus designs. Um conjunto simples de semântica, então se você digitou a palavra “amor” ela se converte em um coração, mas um leitor de tela ainda vai ver a palavra amor e ser capaz de ler isso para os cegos. Há também serviços como iCoMoon onde você pode construir sua própria fonte de ícone, se você estiver criando um conjunto personalizado de símbolos para um site. Há também Iconic que tem um novo conjunto de ícones projetados com legibilidade em mente, e agora estamos recebendo a capacidade de usar svg. Então, a partir do ilustrador, se você projetar suas próprias ilustrações, você pode realmente salvá-las como arquivos vetoriais e servir esses vetores na web para que você não precise se preocupar com resoluções de bitmap tanto. E assim como a tipografia, ícones também têm problemas de legibilidade. Portanto, certifique-se de que seus ícones estão renderizando bem exatamente no tamanho que você planeja usá-los. Então, vá encontrar as imagens que você vai usar em seu site. Você pode pesquisar ou filmar sua fotografia e novamente eu forneci um monte de recursos para encontrar fotos de estoque ou fotos de código aberto na lista de recursos para esta classe, e então você iria em frente e retocar ou cortar ou filtrá-los como você está planejando para o seu site, para que suas maquetes tenham um visual realista. Vá em frente e pesquise ou projete seus ícones, para encontrar os ícones que você deseja usar, a fonte do ícone que você pode usar e coloque tudo isso na página do seu símbolo ou seu quadro de arte de ativos para que você possa começar a ver como tudo olha junto. 7. Design responsivo: Certo, terminamos nossos recursos visuais e estamos prontos para seguir em frente com o design. Mas espere aí antes de pular direto para os layouts de página porque o web design responsivo muda muitas coisas. Nossa leitura de fundo, se você ainda não passou por esses livros, é o Responsive Web Design de Ethan Marcotte e o Mobile First de Luke Wroblewski. Então, o que é essa web responsiva? Bem, basicamente quando começamos a ter um milhão de dispositivos diferentes para serem projetados, começamos a perceber que as coisas que ficavam bem em nossos layouts de desktop não necessariamente se traduziam bem em dispositivos móveis. Então, um belo site de área de trabalho com grade exigiu um zoom, um rolagem e um toque para chegar apenas à próxima página. Assim, o web design responsivo refluindo nosso layout para caber no contêiner pode fazer as coisas com apenas um clique de distância. Então, começamos a pensar mais sobre grades e mais sobre refluxo de layouts e como eles seriam apropriados para cada dispositivo, mas então também tivemos que lidar com uma multiplicidade de novos hardwares e novos dispositivos todos os meses. Assim, os processos de design mudaram como resultado disso. Mudei para o que chamo de layouts de Frankenstein que são combinações de todas as peças principais na página. Outras pessoas já falaram sobre colagens de elementos, que são uma idéia semelhante e tudo vem do fato que um site é muito mais complexo do que nossas coisas anteriores. Um cartaz, você não precisaria de um guia de estilo. É uma coisa. Você está totalmente no controle. Você envia para a impressora e está feito. Um livro, você tinha que começar a pensar em sistemas. Você queria que uma manchete em uma página fosse o mesmo estilo de uma manchete em outra página, mas os sites são infinitamente mais complexos. O conteúdo pode ser uma promoção em uma página e , em seguida, o artigo completo em outra página e, em seguida, arquivado em outra seção. Precisamos ter sistemas para todos esses diferentes tipos de estilos e propósitos e dispositivos agora. Então, tivemos que começar a pensar em design modular que pudéssemos focar nas peças, mas percebendo que elas iriam entrar em vários layouts diferentes. Algumas pessoas vieram com telhas de estilo como uma resposta a isso. Então, eles são um pouco mais específicos do que um quadro de humor. Um conselho de humor tende a obter aprovação, as pessoas dizem “Sim, eu gosto, vamos fazer o quadro de humor B”, mas quando você voltava com o layout real do site, eles diziam “Isso não é o que eu estava esperando”. Então, um bloco de estilo era um pouco mais específico onde você teria um título real, você teria cores reais, imagens e botões e ativos de interface do usuário na página, mas não era um layout completo. Então, estes são um passo útil, mas novamente eu acho que eles estão perdendo um pouco de especificidade que ajuda ambos os clientes e nós como designers a descobrir o que nossa visão realmente é. Então, Dan Mall escreve sobre colagens de elementos e como ele começou a fazê-las eu acho que em Reading é Fundamental. Então, aqui está um exemplo de como ele os fez no redesenho da Entertainment Weekly que é todas as peças principais. Mesmo antes de conhecer quaisquer layouts de página ou requisitos de página, você sabe que você vai ter uma imagem de uma celebridade e você vai ter um título. Então, você pode criar essa seção e as cores em que ela pode aparecer. Você pode começar a tomar algumas decisões de que as revistas aparecerão silhuetadas em um fundo colorido ou como seus botões seriam parecidos, como seus principais widgets de compartilhamento seriam, quais ícones você vai usar. Então, estas são todas as peças juntas e, como você pode ver, dá a você uma boa idéia da personalidade do site mesmo antes de estarmos nos movendo para layouts. Aqui está um que ele fez para TechCrunch que você pode ver à esquerda é a versão completa. É muito longo. Ele está realmente entrando em detalhes sobre um monte de partes diferentes do site e à direita é de perto; os widgets de compartilhamento, as tags, os títulos, as peças mais importantes do site. Então, colagens de elementos não são placas de inspiração. As telhas de estilo não são placas de inspiração. Você não quer ser captura de tela outras coisas e colá-lo em seu layout porque ele está dando tanto ao cliente quanto a você uma percepção equivocada de quão longo no processo você realmente está. Você quer fazer isso como seus primeiros rascunhos reais das peças do design. Então, este é um quadro de inspiração onde eu coletei algumas cores que eu gosto, alguma inspiração tipográfica, alguns exemplos de usuários, apenas alguns estilos de fotos , mas então uma colagem de elementos será desenhada a partir disso. Então, eu comecei a transformar isso em fontes reais que eu poderia usar, opções de cores reais mostrando como eu poderia cortar as fotos, quais estilos de fonte eu poderia usar e não há layout. Você pode ver que estes são apenas colados na página. O cliente pode dizer: “Isto é um pouco flutuante.” Eles podem ver que é uma luz, eles podem pensar nisso como um layout, mas é realmente apenas sobre você começar a projetar os vários ativos da interface do usuário. Então, aqui está outro exemplo de onde eu mudei de um bloco de estilo que foi útil e eu fiz três destes e eles ajudam o cliente a ter uma noção de qual família de cores eles preferiram e eu também fiz composições para combinar cada um dos blocos de estilo e Então, a partir desse feedback, eles escolheram um bloco de estilo e, claro, uma composição diferente e assim, eu colagem que na próxima iteração foi um layout de Frankenstein. Então, eu chamo isso de Frankenstein só porque é como três páginas todas em uma e, neste caso, na verdade, era a página inicial mais um formulário de inscrição, mais o perfil de usuário mais o painel do comerciante tudo em um. Então, eu fui capaz de continuar revisando e polir este design e em seguida, usá-lo como minha referência para todas as páginas subsequentes em todo o site. Então, o cliente entendeu que era assim que todas as partes de seu site iam se parecer e eu tinha um bom quadro de referência para garantir que cada página subseqüente correspondesse a esta página inicial do Frankenstein. Mas lembre-se do ponto disso: por que estamos fazendo isso? Você está tentando obter feedback. Então, estes são todos designers diferentes que compõem diferentes tipos de entregas que servem o projeto específico e permitem que eles obtenham o feedback de que precisam naquele momento. Então, uma telha de estilo é apropriada se você quiser saber se eles gostam de suas cores ou não. Um layout Frankenstein é mais apropriado se você realmente quiser obter algum feedback de design sem ter que projetar um site inteiro. Se você trabalha em uma agência de publicidade sim, você vai trabalhar com grandes clientes e eles vão querer ver conceitos totalmente acabadospara ver conceitos totalmente acabados - você pode fazer três projetos de sites separados e dois deles serão jogados fora. Mas clientes e designers de menor escala não têm tempo para isso. Então, essas são todas tentativas de obter o feedback que você precisa sem ter que fazer tanto trabalho desperdiçado. Então também é bom porque você começa a elaborar esses elementos realmente importantes. Então, eles vão acabar com seis, oito e 10 rodadas de revisão versus apenas o seu padrão; uma maquete e duas revisões de rodadas que muitos contratos de design estão acostumados a fazer. Certo, então agora vamos projetar nosso layout de Frankenstein. Você vai projetar um mash up de suas páginas mais importantes, então você começa a abordar todos os elementos. Então, no Sketch ou Illustrator, você pode começar com sua placa de arte de desktop se quiser se divertir com o layout mais complexo ou pode fazer sua placa de arte móvel se quiser ter mais restrições. Então, faça uma maquete dos seus elementos mais importantes para o seu site; botões, menus , abas, manchetes, parágrafos, chamadas, qualquer coisa que lhe dê a melhor ideia de como todas essas peças vão ficar juntas. 8. Layouts sólidos: Ok. Você terminou seu layout de Frankenstein e recebeu alguns comentários. Agora, estamos prontos para mudar os layouts individuais. Então, pense sobre o propósito de cada página. O que você quer que o visitante faça? Como você vai convencê-los a fazê-lo? Os quadros de arame ou contornos de conteúdo devem fornecer uma idéia geral da hierarquia de informações, mas é trabalho do designer visual tornar as prioridades para cada tela cristalinas. Pense nas primeiras impressões, alguém vai ter com cada tela e depois pense sobre o conteúdo de suporte que você vai adicionar ou projetar para seguir isso. Então, a principal chamada à ação, a coisa mais importante em muitos casos. É tudo sobre atenção, onde seus olhos vão primeiro, depois segundo, e depois terceiro. Há estudos de rastreamento ocular que podem ajudá-lo a entender onde as pessoas olham. Então, aqui, o preço está fazendo um bom trabalho de chamar atenção e também o rosto da mulher à esquerda. A manchete parece que está a ter alguma acção. Mas se você quiser que essas ofertas de laptop em destaque chamem atenção, elas não estão se destacando. Aqui está um exemplo de contato visual, e é uso, e é importante na página. As pessoas sempre procuram o rosto na página primeiro. Então, você pode ver aqui, eles estão ampliando o bebê. Em seguida, eles estão olhando sobre a manchete, o texto de apoio, a foto do produto e, em seguida, no logotipo. Você também pode traçar os olhos de forma linear. Então, aqui é onde um usuário olhou primeiro, segundo, terceiro, passou algum tempo e atravessou. Então, pense nos olhos como desenhando um caminho na tela. É um bom caminho claro ou é um pouco esquizofrênico? Se eles estão lendo, o caminho do olho tende a seguir em F. Então, eles estão indo da esquerda para a direita em linha por linha abaixo da página como se você estivesse lendo um livro. Então, este é o padrão para leitura e desnatação. Existem várias técnicas que você pode usar para levar o olho do visitante ao redor da página. contato visual é o principal. Você vai primeiro para o rosto da garota e depois para baixo pelo centro ou para baixo. contraste é outro dos principais. Você não pode ajudar, mas olhe para este laranja brilhante no fundo preto e , em seguida, também o campo de e-mail branco em cima do fundo laranja. Cor especialmente, vermelho, chamando a atenção e olhar para estes pequenos pontos de vermelho como eles levam o olho ao redor da página, as peças mais importantes. Então, espaço em branco adequado para dar o olho em algum lugar para descansar entre todos esses apelos à ação e todos esses pontos focais. Você está atraindo alguém com um forte ponto focal. Neste caso, é um vídeo animado, a parede que pendura no espaço e gira. Você também está usando alinhamento. Aqui está um layout super mínimo, mas você ainda tem uma sensação de que seu olho quer viajar ao longo do nervo superior ou para baixo o artigo chama outs por causa da maneira que eles estão alinhados em uma grade rigorosa. Você também pode usar a ferramenta de escala. Então, enorme está lançando com um enorme H e levando seu olho de lá para todo o conteúdo secundário. Porque o design está criando o interesse, mas então ele também está tentando manter o interesse do visitante ou direcioná-lo para outro lugar, e então recriar o interesse assim que eles começam a ficar um pouco entediados. Dê qualquer layout para fora o teste de squint. Isso é algo que você faz na escola de arte e é algo que se mantém no web design. Mesmo quando você pisca os olhos, você ainda pode ter uma noção do que é a principal chamada de ação na página. Então, olhando para alguns exemplos de layout diferente, você pode ver que a primeira impressão do site do aplicativo de papel é informá-lo, sim, é um aplicativo para iPhone, mas eles também estão fazendo algumas coisas com as imagens. Então, eles estão mostrando um jornal em segundo plano para dar a você uma idéia do que este aplicativo é. É como um jornal. Eles estão mostrando seus cafés matinais, então você pode imaginar que faz parte de sua rotina matinal. Depois, há algum conteúdo secundário. É uma frase explicando o benefício deste aplicativo, e, em seguida, um par de chamadas à ação, muito claro e fácil de encontrar. Isso faz com que o site está usando suas primeiras impressões de criatividade. Você está vendo muitos desenhos infantis aqui e tipografia criativa. Ele gira no espaço e, em seguida, o texto de suporte está obviamente seguindo para baixo no layout central, e a chamada à ação mais baixa para baixo na tela. O aplicativo Peek é um calendário e, novamente, nossa primeira impressão é que entendemos que é um aplicativo para iPhone, estamos vendo que a interface do usuário parece criativa e única, e então estamos vendo algum conteúdo de suporte aqui é um vídeo onde clicamos no botão de reprodução óbvio para ver o vídeo, e nossa ação de chamada é obtê-lo depois que estamos convencidos. Mesmo que você não esteja usando imagens, você pode chamar a atenção apenas com tipografia. Então, aqui estão manchete maciço está transmitindo a distinção desta agência. Em seguida, há conteúdo de suporte sobre todos os detalhes e suas áreas de especialização e, em seguida, alguns pequenos apelos à ação porque eles ainda estão retratando uma marca mais formal. Você também está guiando o olho através da estrutura subjacente da página. Mais notavelmente a grade. Assim, existem grades comuns, como o 960, que vem em um formato de coluna 12 ou 16, que são fáceis de usar tanto nas fases de design visual quanto nas fases de desenvolvimento. Mas também há muitas ferramentas agora onde você pode projetar uma grade personalizada para atender ao seu conteúdo em particular. Gridpak é um. Há também um Gridset. Assim, você pode realmente projetar do conteúdo para fora e não apenas encaixar seu conteúdo nas caixas de outra pessoa. Certifique-se de entender como as grades devem ser usadas. Uma coisa que me custou, eu não aprendi na escola foi que você normalmente insere seu conteúdo dentro da coluna da grade, modo que se você colorir esse fundo, você ainda terá margens adequadas entre o texto e a cor fundo. Então, o PDF de Khoi Vinh e Mark Boulton, é um pouco antigo, mas ainda é uma ótima explicação de por que as grades são boas e como usá-las enquanto você está fazendo web design. Warby Parker é uma marca que tem um belo design usando a grade e, novamente, é uma grade criativa. Então, este é um calendário. Então, você esperaria que fosse uma grade de sete colunas refletindo os dias da semana. Mas em vez disso, a seção do calendário é oito colunas e há uma nona coluna de à esquerda para o mês. Então, é uma grade de nove colunas, o que lhe dá definitivamente um sabor único. Eles estão usando isso para estruturar um monte de imagens, conteúdo e gráficos de uma forma que ainda parece organizada e única. Mesmo que você não esteja desenhando cada linha de grade, o tipo flutuante ainda pode ter um senso de ordem e alinhamentos. Aqui, a grade permite que o conteúdo dinâmico seja preenchido mais tarde e mantenha um layout mais dinâmico, que haja coisas maiores chamando a atenção e coisas menores para olhar mais tarde. Novamente, coisas flutuantes ainda têm uma grade subjacente. Então, esta manchete Verifique meus tubos não está alinhada com o logotipo, mas está alinhada com a grade subjacente. Então, você pode não ver todas as linhas de grade, mas sites que são construídos com grades têm um senso de estrutura subjacente. vez, Khoi Vinh é um dos principais proponentes e mestres desta técnica. Então, seu site, que é imitado por anos, foi um dos primeiros a mostrar realmente o belo uso de uma grade suíça e tipografia. Ele redesenhou recentemente, mas ainda é alguém para seguir, se você estiver interessado nessa ferramenta. Ele fez um exemplo completo redesenho do site Yahoo alguns anos atrás mostrando que mesmo uma página inicial caótica e sobrecarregada pode ser mais organizada com o uso de uma grade subjacente. Assim, as grades não só criam essa sensação de controle de pedidos, mas também facilitam uma vez que você está entregando as coisas para um desenvolvedor. Se cada uma das páginas que você está projetando for um layout exclusivo, será muito mais trabalho construir e manter essas páginas. Então, quando você tem esse sistema, ele vai tornar as coisas muito mais fáceis na estrada e especialmente com design responsivo quando você tem que começar a descobrir como essas coisas fluirão em diferentes dispositivos. A única ressalva é que eles podem criar layouts chatos se você estiver usando-os mal. Se você está apenas preenchendo as coisas na mesma grade de 3 colunas, você não está realmente obtendo toda a vantagem da grade. Ele deve estar tornando seu design mais simples, mas também deve inspirar alguns layouts únicos, inspirando você a colocar as coisas no espaço em branco onde elas podem ou colocar coisas em espaços que você talvez não tenha pensado antes. Então também temos que lembrar que estamos projetando layouts responsivos. Então, vamos começar com o celular. Porque esse é o mais novo, mas também crescente em importância. Então, as projeções dos usuários dizem que o celular está prestes a superar nosso design de desktop. Tenho que esboçar isso. Assim, projetar para dispositivos móveis e para outros dispositivos além de um computador desktop, nos faz pensar sobre espaço e layouts de uma maneira diferente. Então, em uma área de trabalho, o centro da tela é onde as pessoas estão principalmente olhando ou talvez a borda esquerda da tela como eles seguem o NAV esquerdo para baixo da página. Mas em um telefone, é mais fácil deslizar para bater na seção inferior esquerda da tela se você estiver segurando o telefone na mão direita. Então, isso pode ser onde você coloca as principais chamadas em ação. Se você estiver segurando um tablet na posição vertical, é nos lados da tela que é mais fácil de acertar. Assim, o posicionamento das coisas na página é afetado pelo dispositivo. Definitivamente ler os livros da Global Moxie sobre este assunto. Ele vem trabalhando, falando e compartilhando todos os seus pensamentos sobre isso há anos. A outra coisa a perceber é que os projetos móveis não são um pequeno cursor, uma pequena seta, mas um grande dedo gordo tentando bater nesses botões. Então, quando você começa a projetar layouts móveis pela primeira vez, você não pode acreditar como os botões têm que ser grandes. A Apple recomenda pelo menos 44 pixels ou 88 em uma tela de retina como o tamanho, mas aqui está um cara testando e mostrando que a área amarela era onde seu dedo era ainda maior do que o recomendado. Então, você não precisa fazer os ícones eles mesmos tão grandes, mas a área clicável ou a área tocável precisa ser capaz de lidar com o dedo real de alguém. Então, aqui está um exemplo novamente de perceber que este dispositivo de entrada está realmente indo para encobrir a coisa que a pessoa está tentando tocar. Então, você viu muitas mudanças quando o celular começou a se tornar predominante no design. Então, você viu aplicativos. Você viu os botões ficando muito maiores e mais fáceis de deslizar. Você viu botões que eram largura total da tela como temos mais e mais refinado e como entendemos o que fez bom design no celular. Em aplicativos como o corpo humano por Tinybop realmente capturar esse senso de exploração e de gesto. Que beliscar e ampliar são muito mais naturais. Esses botões, como Josh Clark diz, os botões são hackeados. Que é apenas uma forma de um dispositivo que usamos para representar clickability, mas é muito mais natural pegar coisas, deslizar ou apagar coisas do seu desktop da maneira que você faz em uma mesa de verdade. Então, há um novo vocabulário que as pessoas estão aprendendo. Aqui está o guia de gestos de Luke Lebrewski e isto é apenas uma parte dele. Há tantos gestos que você pode usar em um aplicativo nativo. Ele obviamente expande o potencial interativo do seu site ou do seu aplicativo, mas você tem que confiar em seus usuários para aprendê-los e, em seguida, você também tem que confiar em seus desenvolvedores para executar o que é possível em um site responsivo. Então, um site responsivo no celular, definitivamente precisa permitir os dedos e o uso de gestos e furtos, mas você também precisa ser informado sobre o que é possível apenas em aplicativos nativos e o que é possível em um site responsivo. Lembre-se, não há estados de pairar no celular. Esta foi uma ferramenta útil por muitos anos em web design, mas não mais. Porque, é claro, você pode tocar e, em seguida, revelar o menu e, em seguida, eles tocam novamente para ir a algum lugar, mas você não tem essa sensação de alguém pairando aleatoriamente sobre o seu conteúdo e descobrindo algo escondido. Porque eles precisam tocar para ver qualquer conteúdo oculto. O Google fez um enorme estudo de pesquisa chamado O mundo multi-tela. Então, você deseja considerar o contexto para cada um desses dispositivos. Então, você pode pegar seu telefone porque você só tem um segundo e você não quer ter que entrar no seu computador ou você não quer ter que atravessar a sala e pegar seu computador. Você pode estar tentando fazer uma certa coisa. Você pegou seu telefone porque queria tirar uma foto e em seguida, você quer enviá-la para um amigo ou então você quer enviá-la para sua conta. Você pode pegar seu telefone porque você não tem acesso ao seu computador ou você está na rua ou em um carro ou na casa de um amigo e você pode apenas fazê-lo porque você está tentando relaxar. Você não quer abrir o computador que representa o trabalho e seu e-mail, você quer apenas ficar em uma mentalidade social. Então, pense nas características de cada um desses dispositivos. Que os telefones tendem a ser mais um para um e é mais pessoal. Os tablets tendem a ser, talvez, onde você está navegando, lendo revistas, olhando receitas e, em seguida, laptops ou desktops podem ser mais sobre trabalho para as pessoas. Em seguida, você pode iniciar algo em seu telefone e usá-lo como seu dispositivo de coleta, mas, em seguida, concluir a tarefa em sua área de trabalho e que seria seu dispositivo de organização. Então, aqui estão alguns exemplos de como meus layouts estão começando a parecer. Comecei com celular e coloquei meu conteúdo para o site yogas. Você pode ver que é principalmente uma única coluna e eu fiz um par. Eu tinha um pouco onde são duas colunas e decidimos fazer toda a imagem a área clicável. Então, as pessoas podiam simplesmente tocar com os polegares facilmente. É layout muito gridded, então agora é fácil refluir para a área de trabalho. Eu sabia que eu queria que a imagem principal, a imagem introdutória fosse maior e então eu ainda queria que o retiro Perú fosse muito destacado. Então, você pode ver que a hierarquia está sendo preservada entre os layouts. Então eu posso visualizar como o layout do meu tablet pode funcionar. Aqui estão meus três quadros de arte no ilustrador, mas eu poderia voltar e preencher isso e tentar decidir, eu ainda vou manter todas essas quatro imagens juntas na segunda fila ou vou tentar dividi-lo em linhas separadas? Então, faça o quanto precisar. uma vez, depende de quem vai entregar isto. Aqui está um exemplo em que eu acabei de fazer o desktop e o celular lado a lado. Então, a área de trabalho está à esquerda e os celulares à direita. Aqui está a página inicial e a página sobre este grande site. Este é um layout mais complexo. Então, eu tinha um pouco mais para tentar descobrir sobre o que fazer com todo esse conteúdo diferente indo de 4 até carrosséis para carrosséis individuais esse tipo de coisa. Então, isso me ajudou com a funcionalidade para marcá-lo antes de eu começar a codificá-lo. Também colocou as pessoas na mesma página sobre o que elas iriam ver em cada dispositivo. Na seção de recursos do site, há um modelo de ilustrador responsivo criado por outra pessoa. Isso é útil se você quiser ou você pode simplesmente criar suas placas de arte para atender às suas próprias necessidades. Então, a partir de seu layout Frankenstein, você vai para página por página e de seus wireframes, projetar esses layouts. Então, novamente o wireframe deve mostrar como os outros membros da equipe ou talvez você mesmo viu as hierarquias da página, mas sente que você quer ter certeza de que os layouts visuais parecem tão bons quanto eles podem. Então, geralmente há algum rearranjo que acontece quando você está passando de wireframes para design visual. Então, comece com as telas do seu celular primeiro. Porque os layouts móveis tendem a ser uma única coluna. Às vezes você pode caber duas ou até três colunas, mas é raro. Então, isso força você a priorizar seu conteúdo de forma linear, o que é primeiro na página, depois segundo, depois terceiro, depois quarto. Então, eu gostaria de começar com o celular e depois eu gosto de ir até o layout da área de trabalho e tentar o outro extremo. Como vou tirar vantagem desta tela enorme? O que vou fazer aqui? Novamente, não é apenas sobre a forma da tela, é sobre o contexto. O que vou fazer se alguém estiver no trabalho e visitar o meu site? O que eu vou fazer se eles estiverem no telefone e estiverem visitando meu site? Então você vai repetir com todas as suas páginas principais. Eu faço apenas aqueles dois primeiro para sites principais. Muitas vezes estou continuando e fazendo o desenvolvimento também. Então, eu vou fazer os pontos de interrupção do meio no código, mas se você estiver entregando essas páginas para um desenvolvedor, você precisará ir em frente e fazer todas as marcações do tablet ou quaisquer outros pontos de interrupção que você decidir fazer. Novamente, você pode fazer quantos pontos de interrupção quiser. Eles não são específicos para qualquer dispositivo como o iPad ou o Nexus, seja lá o que for. Você quer pensar sobre quando seu conteúdo começa a cair. Quando você está dimensionando o vídeo começa a ocupar toda a tela e não mostrar qualquer uma da segunda linha de conteúdo e assim, foi quando você teve um ponto de interrupção e revisar seu layout. Então, trabalhe em seus layouts. Você pode fazer todos os dispositivos móveis primeiro se quiser ou apenas fazer uma tela. A tela mais importante móvel e desktop e obter alguns comentários e ver como ele vai. 9. Teste de usabilidade: Está bem. Agora é hora de fazer alguns testes de usabilidade de nossos sites. Quando entramos em nossos layouts, em nossos layouts responsivos, ele pode ser tentador ou quando entramos em nossos layouts, ele tende a nos empurrar de volta para o pensamento de design 2D. Que estamos preocupados em organizar esse conteúdo no espaço. Mas temos que lembrar que o web design é um meio em mudança que estamos trabalhando em quatro dimensões que é interativo que as coisas aconteçam. Então, queremos voltar e pensar sobre a interatividade do site e julgar nossos layouts a partir dessa perspectiva. Então, quais são as medidas básicas? Quais são as coisas básicas que tornam um site utilizável? Aqui estão estas 10 heurísticas de usabilidade de Jacob Nielsen, que é a principal autoridade neste campo, que podemos analisar para julgar nossos layouts. Então, número um, você quer se certificar de que o status do seu sistema é claro. Então, telas de confirmação. Se alguém clicar em enviar, ele quer saber que seu pedido foi recebido e que ele vai receber o item ou não recebeu. Se a sua página estiver sendo carregada, convém informar alguém o que está sendo carregado para que ele entenda por que está demorando tanto e não pense que é o navegador ou o Wi-Fi. Então, certifique-se de que há indicadores de status do sistema se você precisar deles. O número dois é que combina com o modelo mental deles. Então, isso se resume a novamente a rotulagem que você está usando em sua arquitetura. Esperemos que sua fase de planejamento tenha esclarecido um pouco disso, mas seu design visual também precisa reforçá-lo. Então, o Instapaper usa uma caixa de entrada ou um arquivo. Você está salvando ou está carregando? Qual é a metáfora? Quais são os ícones? Certifique-se de que está tudo combinando com o modelo que eles estão esperando. O número três é que os usuários têm controle. Então, isso pode significar que você está dando a eles um pouco de influência no design do é brilhante o suficiente para eles? tamanho da fonte é grande o suficiente para eles? Alguns aplicativos oferecem modo noturno, se é tudo sobre leitura e também se relaciona com navegação. Que eles podem chegar às partes do site que eles querem chegar. Quando você começa a traçar a experiência do usuário, você pode tendem a traçar como um filme, como se estivesse fazendo scripts tela a tela o que eles vão experimentar. Sim, você está fazendo isso para suas histórias de usuários, mas então você também precisa perceber que as pessoas vão se ramificar em outras histórias e mudar de caminhos o tempo todo. Então, uma boa navegação ajuda-os a fazer isso e vamos divertir-se e fazer o que eles querem fazer no site. O quarto é uma espécie de um animal de estimação meu que é ícones sendo consistentes e eles são consistentes a partir de uma perspectiva de usabilidade de como, eles são ilustrações ou eles são botões? Então, aqui você pode ver que nas guias os ícones são usados aqui como botões e em guias. Eles não são usados como ilustrações. Então isso é algo onde eu posso saber por, eu posso olhar esta página e eu posso saber os ícones que eu posso clicar naqueles que é algo funcional. número cinco é que você está tentando ajudá-los a evitar erros e é aqui que o design visual desempenha um papel importante. Assim, por exemplo, a ação primária, o botão principal geralmente é maior, mais ousado, mas a ação secundária pode não precisar se parecer com um botão. Na verdade, se for um indevida ou um cancelamento, você pode não querer que seja algo que é muito fácil de acertar. Você também vê isso com coisas como no planejamento de selecionar uma cor para uma blusa que se eu puder mudar a imagem para refletir essa cor, diminui a probabilidade de alguém pedir a cor errada por engano. Então, isso é algo que você pode zombar em seus projetos ou você pode escrever uma nota para o desenvolvedor para alterar a fotografia quando o usuário clica nessa amostra de cor. A próxima coisa é também que você não quer o usuário tenha que fazer muito trabalho especialmente, se ele estiver em um telefone e estiver digitando com os polegares. Então, se você puder, se eles estiverem digitando em um campo de pesquisa, por que não fazer um menu suspenso automático que os ajude a selecionar em uma lista de opções e que não os faça digitar todos os 50 caracteres da descrição. Então, novamente, você deseja rever cada uma das suas histórias de usuários e certificar-se de que elas são o mais eficientes possível. Então, isso pode ser tanto você reduzir o número total de cliques necessários para ir de A a Z, que você não está fazendo com que eles naveguem através de 10 telas para se inscrever e criar uma conta para comprar um produto em seu site ou isso pode significar que você está reduzindo o tempo de carregamento da página. Então, um monte de carrinhos de compras como este dossel do site eles vão fazer como uma camada para que toda a página não tenha que recarregar para que você obtenha mais informações sobre o produto, mas você apenas faz uma camada rápida que é carregado através do Ajax. Você também pode reconhecer que algumas pessoas gostam de navegar usando seus teclados. Assim, as setas para a esquerda e para a direita podem ser ativadas para página através de um carrossel, uma apresentação de slides ou outros botões. Você pode ter que ensinar isso aos seus usuários, mas é tudo sobre tornar mais fácil para eles fazerem o que querem fazer e tornar esses fluxos o mais eficientes possível. Além disso, tente apenas ajudar seus usuários apenas a se concentrar em uma coisa de cada vez. Então, se eu estou aqui tentando decidir qual dessas plataformas eu quero o padrão do costume, você pode remover tudo o resto na página porque eu realmente estou apenas tentando analisar e tomar essa decisão com base nos recursos e custos e todas essas outras coisas. Então, eu tenho muito espaço em branco aqui. Eu tenho uma tabela clara me ajudando a entender as diferentes opções e tudo o resto foi removido o que é muito útil para mim como um usuário. Então, finalmente, seu alerta deve ser claro. Então, nada é mais frustrante do que “Erro do sistema”, e você não tem idéia de como corrigi-lo. Então, estes são alguns exemplos de alertas úteis que exatamente quantos caracteres são necessários na senha, quais dos campos de formulário são necessários. Este é o material que muitas vezes é esquecido em modelos de design estático, mas se você está projetando uma experiência na web, há tantos estados para cada página. Então, volte e tente editar e pense cada uma dessas interações e como você pode torná-las mais claras. A última é que obter ajuda deve ser fácil. Então, as pessoas ficam confusas. Não, você não pode fazer o clippy, um pequeno clipe de papel dizendo a você como usar o Microsoft Word nem você gostaria de fazer. Mas você quer facilitar a ajuda quando as pessoas estão procurando por ela. Coloque-o em um lugar padrão como o nav superior ou no rodapé e, em seguida, também perceber que as pessoas têm maneiras diferentes em que eles querem receber ajuda. Algumas pessoas adoram vídeos. Algumas pessoas só querem atender o telefone. Algumas pessoas querem escrever um e-mail ou conversar. Então, é bom se as empresas podem oferecer todas essas opções. Novamente, seu design visual refletirá o que as pessoas gostam em cada uma dessas opções. Então, se eu sou alguém que só quer falar com uma pessoa real, essas fotos de rostos de usuários vão me fazer sentir como se eu estivesse recebendo ajuda mais do que alguém que só quer assistir a um vídeo onde uma captura de tela de um tutorial de ajuda ou uma revisão de produto seria um mais atraente para eles. Mais uma vez, reveja seus layouts e avalie a interatividade de cada um. É nosso clicável por estilo consistente ou por onde eles são colocados na página. Assim, por exemplo, os links devem ser azuis e sublinhados com um mantra por um longo período de tempo. Eu discordo que eles precisam ser sublinhados porque realmente reduz a legibilidade, mas a cor consistente é uma boa pista para interatividade. Novamente, ícones são uma coisa particular de que eu deveria saber como um usuário se é apenas uma ilustração que está sentado ao lado de algum conteúdo ou se é um botão que eu preciso clicar para obter conteúdo adicional. grupo Nielsen Norman é um deles. A empresa de pesquisa baseada em evidências experiência do usuário. Então, eles têm todos os tipos de estudos e métricas se você quiser mais dados para suportar qualquer um de seus argumentos. A última coisa sobre usabilidade é que padrões são algo que você quer considerar. Esse design intuitivo geralmente significa que você está usando o posicionamento padrão para algumas das funções básicas. Se você está procurando a barra de pesquisa, você provavelmente está olhando para cima no cabeçalho da página quando as pessoas a colocam na barra lateral, é um pouco mais difícil de encontrar. A mesma coisa com o log in. Então, olhe para esses padrões padrão e considere se você precisa inovar e quebrar o molde neles ou se é algo onde você quer seguir o que é considerado uma boa prática. Mas, da mesma forma, você quer ter certeza de que você não está apenas copiando outros sites. Alguns clientes têm dificuldade em visualizar as coisas e, por isso, dirão “Faça assim”. Eles só querem que você copie diretamente um determinado layout e você precisa empurrar para trás quando for apropriado dizer-lhes que para olhar para mais de um exemplo de um padrão, a fim de provar que é a melhor maneira de fazê-lo e que é uma tendência geral. Mas realmente como tudo, você está tentando fazer seus layouts conteúdo para fora e você está tentando torná-los também interação para fora. Então, pense em seus próprios ciclos específicos e use-os para ajudar a determinar quais padrões são apropriados. Porque estamos todos trabalhando com o mesmo vocabulário de elementos HTML, o mesmo alfabeto básico de elementos HTML, mas podemos combiná-los de um milhão de maneiras diferentes e assim você sempre quer aumentar seu vocabulário vendo o que está lá fora e vendo o que é possível com novas tecnologias e novas ideias. Portanto, existem alguns recursos excelentes para ajudá-lo a visualizar e ver como e ver como esses padrões podem funcionar. Brad Frost é muito generoso em compartilhar seu trabalho. Ele criou toda essa biblioteca de padrões responsivos. Então, se você está apenas tentando visualizar como seu layout pode refluir, aqui estão alguns protótipos viáveis que você pode olhar e ver qual deles parece apropriado porque é difícil projetar para uma mídia em mudança quando você está usando ferramentas estáticas e existem diferentes ferramentas de design que tentam replicar isso, mas no final do dia, é bom usar o que você está familiarizado e chegar ao código o mais rápido possível. Esta é a minha estratégia para isto. Então, padrões responsivos é um grande recurso. Toque padrão é outro onde você pode classificar por esse tipo de coisa que você está tentando criar e ver que tipo de idéias estão lá fora. Os estados do mouse também são legais, onde há muitos designs de interação novos e interessantes e, em seguida, há uma biblioteca de interação do usuário, onde você pode ver exemplos animados de como você pode suavizar essas transições, torná-las mais dinâmico, o que você quiser fazer para ajudá-lo a visualizar. Então, exporte todas as suas maquetes como PNGs. Você deseja classificá-los para que você tenha cada ponto de interrupção em uma pasta. Então, todos os seus layouts móveis estarão em uma pasta, todos os seus layouts de área de trabalho estarão em outra pasta, etc. Em seguida, para fazer alguns testes de usabilidade, você pode carregá-los para visualizar aplicativo e é bastante claro, ou muito intuitivo para usar o aplicativo. Você vai passar e carregar cada pasta de PNGs e, em seguida, você pode criar hotspots e torná-los clicáveis e, em seguida, você pode fazer alguns testes de usuário. Então, sente-se ao lado de alguém e assista-os a puxar esta pasta no aplicativo no seu telefone e vê-los tentar navegar ou você pode compartilhar tela, fazer como um Google Hangout e dar-lhes alguns cenários, pedir-lhes para fazer o máximo ações importantes em seu site e vê-los como eles tentam fazê-lo. É muito esclarecedor e dá-lhe uma perspectiva totalmente diferente sobre o seu design. Então, experimente. Você também pode postar seus links para o formulário Compartilhamento de habilidades e obter feedback uns dos outros e fazer alguma iteração em seu site e ver como funciona. 10. Limpeza e documentação: Última lição, Limpeza e Documentação. Eu só quero enfatizar esse processo de iteração porque é uma coisa tão importante no web design. Um web design nunca é concluído. É como uma criança. Continua crescendo e precisando de roupas novas e a cultura muda e as mudanças tecnológicas. Então, você é sempre capaz de continuar melhorando um site. Essa é uma das grandes coisas sobre o web design. Não é como um livro onde você envia para a imprensa e então ele se foi e você teria que fazer outra edição. Mas um site está sempre lá e você sempre pode ajustar os arquivos e ajustar seus projetos e torná-los melhores. Então, teste e itere continuamente e melhore seus projetos. Isso é algo que não percebemos sobre um monte de aplicativos populares. Então, iOS sete, quando ele saiu foi como um enorme design, mas você pode ver cada um desses painéis mostra três versões das telas e como eles continuaram a refinar a linguagem. Ele costumava estar cheio com os botões de barra e então eles ficaram menores com cantos arredondados e então eles se tornaram círculos ou algumas das mensagens secundárias menores se tornaram pequenos ícones. Então, até a Apple, um dos líderes em design tem design muito mais iterativo do que imaginamos. Veja um exemplo de cada uma das atualizações do iOS e quanto tempo eles passaram no Beta. O que é interessante para mim é apenas a quantidade total de versões que eles estão fazendo que a cada duas semanas basicamente, eles estão lançando novas versões do software. Então, não pense em seu site como esta festa de lançamento gigante, mas pense em cada uma dessas pequenas iterações que você está lançando como um pequeno teste e você está recebendo um pouco de feedback e é um passo ao longo do caminho. De volta a Jakob Nielsen, ele fala sobre cada uma dessas iterações. No início, você está apenas removendo esses bugs de interação e está aumentando a usabilidade. Esse é o valor principal no início, mas ao longo do tempo, quando ele começa a ser realmente polido, então você começa a ser capaz realmente reconceituar a interface como você vai para outras iterações e obter outra colisão na usabilidade como você começa a estar disposto a jogar fora talvez algumas de suas características favoritas e realmente repensar as coisas. Então, você quer falhar mais rápido. Você se apressa e descobre o que não está funcionando quando você iterar. Então, você também evita o trabalho desnecessário fazendo isso. Você também reduz seu risco porque você está fazendo pedaços menores. Você não está trabalhando em um projeto por um ano só para descobrir que ninguém realmente queria isso em primeiro lugar. Então, você está descobrindo seus melhores recursos e no que você quer se concentrar. Então, concentre-se nos detalhes também com cada iteração que você começa a colocar mais e mais polonês e fazer seus projetos olhar melhor e melhor. Então, se você falar sobre design plano, você pode pensar que é uma maneira de fazê-lo, mas se você realmente começar a zero nos pequenos detalhes, você vai notar um monte de particularidades na maneira como você está implementando o você pode considerar um design plano. Então, talvez haja bordas inferiores em alguns dos elementos ou seus cantos de três pixels versus cantos de cinco pixels. Você não percebe essas coisas quando você é apenas um consumidor e um usuário de sites. Mas uma vez que você começa a ser um criador e um crítico, você começa a realmente ampliar os detalhes. Os botões do Facebook têm uma sombra ou não? Eles têm uma fronteira ou não? Estes são os tipos de coisas que você começa a refinar através de níveis de polimento olhando para a escala e olhando para o contraste ao longo do tempo. Há também uma grande fase de edição que entra em iterações. Então, eu amo essa citação de Ellen Lupton de “Design é tanto um ato de espaçamento quanto um ato de marcação.” Então, é sobre o que você pode remover e o que você não pode colocar na tela. Então, Mark Boulton tem um ótimo artigo sobre espaço em branco onde ele fala sobre como olhar para este layout à esquerda e designers novatos tendem a colocar tudo em caixas. Tudo precisa ser ancorado. Percebemos que, como quando removemos algumas dessas caixas, caímos nesta fotografia mais facilmente e somos capazes de usar a tipografia um pouco mais criativamente para expressar algumas das ideias. branco básico está bom. Este parágrafo à esquerda é mais uma história sobre o que é importante sobre este conteúdo, através de um pouco de espaço em branco, um pouco de ênfase, o design começa a ser mais comunicativo. A outra coisa sobre web designs é novamente que estamos projetando sistemas, não cartazes, não layouts de página que estão bloqueados. Então, espero que você tenha descoberto suas diretrizes de marca na primeira classe, mas também queira aprimorar seus ativos visuais em uma diretriz utilizável. Então, o valor deste ativo começou, volte a ele e tente torná-lo utilizável para outras pessoas e não apenas para si mesmo. Então, aqui está um exemplo do livro de marca de Jamie Oliver e claro, ele fala sobre sua personalidade e os valores. Estas são as coisas que são por isso que você está escolhendo essas cores específicas ou fotografias particulares. Mas você também vai entrar nos detalhes de quão grandes são suas margens, ou suas manchetes, ou suas cores. Então, tente especificar o que você descobriu nesta fase de design para que outra pessoa possa pegá-lo e a personalidade não mude totalmente, mas que você seja capaz de ter alguma consistência entre os projetos. Então, pense nisso como um sistema, que não é elementos de tipo fragmentado que você colocou na página, mas é um sistema de manchetes e um sistema de texto relacionado. Você pode pensar em vendas tipográficas. Tim Brown escreveu sobre taxas modulares, mas podemos tendem a começar a projetar apenas com os tamanhos de fonte padrão das paletas em nossa ferramenta de software. Então, 72 ou 60, 48, 36. Mas não há razão para fazer isso. Você pode olhar para a proporção dourada, você pode olhar para todos os tipos de razões matemáticas e geométricas para exemplos de como seus tamanhos de tipo podem se relacionar entre si. Então, volte e veja suas manchetes e verifique se elas são consistentes e veja suas relações entre seus elementos e veja se elas são harmoniosas. Então, o último passo em nosso processo de design são as coisas do documento para que a execução possa ser o mais próximo possível da nossa visão. Então, está ficando mais fácil fazer isso. Há coisas como projeto parfait para Photoshop que permite exportar o CSS diretamente de um PSD. A mesma coisa com esboços que você pode selecionar qualquer elemento e obter os atributos CSS básicos para essa cor de fundo ou esse tamanho de fonte para que você não tenha que passar por um conta-gotas coisas sozinho. Então, vá através e certifique-se de que seus símbolos ou sua página de ativos tem todos os elementos principais que você precisa. Se você projetou tudo, exceto em h3, basta ir em frente e adicionar uma amostra h3 lá para que você tenha um sistema coeso e, em seguida, você vai escrever as especificações se você precisar deles, mas se você vai continuar em um fim, desenvolver o site que você precisaria para fazê-lo. Você estaria mais preocupado com a exportação de CSS. Normalmente, você quer ter conversas com o desenvolvedor no início. Então, fale com seu desenvolvedor, desculpe, pegue a última frase, por favor. Você vai escrever especificações se eles forem necessários. Fale com um desenvolvedor e veja o que ele quer. Às vezes, eles só querem que você lhes dê PSDs ou lhes dê um arquivo fonte. Então, ou fale sobre o Sketch e como ele funciona ou veja se eles querem que você faça todo o corte e falaremos sobre isso na terceira classe também. 11. Explore Design no Skillshare: maneira.