desenvolvimento para web - xhtml, css, padrões da web, usabilidade, acessibilidade, web design, SEO, blogs e tecnologias para desenvolver a web Développement web - xhtml, css, standards du Web, l'utilisabilité, l'accessibilité, web design, SEO, des blogs et de la technologie pour développer le web

No quinto artigo da série, apresento alguns exemplos web do princípio da boa continuidade ou, como prefiro, princípio do alinhamento . Dans le cinquième article de cette série, la présentation de quelques exemples du Web principe de bonne continuité, ou comme je préfère, le principe de l'alignement.

Como apresentado no artigo anterior , o princípio do alinhamento é muito importante! Tel que présenté dans l'article précédent, le principe de l'alignement est très important! Quando utilizado correta e conscientemente, podemos fazer layouts mais organizados , mais consistentes e profissionais , já que, utilizando este princípio de Gestalt , podemos insinuar que elementos visuais têm interelações entre si (e outras coisas mais). Lorsqu'ils sont utilisés correctement et en toute conscience, nous pouvons faire des mises en page plus organisé, plus cohérent et plus professionnel, depuis, en utilisant ce principe de la Gestalt, peuvent insinuer que les éléments visuels ont interelações entre eux (et d'autres choses).

Em qualquer web design feito por alguém que estudou o mínimo, é possível encontrar aplicações do princípio do alinhamento. En tout état de conception de sites Web fait par quelqu'un qui a étudié le moins, il est possible de trouver des applications du principe de l'alignement. Lembrem-se: nada é por acaso (tanto no desenvolvimento web , quanto na vida)! Permettez-moi de vous rappeler: rien n'est par hasard (en développement web, comme dans la vie)!

Este artigo contém imagens com tamanho significativo. Cet article contient des images de taille significative. Em função disso, há um link , logo abaixo, para continuar ler o restante da matéria. En conséquence, il ya un lien, ci-dessous pour continuer la lecture du reste du champ.

Em cada screenshot , tracei linhas para evidenciar como o alinhamento nas páginas web acontece. Dans chaque capture d'écran, tracei lignes de démontrer comment l'alignement se passe sur les pages Web. Percebam, novamente, que nada é por acaso. Percebam, à nouveau, que rien n'est par hasard. Mesmo em sites “abertos”, sem muitos elementos de delimitação, é possível identificar o uso do princípio da boa continuidade em ação. Même sur des sites "ouverts", sans de nombreux éléments de démarcation, peuvent être identifiés en utilisant le principe de la bonne continuité dans l'action. É justamente através dele que elementos C'est grâce à lui que les éléments

Exemplos do princípio da proximidade aplicado ao web design Parmi les principe de proximité appliquée à la conception Web

Vejam no site da aleusia como os blocos de textos superiores mantém um perfeito alinhamento com os da parte inferior. Rechercher sur le site de aleusia comme les blocs de texte ci-dessus maintient un alignement parfait avec le fond. A base da caixa de busca, acima e à direita, possui a mesma “linha base” que o logotipo. La base de ce champ de recherche ci-dessus et à droite, a la même "de base" que le logo. Vejam que recurso interessante eles utilizaram: os textos à direita “ Quote of The Day ” e “ Support “, estão alinhados com a linha que fica abaixo do subtítulo “ Welcome to Aleusia “. Rechercher caractéristique intéressante qu'ils ont utilisé: les textes sur le droit "citation du jour» et le «soutien», sont alignées sur la ligne qui est au-dessous du sous-titre "Bienvenue à Aleusia." Por que eles simplesmente não eliminaram esta linha e desceram um pouco o subtítulo? Pourquoi ne pas tout simplement éliminé cette ligne a légèrement diminué et le sous-titre? Já que, inconscientemente, os visitantes percebem que este elemento está um pouco desalinhado, eles “prestam mais atenção” naquele ponto, que “incomoda” sua percepção; dessa forma, é garantido que a maioria das pessoas que visitarem este web site lerão o texto de apresentação. Étant donné que, inconsciemment, les visiteurs se rendre compte que c'est un peu mal orienté, ils "fournir une plus grande attention" à ce moment-là, que «mal à l'aise" leur perception, donc, il est garanti que la plupart des gens qui visitent notre site Web va lire le texte de la présentation.

Conhecimento é poder , meus caros! Savoir, c'est pouvoir, mon cher!

No site da desi9n , eles pecaram só um pouquinho no alinhamento dos textos de descrição dos serviços (em baixo das respectivas imagens). Sur le site de desi9n, ils n'ont baissé que légèrement dans l'alignement du texte de description des services (leurs images ci-dessous). Percebam que eles estão ligeiramento recuados à esquerda. Vous remarquerez qu'ils sont en retrait ligeiramento gauche. Retirar esta margem e justificar o texto, talvez resolvesse o caso; entretanto, talvez eles tenham escolhido um texto alinhado à esquerda para não passar a idéia de conservadorismo ; para dizer que eles são “despojados” (no bom sentido , claro). Supprimer cette marge et de justifier le texte, peut-être résoudre le cas, mais peut-être ils ont choisi un texte aligné à gauche de ne pas passer l'idée de conservatisme, de dire qu'ils sont «autorisé» (dans la bonne direction, bien sûr). Coisa que, aparentemente, é característica quase que obrigatória no mundo de designers … Nos textos das 3 colunas, abaixo, suas bases estão quase alinhadas, também. Chose qui, apparemment, est presque obligatoires de designers dans le monde… Dans le texte de la colonne 3, ci-dessous, leurs bases sont presque alignés, trop. Eles poderiam ter pensado melhor nas palavras para promover um perfeito alinhamento entre todos (mas isso, às vezes, é bem difícil de fazer, mesmo, por isso, essa passa… rsrs). Ils aurait pu penser le meilleur mots pour promouvoir un alignement parfait entre tous (mais qu'il est parfois difficile à faire, même si, cela devient rsrs…).

A brasuca Luxicom tem um design muito bonito e com imagens bem trabalhadas! Le brasuca Luxicom a un très beau design et bien travaillé avec des images! Utilizaram muito bem o recurso da sangria naquele dispositivo móvel (”sangria” é quando algum elemento “extrapola os limites”). Utilisé très bien l'utilisation de saignement dans ce dispositif mobile ( "hémorragie" quand un élément est "au-delà des limites"). Percebam que a parte superior do site (acima do retângulo escuro) está bem alinhadinha; entretanto, a parte inferior não respeito a boa continuidade: está com seus elementos desalinhados em relação aos que estão em cima. Vous remarquerez que la partie supérieure du site (au-dessus du rectangle la tombée de la nuit) est bien alinhadinha, mais le fond ne respecte pas la bonne continuité: desalinhados est avec ses éléments par rapport à celles ci-dessus. O botão “Buscar” não é desalinhado no web site ; deve ter dado algum problema quando o superscreenshot gerou a imagem… La "recherche" est pas mal alignée sur le site Web; devraient avoir un problème lorsque le superscreenshot généré l'image…

Enfim, existem literalmente milhões de exemplos de aplicação do princípio de Gestalt do alinhamento pela web à fora. Enfin, il existe littéralement des millions d'exemples de l'application du principe de l'alignement de la Gestalt le Web à l'extérieur. Basta procurar que, agora que você já tem consciência de sua existência e aplicação, vai identificar os acertos e equívocos dos web designers rapidinho! Il suffit de voir, maintenant que vous êtes déjà au courant de son existence et la mise en œuvre, va identifier les réussites et les erreurs des concepteurs de sites Web rapidinho! ;-)

Ah! Perceberam que, além dos elementos estarem alinhados, alguns deles (os mais próximos), apresentam uma outra característica em comum? Ils ont vu que, outre les éléments sont alignés, certains d'entre eux (la plus proche), ont une autre caractéristique en commun? Eles estão exatamente com as mesmas distâncias um do outro! Ce sont exactement les mêmes références dist "les uns aux autres! Não se esqueçam do princípio da proximidade ! Ne pas oublier le principe de proximité!

No próximo artigo: princípio da experiência passada . Dans l'article suivant: principe de l'expérience passée.