{"id":1569,"date":"2016-05-12T14:06:19","date_gmt":"2016-05-12T11:06:19","guid":{"rendered":"https:\/\/tubikstudio.com\/?p=1569"},"modified":"2023-08-17T12:12:29","modified_gmt":"2023-08-17T12:12:29","slug":"swiftybeaver-ux-ui-design-for-mac-application","status":"publish","type":"post","link":"https:\/\/tubikstudio.com\/blog\/swiftybeaver-ux-ui-design-for-mac-application\/","title":{"rendered":"Case Study: SwiftyBeaver. UX and UI Design for a Mac Application"},"content":{"rendered":"

Today we would like to present you a new case study on UX and UI\u00a0design. This time it is a full design path for SwiftyBeaver<\/a> project.<\/p>\n

\"swiftybeaver<\/p>\n

 <\/p>\n

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

Design of the user interface for the logging platform uniting the efforts of Swift and Objective-C developers, UX designers, app analytics experts, and product owners.<\/span><\/p>\n

 <\/p>\n

Tools<\/span><\/h2>\n

Sketch, Adobe Illustrator, Adobe After Effects.<\/span><\/p>\n

 <\/p>\n

Process<\/span><\/h2>\n

SwiftyBeaver is a native Mac application presenting the integrated logging platform for Apple\u2019s Swift programming language, also supporting Objective-C. First of all, it is aiming at developers as its basic target audience. The product supports all the devices belonging to the Apple device family. The user interface designer had to consider the basic and advanced needs of people involved in the developing process to make it easier, faster, and more productive. The assignment to work over design solutions was given to one of Tubik Studio UI\/UX designers Ludmila Shevchenko who says that the project was really a memorable task totally different from everything she had accomplished before. To get a more detailed description of the product and its functionality, welcome to read its presentation<\/a> on Medium. And now let’s look a bit closer at some steps of user interface design for the product.<\/span><\/p>\n

\"tubikstudio<\/p>\n

In software engineering logging should be mentioned among key factors of developers’ routine. It is an integral part of the development process helping developers to understand flow, logic and state of an application. Log entries inform them about the state of the application as well as the issues of its actual operating. Therefore, a user interface for this sort of product needs to support the high level of visibility for changes, intuitive navigation, and presentation of big data bulks with a high level of readability<\/a> and visual marking of key details. The basic objective was to design a platform that will be easy to use, informative, supporting broad functionality for professionals, and seamlessly integrated with any Apple device.<\/span><\/p>\n

At UX design stage the designer worked over layout and navigation design solutions concentrated around three basic issues:<\/span>
\n– the way log entries should be shown in the stream, as a general feed or separated by filters<\/span>
\n– the method log entries or the part of the stream history will be saved<\/span>
\n– the channels of creating code or working over the existing code.<\/span><\/p>\n

\"SwiftyBeaver<\/p>\n

Obviously, this part of the design process, based on specific knowledge about the field, needed tons of discussions and tight collaboration with a client, the founder, and CEO of SwiftyBeaver Sebastian Kreutzberger<\/a>. Being a developer himself, he brought out the idea which was deeply user-centered and problem-solving in terms of application for developing process, thus his detailed explanations of the operations were helpful for setting convenient and efficient layout, transitions, and navigation<\/a> of the interface at UX wireframing stage. A thorough analysis of the target audience and the unique selling points of the product allowed paying attention to the practical aspects of the product’s functionality.<\/span><\/p>\n

The UI design was concentrated around two major challenges: to present data efficiently in a way that will be quite traditional for developers but at the same time to make it a bit more engaging and stylish via non-distracting design elements and animation. Therefore, the design concept was based using dark background<\/a> common for coding platforms and software as well as bright color accents and gradients to add some style and make important accents noticeable.<\/span><\/p>\n

So, the visual presentation was not the only thing about colored elements. Using common color marking recognizable for developers, the platform supported easy navigation and visibility of key elements. Colors marked types of logging entries both in the names of categories and the streaming feed. The designer offered four UI concepts on this basis, with different fonts and variants of visual marking entries and errors.<\/span><\/p>\n

\"SwiftyBeaver<\/p>\n

Having agreed upon the general stylistic concept with the customer, the designer moved on in course of layout simplification. The interface of the product is data-driven, therefore, it has to exclude any sort of distraction and avoid repetitive elements to prevent the interface from being cluttered. So, it was decided to exclude the copy featuring the type of log entry in the fields of messages. Only color marker was left becoming the central element of the connection between log entry and the categories whose names were provided in the upper part of the screen.<\/span><\/p>\n

The provided set of screens featured different concepts for visual presentation of color markers and entries saved by the user. Understanding the importance of navigability for the interface of such high practical value and information intensity, the designer tried to use the maximum of conventions power. The markers using the colors easily decodable by developers were also supported by the star sign as a popular and clear marker of saving the object to favorites or elements needing further attention later.<\/span><\/p>\n

Among all the versions, the final decision was made upon the most minimalistic one. It used colored lines along the message body and small yellow star for saved entries. All the colored elements, as well as the background color and shades of hovered elements, were carefully tested to get a high level of visibility and pleasant-looking efficient contrast.<\/span><\/p>\n

\"SwiftyBeaver<\/p>\n

 <\/p>\n

One more key element of design that needed deep attention was a choice of fonts. Actually, in the design process around any interface, the choice of an appropriate font has a great influence on general usability and presentation of the product. However, in such a specific interface as SwiftyBeaver, which is highly concentrated on the textual material, the weight of font choice got even bigger. Moreover, the product is not rich in graphics materials such as icons or illustrations, so font becomes a major element of visual design for the product. The designer took her time to test various solutions and select the font which would be both beautiful and easily readable for users.<\/span><\/p>\n

The background was accomplished in different shades of very dark blue which appeared to be more harmonic and smooth in creating pleasant contrast than black color. To make the entries text more readable, the background behind them is changing slightly in shades one by one: it marks the limits of every entry but\u00a0without unnecessary distraction for the user. Hovered elements were highlighted while the others were dimmed. Slight gradients made the color markers look more stylish.<\/span><\/p>\n

\"SwiftyBeaver<\/p>\n

The aspect of entry length also was an object of deep consideration. There was such a way to go: the stream could show the fields of fixed height and if the entry was longer it could be hidden showing only a part of the message and opening full view on click. However, after research<\/a> and testing<\/a>, this solution wasn’t found effective. It was decided to show the full text of each entry as it was more user-centered and excluded additional operations and clicks. Therefore, the designer paid deeper attention to the slightest aspects of the kerning and spacing of the lines and work with efficient copy placement.<\/span><\/p>\n

\"SwiftyBeaver<\/p>\n

The work on the landing page<\/a> for the product was also an interesting and challenging design task as far as the product doesn’t offer a lot of visual material for user engagement and attraction. Therefore, the main accent again was made around the colored accents echoing the design solutions of the application interface layout.<\/span><\/p>\n

\"tubik<\/p>\n

In addition, Ludmila accomplished\u00a0graphic design task which resulted in illustrations<\/a> presenting the features and benefits of the product.<\/p>\n

\"SwiftyBeaver<\/p>\n

Another design task accomplished by Tubik Studio for SwiftyBeaver was work on the logo design for the app<\/a>.<\/span><\/p>\n

\"swiftybeaver<\/p>\n

We tell about it in our next case study<\/a>. Don’t miss!<\/span><\/p>\n

\n

Useful Case Studies<\/h2>\n

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

Slumber. Mobile UI Design for Healthy Sleeping<\/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

Bitex. UI Design for Stock Analysis App<\/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":"

Case study on UX and UI design. Detailed description of creating user interface for SwiftyBeaver, the logging platform for Apple\u2019s Swift programming language. <\/p>\n","protected":false},"author":3,"featured_media":9479,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[4,9],"tags":[365,20,447,47,453,57,457,100,464,108,479,147,482,212,485,233,491,237,502,238,515,264,533,291,536,299,552,309,319],"coauthors":[],"class_list":["post-1569","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-case_study","category-ui_ux","tag-product-design","tag-app-design","tag-tubik-studio","tag-branding","tag-typography","tag-case-study","tag-ui","tag-design","tag-ui-design-case-study","tag-design-case-study","tag-usability","tag-design-studio","tag-user-experience","tag-graphic-design","tag-user-experience-design","tag-human-computer-interaction","tag-user-interface","tag-icons","tag-ux","tag-identity","tag-uxui","tag-interface-navigation","tag-web-design","tag-landing-page","tag-web-design-case-study","tag-logo-design","tag-website-usability","tag-mac-application","tag-mobile-app"],"acf":[],"yoast_head":"\nCase Study: SwiftyBeaver. UX and UI Design for a Mac Application<\/title>\n<meta name=\"description\" content=\"Case study on UX and UI design. Detailed description of creating user interface for SwiftyBeaver, the logging platform for Apple\u2019s Swift programming language.\" \/>\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\/swiftybeaver-ux-ui-design-for-mac-application\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"SwiftyBeaver. UX & UI Design for a Mac Application\" \/>\n<meta property=\"og:description\" content=\"Fresh case study on UX and UI design process. Detailed description of creating user interface for SwiftyBeaver, a Mac application presenting the first integrated logging platform for Apple\u2019s Swift programming language.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tubikstudio.com\/blog\/swiftybeaver-ux-ui-design-for-mac-application\/\" \/>\n<meta property=\"og:site_name\" content=\"Tubik Blog: Articles About Design\" \/>\n<meta property=\"article:published_time\" content=\"2016-05-12T11:06:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-17T12:12:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/05\/Tubik-Studio-UIUX-designer-case-study.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"900\" \/>\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=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/swiftybeaver-ux-ui-design-for-mac-application\/\",\"url\":\"https:\/\/tubikstudio.com\/blog\/swiftybeaver-ux-ui-design-for-mac-application\/\",\"name\":\"Case Study: SwiftyBeaver. UX and UI Design for a Mac Application\",\"isPartOf\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/swiftybeaver-ux-ui-design-for-mac-application\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/swiftybeaver-ux-ui-design-for-mac-application\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/05\/Tubik-Studio-UIUX-designer-case-study.jpg\",\"datePublished\":\"2016-05-12T11:06:19+00:00\",\"dateModified\":\"2023-08-17T12:12:29+00:00\",\"author\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\"},\"description\":\"Case study on UX and UI design. Detailed description of creating user interface for SwiftyBeaver, the logging platform for Apple\u2019s Swift programming language.\",\"breadcrumb\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/swiftybeaver-ux-ui-design-for-mac-application\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tubikstudio.com\/blog\/swiftybeaver-ux-ui-design-for-mac-application\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/swiftybeaver-ux-ui-design-for-mac-application\/#primaryimage\",\"url\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/05\/Tubik-Studio-UIUX-designer-case-study.jpg\",\"contentUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/05\/Tubik-Studio-UIUX-designer-case-study.jpg\",\"width\":1200,\"height\":900,\"caption\":\"Tubik Studio UIUX designer case study\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/swiftybeaver-ux-ui-design-for-mac-application\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/tubikstudio.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Case Study: SwiftyBeaver. UX and UI Design for a Mac Application\"}]},{\"@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: SwiftyBeaver. UX and UI Design for a Mac Application","description":"Case study on UX and UI design. Detailed description of creating user interface for SwiftyBeaver, the logging platform for Apple\u2019s Swift programming language.","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\/swiftybeaver-ux-ui-design-for-mac-application\/","og_locale":"en_US","og_type":"article","og_title":"SwiftyBeaver. UX & UI Design for a Mac Application","og_description":"Fresh case study on UX and UI design process. Detailed description of creating user interface for SwiftyBeaver, a Mac application presenting the first integrated logging platform for Apple\u2019s Swift programming language.","og_url":"https:\/\/tubikstudio.com\/blog\/swiftybeaver-ux-ui-design-for-mac-application\/","og_site_name":"Tubik Blog: Articles About Design","article_published_time":"2016-05-12T11:06:19+00:00","article_modified_time":"2023-08-17T12:12:29+00:00","og_image":[{"width":1200,"height":900,"url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/05\/Tubik-Studio-UIUX-designer-case-study.jpg","type":"image\/jpeg"}],"author":"Marina Yalanska","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Marina Yalanska","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/tubikstudio.com\/blog\/swiftybeaver-ux-ui-design-for-mac-application\/","url":"https:\/\/tubikstudio.com\/blog\/swiftybeaver-ux-ui-design-for-mac-application\/","name":"Case Study: SwiftyBeaver. UX and UI Design for a Mac Application","isPartOf":{"@id":"https:\/\/tubikstudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/tubikstudio.com\/blog\/swiftybeaver-ux-ui-design-for-mac-application\/#primaryimage"},"image":{"@id":"https:\/\/tubikstudio.com\/blog\/swiftybeaver-ux-ui-design-for-mac-application\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/05\/Tubik-Studio-UIUX-designer-case-study.jpg","datePublished":"2016-05-12T11:06:19+00:00","dateModified":"2023-08-17T12:12:29+00:00","author":{"@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f"},"description":"Case study on UX and UI design. Detailed description of creating user interface for SwiftyBeaver, the logging platform for Apple\u2019s Swift programming language.","breadcrumb":{"@id":"https:\/\/tubikstudio.com\/blog\/swiftybeaver-ux-ui-design-for-mac-application\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tubikstudio.com\/blog\/swiftybeaver-ux-ui-design-for-mac-application\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/swiftybeaver-ux-ui-design-for-mac-application\/#primaryimage","url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/05\/Tubik-Studio-UIUX-designer-case-study.jpg","contentUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/05\/Tubik-Studio-UIUX-designer-case-study.jpg","width":1200,"height":900,"caption":"Tubik Studio UIUX designer case study"},{"@type":"BreadcrumbList","@id":"https:\/\/tubikstudio.com\/blog\/swiftybeaver-ux-ui-design-for-mac-application\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/tubikstudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Case Study: SwiftyBeaver. UX and UI Design for a Mac Application"}]},{"@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\/1569","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=1569"}],"version-history":[{"count":7,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/1569\/revisions"}],"predecessor-version":[{"id":14729,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/1569\/revisions\/14729"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media\/9479"}],"wp:attachment":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media?parent=1569"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/categories?post=1569"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/tags?post=1569"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/coauthors?post=1569"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}