PDA

View Full Version : Mockup Design



Templarian
January 29th, 2008, 07:45 PM
I'm going to be redoing my sites design soon for mobile devices and for design it has currently.

Mostly wondering if I'm going in the right direction (those that know me know I don't really do design work other that UI development so... it always ends up looking like an app).

http://www.templarian.com/apple-touch-icon.png
the icon that shows up right now if you drag my site to the home screen... haven't tested but was told it will work from a blog
http://img220.imageshack.us/img220/3002/ipodtouchsitesc7.png
iPod Touch view (really what I'm gonna make it look like on smartphones/other devices)
http://img82.imageshack.us/img82/8391/sitebp9.th.png (http://img82.imageshack.us/my.php?image=sitebp9.png)
Full Site... there are a 6 large buttons and a ton of small ones that show up after you click the large one (anchor tags not an accordion).

//edit, iPod image updated to match full sized.
//edit2, gradients inverted.

Pasquale
January 29th, 2008, 10:52 PM
I think if you inverted the header gradient direction, it will make them pop more and look more volumetric (I don't know why that is, but it seems to be the case with bares like that.

Also, I think if you dropped the opacity of the shadows on the icons and shifted the shadow direction down to match the shadow direction of the text in the iPhone interface, it would be nice for continuity.

I really dig that code box and how it looks sunken in!

Would be really neat to see this design implemented on a full sized site too :)

StigC
January 30th, 2008, 02:52 AM
I really like it. I think it looks great. Great choice of colours and the elements seem well implemented.

So this is basically like a great 'notebook' for coders? Say, you're sitting on a train and suddenly the magic solution to your php problem pops in your head, and now you have the ability to quickly type it up on your iPod/phone for later use?

Would be cool if you would tell us a little more about it.
If it's not an app, and simply a (cool) design idea for your own content, tutorials/code etc. - I would love to see it as an application aswell. I bet you could even make some money! ;)

Templarian
January 30th, 2008, 07:43 AM
Well if you click my footer you can see the old version its going to be replacing (its based on a cms, each section is a different editable region... so really I'll just be replacing the skin and making two very different css files).

Thanks for the comments. I've got work in 10min, may try and work on some more there.

Theros
January 30th, 2008, 07:58 AM
Looks good...essentially reminds me of some coding wiki for Linux of whatever. That's good in your case since that's the look you want anyway... Sorry about ignoring your IM the other day, I've been sick recently and I have a lot of stuff to catch up on. I'll leave more comments later.

Sorry

*EDIT* Okay, lemme make some more comments. Overall, this site reminds me of Launchy.net which is a good thing? I really like how the main content is structured and easy to read/use. I'm worried that the main menu on the full-size version is kinda small though? Seems almost too little to click on, might want to bump that up a few sizes. Not liking that drop shadow effect on the Question mark, kinda makes it look cheesy, and overdone. Other than that, I love the headings, the text is nice and big (easy to read) although maybe the main content text is a little too big? With the related Links thing, you should add something like Important Links, including maybe a FAQ, Resources, Forum/Community stuff (if that's planned), etc. Also, are the heading with the gradients going to expand when clicked on? that would be kinda cool. Finally, is there a footer? I guess there is...but it seems incomplete done there.