{"id":15437,"date":"2021-01-28T11:06:17","date_gmt":"2021-01-28T11:06:17","guid":{"rendered":"https:\/\/e.foundation\/?p=15437"},"modified":"2021-01-28T11:09:44","modified_gmt":"2021-01-28T11:09:44","slug":"on-the-blog-e-os-user-interface-is-evolving-with-a-new-streamlined-visual-identity","status":"publish","type":"post","link":"https:\/\/e.foundation\/es\/on-the-blog-e-os-user-interface-is-evolving-with-a-new-streamlined-visual-identity\/","title":{"rendered":"On the blog: \/e\/OS\u2019 user interface is evolving with a new, streamlined, visual identity"},"content":{"rendered":"
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

On the blog: \/e\/OS\u2019 user interface is evolving with a new, streamlined, visual identity<\/strong><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

As you know, the open source mobile operating system \/e\/OS is a fork of the Android Open Source Project, and several open source applications, such as our default apps Etar<\/a> (calendar), OpenTasks<\/a>, y QKSMS<\/a> (SMS) to name a few.<\/p>

We are overall very satisfied with the functionalities of these software applications, and their contribution to \/e\/OS. We\u2019d like to take this opportunity to thank the developers and contributors to these projects!<\/p>

However, the diverse origins of these bricks, which were not designed according to common graphical user interface standards, very often result in a lack of homogeneity between apps and their interfaces, which tends to affect the user experience.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Our needs<\/span><\/strong><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

We believe it is important for \/e\/OS to have a consistent visual identity and the best possible user experience for all.<\/p>

We have therefore the goal of simplifying and streamlining the OS experience as much as possible by unifying the interfaces of our various applications, in order to create a more coherent and harmonious user experience.<\/p>

We\u2019d also like to continue adding interesting features such as dark-mode or setting themes in the long run.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

How we went about it<\/span><\/strong><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

As a first step in this direction, we have been working for more than a year on graphics, icons, colours and styles, in order to achieve a global and unified vision of our applications.<\/p>

The resulting mock-ups have been the basis of the visual improvements we are making with this new update.<\/p>

There has also been in-depth technical work to unify components such as
colours and icons used throughout the OS and thus avoid duplication.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Implementation<\/span><\/strong><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

The new features in this update are the result of an iterative development over several months, enriching and improving the project along the way. It was built around three key moments.<\/p>

A first experimental version was delivered in October with the aim of gaining a better understanding of how each application at play works and exploring the technical solutions that could be implemented to unify our interfaces.<\/p>

This version also constituted the first draft of the new graphic interface with the introduction of our accent colour that will be the basis of the new visual identity.<\/p>

The second development version dates from the beginning of December. It has enabled us to make great progress on the visuals of our interfaces with the definition and implementation of the colours chosen for the \/e\/OS identity.<\/p>

The third version from the end of December integrated a new set of icons in order to harmonise the whole OS in this respect.<\/p>

Since then, we are still hard at work on this long-term project, in order to keep on improving the experience on the OS.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Encountered difficulties<\/span><\/strong><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

In spite of the complexity of the project, our organisation and our internal communication processes at the development team level enabled us to work through these issues one after an other.<\/p>

We had the opportunity to use GitLab\u2019s Design Management functionality<\/a> in order to exchange easily on the implementations.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

This functionality allows mock-ups and design assets to be uploaded directly into GitLab issues, stored and accessed in one centralized location, which has simplified collaboration between the design team and the engineers developing the interface.<\/p>

The test phase also has its own constraints, including the time-consuming aspects of developing, compiling, downloading and installing the code.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

End results<\/span><\/strong><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

We are proud to present the results of this work and hope that it will ensure an improved experience on \/e\/OS.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\"Screenshots
Screenshots of the new UI -Contacts and Dialer<\/figcaption><\/figure><\/div>
\"Screenshots
Screenshots of the new UI - Calendar and Notes<\/figcaption><\/figure><\/div>
\"Screenshots
Screenshots of the new UI \u2014 File management and Music<\/figcaption><\/figure><\/div>\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t<\/i>\t\t\t\t\t<\/div>\n\t\t\t\t\t
\n\t\t\t\t\t\t<\/i>\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t
<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

This update is part of an ongoing visual overhaul project and there are still some points that we would like to unify and integrate in the coming months, such as the email application and integrating a dark mode.<\/p>

We would like to thank the whole team who contributed to this first chapter of the project, and in particular Mahbub, Amit, Narinder and Mohit.<\/p>

The updated user interface will be available on \/e\/ Pie and Q from v0.14.<\/p>

Read more about what\u2019s new in v0.14 in our release note<\/a>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Follow us on social media<\/span><\/strong><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\tTwitter<\/span>\n\t\t\t\t\t\t<\/i>\t\t\t\t\t<\/a>\n\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\tMastodon<\/span>\n\t\t\t\t\t\t<\/i>\t\t\t\t\t<\/a>\n\t\t\t\t<\/span>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"

On the blog: \/e\/OS\u2019 user interface is evolving with a new, streamlined, visual identity As…<\/p>","protected":false},"author":76,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"none","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","footnotes":""},"categories":[61],"tags":[],"class_list":["post-15437","post","type-post","status-publish","format-standard","hentry","category-blog","wpbf-post"],"_links":{"self":[{"href":"https:\/\/e.foundation\/es\/wp-json\/wp\/v2\/posts\/15437","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/e.foundation\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/e.foundation\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/e.foundation\/es\/wp-json\/wp\/v2\/users\/76"}],"replies":[{"embeddable":true,"href":"https:\/\/e.foundation\/es\/wp-json\/wp\/v2\/comments?post=15437"}],"version-history":[{"count":5,"href":"https:\/\/e.foundation\/es\/wp-json\/wp\/v2\/posts\/15437\/revisions"}],"predecessor-version":[{"id":15450,"href":"https:\/\/e.foundation\/es\/wp-json\/wp\/v2\/posts\/15437\/revisions\/15450"}],"wp:attachment":[{"href":"https:\/\/e.foundation\/es\/wp-json\/wp\/v2\/media?parent=15437"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/e.foundation\/es\/wp-json\/wp\/v2\/categories?post=15437"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/e.foundation\/es\/wp-json\/wp\/v2\/tags?post=15437"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}