[amv.ninjawedding.org] Typographic revamp

[amv.ninjawedding.org] Typographic revamp

Postby I Fight For The Users » Tue Jul 17, 2012 9:54 am

Hi,

AisuzuZwei and I have rethought the typography and layout of the video profile pages. Here are some examples:

http://amv.ninjawedding.org/~jasper-isi ... d%20flames
http://amv.ninjawedding.org/~ileia/rah%20hey%21
http://amv.ninjawedding.org/~zarxrax/58008 (mildly NSFW)

Other examples can be found via the "Random video" link. The comment sections were imported as-is from a-m-v.org, so they will need some work. The deletion notices and character encodings in particular need to be fixed.

The last example is intended to demonstrate that very long lists don't break the layout; all they do is stretch it. In the future I'll be adding Javascript-based collapse code to keep the layout manageable by default. (People who don't want it will of course be able to turn it off.)
I Fight For The Users
 
Joined: 24 Jan 2012

Re: [amv.ninjawedding.org] Typographic revamp

Postby Brad » Tue Jul 17, 2012 10:22 am

I am quite happy with the change to all caps on the title. Overall, a very nice, crisp looking layout. One suggestion. For videos that have a source list of 5+, give us a "Show All" link below them, that when clicked, twirls down the rest of the sources (without reloading the page. I'm sure this can be achieved with some HTML5 finesse). I assume the current poster frames are being pulled directly from the video currently? Would it be possible to give people the option to upload their own image? Similar to how Vimeo (and possibly YouTube. Not entirely sure) allows you to add your own uploaded poster frame.
Image
Ask Brad an After Effects Question! - Forum - Site
User avatar
Brad
 
Joined: 20 Dec 2000
Location: Chicago, IL

Re: [amv.ninjawedding.org] Typographic revamp

Postby Ileia » Tue Jul 17, 2012 10:27 am

Brad wrote: I assume the current poster frames are being pulled directly from the video currently? Would it be possible to give people the option to upload their own image? Similar to how Vimeo (and possibly YouTube. Not entirely sure) allows you to add your own uploaded poster frame.


After you select "Edit Video Information", that becomes an option at the top.
User avatar
Ileia
CornDog Whisperer
 
Joined: 09 Aug 2004
Location: On teh Z-drive, CornDog
Status: ....to completion

Re: [amv.ninjawedding.org] Typographic revamp

Postby I Fight For The Users » Tue Jul 17, 2012 10:30 am

Brad wrote:For videos that have a source list of 5+, give us a "Show All" link below them, that when clicked, twirls down the rest of the sources (without reloading the page. I'm sure this can be achieved with some HTML5 finesse).


Yeah, that's in the works. I think it'll have to be done on page load -- the best way I can think of involves comparing heights of the main section and aside, which requires that the page actually be rendered. I'm not sure what the effects of that will be.

Brad wrote:I assume the current poster frames are being pulled directly from the video currently? Would it be possible to give people the option to upload their own image? Similar to how Vimeo (and possibly YouTube. Not entirely sure) allows you to add your own uploaded poster frame.


Yep. Actually, the poster frames / cover images were uploaded via that exact method:

http://amv.ninjawedding.org/videos/7c6b ... c11qk/edit

There's still some work to be done there. The position input, for example, is very primitive; I put it in there for ease of testing and speed of development. (If you'd like to play with it, the position input accepts the same syntax as the CSS background-position property.) A more polished solution will permit stuff like drag-to-position, which is what e.g. Facebook does.
I Fight For The Users
 
Joined: 24 Jan 2012

Re: [amv.ninjawedding.org] Typographic revamp

Postby Warlike Swans » Tue Jul 17, 2012 11:12 am

I don't see a super-obvious link to the homepage, but other than that it looks good. :up:
User avatar
Warlike Swans
 
Joined: 20 Oct 2010
Status: Pending

Re: [amv.ninjawedding.org] Typographic revamp

Postby I Fight For The Users » Tue Jul 17, 2012 11:17 am

Audio sources are also grouped:

http://amv.ninjawedding.org/videos/cstd ... q45skogc7p

Warlike Swans wrote:I don't see a super-obvious link to the homepage, but other than that it looks good.


The current .org doesn't really have one either. :P (Clicking the logo takes you to the forum. The "main page" link takes you to the main page, but that's only obvious once it's learned.)

That said, there will be a globally available "get back to your dashboard" link, which will probably take the form of a logo.
I Fight For The Users
 
Joined: 24 Jan 2012

Re: [amv.ninjawedding.org] Typographic revamp

Postby mirkosp » Tue Jul 17, 2012 11:23 am

I Fight For The Users wrote:Clicking the logo takes you to the forum.


It's actually a warp pipe (like in mario!) so if you click the logo in the forum, you'll go back to the site's members main page (which means it'll prompt you to login into the main site if you aren't logged in already).
Image
User avatar
mirkosp
MODkip
 
Joined: 24 Apr 2006
Location: Gallarate (VA), Italy
Status: (」・ワ・)」(⊃・ワ・)⊃

Re: [amv.ninjawedding.org] Typographic revamp

Postby Radical_Yue » Tue Jul 17, 2012 11:43 am

I am soooo excited for when this finally goes live.
Image
User avatar
Radical_Yue
stuck in a room with a moose
 
Joined: 04 Feb 2005
Status: The flamer with heart of gold~<3

Re: [amv.ninjawedding.org] Typographic revamp

Postby aesling » Tue Jul 17, 2012 1:43 pm

Looks awesome!
User avatar
aesling
Mad Scientist
 
Joined: 03 Feb 2005
Location: Wall Rose
Status: Human McNugget

Re: [amv.ninjawedding.org] Typographic revamp

Postby Shin-AMV » Tue Jul 17, 2012 1:47 pm

ZOMG. Suh-weeeeeeet.
Image
User avatar
Shin-AMV
 
Joined: 15 Mar 2010
Status: Emo Poptart

Re: [amv.ninjawedding.org] Typographic revamp

Postby irriadin » Tue Jul 17, 2012 2:39 pm

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.
User avatar
irriadin
BUBBLES!
 
Joined: 07 Jun 2005
Location: PA
Status: I fight for my friends

Re: [amv.ninjawedding.org] Typographic revamp

Postby siny » Tue Jul 17, 2012 2:53 pm

This is looking awesome! :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 :oops:

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! :D

Keep up the good work! :up: <3
Image
User avatar
siny
 
Joined: 22 Aug 2009
Location: Portugal

Re: [amv.ninjawedding.org] Typographic revamp

Postby irriadin » Tue Jul 17, 2012 3:42 pm

siny wrote: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.


:up:

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.
User avatar
irriadin
BUBBLES!
 
Joined: 07 Jun 2005
Location: PA
Status: I fight for my friends

Re: [amv.ninjawedding.org] Typographic revamp

Postby I Fight For The Users » Tue Jul 17, 2012 5:34 pm

siny wrote:This is looking awesome! :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 :oops:


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.

irriadin wrote: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.
I Fight For The Users
 
Joined: 24 Jan 2012

Re: [amv.ninjawedding.org] Typographic revamp

Postby Chained(E)Studio » Tue Jul 17, 2012 6:15 pm

I Fight For The Users wrote: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)...?
Image
User avatar
Chained(E)Studio
 
Joined: 14 Jul 2009
Location: Alberta, Canada

Next

Return to Org Redesign

Who is online

Users browsing this forum: No registered users and 0 guests