App Layout

App Layout

Below I have posted a few ideas of what potentially my app will look like on a HTC One, I have shown a few people what it looks like so far to get there feedback, and I agree with their feedback, it's small things that will make the difference and the details.

I prefer the grey Logo fits with the composition

Similar style to the Home Page with a crisp image, but may change the effect, and buttons.

I prefer the small grey logo, the red logo blends too much with the red.

Site Map

Site Map

To understand the navigation of my Wine App, I needed to produce a Site Map so I get to see visually if I need to add some more inner pages or perhaps remove some inner pages, or moreover add another main page.

Below I have posted an old version because I have removed the Dating page, I just feel it isn't appropriate and doesn't fit with my App, it looks random. 

So I have removed it.

Here is the old version

Here is the new version, using the same key as the old version

Logo Ideas

Logo Ideas

So after producing various designs and styles; too condense them all down too a selected few, I showed them to various friends, to get their feedback and see what works well visually and if it fit's my target audience.

After consulting them I picked out a few and started to combine the styles together. To come up with my logo.

Logo Ideas

Logo Ideas

Whilst producing my wireframe, at the same time I was doing logo ideas. I needed something fun, a little serious, however something that would target the eighteen year old and above, so that they can educate themselves about wine but not forgetting using that experience why not go on a date or just socialise with friends that also enjoy a glass of wine.

Obviously during the process of design, some looked elegant (as if it was a wine company) others looked to fun and didn't look serious enough. Had to mix a lot of the design's to form one strong logo.

Firstly I had too decide which font to use, then evolve the font into a logo.

Finalised Wireframe

Finalised Wireframe

So from analysing my wireframe list and my sketches for the page layout, I have now come up with a finalised Wireframe for my App. 

Next up is to produce the final sitemap based around my wireframe, the great advantage to doing a sitemap is that you get to see the visual flow of the app and how the navigation will work.

Wireframe

Wireframe

To have some understanding of how my app will navigate, I thought I would start off by drawing out a wireframe, so for my benefit I can see how many pages I am going to need and see what and wont work in relation to my idea of producing a clean, easy navigational app. 

Here is a list of my potential page layouts, just to get down on paper to see visually.

Once I produced my list of potential app layouts I started to sketch out the phone layout just so I could get a visual aid and see what worked and what didn't.