{"id":6644,"date":"2016-12-14T10:33:10","date_gmt":"2016-12-14T10:33:10","guid":{"rendered":"https:\/\/www.mozaik.com\/blog\/?p=6644"},"modified":"2024-10-29T14:57:53","modified_gmt":"2024-10-29T14:57:53","slug":"vibrant-synergy-found-way-realization","status":"publish","type":"post","link":"https:\/\/www.mozaik.com\/blog\/vibrant-synergy-found-way-realization\/","title":{"rendered":"How Vibrant Synergy found its way to realization"},"content":{"rendered":"<p style=\"text-align: left;\"><strong>PAVING THE WAY TO VIBRANT SYNERGY<\/strong><\/p>\n<p style=\"text-align: left;\">To prove the <strong>essence and pure power of Vibrant Synergy<\/strong>, Mozaik members worked as an <strong>extended team of specialists<\/strong> to create the absolute <strong>expression of our philosophy and instill it to our rebranding<\/strong>. Our video and website are solid proof <strong>Vibrant Synergy<\/strong> works and is here to stay.<\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: left;\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-6648\" src=\"https:\/\/www.mozaik.com\/blog\/wp-content\/uploads\/2016\/12\/1-1.jpg\" alt=\"mozaik rebranding\" width=\"640\" height=\"640\" srcset=\"https:\/\/www.mozaik.com\/blog\/wp-content\/uploads\/2016\/12\/1-1.jpg 640w, https:\/\/www.mozaik.com\/blog\/wp-content\/uploads\/2016\/12\/1-1-150x150.jpg 150w, https:\/\/www.mozaik.com\/blog\/wp-content\/uploads\/2016\/12\/1-1-300x300.jpg 300w, https:\/\/www.mozaik.com\/blog\/wp-content\/uploads\/2016\/12\/1-1-350x350.jpg 350w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: left;\"><strong>THE VIDEO. GREAT INSPIRATION LEADS TO GREAT WORK<\/strong><\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/191800728?title=0&amp;byline=0&amp;portrait=0\" width=\"100%\" height=\"338\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: left;\">For the creation of the <strong>Mozaik video<\/strong> the original concept was conceived and developed by us to meaningfully explain to the user what we mean by the idea of Vibrant Synergy. <strong>Trout<\/strong>, the agency that undertook the fine job of <strong>executing the video<\/strong> <strong>based on our script and storyboard<\/strong>, fully understood us and managed to synchronize perfectly with us; proof that vibrant synergy is an achievement you can also realize with people outside your solid organism, when you <strong>aim at the same thing: perfection<\/strong>. The Trout team consisting of Andreas Helmis, George Kalofolias and George Mpaourdas worked strictly with code to <strong>produce the video inspired by the people of Mozaik<\/strong>. Alexandros Retsis beautifully composed an original score and there it was: the <strong>audiovisual interpretation of our philosophy in motion<\/strong>!<\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: left;\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-6651\" src=\"https:\/\/www.mozaik.com\/blog\/wp-content\/uploads\/2016\/12\/2-2.jpg\" alt=\"mozaik\" width=\"640\" height=\"432\" srcset=\"https:\/\/www.mozaik.com\/blog\/wp-content\/uploads\/2016\/12\/2-2.jpg 640w, https:\/\/www.mozaik.com\/blog\/wp-content\/uploads\/2016\/12\/2-2-300x203.jpg 300w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: left;\"><strong>THE WEBSITE. THE ESSENCE OF SYNERGY<\/strong><\/p>\n<p style=\"text-align: left;\">For the Mozaik team the challenge was to <strong>design and create a\u00a0highly contemporary website<\/strong> that would work as a pole to existing and prospect clients in <strong>a new digital atmosphere<\/strong> and showcase the agency\u2019s essence, potential and long-lasting success.\u00a0Moreover, we wanted to <strong>create a distinctive character for the agency\u2019s new era<\/strong> and\u00a0draw users into the world of Vibrant Synergy.<\/p>\n<p style=\"text-align: left;\">The <strong>new, fully responsive website<\/strong> is based on <strong>minimal clean-cut lines, strong typography and vibrant aesthetics<\/strong>. The <strong>key inspiration was the cymatics<\/strong> and their interpretation first introduced to the user with the<strong> top-notch video<\/strong> based on this very idea.<\/p>\n<p style=\"text-align: left;\">The look and feel of the website corresponds and <strong>represents the agency\u2019s\u00a0quality in our\u00a0digital universe<\/strong>. <strong>Blue is the dominant colour selected for the rebranding<\/strong>, to highlight the digital aspect of the core business while SVG animations on <strong>parallax movement<\/strong> are used to underline the<strong> idea of cymatics in the visual identity of the agency<\/strong> and the website itself.<\/p>\n<p style=\"text-align: left;\">The services overview was developed with canvas, where floating\u00a0particles are interacting with the user to form\u00a0cymatics&#8217; patterns for each of the agency\u2019s area of expertise. Getting into the<strong> Services page layouts the full spectrum of services<\/strong> is depicted with <strong>custom iconography<\/strong>, soon to be enriched with a more detailed description.<\/p>\n<p style=\"text-align: left;\">We also designed and developed a <strong>digital interactive mosaic<\/strong> to present the <strong>true essence of the Agency<\/strong>, its people. <strong>All 57\u00a0members are portrayed in a smart gif animation<\/strong>. As for our work, the enormous volume that comes with our <strong>10 year presence<\/strong> had to be downsized into a portfolio showcasing an eclectic selection, to<strong> highlight the 360\u00b0 approach of the agency<\/strong>.<\/p>\n<p style=\"text-align: left;\">Finally, <strong>the awards page features a floating menu for awarded projects<\/strong>. We have already some important wins in there and keep making the list bigger, our most recent award being one for the new website itself!<\/p>\n<p style=\"text-align: left;\"><strong>Our blog was also redesigned so as to be aligned with the new visual identity<\/strong>. We also renamed it by the<strong> name of \u201cJournal\u201d, so that our living organism\u2019s activities<\/strong>, are vibrantly presented in each and every blogpost.<\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: left;\"><img loading=\"lazy\" class=\"alignnone wp-image-9232 size-full\" src=\"https:\/\/www.mozaik.com\/blog\/wp-content\/uploads\/2016\/12\/3-4.jpg\" alt=\"\" width=\"640\" height=\"1955\" srcset=\"https:\/\/www.mozaik.com\/blog\/wp-content\/uploads\/2016\/12\/3-4.jpg 640w, https:\/\/www.mozaik.com\/blog\/wp-content\/uploads\/2016\/12\/3-4-98x300.jpg 98w, https:\/\/www.mozaik.com\/blog\/wp-content\/uploads\/2016\/12\/3-4-335x1024.jpg 335w, https:\/\/www.mozaik.com\/blog\/wp-content\/uploads\/2016\/12\/3-4-503x1536.jpg 503w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: left;\"><strong>THE MORE \u201cTECH-SAVVY\u201d SIDE OF THE WEBSITE<\/strong><\/p>\n<p style=\"text-align: left;\">Developing our rebranded website, we had to reinvent ourselves technologically as well.<\/p>\n<p style=\"text-align: left;\">The <strong>new design<\/strong> inspired the use of <strong>custom scripts<\/strong> for navigating and animating our site.<\/p>\n<p style=\"text-align: left;\">Working with <strong>canvas elements<\/strong>, for example, we managed to transfer our core principle of vibrant synergy into a <strong>playful animating section<\/strong>.<\/p>\n<p style=\"text-align: left;\"><strong>Using SVG, CSS and JavaScript frame animations<\/strong>, along with parallax scrolling, the vibrant feeling was spread through the site, from loading to inner navigation.<\/p>\n<p style=\"text-align: left;\">Asynchronous dynamic data loading, using <strong>ajax technology<\/strong>, was also used for fast, yet extremely smooth, page changing, even when loading big chunks of data,\u00a0as in the case of showcasing Mozaik&#8217;s feature works.<\/p>\n<p style=\"text-align: left;\">For <strong>showcasing our videos, we used custom JavaScript control scripts<\/strong>, assisted by the Vimeo and YouTube player APIs in certain cases, to maintain top HD quality, without losing delivery speed.<\/p>\n<p style=\"text-align: left;\">Moving to tablet and mobile, <strong>we managed not to lose any of the desktop version features<\/strong>. Although the use of fallback images was chosen, in favor of mobile data saving and loading speed, the main look and feel is still there, assisted by the presence of animated gifs giving us a final website\u00a0that is <strong>truly responsive to all devices and screen sizes<\/strong>.<\/p>\n<p style=\"text-align: left;\">We had to push ourselves to new, undiscovered paths in the technology fields this time, following a demanding design, to <strong>end up with a great website, in all aspects, technology, usability, design<\/strong>. A vibrant website that can portray Mozaik&#8217;s ideas and principles, but also pushing us further, making us better in building websites\u00a0for our clients. Website that don&#8217;t just follow the latest technology trends any more, but create them instead.<\/p>\n<p style=\"text-align: left;\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-6699\" src=\"https:\/\/www.mozaik.com\/blog\/wp-content\/uploads\/2016\/12\/4-2.jpg\" alt=\"mozaik\" width=\"640\" height=\"543\" srcset=\"https:\/\/www.mozaik.com\/blog\/wp-content\/uploads\/2016\/12\/4-2.jpg 640w, https:\/\/www.mozaik.com\/blog\/wp-content\/uploads\/2016\/12\/4-2-300x255.jpg 300w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: left;\"><strong>CSS DESIGN AWARDS &#8211; WEBSITE OF THE DAY!<\/strong><\/p>\n<p style=\"text-align: left;\"><strong>On December 6, 2016<\/strong> and having just a few days of online presence, <strong>our brand new website managed to get a great global distinction<\/strong>! It was nominated and <strong>won the WEBSITE OF THE DAY title at the CSS Design Awards<\/strong>. A great moment for us, for sure. We <strong>hope this website will give us more similar moments of pride<\/strong> in the months to come.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>PAVING THE WAY TO VIBRANT SYNERGY To prove the essence and pure power of Vibrant Synergy, Mozaik members worked as an extended team of specialists to create the absolute expression of our philosophy and instill it to our rebranding. Our video and website are solid proof Vibrant Synergy works and is here to stay. &nbsp; [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":6661,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[113],"tags":[109,18,112,60],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How Vibrant Synergy Found Its Way To Realization | Mozaik Blog<\/title>\n<meta name=\"description\" content=\"Mozaik members worked as an extended team of specialists to create the absolute expression of our philosophy and instill it to our rebranding.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.mozaik.com\/blog\/vibrant-synergy-found-way-realization\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How Vibrant Synergy Found Its Way To Realization | Mozaik Blog\" \/>\n<meta property=\"og:description\" content=\"Mozaik members worked as an extended team of specialists to create the absolute expression of our philosophy and instill it to our rebranding.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.mozaik.com\/blog\/vibrant-synergy-found-way-realization\/\" \/>\n<meta property=\"og:site_name\" content=\"Mozaik Journal\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/MozaikOnline\/?fref=ts\" \/>\n<meta property=\"article:published_time\" content=\"2016-12-14T10:33:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-29T14:57:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.mozaik.com\/blog\/wp-content\/uploads\/2016\/12\/MAIN.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"746\" \/>\n\t<meta property=\"og:image:height\" content=\"475\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"mozaik\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@mozaikagency\" \/>\n<meta name=\"twitter:site\" content=\"@mozaikagency\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"mozaik\" \/>\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\":\"WebPage\",\"@id\":\"https:\/\/www.mozaik.com\/blog\/vibrant-synergy-found-way-realization\/\",\"url\":\"https:\/\/www.mozaik.com\/blog\/vibrant-synergy-found-way-realization\/\",\"name\":\"How Vibrant Synergy Found Its Way To Realization | Mozaik Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.mozaik.com\/blog\/#website\"},\"datePublished\":\"2016-12-14T10:33:10+00:00\",\"dateModified\":\"2024-10-29T14:57:53+00:00\",\"author\":{\"@id\":\"https:\/\/www.mozaik.com\/blog\/#\/schema\/person\/0d09103aa252462df2b6445f7f3ff533\"},\"description\":\"Mozaik members worked as an extended team of specialists to create the absolute expression of our philosophy and instill it to our rebranding.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.mozaik.com\/blog\/vibrant-synergy-found-way-realization\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.mozaik.com\/blog\/vibrant-synergy-found-way-realization\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.mozaik.com\/blog\/vibrant-synergy-found-way-realization\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.mozaik.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How Vibrant Synergy found its way to realization\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.mozaik.com\/blog\/#website\",\"url\":\"https:\/\/www.mozaik.com\/blog\/\",\"name\":\"Mozaik Journal\",\"description\":\"Mozaik Journal Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.mozaik.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.mozaik.com\/blog\/#\/schema\/person\/0d09103aa252462df2b6445f7f3ff533\",\"name\":\"mozaik\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.mozaik.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c82a5c3832bbe410d93d8f2f8af39da3?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c82a5c3832bbe410d93d8f2f8af39da3?s=96&d=mm&r=g\",\"caption\":\"mozaik\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How Vibrant Synergy Found Its Way To Realization | Mozaik Blog","description":"Mozaik members worked as an extended team of specialists to create the absolute expression of our philosophy and instill it to our rebranding.","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:\/\/www.mozaik.com\/blog\/vibrant-synergy-found-way-realization\/","og_locale":"en_US","og_type":"article","og_title":"How Vibrant Synergy Found Its Way To Realization | Mozaik Blog","og_description":"Mozaik members worked as an extended team of specialists to create the absolute expression of our philosophy and instill it to our rebranding.","og_url":"https:\/\/www.mozaik.com\/blog\/vibrant-synergy-found-way-realization\/","og_site_name":"Mozaik Journal","article_publisher":"https:\/\/www.facebook.com\/MozaikOnline\/?fref=ts","article_published_time":"2016-12-14T10:33:10+00:00","article_modified_time":"2024-10-29T14:57:53+00:00","og_image":[{"width":746,"height":475,"url":"https:\/\/www.mozaik.com\/blog\/wp-content\/uploads\/2016\/12\/MAIN.jpg","type":"image\/jpeg"}],"author":"mozaik","twitter_card":"summary_large_image","twitter_creator":"@mozaikagency","twitter_site":"@mozaikagency","twitter_misc":{"Written by":"mozaik","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.mozaik.com\/blog\/vibrant-synergy-found-way-realization\/","url":"https:\/\/www.mozaik.com\/blog\/vibrant-synergy-found-way-realization\/","name":"How Vibrant Synergy Found Its Way To Realization | Mozaik Blog","isPartOf":{"@id":"https:\/\/www.mozaik.com\/blog\/#website"},"datePublished":"2016-12-14T10:33:10+00:00","dateModified":"2024-10-29T14:57:53+00:00","author":{"@id":"https:\/\/www.mozaik.com\/blog\/#\/schema\/person\/0d09103aa252462df2b6445f7f3ff533"},"description":"Mozaik members worked as an extended team of specialists to create the absolute expression of our philosophy and instill it to our rebranding.","breadcrumb":{"@id":"https:\/\/www.mozaik.com\/blog\/vibrant-synergy-found-way-realization\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.mozaik.com\/blog\/vibrant-synergy-found-way-realization\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.mozaik.com\/blog\/vibrant-synergy-found-way-realization\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.mozaik.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How Vibrant Synergy found its way to realization"}]},{"@type":"WebSite","@id":"https:\/\/www.mozaik.com\/blog\/#website","url":"https:\/\/www.mozaik.com\/blog\/","name":"Mozaik Journal","description":"Mozaik Journal Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.mozaik.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.mozaik.com\/blog\/#\/schema\/person\/0d09103aa252462df2b6445f7f3ff533","name":"mozaik","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.mozaik.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c82a5c3832bbe410d93d8f2f8af39da3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c82a5c3832bbe410d93d8f2f8af39da3?s=96&d=mm&r=g","caption":"mozaik"}}]}},"_links":{"self":[{"href":"https:\/\/www.mozaik.com\/blog\/wp-json\/wp\/v2\/posts\/6644"}],"collection":[{"href":"https:\/\/www.mozaik.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mozaik.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mozaik.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mozaik.com\/blog\/wp-json\/wp\/v2\/comments?post=6644"}],"version-history":[{"count":13,"href":"https:\/\/www.mozaik.com\/blog\/wp-json\/wp\/v2\/posts\/6644\/revisions"}],"predecessor-version":[{"id":9233,"href":"https:\/\/www.mozaik.com\/blog\/wp-json\/wp\/v2\/posts\/6644\/revisions\/9233"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mozaik.com\/blog\/wp-json\/wp\/v2\/media\/6661"}],"wp:attachment":[{"href":"https:\/\/www.mozaik.com\/blog\/wp-json\/wp\/v2\/media?parent=6644"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mozaik.com\/blog\/wp-json\/wp\/v2\/categories?post=6644"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mozaik.com\/blog\/wp-json\/wp\/v2\/tags?post=6644"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}