Appstore Look


Nice one Trev i knew you wouldn't let me down! ;)

Simple is the way to go, and for people moaning about seaching through 2300 apps with this interface....well we search through 90,000+ apps on the iphone on a simpler interface lol

It has all thats needed, the main categories, a search button, latest uploads etc...
 
Beautiful stuff Darien. The only downside I see is the welcome section, with the Pandora banner. If you're signing in from Pandora, you'll want to see content straight away without scrolling. So I'd rip that out and start at the top with Newly Added. Then put a login / my account button in the black header bar. Just my 2c :)
 
iBrew said:
the left side navbar seems very small :-/ otherwise, I'd agree that this is well made and good looking.

Yeah, I made sure to work in actual screen dimension so that it would work well visually within 4.3 inches. I admit I'm pro stylus (while putting it away and keeping track of it seems tedious, it's a lot more relaxing to point from the higher pivot then moving your finger and hand around) but it is still usable with the finger. I loaded it on my iPod touch, zoomed up to exact real world scale (4.3 inches, hopefully pixel for pixel) and fingered around a bit. The only problem is we need to make the entire width of the bar click-able rather than just the text. Alternatively anyone can simply add padding or resize the text :) . Thankfully, the problem doesn't lie in its readability, just the usable finger area.

preview01.jpg
preview02.jpg


Gruso said:
Beautiful stuff Darien. The only downside I see is the welcome section, with the Pandora banner. If you're signing in from Pandora, you'll want to see content straight away without scrolling. So I'd rip that out and start at the top with Newly Added. Then put a login / my account button in the black header bar. Just my 2c :)

Thanks, yeah no problem guys, feel free to modify as you see fit. I do want to say I've worked within the 480pixel page-fold here so on the Pandora you should only see the main image and the preview icons. The rest is scrolled to. Also the button top left should allow some more context panes for navigating.
 
Last edited by a moderator:
That's the goods. IMO. :)

(Engadget's recent revamp is an example of what drives me nuts. It bombards you with a wall of self-promotion when you load the page, forcing you to scroll down to see the latest entry - even on a large monitor. If I were the boss of the internet I'd make it illegal. End rant!)
 
darien said:
Gruso said:
Ah, those screenshots demonstrate my previous point perfectly. ;)

Hahaha, how about this? A quick 2 second cut of the html.

In the words of Wayne, "eeeexcellent!" Is there any chance we could squeeze a 25% white to black gradient into the left navbar background? (The blue background). It looks 25% hawter. Nitpicky, I know, but I think it looks a little more modern that way. But feel free to disregard :p

This is it WITH the gradient:
sorry for the pointlessly huge image
blue-navbar.png
 
Last edited by a moderator:
Gruso said:
Beautiful stuff Darien. The only downside I see is the welcome section, with the Pandora banner. If you're signing in from Pandora, you'll want to see content straight away without scrolling. So I'd rip that out and start at the top with Newly Added.

But from an app store point of view, if there's something you want the customers to see (weekend special, important notice etc) you'd want that front & centre to make sure it gets read. I wouldn't waste the space with a generic welcome message, but they'll need the option of a "noticeboard" box visible on the landing page, whether you like it or not. :)

With 800x480 viewport (not including toolbars), you can see the full (example) category list, the noticeboard and the newly added list without scrolling.
 
Last edited by a moderator:
iBrew said:
In the words of Wayne, "eeeexcellent!" Is there any chance we could squeeze a 25% white to black gradient into the left navbar background? (The blue background). It looks 25% hawter. Nitpicky, I know, but I think it looks a little more modern that way. But feel free to disregard :p

Custom link - We have to modify the widget header colors a bit though since the resulting background color blends in with it a bit.
 
Last edited by a moderator:
Yeah, fair point Kagato. I could handle the occasional announcement banner if the dimensions weren't too rude. If I start having nervous breakdowns, there's always Adblock.
 
kinda working on the html version of mine. very bad coding i'll sort it out tommorrow. just want to show an update i hope to get the demonstration of the other pages as requested online tommorrow
heres the link for now it doesnt go anywhere :p
http://www.trevsweb.com/pandainterface/demo1/
 
Quick edit of Darien's mockup

(Thrown together for a quick test -- optimised for Firefox, probably looks like ass in IE)

Moved the username into the navbar, and the search box into the sidebar. That gives you room for another 2-3 navbar links.
Made the category links full width for easier clicking.
I also added an "Information" box to the sidebar, for the extra links that will inevitably be needed.
 
darien said:
iBrew said:
In the words of Wayne, "eeeexcellent!" Is there any chance we could squeeze a 25% white to black gradient into the left navbar background? (The blue background). It looks 25% hawter. Nitpicky, I know, but I think it looks a little more modern that way. But feel free to disregard :p

Custom link - We have to modify the widget header colors a bit though since the resulting background color blends in with it a bit.

Thank you Darien. Looks a beaut now :D
 
Last edited by a moderator:
i'm probably going to buy things from this appstore thing just so I can browse it, it looks really nice (dariens mockups)
 
Kagato said:
Quick edit of Darien's mockup

(Thrown together for a quick test -- optimised for Firefox, probably looks like ass in IE)

Moved the username into the navbar, and the search box into the sidebar. That gives you room for another 2-3 navbar links.
Made the category links full width for easier clicking.
I also added an "Information" box to the sidebar, for the extra links that will inevitably be needed.

Because I'm ass at HTML, could you do a mockup of a quick variant for me?

I was envisioning putting "Welcome, <username>" and a small logout link, maybe something like: (logout?), where you now have the search bar (and putting the search bar back where it was). Clicking on <username> would take you to your profile, from where you could upload and whatnot. Also, the home button is unnecessary, we can just use the Pandora icon. Given that extra space in the top bar, I was thinking of putting the "home>games>etc." navigation links there. Do you think you could quickly make that for me?

Thanks a ton in advance. :D :wub:
 
Last edited by a moderator:
I've taken some of Dariens design and placing of things and made them a little and simpler bigger for the Pandora screen.

I've also now totally dropped the top bar, it's a waste of screen space.
 
darien said:
Gruso said:
Ah, those screenshots demonstrate my previous point perfectly. ;)

Hahaha, how about this? A quick 2 second cut of the html.
That looks very nice.

But I think that there is too much unused vertical space (we should try to fit as much info into 400pixels as possible). Either the text could be bigger to use it up, or it could be removed to bring everything closer together. If the spaces at top & bottom of all the text were removed, you could probably fit ~50% more info in the same space.
 
Last edited by a moderator:
Vorporeal said:
Because I'm ass at HTML, could you do a mockup of a quick variant for me?

I was envisioning putting "Welcome, <username>" and a small logout link, maybe something like: (logout?), where you now have the search bar (and putting the search bar back where it was). Clicking on <username> would take you to your profile, from where you could upload and whatnot. Also, the home button is unnecessary, we can just use the Pandora icon. Given that extra space in the top bar, I was thinking of putting the "home>games>etc." navigation links there. Do you think you could quickly make that for me?

Thanks a ton in advance. :D :wub:

Here you go, though given Craigix's last post I was probably wasting my time :unsure:

I won't be doing any more today, I've got too much else on right now.
 
Last edited by a moderator:
Back
Top