Opera della Provvidenza S.Antonio, a non-profit foundation of religion which provides assistance to persons with disabilities
The Opera della Provvidenza S.Antonio di Padova (that we can translate as Work of Providence of St. Anthony of Padua, thereafter OPSA) is a non-profit foundation of Catholic religion in the diocese of Padua (in Italy) which provides assistance to persons with disabilities.
I am working as a freelancer for OPSA and I am helping them to build their new website.
What we need is template for our site, particularly the design of the homepage of our new site, which can be found online at http://www.operadellaprovvidenza.it (username / password = opsa / opsa). The online version of the site has been built from our own drafts, is fully functional, and corresponds to the final structure of the site.
You can read more information about OPSA on our development website (www.operadellaprovvidenza.it, username / password = opsa / opsa, in Italian) or in the attached PDF: "MoreAboutOPSA.pdf" translated in english.
Caritas cum fide - Christo in fratribus
(The charity combined with the faith: to serve Christ in others)
To give these children of God for various reasons, far from home, a home and a family again. To enable all those who come into contact with this reality to be present with their hearts, their generosity, their willingness, their prayers; as a concrete invitation of Christ the Lord to practice works of mercy that one day we will open the gates of heaven.
• People seeking information about services offered from the OPSA for their loved ones with disabilities.
• All volunteers who are serving or who wish to serve in the OPSA.
• People who want to come to visit the OPSA and then seek further information.
• People wishing to give their contribution to the work of Providence St. Anthony with their donations.
• Doctors and professionals seeking information on training courses.
Considering our main target audience, the message that the website has to transmit must be oriented toward the individual, the person. The visitor should perceive the OPSA firstly as a big family, a community, where guests (as they are called the people who find hospitality in the OPSA, we never use the word patient) should have the impression of being at home.
It is the human relationship, the affection, the liveliness and the vitality of the community that the visitor should be able to perceive.
Therefore we don't want a corporal or institutional website, unfriendly or cold-hearted, but a website full of life that delivers firstly human warmth and affection.
We mainly need a template for our site. Particularly we only need the design of the homepage, but you must design the navigation menu based on full site navigation (so an example of the expanded/opened navigation menu would be appreciated). Please consider the fact that our website should be fully accessible.
All buttons and links should have a rollover effects, so in your design you should include a hovered version of the icon or link, and a visited version of links.
Linked titles should have different color or graphics from non linked one's.
We would like a website of soft warm pastel colors . Font colors must be dark text on light background (so please no designs with dark backgrounds).
The logo to be used is the one currently on the site, and available as logo.pdf attached to this brief. The logo preferred color is red as you can see in "color_mosaic.jpg", but you are free to experiment.
We would like to use a photo or a stylized sketch of OPSA church positioned on top of our site, above top menu, to the right (see "homepage_mokup.pdf" for a sketch of this idea, and our_church_01 and our_church_02 for two photos of our church). Please note: this is only a possible idea, it's not mandatory, and if you think that there is no good way to put a church in that position, forget about it, we will not penalize your design for not using the church. Thanks
WHAT WE NEED
Preferably a photoshop PSD file with open layers (but we can accept other formats as PNGs if you don't use Photoshop)
If you need an extra image for your design (ie for background), you can search http://www.istockphoto.com, since we have an account with them.
You can build your design using the actual homepage as your mockup (or using homepage_mockup.pdf).
Browse http://www.operadellaprovvidenza.it using opsa / opsa as username and password to get an idea of how the navigation menu works.
The top menu is built on 4 levels. Since the second level of the navigation menu is not always visible (eg it is not shown on the homepage, but instead is present in most of the inside pages), you should try to design the graphics for the menu to be "compatible" with this feature.
In the attached document (top_menu_overview.pdf) you can find some menu designs that we like.
The site's structure has been build using the 960s grid system (more info at http://www.960.gs). We have used a 16 columns grid system, with 40 px wide columns and 20px gutters. See 960s_grid.png (attached here) for a grid overview.
IMPORTANT: you should try to use the graphic design to hide the grid on which layout is based, not to highlight it. We should be aware of the existence of the grid only if we observe carefully the structure of the site, as we can see in many of the sites shown on http://www.960.gs. Try to avoid the use of sharp rectangles to define areas of the page or contents of the page, since rectangles seem to strengthen the grid not to loose it. And I want to loose it.
To further clarify what I mean when I say "try to loose the grid", I think that this article of Smashing Magazine could help:
If you think you have a particularly good or original idea, and you feel the actual grid too limiting for your creativity, we might consider the idea of making some changes to the grid or to the structure of the page itself, but try to maintain the relative importance of the different sections and/or contents.
http://www.operadellaprovvidenza.it using opsa / opsa as username and password
This is the full working development version of the final site, build on our mokups.
The OPSA website should not be an institutional website. Try to build something with a style more similar to http://www.centromissionario.diocesipadova.it (informal) than http://www.diocesipadova.it (institutional and formal).
In this page you can find a website template with colors that we like: http://www.templatemonster.com/webs…tml?tab=40
What we like: soft relaxing colors
What we don’t like: flash animations
Another interesting template: http://osc.template-help.com/wt_23851/index.html
What we like: the conceptual idea of the background (the tree and the sky); we would like to see something like that, but using the OPSA church instead of the tree (it's only a possible idea, but it's not mandatory and if you think that there is no good way to put a church in that position, forget about it).
What we don’t like: colors (too cold), typography and animations (we don't care).
http://www.joniandfriends.org, a site we like for style, the attention to details and the typography, but we will tend to prefer something more colorful.