Wireframe

[mftruso]

Create a high level sketch of the UI for MVP

[JohnRDOrazio]

I think it would be nice to have a graphics expert on board, to help create an aesthetically pleasing interface. Seeing that a wedding usually is a "fancy" event, the UI should also have that "fancy" touch to it, with nice little decorative elements that give it that "wedding" touch.

Since the composition of the booklet will be a step by step process, stepping through each section of the ceremony, we could perhaps have some kind of a slider interface, each new step would be a new slide. This could either be a horizontal slider, with a fixed progress bar that shows the progress in the selections of the liturgical texts; or perhaps it could be a vertical scroll with a parallax effect, to give the sensation of slides taking the place of one another, one by one...

[kas-catholic]

I'm not against the sliders or parallax ideas, but I wonder if we should implement something more simple first? It should be possible to add stuff like that at any time. I don't want to get so hung up on visual effects that it slows us down on figuring out the application logic. Once we understand roughly how the user moves from screen to screen, we can start building rough pages and thinking about our database schema and other things more concretely.

Here are a couple very quick sketches to get the conversation going. I've left off things like global nav menus, which might be decided more by the CSS framework we choose and what it easily supports (#9).

This first wireframe shows a possible layout for the homepage. It's simple, and it's something we can build on. A big title in the center (possibly with an image background, or maybe just white to start). A short section below about what this app is and how to use it. And a footer about where we develop the app on opensourcecatholic.

Here's a wireframe showing a possible layout for the screens where the user makes selections. Steps are links on the left (either active or grayed out) to show progress. There's info at the top about what the user's choosing and why, and buttons at the bottom to go back, go forward, and save progress (if applicable).

[JohnRDOrazio]

I think a simple welcome screen that pretty much just announces what the website is for, would work well: for example an image of a wedding booklet with a button to "Get Started" in creating your own booklet. The button would create a new project url, and take you to the interface with the steps for the new project.

[JohnRDOrazio]

as for the reference to the opensourcecatholic repo, I would leave that to an "about" menu item... seems like something a bit technical that the general public wouldn't really be interested in

[JohnRDOrazio]

I envision something very simple but elegant for the homepage, something like this:

Perhaps there could be a css animation such that, as you move the mouse across the screen, the booklet slowly opens... I think simple, elegant, to the point

[JohnRDOrazio]

and if the project becomes something a little more "official", with the blessing of a bishop or two, or of an episcopal conference or two, (or the Congregation for Divine Worship! that would be tops!!!), then perhaps there could be a small mention somewhere (like at the bottom of the page perhaps) of the diocese or Episcopal Conference that "approves" of the project.