UX + UI Design

Site Bem na Foto

"Site Bem na Foto" is a web portal focused on the publication of event photography.

(This project is from 2008, so due to the technological decontextualization, these descriptions emphasizes more the User Experience conceptual aspects than the technical and aesthetic solutions for the Interface development. It is important to consider that at that time, iPhone with toutchscreen were just released, tablets were a fiction, the average screen of most computers had resolution much lower than today, working with just over 1024 pixels wide, which made the interfaces quite compact compared to today. The .PNG format for responsive layouts were also being gested, so icons with pixelated art in gif format were still considered super cool. Really.)

This UX and UI design project is subdivided in two modules: the frontend website called "Portal Bem na Foto" and the backend administrator called "Virtual Core".

Module 1) For the "Portal Bem na Foto", the project of User Experience privileged the visualization of the photographs in the layouts of the interfaces, making the images the main visual reference of the content sought by the average users of the site: young people and adults attending nightly events.

The dark gray of the background recalls the night scene as well as help highlight the predominantly artificial color and illumination of the photos.

In addition to the different size proportionality for each content type on the screen, gold-colored titles also helps to organize the hierarchy of information in a consistent way with the logo colors.

These principles, developed for the UX and UI projects, were applied to all pages of the portal.

Module 2) The concept of "Virtual Core" consists of transferring the greatest possible number of documents (bureaucratic and corporate instruments) from the material world to the virtual environment.

The average user profile of the "Virtual Core" is the Photographer, followed by another crew members of the office, so the "skeuomorphism" was considered for the "Virtual Core" interfaces in order to provide a more didatic transition and experience for its users.

Thus, the "Virtual Core" homepage layout is composed over a figurative illustration of the office itself, where each office area has a link that gives access to a specific page with the content of each department. When activated, the links are flagged with balloons, which have been assigned specific colors in each department.

To avoid the need of the user return to the homepage before visit another department, in the internal screens that display the contents of each department, a menu is accessible at the top of the screen, organized by tabs with colors corresponding to each department.

The content of each department is listed in linear order, according to their hierarchy of importance by frequency of access.

UX and UI Design by Eduardo Galvani ©2008.


Homepage Portal Bem na Foto:

Photo visualization Portal Bem na Foto:

Homepage "Virtual Core":

Homepage "Virtual Core" (Actived Links):

Internal page example "Virtual Core":