{"id":20134,"date":"2017-04-14T17:20:27","date_gmt":"2017-04-14T17:20:27","guid":{"rendered":"https:\/\/codewebbarcelona.com\/diseno-web-alvaro-vargas-la-historia\/"},"modified":"2026-04-20T22:22:51","modified_gmt":"2026-04-20T22:22:51","slug":"web-design-alvaro-vargas-story","status":"publish","type":"post","link":"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-alvaro-vargas-story\/","title":{"rendered":"Web Design for \u00c1lvaro Vargas"},"content":{"rendered":"

This post is dedicated to a new web project<\/strong> we completed in March\u2014a web design<\/strong> and web development<\/strong> project for \u00c1lvaro Vargas.<\/p>\n

In a storytelling format, I\u2019ll walk you through the entire design and development<\/strong> process for this brand-new website<\/strong>.<\/p>\n

A few weeks ago, \u00c1lvaro Vargas reached out to us. Initially, he was looking for information about designing a cookbook that he plans to publish in the future.<\/p>\n

<\/h3>\n

Who is \u00c1lvaro Vargas?<\/h3>\n

\u00c1lvaro Vargas is a highly active nutritionist who creates daily content about nutrition and health for social media. With a deep understanding of media and how it works, he places great importance on social platforms and knows how to leverage them to boost his visibility.<\/p>\n

He\u2019s active on Facebook and Instagram, hosts podcasts, and runs a YouTube channel\u2014on all of them, he consistently produces high-quality content for those interested in nutrition and wellness. He regularly shares photos of his dishes, films recipes for YouTube, and writes blog posts on his personal website. He\u2019s also published a couple of books on the same topics.<\/p>\n

Now, taking his career a step further, \u00c1lvaro has come up with the brilliant idea of sharing his knowledge in person. To start, he\u2019ll be offering a couple of courses in Barcelona and Madrid.<\/p>\n

After agreeing to design the interior of his cookbook, we continued discussing his projects<\/strong>, and he entrusted us with an exciting new assignment.<\/p>\n

To support his new venture of in-person courses, he needed a website<\/strong> where people could sign up.<\/p>\n

<\/h3>\n

Let\u2019s get to work!<\/h3>\n

With this brief, we got started in the studio. After several conversations to nail down the project details, we had a clear sense of \u00c1lvaro\u2019s style\u2014something fresh, intuitive, direct, and reflective of his personality and professional goals.<\/p>\n

So, we began working on the visual concept<\/strong> we would present to \u00c1lvaro.<\/p>\n

This has been one of the most refreshing projects we\u2019ve tackled recently\u2014a cutting-edge assignment with no design constraints, as \u00c1lvaro is very open-minded and trusted our professional judgment from the start. We paid close attention to detail, and we loved the result. Admittedly, at first, we wondered if \u00c1lvaro would be bold enough to let us take the reins, but he immediately understood and embraced the vision we had for his website<\/strong>.<\/p>\n

For the graphic design<\/strong> of the website<\/strong>, we reviewed his social media, books, and blog to perfectly capture the design style that would suit him best.<\/p>\n

The technical highlights of this project were the website\u2019s animations, color palette, and information layout.<\/p>\n

<\/h3>\n

What goals did we need to achieve?<\/h3>\n

Our aim was to create a one-page website<\/strong>\u2014dynamic, intuitive, straightforward, and highly engaging.<\/p>\n

Users should be able to quickly browse the site and find all the information they need to decide if they\u2019re interested in the course and how to sign up.<\/p>\n

The timeline was tight, as \u00c1lvaro wanted the website ready by early April.<\/p>\n

To meet this deadline, we focused on the following key areas:<\/p>\n

    \n
  1. The color palette<\/li>\n
  2. Information layout<\/li>\n
  3. Animations<\/li>\n
  4. Menu<\/li>\n
  5. Communicating \u00c1lvaro\u2019s vision and mission<\/li>\n
  6. Payment gateway<\/li>\n
  7. Personalized gifts for \u00c1lvaro<\/li>\n<\/ol>\n

    \"dise\u00f1o<\/p>\n

    <\/h3>\n

    1. The color palette<\/h3>\n

    We chose a high-contrast color mix that gives the design<\/strong> a bold visual impact\u2014perfect for a one-page website<\/strong>. This approach draws users in and keeps their attention on the screen until they\u2019ve reached the end, absorbing all the information almost effortlessly.<\/p>\n

    <\/h3>\n

    2. Information layout<\/h3>\n

    We also paid special attention to how information is organized. Just like with the colors, the layout guides the eye from section to section, keeping users engaged and preventing boredom or drop-off.<\/p>\n

    \"dise\u00f1o<\/a><\/p>\n

    <\/h3>\n

    3. Animations<\/h3>\n

    The website<\/strong> features several effects that capture users\u2019 attention and add the dynamic feel essential to the project\u2019s goals.<\/p>\n

    For example, in the \u201cFrequently Asked Questions\u201d section, we created playful animations: \u00c1lvaro\u2019s eyes follow your cursor, and when you hover over one of the food items in the background, it magically\u2014or programmatically\u2014disappears!<\/p>\n

    \"dise\u00f1o<\/a><\/p>\n

    <\/h3>\n

    4. The menu<\/h3>\n

    The website<\/strong> features a unique, horizontally positioned menu that lets users jump to any section at any time. The menu also features smooth transitions with a sense of depth, making navigation a pleasure.<\/p>\n

    \"dise\u00f1o<\/a><\/p>\n

    <\/h3>\n

    5. Communicating \u00c1lvaro Vargas\u2019s vision and mission<\/h3>\n

    Thanks to the previous elements and the content \u00c1lvaro provided, his vision and mission came through loud and clear.<\/p>\n

    Once the graphic design<\/strong> for the website<\/strong> was approved and \u00c1lvaro gave us the green light, we got to work on the site\u2019s development.
    \n<\/strong><\/p>\n

    \"dise\u00f1o<\/a><\/p>\n

     <\/p>\n

    6. Payment gateway<\/h3>\n

    Since this was a website with a payment gateway<\/strong>, ensuring robust security was crucial. We thoroughly tested the system and walked \u00c1lvaro through how the payment process works, making sure everything was clear and seamless.<\/p>\n

    \"dise\u00f1o<\/a><\/p>\n

    Within just a few weeks, the website<\/strong> was fully designed and developed. Everything was ready for launch\u2014and launch we did.<\/p>\n

     <\/p>\n

    7. Personalized gifts for the client \ud83d\ude09<\/h3>\n

    As a special touch, we created custom cover images for \u00c1lvaro to share his course links on Instagram and Facebook, helping him get the most out of his new site.<\/p>\n

    \"dise\u00f1o<\/a><\/p>\n

    We know that from day one, \u00c1lvaro had people interested in signing up\u2014some didn\u2019t hesitate for a second to reserve their spot.<\/p>\n

    The teams at JordiEnsenyatDisseny and CodeWebBarcelona wish him the very best with this new project and hope he fills every seat in the house.<\/p>\n

     <\/p>\n

    Recognition<\/h3>\n

    So far, our work has already been featured on several websites showcasing inspiring web design projects<\/strong>, such as:<\/p>\n

    http:\/\/www.csswinner.com\/details\/yo-s-nutrirme\/11414<\/a>
    \n    http:\/\/www.designnominees.com\/sites\/yo-s-nutrirme<\/a>
    \n    https:\/\/onepagelove.com\/yo-se-nutrirme<\/a>
    \n    http:\/\/www.bestcss.in\/user\/detail\/Yosenutrirme-5193<\/a><\/p>\n

    The project live<\/h3>\n

    If you\u2019re curious and want to see the project in action, just follow the link to his website: www.yosenutrirme.com<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

    This post is dedicated to a new web project we completed in March\u2014a web design and web development project for \u00c1lvaro Vargas. In a storytelling format, I\u2019ll walk you through the entire design and development process for this brand-new website. A few weeks ago, \u00c1lvaro Vargas reached out to us. Initially, he was looking for […]<\/p>\n","protected":false},"author":1,"featured_media":4229,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[208],"class_list":["post-20134","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-disseny-desenvolupament-web"],"acf":[],"yoast_head":"\nEl proyecto: Dise\u00f1o web para \u00c1lvaro Vargas - Historia<\/title>\n<meta name=\"description\" content=\"Historia detr\u00e1s del proyecto para \u00c1lvaro Vargas. Descubre como hemos desarrollado y dise\u00f1ado la p\u00e1gina web para \u00c1lvaro Vargas. Todos los detalles.\" \/>\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\/web-design-alvaro-vargas-story\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"El proyecto: Dise\u00f1o web para \u00c1lvaro Vargas - Historia\" \/>\n<meta property=\"og:description\" content=\"Historia detr\u00e1s del proyecto para \u00c1lvaro Vargas. Descubre como hemos desarrollado y dise\u00f1ado la p\u00e1gina web para \u00c1lvaro Vargas. Todos los detalles.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-alvaro-vargas-story\/\" \/>\n<meta property=\"og:site_name\" content=\"Code Barcelona\" \/>\n<meta property=\"article:published_time\" content=\"2017-04-14T17:20:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-20T22:22:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/04\/diseno-web-para-alvaro-vargas-featured.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2514\" \/>\n\t<meta property=\"og:image:height\" content=\"1193\" \/>\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=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-alvaro-vargas-story\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-alvaro-vargas-story\/\"},\"author\":{\"name\":\"cd26Bc\",\"@id\":\"https:\/\/codewebbarcelona.com\/en\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567\"},\"headline\":\"Web Design for \u00c1lvaro Vargas\",\"datePublished\":\"2017-04-14T17:20:27+00:00\",\"dateModified\":\"2026-04-20T22:22:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-alvaro-vargas-story\/\"},\"wordCount\":961,\"image\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-alvaro-vargas-story\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/04\/diseno-web-para-alvaro-vargas-featured.jpg\",\"articleSection\":[\"Disseny i desenvolupament web\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-alvaro-vargas-story\/\",\"url\":\"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-alvaro-vargas-story\/\",\"name\":\"El proyecto: Dise\u00f1o web para \u00c1lvaro Vargas - Historia\",\"isPartOf\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-alvaro-vargas-story\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-alvaro-vargas-story\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/04\/diseno-web-para-alvaro-vargas-featured.jpg\",\"datePublished\":\"2017-04-14T17:20:27+00:00\",\"dateModified\":\"2026-04-20T22:22:51+00:00\",\"author\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567\"},\"description\":\"Historia detr\u00e1s del proyecto para \u00c1lvaro Vargas. Descubre como hemos desarrollado y dise\u00f1ado la p\u00e1gina web para \u00c1lvaro Vargas. Todos los detalles.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-alvaro-vargas-story\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-alvaro-vargas-story\/#primaryimage\",\"url\":\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/04\/diseno-web-para-alvaro-vargas-featured.jpg\",\"contentUrl\":\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/04\/diseno-web-para-alvaro-vargas-featured.jpg\",\"width\":2514,\"height\":1193},{\"@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":"El proyecto: Dise\u00f1o web para \u00c1lvaro Vargas - Historia","description":"Historia detr\u00e1s del proyecto para \u00c1lvaro Vargas. Descubre como hemos desarrollado y dise\u00f1ado la p\u00e1gina web para \u00c1lvaro Vargas. Todos los detalles.","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\/web-design-alvaro-vargas-story\/","og_locale":"en_US","og_type":"article","og_title":"El proyecto: Dise\u00f1o web para \u00c1lvaro Vargas - Historia","og_description":"Historia detr\u00e1s del proyecto para \u00c1lvaro Vargas. Descubre como hemos desarrollado y dise\u00f1ado la p\u00e1gina web para \u00c1lvaro Vargas. Todos los detalles.","og_url":"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-alvaro-vargas-story\/","og_site_name":"Code Barcelona","article_published_time":"2017-04-14T17:20:27+00:00","article_modified_time":"2026-04-20T22:22:51+00:00","og_image":[{"width":2514,"height":1193,"url":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/04\/diseno-web-para-alvaro-vargas-featured.jpg","type":"image\/jpeg"}],"author":"cd26Bc","twitter_card":"summary_large_image","twitter_misc":{"Written by":"cd26Bc","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-alvaro-vargas-story\/#article","isPartOf":{"@id":"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-alvaro-vargas-story\/"},"author":{"name":"cd26Bc","@id":"https:\/\/codewebbarcelona.com\/en\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567"},"headline":"Web Design for \u00c1lvaro Vargas","datePublished":"2017-04-14T17:20:27+00:00","dateModified":"2026-04-20T22:22:51+00:00","mainEntityOfPage":{"@id":"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-alvaro-vargas-story\/"},"wordCount":961,"image":{"@id":"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-alvaro-vargas-story\/#primaryimage"},"thumbnailUrl":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/04\/diseno-web-para-alvaro-vargas-featured.jpg","articleSection":["Disseny i desenvolupament web"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-alvaro-vargas-story\/","url":"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-alvaro-vargas-story\/","name":"El proyecto: Dise\u00f1o web para \u00c1lvaro Vargas - Historia","isPartOf":{"@id":"https:\/\/codewebbarcelona.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-alvaro-vargas-story\/#primaryimage"},"image":{"@id":"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-alvaro-vargas-story\/#primaryimage"},"thumbnailUrl":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/04\/diseno-web-para-alvaro-vargas-featured.jpg","datePublished":"2017-04-14T17:20:27+00:00","dateModified":"2026-04-20T22:22:51+00:00","author":{"@id":"https:\/\/codewebbarcelona.com\/en\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567"},"description":"Historia detr\u00e1s del proyecto para \u00c1lvaro Vargas. Descubre como hemos desarrollado y dise\u00f1ado la p\u00e1gina web para \u00c1lvaro Vargas. Todos los detalles.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codewebbarcelona.com\/en\/blog\/web-design-alvaro-vargas-story\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-alvaro-vargas-story\/#primaryimage","url":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/04\/diseno-web-para-alvaro-vargas-featured.jpg","contentUrl":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/04\/diseno-web-para-alvaro-vargas-featured.jpg","width":2514,"height":1193},{"@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\/20134","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=20134"}],"version-history":[{"count":2,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/posts\/20134\/revisions"}],"predecessor-version":[{"id":20162,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/posts\/20134\/revisions\/20162"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/media\/4229"}],"wp:attachment":[{"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/media?parent=20134"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/categories?post=20134"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}