ballp.it
Snakes In The Ball Pit => Announcements => Topic started by: Lemon on January 01, 2019, 12:17:36 pm
-
Your thoughts? (https://thefpl.us/wrote/about-version-2-2-redesign)
-
Is the logo meant to be cut off on the bottom? Because I really, really don't like that.
There's also a lot of empty gray space above the sidebar, and that's kind of unpleasant too.
I'm also not a fan of the font used for the tags. It's kinda cramped.
Okay, I just checked it out on my phone, and it looks a lot better there aside from the background being a little drab, but I'm really not a fan of the desktop version.
I'm using Firefox on Windows 7 if that makes a difference.
-
I have similar desktop complaints as mique, also on firefox, but Windows 10, like, if the logo was in the top left instead of the large empty gray space it'd be fine by me, I don't mind the font.
the logo in the bottom left gets obstructed in firefox because that's where the hover-over URLs for links appear, so even hovering over the logo causes it to be partially blocked by the website's URL
-
This is a super fringe usecase nowadays, but there's a lot of wasted space in portrait mode (like in tablets):
(https://i.imgur.com/M3ofwf6.jpg)
-
Are the icons at the button left meant to cycle randomly? I didn't like how tiny and missable the ballpit icon was on the old design, and now it only appears on every third refresh of the page. I mean I guess it's a fun game yelling the name of the forums every podcast and then sending people on a scavenger hunt for the link...
Trying to /avoid/ clicking the screen lest I be sucked into a hyperlink is irritating, and the full-panel click area makes almost the entire screen a trap. I'd prefer just the title clickable, or a very obvious button area. Content text, even in a preview, shouldn't be a link.
Other than that, I like the content type tags and the bolded reading: for the short form tiles.
There's my usability notes. Everything else is personal preference.
-
Actual usability:
The date box significantly overlaps the title for a number of the episodes. See: Shorn Crecy, the episode about the English victory in the Hundred Years' War:
(https://i.imgur.com/HJwJWw8.png)
Or F Plus Live 6 Part 1, featuring Bread, S'Heelies, and an empty void in the shape of STOG.
(https://i.imgur.com/IFm2fyP.png)
My fucking web design opinions Lemon's really interested in hearing:
The random focus item makes me think it's a different kind of content from the surrounding, since the visual distinction between episode and "other" is pretty small.
With sixteen fifteen items with one of them double-width per page on a 1080px wide monitor, one item winds up all on its own on the bottom.
-
This is a super fringe usecase nowadays, but there's a lot of wasted space in landscape mode (like in tablets):
(https://i.imgur.com/M3ofwf6.jpg)
Ambious, January 01, 2019, 02:41:19 pm
I’m guessing you mean portrait? (What your screenshot shows) And I’m not sure how fringe it is. I personally browse a lot on a tablet and portrait is my preferred orientation.
Darkly, January 01, 2019, 04:16:33 pm
Yes, indeed I do, thank you for the correction.
Also I think it's fringe in that most tablets that AREN'T a Microsoft Surface do the sensible thing of portraying websites in a mobile-friendly manner, but I could be wrong.
-
Drinking this all in.
Some of these points I disagree with, but happy to hear them nonetheless. Keep going.
-
I think the biggest problem I have is that I like it too much?
-
I DON'T HAVE ANY THOUGHTS, GOODBYE!
thanks to twitter, i discovered the tag explorer (and a nice number of fetish tags), but there's no obvious (to me) way to get to it from the homepage. The important things are straightforward to find, but now i wonder if there's other things i'm missing (i like a sitemap link for trying to find things like this)
echoing this:
Actual usability:
The date box significantly overlaps the title for a number of the episodes. See: Shorn Crecy, the episode about the English victory in the Hundred Years' War:
(https://i.imgur.com/HJwJWw8.png)
Or F Plus Live 6 Part 1, featuring Bread, S'Heelies, and an empty void in the shape of STOG.
(https://i.imgur.com/IFm2fyP.png)
My fucking web design opinions Lemon's really interested in hearing:
The random focus item makes me think it's a different kind of content from the surrounding, since the visual distinction between episode and "other" is pretty small.
With sixteen fifteen items with one of them double-width per page on a 1080px wide monitor, one item winds up all on its own on the bottom.
SATAN MILKSHAKE, January 01, 2019, 03:39:25 pm
-
Ok it's not just me, whew! I felt I was being mr niggle about the navbar. It's not an important issue, but just a impressions thing.
-
(http://i.imgur.com/PQwAAnH.png)
I just want to see the dang logo. Aside from that, count me among the chorus that would prefer it back on top regardless. It's weird and confusing for the logo and home link to be crammed down at the bottom of the page, and all that white space makes it feel like the menu came off its hook and fell down my screen.
(http://i.imgur.com/sQXebRO.png)
-
There, you fucking nerds (http://www.thefpluslogo.club/)
-
The new layout makes it a lot harder to read the tags page because they aren't all in little bubbles like the old layout. To be perfectly honest this is probably the least pressing problem in the history of the world but you did ask for feedback.
-
I genuinely thought the website formatting was broken and it wasn't until I read this thread that I realized it looked like that on purpose. Probably not the impression you were going for.
-
So it looks like some entries show the body text and others don't. It throws off the balance a little on mobile. Screenshots below. I'm on my phone so I can't get a shot of this one but last night on my desktop I noticed title length seems to also affect how things are positioned.
(https://cdn.discordapp.com/attachments/417084818850054145/530045854565007370/Screenshot_20190102-073048_Samsung_Internet.jpg) (https://cdn.discordapp.com/attachments/417084818850054145/530045854128537610/Screenshot_20190102-073224_Samsung_Internet.jpg)
The result's a little messy when it feels like you were going for a cleaner, more modern feel.
On a personal note I can't really say how I feel. My gut says not to like it, but my gut is a nostalgic fool that forgets really fast so don't listen to it (and no lie I think most negative reactions are probably that too. change, man...)
I appreciate all the work you put into it. Hope my nattering observations helped. Unless those were intentional. In that case I guess I didn't have much important to say.
-
Okay, some responses.
Is the logo meant to be cut off on the bottom? Because I really, really don't like that.
Well, clearly you're not alone, because there's a whole lot of that going around.
I'm also not a fan of the font used for the tags. It's kinda cramped.
I think I'm in agreement there. With a bold serif, the point size of 12pixels is a little uncomfortable. That'll get changed.
[...] if the logo was in the top left instead of the large empty gray space it'd be fine by me
Alright, here's something I mocked up.
(https://i.imgur.com/RyeSGdw.jpg)
If you think that's better, then I just fundamentally disagree with you. Firstly because it's common and less interesting, but also because that logo, probably the least interesting thing on any given page, is then the focal point on every given page. No matter what you're looking at, a bright red circle in the top left is trying to steal your attention.
there's a lot of wasted space in portrait mode (like in tablets):
Yeah, this I definitely agree with. I kept the same breakpoints from the previous design where it made a little more sense, and I need to adjust that. My thought is that the mobile version of the sidebar will happen a lot sooner, absorbing resolutions up to like 800 pixels or so.
Are the icons at the button left meant to cycle randomly?
That was kind of a last minute change and sort of half-baked I'll confess. But you saying that made me realize I can change around that idea to something a little more useful. Here's what's happens now.
* The first icon is a subscription method (currently iTunes, Pocket Casts, or RSS)
* The second and third icons are two random "social" options (YouTube, Twitter, GitHub, etc)
* The last icon is ballp.it
Does that make more sense?
The date box significantly overlaps the title for a number of the episodes
more on this later
With sixteen fifteen items with one of them double-width per page on a 1080px wide monitor, one item winds up all on its own on the bottom.
Sure, that's how a grid works. It responds to your resolution, whatever it may be, and tries to do the best math depending. When you're designing responsively you can't fixate on orphans.
More logo things
Again, majority opinion here so I'm not gonna discount it completely, but I'm in disagreement here. The logo is everywhere on the site, I think tucking it in the corner makes it more interesting and less stock blog. I also don't think "home' needs more prominence because once you've come to the site, "home" isn't really the best way to navigate anyway, every other method is going to help you drill into what you're actually looking for.
As it happens, here was my first iteration (https://user-images.githubusercontent.com/3413200/49823908-68a54600-fd46-11e8-8470-197d3c846238.png), which I also still like.
The logo gets partially covered by URLs when you mouse-over links, including the link around the logo itself.
Here's the only piece of this I do agree with. I don't mind it being covered up when you hover over other stuff, I do mind the url inspector covering the link itself up.
Recognize that I'm not locking anything in forever. That's not how I make websites (obviously). What I'm saying is that I'm feeling good about that placement and while I'm considering what I'm reading about it, I'm not currently being convinced by any of it.
Also, not having the episode titles (or numbers) display in text form on the episode list seems problematic to me.
Assuming you mean the breifs pages because the episode list is pure-image, I hear you. More on this in a bit.
i discovered the tag explorer (and a nice number of fetish tags), but there's no obvious (to me) way to get to it from the homepage.
Yeah, that's alright, I wouldn't call that "primary discovery". Getting dumped into the tag page right away would be jarring, it's main use is to pivot from one episode to another of similar content, exploring all available tags is definitely something you should discover on your own.
i like a sitemap link for trying to find things like this
FWIW, thefpl.us actually does have a sitemap (https://thefpl.us/sitemap), but its primary purpose is to be consumed by search engines.
I just want to see the dang logo
You're in luck. The F+ logo currently exists 14 times on the home page. 25 times on the epsiodes page.
The new layout makes it a lot harder to read the tags page because they aren't all in little bubbles like the old layout.
Yeah, agreed, I think the design of that page can be improved, though I'm not yet sure how. I'm exploring this
I genuinely thought the website formatting was broken and it wasn't until I read this thread that I realized it looked like that on purpose.
I'm using this as a testimonial in my portfolio.
So it looks like some entries show the body text and others don't.
So what's happening here is that the double-size block is getting squished into a single box at significantly smaller displays, and I think I might agree that the rhythm change is a bit jarring. Gonna explore that.
Okay, so
One of many things I was hoping to get away with in this particular resign was to avoid a duplicate content issue with the title. Since (I think?) every single episode cover displays the title itself. It seemed better to me to not duplicate content right next to itself, let the image serve as the title and move forward from there.
The problem there is that the images themselves are inconsistent. With everything else having rules, every episode is allowed to determine where its own title goes, as well as the ep # if there is one. While I don't super duper love displaying the text "Problematic Sex Toys" underneath the text "Problematic Sex Toys", I think it solves more issues than it causes.
So I have a GitHub fork called rebrief set up to approach some of the stuff discussed here. But for the record, you remember the several times I asked for design opinions on the beta? None of you did that. So, a teeny tiny itsy bitsy ever-so-small fuck you to the lot of you. Y'know?
-
On mobile I keep trying to move the logo around like Facebook messengers little pop ups.
But that's a me problem.
-
Alright, here's something I mocked up.
(https://i.imgur.com/RyeSGdw.jpg)
If you think that's better, then I just fundamentally disagree with you. Firstly because it's common and less interesting, but also because that logo, probably the least interesting thing on any given page, is then the focal point on every given page. No matter what you're looking at, a bright red circle in the top left is trying to steal your attention.Lemon, January 02, 2019, 11:17:01 am
If this is about attention and focus, having the logo at the bottom is actually more distracting to me. A logo in a normal place is invisible. A logo in a strange place where I have never seen one before is constantly itching at the corner of my eye. Also, having it way up at the top as its own little thing gives it undue focus, but putting it in the same block of the screen as the menu doesn't have that effect:
(http://i.imgur.com/dLQqMpV.png)
But for the record, you remember the several times I asked for design opinions on the beta? None of you did that. So, a teeny tiny itsy bitsy ever-so-small fuck you to the lot of you. Y'know?Lemon, January 02, 2019, 11:17:01 am
This doesn't mean I'm interested in your Goddamn Design Opinions. In fact, assume I'm not.Lemon, December 18, 2018, 04:19:12 pm
Genuinely can't tell if you're joking.
-
I for one like the new design. It's interesting and minimal. And I really don't think having the logo at the bottom is going to be something anyone cares about after they've seen it for the hundredth time.
-
Hi I'm basically Ralph Wiggum when it comes to visual art and design so I don't really have an opinion, goodbye!
I would totally cream for a web 1.0 looking version though. You know, as a joke.
-
Personally, I really do like the new design, but I have a slight usability concern. Maybe it's just me being dense but it took me a while looking at the mobile site to figure out that I needed to click the F Plus logo to get the menu up.
-
I genuinely thought the website formatting was broken and it wasn't until I read this thread that I realized it looked like that on purpose.
I'm using this as a testimonial in my portfolio.Lemon, January 02, 2019, 11:17:01 am
Go right ahead, though I really wasn't trying to be an asshole. I think the combination of larger serif font, white background and cut off logo hit my brain as broken CSS instead of a redesign. Well, that and it was 5am.
-
It seems some people are being listed twice on the stats page. I assume this is due to minor variations in their names and I can't imagine it's worth fixing.
-
But for the record, you remember the several times I asked for design opinions on the beta? None of you did that. So, a teeny tiny itsy bitsy ever-so-small fuck you to the lot of you. Y'know?
Lemon, January 02, 2019, 11:17:01 am
That's the kind of approach that got Microsoft to release the infamously buggy 2018 October Update for Windows 10, so at least you're in good company.
-
Updates made:
- Desktop sidebar logo moved up! Slightly! (from -45px to -35px)
- Break to mobile nav happens earlier (< 980 pixels now gets the "mobile navigation" concept)
- Titles displaying in all briefs. Additionally, I've changed clickable area from the entire brief to the title and image in that brief.
- Regular episodes (meaning: Episodes with a number) display in bottom right of brief
- Tags are now bigger on the episode pages
- The episode tag page has been redesigned
- Rewrote the grid for the fanart page
- Some bugfixes caused by the double size brief. The double sized brief now really only occurs if the grid is 2 across or more, otherwise it uses the single size brief for that piece
If you're interested, here's the merge (https://github.com/AhoyLemon/TheFPlus/pull/41).
-
Tablet portrait view is perfect now, thanks!
(https://i.imgur.com/P4CxPsr.jpg)
-
(https://cdn.discordapp.com/attachments/455819328638681110/535120216234000385/Screenshot_20190116-073527_Samsung_Internet.jpg)
Hey borders! Don't leave me hangin'!!!Hopper Text
-
I do appreciate the user names being in blue, it's easier to quickly distinguish it from the other links.
-
Really liking the mobile dark theme. Thanks!
-
(https://cdn.discordapp.com/attachments/455819328638681110/535120216234000385/Screenshot_20190116-073527_Samsung_Internet.jpg)
Shell Game, January 16, 2019, 09:39:30 am
Just fixed mobile support for the hopper and dump pages.
-
it took me a really long time to figure out where the RSS feed was.
the end.
-
it took me a really long time to figure out where the RSS feed was.
jack chick, February 06, 2019, 12:23:34 am
Switched the first sidebar icon to always be RSS (excluding all the other things). Letting the new Episode Feed page (https://thefpl.us/episode/feed) do the work of providing subscription options.
-
The enormous space after the "next" button when browsing episodes still bugs the shit out of me. It should be at the end of the last line, not orphaned on its own.
-
I was skeptical at first but i love how the menu looks on my phone.
(http://i.imgur.com/OVOjNsw.jpg)
-
/tags page (https://thefpl.us/tags) redesigned a bit.
I recently noticed that page was unusable on the phone, so edited some of the CSS, while I was at it I tried a new display idea. Works... fine, imo. Not the best, but okay.
-
I don't know when this happened, but I noticed that the F in the logo is fully visible above Firefox's tooltip when hovering now. Made me unexpectedly happy to see.
-
One of the least consequential changes I've made in a while, but this box always bugged me.
(https://i.imgur.com/W9z0vwk.png)
The meet page will now recognize the file type of each image and if it's a PNG, it will mark it as such, and not give that particular image a box-shadow.
(https://i.imgur.com/Heaad70.png)
Also while I was at it, I restyled the hover effect for fanart in episode summaries.
(https://i.imgur.com/FBh3Cpr.png)
-
Made another update to the /meet page. Here's the general idea.
There's three categories of people: Regular Cast, Guest Readers & Content Providers. You can toggle to show and hide each group. Two problems with that....
- This state isn't remembered. If you refresh, you're back to looking at Regular Cast again
- There's no transition between states. It's difficult to tell what just changed when you click on it.
SO:
- Things start out like they were before. /meet page brings you the regular cast.
- However, the categories list looks a little different. Text is bigger, and is stacked on mobile
- Adding or removing an group will give you a 750ms effect, just to make it clear what changed
- Also, it updates the URL as you click. Refresh the page and you'll still see the same group.
(https://user-images.githubusercontent.com/3413200/90320783-91151880-df09-11ea-952b-6f4f4199b4cb.gif)
-
statistics is my favorite ridiculist
(https://i.imgur.com/vLXtgN1.png)
-
I don't know if this goes here but the new ballpit logo is boss.
-
I don't know if this goes here but the new ballpit logo is boss.
Puppy Time, August 18, 2020, 05:43:05 pm
Credit to LINDA on that one.
And related to this thread (https://ballp.it/index.php?topic=3436.0), I'm still interested in randomizing the top logo, if I get enough options.
-
OMG that would be beautiful!
-
While that is an awesome drawing, the ancient F Plus honor code I just made up demands the old snake logo be given the chance to knife fight the new one to defend its status as Ballp.it mascot.
-
Just made some adjustments to the "cover grid" layout (used when you click browse episodes (https://thefpl.us/episode) or other projects (https://thefpl.us/also-made))
- removed the big boxes for "prev" and "next"
- copied the pagination syntax that's used on the home page
- For episode view, made the "random" box be the first box on the first page, and the last box on every page after that.
Looks a little cleaner and more consistent, imo.
So, it looks like you finally won, Sham Bam Bamina.
-
While that is an awesome drawing, the ancient F Plus honor code I just made up demands the old snake logo be given the chance to knife fight the new one to defend its status as Ballp.it mascot.
KingKalamari, August 18, 2020, 10:26:53 pm
this sounds like a suggestion for a pretty cool alternate banner