Design and Layout Mock-ups...

[Pwolf]

So ideas have been discussed, lets see them. Open up mspaint or photoshop, or write some HTML. Lets see what you want.


Go.

[Phantasmagoriat]

Latest HTML Versions:
Members.Main Page: http://dl.dropbox.com/u/15771457/ReDesi ... nPage.html
AVTech Index Page: http://dl.dropbox.com/u/15771457/ReDesi ... Index.html

(Disclaimer: Although some links may connect to the org, the above html's are still just mock-ups...)

I was going to do this all with screenshots+GIMP, but I always wanted a reason to learn css/html
Then again I didn't code everything, I just stole Corran's Version and modified it.

Header:



[Removed outdated picture of site Body. Refer to the links above]


-The real magic is in the menus, and you'll have to see the html version to see how it's organized
-The links are semi-functional (like the main menu should work), but other things like the tab links are
just there for show ^_^
-Everything should work in firefox. Other browsers may break some stuff. Then again, it's just a mock-up.
-For anyone who is actually coding the website, and is reading this, feel free to use this however you like,
although I'm new to css/html, so I wouldn't trust it especially the css which I just threw random lines into
Corran's version whenever I needed something. I would still code everything from scratch, but borrow
ideas and snippets of code here and there.

separate .zip folder
(You'll have to forgive me since I don't have hosting after geocities ended,
and I'm too lazy to search the web for good free hosting...) DropBox seems to work pretty good

discuss.
or make your own mock-up.
or modify my version with html/css/photoshop.
or whatever.
But wait! I'm not done yet

(see next post)

[Phantasmagoriat]

And this I actually coded from scratch because I never liked the guide index: (mini-rant about the guide index here)


You can find this in the zip folder, or just click the AVTech link from the main page.
All the links are the same as the current index page, but organized... Linearly...

And I'm still not done...

(see next post)

[Phantasmagoriat]

Spoiler :

...AND A MASSIVE TL;DR DESCRIPTION:

MENU-RELATED
-free up the main menu with a separate administrative header
-only 6 main menus (5-7 is a good target)
-"Profile" and "Edit Profile" are merged as "Org Profile"
-Added "Forum Profile" though it would be nice if the two were merged, but it might be weird combining php and html. IDK, I'm not a programmer.
-Bandwidth Usage is an administrative/account thing; perhaps it can show both usage as an Editor and as a Fan...
-"Search for AMVs Menu" is way more robust;
-I tried to put *everything* related to finding good amv's here, including the Top Lists section; I just think all of those places should be in one spot, instead of the Top Lists being way over on the right; honestly I almost missed it when I joined the site
-"Featured" section should be about 'what's hot' or what the community is watching at the moment
-I tried to physically divide the Top Lists more intuitively
-"Renamed Top Videos" to "Top Favorite AMVs" to distinguish AMV/Video/Anime more clearly
-Added Top Favorite Music. I figure that's the neglected gem of the abbreviation (AMV is not an acronym BTW...)
-Added Recommended AMVs. Another neglected gem in the search for AMVs, especially when it's in it's own subforum (same with this subforum I'm noticing... perhaps there should be a sticky at the bottom of the list of sticky's in General AMV that goes here [directly if possible so you don't have to click twice])
-Merged "Alert log" and "Modify Alerts" into a single link called "Alerts"; Modifying alerts should be possible from the new page, even if a simple link is added
-Removed an entire main menu by splitting the guides into their respective areas: Fan guides, Editor guides, and Site Help guides. I think it makes more sense this way; I mean, Fans don't need to see the AVTech guide, and you only want to see the "How to Use this Site" when you need Help. But a link to "All Guides" should still be maintained, and since it's under both "Fan Guides" and "Editor Guides", nobody is going to miss it.
-merged "video embedding" and "Edit AMV Info" into "AMV info." Theoretically, all of this could be integrated into your "Org Profile" page
-"Opinions Recieved" renamed to "Feedback Recieved" which is more accurate since this also includes, QCs, hits, favs, Stars... etc. Perhaps the DL information from the current "Edit AMV info" should be added to this page too, since I consider #DLs to be a form of feedback. I was thinking of a more broad term like "My AMV Statistics", but QCs and OPs aren't really statistics. Besides a separate page for full statistics could be added later.
-Added "Share Your Work" "Opinion Exchange" "Collaborate" to the Editors menu since that's really what AMVs is all about IMO. Yet currently when you make an AMV, you get no guidance as to what to do next. Seriously, what do you do? wait for someone to download your amv...? Yeah right. It might be alright for those brave souls that venture into the wilds of the forums by themselves, but most people need a little nudge. Just a small invitation as an excuse to get involved.
-Index layout for the Tech guide seems more intuitive in a Linear fashion. Click the link to view it.
-Schematic Diagram may be useful, if not interesting to look at...
-Community/Events gets it's own main menu with a bunch of stuff collapsed into it. It includes "everything that's happening", meaning, discussions in the forums, IRC, Interviews/Newsletters, and Contests. Anything where people are involved, including contributions to the community (Store/Donations).
-"AMV Contest List" is merged with "AMV Contest Forum" and renamed "AMV Contest Calendar".(The "AMV Contest List" was never really a list to begin with). I think the page should include the contests in calendar form, and list form, with links to the forum posts and websites.
-contemplate somehow integrating the calendar into the members.main page
-have an interface available for contest coordinators to make announcements on the main page with deadline notices, and contest winners. This will give users more of a reason to revisit the main page more often, instead of twiddling their thumbs in the forum. And a lot of people don't even visit the forum.
-Added "Links/AMV Studios" which would be a page dedicated to concentrate all locations on the internet related to AMVs. A compendium of sorts. Perhapse broken down into categories like: AMV distribution sites; Convention AMV contests; Studios; Blogs; Indie websites... Some sort of popularity-meter may be required to help organize the page. Ideally it would be put together by users, kind of like a wiki.
-Added "Organized Meetings" which is something that could be integrated with the AMV Calendar too. Just a thought, because it's not that easy to track down other AMVers in the same area as you, but if everyone can see the meeting location on the calendar, they'll know immediately if they can show up or not... again, it's just a thought.
-Possibly re-introduce the wiki
-Revived the Glossary by putting it in the Help menu. The Glossary would be awesome if it was wikified; because then anything can be added, not just technical stuff. If you hadn't noticed, this hobby has it's own subculture that even includes slang terms like roto. And abreviations like MEP, OP, QC, as well as a lot of internet slang terms like OP, ofc.. which can simply be linked to a place like urbandictionary.com
-"»" symbol used to denote links that have extra bodies of information, or lead away from the main site. It's a minor but useful visual queue.

WORK-AREA
-Tabbed Logs of frequently checked items: it's a better use of space; perhaps take it a step further and extend it full screen somehow to free up even more space for more robust tabular logs... dunno
-"You have given 1663 Star ratings, 8 Pending" I think this would be useful to include since it allows people to reflect on what they have downloaded, and keep track of their progress. I don't think average star rating should be visible on this page because people will start to compare current videos to their average, which will influence their score. But #ratings given
-Over a period of time, or certain # of downloads, the log cuts off, but it would be nice to have a separate, full, chronological record of all downloads and ratings
-"leave an opinion" button immediately when giving a star rating. I think we want to encourage OPs as much as possible. I think after leaving a QC people may feel like it's a waste of time to leave an OP covering stuff that they've already said. This allows people to skip straight to putting their thoughts in the OP.
-Drop-downs for Site-Announcements/Stats/Notices is fine, as long as updates are easy to notice;
-spiffy attention-grabbing stars
-If names/titles are too long, they go dot dot dot so that everything stays aligned and if possible, text can extend into virtual space much like the forms in QuickSearch so that the information is still present even if it gets cut off
-Familiar Blue highlights for new QC/OPs...
-Changed "Re-Watch Video" to just "Re-Watch" Brevity is good, as long as the message is still clear. Possibly change Opinion & Quick Comment to OP & QC, then add a tool-tip with explanation... maybe IDK... but it would make things less cluttered...


-SIDEBARS
--did you know (anything can go here... not just stuff about the site... Con statistics, historical AMV facts, famous editor quotes...[this may require users to input their favorite amv quotes, perhaps on their profile... and the ones used for the "did you know..." area would have to be hand-picked]. Stuff like this builds character for the site... and helps spread knowledge...)
--amv deadlines (visibility is key, and this will help cons get more entries, and it also gives people something to work towards)
--recent reviews (if someone went out of their way to leave an Op/review, it may be worth checking out, and the review acts like a preview for the video)
--latest poll (might be nice, maybe even if linked to a survey that keeps track of all sorts of statistics. It can even be used to build stats for the "did you know..." sidebar) We would need a convenient method for people to suggest poll questions.



GENERAL
-with a top-down menu, there is no need for a left menu. scrapped it to free some space.
-I left the width the same as the current website: 760px, but I suppose any width could be used...
-added tooltips to some links like in the banner. Ideally, all links should have something brief (I think the current banners are broken... or at least... they used to have tooltips)
-better location for QuickSearch; that area is prime real-estate, and it wasn't even getting used for anything
-If everything worked correctly, the cursor should shift focus to the QuickSearch when the page loads
-spiffy "► play" button for QuickSearch :p
-spiffy attention-grabbing star with inbox link. This should be very familiar to everyone, and just seems like a no-brainer to me.
-"why join?" link. We need one. A comprehensive list of the benefits of being a member; there are lots... and if we don't have this, nobody is going to bother digging through the site...
-site store/donation is more visible next to the logout button, while not being intrusive
-better logout/home locations
-better locations for everything...
-Distinction made between Home page, members.main page, and forum
-the "." left in MEMBERS.MAIN PAGE for familiarity
-Other page heading should be something like "Fans > Local Downloads" "Help > FAQ"
-Possibly add page descriptions for each of the main menus so the site feels more personal
-possibly allow the user to scale the width of the page somehow
-I think the Home Page (teh wut page? lol) should be the Header with Full Menus so that prospective members can see everything that the site offers; just disable all the links so people have to log in to use them. Beneath the header can be something like what we have now: AMV Spotlight/Announcements/login. Maybe include the global statistics, and maybe polish is up a bit with some graphics to look like more of a Splash Screen.

discuss.
or make your own mock-up.
or modify my version with html/css/photoshop.
or whatever.

/goes to bed

[Enigma]

That doesn't look too bad Phan

[Corran]

(You'll have to forgive me since I don't have hosting after geocities ended,
and I'm too lazy to search the web for good free hosting...)

Dropbox, the service I used for hosting those files, is free for the first 2GB. It is primarily used for automatically syncing files across multiple computers but you can provide public links to files if you put them in a public folder.

(p.s. if you or others decide to try it for hosting mockups, might I suggest using my referral link. We would then both get an extra 250MB of storage. https://www.dropbox.com/referrals/NTI3N ... src=global )

RE: the mockup itself. It is 2am and I'll be fairly busy from now till next week so I can't say much but my first impression is that the design is busy. My eyes didn't want to focus in any one area. I really prefer three column layouts and something closer to 960 pixels for the width. http://www.w3schools.com/browsers/browsers_display.asp

I do like a few of the changes you are suggesting though. I may post in more detail sometime next week when if I get a chance...

[trythil]

http://gitorious.org/a-m-v-org-v2
https://www.pivotaltracker.com/projects/136564

This is not a mockup: it is executable code.

Deployment will be done to http://org.ninjawedding.org whenever I get a chance to finish the two starred stories, which I do hope will be sooner rather than later.

You may submit patches, and I reserve the right to reject them. If people find this unfair, you have the option to fork the codebase.

[Knowname]

Here's a simple request (that may or may not be in Phan's big ole spoiler... but I don't think it is) that was suggested by Gotegenks (??) in genamv, it would be cool if we had a way to see the subforum's information in the master forum?

say (and I'm not a coder so... this won't be pretty) in genamv we have, a long with some recommended amv threads

review thread *last reply 11-26 2am
review thread *last reply 11-25 9:41pm
general question *last reply 11-25 9:30pm
> recommended AWSM amvs *last reply 11-25 8:27pm
review thread *last reply 11-25 6:50pm

and at the bottom (or in our control panel or wherever you like) there is the option to hide messages from 'x' subforum (say, if there's two and you'd like to see one, but not both)

I don't know how much we can code into the forums but. I think this would easily cut down on the 'dead' subforums.

We would also need a pull-down list to tell the forum what forum you want to make new topics too. but other forums (pcvsconsole.com, delphiforums.com) have this. Only Delphiforums.com has the drop down menu... but pcvsconsole.com has a decent format I've enjoyed for a very long time that mixes multiple forums into one list. Perhaps it would get too chaotic with ALL forums in one list... but if we can just do this with subforums.

[Phantasmagoriat]

That doesn't look too bad Phan

Thanks.

Dropbox, the service I used for hosting those files, is free for the first 2GB. It is primarily used for automatically syncing files across multiple computers but you can provide public links to files if you put them in a public folder.

(p.s. if you or others decide to try it for hosting mockups, might I suggest using my referral link. We would then both get an extra 250MB of storage. https://www.dropbox.com/referrals/NTI3N ... src=global )

I can't believe I didn't clue into that earlier -_- Will check out the referral link

RE: the mockup itself. It is 2am and I'll be fairly busy from now till next week so I can't say much but my first impression is that the design is busy. My eyes didn't want to focus in any one area. I really prefer three column layouts.

I do like a few of the changes you are suggesting though. I may post in more detail sometime next week when if I get a chance...

It might just be because I didn't really format the Announcements, or because of the asymmetrical two-column layout, but I know what you mean. In that respect the three column layout isn't so bad because it allows you to focus on the middle area, I just think the left menu takes up unnecessary space, and is a bit redundant with the existence of a top menu.

and something closer to 960 pixels for the width. http://www.w3schools.com/browsers/browsers_display.asp

Oh I totally agree there. I mostly used 760px so it would fit here in the forum, which may also be why it looks a bit busy, but that shouldn't be a problem when I get an up-and-running-website. If it's possible, I think the org should have a scalable width that depends on the window size so that users with smaller screens can still navigate easily. However (and I don't know if this is possible) it would have an upper bounds of 960px (so it doesn't look stretched on higher res monitors) and a lower bounds of and 760px (so it doesn't wrap everything and look messy on mobile devices with tiny 480px screens).

http://gitorious.org/a-m-v-org-v2
https://www.pivotaltracker.com/projects/136564

This is not a mockup: it is executable code.

Deployment will be done to http://org.ninjawedding.org whenever I get a chance to finish the two starred stories, which I do hope will be sooner rather than later.

You may submit patches, and I reserve the right to reject them. If people find this unfair, you have the option to fork the codebase.

Thanks. I'm still very new website design, and I'm not sure what I'm looking at just yet,
but I will check this out when I get a chance.


@Knowname: The idea sounds similar to RSS feeds, and I think I know what you are getting at. New content just needs to be more visible, while still being organized, like the Review Thread, the Recommended AMVs subforum, (or even this subforum to a certain extent). But yeah, visibility and organization are hard to balance.


/goes to play around with more designs

[Corran]

I just think the left menu takes up unnecessary space, and is a bit redundant with the existence of a top menu.

One reason for keeping it is that touchscreen only devices or users with handicaps that inhibit their use of a mouse may have problems interacting with a drop down on hover style menu. Even better for mobile users would be to have a separate layout to be displayed to mobile devices but that would mean maintaining multiple layouts or at least stylesheets. (If not too difficult, perhaps the left hand menu could be optional in user settings and if a mobile device is detected it is displayed regardless of the setting?)