{"id":3244,"date":"2019-12-13T15:00:50","date_gmt":"2019-12-13T14:00:50","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=3244"},"modified":"2020-12-16T13:43:00","modified_gmt":"2020-12-16T12:43:00","slug":"attika-case-study","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/attika-case-study\/","title":{"rendered":"Attika Restaurant Theme: A Case Study"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_empty_space height=&#8221;3px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\t<\/p>\n<h2 class=\"qodef-h4\">About the Project<\/h2>\n<p>\t\t\t<\/div>\n<\/div><div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\tInspired by contemporary gastronomy, the Attika WordPress theme deconstructs the traditional mode of restaurant website design. It remodels industry norms through experimentation and a playful approach. Much like molecular cuisine, it takes the standard elements apart, reshapes them and puts them back according to its own sensibilities. \t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\tAttika\u2019s layouts are subtle but dynamic, elegant yet lively. They rely on the delicately emphasized asymmetry present throughout. This authentic, refined fusion is further supported by a carefully orchestrated atmosphere that pervades the theme with its pastel overtones and sophisticated typography selection. \t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;30px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\t<\/p>\n<h2 class=\"qodef-h4\">Awards:<\/h2>\n<div style=\"margin-bottom: 16px;\"><\/div>\n<p>\t\t\t<\/div>\n<\/div><div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\t<\/p>\n<h3 class=\"qodef-h5\"><span style=\"color: #000000;\"><a style=\"color: #000000;\" href=\"https:\/\/www.cssdesignawards.com\/sites\/attika-elegant-restaurant-theme\/36004\/\" target=\"_blank\" rel=\"noopener noreferrer\"><u>Best Innovation \u2013 CSSDA<\/u><\/a><\/span><\/h3>\n<p>\t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;1px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\t<\/p>\n<h3 class=\"qodef-h5\"><span style=\"color: #000000;\"><a style=\"color: #000000;\" href=\"https:\/\/www.cssdesignawards.com\/sites\/attika-elegant-restaurant-theme\/36004\/\" target=\"_blank\" rel=\"noopener noreferrer\"><u>Best UI Design \u2013 CSSDA<\/u><\/a><\/span><\/h3>\n<p>\t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;1px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\t<\/p>\n<h3 class=\"qodef-h5\"><span style=\"color: #000000;\"><a style=\"color: #000000;\" href=\"https:\/\/www.cssdesignawards.com\/sites\/attika-elegant-restaurant-theme\/36004\/\" target=\"_blank\" rel=\"noopener noreferrer\"><u>Best UX Design \u2013 CSSDA<\/u><\/a><\/span><\/h3>\n<p>\t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;1px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\t<\/p>\n<h3 class=\"qodef-h5\"><span style=\"color: #000000;\"><a style=\"color: #000000;\" href=\"https:\/\/www.cssdesignawards.com\/sites\/attika-elegant-restaurant-theme\/36004\/\" target=\"_blank\" rel=\"noopener noreferrer\"><u>Special Kudos &#8211; CSSDA<\/u><\/a><\/span><\/h3>\n<p>\t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;55px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column]<div class=\"qodef-elements-holder   qodef-one-column  qodef-responsive-mode-768 \" ><div class=\"qodef-eh-item   qodef-horizontal-alignment-center \"  data-item-class=\"qodef-eh-custom-1534\" data-1367-1600=\"6.3% 6.5% 6.5% 6.4%\" data-1025-1366=\"6.3% 6.5% 6.5% 6.4%\" data-769-1024=\"6.3% 6.5% 6.5% 6.4%\" data-681-768=\"0 0\" data-680=\"0 0\">\n\t<div class=\"qodef-eh-item-inner\">\n\t\t<div class=\"qodef-eh-item-content qodef-eh-custom-1534\" >\n\t\t\t<div class=\"qodef-case-study-video-holder\" style=\"box-shadow:0px 0px 15px 0px rgba(0, 0, 0, 0.08)\">\n\t<video autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" playsinline=\"\" >\n\t\t<source src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/12\/Attika-About-the-Project.m4v\" \/>\n\t<\/video>\n<\/div>\t\t<\/div>\n\t<\/div>\n<\/div><\/div>[\/vc_column][\/vc_row][vc_row content_text_aligment=&#8221;center&#8221;][vc_column]<div class=\"qodef-elements-holder   qodef-one-column  qodef-responsive-mode-768 \" ><div class=\"qodef-eh-item   qodef-horizontal-alignment-center \"  data-item-class=\"qodef-eh-custom-5541\" data-1367-1600=\"26px 0 0 0\" data-1025-1366=\"26px 0 0 0\" data-769-1024=\"26px 0 0 0\" data-681-768=\"30px 0 0 0\" data-680=\"30px 0 0 0\">\n\t<div class=\"qodef-eh-item-inner\">\n\t\t<div class=\"qodef-eh-item-content qodef-eh-custom-5541\" style=\"padding: 50px 0 0 0\">\n\t\t\t<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"1639\" height=\"860\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Attika-Case-Study.jpg\" class=\"attachment-full size-full\" alt=\"Attika Case Study\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Attika-Case-Study.jpg 1639w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Attika-Case-Study-300x157.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Attika-Case-Study-1024x537.jpg 1024w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Attika-Case-Study-768x403.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Attika-Case-Study-1536x806.jpg 1536w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Attika-Case-Study-1240x651.jpg 1240w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Attika-Case-Study-970x509.jpg 970w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Attika-Case-Study-620x325.jpg 620w\" sizes=\"auto, (max-width: 1639px) 100vw, 1639px\" \/>                        <\/div>\n<\/div>\t\t<\/div>\n\t<\/div>\n<\/div><\/div>[\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=&#8221;49px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\t<\/p>\n<h2 class=\"qodef-h4\">The Approach:<\/h2>\n<p>\t\t\t<\/div>\n<\/div><div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\tWe believe that given enough thought and care, <a href=\"https:\/\/qodeinteractive.com\/magazine\/introducing-qode-interactive\/\">anything can be made into art<\/a>. This is probably why we were so attracted to the concept of <em>haute cuisine<\/em> \u2013 a culinary movement that embraces the idea of designing a plate, both in terms of flavor and from an aesthetic, purely visual standpoint. Proponents of haute cuisine are as concerned with the presentation of each dish as they are with its meticulous preparation.\t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\tThe perfect combination of tastes, smells, colors, and compositions turn each haute cuisine kitchen into a small art project. And the <a href=\"https:\/\/attika.mikado-themes.com\/landing\" target=\"_blank\" rel=\"noopener\">Attika theme<\/a> is our response to this exalted form of culinary mastery. Our way of showing appreciation toward other professionals who approach their craft with such consideration and attention to detail that they inevitably elevate it and push it forward.\t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\tInspired by the work of renowned chefs like Albert Adri\u00e1, Massimo Bottura, Grant Achatz, and Jordi Roca, we decided to create a restaurant theme for fine dining establishments. And just as each chef has a unique perspective on the art of cooking, so is each homepage in Attika designed to showcase different culinary concepts and support individual approaches to the realm of haute cuisine.\t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column]<div class=\"qodef-elements-holder   qodef-one-column  qodef-responsive-mode-768 \" ><div class=\"qodef-eh-item   qodef-horizontal-alignment-center \"  data-item-class=\"qodef-eh-custom-5948\">\n\t<div class=\"qodef-eh-item-inner\">\n\t\t<div class=\"qodef-eh-item-content qodef-eh-custom-5948\" >\n\t\t\t<div class=\"qodef-case-study-video-holder\" style=\"box-shadow:0px 0px 15px 0px rgba(0, 0, 0, 0.08)\">\n\t<video autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" playsinline=\"\" >\n\t\t<source src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/12\/Attika-The-Approach.m4v\" \/>\n\t<\/video>\n<\/div>\t\t<\/div>\n\t<\/div>\n<\/div><\/div>[\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\t<\/p>\n<h2 class=\"qodef-h4\">The Design:<\/h2>\n<p>\t\t\t<\/div>\n<\/div><div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\tOur process began with the creation of eight separate mood boards, which grew into Attika\u2019s eight homepages. This, however, was not our initial intention. In fact, we were going to choose only one of the mood boards to guide the theme\u2019s design. But we soon noticed that despite their disparate color schemes, layouts, and atmospheres, they all shared certain stylistic characteristics.\t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\tOne of the unifying characteristics of Attika is its minimalistic atmosphere. The homepages are predominantly laid out on white, clean backgrounds. These backgrounds are occasionally interrupted with gently colored surfaces that appear from a variety of directions and without any obvious order, reminding us that greatness, whether culinary or otherwise, is often a product of bending the rules and ignoring common practices. \t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;59px&#8221;][\/vc_column][\/vc_row][vc_row content_placement=&#8221;middle&#8221; content_text_aligment=&#8221;center&#8221;][vc_column]<div class=\"qodef-elements-holder   qodef-one-column  qodef-responsive-mode-768 qodef-one-column-alignment-center\" ><div class=\"qodef-eh-item   qodef-horizontal-alignment-center \"  data-item-class=\"qodef-eh-custom-8721\" data-1367-1600=\"0 0 24px 0\" data-1025-1366=\"0 0 24px 0\" data-769-1024=\"0 0 24px 0\" data-681-768=\"0 0 30px 0\" data-680=\"0 0 30px 0\">\n\t<div class=\"qodef-eh-item-inner\">\n\t\t<div class=\"qodef-eh-item-content qodef-eh-custom-8721\" style=\"padding: 0 0 48px 0\">\n\t\t\t<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"1637\" height=\"849\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Attika-Theme.jpg\" class=\"attachment-full size-full\" alt=\"Attika Theme\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Attika-Theme.jpg 1637w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Attika-Theme-300x156.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Attika-Theme-1024x531.jpg 1024w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Attika-Theme-768x398.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Attika-Theme-1536x797.jpg 1536w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Attika-Theme-1240x643.jpg 1240w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Attika-Theme-970x503.jpg 970w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Attika-Theme-620x322.jpg 620w\" sizes=\"auto, (max-width: 1637px) 100vw, 1637px\" \/>                        <\/div>\n<\/div>\t\t<\/div>\n\t<\/div>\n<\/div><\/div>[\/vc_column][\/vc_row][vc_row content_text_aligment=&#8221;center&#8221;][vc_column]<div class=\"qodef-elements-holder   qodef-two-columns  qodef-responsive-mode-768 \" ><div class=\"qodef-eh-item   qodef-horizontal-alignment-right \"  data-item-class=\"qodef-eh-custom-8107\" data-1367-1600=\"0 12px 0 0\" data-1025-1366=\"0 12px 0 0\" data-769-1024=\"0 12px 0 0\" data-681-768=\"0 0 30px 0\" data-680=\"0 0 30px 0\">\n\t<div class=\"qodef-eh-item-inner\">\n\t\t<div class=\"qodef-eh-item-content qodef-eh-custom-8107\" style=\"padding: 0 25px 0 0\">\n\t\t\t<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"794\" height=\"849\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Attika-Study.jpg\" class=\"attachment-full size-full\" alt=\"Attika Study\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Attika-Study.jpg 794w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Attika-Study-281x300.jpg 281w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Attika-Study-768x821.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Attika-Study-620x663.jpg 620w\" sizes=\"auto, (max-width: 794px) 100vw, 794px\" \/>                        <\/div>\n<\/div>\t\t<\/div>\n\t<\/div>\n<\/div><div class=\"qodef-eh-item   qodef-horizontal-alignment-left \"  data-item-class=\"qodef-eh-custom-2736\" data-1367-1600=\"0 0 0 12px\" data-1025-1366=\"0 0 0 12px\" data-769-1024=\"0 0 0 12px\" data-681-768=\"0 0\" data-680=\"0 0\">\n\t<div class=\"qodef-eh-item-inner\">\n\t\t<div class=\"qodef-eh-item-content qodef-eh-custom-2736\" style=\"padding: 0 0 0 25px\">\n\t\t\t<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"795\" height=\"849\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Attika-Timetable.jpg\" class=\"attachment-full size-full\" alt=\"Attika Timetable\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Attika-Timetable.jpg 795w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Attika-Timetable-281x300.jpg 281w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Attika-Timetable-768x820.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Attika-Timetable-620x662.jpg 620w\" sizes=\"auto, (max-width: 795px) 100vw, 795px\" \/>                        <\/div>\n<\/div>\t\t<\/div>\n\t<\/div>\n<\/div><\/div>[\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=&#8221;56px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\tAnother common element of Attika\u2019s homepages is their shared typography. Since we wanted each aspect of the theme to reflect the philosophy of haute cuisine, we viewed the type as an artistic element of the design instead of merely a utilitarian one. This allowed us to imbue a measure of elegance and grace into a design component that is traditionally viewed as practical. \t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\tFor the theme\u2019s titles, we used both the italic and regular versions of the Playfair Display serif font, achieving that artistic touch by increasing the font\u2019s kerning and paying close attention to the placement of line breaks. By carefully positioning words one beneath the other, we achieved an interplay of form and negative space that intensifies the visual aspect of the lettering. The content throughout the theme is served in the more conservative Hebbo sans-serif typeface, while another sans-serif font &#8211; Karla \u2013 is used for the typography on buttons and other elements of the interface. \t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\tAt first, Attika\u2019s typography was colored in light shades of grey. This, when combined with the pastel hues, created a refined, sophisticated atmosphere. But we noticed that it also resulted in a lack of character. So we shifted the typography from grey to black, creating a stronger contrast and a distinct sense of identity. This is further enhanced through the details of the interface, like the subtle lines and thin, wiry vector icons that appear throughout the theme and give it a dignified feel. \t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\tYou might notice, however, that the initial idea of grey, softer typography wasn\u2019t completely scrapped, but instead made its way into the hover animations on icons, menu items, and other elements of the interface. In this way, we preserved the initial atmospheric touch the combination of grey and pastel colors provided.\t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;58px&#8221;][\/vc_column][\/vc_row][vc_row content_text_aligment=&#8221;center&#8221;][vc_column]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"1639\" height=\"850\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Attika-Design.jpg\" class=\"attachment-full size-full\" alt=\"Attika Design\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Attika-Design.jpg 1639w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Attika-Design-300x156.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Attika-Design-1024x531.jpg 1024w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Attika-Design-768x398.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Attika-Design-1536x797.jpg 1536w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Attika-Design-1240x643.jpg 1240w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Attika-Design-970x503.jpg 970w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Attika-Design-620x322.jpg 620w\" sizes=\"auto, (max-width: 1639px) 100vw, 1639px\" \/>                        <\/div>\n<\/div>[\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=&#8221;58px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\tThe entire aesthetic of Attika is completed by the selection of imagery. The chosen photographs are minimalistic and work in symbiosis with all other design elements in the theme. By predominantly portraying aspects of molecular gastronomy, the images unite all three major stylistic beacons of the theme \u2013 the luxurious, the contemporary, and the clean.\t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\tOne of the greatest challenges in designing Attika was the creation of a compact presentation that could successfully integrate and stylistically connect all eight homepages. The final version of the landing page is a vertically scrolling full-screen slider. This layout let us avoid any stylistic clashes and provided enough space for all eight home pages to breathe. Like unique dishes, each slide is served separately and has a tight focus on its subject matter. \t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;][\/vc_column][\/vc_row][vc_row content_text_aligment=&#8221;center&#8221;][vc_column]<div class=\"qodef-elements-holder   qodef-two-columns  qodef-responsive-mode-768 \" ><div class=\"qodef-eh-item   qodef-horizontal-alignment-right \"  data-item-class=\"qodef-eh-custom-7397\" data-1367-1600=\"0 12px 24px 0\" data-1025-1366=\"0 12px 24px 0\" data-769-1024=\"0 12px 24px 0\" data-681-768=\"0 0 30px 0\" data-680=\"0 0 30px 0\">\n\t<div class=\"qodef-eh-item-inner\">\n\t\t<div class=\"qodef-eh-item-content qodef-eh-custom-7397\" style=\"padding: 0 25px 48px 0\">\n\t\t\t<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"797\" height=\"797\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Attika-Section.jpg\" class=\"attachment-full size-full\" alt=\"Attika Section\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Attika-Section.jpg 797w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Attika-Section-300x300.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Attika-Section-150x150.jpg 150w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Attika-Section-768x768.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Attika-Section-650x650.jpg 650w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Attika-Section-620x620.jpg 620w\" sizes=\"auto, (max-width: 797px) 100vw, 797px\" \/>                        <\/div>\n<\/div>\t\t<\/div>\n\t<\/div>\n<\/div><div class=\"qodef-eh-item   qodef-horizontal-alignment-left \"  data-item-class=\"qodef-eh-custom-9355\" data-1367-1600=\"0 0 24px 12px\" data-1025-1366=\"0 0 24px 12px\" data-769-1024=\"0 0 24px 12px\" data-681-768=\"0 0 30px 0\" data-680=\"0 0 30px 0\">\n\t<div class=\"qodef-eh-item-inner\">\n\t\t<div class=\"qodef-eh-item-content qodef-eh-custom-9355\" style=\"padding: 0 0 48px 25px\">\n\t\t\t<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"797\" height=\"797\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Attika-Design-Section.jpg\" class=\"attachment-full size-full\" alt=\"Attika Design Section\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Attika-Design-Section.jpg 797w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Attika-Design-Section-300x300.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Attika-Design-Section-150x150.jpg 150w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Attika-Design-Section-768x768.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Attika-Design-Section-650x650.jpg 650w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Attika-Design-Section-620x620.jpg 620w\" sizes=\"auto, (max-width: 797px) 100vw, 797px\" \/>                        <\/div>\n<\/div>\t\t<\/div>\n\t<\/div>\n<\/div><\/div>[\/vc_column][\/vc_row][vc_row content_text_aligment=&#8221;center&#8221;][vc_column]<div class=\"qodef-elements-holder   qodef-one-column  qodef-responsive-mode-768 qodef-one-column-alignment-center\" ><div class=\"qodef-eh-item   qodef-horizontal-alignment-center \"  data-item-class=\"qodef-eh-custom-9909\">\n\t<div class=\"qodef-eh-item-inner\">\n\t\t<div class=\"qodef-eh-item-content qodef-eh-custom-9909\" >\n\t\t\t<div class=\"qodef-case-study-video-holder\" style=\"box-shadow:0px 0px 15px 0px rgba(0, 0, 0, 0.08)\">\n\t<video autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" playsinline=\"\" >\n\t\t<source src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/12\/Attika-Design.m4v\" \/>\n\t<\/video>\n<\/div>\t\t<\/div>\n\t<\/div>\n<\/div><\/div>[\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\t<\/p>\n<h2 class=\"qodef-h4\">The Animations:<\/h2>\n<p>\t\t\t<\/div>\n<\/div><div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\tWhen it came to animating Attika, our mission was twofold. On the one hand, we wanted to preserve the grace and elegance that permeates the entire design, while on the other we knew we had to add some much-needed tactility to the theme. We experimented with a wide range of animations before finally opting for a set of subtle yet rapid motions that complement the theme\u2019s spacious and asymmetric layouts.\t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\tWe wanted to let Attika slowly unfold in front of the viewers\u2019 eyes, just like a painstakingly prepared dish unfolds, revealing a new layer of taste with each bite. This idea is reflected in the various reveal animations that occur throughout the theme, each with distinct transition speeds and easing values that were carefully set depending on the immediate surroundings of the animated elements. The animations resemble masking effects, so it seems like the elements are being created or drawn out on the spot. Most of these reveals are triggered as elements enter the viewport \u2013 making users feel like they\u2019re discovering new aspects of the design as they scroll through each page. \t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column]<div class=\"qodef-elements-holder   qodef-one-column  qodef-responsive-mode-768 \" ><div class=\"qodef-eh-item   qodef-horizontal-alignment-center \"  data-item-class=\"qodef-eh-custom-5795\">\n\t<div class=\"qodef-eh-item-inner\">\n\t\t<div class=\"qodef-eh-item-content qodef-eh-custom-5795\" >\n\t\t\t<div class=\"qodef-case-study-video-holder\" style=\"box-shadow:0px 0px 15px 0px rgba(0, 0, 0, 0.08)\">\n\t<video autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" playsinline=\"\" >\n\t\t<source src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/12\/Attika-Animations.m4v\" \/>\n\t<\/video>\n<\/div>\t\t<\/div>\n\t<\/div>\n<\/div><\/div>[\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=&#8221;58px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\tParallax is another effect that\u2019s key to Attika\u2019s graceful atmosphere. Instead of a standard parallax animation, we decided to use a depth parallax effect that makes elements seem as if they\u2019re floating above the flat content of the page. By setting different speeds for different floating elements, we created a depth perspective effect that makes certain elements pop out from the screen. When combined with the reveal animations, this effect gains an even greater impact and gives the theme a distinctly dynamic feel.\t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\tBesides enhancing the theme\u2019s atmosphere, we also wanted to make sure that every user action was clear. We achieved this by animating the vector elements that enrich the theme\u2019s interface. Through the small lines that appear as they enter the viewport or change sizes when hovered on, we subtly point users to the interactive elements of the theme. There are a lot of variations between the animations on these minuscule elements, but they all maintain similar easing curves in order to keep with the relaxed, luxurious flow of Attika. \t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>The Attika WordPress theme deconstructs the traditional mode of restaurant website design. In our case study, we take a look at how it takes apart familiar elements, reshapes them, and puts them back together according to its own sensibilities<\/p>\n","protected":false},"author":5,"featured_media":3281,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[38],"tags":[24,30,43],"class_list":["post-3244","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-qode-stories","tag-case-study","tag-creative","tag-showcase"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/3244","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=3244"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/3244\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/3281"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=3244"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=3244"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=3244"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}