category: wireflow, mockup, motion system, web, front end, back end, front office, back office, cms
date:
→
Status:to be upgraded
Time goes by, meanwhile this project has leveled up. Gotta renew the content
Photo Reportage Portfolio
Lucia Coccaro is a professional photographer active between Italy and South Africa.
Lucia needed to collect a selected group of photo reportages performed in the period between 2010 and 2016, all showing it through a simple, intuitive and innovative interface. The design began in 2010 and to follow in the following until 2016, the website has been revised and kept in step with emerging technologies. In the early years, the design also included the adoption of a dedicated CMS from scratch, while in 2016 a file-based ready made CMS was adopted. Developed a custom CMS in order to provide my sister, Lucia Vera, with the possibility to handle her personal albums and pictures. The result is displayed into an emotional and animated and responsive interface I designed. You can play with it! It's more than just a bunch of photos online. I'd say an emotional wall though. Great photos need great Design :)
Wireframing
The design of the website began with a preliminary analysis such as to be able to determine with Lucia the navigation needs of her massive photographic portfolio. The principle was to encourage and thus engage users to explore the content thanks to a clear and fast experience. In this phase the foundations were also laid for a usability of the structure from a mobile point of view
Wirefame
Wirefame
Wirefame
User Interface Design
The Ui iteration followed a minimal line in order not to create visual conflict with the photos, the real stars of the website. In this sense, the layout did not interfere with the multiplicity of photos and their colors. The background was meant to change hue in a continuous cycle
mockup
mockup
mockup
mockup
mockup
mockup
Screenshoot
Screenshoot
Screenshoot
Screenshoot
Screenshoot
Screenshoot
Screenshoot
Screenshoot
Screenshoot
Screenshoot
Screenshoot
Screenshoot
Screenshoot
Screenshoot
Screenshoot
Screenshoot
Front End Development
The first version of the portfolio was thus immediately designed with a view to usability on all devices on the market of those years, including smartphones and tablets. Several innovative coding techniques were employed to make this possible, at a time when mobile was just emerging and responsive was not conceived yet. For example, runtime image editing functions such as resizing and cropping were applied
In 2011 Lucia asked to manage the contents through a dedicated administration panel (Content Management System). The CMS was thus designed from scratch in harmony with the main need to manage the photographic collections and upload the photos within them. Therefore during the development phase I have been involved in creating and managing a set of relational tables in the perimeter of a database
Coding
Coding
Coding
Coding
Coding
User Interface Design
Around 2013, the interface was revisited for improvements and thus facilitating a better usability, for example the menu and the photo gallery. Overall, the layout continued on the same style guide, a wall of photos that can be navigated real time, together or by sections
On the occasion of the restyling, the new LVC brand was also created and designed to mean the acronym Lucia Vera Coccaro. 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
Screenshoot
Screenshoot
Screenshoot
Screenshoot
Screenshoot
Screenshoot
Front End Development
The review of the Design was an opportunity to also review the coding, to obtain a result that can be used either on large screens such as the desktop and smaller screens such as smartphones and tablets. For example, improvements have been introduced in the format of the gallery in mobile optics and the lazy load technique to prevent lag of internet data usage. In fact, the adoption of Motion Design has been a useful feature to strengthen the interaction of the website. The background, on the other hand, has been manipulated in such a way as to change light tones during the day and dark tones during the night.
As the time passed by, the administration panel was changed to a file-based CMS ready for customization
Coding
Coding
User Interface Design
The next version included minimal editing of the interface. With the new requirements in mind, the usability of the portfolio was improved by changing the menu. In fact, it appeared that the greatest user experience came from mobile devices; in this sense, users were facilitated to navigate from their smartphones and tablets. Over the years Lucia's photos grew exponentially; in this sense, the photo wall had to be revised to be synthesized in the 1: 1 ratio, where each photo was positioned under a specific colletcion
Screenshoot
Screenshoot
Screenshoot
Screenshoot
Screenshoot
Screenshoot
Screenshoot
Screenshoot
Screenshoot
Screenshoot
Screenshoot
Screenshoot
Screenshoot
Screenshoot
Screenshoot
Screenshoot
Screenshoot
Screenshoot
Screenshoot
Front End Development
The code production edited various parts of the interface to improve the interactive experience, such as modifying the gerarchica density of the photo collections and the new format of the photo gallery. Responsive and adaptability techniques were also perfected to make the site navigable from smaller devices such as new smartphones, up to larger ones such as the desktop.
Lucia needed to manage her photographic contents, including collections and textual information, through a dedicated administration panel (Content Management System). Thus a new file-based CMS was adopted
