Design and Layout Mock-ups...

[Phantasmagoriat]

The layout mock ups that you guys posted look more like a reorganization for what we already have.

Well, personally I think what the org has right now is pretty solid.. it's just a bit clunky to use... which is what I think we should focus on before adding extra features. The worst thing we can do is add all this extra pretty stuff, and people still don't know how to use the core site.

no social! Bad!!

I wouldn't mind the org being a bit more of a social site depending on how it's implemented. IMO, we could probably scrap Profiles and Journals and replace it with a kind of blog layout which has the features of both.

[trythil]

A first iteration of a frontend for the application I posted earlier (http://gitorious.org/a-m-v-org-v2/core):

http://depot.ninjawedding.org/amvorgv2/

Known to work in Chrome 10 and Firefox 3.6. Safari 4/5 should work, Opera might work, IE 8 might work. I haven't yet set up a Windows VM to contain the latter three.

Source code: http://gitorious.org/a-m-v-org-v2/mockups

The mockup uses Staticmatic (http://staticmatic.rubyforge.org/) for HTML generation, and Compass + Susy for CSS (http://compass-style.org/, http://susy.oddbird.net/). To regenerate the layout from the source code, you'll need a Ruby development environment.

[trythil]

A first iteration of a frontend for the application I posted earlier (http://gitorious.org/a-m-v-org-v2/core):

http://depot.ninjawedding.org/amvorgv2/

Explanation:

This is a proposal for a new front page, which was built up with some back-and-forth discussions with godix in #amv. It elevates the anime music video to paramount importance, and sinks the site and member stuff (which visitors aren't going to immediately care about) to someplace yet-to-be-decided in the background. I'll write more about it when I'm not so tired.

[ngsilver]

Well, that mockup works in both IE 8 and Firefox 4 Beta 7. At least, as long as the mockup is just suppose to have placeholder blank pngs for all the video 'previews'.

I kind of like this idea quite a bit actually. I was around for a bit of the discussion last night just listening in. As long as we don't loose a lot of the member functionality that we currently have I don't really see a problem with it. Though a bit more design sense would be nice, though the framework is currently there so skinning that wouldn't be too difficult.

[trythil]

Well, that mockup works in both IE 8 and Firefox 4 Beta 7. At least, as long as the mockup is just suppose to have placeholder blank pngs for all the video 'previews'.

Yes. That's all that is present in the markup.

I kind of like this idea quite a bit actually. I was around for a bit of the discussion last night just listening in. As long as we don't loose a lot of the member functionality that we currently have I don't really see a problem with it. Though a bit more design sense would be nice, though the framework is currently there so skinning that wouldn't be too difficult.

The video borders are too heavy and will be lightened by about 50%.
The "latest / top rated / most viewed" selectors will be moved to the topmost portion of the page, to the right of the logo. The logo will probably be shrunk to match. The search box will move up there, too.
The space occupied by the selectors will be filled with text describing the interpretation of the search term, i.e. "Most viewed videos by member 'ngsilver' with anime 'Rei & Fuko'". (Don't look that show up if you don't know what it is. It's a stupid show, and quite NSFW.)

After these modifications are complete, there should be less wasted space ("wasted" meaning "not used for interface elements or conveying information").

There will not, however, be very much space for superfluous graphics (read: banner ads) or needless amounts of chrome.

[godix]

I could see a combination of Little Bento & trythils design working well. Something like this, but designed by someone with actual talent instead of quickly slapped together by me:



Also we have a lot of categories. For FP purposes, it might be worth combining some into one box. Like Dance/Fun, Comedy/Parody, Drama/Serious, etc.

[trythil]

I could see a combination of Little Bento & trythils design working well. Something like this, but designed by someone with actual talent instead of quickly slapped together by me:

(image)

Content isn't present in those boxes, and I can't demonstrate interactions in a mockup (will need to prototype a web app for that), but I think I have ways to make most of those additional interface widgets in the image unnecessary.

The orange menu bar at top, for example, can probably be shortened to just a link to the boards:

* there's not really a reason to have a "search for AMVs" link when you have an omnipresent search box that already does everything
* account management, login, and signup can be compressed into a three-link strip that looks something like "Login / Create account", or "Logged in as [your username] / Log out / My account" if already logged in
* if you're a fan of videos, the video grid is enough; if you're a fan of an editor, search for him and bookmark his page
* if you're an editor: well, what's needed there still needs to be defined, but I'm pretty confident that can be rolled into the "My account" bit
* events: okay, that might be trickier; more investigation needed there

[godix]

While I'd agree several things in the menu are redundant/unnecessary, I think a few things are useful. Enough to have a menu somewhat similar to this at least. I like the division of 'fans' and 'editors' for example, which clearly indicates which sort of users would be interested in the features listed there. Something about community should definitely be there, and since the community is more than just the forums I don't believe a forum link could replace that. Then, as you say, there's the my account stuff. If there's going to be menu tabs for other things, the my account stuff should be in one just for consistency. So there's 4 menu tabs I think we should have. You are right that a search for AMVs tab isn't needed if we have the search box. And the help, well, how much help is REALLY needed? If help is needed, it could be stuck under the editor or fan tab (EG a how to upload guide).

Anyway, my central point with that was it's possible to provide that sort of thing without taking up a lot of real estate. Hell, with only 4 tabs, all options and video search could be stuck to the side of the logo.That would provide a simplistic looking design that focuses primarily on videos, while still putting the other stuff in a noticeable and easily accessed place.

[Phantasmagoriat]

I think we are forgetting the big picture here: how the site is going to be Structured.

Because in the end, we can't have one page for everything. The site is simply too big for that, and we can't just fill the main page with the few features we want. The site needs to be divided accordingly, even if that means compromises are made, and IMO this latest mock-up clearly needs it's own page.

Since we didn't discuss Structure enough when this whole thing started, I'm just gonna go ahead and say the whole site can be divided into 6 main components:

• 1. Homepage - Show off site features
• 2. Members.Main Page - Navigation; frequently-used items
• 3. Browse/Search Page - Filter videos specifically to your taste
• 4. Video Profiles - Uniform presentation of video info
• 5. User Profiles - Semi-uniform 'personal space'
• 6. Forum - discussions

That being said, the Little Bento layout (in my sig) barely address 1/6th of the entire site, and with this latest mock-up, maybe another 1/6th. I might get around to proposing something for the other 5 pages after the fat man in the red suit goes away... but right now I would say that would make a good Browse/Search Page. If we really feel this should be the face of the site, it can be integrated into the Homepage, or it can be the default when logging in but IMO it still needs to be separate from the Members Page.


Some food for thought:

[trythil]

I think we are forgetting the big picture here: how the site is going to be Structured.

Not really.

http://gitorious.org/a-m-v-org-v2/core/ ... os.feature

The frontend I posted is a prototype for an interface for the feature linked above, which in turn describes a Web service for doing video searches. That's all it does, because that's all that's been defined. (At least as far as I'm concerned.)

I guess I should clarify: these frontends etc I'm building are very much an independent project of mine, which I've undertaken as a way to explore the Org Done Right. (IMO, of course.) Because they're that, I have the freedom to deem anything unnecessary or secondary, and therefore there is no existing structure that I am obligated to follow.

I'm not a fan of design methodologies that require omniscience, or at least an uncommon ability to anticipate extraordinarily large structures in advance. Some people think they can pull it off, and they feel more clever as a result, but I've only seen it really work in very few cases, which is consistent with the genius/idiot ratio of the human species. I consider myself part of the idiot group, and therefore prefer to focus on one part of a time: for that work, nothing else exists, except the unit under development and the units with which it interacts.

That doesn't work for everything, but it works great for most websites. I think it definitely can work here; it's a fantastic way to avoid paralysis and to generate precisely targeted changes.