overview:
For a project, I was required to develop a dynamic, database driven web site. I could either develop a site that sells a product or a web based “application” that solves some sort of problem or provides some sort of service. I chose to build a web based application called Local Prayer Wall, an online prayer wall for a local church, or in this case, my own church.
minimum requirements:
- Build a site that solves a problem or provides a service to a user.
- Design a site using XHTML and CSS
- Use PHP and MySQL for the back end with JavaScript/AJAX sprinkled in as needed
purpose:
To serve a local church community by offering an online prayer wall for current and future church members to post prayers online for the entire church to see and pray for. Members will have their prayers seen by every church member, not just ones they personally know.
audience:
As of right now, more than likely my audience would be mostly late teens to early thirties since this generation is more tech savvy. However, I'm sure older generations would try to use the prayer wall as much as they can due to the website's concept, especially with my Pastor being the perfect social media sales man. He knows networking online as well as in person gets God's message across.
vision:
Maintain a prayer wall for a local church community instead of a nation wide prayer wall because it's more comforting to some church members to know who's praying for them and help inspire a closer fellowship with Christians who attend the same church as them.
features:
- Search engine optimization for exposure
- PHP and MySQL for the database backend
- Sortable prayers posted by topic
- Intergrate social media through a Share API
- AJAX, javascript and database for the “Praying for you” feature
goal 1:
Build an online community through present and future members.
- Current members from church will first help build the community
- Use of social media will help add more members
- Share posted prayers through social media by using a Share API from sharethis.com
goal 2:
Retain at least 10% of visitors who visit the site.
- Users will not be able to post any prayers until signed up
- Assure users who would like to remain anonymous they still can be after signing up
- Build a visually appealing website to keep users engaged rather than have them turn away at first glance
goal 3:
Keep exterior, what users see, of the site easy while the interior, PHP, AJAX, and Javascript, does all the work.
- Captcha will verify if human on every form
- AJAX, Javascript, PHP and MySQL will run the “Praying for You” feature on each posted prayer
- When a user changes the topic of what prayers to sort through, AJAX, Javascript, PHP, and MySQL will do that for them
goal 4:
Keeping the site clean, have moderators for comments and prayers.
- Have Captcha on every form to verify if human
- Flagging system for when users find something inappropriate
- CMS will help admin maintain all inapproptiate content
thumbnail 1:
I started out with a simple layout. Everything is fixed and global navigation is at the top right. Sub-nav would be to the left of the main content area.
thumbnail 2:
Here I sort of went the opposite of fixed; made everything seem like it's floating to give this clean and simple feeling.
thumbnail 3:
I tried a little something different by positioning the sub-nav to the right.
user flowchart:
This is the main flowchart, how users will navigate through the website when they are logged in or not.
color comp 1:
Due to my audience, I started out by keeping the colors clean and simple; not too much blue. But it felt like it was missing something.color comp 2:
So with this one I added a small header in between the main content and the main header for the breadcrumbs and made it the complete opposite as the first color comp. In the end, the actual design is a combination of both of these color comps.
home page:
description:
This is the main page for the site. This page will give the user a general idea of what the site is about.
navigation:
The global navigation and sidebar prayer topics will be in the same location on every page. Users can click on each prayer title to view the full prayer.
interactive components:
Users can click on the Praying for You counter, flag a prayer if it’s inappropriate and share each prayer with other users through social networking and/or email with the Share API.
text descriptions:
A log in form will be always be in the top left of the sidebar area until a user logs in. Then a their username, church, and a short biography of themselves will take its place. Prayer topics will be at the bottom of the sidebar allowing users to sort through prayers throughout the website. Each posted prayer will have a blue header with date it was posted on to the left of each prayer title.
graphic description:
The global navigation has its own gradient backgrounds made to look like tabs created through Adobe Photoshop. Topics have similar backgrounds but instead of tabs they look like rectangles with rounded corners. Search bar has simple background color and a magnifying glass as the search button. Little red flags will be to at the bottom right corner of each prayer for users to flag for the web master if the prayer is inappropriate.
sign up page:
description:
This is the sign up page. Where users have to register before they can actually post any prayers.
navigation:
The global navigation and sidebar prayer topics will be in the same location on every page.
interactive components:
The actual sign up form will not move foward until it knows every input field is filled out correctly. A Captcha will be in place below the form to verify it’s a human signing up.
text descriptions:
A log in form will be always be in the top left of the sidebar area until a user logs in. Then a their username, church, and a short biography of themselves will take its place. Prayer topics will be at the bottom of the sidebar allowing users to sort through prayers throughout the website. A 'Sign Up' blue header in the content area will let the user know where they are.
graphic description:
The global navigation has its own gradient backgrounds made to look like tabs created through Adobe Photoshop. Topics have similar backgrounds but instead of tabs they look like rectangles with rounded corners. Search bar has simple background color and a magnifying glass as the search button.
individual prayer page:
description:
This specific prayer page is when the user clicks on a prayer to comment on or share through social networking, email, etc.
navigation:
Same navigation. An additional bread crumb to further help the user to not get lost will be at the top left just below the logo.
interactive components:
Plenty of things to do here for the user. They can send comments, click on the Praying for You counter, flag the prayer if it’s inappropriate and share with other users through social networking and/or email.
text descriptions:
If a user is logged in, their short biography will be to the left in the sidebar area. If they are not, a log in form will be instead. Prayer topic will be at the bottom of the sidebar allowing users to sort through prayers. Users can read the full prayer through this page. If there are any comments they will be posted below the prayer description. The bread crumb above the actual prayer post will let the user know where and how they got there. If they want to go back to the home page, they can just click on the logo.
graphic description:
The global navigation has its own gradient backgrounds made to look like tabs created through Adobe Photoshop. Topics have similar backgrounds but instead of tabs they look like rectangles with rounded corners. Search bar has simple background color and a magnifying glass as the search button.
final website:
Overall, I'm really pleased with the design and programming of the website. It has so much potential to grow globally. I really like the simplicity of the frontend because it makes it so easy for users to just click and move on. I love how the backend of the website does everything for the user. I would love to expand it more so users can do more with their profiles, edit posted prayers, etc. A lot of potential.
