{"id":18436,"date":"2017-05-12T10:09:13","date_gmt":"2017-05-12T10:09:13","guid":{"rendered":"https:\/\/codewebbarcelona.com\/tan-horteras-los-disenos-web-organismos-oficiales\/"},"modified":"2026-04-20T21:03:22","modified_gmt":"2026-04-20T21:03:22","slug":"why-official-websites-look-tacky","status":"publish","type":"post","link":"https:\/\/codewebbarcelona.com\/en\/blog\/why-official-websites-look-tacky\/","title":{"rendered":"Why Are Official Government Websites So Tacky? #1"},"content":{"rendered":"

At some point in our lives, we’ve all endured the ordeal of trying to complete any online process through an official government website.<\/p>\n

The real shock comes when you land on the site and see a design that’s truly cutting-edge. Yes, cutting-edge\u2014if you\u2019re at the very back of the line<\/strong>.<\/p>\n

And the question that inevitably pops into your head: What did I do to deserve this punishment? Isn\u2019t paying the fine enough\u2014do I really have to do hard labor too?<\/p>\n

In this first installment of our \u201ctacky design\u201d series, we\u2019re taking a closer look at the DGT website. We\u2019ve set our GPS so we don\u2019t get lost in its maze of twists and turns.<\/p>\n

For the bravest among you, here\u2019s the link: DGT<\/a><\/p>\n

 <\/p>\n

Why is the DGT website design so tacky?<\/h2>\n

All it takes is a quick glance to realize you\u2019re facing a website designed to confuse<\/strong>. Maybe it\u2019s part of the DGT\u2019s brand identity\u2014a way to convey the true spirit of \u201cbad driving\u201d to every visitor.<\/p>\n

\"\"<\/p>\n

According to web.archive.org, the site was supposedly redesigned four years ago. Yet it looks like something straight out of the early days of the internet.<\/p>\n

<\/h3>\n

First impressions<\/h3>\n

The goal of any website\u2019s first impression should be to make it easy for users<\/strong> to find and read information. Highlight what matters most and present it so the user\u2019s mind can quickly and intuitively navigate the content. Establish a hierarchy to keep things organized.<\/p>\n

If we stick with the driving metaphor, the ideal user experience would be a one-way street with as few exits as possible\u2014and, above all, clear signage.<\/p>\n

Without even getting into the visuals, the first big issue with the DGT site is a real headache. There are over 40 links<\/strong> staring you in the face!<\/p>\n

It\u2019s like driving into a city and hitting an intersection with 40 possible exits.<\/p>\n

\"direcciones\"<\/p>\n

Second impressions<\/h3>\n

Once you\u2019ve recovered from the initial shock, regained control of your mouse arm, and remembered why you came to the site in the first place, you start at the top.<\/p>\n

The very first thing you see is a Contact link<\/strong>. Not that contact info isn\u2019t important, but couldn\u2019t it just be part of the main menu<\/strong> instead of sitting there all alone? And then there\u2019s the font: Arial Regular (yes, it\u2019s outdated, but that\u2019s the least of our problems).<\/p>\n

The rest of the links use Arial Narrow, the condensed version of the same font. Why does the contact link have to visually clash with the others?<\/p>\n

 <\/p>\n

Typography<\/h3>\n

As mentioned, the site uses both Arial Regular and Arial Narrow. Not good. This creates a visual clash between typefaces<\/strong>.<\/p>\n

If you\u2019re going to use different fonts, at least create some contrast. If you stick to one font family (which is perfectly fine), play with bold or italics\u2014but just switching between regular and condensed versions rarely looks good.<\/p>\n

On top of that, there are inconsistent font sizes<\/strong> all over the site. Every image uses a different size, and many are pixelated. It\u2019s all very… nostalgic.<\/p>\n

 <\/p>\n

Margins, paddings, and other elements<\/h3>\n

Just like with typography, there\u2019s no consistency in margins and paddings<\/strong> between elements. Every block does its own thing. Perfect for enhancing the user experience\u2014if you want that experience to be chaos.<\/p>\n

Drop shadows went out of style ages ago<\/strong>. Using them is a surefire way to make your site look dated.<\/p>\n

And as for the sidebar images<\/strong>, it\u2019s hard to tell what message they\u2019re trying to send. There are three confused-looking men doing a Ronaldinho-style wave. Maybe it\u2019s meant to transport us back in time.<\/p>\n

 <\/p>\n

Top banners<\/h3>\n

We\u2019ve got our beloved Government logo, but there\u2019s a glaring error between the two boxes: a white background line that doesn\u2019t reach the top. Either extend it or remove it, but this visual glitch is just ugly. The Government logo is 60px tall, while the DGT logo next to it is 51px. If both were the same height<\/strong>, that would be a start. Add a bit of space between them, and it\u2019d be even better.<\/p>\n

Just below the DGT logo, blatantly ignoring the horizontal line, there\u2019s a comforting message for citizens: \u201ca tu lado vamos todos\u201d (\u201cwe\u2019re all with you\u201d). Thanks, DGT.<\/p>\n

To the right, there are two more banners\u2014both, for good measure<\/strong>, set at 76.39px tall. Why not just use pi (\u03c0) at this point? Both are pixelated and use different font sizes.<\/p>\n

 <\/p>\n

Menu buttons<\/h3>\n

Beautiful. With a hover effect that\u2019s the highlight of the site so far.<\/p>\n

It would have been smart to add dropdown submenus on hover to cut down the number of visible links.<\/p>\n

 <\/p>\n

Image slider, Twitter, and social media<\/h3>\n

The image slider doesn\u2019t add much\u2014it looks like something from the 1950s, back when the internet didn\u2019t exist. The text is crammed right up against the image<\/strong>, which is bad for SEO<\/strong> and a pain to maintain<\/strong> in the backend.<\/p>\n

If the Twitter feed widget is going to be that tiny, it\u2019s probably better to leave it out.<\/p>\n

As for the social media links: every icon is a different size<\/strong> and they\u2019re all on a dark gray background\u2014presumably to match the top menu\u2019s \u201cdesign language.\u201d Well, it seems we only stick to the design language when it\u2019s guaranteed to look bad.<\/p>\n

 <\/p>\n

The three blocks of links<\/h3>\n

What should be the site\u2019s main feature is just an endless list of links. Some have images, some don\u2019t; some have descriptions, others don\u2019t.<\/p>\n

It would have been better to cut down the number of links<\/strong> and standardize the use of images and descriptions.<\/p>\n

 <\/p>\n

Scrolling further down<\/h3>\n

It doesn\u2019t get any better. The same story continues: zero usability and visually overwhelming. I\u2019m not exaggerating when I say my head was spinning after scrolling through this parade of design missteps.<\/p>\n

 <\/p>\n

Other points<\/h3>\n
    \n
  • It\u2019s not responsive<\/strong>. Maybe that\u2019s their way of discouraging people from using the DGT site on their phones while driving.<\/li>\n
  • The footer features a headline that reads \u201cFor people.\u201d Just in case anyone thought it was for livestock.<\/li>\n
  • If you browse through the different sections, you\u2019ll see that the maze only gets bigger<\/strong> the deeper you go.<\/li>\n
  • The site\u2019s source code is quite a spectacle in itself.<\/li>\n
  • The <!DOCTYPE> tag doesn\u2019t even start on the first line, which is just bad practice.<\/li>\n<\/ul>\n

     <\/p>\n

    Conclusions<\/h3>\n

    If you\u2019re planning to visit the DGT website, we recommend you skip the pre-drive drinks and make sure your seatbelt is fastened. And hopefully, you\u2019re only there by accident\u2014not because you need to pay a fine.<\/p>\n

     <\/p>\n

     <\/p>\n","protected":false},"excerpt":{"rendered":"

    At some point in our lives, we’ve all endured the ordeal of trying to complete any online process through an official government website. The real shock comes when you land on the site and see a design that’s truly cutting-edge. Yes, cutting-edge\u2014if you\u2019re at the very back of the line. And the question that inevitably […]<\/p>\n","protected":false},"author":1,"featured_media":4097,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[207,208,212,134],"class_list":["post-18436","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-destacat","category-disseny-desenvolupament-web","category-altres","category-disseny-grafic"],"acf":[],"yoast_head":"\n\u00bfPor qu\u00e9 son tan horteras los dise\u00f1os web de organismos oficiales?<\/title>\n<meta name=\"description\" content=\"Analizamos el dise\u00f1o web de la p\u00e1gina de la DGT. Nos sumergimos por sus callejones y nos quedamos mareados por tanta disonancia visual.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codewebbarcelona.com\/en\/blog\/why-official-websites-look-tacky\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u00bfPor qu\u00e9 son tan horteras los dise\u00f1os web de organismos oficiales?\" \/>\n<meta property=\"og:description\" content=\"Analizamos el dise\u00f1o web de la p\u00e1gina de la DGT. Nos sumergimos por sus callejones y nos quedamos mareados por tanta disonancia visual.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codewebbarcelona.com\/en\/blog\/why-official-websites-look-tacky\/\" \/>\n<meta property=\"og:site_name\" content=\"Code Barcelona\" \/>\n<meta property=\"article:published_time\" content=\"2017-05-12T10:09:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-20T21:03:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/05\/por-que-son-tan-horteras-los-disenos-web-de-organismos-oficiales-1-featured.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1900\" \/>\n\t<meta property=\"og:image:height\" content=\"1227\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"cd26Bc\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"cd26Bc\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/why-official-websites-look-tacky\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/why-official-websites-look-tacky\/\"},\"author\":{\"name\":\"cd26Bc\",\"@id\":\"https:\/\/codewebbarcelona.com\/en\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567\"},\"headline\":\"Why Are Official Government Websites So Tacky? #1\",\"datePublished\":\"2017-05-12T10:09:13+00:00\",\"dateModified\":\"2026-04-20T21:03:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/why-official-websites-look-tacky\/\"},\"wordCount\":1155,\"image\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/why-official-websites-look-tacky\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/05\/por-que-son-tan-horteras-los-disenos-web-de-organismos-oficiales-1-featured.jpg\",\"articleSection\":[\"Destacat\",\"Disseny i desenvolupament web\",\"Altres\",\"Dise\u00f1o gr\u00e1fico\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/why-official-websites-look-tacky\/\",\"url\":\"https:\/\/codewebbarcelona.com\/en\/blog\/why-official-websites-look-tacky\/\",\"name\":\"\u00bfPor qu\u00e9 son tan horteras los dise\u00f1os web de organismos oficiales?\",\"isPartOf\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/why-official-websites-look-tacky\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/why-official-websites-look-tacky\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/05\/por-que-son-tan-horteras-los-disenos-web-de-organismos-oficiales-1-featured.jpg\",\"datePublished\":\"2017-05-12T10:09:13+00:00\",\"dateModified\":\"2026-04-20T21:03:22+00:00\",\"author\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567\"},\"description\":\"Analizamos el dise\u00f1o web de la p\u00e1gina de la DGT. Nos sumergimos por sus callejones y nos quedamos mareados por tanta disonancia visual.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codewebbarcelona.com\/en\/blog\/why-official-websites-look-tacky\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/why-official-websites-look-tacky\/#primaryimage\",\"url\":\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/05\/por-que-son-tan-horteras-los-disenos-web-de-organismos-oficiales-1-featured.jpg\",\"contentUrl\":\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/05\/por-que-son-tan-horteras-los-disenos-web-de-organismos-oficiales-1-featured.jpg\",\"width\":1900,\"height\":1227},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codewebbarcelona.com\/en\/#website\",\"url\":\"https:\/\/codewebbarcelona.com\/en\/\",\"name\":\"Code Barcelona\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codewebbarcelona.com\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/codewebbarcelona.com\/en\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567\",\"name\":\"cd26Bc\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g\",\"caption\":\"cd26Bc\"},\"sameAs\":[\"https:\/\/codewebbarcelona.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u00bfPor qu\u00e9 son tan horteras los dise\u00f1os web de organismos oficiales?","description":"Analizamos el dise\u00f1o web de la p\u00e1gina de la DGT. Nos sumergimos por sus callejones y nos quedamos mareados por tanta disonancia visual.","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:\/\/codewebbarcelona.com\/en\/blog\/why-official-websites-look-tacky\/","og_locale":"en_US","og_type":"article","og_title":"\u00bfPor qu\u00e9 son tan horteras los dise\u00f1os web de organismos oficiales?","og_description":"Analizamos el dise\u00f1o web de la p\u00e1gina de la DGT. Nos sumergimos por sus callejones y nos quedamos mareados por tanta disonancia visual.","og_url":"https:\/\/codewebbarcelona.com\/en\/blog\/why-official-websites-look-tacky\/","og_site_name":"Code Barcelona","article_published_time":"2017-05-12T10:09:13+00:00","article_modified_time":"2026-04-20T21:03:22+00:00","og_image":[{"width":1900,"height":1227,"url":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/05\/por-que-son-tan-horteras-los-disenos-web-de-organismos-oficiales-1-featured.jpg","type":"image\/jpeg"}],"author":"cd26Bc","twitter_card":"summary_large_image","twitter_misc":{"Written by":"cd26Bc","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codewebbarcelona.com\/en\/blog\/why-official-websites-look-tacky\/#article","isPartOf":{"@id":"https:\/\/codewebbarcelona.com\/en\/blog\/why-official-websites-look-tacky\/"},"author":{"name":"cd26Bc","@id":"https:\/\/codewebbarcelona.com\/en\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567"},"headline":"Why Are Official Government Websites So Tacky? #1","datePublished":"2017-05-12T10:09:13+00:00","dateModified":"2026-04-20T21:03:22+00:00","mainEntityOfPage":{"@id":"https:\/\/codewebbarcelona.com\/en\/blog\/why-official-websites-look-tacky\/"},"wordCount":1155,"image":{"@id":"https:\/\/codewebbarcelona.com\/en\/blog\/why-official-websites-look-tacky\/#primaryimage"},"thumbnailUrl":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/05\/por-que-son-tan-horteras-los-disenos-web-de-organismos-oficiales-1-featured.jpg","articleSection":["Destacat","Disseny i desenvolupament web","Altres","Dise\u00f1o gr\u00e1fico"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/codewebbarcelona.com\/en\/blog\/why-official-websites-look-tacky\/","url":"https:\/\/codewebbarcelona.com\/en\/blog\/why-official-websites-look-tacky\/","name":"\u00bfPor qu\u00e9 son tan horteras los dise\u00f1os web de organismos oficiales?","isPartOf":{"@id":"https:\/\/codewebbarcelona.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codewebbarcelona.com\/en\/blog\/why-official-websites-look-tacky\/#primaryimage"},"image":{"@id":"https:\/\/codewebbarcelona.com\/en\/blog\/why-official-websites-look-tacky\/#primaryimage"},"thumbnailUrl":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/05\/por-que-son-tan-horteras-los-disenos-web-de-organismos-oficiales-1-featured.jpg","datePublished":"2017-05-12T10:09:13+00:00","dateModified":"2026-04-20T21:03:22+00:00","author":{"@id":"https:\/\/codewebbarcelona.com\/en\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567"},"description":"Analizamos el dise\u00f1o web de la p\u00e1gina de la DGT. Nos sumergimos por sus callejones y nos quedamos mareados por tanta disonancia visual.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codewebbarcelona.com\/en\/blog\/why-official-websites-look-tacky\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codewebbarcelona.com\/en\/blog\/why-official-websites-look-tacky\/#primaryimage","url":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/05\/por-que-son-tan-horteras-los-disenos-web-de-organismos-oficiales-1-featured.jpg","contentUrl":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/05\/por-que-son-tan-horteras-los-disenos-web-de-organismos-oficiales-1-featured.jpg","width":1900,"height":1227},{"@type":"WebSite","@id":"https:\/\/codewebbarcelona.com\/en\/#website","url":"https:\/\/codewebbarcelona.com\/en\/","name":"Code Barcelona","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codewebbarcelona.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/codewebbarcelona.com\/en\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567","name":"cd26Bc","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g","caption":"cd26Bc"},"sameAs":["https:\/\/codewebbarcelona.com"]}]}},"_links":{"self":[{"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/posts\/18436","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/comments?post=18436"}],"version-history":[{"count":2,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/posts\/18436\/revisions"}],"predecessor-version":[{"id":18443,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/posts\/18436\/revisions\/18443"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/media\/4097"}],"wp:attachment":[{"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/media?parent=18436"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/categories?post=18436"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}