{"id":4000,"date":"2026-11-04T11:32:51","date_gmt":"2026-11-04T10:32:51","guid":{"rendered":"https:\/\/nadiapereira.pt\/?p=4000"},"modified":"2026-11-04T12:01:35","modified_gmt":"2026-11-04T11:01:35","slug":"5-erros-de-design-que-fazem-o-teu-site-parecer-amador-e-como-corrigi-los","status":"publish","type":"post","link":"https:\/\/nadiapereira.pt\/en\/5-erros-de-design-que-fazem-o-teu-site-parecer-amador-e-como-corrigi-los\/","title":{"rendered":"5 design mistakes that make your website look amateur (and how to fix them)"},"content":{"rendered":"<div class=\"wp-block-stackable-image stk-block-image stk-block stk-6bb2ed5\" data-block-id=\"6bb2ed5\"><style>.stk-6bb2ed5 {margin-bottom:50px !important;}.stk-6bb2ed5 .stk-img-wrapper{aspect-ratio:3\/1 !important;height:auto !important;}.stk-6bb2ed5 .stk-img-wrapper img{object-position:40% 59% !important;}@media screen and (max-width:999px){.stk-6bb2ed5 .stk-img-wrapper{height:auto !important;}}@media screen and (max-width:689px){.stk-6bb2ed5 .stk-img-wrapper{height:auto !important;}}<\/style><figure><span class=\"stk-img-wrapper stk-image--shape-stretch\"><img loading=\"lazy\" decoding=\"async\" class=\"stk-img wp-image-4005\" src=\"https:\/\/nadiapereira.pt\/wp-content\/uploads\/2026\/11\/pexels-picjumbo-com-55570-196645.jpg\" width=\"1920\" height=\"1280\" srcset=\"https:\/\/nadiapereira.pt\/wp-content\/uploads\/2026\/11\/pexels-picjumbo-com-55570-196645.jpg 1920w, https:\/\/nadiapereira.pt\/wp-content\/uploads\/2026\/11\/pexels-picjumbo-com-55570-196645-300x200.jpg 300w, https:\/\/nadiapereira.pt\/wp-content\/uploads\/2026\/11\/pexels-picjumbo-com-55570-196645-1024x683.jpg 1024w, https:\/\/nadiapereira.pt\/wp-content\/uploads\/2026\/11\/pexels-picjumbo-com-55570-196645-768x512.jpg 768w, https:\/\/nadiapereira.pt\/wp-content\/uploads\/2026\/11\/pexels-picjumbo-com-55570-196645-1536x1024.jpg 1536w, https:\/\/nadiapereira.pt\/wp-content\/uploads\/2026\/11\/pexels-picjumbo-com-55570-196645-18x12.jpg 18w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/span><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">A visitor decides within a few seconds whether your website looks trustworthy, and it is rarely down to one big thing. Usually it is a handful of small design mistakes that add up and give a careless impression, even when the service behind the site is excellent. The good news is that most of them can be fixed without rebuilding the site from scratch. Here are the five I see most often, and what I do to put them right.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">1. No visual hierarchy: everything shouts at once<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">When everything has the same size, the same colour and the same weight, the eye has no idea where to start, and the visitor leaves. Good design tells people, without words, what matters most, what is secondary and what is merely support.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>How to fix it:<\/strong> choose one main thing per section (usually the heading and the call-to-action button) and let everything else step back. Work with three tools: size, weight and the space around an element. A trick I use a lot is to squint at the page: whatever still stands out is what the design is really prioritising. If it is the logo or a decorative element rather than your main button, there is work to do.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">And watch your buttons: if three buttons of equal prominence sit side by side, none of them wins. Define one primary button (filled) and make the others secondary (outline or text only).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">2. Too many fonts (or badly paired ones)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Three, four or five different typefaces is one of the clearest signs of a site made without a plan. Every extra font costs you consistency, and speed too, because each font file is one more request to load.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>How to fix it:<\/strong> use two families at most: one for headings and one for body text, or even a single family in different weights. When you pair two, look for a clear contrast between them (a serif for headings and a sans serif for body text, say) rather than two near-identical fonts that look like a mistake.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Then set a type scale and stick to it: for example, 16 px or more for body text, and heading sizes that rise in a fixed proportion. In a WordPress block theme or in Figma, this is defined once (in <code>theme.json<\/code> or in your text styles), and you stop choosing sizes by hand on every page. One last tip: keep lines of text between 50 and 75 characters. Lines that are too long tire the reader.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">3. Weak contrast: pale grey text on a white background<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">It looks elegant on the designer's screen and is unreadable on a mobile phone in the sun. Weak contrast is not just an aesthetic issue: it puts off people with poorer eyesight, people who are tired and people reading outdoors, which is a great many people.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>How to fix it:<\/strong> follow level AA of the <a target=\"_blank\" rel=\"noopener\" href=\"https:\/\/w3c.github.io\/wcag\/understanding\/contrast-minimum.html\">WCAG Guidelines<\/a>which ask for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18 pt or more, or 14 pt bold, which is roughly 24 px and 18.5 px). You do not need to work it out by hand: tools such as the WebAIM contrast checker or the Stark plugin for Figma give you the ratio in seconds.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Three common traps: text over images with no darkening layer, white button text on light colours, and \"subtle\" greys in captions and placeholders. If you have to choose between pretty and legible, choose legible, then make it pretty.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">4. Cramped or inconsistent spacing<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">People who are afraid of white space fill the page until nothing more fits, and the result is tiring to look at. White space is not wasted space: it groups what belongs together and separates what does not. The second problem is inconsistency: 23 px here, 31 px there, 17 px somewhere else, with no logic at all.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>How to fix it:<\/strong> define a spacing scale with just a few values and always use it. A system based on multiples of 8 px (8, 16, 24, 32, 48, 64 and so on) is the most common and works well. Follow the proximity rule: the space inside a group should always be smaller than the space between groups, otherwise a heading looks as if it belongs to the wrong paragraph.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In Figma, auto layout with fixed values does this for you. In WordPress, your theme's spacing presets stop every block from having a different measurement. And do not forget mobile: side margins of at least 16 px, and buttons with a comfortable tap area.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">5. Poor-quality (or oversized) images<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">This mistake comes in three forms: pixelated or stretched images, generic stock photos that everyone has already seen, and enormous files that slow the site down. The first two make a site look careless; the third drives visitors away before the page has even loaded.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>How to fix it:<\/strong> use your own photographs wherever possible, even simple ones, as long as they are well lit. If you have to use stock images, choose one consistent style and avoid stiff, staged poses. Keep the same treatment (colour, framing, proportions) across the whole site, and do not stretch images: crop them.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">On the technical side, resize before uploading (a 4000 px-wide image in an 800 px space is dead weight), compress, and use modern formats such as WebP or AVIF. Write alternative text (alt text) for every image too: it helps accessibility and SEO. And an image with text baked into it (a banner whose heading is part of the picture) cannot be read by screen readers and does not adapt to mobile, so use real text over the image instead.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Test your website in ten minutes<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Open your site on a computer and on your phone, and ask yourself:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Can I tell, within two seconds, what the main action is on each page?<\/li>\n\n\n\n<li>Am I using two font families at most, and a consistent scale of sizes?<\/li>\n\n\n\n<li>Does the text pass the contrast ratios (4.5:1 for normal text)?<\/li>\n\n\n\n<li>Does the spacing follow a scale, and are the groups clearly separated?<\/li>\n\n\n\n<li>Are the images sharp, consistent with each other and optimised for the web?<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">If you failed two or more of these, you do not need a new website: you need a round of tweaks. And that is usually where the difference begins between a site that looks rushed and one that inspires confidence.<\/p>","protected":false},"excerpt":{"rendered":"<p>Um visitante decide em poucos segundos se o teu site parece s\u00e9rio, e raramente \u00e9 por causa de uma coisa grande. Quase sempre s\u00e3o pequenos erros de design que se acumulam e passam uma imagem descuidada, mesmo quando o servi\u00e7o por tr\u00e1s \u00e9 \u00f3timo. A boa not\u00edcia \u00e9 que a maioria corrige-se sem refazer o [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[58],"tags":[],"class_list":["post-4000","post","type-post","status-publish","format-standard","hentry","category-web-design"],"_links":{"self":[{"href":"https:\/\/nadiapereira.pt\/en\/wp-json\/wp\/v2\/posts\/4000","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nadiapereira.pt\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nadiapereira.pt\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nadiapereira.pt\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nadiapereira.pt\/en\/wp-json\/wp\/v2\/comments?post=4000"}],"version-history":[{"count":2,"href":"https:\/\/nadiapereira.pt\/en\/wp-json\/wp\/v2\/posts\/4000\/revisions"}],"predecessor-version":[{"id":4008,"href":"https:\/\/nadiapereira.pt\/en\/wp-json\/wp\/v2\/posts\/4000\/revisions\/4008"}],"wp:attachment":[{"href":"https:\/\/nadiapereira.pt\/en\/wp-json\/wp\/v2\/media?parent=4000"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nadiapereira.pt\/en\/wp-json\/wp\/v2\/categories?post=4000"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nadiapereira.pt\/en\/wp-json\/wp\/v2\/tags?post=4000"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}