{"id":2834,"date":"2017-03-20T13:32:04","date_gmt":"2017-03-20T10:32:04","guid":{"rendered":"https:\/\/tubikstudio.com\/?p=2834"},"modified":"2023-08-15T07:49:43","modified_gmt":"2023-08-15T07:49:43","slug":"case-study-night-in-berlin-ui-for-event-app","status":"publish","type":"post","link":"https:\/\/tubikstudio.com\/blog\/case-study-night-in-berlin-ui-for-event-app\/","title":{"rendered":"Case Study: Night in Berlin. UI for Event App"},"content":{"rendered":"

Have you ever felt the urge to leave the planned and predictable routine and do something impulsive? Maybe go to the random concert of an unknown band, or visit the exhibition you are walking by? Certainly, you know that feeling. Nowadays, people move in the circle of everyday drills, and the desire to drop everything naturally appears from time to time. But when the moment comes, we often don\u2019t know the places to go or where to find interesting events. Here is how we have come up with the idea for a new mobile app concept called Night in Berlin.<\/span><\/p>\n

Night in Berlin is one of the design projects accomplished in terms of Tubik UI Fridays. In one of the previous case studies<\/a>, we talked about our new tradition of presenting the set of creative sessions when the designers have a day to work on the design concepts out of current projects. The concepts are created within a particular general idea of a digital product but with all the passion and freedom for the designers\u2019 artistic souls. Today\u2019s case study describes the creative process of the unusual mobile application design.<\/span><\/p>\n

Task<\/span><\/h2>\n

UI\\UX and motion design for a mobile event app.<\/span><\/p>\n

 <\/p>\n

UI Design<\/span><\/h2>\n

During UI Fridays<\/a>, the designers sometimes receive objectives far from ordinary. In this way, the team has an opportunity to create something absolutely unique. This time, the task given to the designers was to design a mobile application of the future. To specify the task, the art director gave them the background story. The designers had to imagine themselves in Berlin of 2019 where every night is extremely eventful. Their objective was to create a design concept for the mobile application that would come in handy to people who love hanging out at night. When the task was set, Tubik designers Ludmila Shevchenko, Eugene Cameel, and Olga Popova started their work with art direction by Sergey Valiukh.<\/span><\/p>\n

After active brainstorming, the designers\u2019 team determined the concept of the app. It should be a simple application that enables people, who love socializing and visiting the latest events, to see the list of all the events, parties, exhibitions, and the like taking place in Berlin. In order to add the effect of bright, impulsive decisions, the list is shown at a particular time and only for the current day. The core thing the designers were supposed to keep in mind is that the application is meant for the users of the future, so the design needs to be absolutely original and extraordinary. Let\u2019s see what the team managed to create.<\/span><\/p>\n

\"night_in_berlin_onboarding_tubik_ui\"<\/p>\n

The first screen featured the onboarding<\/a> with the countdown to the time when the list becomes available. The chosen gradient colors accurately convey the atmosphere of the night since they are associated with lights in nightclubs. The illustration of the Fernsehturm, the famous television tower in central Berlin, is made in the corresponding colors, so the design of the screen looks solid. The app\u2019s name is situated at the bottom left part of the screen. All the functionality is hidden behind the hamburger menu button placed in the top left corner allowing to make the focus on the countdown.<\/span><\/p>\n

\"night<\/p>\n

The screen above presents the list itself, informing the user about the variety of events. The data is organized along the cards for every event, which users can review by scrolling vertically. Each card shows the key details about the event: its type, title, and the time when it starts, as well as the thematic image in the background. Being interested, the user can tap on the card and see more details about the offer.<\/span><\/p>\n

\"Night-in-Berlin-Event-Details\"<\/p>\n

 <\/p>\n

When the users tap on the event card, they see the event screen. This concept features the exhibition in the art gallery, which is marked in the top right corner. The name of the artist and the exhibition are situated in the center of the page. The background image presents actual artwork by the artists, so the users are able to quickly catch the style and artistic manner, read the description, and see the time when the event starts. All that combination provides the information to the user quickly, in a clear and stylish manner.<\/span><\/p>\n

\"night<\/p>\n

Motion Design<\/span><\/h2>\n

When the static variants of the screens were ready, motion designer Kirill Erokhin started working on the animations.<\/span><\/p>\n

\"night_in_berlin_animation_tubik\"<\/p>\n

Here is the animated version of the onboarding screen. The major element is the countdown numbers which are smoothly animated. The background is moving similarly to haze, changing the colors.<\/span><\/p>\n

\"night<\/p>\n

This animation presents the screen with a list of events showing user interactions. The data is organized along the cards for every event, which users can review by scrolling vertically. The user can tap on the card and see more details about the event. The arrow button on the top of the screen brings the user back to the list.<\/span><\/p>\n

Working on design concepts of this kind gives designers a prominent chance to think out of the box. It stimulates their creativity which beams brighter when given regular practice. Follow our blog and check out our Dribbble<\/a>\u00a0page not to miss the updates on the Tubik UI Fridays<\/a>. More concepts and case studies are coming very soon. Meanwhile, you can be interested in reviewing another case study for the creative design concept called Big City Guide<\/a>. Stay tuned!<\/span><\/p>\n

Useful Case Studies<\/h2>\n

If you\u00a0are interested to see more practical case studies with creative flows for mobile UI design, here is the set of them from Tubik.<\/p>\n

Slumber. Mobile UI Design for Healthy Sleeping<\/a><\/p>\n

Bitex. UX Design for Stock Analysis App<\/a><\/p>\n

Letter Bounce. UI Design for Mobile Game<\/a><\/p>\n

Real Racing. UX and UI Design for Mobile Game<\/a><\/p>\n

Real Racing. Graphic Design for Mobile Game<\/a><\/p>\n

Manuva. UI\/UX Design for Gym Fitness App<\/a><\/p>\n

Cuteen. UI\/UX Design for Mobile Photo Editor<\/a><\/p>\n

Tasty Burger.UI Design for Food Ordering App<\/a><\/p>\n

Watering Tracker. UI Design for Home Needs<\/a><\/p>\n

Night in Berlin. UI for Event App<\/a><\/p>\n

Upper App. UI Design for To-Do List<\/a><\/p>\n

Toonie Alarm. Mobile App UI Design<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Fresh case study on UI design created on Tubik UI Fridays: this time it’s the bright and futuristic app called Night in Berlin. Check the variety of screens and animation.<\/p>\n","protected":false},"author":3,"featured_media":7982,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2,4,6,9],"tags":[100,465,112,466,147,467,151,468,212,469,248,479,319,482,324,491,336,493,365,502,440,504,448,515,457,16,461,20,463,57,464],"coauthors":[],"class_list":["post-2834","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-animation","category-case_study","category-illustration","category-ui_ux","tag-design","tag-ui-design-examples","tag-design-concept","tag-ui-design-inspiration","tag-design-studio","tag-ui-design-practices","tag-design-tips","tag-ui-design-process","tag-graphic-design","tag-ui-design-tips","tag-illustration","tag-usability","tag-mobile-app","tag-user-experience","tag-mobile-design-inspiration","tag-user-interface","tag-motion-design","tag-user-interface-design-process","tag-product-design","tag-ux","tag-tubik","tag-ux-design-article","tag-tubik-ui-friday","tag-uxui","tag-ui","tag-animation","tag-ui-day","tag-app-design","tag-ui-design-article","tag-case-study","tag-ui-design-case-study"],"acf":[],"yoast_head":"\nCase Study: Night in Berlin. UI for Event App<\/title>\n<meta name=\"description\" content=\"Fresh case study on UI design created on Tubik UI Fridays: this time it's the bright and futuristic app called Night in Berlin. Check the variety of screens and animation.\" \/>\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-night-in-berlin-ui-for-event-app\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Case Study: Night in Berlin. UI for Event App\" \/>\n<meta property=\"og:description\" content=\"Fresh case study on UI design created on Tubik UI Fridays: this time it's the bright and futuristic app called Night in Berlin. Check the variety of screens and animation.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tubikstudio.com\/blog\/case-study-night-in-berlin-ui-for-event-app\/\" \/>\n<meta property=\"og:site_name\" content=\"Tubik Blog: Articles About Design\" \/>\n<meta property=\"article:published_time\" content=\"2017-03-20T10:32:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-15T07:49:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/Night-in-Berlin-app-design-case-study.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1500\" \/>\n\t<meta property=\"og:image:height\" content=\"983\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\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=\"5 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-night-in-berlin-ui-for-event-app\/\",\"url\":\"https:\/\/tubikstudio.com\/blog\/case-study-night-in-berlin-ui-for-event-app\/\",\"name\":\"Case Study: Night in Berlin. UI for Event App\",\"isPartOf\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-night-in-berlin-ui-for-event-app\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-night-in-berlin-ui-for-event-app\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/Night-in-Berlin-app-design-case-study.jpg\",\"datePublished\":\"2017-03-20T10:32:04+00:00\",\"dateModified\":\"2023-08-15T07:49:43+00:00\",\"author\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\"},\"description\":\"Fresh case study on UI design created on Tubik UI Fridays: this time it's the bright and futuristic app called Night in Berlin. Check the variety of screens and animation.\",\"breadcrumb\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-night-in-berlin-ui-for-event-app\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tubikstudio.com\/blog\/case-study-night-in-berlin-ui-for-event-app\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-night-in-berlin-ui-for-event-app\/#primaryimage\",\"url\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/Night-in-Berlin-app-design-case-study.jpg\",\"contentUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/Night-in-Berlin-app-design-case-study.jpg\",\"width\":1500,\"height\":983,\"caption\":\"Night in Berlin app design case study\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/case-study-night-in-berlin-ui-for-event-app\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/tubikstudio.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Case Study: Night in Berlin. UI for Event App\"}]},{\"@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: Night in Berlin. UI for Event App","description":"Fresh case study on UI design created on Tubik UI Fridays: this time it's the bright and futuristic app called Night in Berlin. Check the variety of screens and animation.","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-night-in-berlin-ui-for-event-app\/","og_locale":"en_US","og_type":"article","og_title":"Case Study: Night in Berlin. UI for Event App","og_description":"Fresh case study on UI design created on Tubik UI Fridays: this time it's the bright and futuristic app called Night in Berlin. Check the variety of screens and animation.","og_url":"https:\/\/tubikstudio.com\/blog\/case-study-night-in-berlin-ui-for-event-app\/","og_site_name":"Tubik Blog: Articles About Design","article_published_time":"2017-03-20T10:32:04+00:00","article_modified_time":"2023-08-15T07:49:43+00:00","og_image":[{"width":1500,"height":983,"url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/Night-in-Berlin-app-design-case-study.jpg","type":"image\/jpeg"}],"author":"Marina Yalanska","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Marina Yalanska","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/tubikstudio.com\/blog\/case-study-night-in-berlin-ui-for-event-app\/","url":"https:\/\/tubikstudio.com\/blog\/case-study-night-in-berlin-ui-for-event-app\/","name":"Case Study: Night in Berlin. UI for Event App","isPartOf":{"@id":"https:\/\/tubikstudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/tubikstudio.com\/blog\/case-study-night-in-berlin-ui-for-event-app\/#primaryimage"},"image":{"@id":"https:\/\/tubikstudio.com\/blog\/case-study-night-in-berlin-ui-for-event-app\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/Night-in-Berlin-app-design-case-study.jpg","datePublished":"2017-03-20T10:32:04+00:00","dateModified":"2023-08-15T07:49:43+00:00","author":{"@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f"},"description":"Fresh case study on UI design created on Tubik UI Fridays: this time it's the bright and futuristic app called Night in Berlin. Check the variety of screens and animation.","breadcrumb":{"@id":"https:\/\/tubikstudio.com\/blog\/case-study-night-in-berlin-ui-for-event-app\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tubikstudio.com\/blog\/case-study-night-in-berlin-ui-for-event-app\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/case-study-night-in-berlin-ui-for-event-app\/#primaryimage","url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/Night-in-Berlin-app-design-case-study.jpg","contentUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/Night-in-Berlin-app-design-case-study.jpg","width":1500,"height":983,"caption":"Night in Berlin app design case study"},{"@type":"BreadcrumbList","@id":"https:\/\/tubikstudio.com\/blog\/case-study-night-in-berlin-ui-for-event-app\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/tubikstudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Case Study: Night in Berlin. UI for Event App"}]},{"@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\/2834","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=2834"}],"version-history":[{"count":6,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/2834\/revisions"}],"predecessor-version":[{"id":14624,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/2834\/revisions\/14624"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media\/7982"}],"wp:attachment":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media?parent=2834"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/categories?post=2834"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/tags?post=2834"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/coauthors?post=2834"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}