Cetaqua

It's been a long time and I stop working on this material.

InfoCert S.p.A. is the largest Certification Authority and Qualified Trust Service Provider (QTSP) in Europe and responds to the digital evolution needs of companies and public bodies with end-to-end solutions.

With a view to digital transformation, a proposal for a brand, logo and iconographic system was prepared for use in the Cetaqua web and app application project in the context of digital identity. Cetaqua was an iCloud proposal offered to Infocert to manage the identity of Italian citizens through the creation of an administrative portal (content Management System, responsive web side) in conjunction with the native mobile app on the Android platform.

This trademark has been applied to Cetaqua project web and mobile app (e.g.: in the form of a a geeky loader spinner)

Icon design is ignored sometimes when creating a website and mobile app layout. The simplest method to catch the interest of your visitors is by creating a good user experience through attractive icons. An icon is a small, but critically important detail that defines the aesthetic look of the whole website design. Here, I conceived and produced 178 file-type and 56 folder-type icon set, with a clever scale-down effect (applied to Cetaqua project web and mobile app)

For instance, one of the usual items we see in computers are folder icons where files are kept and saved. These icons, though small and seem irrelevant, plays an important role for computer-users everywhere. It organize our files to make them more easier to navigate and to identify. Most folder icons are presented in a plain yellow-colored folder images with. Recently, with the progress of technology and creativity, folder icons have also been innovated to make them more interesting and more detailed.

Not only for computers, icons also have a very important role online. For your websites and blogs, be sure to check out these high quality icons that can help give a boost to your site’s aesthetic design and navigation. Here, 56 useful folder and 178 file type icon set showcases several icons that you can download right into your desktop and apply them to your existing folders. Come and check out these flat and cute icons that will surely please your everyday design usage… Enjoy!

Illustration

On the occasion of the Ui Design design of a Cetaqua web and app application concept, a series of icons in the form of folders and files were conceived and worked, each customized for different use. This iconographic system is derived and based on the customer's Brand Identity previously developed

Canvas
Canvas
Above, some of the file-type icons preview
Above, some of the folder-type icons preview

Easy Export

Hell yeah, if you're moving from CS6 to CC, you'll find the new Adobe solution as your savior of all time. In fact, this PSD is provided with a default export string at the top of all layers in order to generate every folder-type icon into whatsoever format and resolution ... right away. OH, just for the record, icons were built as full Shape Layer. What a shame! Also the Photoshop Generator feature used to offer great flexibility in the ways you can rename layers/layer groups to specify size and quality parameters link:http://blogs.adobe.com/samartha/2013/09/a-closer-look-at-the-photoshop-generator-syntax.html

Script
Script

Pixel Perfect Grid

Offers a clever scale-down effect. Yes indeed, low limit resize is stuck at 48 pixel and still icons will make a great impression on your user interface wherever you'll apply them. Size elements, at least 48px high and wide, ensure a physical size of about 9mm regardless of screen size. The recommended target size for touchscreen objects is 7-10mm. To ensure balanced information density and usability, touch targets should be at least 48 x 48 px. Even the grid is full Shape Layer to ensure scalability as well

Canvas
Canvas

Sync Status

Last but not least, in case you might be working on a cloud design project, the bottom-right icon let users know what's the file status. Grid mentioned above makes this possible. Make it clear, what's your file status? Inactive, offline or syncing? Sounds great for cloud projects

Illustration
Illustration

Style Guide

Thanks to the setting up of a design library, it was possible to manage the primary attributes of the countless icons based on Cetaqua's Brand Identity. The crafting included an experimental collaboration between Photoshop and Excel to organize the icons by name in order to deliver to the development team

Styleguide
Styleguide
Styleguide
Styleguide
Styleguide
Styleguide
Styleguide
Styleguide
Styleguide
Styleguide
Styleguide

I conceived and created the Brand Identity Guidelines design based upon my new Information Architecture which shows every single and detailed artwork aspect in several tables.

Style Guide

Documentation has been adopted that summarizes the design reasons in detail. In fact, it is possible to deduce from a series of pages the design path that led the Cetaqua brand to take the form presented here. The Brand Style Guide document shows the reasoning carried out, passing through the color system adopted, the typographic scale, the payoff, the contrasting variations and guidelines for use. With regard to the latter, an iconographic system customized for the purpose was developed

Styleguide
Styleguide
Styleguide
Styleguide
Styleguide

Illustration

The production of the brand and logotype have been designed to be reproduced on different scales, for example from the icon of a browser shortcut link to the printed poster.

Canvas
Illustration
Illustration
Illustration
Illustration

Motion Fxs

App Loader

During the implementation of the Cetaqua prototype and on the basis of my experience in effects, the Cetaqua brand was animated perspective and thus anticipating concepts of components choreography better known later in the following years (such as with Material Design)

Canvas