{"id":115323,"date":"2023-01-12T12:24:00","date_gmt":"2023-01-12T10:24:00","guid":{"rendered":"https:\/\/elementor.com\/blog\/20-principios-de-design-de-websites-que-todo-profissional-da-web-deve-conhecer\/"},"modified":"2025-12-03T23:32:46","modified_gmt":"2025-12-03T21:32:46","slug":"20-principios-de-design-de-websites-que-todo-profissional-da-web-deve-conhecer","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/pt-br\/20-principios-de-design-de-websites-que-todo-profissional-da-web-deve-conhecer\/","title":{"rendered":"20 Princ\u00edpios de Design de Websites Que Todo Profissional da Web Deve Conhecer"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"115323\" class=\"elementor elementor-115323 elementor-41488\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-b3f279d elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"b3f279d\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-794607e\" data-id=\"794607e\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d026551 elementor-widget elementor-widget-text-editor\" data-id=\"d026551\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Sobre a autora: Alina Khazanova, Designer de Produto @ <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/\" title=\"Elementor\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"974\">Elementor<\/a><\/b><\/p>\n<p>Alina \u00e9 designer de produto na Elementor.<br \/>\nSua paix\u00e3o \u00e9 proporcionar uma experi\u00eancia de produto valiosa e satisfat\u00f3ria aos usu\u00e1rios.  <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3e7825e elementor-widget elementor-widget-text-editor\" data-id=\"3e7825e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Seguir os princ\u00edpios de design de websites pode fazer ou quebrar o sucesso do seu site.<br \/>\n\u00c9 a diferen\u00e7a entre os usu\u00e1rios sa\u00edrem quase imediatamente ao acessar sua p\u00e1gina inicial, ou explorarem seus servi\u00e7os e produtos e eventualmente converterem. <\/p>\n<p>O design n\u00e3o \u00e9 de forma alguma uma ci\u00eancia exata.<br \/>\nNo entanto, existem muitos princ\u00edpios \u00fateis e regras pr\u00e1ticas que podem ajudar a melhorar seus projetos tanto em termos de usabilidade quanto de est\u00e9tica ao <a href=\"https:\/\/elementor.com\/features\/for-professionals\/\">criar um site profissional<\/a>. <\/p>\n<p>Neste artigo, explicaremos o que s\u00e3o os princ\u00edpios de design e por que voc\u00ea deve conhec\u00ea-los.<br \/>\nTamb\u00e9m discutiremos algumas das diretrizes mais populares e eficazes a seguir.  Vamos come\u00e7ar!<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e968afb blog-toc elementor-widget elementor-widget-heading\" data-id=\"e968afb\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">\u00cdndice<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9eb4e3b blog-toc elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"9eb4e3b\" data-element_type=\"widget\" data-widget_type=\"icon-list.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#what-are-design-principles\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">O Que S\u00e3o Princ\u00edpios de Design de Websites?<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#principles-effective-website-design\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Princ\u00edpios Chave de Design Eficaz de Websites<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#ux-laws\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">As 10 Leis da Experi\u00eancia do Usu\u00e1rio (UX)<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#usability-commandments\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Os 10 \"Mandamentos\" de Usabilidade por Jakob Nielsen<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#apply-website-design-principles\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Como Aplicar Princ\u00edpios de Design de Websites em Seus Projetos<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bf8398a elementor-widget elementor-widget-menu-anchor\" data-id=\"bf8398a\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"o-que-sao-principios-de-design\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-89cb02d elementor-widget elementor-widget-heading\" data-id=\"89cb02d\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">O Que S\u00e3o Princ\u00edpios de Design de Websites? <\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2f6db34 elementor-widget elementor-widget-text-editor\" data-id=\"2f6db34\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Os princ\u00edpios de design s\u00e3o baseados em contribui\u00e7\u00f5es de profissionais de ind\u00fastrias t\u00e3o diversas quanto psicologia e ci\u00eancia comportamental, f\u00edsica, ergonomia e mais.<br \/>\nEm geral, esses princ\u00edpios s\u00e3o <a href=\"https:\/\/www.interaction-design.org\/literature\/topics\/design-principles\" target=\"_blank\" rel=\"noopener\">leis flex\u00edveis que guiam os designers<\/a> na produ\u00e7\u00e3o de produtos finais eficazes.<br \/>\nEles afetam quais elementos s\u00e3o escolhidos ou descartados e como esses recursos s\u00e3o organizados.  <\/p>\n<p>Os princ\u00edpios de design facilitam a cria\u00e7\u00e3o de uma Experi\u00eancia do Usu\u00e1rio (UX) e Interface do Usu\u00e1rio (UI) esteticamente agrad\u00e1veis e eficientes.<br \/>\nImplement\u00e1-los corretamente impulsiona convers\u00f5es.<br \/>\nPor exemplo, o Pipedrive <a href=\"https:\/\/thenextweb.com\/entrepreneur\/2012\/05\/13\/5-accelerator-lessons-how-to-raise-funds-and-build-a-business\/\" target=\"_blank\" rel=\"noopener\">aumentou as inscri\u00e7\u00f5es em 300 por cento<\/a> ap\u00f3s implementar uma pr\u00e1tica recomendada chave \u2014 simplicidade.  <\/p>\n<p>Incorporar princ\u00edpios de design em seus projetos melhorar\u00e1 a usabilidade de seus websites, influenciar\u00e1 como eles s\u00e3o percebidos e, em \u00faltima an\u00e1lise, permitir\u00e1 que voc\u00ea tome as melhores decis\u00f5es tanto para seus usu\u00e1rios quanto para <a href=\"https:\/\/elementor.com\/blog\/start-web-design-business\/\">seu neg\u00f3cio de design web<\/a>.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5681661 elementor-widget elementor-widget-menu-anchor\" data-id=\"5681661\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"principios-design-eficaz-de-websites\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9719373 elementor-widget elementor-widget-heading\" data-id=\"9719373\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">20 Princ\u00edpios Chave de Design Eficaz de Websites<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-152f958 elementor-widget elementor-widget-text-editor\" data-id=\"152f958\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Existem muitas defini\u00e7\u00f5es de princ\u00edpios de design dispon\u00edveis online, e diferentes designers e outros profissionais os interpretar\u00e3o de acordo com suas necessidades.<br \/>\nNo entanto, existem algumas pr\u00e1ticas recomendadas que se aplicam independentemente do contexto. <\/p>\n<p>A seguir est\u00e3o alguns dos princ\u00edpios de design de websites mais populares, conforme sugerido por cientistas e especialistas em usabilidade.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c51188b elementor-widget elementor-widget-menu-anchor\" data-id=\"c51188b\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"leis-ux\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6605646 elementor-widget elementor-widget-heading\" data-id=\"6605646\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">As 10 Leis da Experi\u00eancia do Usu\u00e1rio (UX) <\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f6c8ed0 elementor-widget elementor-widget-text-editor\" data-id=\"f6c8ed0\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>As <a href=\"https:\/\/lawsofux.com\/\" target=\"_blank\" rel=\"noopener\">leis de UX<\/a> s\u00e3o uma cole\u00e7\u00e3o de princ\u00edpios de design por <a href=\"https:\/\/jonyablonski.com\/\" target=\"_blank\" rel=\"noopener\">Jon Yablonski<\/a> \u2014 designer de produto s\u00eanior na General Motors \u2014 de seu livro \u201cLaws of UX: Using Psychology to Design Better Products &amp; Services\u201d.<br \/>\nEstas s\u00e3o diretrizes s\u00f3lidas que todo designer deve considerar.<br \/>\nAqui est\u00e3o alguns dos princ\u00edpios mais importantes listados por Yablonski:  <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-30613b4 elementor-widget elementor-widget-menu-anchor\" data-id=\"30613b4\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"lei-de-fitts\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d973f3e elementor-widget elementor-widget-heading\" data-id=\"d973f3e\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">1. Torne os Principais Alvos Acion\u00e1veis F\u00e1ceis de Alcan\u00e7ar (Lei de Fitts) <\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f83c904 elementor-widget elementor-widget-text-editor\" data-id=\"f83c904\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><a href=\"https:\/\/lawsofux.com\/fittss-law.html\" target=\"_blank\" rel=\"noopener\">A lei de Fitts<\/a> origina-se do trabalho do psic\u00f3logo Paul Fitts ao examinar o sistema motor humano.<br \/>\nEsta lei afirma que a dist\u00e2ncia e o tamanho de um elemento alvo impactam diretamente o tempo que um usu\u00e1rio leva para navegar at\u00e9 ele e interagir com ele.<br \/>\nIsso significa que voc\u00ea deve tornar seus principais alvos acion\u00e1veis f\u00e1ceis de alcan\u00e7ar.  <\/p>\n<p>Al\u00e9m disso, se voc\u00ea tiver v\u00e1rios alvos, deve haver espa\u00e7o suficiente entre eles.<br \/>\nPor exemplo, ao projetar para dispositivos m\u00f3veis, os \u00edcones clic\u00e1veis precisam ser grandes o suficiente para tocar: <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6cda971 elementor-widget elementor-widget-image\" data-id=\"6cda971\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/Illustration-1_Fitts-Law-r4q6wpumnsip39bhdhg7n350z8b6nxaj3t7kjjlg9w.png\" title=\"Illustration 1_Fitt&#8217;s Law\" alt=\"Illustration 1_Fitt&#039;s Law\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e995e1b elementor-widget elementor-widget-text-editor\" data-id=\"e995e1b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>O espa\u00e7amento extra entre os bot\u00f5es garantir\u00e1 que os usu\u00e1rios n\u00e3o cliquem no \u00edcone errado acidentalmente.<br \/>\nComo regra, a \u00e1rea clic\u00e1vel m\u00ednima para designs m\u00f3veis deve ser de 40 x 40 pixels. <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6559292 elementor-widget elementor-widget-menu-anchor\" data-id=\"6559292\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"lei-de-hick\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8c09c27 elementor-widget elementor-widget-heading\" data-id=\"8c09c27\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">2. Mantenha as Escolhas dos Usu\u00e1rios ao M\u00ednimo (Lei de Hick) <\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b49235a elementor-widget elementor-widget-text-editor\" data-id=\"b49235a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Se voc\u00ea j\u00e1 se sentiu t\u00e3o sobrecarregado pelo n\u00famero de escolhas \u00e0 sua frente que teve dificuldade em decidir entre elas, entender\u00e1 como muitas op\u00e7\u00f5es podem ser paralisantes para os usu\u00e1rios.<br \/>\nEsta \u00e9 a lei de Hick em poucas palavras.<br \/>\nQuanto mais escolhas dispon\u00edveis e mais complexas elas forem, mais tempo os usu\u00e1rios levar\u00e3o para tomar uma decis\u00e3o.  <\/p>\n<p><a href=\"https:\/\/lawsofux.com\/hicks-law.html\" target=\"_blank\" rel=\"noopener\">A lei de Hick<\/a>, tamb\u00e9m conhecida como lei de Hick-Hyman, \u00e9 nomeada em homenagem a William Edmund Hick e Ray Hyman, dois psic\u00f3logos que examinaram a correla\u00e7\u00e3o entre o n\u00famero de est\u00edmulos apresentados a um indiv\u00edduo e seu tempo de rea\u00e7\u00e3o.<\/p>\n<p>Este princ\u00edpio significa efetivamente que voc\u00ea deve remover a desordem e mostrar aos seus usu\u00e1rios apenas as op\u00e7\u00f5es mais essenciais de que eles precisam.<br \/>\nPor exemplo, a maioria dos sites oferece uma escolha clara entre \u201cSalvar\u201d ou \u201cCancelar\u201d e \u201cSim\u201d ou \u201cN\u00e3o\u201d ao confirmar alguma a\u00e7\u00e3o: <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d4ee522 elementor-widget elementor-widget-image\" data-id=\"d4ee522\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/Illustration-2_Hick\u2019s-law-r4q73453679y3q0z0qzt3z0yims41rornh1j4c3zxg.png\" title=\"Illustration 2_Hick\u2019s law\" alt=\"Illustration 2_Hick\u2019s law\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9f5097b elementor-widget elementor-widget-text-editor\" data-id=\"9f5097b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Da mesma forma, esta lei tamb\u00e9m pode ser aplicada para simplificar seu menu de navega\u00e7\u00e3o, exibir produtos ou servi\u00e7os e outros elementos de design do site.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d0ae190 elementor-widget elementor-widget-menu-anchor\" data-id=\"d0ae190\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"lei-da-regio-comum\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bd5b4a2 elementor-widget elementor-widget-heading\" data-id=\"bd5b4a2\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">3. Coloque Elementos Relacionados em \u00c1reas Comuns (Lei da Regi\u00e3o Comum) <\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-14332e6 elementor-widget elementor-widget-text-editor\" data-id=\"14332e6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>A <a href=\"https:\/\/lawsofux.com\/law-of-common-region\" target=\"_blank\" rel=\"noopener\">lei da regi\u00e3o comum<\/a>, uma das v\u00e1rias leis da escola de psicologia Gestalt, simplesmente afirma que se os elementos em uma p\u00e1gina estiverem agrupados de forma pr\u00f3xima, eles ser\u00e3o percebidos como conectados entre si. <\/p>\n<p>Voc\u00ea pode conseguir isso com bordas, fundos ou espa\u00e7amento.<br \/>\nPor exemplo, links de navega\u00e7\u00e3o geralmente s\u00e3o colocados juntos para formar um menu: <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d65b482 elementor-widget elementor-widget-image\" data-id=\"d65b482\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/Illustration-3_Common-Areas-r4q738ua4dgdpru59b0xyfu9hk4y497fc4ayipx12c.png\" title=\"Illustration 3_Common Areas\" alt=\"Illustration 3_Common Areas\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2eb35d5 elementor-widget elementor-widget-text-editor\" data-id=\"2eb35d5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Este princ\u00edpio \u00e9 sobre composi\u00e7\u00e3o e espa\u00e7amento, e voc\u00ea deve us\u00e1-lo sabiamente.<br \/>\nComo outro exemplo, na p\u00e1gina inicial de um blog onde as pr\u00e9vias s\u00e3o exibidas cronologicamente, o t\u00edtulo, a descri\u00e7\u00e3o e a imagem de cada post devem ser visualmente agrupados. <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0f94917 elementor-widget elementor-widget-menu-anchor\" data-id=\"0f94917\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"lei-de-jakob\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8fdc11e elementor-widget elementor-widget-heading\" data-id=\"8fdc11e\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">4. Use Cen\u00e1rios e L\u00f3gicas Familiares (Lei de Jakob) <\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9687b26 elementor-widget elementor-widget-text-editor\" data-id=\"9687b26\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><a href=\"https:\/\/lawsofux.com\/jakobs-law.html\">A lei de Jakob<\/a>, cunhada por Jakob Nielsen, cofundador do Nielsen Norman Group, defende o uso de cen\u00e1rios e l\u00f3gicas familiares no desenvolvimento de UI.<br \/>\nSeus usu\u00e1rios geralmente esperam \u2014 e preferem \u2014 que seu site funcione da mesma forma que outros com os quais j\u00e1 est\u00e3o familiarizados.  <\/p>\n<p>Cada um de n\u00f3s constr\u00f3i modelos mentais em torno das conven\u00e7\u00f5es que cercam os sites.<br \/>\nIsso permite que seus usu\u00e1rios se concentrem no que desejam alcan\u00e7ar, em vez de aprender a navegar em uma UI desconhecida. <\/p>\n<p>Isso significa que voc\u00ea deve manter o que eles j\u00e1 conhecem e n\u00e3o sobrecarreg\u00e1-los com cen\u00e1rios desconhecidos.<br \/>\nUm \u00edcone de &#8220;hamb\u00farguer&#8221;, por exemplo, geralmente abrir\u00e1 algum tipo de menu: <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7d99f4f elementor-widget elementor-widget-image\" data-id=\"7d99f4f\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/Illustration-4_Jakob\u2019s-Law-r4q6y2q8j6dluzchg2kt8qszv9m9s6okmj4thxkzac.png\" title=\"Illustration 4_Jakob\u2019s Law\" alt=\"Illustration 4_Jakob\u2019s Law\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3ef31e9 elementor-widget elementor-widget-text-editor\" data-id=\"3ef31e9\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Se voc\u00ea usar esse \u00edcone em seu design, ele deve se comportar da maneira que seus usu\u00e1rios esperam.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2b9c17e elementor-widget elementor-widget-menu-anchor\" data-id=\"2b9c17e\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"lei-da-prgnanz\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a0e9a52 elementor-widget elementor-widget-heading\" data-id=\"a0e9a52\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">5. Use Estruturas Simples e Evite Formas Complexas (Lei da Pr\u00e4gnanz) <\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-447e17b elementor-widget elementor-widget-text-editor\" data-id=\"447e17b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Em 1910, Max Wertheimer, um psic\u00f3logo, observou uma s\u00e9rie de luzes piscando em um cruzamento ferrovi\u00e1rio.<br \/>\nEmbora parecesse que uma \u00fanica luz se movia ao redor do letreiro entre as l\u00e2mpadas, na verdade era uma s\u00e9rie de l\u00e2mpadas acendendo e apagando. <\/p>\n<p>Essa observa\u00e7\u00e3o formou a base para um conjunto de princ\u00edpios sobre como percebemos visualmente os objetos.<br \/>\nUm deles \u00e9 a <a href=\"https:\/\/www.interaction-design.org\/literature\/article\/the-laws-of-figure-ground-praegnanz-closure-and-common-fate-gestalt-principles-3\" rel=\"noopener\">lei da Pr\u00e4gnanz<\/a>, que recomenda o uso de estruturas simples e a evita\u00e7\u00e3o de formas complexas. <\/p>\n<p>Seus usu\u00e1rios interpretar\u00e3o seu design usando o menor esfor\u00e7o cognitivo poss\u00edvel.<br \/>\nImagens complexas ser\u00e3o percebidas em suas formas mais simples.<br \/>\nReduzir a sobrecarga cognitiva deve ser uma parte importante dos seus objetivos de design.  <\/p>\n<p>Voc\u00ea pode aplicar esse princ\u00edpio agrupando e alinhando elementos em blocos, colunas e se\u00e7\u00f5es relevantes, em vez de espalh\u00e1-los por toda a p\u00e1gina: <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2c6d0f8 elementor-widget elementor-widget-image\" data-id=\"2c6d0f8\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/Illustration-5_Simple-Structures-r4q76wfop6giv6izwvwpnimsni4c1vpui7mxpghwv8.png\" title=\"Illustration 5_Simple Structures\" alt=\"Illustration 5_Simple Structures\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7da43d7 elementor-widget elementor-widget-text-editor\" data-id=\"7da43d7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Estruturas e elementos simples facilitar\u00e3o a interpreta\u00e7\u00e3o.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bbefb93 elementor-widget elementor-widget-menu-anchor\" data-id=\"bbefb93\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"lei-da-proximidade\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9165ca0 elementor-widget elementor-widget-heading\" data-id=\"9165ca0\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">6. Coloque Elementos Agrupados Pr\u00f3ximos Uns dos Outros (Lei da Proximidade) <\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a3911a9 elementor-widget elementor-widget-text-editor\" data-id=\"a3911a9\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>A <a href=\"https:\/\/lawsofux.com\/law-of-proximity\" target=\"_blank\" rel=\"noopener\">lei da proximidade<\/a>, outro princ\u00edpio atribu\u00eddo \u00e0 psicologia Gestalt, afirma que elementos que est\u00e3o pr\u00f3ximos uns dos outros ser\u00e3o percebidos como um grupo.<br \/>\nIsso tamb\u00e9m reduz a sobrecarga cognitiva para seus usu\u00e1rios, pois eles entender\u00e3o mais facilmente as informa\u00e7\u00f5es. <\/p>\n<p>Aplicar esse princ\u00edpio \u00e9 tudo sobre fazer uso s\u00e1bio do espa\u00e7amento.<br \/>\nOs elementos que comp\u00f5em um grupo devem estar mais pr\u00f3ximos uns dos outros do que os de grupos diferentes. <\/p>\n<p>Em muitos cabe\u00e7alhos de sites, links de menu s\u00e3o agrupados enquanto Chamadas para A\u00e7\u00e3o (CTAs) s\u00e3o alinhadas a um lado ou de alguma forma separadas dos elementos de navega\u00e7\u00e3o:<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cc87cd0 elementor-widget elementor-widget-image\" data-id=\"cc87cd0\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/Illustration-6_Law-of-Proximity-r4q70shg9y3fefehl8u0g24xnc8g0pgnnyzbepk0ws.png\" title=\"Illustration 6_Law of Proximity\" alt=\"Illustration 6_Law of Proximity\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-be3f0c3 elementor-widget elementor-widget-text-editor\" data-id=\"be3f0c3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Esta \u00e9 uma ilustra\u00e7\u00e3o perfeita da lei da proximidade.<br \/>\nComo links de menu e CTAs servem a fun\u00e7\u00f5es diferentes, eles s\u00e3o visualmente separados. <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8040fc2 elementor-widget elementor-widget-menu-anchor\" data-id=\"8040fc2\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"lei-da-similaridade\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1252bf8 elementor-widget elementor-widget-heading\" data-id=\"1252bf8\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">7. Use a Similaridade para Unir Elementos em Grupos (Lei da Similaridade) <\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9b259a6 elementor-widget elementor-widget-text-editor\" data-id=\"9b259a6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Outra lei de Gestalt, a <a href=\"https:\/\/lawsofux.com\/law-of-similarity.html\" target=\"_blank\" rel=\"noopener\">lei da similaridade<\/a>, afirma que objetos semelhantes ser\u00e3o percebidos como relacionados, independentemente da separa\u00e7\u00e3o entre eles.<br \/>\nEsta \u00e9 a base para estilizar conjuntos de recursos com <a href=\"https:\/\/elementor.com\/blog\/website-color-schemes\/\">esquemas de cores<\/a>, \u00edcones e textos semelhantes: <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5c1728f elementor-widget elementor-widget-image\" data-id=\"5c1728f\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/Illustration-7_Law-of-Similarity-r4q6yhrnkiy70qqn092ucn0ddfk57cca0lkl6cyois.png\" title=\"Illustration 7_Law of Similarity\" alt=\"Illustration 7_Law of Similarity\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f6af023 elementor-widget elementor-widget-text-editor\" data-id=\"f6af023\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Voc\u00ea deve usar esse princ\u00edpio sabiamente para unir conte\u00fados conectados em grupos por meio de estilos semelhantes e consistentes.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-29a58a2 elementor-widget elementor-widget-menu-anchor\" data-id=\"29a58a2\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"lei-da-conectividade-uniforme\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-94d6c3a elementor-widget elementor-widget-heading\" data-id=\"94d6c3a\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">8. Conecte Elementos de Design para Mostrar sua Rela\u00e7\u00e3o (Lei da Conectividade Uniforme) <\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1f67b4f elementor-widget elementor-widget-text-editor\" data-id=\"1f67b4f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>A <a href=\"https:\/\/lawsofux.com\/law-of-uniform-connectedness\" target=\"_blank\" rel=\"noopener\">lei da conectividade uniforme<\/a>, tamb\u00e9m da psicologia Gestalt, afirma que elementos que est\u00e3o conectados visualmente ser\u00e3o vistos como mais relacionados do que elementos que n\u00e3o est\u00e3o conectados.<br \/>\nUma aplica\u00e7\u00e3o dessa lei \u00e9 usar um indicador de progresso em seus fluxos de integra\u00e7\u00e3o ou de checkout: <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d76b9ed elementor-widget elementor-widget-image\" data-id=\"d76b9ed\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/Illustration-8_Connect-Elements-r4q731bklp634w52h7rxehqkqh60eodkn332oi86g4.png\" title=\"Illustration 8_Connect Elements\" alt=\"Illustration 8_Connect Elements\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ac95482 elementor-widget elementor-widget-text-editor\" data-id=\"ac95482\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Isso cria uma conex\u00e3o visual que mostra que todas as etapas fazem parte do mesmo processo.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f26664b elementor-widget elementor-widget-menu-anchor\" data-id=\"f26664b\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"lei-de-miller\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9372c4a elementor-widget elementor-widget-heading\" data-id=\"9372c4a\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">9. Divida o Conte\u00fado em Pequenos Blocos (Lei de Miller) <\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e19c7bb elementor-widget elementor-widget-text-editor\" data-id=\"e19c7bb\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><a href=\"https:\/\/lawsofux.com\/millers-law\">A Lei de Miller<\/a> \u00e9 nomeada em homenagem ao psic\u00f3logo cognitivo George Miller, que afirmou que uma pessoa m\u00e9dia pode manter apenas cinco a nove pe\u00e7as de informa\u00e7\u00e3o em sua mem\u00f3ria de trabalho.<br \/>\nEste princ\u00edpio sugere separar o conte\u00fado em blocos.<br \/>\nPor exemplo, n\u00fameros de cart\u00f5es de cr\u00e9dito s\u00e3o geralmente divididos em grupos de quatro para ajudar as pessoas a interpret\u00e1-los.  <\/p>\n<p>Esta lei destaca a import\u00e2ncia do planejamento adequado do design.<br \/>\n\u00c0 medida que uma aplica\u00e7\u00e3o cresce e adquire mais funcionalidades, torna-se mais dif\u00edcil de usar.<br \/>\nVoc\u00ea deve planejar sua interface com isso em mente para que ela possa acomodar novas funcionalidades enquanto permanece f\u00e1cil de operar.  <\/p>\n<p>Outra maneira de aplicar esta regra \u00e9 limitando a quantidade de conte\u00fado que seu usu\u00e1rio tem que perceber em um dado momento.<br \/>\nDivida o conte\u00fado em blocos em vez de mostr\u00e1-lo todo em um \u00fanico bloco: <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5ccac58 elementor-widget elementor-widget-image\" data-id=\"5ccac58\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/Illustration-9_Chunks-r4q73ff5g7pdz1kl6vvbxw6hn98im4xjp0vcvnn9us.png\" title=\"Illustration 9_Chunks\" alt=\"Illustration 9_Chunks\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8f838a1 elementor-widget elementor-widget-text-editor\" data-id=\"8f838a1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Al\u00e9m disso, projete com os tamanhos de tela mais populares em mente e controle quantos elementos os usu\u00e1rios veem de relance.<\/p>\n<p>Seja cr\u00edtico em rela\u00e7\u00e3o ao seu design.<br \/>\nSe voc\u00ea acha que h\u00e1 muito conte\u00fado em uma se\u00e7\u00e3o, mova-o para outra e separe os itens logicamente. <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bd32c8c elementor-widget elementor-widget-menu-anchor\" data-id=\"bd32c8c\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"efeito-de-posio-serial\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-028bf8a elementor-widget elementor-widget-heading\" data-id=\"028bf8a\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">10. Destaque os Primeiros e \u00daltimos Itens em uma S\u00e9rie (Efeito de Posi\u00e7\u00e3o Serial) <\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-539491b elementor-widget elementor-widget-text-editor\" data-id=\"539491b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><a href=\"https:\/\/lawsofux.com\/serial-position-effect\" target=\"_blank\" rel=\"noopener\">Esta lei<\/a> foi cunhada pelo psic\u00f3logo alem\u00e3o Herman Ebbinghaus, que foi pioneiro em m\u00e9todos experimentais para medir a mem\u00f3ria.<br \/>\nEla afirma que os usu\u00e1rios lembrar\u00e3o melhor dos primeiros e \u00faltimos itens em uma s\u00e9rie.<br \/>\nVoc\u00ea pode usar essa tend\u00eancia para destacar as \u00e1reas mais importantes de suas p\u00e1ginas da web.  <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-02e8858 elementor-widget elementor-widget-image\" data-id=\"02e8858\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/Illustration-10_Serial-Position-r4q6ys3vnpcckgbmbvjqm2efwo56k0hbq0qxgejcmc.png\" title=\"Illustration 10_Serial Position\" alt=\"Illustration 10_Serial Position\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5c8e5f3 elementor-widget elementor-widget-text-editor\" data-id=\"5c8e5f3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">Por exemplo, conte\u00fados chave como CTAs, formul\u00e1rios ou op\u00e7\u00f5es de compra s\u00e3o mais eficazes no topo ou na parte inferior da p\u00e1gina.<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-25c4a0d elementor-widget elementor-widget-menu-anchor\" data-id=\"25c4a0d\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"mandamentos-de-usabilidade\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-19fb410 elementor-widget elementor-widget-heading\" data-id=\"19fb410\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Os 10 \"Mandamentos\" de Usabilidade de Jakob Nielsen <\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-852b5d8 elementor-widget elementor-widget-text-editor\" data-id=\"852b5d8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><a href=\"https:\/\/www.nngroup.com\/people\/jakob-nielsen\/\" target=\"_blank\" rel=\"noopener\">Jakob Nielsen<\/a> \u2014 o cofundador do Nielsen Norman Group que mencionamos brevemente anteriormente \u2014 inventou v\u00e1rios m\u00e9todos de usabilidade, incluindo os <a href=\"https:\/\/www.nngroup.com\/articles\/ten-usability-heuristics\/\" target=\"_blank\" rel=\"noopener\">dez princ\u00edpios heur\u00edsticos de avalia\u00e7\u00e3o<\/a> que estamos prestes a discutir.<br \/>\nO Nielsen Norman Group \u00e9 uma renomada empresa de pesquisa e consultoria em UX que impactou significativamente o campo do design de web e software. <\/p>\n<p>Nielsen desenvolveu originalmente esses princ\u00edpios de usabilidade em 1990, mas os revisou para m\u00e1xima clareza com base na an\u00e1lise de 249 problemas de usabilidade.<br \/>\nObserve que eles n\u00e3o s\u00e3o leis ou diretrizes espec\u00edficas, mas regras gerais.<br \/>\n\u00c9 por isso que s\u00e3o chamados de &#8220;heur\u00edsticas&#8221;.  <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a07d0a7 elementor-widget elementor-widget-menu-anchor\" data-id=\"a07d0a7\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"mantenha-os-usurios-informados\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1f4c125 elementor-widget elementor-widget-heading\" data-id=\"1f4c125\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">1. Mantenha Seus Usu\u00e1rios Informados com Feedback Apropriado <\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5d790d8 elementor-widget elementor-widget-text-editor\" data-id=\"5d790d8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Os usu\u00e1rios precisam confiar na sua marca e se sentir seguros ao usar sua aplica\u00e7\u00e3o.<br \/>\nIsso significa que seu site precisa comunicar continuamente o que est\u00e1 acontecendo e inform\u00e1-los se suas intera\u00e7\u00f5es foram bem-sucedidas. <\/p>\n<p>Por exemplo, uma loja de com\u00e9rcio eletr\u00f4nico informar\u00e1 aos usu\u00e1rios que eles adicionaram um item ao carrinho ou o salvaram para considera\u00e7\u00e3o posterior.<br \/>\nO feedback pode usar mudan\u00e7as de cor, indicadores de progresso, notifica\u00e7\u00f5es e alertas para informar visualmente o usu\u00e1rio. <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-89d7581 elementor-widget elementor-widget-menu-anchor\" data-id=\"89d7581\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"informao-em-ordem-lgica\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c40b8f0 elementor-widget elementor-widget-heading\" data-id=\"c40b8f0\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">2. A Informa\u00e7\u00e3o Deve Ser Exibida em uma Ordem L\u00f3gica e Usar Frases e Conceitos Familiares <\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b67d8a5 elementor-widget elementor-widget-text-editor\" data-id=\"b67d8a5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400\">Os usu\u00e1rios n\u00e3o devem precisar consultar um dicion\u00e1rio para entender os termos em seu site.<br \/>\nVoc\u00ea deve seguir as conven\u00e7\u00f5es.<br \/>\nUse palavras com as quais eles j\u00e1 est\u00e3o familiarizados no texto da sua interface.  <\/span><\/p>\n<p><span style=\"font-weight: 400\">Por exemplo, os termos &#8220;desfazer&#8221; e &#8220;refazer&#8221; t\u00eam significados bastante universais em interfaces de usu\u00e1rio de aplicativos.<br \/>\nMud\u00e1-los para termos desconhecidos como &#8220;reverter&#8221; e &#8220;reprisar&#8221; ser\u00e1 desorientador para os usu\u00e1rios.  <\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1d06146 elementor-widget elementor-widget-menu-anchor\" data-id=\"1d06146\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"liberdade-do-usurio\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-aef7e9b elementor-widget elementor-widget-heading\" data-id=\"aef7e9b\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">3. Permita Controle e Liberdade na Maneira como os Usu\u00e1rios Interagem com Seu Site <\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a214617 elementor-widget elementor-widget-text-editor\" data-id=\"a214617\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Os usu\u00e1rios frequentemente cometem erros e precisar\u00e3o de uma maneira de desfazer ou refazer a\u00e7\u00f5es, como usando bot\u00f5es, como mencionamos anteriormente.<br \/>\nDa mesma forma, voc\u00ea pode considerar fornecer uma op\u00e7\u00e3o <em>Editar<\/em> onde for relevante.<br \/>\nPor exemplo, esse recurso \u00e9 frequentemente \u00fatil para fazer altera\u00e7\u00f5es em coment\u00e1rios e mensagens em aplicativos de m\u00eddia social.  <\/p>\n<p>Com esses recursos dispon\u00edveis, os usu\u00e1rios se sentir\u00e3o mais no controle e menos tensos quando ocorrerem acidentes.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4a6c61b elementor-widget elementor-widget-menu-anchor\" data-id=\"4a6c61b\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"convenes-e-padres\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4a08cb2 elementor-widget elementor-widget-heading\" data-id=\"4a08cb2\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">4. Siga Conven\u00e7\u00f5es e Padr\u00f5es <\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-94f70b4 elementor-widget elementor-widget-text-editor\" data-id=\"94f70b4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Aderir aos padr\u00f5es pode parecer semelhante ao segundo princ\u00edpio, e pode ser considerado uma extens\u00e3o dele.<br \/>\nImplemente estruturas de navega\u00e7\u00e3o com as quais os usu\u00e1rios estejam familiarizados.<br \/>\nEles devem achar f\u00e1cil entender sua interface e acessar os elementos que precisam para interagir com sua p\u00e1gina.  <\/p>\n<p>Um <a href=\"https:\/\/www.nngroup.com\/articles\/do-interface-standards-stifle-design-creativity\/\" target=\"_blank\" rel=\"noopener\">relat\u00f3rio sobre a usabilidade<\/a> da terminologia do carrinho de compras ilustra isso.<br \/>\nO design usou o termo &#8220;Tren\u00f3 de Compras&#8221; na tentativa de se destacar.<br \/>\nNo entanto, 50 por cento dos usu\u00e1rios n\u00e3o entenderam o que significava.<br \/>\nA outra metade deduziu seu significado apenas porque estava no mesmo local onde normalmente estaria um carrinho em um site.   <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-aa22830 elementor-widget elementor-widget-menu-anchor\" data-id=\"aa22830\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"preveno-de-erros\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-13c99ec elementor-widget elementor-widget-heading\" data-id=\"13c99ec\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">5. Previna Erros Quando Puder e Avise os Usu\u00e1rios Antes de Tomarem A\u00e7\u00f5es Irrevers\u00edveis <\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-990240f elementor-widget elementor-widget-text-editor\" data-id=\"990240f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u00c9 inteligente exibir mensagens de erro significativas para que fique claro como recuperar de problemas e o que os causou.<br \/>\nNo entanto, \u00e9 ainda mais eficaz remover situa\u00e7\u00f5es propensas a erros ou informar explicitamente os usu\u00e1rios sobre quaisquer consequ\u00eancias conhecidas das a\u00e7\u00f5es que est\u00e3o prestes a tomar. <\/p>\n<p>Por exemplo, excluir uma conta de usu\u00e1rio \u00e9 frequentemente irrevers\u00edvel.<br \/>\nA maioria das aplica\u00e7\u00f5es destacar\u00e1 essa configura\u00e7\u00e3o em vermelho para que se destaque.<br \/>\nUma mensagem &#8220;Voc\u00ea tem certeza de que deseja fazer isso?&#8221; geralmente \u00e9 exibida se os usu\u00e1rios clicarem no bot\u00e3o <em>Excluir<\/em>.  <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-adc3fbf elementor-widget elementor-widget-menu-anchor\" data-id=\"adc3fbf\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"informao-visvel\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-687e53c elementor-widget elementor-widget-heading\" data-id=\"687e53c\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">6. Mantenha Informa\u00e7\u00f5es Importantes Vis\u00edveis <\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-295b6fb elementor-widget elementor-widget-text-editor\" data-id=\"295b6fb\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Os usu\u00e1rios n\u00e3o devem ter que lembrar informa\u00e7\u00f5es de uma etapa de um processo \u2014 como um checkout ou configura\u00e7\u00e3o t\u00e9cnica \u2014 para outra.<br \/>\nVoc\u00ea quer que seus usu\u00e1rios <a href=\"https:\/\/www.nngroup.com\/articles\/recognition-and-recall\/\" target=\"_blank\" rel=\"noopener\">reconhe\u00e7am, em vez de lembrar<\/a> informa\u00e7\u00f5es. <\/p>\n<p>Uma loja <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/features\/ecommerce\/\" title=\"com\u00e9rcio eletr\u00f4nico\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"3455\">ecommerce<\/a> pode aplicar essa heur\u00edstica disponibilizando uma lista de itens visualizados recentemente, para que os usu\u00e1rios n\u00e3o precisem lembrar os nomes dos produtos que ainda n\u00e3o conclu\u00edram a compra.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-15170e7 elementor-widget elementor-widget-menu-anchor\" data-id=\"15170e7\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"sistemas-de-construo\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-394986f elementor-widget elementor-widget-heading\" data-id=\"394986f\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">7. Construa Sistemas que Sejam Confort\u00e1veis para Novatos e Especialistas <\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-32f85e4 elementor-widget elementor-widget-text-editor\" data-id=\"32f85e4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Voc\u00ea vai querer tornar seu site f\u00e1cil para novos visitantes, mas tamb\u00e9m confort\u00e1vel para aqueles mais familiarizados com o sistema que possam precisar de <a href=\"https:\/\/www.nngroup.com\/articles\/ui-accelerators\/\" target=\"_blank\" rel=\"noopener\">aceleradores para a\u00e7\u00f5es frequentes<\/a>.<br \/>\nAtalhos de teclado, que voc\u00ea pode fornecer ou dar aos usu\u00e1rios a capacidade de criar e editar, s\u00e3o um exemplo disso. <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f19a5e9 elementor-widget elementor-widget-menu-anchor\" data-id=\"f19a5e9\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"design-esttico\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f9059eb elementor-widget elementor-widget-heading\" data-id=\"f9059eb\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">8. Fa\u00e7a Seus Designs Tanto Esteticamente Agrad\u00e1veis Quanto Simples <\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d110a51 elementor-widget elementor-widget-text-editor\" data-id=\"d110a51\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Voc\u00ea vai querer manter sua interface descomplicada em vez de sobrecarregar seus usu\u00e1rios com muitas op\u00e7\u00f5es.<br \/>\nItens desnecess\u00e1rios competem por espa\u00e7o e reduzem a visibilidade de recursos mais importantes. <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-91f0cee elementor-widget elementor-widget-menu-anchor\" data-id=\"91f0cee\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"mensagens-de-erro\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-61c8449 elementor-widget elementor-widget-heading\" data-id=\"61c8449\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">9. Forne\u00e7a Mensagens de Erro que Sejam F\u00e1ceis de Entender <\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-50f2efc elementor-widget elementor-widget-text-editor\" data-id=\"50f2efc\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Mensagens de erro claras e compreens\u00edveis facilitam a identifica\u00e7\u00e3o das fontes dos problemas e a r\u00e1pida busca por poss\u00edveis solu\u00e7\u00f5es.<br \/>\nVoc\u00ea vai querer que as suas sejam diretas, educadas (sem culpar o usu\u00e1rio) e construtivas, dando conselhos sobre como resolver o problema. <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-684a401 elementor-widget elementor-widget-menu-anchor\" data-id=\"684a401\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"documentos-pesquisveis\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ece025b elementor-widget elementor-widget-heading\" data-id=\"ece025b\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">10. Forne\u00e7a Documentos de Ajuda Pesquis\u00e1veis <\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-da6cc2c elementor-widget elementor-widget-text-editor\" data-id=\"da6cc2c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u00c0s vezes pode ser necess\u00e1rio que os usu\u00e1rios consultem informa\u00e7\u00f5es adicionais de ajuda.<br \/>\nSua documenta\u00e7\u00e3o deve ser f\u00e1cil de pesquisar para que eles possam encontrar rapidamente conte\u00fado relevante para suas situa\u00e7\u00f5es e resolver seus problemas. <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dafbc27 elementor-widget elementor-widget-menu-anchor\" data-id=\"dafbc27\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"aplicar-princpios-de-design-de-sites\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-071f588 elementor-widget elementor-widget-heading\" data-id=\"071f588\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Como Aplicar Princ\u00edpios de Design de Sites em Seus Projetos <\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b1b1875 elementor-widget elementor-widget-text-editor\" data-id=\"b1b1875\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Aprender sobre tantos princ\u00edpios e diretrizes pode parecer esmagador.<br \/>\nAqui est\u00e3o algumas dicas para aplic\u00e1-los: <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-22c9ac8 elementor-widget elementor-widget-menu-anchor\" data-id=\"22c9ac8\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"melhores-prticas\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-346cd33 elementor-widget elementor-widget-heading\" data-id=\"346cd33\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">1. Mantenha-se Familiarizado com as Melhores Pr\u00e1ticas <\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3d81fd7 elementor-widget elementor-widget-text-editor\" data-id=\"3d81fd7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Voc\u00ea vai querer continuar aprendendo e se educando sobre as melhores pr\u00e1ticas de design de UX.<br \/>\nAprenda com solu\u00e7\u00f5es existentes relacionadas \u00e0 web.<br \/>\nComece seus projetos com uma fase de pesquisa ou inspira\u00e7\u00e3o onde voc\u00ea aprende mais sobre as necessidades dos seus usu\u00e1rios e coleta refer\u00eancias de qualidade para aprender.  <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-93678ad elementor-widget elementor-widget-menu-anchor\" data-id=\"93678ad\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"escolha-princpios-sabiamente\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7ae9835 elementor-widget elementor-widget-heading\" data-id=\"7ae9835\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">2. Escolha Sabiamente os Princ\u00edpios que Vai Usar <\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3ddf0c5 elementor-widget elementor-widget-text-editor\" data-id=\"3ddf0c5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Como cada projeto \u00e9 um caso individual e se beneficiar\u00e1 de diferentes princ\u00edpios de design.<br \/>\nVoc\u00ea precisar\u00e1 priorizar quais podem ajud\u00e1-lo mais para cada site que criar.<br \/>\nTenha em mente a funcionalidade principal do site, seus fluxos de usu\u00e1rio prim\u00e1rios e seus objetivos de neg\u00f3cios correspondentes.  <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a7254a2 elementor-widget elementor-widget-menu-anchor\" data-id=\"a7254a2\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"teste-e-melhore-designs\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2d64764 elementor-widget elementor-widget-heading\" data-id=\"2d64764\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">3. Teste e Melhore Regularmente Seus Designs<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fa6afb6 elementor-widget elementor-widget-text-editor\" data-id=\"fa6afb6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Voc\u00ea precisar\u00e1 testar seu site o m\u00e1ximo poss\u00edvel com usu\u00e1rios reais do p\u00fablico-alvo.<br \/>\nSe n\u00e3o puder fazer isso, voc\u00ea pode solicitar ajuda e testar com colegas de trabalho, clientes e at\u00e9 mesmo seus co-designers para coletar informa\u00e7\u00f5es relevantes sobre a usabilidade do seu site. <\/p>\n<p>Nesta fase, voc\u00ea n\u00e3o est\u00e1 procurando perfei\u00e7\u00e3o.<br \/>\nNada \u00e9 perfeito desde o in\u00edcio, ent\u00e3o n\u00e3o tenha medo de polir e melhorar seu design de acordo com o feedback dos dados de uso. <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d43463c elementor-widget elementor-widget-menu-anchor\" data-id=\"d43463c\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"prtica\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7f5f150 elementor-widget elementor-widget-heading\" data-id=\"7f5f150\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">4. Pratique <\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4e986c6 elementor-widget elementor-widget-text-editor\" data-id=\"4e986c6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u00c0 medida que voc\u00ea pratica, come\u00e7ar\u00e1 a aplicar os princ\u00edpios de design quase subconscientemente.<br \/>\nQuanto mais voc\u00ea projetar com os princ\u00edpios de usabilidade em mente, mais f\u00e1cil ser\u00e1 para voc\u00ea gerar rapidamente solu\u00e7\u00f5es eficazes e evitar problemas. <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b268858 elementor-widget elementor-widget-menu-anchor\" data-id=\"b268858\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"estilo-nico\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5ea823a elementor-widget elementor-widget-heading\" data-id=\"5ea823a\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">5. Forme Seu Estilo \u00danico \u2014 Mas Apenas Depois de Entender o B\u00e1sico <\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-709f060 elementor-widget elementor-widget-text-editor\" data-id=\"709f060\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>As regras s\u00e3o projetadas para tornar os processos mais f\u00e1ceis, mas n\u00e3o devem ser seguidas cegamente.<br \/>\nNo entanto, muitas vezes voc\u00ea s\u00f3 conseguir\u00e1 quebrar as regras com sucesso quando entender completamente seu prop\u00f3sito. <\/p>\n<p>Esses princ\u00edpios de design formam um kit de ferramentas essencial e um conhecimento fundamental para voc\u00ea experimentar e desenvolver seu pr\u00f3prio estilo \u00fanico.<br \/>\nDepois de domin\u00e1-los, voc\u00ea pode produzir solu\u00e7\u00f5es de design extraordinariamente bem-sucedidas ao quebr\u00e1-los propositalmente. <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f363392 elementor-widget elementor-widget-menu-anchor\" data-id=\"f363392\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"editor-elementor\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c648301 elementor-widget elementor-widget-heading\" data-id=\"c648301\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">6. Use o Editor Elementor <\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3e120e8 elementor-widget elementor-widget-text-editor\" data-id=\"3e120e8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Nosso <a href=\"https:\/\/elementor.com\/features\/editor\/\" target=\"_blank\" rel=\"noopener\">Editor Elementor<\/a> \u00e9 baseado em princ\u00edpios e l\u00f3gica de design.<br \/>\nUsando nosso <a href=\"https:\/\/elementor.com\/for\/designer\/\" target=\"_blank\" rel=\"noopener\">recurso de design<\/a> e <a href=\"https:\/\/elementor.com\/widgets\/\" target=\"_blank\" rel=\"noopener\">ampla cole\u00e7\u00e3o de widgets<\/a>, voc\u00ea pode organizar melhor a estrutura de conte\u00fado do seu site e garantir que est\u00e1 construindo um produto digital amig\u00e1vel ao usu\u00e1rio. <\/p>\n<p>Por exemplo, as se\u00e7\u00f5es e colunas do Elementor ajudam voc\u00ea a agrupar o conte\u00fado logicamente.<br \/>\nOs widgets fornecem uma maneira f\u00e1cil de segmentar o conte\u00fado, empregando os princ\u00edpios de similaridade e conex\u00f5es visuais para facilitar a percep\u00e7\u00e3o dos usu\u00e1rios. <\/p>\n<p>No geral, o Elementor remove o inc\u00f4modo de organizar o conte\u00fado do zero.<br \/>\nCom nossos widgets e <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/library\/\" title=\"Modelos\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"1966\">Biblioteca de Templates<\/a>, voc\u00ea tem in\u00fameras solu\u00e7\u00f5es para implementar os princ\u00edpios de design da melhor maneira poss\u00edvel. <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6e78a05 elementor-widget elementor-widget-heading\" data-id=\"6e78a05\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Concluindo<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-34b8fd0 elementor-widget elementor-widget-text-editor\" data-id=\"34b8fd0\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Para <a href=\"https:\/\/elementor.com\/features\/for-professionals\/\">criar sites profissionais e amig\u00e1veis ao usu\u00e1rio<\/a>, voc\u00ea precisa estar familiarizado com os princ\u00edpios b\u00e1sicos de design e implement\u00e1-los sabiamente em seu trabalho.<br \/>\nIsso ajudar\u00e1 voc\u00ea a melhorar seus designs, tornando-os mais atraentes, f\u00e1ceis de usar e, o melhor de tudo, mais lucrativos. <\/p>\n<p>Cobrimos muitos t\u00f3picos neste post, incluindo <a href=\"https:\/\/lawsofux.com\/\" target=\"_blank\" rel=\"noopener\">dez leis de UX<\/a> compiladas por Jon Yablonski, e <a href=\"https:\/\/www.nngroup.com\/articles\/ten-usability-heuristics\/\" target=\"_blank\" rel=\"noopener\">dez princ\u00edpios de usabilidade<\/a> desenvolvidos por Jakob Nielsen.<br \/>\nAl\u00e9m disso, compartilhamos v\u00e1rias maneiras de implementar essas melhores pr\u00e1ticas em seu trabalho, incluindo o uso do nosso <a href=\"https:\/\/elementor.com\/features\/editor\/\" target=\"_blank\" rel=\"noopener\">Editor Elementor<\/a>. <\/p>\n<p>Voc\u00ea tem alguma d\u00favida sobre como aplicar os princ\u00edpios de design em seu trabalho?<br \/>\nDeixe-nos saber na se\u00e7\u00e3o de coment\u00e1rios abaixo!  <\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>O design n\u00e3o \u00e9 de forma alguma uma ci\u00eancia exata.<br \/>\nNo entanto, existem muitos princ\u00edpios \u00fateis e regras pr\u00e1ticas que podem ajudar a melhorar seus projetos tanto em termos de usabilidade quanto de est\u00e9tica.<br \/>\nNeste artigo, explicaremos o que s\u00e3o os princ\u00edpios de design e por que voc\u00ea deve conhec\u00ea-los.  <\/p>\n","protected":false},"author":162340,"featured_media":115324,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[360,300],"tags":[444],"marketing_persona":[47],"marketing_intent":[48],"class_list":["post-115323","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-pt","category-elementor-team-writes-pt","tag-criar"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>20 Princ\u00edpios Chave de Design Eficaz de Websites (2022) | Elementor<\/title>\n<meta name=\"description\" content=\"Existem muitos princ\u00edpios \u00fateis e regras pr\u00e1ticas que podem ajudar a melhorar seus projetos tanto em termos de usabilidade quanto de est\u00e9tica. Neste artigo, explicaremos o que s\u00e3o os princ\u00edpios de design e por que voc\u00ea deve conhec\u00ea-los.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/pt-br\/20-principios-de-design-de-websites-que-todo-profissional-da-web-deve-conhecer\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"20 Princ\u00edpios Chave de Design Eficaz de Websites (2022) | Elementor\" \/>\n<meta property=\"og:description\" content=\"Existem muitos princ\u00edpios \u00fateis e regras pr\u00e1ticas que podem ajudar a melhorar seus projetos tanto em termos de usabilidade quanto de est\u00e9tica. Neste artigo, explicaremos o que s\u00e3o os princ\u00edpios de design e por que voc\u00ea deve conhec\u00ea-los.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/pt-br\/20-principios-de-design-de-websites-que-todo-profissional-da-web-deve-conhecer\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-12T10:24:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-03T21:32:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/08\/Principles-of-Website-Design_external.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1201\" \/>\n\t<meta property=\"og:image:height\" content=\"629\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Dean Issacharoff\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Dean Issacharoff\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"18 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/20-principios-de-design-de-websites-que-todo-profissional-da-web-deve-conhecer\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/20-principios-de-design-de-websites-que-todo-profissional-da-web-deve-conhecer\/\"},\"author\":{\"name\":\"Dean Issacharoff\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/c1e360690c573e3e91ec4abdb7541055\"},\"headline\":\"20 Princ\u00edpios de Design de Websites Que Todo Profissional da Web Deve Conhecer\",\"datePublished\":\"2023-01-12T10:24:00+00:00\",\"dateModified\":\"2025-12-03T21:32:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/20-principios-de-design-de-websites-que-todo-profissional-da-web-deve-conhecer\/\"},\"wordCount\":3517,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/20-principios-de-design-de-websites-que-todo-profissional-da-web-deve-conhecer\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/08\/Principles-of-Website-Design_external.png\",\"keywords\":[\"Criar\"],\"articleSection\":[\"Projeto\",\"Reda\u00e7\u00f5es da equipe Elementor\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/pt-br\/20-principios-de-design-de-websites-que-todo-profissional-da-web-deve-conhecer\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/20-principios-de-design-de-websites-que-todo-profissional-da-web-deve-conhecer\/\",\"url\":\"https:\/\/elementor.com\/blog\/pt-br\/20-principios-de-design-de-websites-que-todo-profissional-da-web-deve-conhecer\/\",\"name\":\"20 Princ\u00edpios Chave de Design Eficaz de Websites (2022) | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/20-principios-de-design-de-websites-que-todo-profissional-da-web-deve-conhecer\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/20-principios-de-design-de-websites-que-todo-profissional-da-web-deve-conhecer\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/08\/Principles-of-Website-Design_external.png\",\"datePublished\":\"2023-01-12T10:24:00+00:00\",\"dateModified\":\"2025-12-03T21:32:46+00:00\",\"description\":\"Existem muitos princ\u00edpios \u00fateis e regras pr\u00e1ticas que podem ajudar a melhorar seus projetos tanto em termos de usabilidade quanto de est\u00e9tica. Neste artigo, explicaremos o que s\u00e3o os princ\u00edpios de design e por que voc\u00ea deve conhec\u00ea-los.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/20-principios-de-design-de-websites-que-todo-profissional-da-web-deve-conhecer\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/pt-br\/20-principios-de-design-de-websites-que-todo-profissional-da-web-deve-conhecer\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/20-principios-de-design-de-websites-que-todo-profissional-da-web-deve-conhecer\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/08\/Principles-of-Website-Design_external.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/08\/Principles-of-Website-Design_external.png\",\"width\":1201,\"height\":629},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/20-principios-de-design-de-websites-que-todo-profissional-da-web-deve-conhecer\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/pt-br\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Projeto\",\"item\":\"https:\/\/elementor.com\/blog\/pt-br\/category\/design-pt\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"20 Princ\u00edpios de Design de Websites Que Todo Profissional da Web Deve Conhecer\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/pt-br\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/pt-br\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/pt-br\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/c1e360690c573e3e91ec4abdb7541055\",\"name\":\"Dean Issacharoff\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/18b262e140892fa3c934d7d7c4e424d8fff8def6f71a266ab9390bc5478f66a0?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/18b262e140892fa3c934d7d7c4e424d8fff8def6f71a266ab9390bc5478f66a0?s=96&d=mm&r=g\",\"caption\":\"Dean Issacharoff\"},\"description\":\"Dean is a Product Marketing Manager at Elementor with years of experience in marketing and strategic communications. He loves good books, bad movies, and cooking for friends.\",\"url\":\"https:\/\/elementor.com\/blog\/pt-br\/author\/deanissach\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"20 Princ\u00edpios Chave de Design Eficaz de Websites (2022) | Elementor","description":"Existem muitos princ\u00edpios \u00fateis e regras pr\u00e1ticas que podem ajudar a melhorar seus projetos tanto em termos de usabilidade quanto de est\u00e9tica. Neste artigo, explicaremos o que s\u00e3o os princ\u00edpios de design e por que voc\u00ea deve conhec\u00ea-los.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/blog\/pt-br\/20-principios-de-design-de-websites-que-todo-profissional-da-web-deve-conhecer\/","og_locale":"pt_BR","og_type":"article","og_title":"20 Princ\u00edpios Chave de Design Eficaz de Websites (2022) | Elementor","og_description":"Existem muitos princ\u00edpios \u00fateis e regras pr\u00e1ticas que podem ajudar a melhorar seus projetos tanto em termos de usabilidade quanto de est\u00e9tica. Neste artigo, explicaremos o que s\u00e3o os princ\u00edpios de design e por que voc\u00ea deve conhec\u00ea-los.","og_url":"https:\/\/elementor.com\/blog\/pt-br\/20-principios-de-design-de-websites-que-todo-profissional-da-web-deve-conhecer\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2023-01-12T10:24:00+00:00","article_modified_time":"2025-12-03T21:32:46+00:00","og_image":[{"width":1201,"height":629,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/08\/Principles-of-Website-Design_external.png","type":"image\/png"}],"author":"Dean Issacharoff","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Escrito por":"Dean Issacharoff","Est. tempo de leitura":"18 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/pt-br\/20-principios-de-design-de-websites-que-todo-profissional-da-web-deve-conhecer\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/20-principios-de-design-de-websites-que-todo-profissional-da-web-deve-conhecer\/"},"author":{"name":"Dean Issacharoff","@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/c1e360690c573e3e91ec4abdb7541055"},"headline":"20 Princ\u00edpios de Design de Websites Que Todo Profissional da Web Deve Conhecer","datePublished":"2023-01-12T10:24:00+00:00","dateModified":"2025-12-03T21:32:46+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/20-principios-de-design-de-websites-que-todo-profissional-da-web-deve-conhecer\/"},"wordCount":3517,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/20-principios-de-design-de-websites-que-todo-profissional-da-web-deve-conhecer\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/08\/Principles-of-Website-Design_external.png","keywords":["Criar"],"articleSection":["Projeto","Reda\u00e7\u00f5es da equipe Elementor"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/pt-br\/20-principios-de-design-de-websites-que-todo-profissional-da-web-deve-conhecer\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/pt-br\/20-principios-de-design-de-websites-que-todo-profissional-da-web-deve-conhecer\/","url":"https:\/\/elementor.com\/blog\/pt-br\/20-principios-de-design-de-websites-que-todo-profissional-da-web-deve-conhecer\/","name":"20 Princ\u00edpios Chave de Design Eficaz de Websites (2022) | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/20-principios-de-design-de-websites-que-todo-profissional-da-web-deve-conhecer\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/20-principios-de-design-de-websites-que-todo-profissional-da-web-deve-conhecer\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/08\/Principles-of-Website-Design_external.png","datePublished":"2023-01-12T10:24:00+00:00","dateModified":"2025-12-03T21:32:46+00:00","description":"Existem muitos princ\u00edpios \u00fateis e regras pr\u00e1ticas que podem ajudar a melhorar seus projetos tanto em termos de usabilidade quanto de est\u00e9tica. Neste artigo, explicaremos o que s\u00e3o os princ\u00edpios de design e por que voc\u00ea deve conhec\u00ea-los.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/20-principios-de-design-de-websites-que-todo-profissional-da-web-deve-conhecer\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/pt-br\/20-principios-de-design-de-websites-que-todo-profissional-da-web-deve-conhecer\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/elementor.com\/blog\/pt-br\/20-principios-de-design-de-websites-que-todo-profissional-da-web-deve-conhecer\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/08\/Principles-of-Website-Design_external.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/08\/Principles-of-Website-Design_external.png","width":1201,"height":629},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/pt-br\/20-principios-de-design-de-websites-que-todo-profissional-da-web-deve-conhecer\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/pt-br\/"},{"@type":"ListItem","position":2,"name":"Projeto","item":"https:\/\/elementor.com\/blog\/pt-br\/category\/design-pt\/"},{"@type":"ListItem","position":3,"name":"20 Princ\u00edpios de Design de Websites Que Todo Profissional da Web Deve Conhecer"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/pt-br\/#website","url":"https:\/\/elementor.com\/blog\/pt-br\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/pt-br\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/pt-br\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/pt-br\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/c1e360690c573e3e91ec4abdb7541055","name":"Dean Issacharoff","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/18b262e140892fa3c934d7d7c4e424d8fff8def6f71a266ab9390bc5478f66a0?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/18b262e140892fa3c934d7d7c4e424d8fff8def6f71a266ab9390bc5478f66a0?s=96&d=mm&r=g","caption":"Dean Issacharoff"},"description":"Dean is a Product Marketing Manager at Elementor with years of experience in marketing and strategic communications. He loves good books, bad movies, and cooking for friends.","url":"https:\/\/elementor.com\/blog\/pt-br\/author\/deanissach\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts\/115323","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/users\/162340"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/comments?post=115323"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts\/115323\/revisions"}],"predecessor-version":[{"id":115325,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts\/115323\/revisions\/115325"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/media\/115324"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/media?parent=115323"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/categories?post=115323"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/tags?post=115323"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/marketing_persona?post=115323"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/marketing_intent?post=115323"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}