Today's Posts Follow Us On Twitter! TFL Members on Twitter  
Forum search: Advanced Search  
Navigation
Marketplace
  Members Login:
Lost password?
  Forum Statistics:
Forum Members: 24,254
Total Threads: 80,792
Total Posts: 566,471
There are 847 users currently browsing (tf).
 
  Our Partners:
 
  TalkFreelance     Design and Development     Graphic Design, Multimedia and Photography     The Gallery Showcase :

mobile site design - need critique -

Thread title: mobile site design - need critique -
Reply    
    Thread tools Search this thread Display Modes  
04-10-2012, 10:20 PM
#1
jasonm56 is offline jasonm56
jasonm56's Avatar
Status: I love this place
Join date: Jun 2007
Location: Minneapolis
Expertise: xhtml/css, jquery, php, mysql
Software:
 
Posts: 533
iTrader: 1 / 100%
 

jasonm56 is on a distinguished road

Send a message via MSN to jasonm56

  Old  mobile site design - need critique -

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.









Reply With Quote
04-11-2012, 05:08 AM
#2
Artashes is offline Artashes
Artashes's Avatar
Status: Community Leader
Join date: Nov 2009
Location: Canada
Expertise: Media, business development
Software: Excel, Pen&Paper, Slack, Figma
 
Posts: 2,551
iTrader: 1 / 100%
 

Artashes is on a distinguished road

  Old

It actually looks sweet!

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.

Reply With Quote
04-11-2012, 10:13 AM
#3
creativejen is offline creativejen
Status: Paladin
Join date: Jul 2006
Location: Sheffield, UK
Expertise: design, front-end markup
Software: Photoshop
 
Posts: 2,353
iTrader: 25 / 96%
 

creativejen is an unknown quantity at this point

Send a message via MSN to creativejen

  Old

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!

04-11-2012, 09:05 PM
#4
jasonm56 is offline jasonm56
jasonm56's Avatar
Status: I love this place
Join date: Jun 2007
Location: Minneapolis
Expertise: xhtml/css, jquery, php, mysql
Software:
 
Posts: 533
iTrader: 1 / 100%
 

jasonm56 is on a distinguished road

Send a message via MSN to jasonm56

  Old

Yeah I guess I dont like it because it is flat. Not much color variation either. I just tried to match the logo colors throughout. They have a website, but it looks hideous....

http://mysammys.com/index2.shtml

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.

Reply With Quote
04-12-2012, 03:51 AM
#5
chaka42 is offline chaka42
Status: Senior Member
Join date: Apr 2005
Location: Middle America
Expertise:
Software:
 
Posts: 955
iTrader: 5 / 100%
 

chaka42 is an unknown quantity at this point

Send a message via AIM to chaka42 Send a message via MSN to chaka42 Send a message via Skype™ to chaka42

  Old

Ok, so a few things that'll help work through some practical issues inherent with mobile.

1. The footer is not really a footer. You're mimicking a toolbar that is available mainly in mobile apps, not in actual websites for mobile. If you want to use navigation that's fixed at the bottom, you'll also run into support issues. Here are few links that'll help you understand why this is not a practical option:
http://www.sitepoint.com/forums/show...3GS-%28iOS4%29
http://www.position-absolute.com/art...ition-problem/

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!

Reply    


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

  Posting Rules  
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump:
 
  Contains New Posts Forum Contains New Posts   Contains No New Posts Forum Contains No New Posts   A Closed Forum Forum is Closed