[amv.ninjawedding.org] Typographic revamp

[irriadin]

It looks very nice, but I agree with the others that there needs to be a link to the homepage somewhere... tucked into the top left corner would be the perfect spot for it.

[siny]

This is looking awesome!

Other than Brad's suggestion about the "Show All" link, I'm missing the logo on the top and a little menu too.

1) About the logo
Most people usually leave a link, for example, on youtube, to their video so people can download or check some more detailed info. For those new to a-m-v.org, they will think that's probably my blog. It's cool to have a clean video profile page, but you're also losing the identity of a-m-v.org. For example facebook, everyone has their own profile page but the top stays always the same.
Then again, I have no idea if this won't be implemented later, so sorry for that

2) About the menu
It's very unusual for a website to have the menu at the bottom and studies show that most people will look for a menu on the top or on the right, because the human eye reads in a form of a Z. Only secondary links should be at the bottom, because people are lazy to use the scroll. And seriously, how many times do you have to explain to someone where a link is when it's right in front of them? So my guess is, some people would take a long time to figure out where is what.

These two things can be really discrete, and also greyish. Like, again, facebook with the blue color.

Oh and maybe as a solution to videos where you have a big list of animes, you could move some of the fields to the top of Editor's Comments, like the name of the editor(s) and the premiere date.
Apart from these small details, I really love the typography and the colors are very clean! I'm now even more curious about the rest!

Keep up the good work!

[irriadin]

It's very unusual for a website to have the menu at the bottom and studies show that most people will look for a menu on the top or on the right, because the human eye reads in a form of a Z.

There can be a minimalist top navigation. There's a lot of empty space that you can utilize up there. Fitting with the rest of the design, you'd probably go with simple text-based links with dropdowns for further specificity in those categories.

One other thing is that the content body looks a little... unformed. There's not much direction or visual hierarchy. Introducing some kind of contrast or visual element to the right column might make it look more cohesive. Also maybe increase the size of the headline elements, like "editor", "studio", etc.

[I Fight For The Users]

This is looking awesome!

Other than Brad's suggestion about the "Show All" link, I'm missing the logo on the top and a little menu too.

1) About the logo
Most people usually leave a link, for example, on youtube, to their video so people can download or check some more detailed info. For those new to a-m-v.org, they will think that's probably my blog. It's cool to have a clean video profile page, but you're also losing the identity of a-m-v.org. For example facebook, everyone has their own profile page but the top stays always the same.
Then again, I have no idea if this won't be implemented later, so sorry for that

Video links are in progress: https://github.com/amvorg-underground/catalog/issues/17

2) About the menu
It's very unusual for a website to have the menu at the bottom and studies show that most people will look for a menu on the top or on the right, because the human eye reads in a form of a Z. Only secondary links should be at the bottom, because people are lazy to use the scroll. And seriously, how many times do you have to explain to someone where a link is when it's right in front of them? So my guess is, some people would take a long time to figure out where is what.

These two things can be really discrete, and also greyish. Like, again, facebook with the blue color.

Priority of links hasn't been decided yet, so I haven't put anything at top. I likely will not add a sidebar -- it's too imposing. I do know that the majority of the top of the page will be a search box; see https://github.com/amvorg-underground/catalog/issues/33.

There can be a minimalist top navigation. There's a lot of empty space that you can utilize up there. Fitting with the rest of the design, you'd probably go with simple text-based links with dropdowns for further specificity in those categories.

In nearly all cases where they are used, dropdowns are lazy design. (Given X functions, the easiest way to make them all accessible is to drop them all into a list and make the user decide what to do.) I am committed to avoiding them.

One other thing is that the content body looks a little... unformed. There's not much direction or visual hierarchy.

There's an article and an aside in left-to-right order; for Western readers, that's pretty structured.

I don't understand what "unformed" means; however, if the content body looks empty, it's because there just isn't that much information there yet. There's plans to add more value, see e.g.

https://github.com/amvorg-underground/catalog/issues/29
https://github.com/amvorg-underground/catalog/issues/30
https://github.com/amvorg-underground/catalog/issues/31

However, I'm very wary of adding visual elements: there are often better ways of improving information design. We did experiment with separating the sidebar with gray borders and background colors, but that ended up drawing too much attention to the sidebar.

[Chained(E)Studio]

However, I'm very wary of adding visual elements: there are often better ways of improving information design. We did experiment with separating the sidebar with gray borders and background colors, but that ended up drawing too much attention to the sidebar.

What about just a small line that separates the editor's comments from the video information? Right now it just looks like a blanket of white and everything just folds together.

Aside from having gray borders & different background colours is there no other way to divide the contents? Even if it were a thin line with a small gradient/shadowing in either side. Not large but just enough to let the viewer know its separate information..

(giving it more of a realistic 2 column feel)...?

[I Fight For The Users]

However, I'm very wary of adding visual elements: there are often better ways of improving information design. We did experiment with separating the sidebar with gray borders and background colors, but that ended up drawing too much attention to the sidebar.

What about just a small line that separates the editor's comments from the video information? Right now it just looks like a blanket of white and everything just folds together.

Aside from having gray borders & different background colours is there no other way to divide the contents? Even if it were a thin line with a small gradient/shadowing in either side. Not large but just enough to let the viewer know its separate information..

(giving it more of a realistic 2 column feel)...?

I'd prefer to hold off on adding visual elements for organization's sake until more subsystems that will have a home on a video info page are in place (see e.g. issues 30, 31, and 32). Adding information from those subsystems will change the way the page is organized.

That said, I do think the no-line setup that exists right now is fine. The spacing and page width might be a bit large, and may need to be adjusted -- but I won't know that until more of the page is filled in. I've got a few books (like this one) that use the same layout, and IMO it's very effective.

[BasharOfTheAges]

Font renders exceptionally thin in places (in Firefox 3.6.28 - what I'm forced to use at work)

How does this handle non-standard character sets?

[I Fight For The Users]

Font renders exceptionally thin in places (in Firefox 3.6.28 - what I'm forced to use at work)

I'd like a screenshot, along with more platform details. (Windows XP/Vista/7 with ClearType enabled/disabled, etc.)

How does this handle non-standard character sets?

Okay: http://amv.ninjawedding.org/videos/a1tr ... rup0y49wt3

The application delegates character encodings to its framework (Rails 3.2.6, if you're interested), which seems to do a pretty good job in that regard. Rails defaults to UTF-8 for input and output; the database is CouchDB, which stores stuff as JSON, whose default encoding is UTF-8; and the search index is using Solr, which also defaults to UTF-8.

As you can see from the above example, mixed LTR -> RTL isn't supported. I have no immediate plans to make that work, but if someone wants to give it a shot, I'll look at a patch.

That said, I have imported data from the .org that contains lots of invalid UTF-8 sequences. The .org seems to send HTML as ISO-8859-1, but I'm not sure if that's entirely true -- I tried to fix the invalid sequences by running the downloaded HTML through iconv, and that didn't really help. Still investigating that one.

[BasharOfTheAges]

Font renders exceptionally thin in places (in Firefox 3.6.28 - what I'm forced to use at work)

I'd like a screenshot, along with more platform details. (Windows XP/Vista/7 with ClearType enabled/disabled, etc.)

XP - can't give any more details or a screenshot though, sorry.

[I Fight For The Users]

Font renders exceptionally thin in places (in Firefox 3.6.28 - what I'm forced to use at work)

I'd like a screenshot, along with more platform details. (Windows XP/Vista/7 with ClearType enabled/disabled, etc.)

XP - can't give any more details or a screenshot though, sorry.

This is what TypeKit's telling me:



Is this accurate?

(There's not much I can do about this; I'm just curious. FacitWeb Light renders fine under Safari, Firefox, and Chrome on Windows 7, Ubuntu 12.04, and OS X 10.6+; changing the typeface for what is increasingly becoming an anomaly is IMO not worth it.)