Feedback Needed: Nyx's Lounge

[nyxmidnight]

Greetings fellow site builders! I need to ask a favour of you all.

As you may or may not know, I have been working on a new design for my Shin Megami Tensei fansite, Nyx's Lounge, for... well, probably over a year by now if not two. I've finally found a design that I like, but before changing the whole site I'd like to get some opinions and feedback on the new layout.

The demo is over there: Nyx's Lounge demo. Not all the links are working; follow the DEMO labels please! For comparison, here is the old site. Comments and critiques welcome.

[Larissa]

I really like the new design! It's intuitive and easy to browse, and being responsive definitely helps.

Two things I might change: I find the fact that the header & nav shrink when you scroll down really distracting. It's a nice touch the first time you see it, but when it's on every page it's a little disorienting to the eye when you're meant to look at the content further down. Admittedly, I'm on a pretty small laptop screen so the header already takes up a fair bit of space, so I have to scroll down no matter what. Personally, I like the smaller version of the header better, without the HTML, CSS, etc links at the top and the smaller logo.

It also might be worthwhile having multiple header images for different sections of the site? Just a thought, but it might add some more interest to the design. I like the clouds, but from what I know about SMT it has a lot of really gorgeous art and designs, and it'd be neat to see some of those.

I really love the framework you're using, though! I need to look into what HTML5 and CSS3 can do myself, I'm not very good at it yet myself, haha. The design is gorgeous and really easily navigable.

[Aku]

The old Nyx's Lounge holds a lot of feels for me...! XD But I actually really like the direction you're going with the new layout, it's very clean and easy to navigate, and I feel like you've allowed your content a lot more space to breathe! I like Larissa's idea about multiple header images as well (or even just a more definitive header image)! I can see how you might be avoiding it if you're worried about copyright, but it would definitely bring the Megaten feel to the layout and give the header some character.

The collapsing header doesn't bother me too much, from a UI perspective it makes sense to do that since the additional information you've put in your header (HTML/CSS/etc links) are not necessary to see as you're navigating the rest of the site. To Larissa's point, it's more of a question whether or not that information is important enough to include in your header, and whether or not it's worth that functionality for someone with a much smaller resolution.

I'll have to take another look on my laptop later (on my gaming PC atm and my monitor is enormous LOL), but the size of the body copy could probably stand to be a little bigger since the site is rather text heavy. It makes it a little hard to read with the color and small size. Maybe make it a pixel or two larger, and keep a wide line space?

Otherwise, I'd say it's very classy and a great improvement on the previous version! Sorry for the tl;dr, I'm a UI Designer so by nature I get excited by revamps/new layouts. I hope I helped a little! I'm excited to see the full site in a brand new format. :)

[LadyDB]

Wow, both are really beautiful. Personally, I like the old site because it's got a character on there, it's more colors, more fun. ^_^ But the new one is so sharp and fancy. It kind of reminds me of a business site. Maybe if you had a picture of a character on there instead of that gray block of clouds? It's just a little TOO sharp and fancy for my tastes, lol, or maybe I'm biased because I really like your old design. ^0^

Good luck! Love the site, either way. xD

[dubiousdisc]

Very sleek! And I am very partial towards the color teal but I love the color choice :)

I am assuming that there will be an actual artwork on the header and that the clouds are placeholders, right?

I don't think you need the resizing navigation. The size it is when you scroll down seems good to me, and the links that are hidden on the top don't even need to be there at all. I don't think you need the "built with this and that" links. Your tumblr link is fine being just on the footer, and the doujinshi store could be part of the navigation itself (but get rid of the dollar sign icon - nobody's gonna click on that!).

I agree with Aku in which the text could be a little bigger, or if you want it to be this size then the content width has to be smaller. It's mostly a matter of readability of each row of text. I have read studies about the optimal number of characters per row being 60 to 120, and you have about double that, haha.

I really like the headings, and I really like the star dividers.
I also really like the footer. :)

I think that there might be too many main headings for each page. Like, I'm seeing the About page right now, and basically the whole page I see before the fold is headings! If I scroll down however it seems better, so this problem might go away if you just resize the navigation to be smaller.
Personally, I would move the main heading with the path navigation to be in between the top image and the content. As it is now it's a bit out of place and one could have problems reading it as part of the page itself since it's in the header. Here is a screenshot of a way in which it could be moved.

But I really REALLY like the way that main heading animates on page load. :)

Very minor changes: possibly move the balloon tips of the dropdown navigations to be aligned with the little down arrows after each item. Possibly move the site logo a bit to the left (aligned with the content).

This sounds like I have a lot to nitpick on but I actually like the layout a LOT. :D

[nyxmidnight]

Thank you for the great feedback, everyone! I know I could count on you :D It'll help me make the site even better.

I know the old layout has a lot of sentimental value for a lot of people by now, and even for me, honestly, but unfortunately it is table-based, unresponsive, and difficult to manipulate. On top of that, I don't think I have the original image file of the layout anymore, and even if I do, I think it's a 1024x768 image or something like that. This is why I'm happy that you are mostly happy with the new one, as I know replacing that layout will be delicate.

The Header

All the headers/nav of this template/framework I'm using have the shrinking effect. However, there is indeed a smaller header with no logo, just the name of the site and the nav without the link and icons above. I could try setting up another page with that header to see if it'd be more appropriate for the non-index pages of the site? I'm really enamoured with the logo I made, I admit it, but if it makes more sense to remove it for inner pages I understand.

I realize there are a lot of headings. I am seriously rethinking that teal breadcrumbs, because really, my site never goes more than 3 levels deep. I think I could get rid of it entirely, it's very redundant with the h1 heading in the dark block just underneath. I like how you moved it too, dubiousdisc. I'll have to see if I can move it down on my side to make it better.

As for the header images, I definitely need something more Megaten-y. I know in my files somewhere I have tiles of the Nocturne dungeon wall patterns, and the hexagonal design from Digital Devil Saga, perhaps that could be something? Drawing something, of course, would be the best solution, but I don't have time to draw anymore because of work D: I'm totally open to using Atlus art, though, so if you guys have any ideas for images I should put there, let me know!

The Typography

Personally, on my home laptop set to max brightness, I'll be totally honest, I have trouble seeing the text and I wanted to know if it was just me. Making the text darker and bigger definitely sounds like a good idea I will use when I tweak the layout.

I am also wondering about the teals of the headings, alternate font and links. Another friend told me that he expected all the teal text to be clickable and got confused? Perhaps different shades of teal could help?

I really love the dividers too, dubiousdisc :D I love what HTML5 and CSS3 can do nowadays!

Stay tuned for the modifications and the eventual launch, and again, thank you all so much!

[Mikari]

I don't mind the resizing nav, but then I'm used to having a billion windows open with blinking things all over my task bar, so a resizing navi bar isn't nearly enough to distract me. XD

I agree about the banner, it would be a nice touch to have a rotating banner with more MegaTen to it. Right now the site looks kind of business-like, which might make some people close it before they realize it's actually an awesome fansite and not a broken link leading to some business.

The animations are smooth and fun. The content is organized and easy to access,very friendly navigation and great presentation. Just add a little color and it'll be perfect.

I can read the text, but then I mostly have my computer do the reading for me so I'm not sure how it would be for someone reading the whole site, a little more contrast might be good I guess.

Overall you're doing great. ^^

[Camy]

I'm not bothered by the resizing of the header and navigation when I scroll. I guess it's because I'm so used to seeing stuff like that xD

I really love that logo by the way, so simple and relaxing. In fact, the colors used overall throughout the site just is lovely.

The only thing I suggest to change is the content text color. It's really light on my screen, which is pretty large due to my monitor. I think the reason why is because all of the gray being rendered on mine washes out the gray being used and I have to squint to read the content and blink my eyes. Just a shade darker could do the trick~

[nyxmidnight]

Resurrecting this thread for I made the font darker AND bumped up the size! The internet has also taught me how to make the titles different and highlight different menu items while using includes, so the conversion to php is ongoing. All pages under the Site header now work and are up to date.

[Robin]

Awesome! Just to clarify, are you still working off the demo folder or does this describe changes to the main page?