Introdução ao minimalismo focado em conteúdo no design para web

1. Introdução: Pessoal, Pessoal, no Joshua Stone hoje, vou mostrar algumas das coisas que aprendi ao longo dos anos sobre o desenvolvimento de sites em torno dos conceitos de minimalismo focado em conteúdo. Agora, o que isso significa exatamente? Bem, trata-se de equilibrar estrutura e estilo para realmente fazer o conteúdo tomar o centro das atenções. Trata-se de projetar e desenvolver um site que seja fácil de entender e navegar. Assim, os usuários finais confinaram exatamente o que eles estão procurando sem qualquer incômodo. Trata-se de projetar um site que funcionará em praticamente qualquer lugar de onde ele é carregado e torná-lo responsivo tanto que ele se adapta a diferentes resoluções. E então ele realmente responde à entrada do usuário em tempo hábil. Assim, nesta classe será cobrindo algumas coisas a partir de decidir qual conteúdo incluir. Decidir como expor esse conteúdo. O que priorizar, nós descobrir onde podemos colocar folheto em grande estilo sem ir ao mar e ser muito artístico. Distrair os usuários do conteúdo também estará indo para um pouco mais de detalhes sobre diferentes maneiras. Você pode tentar evitar confusão e frustração para as pessoas que usam o seu site e também algumas considerações técnicas e de acessibilidade que você pode querer fazer agora ao longo desta classe , eu realmente vou estar mostrando um mundo real exemplo porque eu preciso fazer uma atualização. Meu site agora. Eu também recomendo que você acompanhe e construa ou, pelo menos, projete um site seguindo esses conceitos. Agora essa classe meio que desfoca a linha entre Web design e desenvolvimento Web. Portanto, pelo menos uma compreensão básica de H. Melon CSS é recomendada. Mas de qualquer forma, acho que isso basicamente cobre tudo. Então, se você está pronto para começar, vamos em frente e pular direto. 2. Comece com o conteúdo: Sempre que estou começando a construir um novo site, a primeira coisa que eu penso é o conteúdo. O conteúdo é a razão pela qual as pessoas estão lá. É o que eles estão procurando. É toda a razão para o site existir em geral. Então, devido ao fato de que o conteúdo é o foco número um do site, tudo o que fazemos a partir daqui será para garantir que ele mantenha esse foco em que torna a experiência do usuário melhor e torna mais fácil encontrar as informações que o usuário precisa. Então, como vamos pensar sobre o conteúdo? Bem, você já deve ter uma idéia do que o site ISS para, mas vamos começar a pensar sobre como podemos dividir isso para seus elementos constituintes base agora, para dar uma idéia melhor do que eu quero dizer com isso, Vou mostrar-lhe o meu processo de descobrir o conteúdo do meu novo site. Meu site é essencialmente uma página de portfólio, então a primeira coisa que preciso é de uma biografia. Meu site é essencialmente uma página de portfólio, Algo sobre quem eu sou. Preciso de informações sobre como entrar em contato comigo, bem como meus links sociais. A próxima coisa que eu gostaria é apresentar o meu trabalho atual. Eu também gostaria de uma lista do meu trabalho anterior, meus jogos e projetos diversos, e eu também gostaria de algumas informações sobre ajuda, contribuir na minha página de patrono que eu configurei. Mas agora que temos isso planejado, o que vem a seguir? Bem, precisamos priorizar as coisas, e o que quero dizer com isso é quando você pensa sobre o que queremos que as pessoas descubram primeiro em nosso site e se saírem cedo, qual a primeira impressão que você quer deixar? E o que eles poderiam estar procurando em primeiro lugar afinal? Essencialmente, nós só queremos ter certeza de que o usuário vê as coisas corretas primeiro e que tudo é apenas geralmente em uma ordem lógica. Então, para o meu site, eu meio que tenho isso já em uma ordem decente porque basicamente, a primeira coisa que eu quero que as pessoas vejam é informações sobre quem eu sou, como entrar em contato comigo e o que eu estou trabalhando no momento que tudo estará na frente página. Depois fui páginas dos meus jogos pelos projetos da Srta. Lane e uma página sobre contribuição. Agora é hora de começarmos a pensar onde as coisas entram. Esse tipo de sobreposição com priorização, honestamente. Mas basicamente o que eu quero dizer é enfraquecer quebrar coisas para baixo duas páginas e nós podemos quebrar coisas dentro da página eram tipicamente indo para fazer ambos a menos que seja um site que ele apenas acontece construído para realmente caber tudo em uma página. Mas normalmente você terá as coisas categorizadas juntas em páginas distintas, e dentro dessa página tudo será agrupado de uma forma lógica, e nós definitivamente queremos ter certeza de que tudo está equilibrado aqui. Embora queiramos usar o espaço de forma eficiente e não queremos que tudo se espalhe em um monte de páginas diferentes ou apenas realmente esparso dentro de cada página, também não queremos que ele seja muito compacto e denso com dados. 3. Estilo e estrutura: Certo, agora que descobrimos que conteúdo teremos em nosso site e como ele vai ser colocado, é hora de pensar em como ele vai parecer especificamente. E isso é em grande parte sobre decidir sobre um tema consistente. Queremos um tema que se encaixa com o conteúdo e, como eu disse, é consistente agora voltar ao tópico original O minimalismo focado em conteúdo é manter as coisas simples, então queremos manter o foco no conteúdo. Mas usamos o design e o estilo geral para complementar o conteúdo. Nós apenas geralmente queremos melhorar a experiência de usar nosso site. Então, ao descobrir tudo isso, eu costumo começar com um layout básico, uma estrutura simples que irá conter o conteúdo. Então, novamente, para dar um exemplo, vou mostrar-lhe no que estou trabalhando à minha vista. Essencialmente, vou ter tudo centrado. Mas com os fundos transbordando para ambos os lados, eu vou ter uma barra lateral com o logotipo e links de navegação dentro, e nós vamos ter o conteúdo bem aqui. A barra lateral permanecerá fixa à medida que você rola a parte principal do conteúdo e quando você visualiza em um dispositivo móvel ou nas sobrancelhas. Quando sabemos algo, é fino o suficiente. Ill trocar, também, a navegação estar na parte superior e que irá rolar com a página para que ele não bloqueie o conteúdo da visualização. Mas, no geral, é um palhaço bastante simples. E a razão pela qual eu decidi ir com isso é devido ao tema que eu decidi desde que eu sou um desenvolvedor de jogos que seria interessante se minha visão parecesse um pouco como um menu em um jogo. Agora que o ladrão não é necessariamente um papel rigoroso. Mas no geral, este tema parece realmente funcionar muito bem com o que eu estou indo para. Mas de qualquer forma, agora que temos um layout básico e uma estrutura para o nosso conteúdo, precisamos descobrir alguns padrões de design consistentes que se resumem à cor e forma. É também sobre as fontes, todas essas pequenas coisas que realmente percorrem um longo caminho para criar um tema consistente. E novamente, estamos tentando manter as coisas simples e não distraindo. Portanto, há sempre um ato de equilíbrio de tentar garantir que o conteúdo seja acessível, fácil de encontrar e onde logicamente deve ser que tudo pareça agradável e funcione bem , então eu vou em frente e mostrar o que eu realmente fiz. Agora, você pode ver esse layout subjacente bem aqui. Tudo está centrado no fundo. Soletrar para os lados, e a navegação é fixa. Mas eu coloquei muito talento nisso, mas não muito. Tudo ainda é muito simples, não distraindo, mas ajuda a adicionar um pouco desse estilo. E novamente, ele se encaixa com o tema de ser um menu de jogos de vídeo. Ainda há muito trabalho, qualquer para dificar. Claramente este ar deveria ser imagens. Eu não tenho meu e-mail aqui na minha certeza sobre o saldo de tudo isso. Mas, no geral, isso faz com que a ideia passe. E, sim, eu tenho a versão móvel também. Nada muito complicado. Só desmorona. E como você pode ver, não há muito para isso. São elementos muito simples como você começa a quebrá-lo. Agora, na verdade, na construção de uma página como esta, há um monte de coisas para pensar, e a maior que tende a surgir é a compatibilidade do navegador. Simplificando, diferentes navegadores suportam um conjunto diferente de recursos, e sempre haverá recursos mais novos que os navegadores mais antigos que as pessoas ainda usam não suportam. E se resume a uma decisão que você tem que tomar sobre quais recursos você realmente precisa usar e quais outras maneiras existem sobre lidar com certas coisas. Não, é claro, compatibilidade importa mawr, em alguns casos em menos e outros, e isso depende em grande parte do seu público. Se você está construindo algo que absolutamente precisa usar alguns dos recursos mais recentes, e tudo bem, basta saber que você não será capaz de alcançar tantos usuários. Mas se você está construindo algo que você precisa ser o mais compatível possível, você terá que fazer alguns sacrifícios, e geralmente eu tento encontrar o meio termo lá. 4. Mantenha o responsivo: Agora que abordei o design do conteúdo, o estilo e a estrutura do nosso site, quero falar sobre algumas coisas menores. E a primeira coisa que eu falaria é a capacidade de resposta. Queremos ter certeza de que nosso site pode ser visto de tantos lugares diferentes quanto possível, especialmente considerando o fato de que cerca de metade do seu tráfego provavelmente será dispositivos desmoldados. Claro, isso vai depender do seu público-alvo, mas geralmente isso vai ser verdade. Então, como fazemos isso? Bem, o conceito geral a ter em mente é que queremos que nosso site seja fluido. Queremos que a estrutura se adapte de diferentes maneiras, dependendo do tipo de estrutura que pretendemos ter. Eu falei brevemente sobre isso na última parte quando eu mostrei como meu site leva a navegação vindo à esquerda para estar no topo quando eu faço a janela muito estreita, e é isso que eu vou fazer no Mobile. Agora, como é que estou a fazer muito disto? Bem, a primeira coisa seria sobre o dimensionamento porque, como você deve saber, muitos telefones têm uma tela que é 12 80 por 7 2019 20 mês em 80 ou até quatro resoluções K. Como nos certificamos de que nosso conteúdo não aparece extremamente pequeno no dispositivo deles? Agora há algumas maneiras complicadas que foi feito no passado, mas hoje em dia é realmente simples e muito bem suportado. E são as tags meta Vieux que é chamado. Trata-se de definir algumas propriedades aqui que ajustam a forma como o navegador será renderizado. O conteúdo da página está basicamente ampliando automaticamente para um nível razoável para esse dispositivo. Então, por exemplo, meu telefone usa uma tela de 12 80 por 7 20. Mas o tamanho do conteúdo que realmente renderiza, é como se tivesse apenas 420 pixels de largura, não 720. Então tudo parece estar em um tamanho mais razoável do que eu esperaria em um monitor com resolução mais típica. Agora, existem várias propriedades diferentes que você pode usar aqui. Estes ar apenas os três que eu uso que eu aprendi de outro lugar, e ajuda a ajustar o conteúdo especificamente para o que está na página, não o que está sendo transbordado agora. Claro, isso não lida com desmoronar tudo. Então, como fazemos isso? Bem, usamos media queries, que são outro recurso que é novamente bastante novo, mas ainda bem suportado. Você usa essa sintaxe e passa um parâmetro, e aqui estou eu verificando uma largura máxima de pouco menos de 640 pixels para que sob esse tamanho eu vá entrar em colapso na visão móvel. E dentro dele, eu poderia apenas definir regras como eu normalmente faria, para ajustar tudo do normal para permitir que se encaixe melhor para celular. E então eu tenho um par mais para ajustar o tamanho, ings e espaçamento de diferentes elementos. Então, esses dois métodos diferentes o método Vieux porta tag e consultas de mídia ir um longo caminho para tornar o seu site móvel amigável. Agora também sabemos que você pensa sobre como a entrada é feita. E o que eu quero dizer com isso é em um computador. Você geralmente vai usar um mouse, e isso significa que você será capaz de passar o mouse sobre links em dispositivos móveis. Claramente, você não pode passar o mouse sobre esse tipo de telas, então você realmente não deve revelar informações sobre um evento de pairar, e eu realmente fiz isso no passado sem perceber isso. Vou em frente e mostrarei a vocês na minha página atual de jogos. Eu tenho esses belos azulejos representando cada um dos meus jogos, e quando eu passar o mouse sobre eles, eles revelam o nome e isso é tudo ótimo. Mas não posso pairar sobre eles no celular, então não posso revelar o nome. Não, pode haver outras coisas e você pensa sobre para o seu site no celular. Mas geralmente isso cobre quase tudo. Então acho que é só isso por enquanto. Então vamos passar para a próxima parte. 5. Prevention a infusão e frustração: tudo bem agora, eu quero falar um pouco sobre a prevenção de confusão e frustração para os usuários do seu site, e o primeiro ponto que eu quero fazer é que a previsibilidade é muito importante. O que quero dizer é que, especialmente quando se trata de elementos interativos, essas interações devem se comportar da maneira que as pessoas esperam de novo. Está tudo de volta para garantir que tudo seja intuitivo. O próximo ponto que quero fazer é sobre adivinhação. Você não quer que o usuário tenha que adivinhar o que certas coisas fazem. Por exemplo, se você vai usar ícones para navegação, se seu propósito não é extremamente claro e mesmo que seja, você provavelmente quer algum tipo de imposto para ser capaz de explicar o que é. E a próxima coisa seria que você deseja minimizar os tempos de carregamento e maximizar a compatibilidade . Tempos de carga importam em que as pessoas não querem estar esperando por sua visão e carga. É bom pensar onde você realmente precisa de imagens ou outras multimídia e onde você pode fugir sem elas. Há muitas maneiras que você pode estilos e CSS que parecem realmente agradáveis que não exigem imagens. Existem muitas técnicas para manter esses arquivos pequenos, mesmo se você precisar de um monte de imagens as maneiras mais simples,é claro, é claro, pensar sobre os tipos de arquivos e métodos de compactação. Por exemplo, maioria das vezes você vai usar J Pegs ou P e G e G são bons para imagens mais simples, aquelas com cores mais sólidas ou transparências parciais. Claro, você não pode fazer isso com J Pegs agora com P e G. Se você estiver usando 256 cores são menores e você não precisa de transparências parciais. Você pode realmente usar indexação muito parecido com um Jiff, mas na verdade é um tamanho de arquivo menor do que um Jeff, e eu uso essa técnica muito. E, é claro, com J Pegs, trata-se de determinar quais níveis de compressão você poderia se safar, não destruindo muito a qualidade da imagem. Existem algumas outras técnicas que eu realmente não tenho explorado muito, mas eles são úteis para estar ciente, e é sobre carregar diferentes versões da imagem que são de tamanhos diferentes, dependendo da resolução do dispositivo. Seu visualizá-lo em outra coisa que se relaciona com isso é fontes personalizadas. Poderia ser muito bom do ponto de vista do design, construiu uma carga, suas próprias fontes para usar na página. Mas se você não tomar cuidado, pode ficar um pouco fora de controle. Então, geralmente o que eu tentei fazer é mantê-lo baixo para gostar de uma ou duas fontes personalizadas. E se você pudesse se safar, usar fontes do sistema pode ser uma boa idéia. Há uma nova técnica que está usando esta pilha de fontes do sistema. Pode parecer um pouco longo e fora do comum, mas esta é uma nova maneira de lidar com fundos que usará as melhores fontes que os sistemas operacionais e navegadores que você conhece, inclusive agora, é claro, se você quero que pareça o mesmo em todos os lugares. Os títulos personalizados são novamente uma coisa importante para isso. E quanto à compatibilidade entre diferentes navegadores. Isso se resume a todas as coisas que eu falei antes. Porque se alguém está usando um navegador que não é realmente tão obscuro e o site não está funcionando muito bem para eles. Isso não vai ser uma boa experiência de usuário. Você quer ter certeza de que o maior número de pessoas pode usar seu site quanto possível, mas, claro, um grau razoável 6. Considere o acessibilidade: Agora há um último conceito que eu quero discutir, que é sobre acessibilidade. Agora isso cobre uma grande variedade de tópicos, mas eu vou tentar quebrar algumas das coisas que eu tento manter em mente. O primeiro ponto seria sobre a invisibilidade do contraste, e isso se resume a cor, tamanho e forma dos objetos na página. Quando se trata de opções de cores, você quer pensar sobre a diferença entre o fundo em primeiro plano. Também é uma boa idéia certificar-se de que as cores não são muito nítidas e ousadas e simplesmente flagrantes e difíceis de ver. Você quer pensar em daltonismo. Existem diferentes ferramentas que você pode usar para emular daltonismo, e, em seguida, tanto quanto tamanho e forma de objetos, é apenas sobre como garantir que as fontes que você escolher nossa borda herbal no tamanho que você pretende para que eles sejam. Agora, esses conceitos se aplicam a coisas de texto uniforme, mas isso é tipicamente a principal coisa com que você terá que se preocupar. Outra coisa que você pode querer investigar é apoiar leitores de páginas em seu site. Existem algumas técnicas diferentes que você pode usar para garantir que o conteúdo seja lido corretamente para usuários cegos que precisam confiar em programas para ler em voz alta o conteúdo da página. Eu realmente não me preocupei muito com isso na minha mira, porque o conteúdo que eu faço tende a ser visualmente orientado para começar. Mas é algo para pensar agora. Outra coisa seria não exigir movimentos de precisão e navegação. Você não quer exigir que alguém tenha que estudar uma mão, e isso não afeta apenas pessoas com deficiência ou idosos. É realmente irritante para qualquer um ter que navegar através de um menu que continua se escondendo se você se mover apenas para o lado errado, Oh! 7. Considerações finais: Tudo bem. Acho que isso cobre quase tudo. Então, neste ponto, você deve ter uma compreensão bastante sólida de por que eu projetei sobre sites da maneira que eu faço. E lembre-se de que não há regras rígidas e rápidas quando se trata de projetar qualquer coisa . É apenas uma questão de manter certos pontos em mente e descobrir o que é melhor para o seu projeto. Agora, se você está construindo ou projetando algo ao longo do caminho, você seria ótimo para você compartilhá-lo abaixo. que todos possam ver no que você tem trabalhado, e você nem precisa esperar até que termine para poder compartilhá-lo. Você pode atualizá-lo ao longo do caminho, fez progresso e obter informações de outras pessoas que seguem esta classe. E você pode até me fazer perguntas e eu tentarei ser o mais responsivo possível. Lembre-se, eu definitivamente não sei tudo quando se trata de tudo isso. Estou apenas compartilhando os pontos que aprendi ao longo dos anos construindo meus próprios sites. Então, espero ter compartilhado esses pontos bem o suficiente. E se você estiver interessado em ver quaisquer aulas futuras que eu postar aqui. Certifique-se de seguir-me abaixo que ser muito apreciado e sinta-se livre para fazer quaisquer pedidos sobre coisas que você gosta de mim para mostrar-lhe se isso é mais sobre desenvolvimento de Web design ou algo sobre osso de jogo. Mas de qualquer forma, acho que vai ter que ser um quatro hoje, então sim, te vejo por aí. Adeus.