Newzik Web App
2020 – 2022


Newzik Web est une application en ligne qui permet d'importer et gérer sa bibliothèque de partitions numériques. La bibliothèque est synchronisée en temps réel avec le cloud Newzik, et disponible sur n'importe quel appareil, depuis le web et sur l'application iOS Newzik.

Depuis Newzik Web, il est possible d'organiser ses partitions (en y attachant des tags, en regroupant par setlists ses morceaux, etc.), de les visualiser, de les annoter, ainsi que d'y ajouter des fichiers média (audio, MIDI, vidéo) et de s'enregistrer.

Partant d'une page blanche, j'ai pu concevoir Newzik Web jusqu'aux maquettes finales en m'affranchissant de l'historique de l'application iOS existante. Cela m'a permis de proposer une expérience d'utilisation cohérente et moderne, parfaitement adaptée aux appareils desktop, tout en laissant la possibilité de faire évoluer l'app vers des formats tablette et mobile à l'avenir.

Newzik Web is an online application that allows you to import and manage your digital sheet music library. The library is synchronized in real time with the Newzik cloud, and available on any device, from the web and on the Newzik iOS application.

From Newzik Web, it is possible to organise one's scores (by attaching tags, grouping one's pieces by setlists, etc.), to view them, to annotate them, as well as to add media files (audio, MIDI, video) and to record oneself.

Starting from a blank page, I was able to design Newzik Web to the final mock-ups without the constraints of the existing iOS app. This allowed me to deliver a consistent and modern user experience, perfectly tailored to desktop devices, while leaving the possibility to evolve the app towards tablet and mobile formats in the future.



Vue d'un projet
Project view



Structure

Lors du portage de Newzik vers le web depuis iOS, le défi consistait à conserver l'expérience à laquelle étaient habitués nos utilisateurs, tout en adaptant l'interface au web et à ses particularités. L'interaction reste tactile, mais s'enrichit de l'expérience à la souris du format desktop. Cela impose d'avoir des composants parfaitement dimensionnés pour convenir à la fois aux dispositifs de pointage et tactiles.

Pour ce faire, j'ai proposé une structure en trois zones distinctes, suivant une lecture de gauche à droite, qui met le contenu au centre. Cette organisation de l'interface permet en outre d'envisager plus facilement des variantes mobile et tablette à l'avenir, en permettant de masquer la navigation et l'inspecteur. Les divers éléments de UI ont une taille généreuse, qui facilite l'interaction tactile ainsi que la lecture de l'interface.

When porting Newzik to the web from iOS, the challenge was to maintain the experience our users were used to, while adapting the interface to the web and its particularities. The interaction remains tactile, but is enriched by the mouse experience of the desktop format. This requires components that are perfectly sized to suit both pointing and touch devices.

To achieve this, I proposed a three-zone structure, reading from left to right, which puts the content at the centre. This organisation of the interface also makes it easier to consider mobile and tablet variants in the future, by allowing the navigation and inspector to be hidden. The various UI elements are generously sized, making it easier to interact with and read the interface.


Structure des pages
Page layout


Les vues modales (demandes de confirmation d'une action de l'utilisateur, tâche synchrone, etc.) reposent sur la même structure, en investissant un panneau latéral élargi, ce qui permet de rester en cohérence avec le sens de lecture défini en amont.

The modal views (requests for confirmation of a user action, synchronous task, etc.) are based on the same structure, taking up an enlarged side panel, which makes it possible to remain consistent with the reading direction defined upstream.



Vues modales
Modal views



Usage

En tirant parti d'écrans plus larges et de l'usage de la souris, Newzik Web se place comme un complément naturel de l'app iOS, tout en étant autonome. Ainsi, la web app est particulièrement performante pour la gestion de bibliothèque et les actions par lot. De plus, c'est le seul produit de l'écosystème Newzik capable de gérer l'administration de multiple comptes (via les organisations, qui sont dédiées aux grandes structures comme les orchestres et les écoles de musique).

By taking advantage of larger screens and the use of the mouse, Newzik Web is a natural complement to the iOS app, while being autonomous. Thus, the web app is particularly efficient for library management and batch actions. Moreover, it is the only product in the Newzik ecosystem capable of managing multiple accounts (via organisations, which are dedicated to large structures like orchestras and music schools).



Actions par lot
Batch actions




Organisations (pour ensembles et éducation)
Organizations (for ensembles and education)



Couleurs

Newzik Web s'appuie sur la palette définie dans la charte Newzik. La couleur d'accentuation est le prune (thème clair) / navet (thème sombre), qui font partie de la gamme complémentaire à l'orange Newzik. Cela permet de donner une personnalité propre à Newzik web, tout en améliorant l'accessibilité par rapport à l'orange. Le reste de la palette est doux, avec une variété de tons pastels. Le but est, à nouveau, d'accentuer le contraste et la lisibilité du contenu tout en structurant l'interface avec la couleur d'accentuation (éléments actifs, boutons, etc.) Enfin, les éléments fonctionnels sont signifiés par un code couleur conventionnel : rouge pour les erreurs et actions destructives, ambre pour les avertissements, bleu pour les informations et vert pour les validations.


Newzik Web is based on the palette defined in the Newzik charter. The accent colour is plum (light theme) / turnip (dark theme), which are part of the complementary range to Newzik orange. This gives Newzik web its own personality, while improving accessibility compared to orange. The rest of the palette is soft, with a variety of pastel tones. The aim is, once again, to accentuate the contrast and readability of the content while structuring the interface with the accent colour (active elements, buttons, etc.) Finally, the functional elements are signified by a conventional colour code: red for errors and destructive actions, amber for warnings, blue for information and green for validations.


   

Mode clair / Mode sombre
Light mode / Dark mode




Invitation à souscrire à l'offre Newzik Ensemble à la fin de la période d'essai
Invitation to subscribe to the Newzik Ensemble offer at the end of the trial period



Design system

J'ai créé pour Newzik Web un design system complet fort de plus de 2000 composants, qui s'articule avec les autres design system des produits Newzik.

I created a complete design system for Newzik Web with more than 2000 components, which is linked to the other design systems of Newzik products.



Architecture du design system Newzik
Newzik design system architecture




Fichier Sketch de la Newzik Web Library
Newzik Web Library Sketch file



Complexité

Le principal défi que j'ai eu à relever en concevant Newzik Web était de proposer une expérience structurée et cohérente, avec une courbe d'apprentissage maîtrisée, pour un produit complexe dont les fonctionnalités n'ont cessé de s'étoffer au fil du temps. De plus, la taille relativement grande des éléments d'interface — pour assurer la compatibilité tactile — contraignait fortement l'espace disponible à l'écran. Pour surmonter ces difficultés, je me suis efforcé, dans la mesure du possible, de contextualiser les actions de l'utilisateur — plutôt que d'avoir des barres d'outils accessibles en permanence par exemple — et j'ai apporté un soin particulier à la hiérarchisation de l'information, notamment au moyen de la couleur et des styles de texte. j'ai aussi recouru à des onglets, des séparateurs et des conteneurs chaque fois que cela s'avérait nécessaire.

The main challenge I faced in designing Newzik Web was to provide a structured and consistent experience, with a controlled learning curve, for a complex product whose functionality has been growing over time. In addition, the relatively large size of the interface elements—to ensure touch compatibility—severely constrained the available screen space. To overcome these difficulties, I tried, wherever possible, to contextualise the user's actions—rather than having permanently accessible toolbars, for example—and I took particular care to prioritise information, using colour and text styles. I also used tabs, dividers and containers wherever necessary.



Lecteur / enregistreur multipistes
Multitrack player / recorder




Partition avec LiveScore
Score with LiveScore




Annotation
Annotation




Newzik Web App
Published:

Owner

Newzik Web App

Newzik Web is an online application that allows you to import and manage your digital sheet music library. The library is synchronized in real ti Read More

Published: