Design and Layout Mock-ups...

Post Reply
User avatar
Knowname
Joined: Sat Nov 16, 2002 5:49 pm
Status: Indubitably
Location: Sanity, USA (on the edge... very edge)
Org Profile

Re: Design and Layout Mock-ups...

Post by Knowname » Fri Dec 03, 2010 4:10 pm

Phantasmagoriat wrote:
See with tabbed pages I can only have one tab open at a time (unless the page is cut off into multiple tabs, like a seperate one for each section... similar to linux desktops), I'd rather have expandable menus as we have now :x
Why would you need more than one tab open at a time. Having all that expanded would take up too much space IMO.
agreed about the multiple tabs thing, it would just get too unwieldy, just leave it as is. or perhaps a hybrid of the two.

See the thing I see is the way I see it (and the way things are set up now), I mostly use the journal system so I have the 'my account' menu open, every so often I search for amvs and I vainly like to look at my previous ops given from time to time. I'm just saying if all the menus were seperated in tabs that dominate the entire screen than how could I go from one section to the next in just one click? Not only that, but what if I don't remember that the 'ops given' link is in the fans section, and I go looking for it in community or something else. This just adds to my downtime, I'm just saying tabs would just be HORRIBLE and make me spend 3x as much time going from section to section in this stupid place.

So what would we do? put multiple tabs on the page? #1 I don't think I'd like the way it would look BUT MORE IMPORTANTLY #2 (and this is a current 'problem', what if there's some new epic interview that I might be interested BUT I never look there any more because it hasn't changed for 5 years! What's gonna tell me to open up all of the tabs/ menus to check these things that RARELY change?

Maybe a new notice? IMHO this section SHOULDN'T be collapsible :/ I don't really like it though, it can get too messy, it's just text on a page, it can get crowded (wall of text) and it's non-interactive. What I'm trying to get at is NEW UPDATED sections should be highlighted in a notification type deal, BUT the 'notice' section alltogether needs to change. Those aren't 'notices' their announcements! Notices are interactive messages that tell you what changed since your last visit :P they dont just sit there like stoic text on the page, this doesn't suite my purpose! If changed this announcement section SHOULD be collabsible, but the NOTICE section should not. Maybe it should be more at the bottom of the page though, like the other interactive sections (your ops, qc's, alerts, new vid and so on)
Phantasmagoriat wrote:
Arashinome wrote:Phan: I'm not liking the color scheme to be honest, the orange color really is coming off very ugly and intrusive. I was talking to NME and he suggested maybe using green as the primary color in the design. I agree with this.
Ileia wrote:Yeah, I also find the orange to be rather agitating.
:rofl: the aesthetics is just an afterthought I'm playing with. The color scheme can be changed easily in the css at any time. I just used Orange and Blue because it's similar to the current site. I think the org would look good with some pastels/lights because those are the types of colors common in anime. I think that's why we have the current pinkish-orange in the header. But if you have ideas, maybe discuss them in the Design thread (what do you think of the textures/gradients/roundcorners?), or maybe someone should create a new thread for Aesthetics... IDK...

I'm glad to see people are starting to provide input. This is exactly what we need.
Ileia just wants everything to be pink... and Joey's just insecure :|
If you do not think so... you will DIE

User avatar
BasharOfTheAges
Just zis guy, you know?
Joined: Tue Sep 14, 2004 11:32 pm
Status: Breathing
Location: Merrimack, NH
Org Profile

Re: Design and Layout Mock-ups...

Post by BasharOfTheAges » Fri Dec 03, 2010 4:46 pm

@phan: I do, i was just responding to godix's comment about data on current usage. Major rehauls of UI are pretty much a start from scratch kinda thing - we don't really need usage data if we're admitting it was so bad to begin with that we'd need an overhaul. Poisoned well and all that.

If I didn't want an overhaul, i'd be pointing out that the small subset of people on the site (the ones here that DO participate in the forums) represent a selection bias in their feedback (in that they're not the 99% majority of they site we're claiming this re-do is for). :ying:

In actuality i'm sick and i've taken over 2 times the recommend dose of nyquil without falling asleep, so my mind is currently fixated on pointing out complicated logical messes that have no real answer.
Anime Boston Fan Creations Coordinator (2019-2023)
Anime Boston Fan Creations Staff (2016-2018)
Another Anime Convention AMV Contest Coordinator 2008-2016
| | |

User avatar
Phantasmagoriat
Joined: Mon Feb 06, 2006 11:26 pm
Status: ☁SteamPunked≈☂
Contact:
Org Profile

Re: Design and Layout Mock-ups...

Post by Phantasmagoriat » Fri Dec 03, 2010 5:27 pm

Knowname wrote:than how could I go from one section to the next in just one click?
Use tabs in your browser: Hold ctrl, then click the link you want to open in the new tab. If you want to open in a new window use shift+click. To navigate forward between tabs, use ctrl+tab. To navigate backwards use ctrl+shift+tab.
Knowname wrote:Not only that, but what if I don't remember that the 'ops given' link is in the fans section, and I go looking for it in community or something else. This just adds to my downtime, I'm just saying tabs would just be HORRIBLE and make me spend 3x as much time going from section to section in this stupid place.
:rofl: I think you are underestimating yourself
Knowname wrote:what if there's some new epic interview that I might be interested BUT I never look there any more because it hasn't changed for 5 years! What's gonna tell me to open up all of the tabs/ menus to check these things that RARELY change?
That's what the Alert and Announcement tabs are for. They change color and have attention-grabbing stars whenever there is new content.
Knowname wrote:Those aren't 'notices' their announcements! Notices are interactive messages that tell you what changed since your last visit :P they dont just sit there like stoic text on the page, this doesn't suite my purpose! If changed this announcement section SHOULD be collabsible, but the NOTICE section should not. Maybe it should be more at the bottom of the page though, like the other interactive sections (your ops, qc's, alerts, new vid and so on)
There are big differences between Announcements, Notices, and Alerts.
Announcements are things everyone needs to know at a particular time - ex.)Updated guides, Logo contest
Notices are like announcements, but are applicable all the time - ex.)Please Donate, Check your spam filter
Alerts are things that pertain specifically to you - ex.)Subscriptions, PMs, Forum Posts

Visibility-wise, I think Alerts > Announcements > Notices
Announcements are perhaps more important than Alerts, but you can have Alerts that tell you to check any new Announcements and Notices. If we do this, I would be alright with putting them both at the bottom of the page, so that the 'meat' of the site is most visible. People don't need to be bogged down by having announcements/notices constantly in their face. They just need to read them once. Having an Alert inform you of new announcements would achieve that. You might be on to something regarding making Notices non-collapsible

Knowname wrote:Ileia just wants everything to be pink... and Joey's just insecure :|
Actually, Orange is associated with a lot of attention-grabbing things like Construction and Caution signs, so I see where they are coming from. While we do need to grab people's attention, it needs to have more of a positive spin instead of giving people heart attacks. That being said, the current site uses a lot of orange, so I'm kind-of used to seeing it.


@bashar: Yeah, I see what you mean. I think the org would be best to just borrow ideas from other successful sites. Oh, and good luck with your insomnia :]
Image
Org Profile | AMVGuide | Phan Picks! | THE424SHOW | YouTube | "Painkiller"

"Effort to Understand; Effort to be Understood; to See through Different Eyes."

User avatar
Knowname
Joined: Sat Nov 16, 2002 5:49 pm
Status: Indubitably
Location: Sanity, USA (on the edge... very edge)
Org Profile

Re: Design and Layout Mock-ups...

Post by Knowname » Fri Dec 03, 2010 5:44 pm

Phantasmagoriat wrote:Use tabs in your browser: Hold ctrl, then click the link you want to open in the new tab. If you want to open in a new window use shift+click. To navigate forward between tabs, use ctrl+tab. To navigate backwards use ctrl+shift+tab.

:rofl: I think you are underestimating yourself
I don't even use hot keys (other than ctrl-c ctrl-v :)) what makes you think the casual viewer would? not to disagree with you, but just for argument's sake :) I just think tabs are a bad idea.
If you do not think so... you will DIE

User avatar
dreamawake
Prodigal Pen-Throttle
Joined: Mon Apr 17, 2006 1:50 pm
Status: NMEs Prodigy
Location: Nowheresville, NJ
Contact:
Org Profile

Re: Design and Layout Mock-ups...

Post by dreamawake » Fri Dec 03, 2010 6:00 pm

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

User avatar
Phantasmagoriat
Joined: Mon Feb 06, 2006 11:26 pm
Status: ☁SteamPunked≈☂
Contact:
Org Profile

Re: Design and Layout Mock-ups...

Post by Phantasmagoriat » Fri Dec 03, 2010 7:00 pm

Knowname wrote:I just think tabs are a bad idea.
Tabs in the website, or tabs in your browser?
Arashinome wrote: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
Image
Org Profile | AMVGuide | Phan Picks! | THE424SHOW | YouTube | "Painkiller"

"Effort to Understand; Effort to be Understood; to See through Different Eyes."

User avatar
Corran
Joined: Mon Oct 14, 2002 7:40 pm
Contact:
Org Profile

Re: Design and Layout Mock-ups...

Post by Corran » Fri Dec 03, 2010 7:32 pm

Phantasmagoriat wrote:
Corran wrote: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:
Image

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.
Phantasmagoriat wrote:I'm a novice at html/css :nose: Thanks for the input and I'll keep these in mind, but most of the people affected are IE users :asd: 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
Phantasmagoriat wrote:
Panky wrote: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 :sweat: 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.

User avatar
Knowname
Joined: Sat Nov 16, 2002 5:49 pm
Status: Indubitably
Location: Sanity, USA (on the edge... very edge)
Org Profile

Re: Design and Layout Mock-ups...

Post by Knowname » Fri Dec 03, 2010 7:37 pm

Phantasmagoriat wrote:
Knowname wrote: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
If you do not think so... you will DIE

User avatar
Phantasmagoriat
Joined: Mon Feb 06, 2006 11:26 pm
Status: ☁SteamPunked≈☂
Contact:
Org Profile

Re: Design and Layout Mock-ups...

Post by Phantasmagoriat » Fri Dec 03, 2010 10:13 pm

Corran wrote: 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.
Corran wrote:
Phantasmagoriat wrote:I'm a novice at html/css :nose: Thanks for the input and I'll keep these in mind, but most of the people affected are IE users :asd: 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 :wink:

Corran wrote: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.
Image
Org Profile | AMVGuide | Phan Picks! | THE424SHOW | YouTube | "Painkiller"

"Effort to Understand; Effort to be Understood; to See through Different Eyes."

User avatar
Phantasmagoriat
Joined: Mon Feb 06, 2006 11:26 pm
Status: ☁SteamPunked≈☂
Contact:
Org Profile

Re: Design and Layout Mock-ups...

Post by Phantasmagoriat » Mon Dec 06, 2010 3:24 pm

Reference to another post:
LittleAtari wrote: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 :wink: )
Image
Org Profile | AMVGuide | Phan Picks! | THE424SHOW | YouTube | "Painkiller"

"Effort to Understand; Effort to be Understood; to See through Different Eyes."

Post Reply

Return to “Org Redesign”