Time goes by, meanwhile this project has leveled up. Gotta renew the content
Official Website
cantAbruzzo is a choral association born at the gates of the new millennium with director Rosella Pezzuti, daughter of the composer Tiero Pezzuti.
The goal was to design the official website aimed at the public, the contents of which would then be managed thanks to the design from scratch of a dedicated administration panel (Content Management System). The site has seen several visual style changes over the years, from 2006 to 2014, to highlight the strengths of the choral group, as well as the memory of the composer Tiero Pezzuti. Built layouts and asset in order to develop a new and modern user interface along with the new rules expected in the new front-end era interaction system. Next, built a fully custom back-end system (CMS) in order to let the owners and all the members of the cantAbruzzo manipulate any kind of document they need such as audio files, video, photos, pdf, calendar events and up-to-dated news.
I have dedicated an article to the composer Tiero Pezzuti in the blog section
User Interface Design
The layout setting was a central fixed monolithic. In those years, the technology was in fact usable only by desktop computers and there was no need to have a layout that suited the needs of any mobile form
Front Office
Front Office
Front Office
Front End Development
The first version of the site was born during the first internet age. It is in fact possible to notice how the style fully reflects the guidelines of the CSS Zen Garden with particular decorations in the header and at the footer.
Check out the version I've done so far back in 2006
Screenshoot
Script
Script
User Interface Design
The second version of the site evolved along with the technology. For example, the horizontal navigation was inspired by the new WindowsPhone 7 version with the sliding panorama principle. In this sense, the canvas was designed with the notes made by the composer Tiero Pezzuti and this way making a strong reference to the theme of music.
The drawing technique involved the subdivision of the image into as many images that could be exported and reassembled in the Front End
Front Office
Front Office
Front Office
Front End Development
The result of the User Interface processing was conveyed to the Front End development phase. The study and experimentation, in the transition between Design and Develop, was important to give life to the new version of the cantAbruzzo website. A similar interaction was positioned between the innovative interfaces within the web
Check out the older version I've done so far heading to 2011
Screenshoot
Script
Script
Script
Script
Script
Script
Motion Design
Animations in those years were still an experimental aspect for both the web and native applications, due to the hardware that was not only unable to handle the image code combination, but also to the language that for the first time faced this new concpets. In any case, the choreography conceived for cantAbruzzo was innovative in the sense that some of these animations were then studied and exhibited later in the next years in guidelines such as that of Google's Material Design.
Back End Development
In 2011 the choral association needed to manage the contents through a dedicated administration panel (Content Management System). The CMS was thus designed from scratch in line with the needs of sharing dates for rehearsals, scores, information, news and events. Therefore during the development phase I have been involved in creating and managing a set of relational tables in the perimeter of a database
Script
Script
Script
Script
Script
Script
Back Office
User Interface Design
The year 2014 marked another turning point for the cantAbruzzo site which saw a new Interface Design according to the latest smartphone and tablet devices. In fact, the layout changed its structure to provide the user with the possibility to browse the content at any time, at home or on the go.
On the occasion of the restyling, the new cantAbruzzo brand was also created and designed with the visual accent on the "A" of Abruzzo. The study involved a preliminary analysis with the choral association and then the test for its reproducibility in the different web and mobile devices.
Trademark
Front Office
Front Office
Front Office
Front End Development
In the transition from Design to Front End, responsive and adaptability techniques were applied to make the site navigable from smaller devices such as new smartphones, up to larger ones such as the desktop.
The scope of the CMS administration panel was to renew and streamline and to give both administrators and choristers the ability to browse, explore, download all the content they needed. Based on the type of profile, the CMS profiled the landing screen. Once logged in, it was possible to modify the content according to privileges
