Hey, guys! So my good friend Psychobilly2422 and I have put together a prototype for portal navigation to appear on the main page: here. Essentially, this is designed to replace the "Category Primer" and "Final Fantasy Series" indexes with a more user-intuitive and eye-catching design, partly based on the navigation you see on other wikis. If anyone doesn't get what it is, it's meant to be based on the FFVII menu. We'll probably add links to the DNC and IRC channel below before we do that, but that'll just be basic stuff. I'm posting this to ask if people approve of include the navigation at all, and where they want it included. My instinct would be to put it at the top of the main page, above Featured Article, and then remove the FF series and index below. Secondly, any critique on the design, or things we can change? One idea I had was having the FFVII menu background appear as the default, and only the cursor hand appears when hovered over, but then again, I do really like the transition currently in place... the other thing was having the FFVII menu gradient appear as a background for the whole thing, but the background on the images currently unchanged. Anyone have any critique also on the images chosen? | |||
Discussion
When you said "If anyone doesn't get what it is, it's meant to be based on the FFVII menu." I thought that it would look more like that actual menu and not icon based. Like there would be bars with images and names on them and when you'd hover over them, then on the side there would be something more like that icon thing. I might make a visualization of what I mean if you want but I think what I imagine might not exactly sit well with an average user, especially with lots of traffic coming from mobile devices. Is there an article you think is of an exceptional quality? Vote for it here! | |||
I think the blue should be the same blue as on the crystal shards on the right of the wiki. And if the images could have a unified style, but that could be hard to accomplish. Amano art pics would look great and perhaps be the most unifying "Final Fantasy" thing the series has going on, but not everyone is a fan of that style. FF logos are always Amano art on a white background and I always thought the wiki was going for that effect with the white background and the blue crystal art. | |||
Kaimi: SCM picked up on the white-silverish outlines earlier, I'm not really sure what to do about that, though. There's already a Moogle included on the main page, so I went with Cactuar instead. Also, do not worry about mobile users for the main page, they use a completely different curated main page. Which I will edit after we've finished iwth this design. So feel free to share your idea, but the less complicated it is, the better for readers. Kelt: I think uniform designs would be a decent idea but it'd be almost impossible to pull off. A large part of the reason I went with such diverse images is just that the series is full of diverse imagery, really I'm most disappointed I didn't get a sufficient image to show off the sci-fi settings as well. If there was a sufficient category I could use for "Setting", I'd love to do that, I'd love to add five more categories but I don't think there are five more good ones. | |||
My best "artwork thumbs" effort. Ten categories is good, you don't want too much clutter. Portal's a good idea regardless of the final style! | |||
looks all good to me. Not a fan of the "background fades to blue" effect though, just having the background turn blue is more visually striking and immediate.
| |||
The idea seems okay. I feel that it isn't really something we need, but I have indeed seen similar designs across Wikia, so I'm okay with it. We definitely need to work on its look though. As it stands, the colouring, the frame of each category and even the font could use a retouch. | |||
It looks fine for now, but I agree with the Faesar in that it needs a bit of retouching.
- Agree with Kelt, the game one (first one) looks pretty bad right now with the poor transparent background.
- Elements. What are elements? I know you mean game elements, but there needs to be a better title for this. Or maybe just drop the category altogether from the list.
- The images are a bit too disparate. They need to all be on a blue background or not on a background. I understand that we can't get extremely similar images for everything, but we should keep a central theme at the very least.
- I like the finger. I'm a big fan of the finger. Fingers are my favorite digit, after seven.
- Where's Edward? >:|
- Cid from FFIV gives little children nightmares.
But yeah, good idea. ScatheMote 00:04, December 3, 2015 (UTC)
- Largely agree with Scathe and Fae, also I dunno if we should be using a blue background. The white areas around the transparent images is really obnoxious and it's better to just have a white background so we don't need transparency. Cat (meow ∙ hunt) 00:15, December 3, 2015 (UTC)
- Having the background change colour on mouse over is <3. It makes things feel more interactive, so transparency is good. You can also just have the whole image be more faded when not mouseovered but then it's not as pretty when not being interacted with.
- The FF just needs to be transparented better. JBed (talk) 00:26, December 3, 2015 (UTC)
- Edit: Although I can't support black text on a dark blue bground. JBed (talk) 00:27, December 3, 2015 (UTC)
Thanks for the feedback so far. I'm sure we should probably fix up the Games image, definitely, but I'm not sure how to do it - I kind of want to reuse these portal images for the mobile skin as well, which will have no background, so using the white text would be annoying. On the other hand, I can't think of anything to better represent the games than, well, the FF logo. It looks like everyone agrees with the idea of using the portal, but we'll just need to make a few final touches before it's finished. Regarding the coloring, some people seem to like the background color change from the FFVI menu color to FFVII, some don't. I would be inclined to remove the default blue and the transition to FFVII menu blue, and simply give it the FFVII menu background by default, to avoid the issues lots of people have with the coloring, and since the mouse over can make the finger cursor thingy still appear, it makes it closer to how the menus look while still being interactive. I also think we might want to use a font more similar to the one used in the FFVII menus. As for Elements, Scathe: the category name is "Recurring Elements". Now that could be renamed to something like "Terms", but that's what it's called for now. If everyone's cool with the name "Terms", we can split. Finally about images, I do quite like Kelt's idea. Only problem is, I also think diverse imagery is good, and that lacked images I'd like to include, such as a black mage, Cloud (as the most popular character), a non-Chocobo creature (it's the site logo already) and something from FFX as the second most popular game. Really, what I would love to see would be an image from one of the sci-fi games to show the diversity a bit more. Maybe an "Organizations" category and a "Personnel" category, and making it 12 categories, so three rows of four? Wouldn't be too cluttered, and would add plenty of space. | |||
I'm not a huge fan of the blue backgrounds for some of them. They clash with the icons which are complete images - particularly the Games one. Everything else looks good. | |||
Support adding "Jobs" and "Personnel" if you want 12 categories, but I think 10 is already good. Elements should be "Terms", I also thought it meant like Fire, Ice... Having too varied images there makes it look messy in my opinion. You don't want all elements to clash with each other. The style from the wiki logo could look nice, with more cartoony versions of Cloud and cactuar and whatever, but then maybe it'd look too kiddy (would mesh with the wiki logo though!). | |||
I uploaded a new version of "Games" one. How is it? | |||
Yeah, I'm leaning more towards having the dark blue background as the default. What might be a good idea would be to show multiple different designs and have people choose. As for the Games image, that will look better on the nav now, but the only problem is it won't work for the mobile skin main page when we add it there. I'm personally thinking of just making that a crystal, kind of like what's on the series template. Then, I can replace Locations with a (transparent) image of one of the sci-fi settings. Kelt: I don't think adding a third row makes it too cluttered, most wikis with similar navigation have even more than that, often up to about 20 categories. I get what you're saying with different images and stuff, but I'd have to say it's difficult for us in particular; the series is so diverse with its imagery and settings that it's almost impossible to make them consistent and show off everything. Finally, I quite like "Jobs", but I also kind of wish we had something for "Organisations" as well. If we want to make 15 categories (which I'm fine with doing), I'd add "Jobs", "Organisations", "Events", "Personnel", and on the end I'd add "Walkthroughs". Now that I can show off using the current design, but I'm thinking I'll make a few subpages of the template with different designs, and then we can vote on them. Also, I'm going to move Recurring Elements to Terms, probably tomorrow since I've got a concert today, though. | |||
All the images are from the classic FFs (1-10). I think if we add more categories we need some images from modern games. Some of them are kinda dull too (Location and Others) maybe we can try Midgar (VII Remake) or Eden (XIII) for location and replace FFIV Cid with Cindy from XV.) | |||
Yeah, I agree. For "Jobs" I was going to go with Kain to represent Dragoons, so I will also replace the Cid - I don't know how well Cindy would work, but she might do. Eden for Locations might be an ok idea, as long as the fantasy settings are still represented (but with Music, Abilities and Equipment, they kinda are). For "Organizations" I'd go with anything from FFXII, probably a group of airships belonging to the Empire. As for "Events", I was going to throw an image of the war cutscene at the start of FFXIV in there. That should work? | |||
BlueHighwind Q? 16:01, December 3, 2015 (UTC) TALK - So if you care to find me, look to the Western Sky!ツ: | |||
I like the idea, could use a bit of work on the design of each box. Also I supposed it will be impossible to get that annoying chirping noise that Square Enix puts in every one of it's menus, right? We just need that authentic detail. | |||
Well, if we really wanted the authentic Final Fantasy experience, we could probably onMouseOver() it(? does wikia allow JavaScript events?). Cat (meow ∙ hunt) 23:14, December 3, 2015 (UTC)
- You have full freedom in JS files but you can't use the JS "on" HTML attributes. JBed (talk) 23:31, December 3, 2015 (UTC)
8bit BlackMage - Beyond the Sky TALK - Why do chemists call helium, curium, and barium 'the medical elements'? Because, if you can't 'helium' or 'curium', you... um... ._.; - 01:02, December 4, 2015 (UTC) | |||
I definitely like the blue background over the white, and the finger icon is a nice touch. I think the only thing I'd change is Cid to... well.... not that Cid lol. Maybe the one from FFXII or FFXIII, or if it's desired to have someone from FFIV, throw Kain in there. | |||
Added new images per feedback. FFIV Cid didn't go down well. I could go with FFXIII Cid instead, but I went with FFVI because it's another that's likely to actually be recognised. Any last critique on images? My friend will soon prep the final few designs and then I can put those down to a DNC-ish vote. | |||
Vote
Vote is now CLOSED: Design 3 won. In order to prevent keeping outdated CSS, the other designs will no longer be shown.
And, vote comes as promised! Three updated designs:
- Design 1, with the FFVII menu background just normal, only cursor appears when hovering over.
- Design 2, with a white background as default, the cursor appears when hovering over.
- Design 3, similar to design 1, but with the image appearing faded out until moused over.
And now for a DNC vote...except without the nice DNC designs. Sorry. Vote below for which you think we should go for.--
Technobliterator TC 10:28, December 17, 2015 (UTC)
Votes for Design 1
Votes for Design 2
- I really like the colour transition in this one. — YuanSalut 10:36, December 17, 2015 (UTC)
- On the condition that the walkthrough picture gets changed since the small flash of blue on the top looks bad, I think this one is the best. ScatheMote 15:01, December 17, 2015 (UTC)
- It takes a few seconds for the images on design 3 to load up when I mouse over them, which is... a very awkward period, to say the least. Like, they're there, then they're not, then they're there again. It's very off-putting. Oh, and for the record, I'm against portal navigation in general and conscientiously objecting to this entire ugly process, this one just sucks least. Jimcloud 15:06, December 17, 2015 (UTC)
- Tia-Lewise
15:19, December 17, 2015 (UTC) - It pains me to say this, but the icon for Music and the icon for Locations clash with the others. Otherwise, this is the obvious option. Fëasindë Peth 17:38, December 17, 2015 (UTC)
- DrakeyC (talk) 01:58, December 18, 2015 (UTC)
- BlueLionheart (T/C) 01:34, December 19, 2015 (UTC)
- I like this apart from that hovering over the images makes it blue. also needs more anime tiddy. hexed out. Hexed 01:46, December 19, 2015 (UTC)
Votes for Design 3
- -- Technobliterator TC 10:28, December 17, 2015 (UTC)
- It doesn't really look good with the cursor being the only mouse over effect and the colour change in 2 looks weird on some (equip, ability, walkthrough) and just doesn't work on others. So I guess 3 wins by default. -- Some Color Mage ~ (Talk) 10:34, December 17, 2015 (UTC)
- Monterossa (talk) 11:43, December 17, 2015 (UTC)
- I HAVE THE POWER OF SUFFRAGE! AND ALL WILL SUFFER! I like this one because it looks nicer. Blue backgrounds for the walkthrough tab looks hideous. Don't do that. This looks like it will work. --BlueHighwindツ 15:02, December 17, 2015 (UTC)
- This is the nicest design in my opinion. It has a subtle yet obvious change on mouse over and it's appealing on the eyes. Psychobilly2422 (talk) 17:01, December 17, 2015 (UTC)
- 2 would be my choice, but it has too many issues. Cat (meow ∙ hunt) 20:17, December 18, 2015 (UTC)
- Design is the best. Ѧüя◎ґ (talk) 01:37, December 19, 2015 (UTC)
- --Sove 01:43, December 19, 2015 (UTC)
- Just replace the blue background with the white one of Design 2 and it is done.
TTFan from JP (talk) 09:35, December 19, 2015 (UTC) - Now that both version have all categories listed and the illumination load time is fixed, I do like this one :UUUUUU 8bit 23:20, December 19, 2015 (UTC)
Peanut Gallery
Just place any general comments/ideas here.
Concerns about Portal Nav 3's load time on images: I do have a quick fix for this issue. I can make all the images preload with some special CSS that I can add onto the portal's code. Psychobilly2422 (talk) 17:03, December 17, 2015 (UTC)
The switch between white and blue in design 2 is really sudden (and kind of awkward IMO), because the CSS transition property doesn't work on background-images. It might look better if you did something like this:
<div class='foo'></div>
.foo {
background-image: linear-gradient( /* example gradient */
white 0%, white 50%, /* first half */
red 50%, darkred 100% /* second half */
);
background-size: 100% 200%; /* 2x the height, half hidden */
transition: 1s; /* animate it */
/* presentational stuff */
border: 1px solid red;
height: 100px;
width: 100px;
}
.foo:hover {
background-position: 0 100%; /* show the other half */
}
Of course, getting a gradient to "slide" diagonally would be more work... you'd need to do some trig, and I don't think "vanilla" CSS has any easy way of doing that. :( DarthKitty (talk) 01:07, December 18, 2015 (UTC)
So, with CSS and Gradiants + transitions, you can't combine the 3. You can have a gradient as a background, but the transition will not be that smooth. It'll be abrupt. CSS doesn't allow those 3 things to to be active at the same time. You can have one base color and the smooth transition, but not all 3. Psychobilly2422 (talk) 20:54, December 18, 2015 (UTC)
- You can't technically animate a
background-image, no, but there are some clever workarounds—like thebackground-positionone I demonstrated above. I'm not a CSS guru, though, so don't take my word for it! :) DarthKitty (talk) 00:22, December 19, 2015 (UTC)
Final update
Okay, here's my final update to the main page - this. The ?useskin=monobook is needed there, this is because the right rail in userspace renders wrong with the rail and with typography rules that the main page ignores, because this version of the main page is specifically for desktop, as mobile users view a completely different curated main page. Anyway, monobook also ignores the rules, so viewing that way will display a more accurate version of what the main page will look like. You can also preview by copypasting my sandbox into the Oasis
Basic summary: put the Portal where I said it would go, just above FA. I've also made a few minor changes. The first is removing the number of articles and replacing it with our old "more information than Cid could research" pagetitle, since the number of pages can be seen literally anywhere on the wiki, and we lost the pagetitle due to updates. The second is that I've completely removed the "Index" thing (it's bloated and repeats what's already on {{series}}) and "Other gaming wikis" thing (replaced with the new RPG games footer). Finally, I retooled "Wiki Network" into "Community Portal". This better links to the social media and the forums and IRC, adds links to important community page categories, and still keeps the DNC and Let's Play in, putting them together, and imo giving the Let's Play a less awkward place.
If we're all in agreement, I can save this to the mainpage straight away.-- Technobliterator TC 04:25, December 21, 2015 (UTC)
It's up! I'll leave the forum up for a couple of days, so feel free to report any problems/issues with the new page here. After that, I'll close it, and then future discussion on the portal can go on the main page's talk page.-- Technobliterator TC 04:05, December 30, 2015 (UTC)