{"id":831,"date":"2021-08-15T07:46:40","date_gmt":"2021-08-15T05:46:40","guid":{"rendered":"http:\/\/nyow.fr\/?post_type=project&#038;p=831"},"modified":"2021-08-15T08:08:35","modified_gmt":"2021-08-15T06:08:35","slug":"barnes-collection","status":"publish","type":"project","link":"http:\/\/chlovis-old.localhost\/projects\/barnes-collection\/","title":{"rendered":"Barnes Collection"},"content":{"rendered":"<div class=\"project-block block-hero-project\">\n    <div class=\"content-wrapper\">\n        <div class=\"wrapper\">\n            <div class=\"flex-wrapper\">\n                <div class=\"txt-wrapper\">\n                                            <h1>Barnes Collection<\/h1>\n                                                                <ul class=\"tags\">\n                                                            <li>interaction design<\/li>\n                                                            <li>user experience<\/li>\n                                                    <\/ul>\n                                                                <h2>Goals : <\/h2>\n                                                                <div class=\"wysiwyig-content\"><ul>\n<li>Explore at least 3 radically different concepts for the Collection experience<\/li>\n<li>Design in tandem (UX &amp; VD) the most convincing one<\/li>\n<li>Ensure user experience concepts follow accessibility guidelines<\/li>\n<li>Experience suited for both Mobile &amp; Desktop equally<\/li>\n<\/ul>\n<\/div>\n                                    <\/div>\n                <div class=\"btn-wrapper\">\n                                            <a href=\"https:\/\/collection.barnesfoundation.org\/\" title=\"View website\" target=\"_blank\" class=\"btn is-rounded is-rounded-border is-rounded-white-border\">View website<\/a>\n                                    <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<div class=\"project-wrapper  grey\">\n        <div class=\"content-wrapper\">\n        <div class=\"wrapper \">\n                                    \n\n<p style=\"font-size:14px\">I worked with <a href=\"https:\/\/area17.com\/work\/barnes-foundation-website\">AREA17<\/a> for this project. It was a 10 days mission.<\/p>\n\n\n\n<p style=\"font-size:28px\">&#8220;Albert Barnes taught people to look at work of art primarily in terms of their visual relationships&#8221;. The Foundation wanted a browsing tool that follows this principle.<\/p>\n\n                    <\/div>\n    <\/div>\n<\/div>\n\n<div class=\"project-wrapper  white image\">\n            <div class=\"bg-img framed\" style=\"background-image: url(http:\/\/chlovis-old.localhost\/wp-content\/uploads\/barnes_5b66226b-3f99-4467-9932-afab628abd81_rw_1920.png);\"><\/div>\n        <div class=\"content-wrapper\">\n        <div class=\"wrapper \">\n                                        <div class=\"framed-content right\">\n                    <div class=\"content-wrapper\">\n                        \n\n<h2 class=\"wp-block-heading\">Finding the concept, generating ideas<\/h2>\n\n\n\n<p style=\"line-height:1.6\">The first step of the project was to present the design&nbsp;team a wide range of possibilities. Some examples we thought about, an immersive wall of images, to explore by current rooms of collection, a search engine with random words&#8230; I even imagined an emoji based search.&nbsp;<br><strong>We decided to move forward with visual filters search.<\/strong><\/p>\n\n                                <\/div>\n                <\/div>\n                    <\/div>\n    <\/div>\n<\/div>\n\n<div class=\"project-wrapper  grey\">\n        <div class=\"content-wrapper\">\n        <div class=\"wrapper \">\n                                    \n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1920\" height=\"845\" src=\"http:\/\/nyow.fr\/wp-content\/uploads\/barnes_sketches_mobile.png\" alt=\"\" class=\"wp-image-838\" srcset=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/barnes_sketches_mobile.png 1920w, http:\/\/chlovis-old.localhost\/wp-content\/uploads\/barnes_sketches_mobile-768x338.png 768w, http:\/\/chlovis-old.localhost\/wp-content\/uploads\/barnes_sketches_mobile-1536x676.png 1536w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n                    <\/div>\n    <\/div>\n<\/div>\n\n<div class=\"project-wrapper  white\">\n        <div class=\"content-wrapper\">\n        <div class=\"wrapper \">\n                                    \n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"1800\" height=\"1826\" src=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/barnes_screen.jpeg\" alt=\"\" class=\"wp-image-836\" srcset=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/barnes_screen.jpeg 1800w, http:\/\/chlovis-old.localhost\/wp-content\/uploads\/barnes_screen-100x100.jpeg 100w, http:\/\/chlovis-old.localhost\/wp-content\/uploads\/barnes_screen-768x779.jpeg 768w, http:\/\/chlovis-old.localhost\/wp-content\/uploads\/barnes_screen-1514x1536.jpeg 1514w\" sizes=\"(max-width: 1800px) 100vw, 1800px\" \/><\/figure>\n\n                    <\/div>\n    <\/div>\n<\/div>\n\n<div class=\"project-wrapper  greyF9\">\n        <div class=\"content-wrapper\">\n        <div class=\"wrapper \">\n                                    \n\n<h2 class=\"wp-block-heading\">Filtering system <\/h2>\n\n\n\n<p>When the main flow was designed, the big challenge was the filters system itself.&nbsp;<br>Which visual elements to choose? And how to pick different elements in the most simple&nbsp;way?<br>Lines for example: they can be horizontal, verticals, curved, straight, cutted&#8230; We could also talk about spaces (narrow to deep), lights changes&#8230;<\/p>\n\n\n\n<p>For each type of filters, there is a different logic.<br>Through some iterations we opted for the most&nbsp;intuitive options in each field. <\/p>\n\n\n\n<figure class=\"wp-block-video\"><video  src=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/Barnes_Filter.mp4\"><\/video><\/figure>\n\n                    <\/div>\n    <\/div>\n<\/div>\n\n<div class=\"project-wrapper  white\">\n        <div class=\"content-wrapper\">\n        <div class=\"wrapper large-project\">\n                                    \n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1920\" height=\"845\" src=\"http:\/\/nyow.fr\/wp-content\/uploads\/barnes_mobilevd.png\" alt=\"\" class=\"wp-image-835\" srcset=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/barnes_mobilevd.png 1920w, http:\/\/chlovis-old.localhost\/wp-content\/uploads\/barnes_mobilevd-768x338.png 768w, http:\/\/chlovis-old.localhost\/wp-content\/uploads\/barnes_mobilevd-1536x676.png 1536w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n                    <\/div>\n    <\/div>\n<\/div>\n\n<div class=\"project-wrapper  grey\">\n        <div class=\"content-wrapper\">\n        <div class=\"wrapper \">\n                                    \n\n<p class=\"has-large-font-size\"><meta charset=\"utf-8\">An easy &amp; non frustrating mobile navigation was a priority for us. Everyone could be able to try this tool and discover a new way to browse art. <br><\/p>\n\n                    <\/div>\n    <\/div>\n<\/div>\n\n<div class=\"project-wrapper  white image\">\n            <div class=\"bg-img framed\" style=\"background-image: url(http:\/\/chlovis-old.localhost\/wp-content\/uploads\/barnes_collectiontodetail.png);\"><\/div>\n        <div class=\"content-wrapper\">\n        <div class=\"wrapper \">\n                                        <div class=\"framed-content left\">\n                    <div class=\"content-wrapper\">\n                        \n\n<h2 class=\"wp-block-heading\">Visually Related Artworks<\/h2>\n\n\n\n<p style=\"line-height:1.6\">Another Challenge was the navigation from a Detail Page. <br>From an artwork page, we wanted to display &#8220;related&#8221; artworks, with a gauge allowing user to play with &#8220;very similar&#8221; to &#8220;more surprising&#8221; artworks. <\/p>\n\n                                <\/div>\n                <\/div>\n                    <\/div>\n    <\/div>\n<\/div>\n\n<div class=\"project-wrapper  greyF9\">\n        <div class=\"content-wrapper\">\n        <div class=\"wrapper \">\n                                    \n<div class=\"project-block block-slider has-lightbox\">\n            <div class=\"swiper-container js-swiper-slider\" data-slides-per-view=\"1\" data-slides-per-view-sm=\"1.1\">\n            <div class=\"swiper-wrapper\">\n                                                        <div class=\"swiper-slide\">\n                        <img decoding=\"async\" src=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/Capture-de\u0301cran-2021-08-15-a\u0300-12.45.17.png\" alt=\"\" title=\"Capture d\u2019e\u0301cran 2021-08-15 a\u0300 12.45.17\">\n                    <\/div>\n                                                        <div class=\"swiper-slide\">\n                        <img decoding=\"async\" src=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/Capture-de\u0301cran-2021-08-15-a\u0300-12.46.14.png\" alt=\"\" title=\"Capture d\u2019e\u0301cran 2021-08-15 a\u0300 12.46.14\">\n                    <\/div>\n                                                        <div class=\"swiper-slide\">\n                        <img decoding=\"async\" src=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/Capture-de\u0301cran-2021-08-15-a\u0300-12.46.39.png\" alt=\"\" title=\"Capture d\u2019e\u0301cran 2021-08-15 a\u0300 12.46.39\">\n                    <\/div>\n                            <\/div>\n            <div class=\"js-swiper-prev swiper-nav swiper-nav-prev\">\n                <img decoding=\"async\" src=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/ico-left.svg\" alt=\"Prev\" title=\"Prev\">\n            <\/div>\n            <div class=\"js-swiper-next swiper-nav swiper-nav-next\">\n                <img decoding=\"async\" src=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/ico-right.svg\" alt=\"Next\" title=\"Next\">\n            <\/div>\n        <\/div>\n                    <div class=\"lightbox-wrapper\">\n                <img decoding=\"async\" src=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/Capture-de\u0301cran-2021-08-15-a\u0300-12.45.17.png\" alt=\"\" title=\"Capture d\u2019e\u0301cran 2021-08-15 a\u0300 12.45.17\" class=\"lightbox-preview\">\n                <div class=\"fancy-btn-wrapper is-over\"><a href=\"#\" class=\"js-open-lightbox btn is-rounded is-rounded-blue-op\" data-lightbox=\"lightbox-block_6118a78dbde52\"><span>View gallery<\/span><\/a><\/div>\n                <div class=\"lightbox\" data-lightbox=\"lightbox-block_6118a78dbde52\">\n                    <button class=\"lightbox-close js-close-lightbox\"><\/button>\n                    <div class=\"lightbox-close-placeholder\"><\/div>\n                                            <p class=\"lightbox-title\">Visually Related <\/p>\n                                                            <div class=\"lightbox-slider swiper-container js-swiper-slider\" data-slides-per-view=\"1\" data-slides-per-view-sm=\"1.1\">\n                        <div class=\"swiper-wrapper\">\n                                                                                            <div class=\"swiper-slide\">\n                                    <figure>\n                                        <!-- <div class=\"swiper-zoom-container\"> -->\n                                            <img decoding=\"async\" src=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/Capture-de\u0301cran-2021-08-15-a\u0300-12.45.17.png\" alt=\"\" title=\"Capture d\u2019e\u0301cran 2021-08-15 a\u0300 12.45.17\">\n                                        <!-- <\/div> -->\n                                                                            <\/figure>\n                                <\/div>\n                                                                                            <div class=\"swiper-slide\">\n                                    <figure>\n                                        <!-- <div class=\"swiper-zoom-container\"> -->\n                                            <img decoding=\"async\" src=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/Capture-de\u0301cran-2021-08-15-a\u0300-12.46.14.png\" alt=\"\" title=\"Capture d\u2019e\u0301cran 2021-08-15 a\u0300 12.46.14\">\n                                        <!-- <\/div> -->\n                                                                            <\/figure>\n                                <\/div>\n                                                                                            <div class=\"swiper-slide\">\n                                    <figure>\n                                        <!-- <div class=\"swiper-zoom-container\"> -->\n                                            <img decoding=\"async\" src=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/Capture-de\u0301cran-2021-08-15-a\u0300-12.46.39.png\" alt=\"\" title=\"Capture d\u2019e\u0301cran 2021-08-15 a\u0300 12.46.39\">\n                                        <!-- <\/div> -->\n                                                                            <\/figure>\n                                <\/div>\n                                                    <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n            <\/div>\n                    <\/div>\n    <\/div>\n<\/div>\n\n<div class=\"project-wrapper  rainbow\">\n        <div class=\"content-wrapper\">\n        <div class=\"wrapper \">\n                                    \n\n<p style=\"font-size:28px\">For once, you don&#8217;t need to be a &#8220;connoisseur&#8221; to enjoy browsing&nbsp;an online art collection.&nbsp;<\/p>\n\n                    <\/div>\n    <\/div>\n<\/div>","protected":false},"template":"","yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Barnes Collection, case study : Visual Filters for Artworks - Chlovis Lobre<\/title>\n<meta name=\"description\" content=\"The Barnes Foundation wanted users to browse their Collections visually. We sketched a few ideas and settled on a visual filters system.\" \/>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Barnes Collection, case study : Visual Filters for Artworks - Chlovis Lobre\" \/>\n<meta property=\"og:description\" content=\"The Barnes Foundation wanted users to browse their Collections visually. We sketched a few ideas and settled on a visual filters system.\" \/>\n<meta property=\"og:url\" content=\"http:\/\/chlovis-old.localhost\/projects\/barnes-collection\/\" \/>\n<meta property=\"og:site_name\" content=\"Chlovis Lobre\" \/>\n<meta property=\"article:modified_time\" content=\"2021-08-15T06:08:35+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/barnes_screen.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1800\" \/>\n\t<meta property=\"og:image:height\" content=\"1826\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"http:\/\/chlovis-old.localhost\/projects\/barnes-collection\/\",\"url\":\"http:\/\/chlovis-old.localhost\/projects\/barnes-collection\/\",\"name\":\"Barnes Collection, case study : Visual Filters for Artworks - Chlovis Lobre\",\"isPartOf\":{\"@id\":\"http:\/\/chlovis-old.localhost\/#website\"},\"datePublished\":\"2021-08-15T05:46:40+00:00\",\"dateModified\":\"2021-08-15T06:08:35+00:00\",\"description\":\"The Barnes Foundation wanted users to browse their Collections visually. We sketched a few ideas and settled on a visual filters system.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/chlovis-old.localhost\/projects\/barnes-collection\/\"]}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/chlovis-old.localhost\/#website\",\"url\":\"http:\/\/chlovis-old.localhost\/\",\"name\":\"Chlovis Lobre\",\"description\":\"I do interaction design &amp; ux consulting for video games, start-ups and agencies.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/chlovis-old.localhost\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Barnes Collection, case study : Visual Filters for Artworks - Chlovis Lobre","description":"The Barnes Foundation wanted users to browse their Collections visually. We sketched a few ideas and settled on a visual filters system.","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"Barnes Collection, case study : Visual Filters for Artworks - Chlovis Lobre","og_description":"The Barnes Foundation wanted users to browse their Collections visually. We sketched a few ideas and settled on a visual filters system.","og_url":"http:\/\/chlovis-old.localhost\/projects\/barnes-collection\/","og_site_name":"Chlovis Lobre","article_modified_time":"2021-08-15T06:08:35+00:00","og_image":[{"width":1800,"height":1826,"url":"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/barnes_screen.jpeg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"http:\/\/chlovis-old.localhost\/projects\/barnes-collection\/","url":"http:\/\/chlovis-old.localhost\/projects\/barnes-collection\/","name":"Barnes Collection, case study : Visual Filters for Artworks - Chlovis Lobre","isPartOf":{"@id":"http:\/\/chlovis-old.localhost\/#website"},"datePublished":"2021-08-15T05:46:40+00:00","dateModified":"2021-08-15T06:08:35+00:00","description":"The Barnes Foundation wanted users to browse their Collections visually. We sketched a few ideas and settled on a visual filters system.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/chlovis-old.localhost\/projects\/barnes-collection\/"]}]},{"@type":"WebSite","@id":"http:\/\/chlovis-old.localhost\/#website","url":"http:\/\/chlovis-old.localhost\/","name":"Chlovis Lobre","description":"I do interaction design &amp; ux consulting for video games, start-ups and agencies.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/chlovis-old.localhost\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"}]}},"acf":[],"_links":{"self":[{"href":"http:\/\/chlovis-old.localhost\/wp-json\/wp\/v2\/project\/831"}],"collection":[{"href":"http:\/\/chlovis-old.localhost\/wp-json\/wp\/v2\/project"}],"about":[{"href":"http:\/\/chlovis-old.localhost\/wp-json\/wp\/v2\/types\/project"}],"wp:attachment":[{"href":"http:\/\/chlovis-old.localhost\/wp-json\/wp\/v2\/media?parent=831"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}