Hey here is a design I'm just playing around with. I'm doing this for my own benefit. I'm not getting paid or was even asked to do this. What are you thoughts? I don't like the way it's came out, but I can't really put my finger on all that's wrong with it.
Two things that I would probably try here (sorry, I don't know the technical designer lingo, but I'll speak from a consumer point of view):
1. Increase the space between the lines of a navigation menu items in your second screenshot. I find that you need a bit more space in order to hit the right menu item fast and with confidence.
2. In order to increase the screen real estate (after all not all smartphone screens are made equal), remove the footer navigation and instead, add a button or a solid panel at the top of the page that would say something like "JUMP TO" which will open a drop down menu with those main navigation choices. It will also allow you to grow the number of menu options down the road.
Agree with all the above, it does look nice, definitely a great start.
Perhaps why you don't like is because its a little too flat? I would add some borders / gradients and better textures to it so that it really stands out.
The only thing I hate actually dislike about it, is the fonts. They seem a bit pixelated, so be sure to use a 'crisp' or 'sharp' anti-aliasing. The titles like 'The Menu' or 'Contact us' etc, I would make them caps, and slightly smaller. Make them fit better.
Regarding the footer navigation, I would keep it as it is - if thats the only amount of pages you need otherwise do as Artashes said.
But more work is needed in terms of 'details'. Great start, keep it up!
Any sites (or blog posts) I could take a look at for examples of texture? I never really used a background with noise, usually just a plain color, so I'm not sure how to add more gradients or depth. Thanks for the relies so far. I'm going to caps the headers on each page and set them to "crisp", the navigational items will be further apart and I do want to keep the footer-menu the same.
I was actually thinking of putting EVERYTHING one one page and when you click the button at the buttom it scrolls up or down to that content area. Sounded like a nice touch, but I'm not sure how the JQuery will work for it quite yet.
Again thanks for the replies so far. I don't consider myself a designer. I usually outsource that part of the project for touch ups.
2. I'm not a big fan of serif fonts on mobile sites or apps for one main reason reason: readability issues related to scaling. It's just something I've experienced from a couple of sites that use a font like Times or Garamond on their sites. Consider some web-friendly serif options that are bit easier on the eye while keeping with the overall feel from screen to portable device.
3. I personally love the noise texture, when it's used well. I'm not a big fan of it in this example because it lacks consistency. Some places have heavier noise than others and that is hugely distracting to users.
4. These examples are also lacking dimension and attention to detail. Try and work in some depth by adding shadows and highlights that accent the textures.
5. Pay attention to the icon sizing. Even though I am recommending you do away with the toolbar at the bottom, if you decide to use icons at all, you should make sure that they are consistently sized and styled. While it's difficult to make sure that they are always the same width, height plays a big role in adding some consistency visually.
I can provide more feedback based on style alone, but I wanted to be sure to touch on the items that I feel will give you a more solid grasp in designing for mobile. This is not a bad first try, but don't stop there. Keep at it. Emulate great sites that degrade well. Good luck!