{"id":2701,"date":"2017-02-14T18:26:45","date_gmt":"2017-02-14T15:26:45","guid":{"rendered":"https:\/\/tubikstudio.com\/?p=2701"},"modified":"2023-08-15T08:06:29","modified_gmt":"2023-08-15T08:06:29","slug":"case-study-vinnys-bakery-ui-design-for-e-commerce","status":"publish","type":"post","link":"https:\/\/tubikstudio.com\/blog\/case-study-vinnys-bakery-ui-design-for-e-commerce\/","title":{"rendered":"Case Study: Vinny&#8217;s Bakery. UI Design for E-Commerce"},"content":{"rendered":"<p><span style=\"color: #333333;\">Design for e-commerce platforms is a special field of knowledge and practice. On the one hand, there are more and more users with an average or high level of tech literacy who trust this way of shopping and are open to buying online. On the other hand, the level of competition in the field is also becoming more diverse and comprehensive with the constantly increasing number of services and platforms for selling and buying via the Internet.\u00a0<\/span><\/p>\n<p><span style=\"color: #333333;\">In one of the chapters of our e-book <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/design-for-business-free-e-book-by-tubik-team\/\" target=\"_blank\" rel=\"noopener noreferrer\">&#8220;Design for Business&#8221;<\/a>, the success of e-commerce activity depends on several factors, among which:<\/span><\/p>\n<ul>\n<li><span style=\"color: #333333;\">the quality of the product or service offered<\/span><\/li>\n<li><span style=\"color: #333333;\">the quality of the content presenting the offer to customers<\/span><\/li>\n<li><span style=\"color: #333333;\">the quality of design for the electronic platform \u2014 website and\/or mobile application \u2014 via which the sales are going to be delivered.<\/span><\/li>\n<\/ul>\n<p><span style=\"color: #333333;\">So, it\u2019s easy to see that UI\/UX design for digital products of this kind plays a vital role. Thoroughly thought-out logic and transitions, simple and clear <a href=\"https:\/\/blog.tubikstudio.com\/ui-animation-microinteraction-for-macroresult\/\">microinteractions<\/a>, fast feedback from the system, attractive product presentation, easy payment flow and plenty of other details and features can directly influence increasing profits for the business involved in such a popular e-commerce game. This is the field where designers and business experts can work as one team for good of everyone, first of all of the target users.<\/span><\/p>\n<p><span style=\"color: #333333;\">Today&#8217;s case study is all about this theme: it presents the UI concept for Vinny&#8217;s Bakery website.\u00a0<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-8691 size-full\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/02\/tubikstudio-case-study-bakery-website.jpg\" alt=\"tubikstudio case study bakery website\" width=\"1200\" height=\"857\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/02\/tubikstudio-case-study-bakery-website.jpg 1200w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/02\/tubikstudio-case-study-bakery-website-300x214.jpg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/02\/tubikstudio-case-study-bakery-website-768x548.jpg 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/02\/tubikstudio-case-study-bakery-website-1024x731.jpg 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/02\/tubikstudio-case-study-bakery-website-150x107.jpg 150w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<h2><span style=\"color: #333333;\">Task<\/span><\/h2>\n<p><span style=\"color: #333333;\">UI\/UX design of a website for a small elite bakery selling fresh hand-made bread.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Process<\/span><\/h2>\n<p><span style=\"color: #333333;\">Designing an <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/business-terms-in-design-for-e-commerce-sales-basics\/\" target=\"_blank\" rel=\"noopener noreferrer\">e-commerce<\/a> website or mobile app, designers should definitely consider the following aspects:<\/span><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li><span style=\"color: #333333;\">operational simplicity<\/span><\/li>\n<li><span style=\"color: #333333;\">strong <a href=\"https:\/\/blog.tubikstudio.com\/6-creative-stages-of-branding-design-step-by-step-guide\/\">branding<\/a><\/span><\/li>\n<li><span style=\"color: #333333;\">security of users\u2019 data<\/span><\/li>\n<li><span style=\"color: #333333;\">effective use of visual elements<\/span><\/li>\n<li><span style=\"color: #333333;\">clear data presentation via menus, catalogs, etc.<\/span><\/li>\n<li><span style=\"color: #333333;\">user\u2019s ability to leave feedback about goods and services<\/span><\/li>\n<li><span style=\"color: #333333;\">easily available general and contact information about the business providing goods or services<\/span><\/li>\n<li><span style=\"color: #333333;\">design that supports the offer not overshadowing it.<\/span><\/li>\n<\/ul>\n<p><span style=\"color: #333333;\">Grounded on these general principles, Tubik designer Ernest Asanov studied the trends on the market and analyzed the potential <a href=\"https:\/\/blog.tubikstudio.com\/business-oriented-design-know-your-target\/\">target audience<\/a> of customers who would actually buy the goods, not just watched the offers. On the basis of the obtained data, in UI design he followed the philosophy of minimalism which is user-friendly, attractive and informative.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-8641\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/12\/Bakery-website-design-case-study-tubik-1024x768.png\" alt=\"Bakery website design case study tubik\" width=\"1024\" height=\"768\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/12\/Bakery-website-design-case-study-tubik-1024x768.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/12\/Bakery-website-design-case-study-tubik-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/12\/Bakery-website-design-case-study-tubik-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/12\/Bakery-website-design-case-study-tubik-150x113.png 150w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/12\/Bakery-website-design-case-study-tubik.png 1440w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p><span style=\"color: #333333;\">The website promotes a small bakery selling homemade bread. The home page presents the service, providing the links giving more information about the company and the items it offers as well as links to social accounts. The designer was keen to activate different techniques of visual perception via headline, images, background and copy block so that users could get the basic information immediately and got the warm feeling of freshly baked bread. On the basis of the design solutions, it is easy to assume that this is the service positioning\u00a0itself as a producer and seller of upmarket products which are exclusively hand-made and presumably because of that reason cost higher than average bread in the supermarket. Harmony is\u00a0the style\u00a0provided by the webpage: <a href=\"https:\/\/tubikstudio.com\/dark-side-of-ui-benefits-of-dark-background\/\">dark background<\/a>, branding element as a central element of a header, strong and clear headline establishing positive emotional message, visual elements enabling immediate perception of the theme and setting strong visual association with tasty pastry, short text block describing basic benefits of the product and clearly visible call to action.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8195\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/07\/Bakery-website-catalog-design-ui.png\" alt=\"Bakery website catalog design-ui\" width=\"800\" height=\"600\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/07\/Bakery-website-catalog-design-ui.png 800w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/07\/Bakery-website-catalog-design-ui-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/07\/Bakery-website-catalog-design-ui-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/07\/Bakery-website-catalog-design-ui-150x113.png 150w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p><span style=\"color: #333333;\">The next webpage to look at is the catalog of the offered products: again, it supports the user with the prominent and high-quality photos of actual products with brief core information on every position. Users can also quickly review the rating of every item and its price. Horizontal scroll is applied for seeing more positions, that&#8217;s why the last item is shown not in a full view to let the user see that this is the direction of scrolling. <a href=\"https:\/\/blog.tubikstudio.com\/call-for-attention-powerful-cta-button-design\/\">Call-to-action button<\/a>, via which the user can add the item to the cart, is designed with a different color compared to all the other elements of the interface, and this technique allows making CTA prominent and seen immediately. Such an interface lets users add goods right from the catalog without the necessity to go to the page of this particular position. It&#8217;s a user-friendly way to go, especially for loyal customers who know well the quality and tastes of the presented bread and wouldn&#8217;t like to spend their time on additional transitions just to put the item into their cart. Still, if the user wants to know more about the particular item, it&#8217;s easy to do by just clicking or tapping on it in the list.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8693\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/02\/bakery-website-product-page-ui.png\" alt=\"bakery website product page-ui\" width=\"800\" height=\"600\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/02\/bakery-website-product-page-ui.png 800w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/02\/bakery-website-product-page-ui-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/02\/bakery-website-product-page-ui-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/02\/bakery-website-product-page-ui-150x113.png 150w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p><span style=\"color: #333333;\">Clicking on a particular item, users get access to more detailed information about the bakery item, including the description, weight of the pack, nutritional rates, rating, price, and CTA button. The photo of the item remains the only pictorial element of visual support which makes the interface concise and non-distracting.\u00a0<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7740\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/03\/Bakery-website-animation.gif\" alt=\"Bakery website animation\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\">Here you can see the full set of the transitions: you can see that <a href=\"https:\/\/blog.tubikstudio.com\/best-practices-for-website-header-design\/\">header<\/a> and footer are fixed, the horizontal scrolling opens more positions in the catalog and strengthens the feeling of the minimalistic and focused interface. The interactions are supported by smooth and unobtrusive <a href=\"https:\/\/blog.tubikstudio.com\/ui-animation-eye-pleasing-problem-solving\/\">animation<\/a> making the interface even more stylish via the imitation of interaction with physical objects in the real world.<\/span><\/p>\n<p><span style=\"color: #333333;\">Another aspect to mention generally about this web design concept is <a href=\"https:\/\/blog.tubikstudio.com\/typography-in-ui-guide-for-beginners\/\">typography<\/a> which set one more object of the thorough creative search for the designer and resulted in the combination of fonts, that are effectively contrast and easily readable. Color applied for headings, presented in bold and prominent font and applying uppercase letters echoes the color typical for the freshly baked bread, while the color of copy blocks sets the visual association with the flour on the baker&#8217;s table &#8211; the element which is used on the background imitating the cooking worktop. Therefore, all those elements get visually connected to each other and present the web interface which looks harmonic and consistent. These are the feelings playing a significant role in building up the positive user experience and attracting buyers to use the service again and again.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8694\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/02\/tubik-designer-UI-UX.jpg\" alt=\"tubik designer UI UX\" width=\"1000\" height=\"750\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/02\/tubik-designer-UI-UX.jpg 1000w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/02\/tubik-designer-UI-UX-300x225.jpg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/02\/tubik-designer-UI-UX-768x576.jpg 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/02\/tubik-designer-UI-UX-150x113.jpg 150w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<p><span style=\"color: #333333;\">No doubt, a new day will bring fresh challenges which will result in practical case studies for Tubik Blog readers. Stay tuned, have a tasty day and don&#8217;t miss the new posts!<\/span><\/p>\n<h2>Useful Case Studies<\/h2>\n<p>Here\u2019s the list of\u00a0practical case studies for further reading on the theme of UI\/UX design<\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-watering-tracker-ui-design-for-home-needs\/\">Watering Tracker. UI Design for Home Needs<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-manuva-uiux-design-gym-fitness-app\/\">Manuva. UI\/UX Design for Gym Fitness App<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-cuteen-uiux-design-for-mobile-photo-editor\/\">Cuteen. UI\/UX Design for Mobile Photo Editor<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-tasty-burger-ui-design-for-food-ordering-app\/\">Tasty Burger.UI Design for Food Ordering App<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-slumber-mobile-ui-design-for-healthy-sleeping\/\">Slumber App. UI Design for Healthy Sleeping<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-home-budget-app-ui-for-finance\/\" target=\"_blank\" rel=\"noopener noreferrer\">Home Budget App. UI for Finance<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-night-in-berlin-ui-for-event-app\/\" target=\"_blank\" rel=\"noopener noreferrer\">Night in Berlin. UI for Event App<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-big-city-guide-landing-page-design\/\" target=\"_blank\" rel=\"noopener noreferrer\">Big City Guide. Landing Page Design<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-upper-app-ui-design-for-to-do-list\/\" target=\"_blank\" rel=\"noopener noreferrer\">Upper App. UI Design for To-Do List<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-health-care-app-ui-for-doctors\/\" target=\"_blank\" rel=\"noopener noreferrer\">Health Care App. UI for Doctors<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/swiftybeaver-ux-ui-design-for-mac-application\/\" target=\"_blank\" rel=\"noopener noreferrer\">SwiftyBeaver. UX\/UI Design for a Mac Application<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The design case study that looks and feels tasty: check the details of UI\/UX and animation for a website presenting a small elite bakery selling home-made bread.<\/p>\n","protected":false},"author":3,"featured_media":8641,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2,4,7,9],"tags":[174,466,175,467,176,468,212,469,233,479,256,482,16,336,491,31,365,502,34,437,504,57,440,515,100,447,533,123,453,534,127,457,536,139,458,538,142,463,547,151,465],"coauthors":[],"class_list":["post-2701","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-animation","category-case_study","category-processes_and_tools","category-ui_ux","tag-ecommerce","tag-ui-design-inspiration","tag-ecommerce-design","tag-ui-design-practices","tag-ecommerce-website","tag-ui-design-process","tag-graphic-design","tag-ui-design-tips","tag-human-computer-interaction","tag-usability","tag-interaction-design","tag-user-experience","tag-animation","tag-motion-design","tag-user-interface","tag-bakery","tag-product-design","tag-ux","tag-best-design-practices","tag-tips","tag-ux-design-article","tag-case-study","tag-tubik","tag-uxui","tag-design","tag-tubik-studio","tag-web-design","tag-design-for-business","tag-typography","tag-web-design-article","tag-design-for-marketing","tag-ui","tag-web-design-case-study","tag-design-psychology","tag-ui-animation","tag-web-design-inspiration","tag-design-research","tag-ui-design-article","tag-website","tag-design-tips","tag-ui-design-examples"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Case Study: Vinny&#039;s Bakery. UI Design for E-Commerce<\/title>\n<meta name=\"description\" content=\"The design case study that looks and feels tasty: check the details of UI\/UX and animation for a website presenting a small elite bakery selling home-made bread.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/tubikstudio.com\/blog\/case-study-vinnys-bakery-ui-design-for-e-commerce\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Case Study: Vinny&#039;s Bakery. UI Design for E-Commerce.\" \/>\n<meta property=\"og:description\" content=\"The design case study that looks and feels tasty: check the details of UI\/UX and animation for a website presenting a small elite bakery selling home-made bread.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tubikstudio.com\/blog\/case-study-vinnys-bakery-ui-design-for-e-commerce\/\" \/>\n<meta property=\"og:site_name\" content=\"Tubik Blog: Articles About Design\" \/>\n<meta property=\"article:published_time\" content=\"2017-02-14T15:26:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-15T08:06:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/12\/Bakery-website-design-case-study-tubik.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1440\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Marina Yalanska\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marina Yalanska\" \/>\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\":\"WebPage\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-vinnys-bakery-ui-design-for-e-commerce\/\",\"url\":\"https:\/\/tubikstudio.com\/blog\/case-study-vinnys-bakery-ui-design-for-e-commerce\/\",\"name\":\"Case Study: Vinny's Bakery. UI Design for E-Commerce\",\"isPartOf\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-vinnys-bakery-ui-design-for-e-commerce\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-vinnys-bakery-ui-design-for-e-commerce\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/12\/Bakery-website-design-case-study-tubik.png\",\"datePublished\":\"2017-02-14T15:26:45+00:00\",\"dateModified\":\"2023-08-15T08:06:29+00:00\",\"author\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\"},\"description\":\"The design case study that looks and feels tasty: check the details of UI\/UX and animation for a website presenting a small elite bakery selling home-made bread.\",\"breadcrumb\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-vinnys-bakery-ui-design-for-e-commerce\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tubikstudio.com\/blog\/case-study-vinnys-bakery-ui-design-for-e-commerce\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-vinnys-bakery-ui-design-for-e-commerce\/#primaryimage\",\"url\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/12\/Bakery-website-design-case-study-tubik.png\",\"contentUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/12\/Bakery-website-design-case-study-tubik.png\",\"width\":1440,\"height\":1080,\"caption\":\"Bakery website design case study tubik\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-vinnys-bakery-ui-design-for-e-commerce\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/tubikstudio.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Case Study: Vinny&#8217;s Bakery. UI Design for E-Commerce\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\",\"url\":\"https:\/\/tubikstudio.com\/blog\/\",\"name\":\"Tubik Blog: Articles About Design\",\"description\":\"Tubik Studio\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/tubikstudio.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\",\"name\":\"Marina Yalanska\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/image\/2ddde1c118fcf989ce8e73997a3909dd\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g\",\"caption\":\"Marina Yalanska\"},\"url\":\"https:\/\/tubikstudio.com\/blog\/author\/marina-yalanska\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Case Study: Vinny's Bakery. UI Design for E-Commerce","description":"The design case study that looks and feels tasty: check the details of UI\/UX and animation for a website presenting a small elite bakery selling home-made bread.","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:\/\/tubikstudio.com\/blog\/case-study-vinnys-bakery-ui-design-for-e-commerce\/","og_locale":"en_US","og_type":"article","og_title":"Case Study: Vinny&#039;s Bakery. UI Design for E-Commerce.","og_description":"The design case study that looks and feels tasty: check the details of UI\/UX and animation for a website presenting a small elite bakery selling home-made bread.","og_url":"https:\/\/tubikstudio.com\/blog\/case-study-vinnys-bakery-ui-design-for-e-commerce\/","og_site_name":"Tubik Blog: Articles About Design","article_published_time":"2017-02-14T15:26:45+00:00","article_modified_time":"2023-08-15T08:06:29+00:00","og_image":[{"width":1440,"height":1080,"url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/12\/Bakery-website-design-case-study-tubik.png","type":"image\/png"}],"author":"Marina Yalanska","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Marina Yalanska","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/tubikstudio.com\/blog\/case-study-vinnys-bakery-ui-design-for-e-commerce\/","url":"https:\/\/tubikstudio.com\/blog\/case-study-vinnys-bakery-ui-design-for-e-commerce\/","name":"Case Study: Vinny's Bakery. UI Design for E-Commerce","isPartOf":{"@id":"https:\/\/tubikstudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/tubikstudio.com\/blog\/case-study-vinnys-bakery-ui-design-for-e-commerce\/#primaryimage"},"image":{"@id":"https:\/\/tubikstudio.com\/blog\/case-study-vinnys-bakery-ui-design-for-e-commerce\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/12\/Bakery-website-design-case-study-tubik.png","datePublished":"2017-02-14T15:26:45+00:00","dateModified":"2023-08-15T08:06:29+00:00","author":{"@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f"},"description":"The design case study that looks and feels tasty: check the details of UI\/UX and animation for a website presenting a small elite bakery selling home-made bread.","breadcrumb":{"@id":"https:\/\/tubikstudio.com\/blog\/case-study-vinnys-bakery-ui-design-for-e-commerce\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tubikstudio.com\/blog\/case-study-vinnys-bakery-ui-design-for-e-commerce\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/case-study-vinnys-bakery-ui-design-for-e-commerce\/#primaryimage","url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/12\/Bakery-website-design-case-study-tubik.png","contentUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/12\/Bakery-website-design-case-study-tubik.png","width":1440,"height":1080,"caption":"Bakery website design case study tubik"},{"@type":"BreadcrumbList","@id":"https:\/\/tubikstudio.com\/blog\/case-study-vinnys-bakery-ui-design-for-e-commerce\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/tubikstudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Case Study: Vinny&#8217;s Bakery. UI Design for E-Commerce"}]},{"@type":"WebSite","@id":"https:\/\/tubikstudio.com\/blog\/#website","url":"https:\/\/tubikstudio.com\/blog\/","name":"Tubik Blog: Articles About Design","description":"Tubik Studio","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/tubikstudio.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f","name":"Marina Yalanska","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/image\/2ddde1c118fcf989ce8e73997a3909dd","url":"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g","caption":"Marina Yalanska"},"url":"https:\/\/tubikstudio.com\/blog\/author\/marina-yalanska\/"}]}},"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/2701","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/comments?post=2701"}],"version-history":[{"count":3,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/2701\/revisions"}],"predecessor-version":[{"id":14636,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/2701\/revisions\/14636"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media\/8641"}],"wp:attachment":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media?parent=2701"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/categories?post=2701"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/tags?post=2701"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/coauthors?post=2701"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}