UX design - Githubissues

Great site! Just thought I'd leave some suggestions for the UI on the site that will help it look a little cleaner as I have some experience with UX design.

The coloration and general placement you've chosen are really nice but I would cut the sizes of images down by half at least. You probably wanted to showcase the art of each image but the main goal is to deliver the information to the viewer, which is really just the event title and the time left. It will actually be more readable and look cleaner while still easy for the viewer to see with all your assets being significantly smaller. I see you have a "compact mode" planned. If that's something the user has to click I would argue against it. No need to overcomplicate. Just cut down the amount of screen real estate. The site shouldn't be larger than 2 screen lengths. On mobile the information shotguns the user in the face currently and should be compartmentalized . Some text being so large (TIME REMAINING, for example) and the images taking up so much space makes the information appear jumbled and arbitrary. Just a few changes to make things look more modular will help a lot.
I would suggest making both versions of the site as identical as possible, which should be easy to do since the output is so simple. The different section images are going to look better if they are closer in size, as well. It's easy to overlook rate up information compared to the "Kuro Livestreaming" image, for example.
It also makes sense to put the "main" event and rate ups into ongoing events, as well. Along with moving upcoming events directly under ongoing events. It makes sense having that information at the top. The ordering is great besides that.
The last thing is arguable but I'd remove the website banner at the top. Everyone who visits the site knows exactly what it's for and, regardless, it's easy to discern what the site accomplishes. Removing the banner makes the site look more professional and clean. Another option is integrate the title of the site next to the top event info.

Apologies for posting it as an issue as this was my only means of leaving the feedback!

Thanks for the comment first and foremost! Sorry that I don't have my footer all set up with real ways of contacting me as I wanted the push the core functionality of the site first.

I actually did notice that by zooming out by ~70% the site looks much nicer so that was something on my to-do list. I'll take your other considerations into account as well. I haven't really dabbled in web design very much I was pretty much adjusting things as I went. The only thing I planned out was the layout. CSS is such a hassle honestly but not as much as dealing with date/timezones
I was planning on making a compact version similar to a site that inspired the idea which is https://kenofnz.github.io/priconne-en-event-timer/ Just a lot of boxes without too much styling so people who want to quickly glance at it has the option to do so. I'll admit I haven't really thought of how to implement how people would access compact mode though.
I was struggling with deciding how to order things besides keeping the current event up front as that's what I assumed most people would want to check for alongside what unit in on rate up. I originally had it under the "Ongoing Events" but the styling was a bit awkward so I'll see what I can do. I've been working on adding a Server Time/Reset as someone else requested and have been trying to figure out a good spot for that as well.
Not having a banner/header seems a bit odd to me as I started with that first so I actually don't know how it'd look without it. One thing I'd ask is a bit of clarity on how do integrate it with the top event info.

Again thank you a lot for the feedback. I'm glad that the reception has been warm, but I can't fix things when I don't know what's broken so I very much appreciate feedback/critiques.

I was happy to leave the feedback. It's so hard to get actual valuable feedback so I try to offer when I'm on the user side. It's nice to get compliments but the criticism is what I want to hear the most since looking at something with creator's goggles on is very difficult compared to a fresh eyed user.

Awesome! Out of everything, I would say having to scroll less and seeing more info right away is the lowest hanging fruit. I'm not a web developer either but a shallow knowledge of web dev is always good to have, especially if you work in design.
That pirconne site is a great reference (I only saw the desktop version but I doubt mobile is much different). No unnecessary text or information and things are very uniform so it's not that hard to read. It does it's job. The only thing the creator didn't do is compartmentalize the information, but that's frills. Like I mentioned, I don't think you need a different version at all. The site is a very quick reference site that people are going to pop in and out of so having to clicking for a different view is not even going to be used. I mean, you could make it so people could save their settings to the site and you could save it in user history but that's probably more programming than you want to bother with and more importantly unnecessary. The foundation for your site is very good and because you have modulated information it's going to look more elegant than the priconne site, you just want your site to accomplish the goal of quick info delivery as well as the other does. I also really like how you have the dolls listed that currently have costumes for sale. Having their simple portraits while being clickable looks really good. The only thing I'd do is maybe put "Press for view", "Details", or some kind of text on the bottom of the portrait to let users know it actually is clickable. I think majority of people are going to click out of curiosity, as I did, but you'll have 10%-20% people not even think about it. That's extremely minor, though.
So, I forgot to add an important point; when I first clicked on your site the first thing I thought was "does it show the next event" and I had to scroll ALL the way down. The next thing I wanted to know was the battle pass/shop item times. Everything else I can look up in game but it is great having it all in one spot for people writing out their pulling/key spending plans, etc. But those two were at the front of what I wanted to see when I visited the site. I'm sure you know it's important to predict what users are going to be thinking or wanting in site functionality so I'm glad I remembered to mention.
I feel I chose bad wording by saying "integrate" when I should have said "subtly display" that it's an event timer site. For example, on desktop, you could push down the "RATE UP" text and display "PNC Event Timer". Which, I prefer the desktop layout of the site btw. The single information column style is less attractive and any compartmentalization goes out the window. But I wouldn't even bother displaying it at all. Everyone who visits this time knows what it's for. You're not dealing with someone who has never played PNC and if you did they don't care about game information anyway, right? I don't play priconne (should I?) but I could immediately discern what the site does. However, if this project is something you'd be including in your portfolio then I would go with the former suggestion and subtly display the site title if layman eyes are going to visit. (Dismiss if you're not in school, but projects like this are really good to display in portfolios, especially since it's something you've done outside of school.)
Also, and it's probably been mentioned, it might be a good idea to include the algorithm rotations. Maybe not? But the three use cases for your site I see are: 1. When is the next event? 2. How long till X event is over? 3. Spending planning. And algorithm days are going to factor into the 3rd. If I'm the only person who has mentioned it, I'd probably not bother, though.

Hopefully that helps. I never mind taking the time to leave feedback for someone creating something. I'm not sure if you're concentrated in art or strictly a UX person, but if you're ever interested in other graphic design work to fill out a portfolio let me know. I've thought about creating some tools for PNC. Looking forward to seeing the site updates.

Currently working on slimming everything down. I think it's coming along nicely and found a decent place for the server time. Was curious what you thought of it so far. Link Styling isn't quite finished yet, but I thought this was the best way of laying it out.
You're probably right in that it's more effort than need be. Making it compact & accessible from the get go would save time on multiple fronts so I'll be taking that approach. I actually completely forgot about adding a hint that the dolls have a link attached beside it having a hover effect (which mobile users wouldn't even see). So I'll be adding something to make that more clear.
I'm thinking of the best way to squish things more and I agree that if I were to use something like this I would be most interested in what the next event is and when it was happening. I think my original thought was that having upcoming events at the bottom, it would be made easier to delete content since it's at the bottom and wouldn't require much restructuring. I do now however want to move it closer to the front.
I'm actually trying to get my foot into the field so this was a passing portfolio project. I never really stepped into web dev but thought it'd be something fun to do. I've already changed the layout a bit and removed the "RATE UP" text as I realized that it's a bit redundant given that "Rate Up" exists on the images itself. For the time being I've given it a small heading of "ACTIVE" as I thought the empty space between the server info and banners was awkward. Side note is that I like PNC for the same reason I like Priconne. Both are bonsai games where you'll progress over a long period of time. Helps that they're both really generous with pulls, too.
That's something I considered but it fell into the realm of "where would I put this?". Now that I'm thinking of redoing the layout, I might find a better slot for it.

Everything has been really helpful. I've never really designed anything before so having some concrete guidance to work towards is good practice over just doing things by feel. I'm not against making other applications either. I was looking into different tech stacks to get practice using various tools. I decided to go with the extreme basics of HTML/CSS/JS just so I can say that I made a project using just that. Future projects I'll most likely incorporate a framework like React or Flask.

This looks very nice. I hope the "PNC EVENT TIMER" text is replacing the banner you were using cause it looks much cleaner. This relates to 4. but I was immediately confused when I saw the "ACTIVE" text. It's not identifying exactly what's active and might even lead some to believe other elements on screen are inactive. I think rate up looks fine or you'd want to put "ACTIVE BANNERS", "CURRENT BANNERS", etc. I think using the word active is a poor wording choice, however. The text distinguishes the region so viewers eyes are going to be drawn to it first. It clearly states this section is for rate up banners so I don't think it's redundant.
n/a
n/a
The region title text you have is good and it's important for your layout. Since it's not strictly columns of pictures, similar to the priconne site, it helps visually organize and allows users to easily discern the meaning of elements.
I wouldn't blame you for not including it. I do think it will be definitely helpful for users. The reason I'd be slightly reluctant is it moves into the realm of "where is the stopping point?" Not by a large margin but it does make me question it. But you could always expand the site to be more than just an event timer. I could very easily see it being a great hub site for links to other resources. I dislike having to scour reddit posts to find the countless makeshift excel google docs. The event calculator I saw was so over complicated I very quickly clicked out and just calculated what I wanted to know myself. Which made me think I should just write a calculator myself. If the events follow a similar format then it would be easily to defensively code it so you're changing very little between events. If you continue working on your site I could always write the calculator, make sure it's integrable in your code base, and you could literally just make a tab on your site for it rather than have all these different PNC resource sites. Nalu seems really good but I'm not sure how often it's going to be updated. There's surprisingly no article for Hatsuchiri/Delacy yet.

Good to hear it's been helpful. I'm not sure exactly what your concentration is when it comes to graphic design; it's a fairly broad practice. I'm guessing you're less drawing your own art focused and more layout/UX focused? My UX background comes from game development so the tech used is going to be different, but I would suggest becoming adept at particular applications, they are usually synonymous with each other and the more experience you have with one shortens the translation time of the others. I definitely wouldn't bother jumping around languages. As a programmer, I can tell you IF you want develop skills at writing code the language is irrelevant unless you're comparing C++ to JS but those are two different realms. The syntax of a language is minutia, unless you're working with native languages.

p.s. I don't know if you're familiar with github's Discussions but you can open that up on your repository to act similar to a forum instead of us using issues to converse.

[1] Yeah, it'll be replacing the banner to keep things simplified. I always had the idea of websites with banners (when a navigation bar wasn't present) that it was the first thing I made. I actually originally had it as "ACTIVE BANNER" but thought the text was slightly too long. I'll probably choose between that and "RATE UP" when pushing the final revised version.

[5] After I've cleaned up the site to a stable version I'll think of ways of expanding it to include other resources that players might be interested in. I agree that looking back and forth between different sites between reddit, discord, nalu, random google doc 1, random google sheets 3, is getting a bit irritating. I was thinking of linking some of the more used sources somewhere since players are always searching for efficiency guides etc, but it wasn't a core functionality for the project so I pretty much left it on the side.

For the time being I'm just undertaking whatever project that seems like fun. I'm pretty used to using a bunch of different timer/rotation sites so I noticed a hole with regards to PNC. (Shoutouts to the Splatoon one that I also took inspiration from). I don't want to use the discord bot every time I want to know when an event is going to end. I have a pretty decent background in Java/Python but jumping into HTML/CSS was a bit awkward to say the least. I felt more at home with JS but even then there's been a few bumps.

Also I didn't know github discussions wasn't active by default. While doing corroborative projects in uni we always used Slack so the need never arose. It's open now and thanks again for letting me know.

naisu / PNC-Event-Timer

UX design #1