Design and Layout Mock-ups...

[Phantasmagoriat]

I just think tabs are a bad idea.

Tabs in the website, or tabs in your browser?

I still think that orange needs to go. It seriously like, assaults your eyes. Green ftw.

lol.
Since I don't know what green you want:
http://www.animemusicvideos.org/forum/v ... 0&t=102448

[Corran]

Some quick bug notes in primary demo:

• In Chrome the stats do not line up with the banner in header causing the header to be about twice as tall as it is supposed to be.

Okay, I added a 15px margin-top to the stats, but the logo has always been taller than the banner, so the height doesn't really change. Then again I kind of like having a thick margin around the banner.

I was referring to this:


If I had to guess, I would say the right margin of the banner or the left margins of the stats are too wide and are causing the stats to fall under the banner.

I'm a novice at html/css Thanks for the input and I'll keep these in mind, but most of the people affected are IE users Plus the real site coders are using their own flash content so these problems will probably be addressed. Some things should be easy to fix though.

Unfortunately IE is still the browser of choice for over half of internet users. My rational for providing bug fixes was that I was under the impression that the mock up would be usable by org programmers if they chose to go with it (like the mock I made) and/or that you were doing this partially to learn html/css. The whole point of CSS is to separate presentational markup from structural markup. If you are serious about learning web CSS, you must condition yourself to adhere to this principal.

Bugs are always annoying, but in web design rendering bugs can be difficult to isolate since what is thought to be the cause of the bug may actually also be symptom of a hidden root cause introduced early in development. One suggestion I would stress, whether it be serious web design or just for fun, is to develop in the most standards compliant web browser you can find (which seems like you are doing) while simultaneously testing other browsers as you go to identify and fix disparities as soon as they arise, whether it be with a simple change to your main stylesheet or use of conditional stylesheets. This way, later styling is not built upon broken styling as you progress with the design.

Here are some useful links if you are not yet aware of them:
http://www.w3schools.com/tags/default.asp
http://www.w3schools.com/css/css_reference.asp

Annnnd, I think the only thing that needs fixing for this design is changing the title and creator when changing of video. Although it isn't that necessary for now and can be a bit of a pain.

Oh yeah, I don't really know how to change elements in the html using the content in the flash window. I'm too new to html/css/flash but I'm sure the real site coders will have a way to display that information properly. If I had to take a wild guess, the links to the Video/Editor Profiles would be integrated into the flash window.

The JW player has a javascript api. The org currently uses it to bring up the star rating/QC form 30s into a preview using an AJAX request based on the playback position. The same methods could theoretically be used to change any part of a page's content. You could also use it to make an HTML based playlist rather than using the player's.

[Knowname]

I just think tabs are a bad idea.

Tabs in the website, or tabs in your browser?

tabs in the website, tabs in the browser is a personal thing

[Phantasmagoriat]

I was referring to this:
http://dl.dropbox.com/u/2758911/orgstuf ... chrome.jpg

If I had to guess, I would say the right margin of the banner or the left margins of the stats are too wide and are causing the stats to fall under the banner.

hmm... I can't seem to reproduce that error in Chrome. Mind you, I just made a clean install. But still I'll try to look into it.

I'm a novice at html/css Thanks for the input and I'll keep these in mind, but most of the people affected are IE users Plus the real site coders are using their own flash content so these problems will probably be addressed. Some things should be easy to fix though.

Unfortunately IE is still the browser of choice for over half of internet users. My rational for providing bug fixes was that I was under the impression that the mock up would be usable by org programmers if they chose to go with it (like the mock I made) and/or that you were doing this partially to learn html/css. The whole point of CSS is to separate presentational markup from structural markup. If you are serious about learning web CSS, you must condition yourself to adhere to this principal.

Bugs are always annoying, but in web design rendering bugs can be difficult to isolate since what is thought to be the cause of the bug may actually also be symptom of a hidden root cause introduced early in development. One suggestion I would stress, whether it be serious web design or just for fun, is to develop in the most standards compliant web browser you can find (which seems like you are doing) while simultaneously testing other browsers as you go to identify and fix disparities as soon as they arise, whether it be with a simple change to your main stylesheet or use of conditional stylesheets. This way, later styling is not built upon broken styling as you progress with the design.

Here are some useful links if you are not yet aware of them:
http://www.w3schools.com/tags/default.asp
http://www.w3schools.com/css/css_reference.asp

Thanks a bunch for the advice Corran. I can certainly use this info because you are right: I am partially making this mock-up to teach myself html/css. Actually I didn't even know what the term markup meant until I started reading the css in your mock-up about a week ago. Whether the org programmers use it in any way is their call. I probably wouldn't, since I'm also doing this simply to present ideas, while not necessarily being perfect. I think I'm going to start a TODO list and list of Known Bugs, so I can focus more on ideas instead of bugs, but bugs are always welcome

The JW player has a javascript api. The org currently uses it to bring up the star rating/QC form 30s into a preview using an AJAX request based on the playback position. The same methods could theoretically be used to change any part of a page's content. You could also use it to make an HTML based playlist rather than using the player's.

That's interesting because I'm experimenting with building an HTML playlist. I think a detached playlist would be much easier to organize than the current one that sticks to the preview window. So far, I can only get it to work using the <object> tag together with <a target="">, but I think I have to make a separate html for each video then. I can't seem to get it to autoplay either. I'll have to check out the star rating/QC form then.

[Phantasmagoriat]

Reference to another post:

http://www.mediafire.com/?4agyik9ijmlp494

Here's what I got so far. There's still a lot that I want to tweak and also make it so that it makes sense, but I think this puts out some of the main ideas I've been having.

I'll post a new version tomorrow. If somethings like spacing or font is off, sorry about that, I know nothing about CSS and this was my first time tweaking somethings.

EDIT: somethings I want to add is icons for the alerts that show what the alert is referring to. For example of the alert is for a new upload, it'll have a film strip next to it. If it's a journal alert, it'll have a notepad or something.

Also, I think most people will notice that I've added the forums to the side, which I think will get more people involved in the site socially, but it does put a lot on the main page. I'm thinking that if we can still allow for collapsing and some way of adjusting what we see on the main page, it'll work fine.

I also want to somehow incorporate the recommended videos feature and a spot on the front that catches big site news for when VCAs roll around or for if and when the newsletter comes back or something.

Updates:
-There are two more installments to the current mock-ups. I started naming them, and provided a navigation menu at the top of the screen so you can cycle between layouts to compare them:
http://dl.dropbox.com/u/15771457/ReDesi ... nPage.html
(or click the link in my sig)
-One of the new ones I have dubbed "Little Bento," which is a combination of "Org Basic" and "Big Bento"
-Oddly with the naming scheme the other new layout is presented by LittleAtari. My thoughts below:
-I like the info in the top right corner, I might steal that idea for my Little Bento layout
-Personally, I don't like having too many main menus, but that should be pretty clear when you look at my own layouts
-I'm not sure alerts are necessary on the right when there is already an Alert Log that lights up in blue below
-I still think we need some sort of playlist system like in my other layouts
-Interesting idea with the forum updates. I can see you want to increase the visibility of the forums, and I agree this needs to be done, I'm just not sure that's the route we should use. It's a bit intrusive IMO. Even if they are collapse-able. Maybe we can do something else, like make a smaller menu that simply highlights the latest posts; perhaps even with a snippette of the conversation; because we want to increase visibility without turning the main page into an index for the forum (although honestly, to me, the forum is the org)

Minor things (You might want to be aware of these Atari, though they don't interfere with your main ideas):
-In Chrome, the search menu overlaps with the main page
-The Subscribe/Playlist buttons look a bit odd centered
-The LOG Tabs are a little squished for my taste
-The fonts in the menu don't match
(but considering this is your first time using css, I'd say overall good job )

[godix]

Based on what I've seen so far, I switch my preference to Little Bento, although some of the stuff I don't think should be on the front page has returned. However, it's not nearly as much a busy clusterfuck of everything tossed together like Big Bento so it's easy to ignore and some of the stuff it has that the basic design doesn't is useful.

When I look at Big Bento or Atari's layout, my attention keeps getting divided between the left and right sidebars, so I end up focused on nothing at all. With Little Bento my attention naturally falls on the video and I'm aware the sidebar is there without being distracted by it. Basic, of course, has no sidebars to distract at all. So if we're going to have side bars, I think it should be on one side only.

Regardless, nice job so far.

[BasharOfTheAges]

I really like the little bento layout. I'll hold off on real judgment until I could see a real mock-up with the tabs working and a sectional minimize/maximize animation. With those open, it seems like it could get awfully tall - as someone that has multiple wide-screen monitors and puts firefox on one panel at 1680x1050, the wasted space seems a bit much....

Insane thought... iGoogle-like widgets? I'd love to have a skin-able front end with widgets... Yes, I know how much work that would be.

[Phantasmagoriat]

Based on what I've seen so far, I switch my preference to Little Bento, although some of the stuff I don't think should be on the front page has returned. However, it's not nearly as much a busy clusterfuck of everything tossed together like Big Bento so it's easy to ignore and some of the stuff it has that the basic design doesn't is useful.

When I look at Big Bento or Atari's layout, my attention keeps getting divided between the left and right sidebars, so I end up focused on nothing at all. With Little Bento my attention naturally falls on the video and I'm aware the sidebar is there without being distracted by it. Basic, of course, has no sidebars to distract at all. So if we're going to have side bars, I think it should be on one side only.

Regardless, nice job so far.

Thanks.
Yeah, I do think we need a side bar for "extras" so users have something to look at when they get bored. The big question is which ones?

I really like the little bento layout. I'll hold off on real judgment until I could see a real mock-up with the tabs working and a sectional minimize/maximize animation. With those open, it seems like it could get awfully tall - as someone that has multiple wide-screen monitors and puts firefox on one panel at 1680x1050, the wasted space seems a bit much....

Insane thought... iGoogle-like widgets? I'd love to have a skin-able front end with widgets... Yes, I know how much work that would be.

No guarantees on when/if I'll make working tabs, but I think you can imagine what it would be like: tables/lists of stuff like QCs/OPs. (Nothing too fancy). Regarding the min/max animation, that's just an afterthought IMO. The only thing that's really necessary is the ability to switch between tabs. Functionally, the tabs could scale their heights instantly, and it wouldn't make a difference, even if your alert log is 3x the height of your monitor.

Widgets would be cool. And I would support something similar to the widgets on WordPress if the site coders wanted to go in that direction. This would eliminate the problem I mentioned above about which "extras" we want in the sidebar. It would be customizable. But like you said, that would be a lot of work.

Just a heads-up: I'll be really busy the next month, and I'll be going away for the holidays, so I may not respond to everything. But if any ideas pop up, don't let that discourage you from posting them.

[Elcalavero]

The layout mock ups that you guys posted look more like a reorganization for what we already have. We need a more "web 2.0" or "social" type of website. Something that looks appealing and not outdated.

Something like this...

http://www.bestofjoomla.com/index2.php? ... =1&id=3564

[Knowname]

no social! Bad!!