Design drafting

Posted in

#1 by yorhel
2017-11-30 at 17:41
Let's continue in a separate thread, t9931 got hijacked with feature requests...

Let's start with the VN page: link

Do you have a responsive HTML version? Or, otherwise, ideas about how to display that page in smaller widths like 1000px and mobile?

The header looks great aesthetically, but takes up a lot of space. How'd it look with its height reduced to about 250-300px?
#2 by witchcapture
2017-12-02 at 03:58
Do you have a responsive HTML version? Or, otherwise, ideas about how to display that page in smaller widths like 1000px and mobile?

I've still to code up any HTML/CSS for this, but I've put together a quick concept showing one way it could look like on mobile: link

Shouldn't be any problems doing this with responsive media queries in CSS.

On smaller page widths we could probably just remove the navigation sidebar and there would be plenty of room for the rest of the page. Would need to place the discussions link somewhere else then though, since that would be a separate page rather than just a section on the same page you could get to by scrolling. The right sidebar with the game details might be suitable?

The header looks great aesthetically, but takes up a lot of space. How'd it look with its height reduced to about 250-300px?

It looks like it still works pretty well with a smaller header: link

I've come up with some more concepts for the header section too, here's one without the incline: link

Flat background: link

Gradient-masked image background: link
This last one ended up looking a lot better than I expected it to and would probably still look pretty good even when there hasn't been a header background for the game uploaded.

Let me know what you think!
#3 by yorhel
2017-12-02 at 07:17
On smaller page widths we could probably just remove the navigation sidebar and there would be plenty of room for the rest of the page.
Heh, I really like this solution. On the one hand it doesn't look like we're wasting space on wide screens, at the same time we don't lose much on smaller screens.

Would need to place the discussions link somewhere else then though, since that would be a separate page rather than just a section on the same page you could get to by scrolling. The right sidebar with the game details might be suitable?
Hmm yes, a separate VN-level menu might be useful anyway, in case we'd want split off some extra information into separate pages (detailed stats, relation graphs, full character listing, etc).

On the other hand, we could also keep the main VN page a summary for all information and link to those separate pages from each section - as you've done with the characters. In that case there might not be a need for a "discussions" link in the menu, since we could add a small section to the VN page with a listing of recent threads/posts.

I think this will require some experimentation with live data; let's park for now.

[header background]
The flat one is too boring. :-) The gradient is my favorite, though the others look fine, too.

My intention is to first do a redesign without touching anything to the database, to allow both designs to run in parallel while we're working out the details. So at first we'll have to do without game-specific headers. I expect a generic header will work fine, we'll need something for non-game pages anyway.
#4 by witchcapture
2017-12-03 at 10:53
Great, the gradient one was my favorite too. I'll work on improving the rest of the page, add in features that aren't represented at the moment, and turn it into an HTML version we can have a play with.
#5 by witchcapture
2017-12-13 at 11:59
Just an update, been pretty busy the last couple of weeks, but I haven't forgotten. Should be able to get back to this soon!
#6 by yorhel
2017-12-13 at 19:18
Thanks for the update, was getting worried you might have lost interest. No need to hurry, though.
#7 by witchcapture
2017-12-23 at 08:29
Still very much a WIP, but kind of a basic skeleton in place, with some basic responsiveness:
link

Need to figure out what do do when the description is short, as it'll leave a bunch of empty space due to the sidebar pushing everything down.

Possibly moving the gallery and some other sections that don't require the full width in to there would be enough? The other solution would just be having the sidebar go the full length of the page and putting more data in there. Probably something that we need to experiment with a little.
#8 by yorhel
2017-12-24 at 07:10
That's a general problem with having two blocks of information next to each other where you don't have much control over the size of their contents... Considering that each section should already have a "small width mode" the first place in order to support smaller windows, perhaps we can experiment with dynamically adjusting the section sizes depending on how long the sidebar is. Hmm is that even do-able with plain CSS? >.>

Where does the image disappear to at <992px?
#9 by tigershark
2018-01-03 at 17:49
Sorry to intrude, it looks really good. I support the idea of having the sidebar go vertically into other sections since most descriptions seem to be less than 300 characters long.
Otoh, the picture and all the info in the sidebar are probably part of the most valuable information (more than the text description at least) so promoting it to a center position (like in current layout) seems logical too.
#10 by witchcapture
2018-01-06 at 10:30
It turns out putting the releases and staff section in the part with the details sidebar works as those are almost always long enough to fill out the length even if the description is short.

I think dynamically adjusting the section widths would probably only be doable through javascript, though it might be possible to combine floats and flexbox.

Currently working on fixing some things for mobile and the UI for the character section

@tigershark Hmm, like a single-column layout you mean? I think the most important details are covered in the header already. (or in the case of the relations, will probably go in the main section below the description)
#11 by tigershark
2018-01-08 at 13:50
Not necessarily a single column, maybe put the tags to the right and the info on the center. I'm just brainstorming a little, no idea if it's actually better until I see it.

But something it is really bothering me a little, is the vn u are using as example is a best case scenario. I think it would be better to think in terms of average or even worst case:
some missing info (but still enough to be a relevant entry) and a very short text description. No matter how good that layout looks if it only applies to 5% of the db entries :P


EDIT: more brainstorming
* having a spot for big icons as the ones here would be nice if that feature gets implemented at some point link (don't mind the icons themselves, just a proof of concept)

* I think it would be interesting to play a little with tags. Instead of concentrating them in 1 place, show them at different, more contextual places. For example, character related tags in the character section, branching and plot related tags near the vn length, high lvl genre ones together with vn description (maybe as icons as per the previous point), etc.Last modified on 2018-01-09 at 14:26
#12 by yorhel
2018-01-25 at 06:48
At the current pace, I'm a worried whether this project will get anywhere. The problem is that I can't easily work with this layout (and that problem lies with me, I suck at design work). I mean, I can take this layout and throw information and forms and interactivites onto it at random places, but the design needs a lot more creative effort than that to work well. We'd need to figure out, at least, the styling of many elements:
- Forms (anything from simple stuff to the "edit VN" forms)
- Browsing interface (including advanced search)
- Forums
- Pages for the other database entries
- And how everything links together
All of that will be a formidable effort.

@witchcapture: I'll be needing your active help with most of that, so I'll ask this frankly: Do you have the time and motivation to see it through to the end?
#13 by witchcapture
2018-01-25 at 11:08
@yorhel I think so. I've been rather slow here, so I'm going to pick up the pace in order to have the VN page designed and coded up within a week (the things I mentioned above are already fixed) - though I'd imagine we'll want to iterate after that.

Part of the problem is that I've been trying to design the rest of the page in HTML/CSS which isn't so great for iteration when you're not really sure how things are going to look yet, so I'm going to take it back to design software (Sketch), work out what the full page is going to look like, then code that up which should work a lot better. I'll also post back the full mockup here.

I have ideas for most of the other elements you mentioned too so I think that shouldn't pose too much of a problem, though to be honest I'm not much of a designer either - my day job is a software developer.

So - stay tuned - I'll get the VN page completed, we'll go through some iterations on that and then let's see where we go next!
#14 by witchcapture
2018-01-27 at 09:45
Okay, I've now redone the mockup in Sketch and added in all the features the VN page has at the moment: link

Also did a mockup of a non VN page, the about page: link

The previous version was looking rather drab without the background to add some color, so I've added a colored bar across the top, and also a patterned (at the top) and lightly tinted background.

I *think* this new mockup covers all the UI elements on the VN page at the moment, let me know if you notice anything I've left out, or any thoughts on the mockup. I'm still not really happy with the tags section, so that probably needs to be revisited, and some room needs to be found for tigershark's icons. In the case of the release icons this will probably mean the release rows need to be multi line as it'd be a bit of a tight fit at the moment.

The redesigned left sidebar should be a lot easier to use than my previous mockup, I think, as it makes the structure of the VN pages clear which was kind of a problem before.

Thinking about how navigation is going to work in general, how about something like this?

vndb
Visual novels
Visual novels Tags
Characters Traits
Releases
Industry
Producers
Staff
Comunity
Users Statistics
Recent changes Discussion board
About VNDB FAQ

[notification icon]
User
[username]
My list
My votes
My wishlist
My recent changes
Log out

Also, what do you think about the header logo? It's intended to evoke the "advance" icon in a VN, but if you have any other ideas I can implement that, or just remove it entirely.

Next step: update the HTML version with the changes to the mockup. I'll make a start on this tomorrow.
#15 by yorhel
2018-01-27 at 10:55
These improvements are great! The tags look fine to me, certainly an improvement over the existing layout.

I see some challenges with smaller screen sizes, in particular with the sidebars (both left and right).

The "original title" could be shown more prominently, I think it'll look fine in a smaller font below the main title.

Also, what do you think about the header logo? It's intended to evoke the "advance" icon in a VN, but if you have any other ideas I can implement that, or just remove it entirely.
Heh, I was wondering what that icon was supposed to be, thought it was some kind of smiley or even a drop-down thing at first. Not really a fan of it at first glance, though I don't have a better idea for a logo. Just the "vndb" text will be fine.

As for navigation, something like:
vndb
Database
Visual novels Tags
Characters Traits
Producers Staff
Releases
FAQ
Forums (Could also just be named "Community")
Contribute
Recent changes
Add Visual Novel
Add Producer
Add Staff

<user stuff>
The global stats can go to the home page. "Forums" is chosen here because it's shorter. :-) The "Contribute" doesn't really have to be as prominent, so it could be an icon as well, as long as it is easily accessible. The user list is... generally uninteresting, not sure if it's worth cramming that in the main menu. The "Random VN" link is quite popular and should also go somewhere, perhaps stuff it into the footer.
#16 by witchcapture
2018-02-01 at 09:05
Cool, thanks for the feedback. I'm working on the HTML/JS, incorporating these - should have something to show in a few days :)

I think for mid-size screens moving the links to other pages from the left to right sidebars should work, and for mobile maybe something like a pull-out menu?
#17 by yorhel
2018-02-01 at 09:43
I think for mid-size screens moving the links to other pages from the left to right sidebars should work, and for mobile maybe something like a pull-out menu?
Sounds good, though for mobile the right sidebar should just be part of the page.

HTML/JS
Don't spend too much effort on the JS. I have strong opinions about that. :-)

(I've been playing around with Elm, and intend to use that for all "heavily" interactive things (all forms + list management + some browsing stuff + some widgets things). There'll of course be some plain old DOM-manipulating JS for the smaller enhancements, but I hope to avoid those for pure information display, relying on CSS tricks as much as possible. But this is all just implementation details, I can work those out later. Getting a semi-working prototype is the highest priority right now)
#18 by witchcapture
2018-02-01 at 10:15
Sounds good, though for mobile the right sidebar should just be part of the page.

Yeah, I was thinking directly below the description might be a good place perhaps? Might have to resort to JS to insert it between the description and the next section as none of the CSS methods I've tried fully work.

Don't spend too much effort on the JS. I have strong opinions about that. :-)

(I've been playing around with Elm{...}

Oh cool, Elm seems pretty interesting. I might check that out at some point as I like React quite a bit and I've been interested in learning an FP language for a while. May as well see where the ideas come from!

Currently the only JS I've added is for sticking the left sidebar to the viewport when you scroll down and updating the active item, plus some code to evenly distribute the staff across the 3 columns, so nothing too involved :)
#19 by tigershark
2018-02-02 at 21:53
Currently the only JS I've added is for sticking the left sidebar to the viewport when you scroll down and updating the active item
Fixed display in css is not enough for that?

Not that it matters much but here are some ideas/pointers/opinions/whatever:

- It's a good opportunity to make each section (in vn page) foldable (an accordion widget of sorts). Why? some of us don't really care about some sections so that functionality would stop us from complaining :P
And it also helps to avoid a very long section from disrupting the flow of the page.

- The left bar looks super cool but, it ends up eating a lot of space for a somewhat limited functionality, in the end the available horizontal space for the main info is less than the current design. An horizontal version of the bar won't look as good but I think would be more efficient. In turn the right bar could be a bit wider (or even take the left side? just brainstorming again link).

- I really think nobody would care if u implement only 1 part at a time no matter how weird that might look :P

- Sorry to be a pain in the ass but.... that Elm framework (compiler or whatever), while it looks interesting, it is kind of a niche thing that adds to the "initial barrier" for any future code contribution. This site is not heavy in effects and interactions so I genuinely ask, is it worth the extra complexity*??
* Understanding complexity not as simple code complexity but as the sum of: number of frameworks/tools/syntaxes/dependencies/etc. used, the availability of highly productive IDEs/debuggers and, a big community, or standard, or at least big company backing up the underlying technology.Last modified on 2018-02-02 at 22:04
#20 by witchcapture
2018-02-03 at 02:59
Fixed display in css is not enough for that?
It is, but we still need some js to switch over to display: fixed when the top of the menu crosses the top of the viewport. (position: sticky has some issues)

- It's a good opportunity to make each section (in vn page) foldable (an accordion widget of sorts). Why? some of us don't really care about some sections so that functionality would stop us from complaining :P
Not really sure is a huge problem, none of the sections except releases will be that long, but this wouldn't be particularly difficult to add. Were you thinking along the lines of it would remember which sections you have collapsed on page load?

- The left bar looks super cool but, it ends up eating a lot of space for a somewhat limited functionality, in the end the available horizontal space for the main info is less than the current design. An horizontal version of the bar won't look as good but I think would be more efficient. In turn the right bar could be a bit wider (or even take the left side? just brainstorming again link).
Hmm... that's not a bad idea. I've added a bit of a background to separate it from the content and it looks pretty decent in this quick mockup: link

Would also work pretty well on mobile as it could just be a horizontally scrollable list.

@yorhel What version do you prefer? tigershark's suggestion might make better use of the available space here.Last modified on 2018-02-03 at 03:24
#21 by yorhel
2018-02-03 at 06:34
It's a good opportunity to make each section (in vn page) foldable (an accordion widget of sorts).
Assuming the user will want to save these view settings, this will require database changes that I'm not going to make right at this moment. But I have thought about this suggestion before, and think the easiest solution is to add a "display these sections" setting to the users' profile. It's a power user feature, I doubt it'll be used that much.

in the end the available horizontal space for the main info is less than the current design
That's because you browse with your browser fullscreen. This design was *really* not intended to be used wider than 1300px or so, because things start looking very fugly on wide screens. Taking that into account, the proposed design still has more space for the information. :P

With or without left bar, I don't think it's a good idea to cram a full 2000px of width with information, that's going to be a mess in every case. In that sense I think the left sidebar with menu is a great solution - it fills the space without wasting it or making it look cluttered. Without the left sidebar we'd fill the remaining width with unused space. Which, actually, I don't mind either. It is the more simple solution and looks pretty good, too.

Tigershark's proposal does solve the "but where do we keep the links for smaller screen sizes" problem in a way that requires no special cases and is super easy to implement. The new mockup looks great, too! So I'm all for going in this direction.

Sorry to be a pain in the ass but.... that Elm framework (compiler or whatever), while it looks interesting, it is kind of a niche thing that adds to the "initial barrier" for any future code contribution.
It's worth it.Last modified on 2018-02-03 at 08:14
#22 by tigershark
2018-02-03 at 15:02
Not really sure is a huge problem, none of the sections except releases will be that long, but this wouldn't be particularly difficult to add. Were you thinking along the lines of it would remember which sections you have collapsed on page load?
The staff and release sections can grow really really big, not the most common case but does happen. If the characters section will show only 1 at a time then that's perfect and will maintain a sane size.


Assuming the user will want to save these view settings, this will require database changes that I'm not going to make right at this moment. But I have thought about this suggestion before, and think the easiest solution is to add a "display these sections" setting to the users' profile. It's a power user feature, I doubt it'll be used that much.

I was thinking more in a local setting using a cookie to store the switches and some simple js to change the div class (collapsed/uncollapsed) and update the cookie value. A lot of sites use this for a lot more complex settings and it's not that big of a hassle to reconfigure things once in a while. If someone chooses to disable all cookies then they get default behavior so no dmg done.
But to be fair, with the navigation bar in place, super long sections won't be tedious to scroll anymore.

That's because you browse with your browser fullscreen. This design was *really* not intended to be used wider than 1300px or so, because things start looking very fugly on wide screens. Taking that into account, the proposed design still has more space for the information. :P

This makes me think, do u have some of the "usual" site statistics? I don't see any of the obvious trackers being used (which is good) but maybe u are collecting some info server side.
It would make a lot of sense to actually know which screen sizes the users have. If 90% has a 1080+ screen then it might make sense to optimize for that (without breaking smallers/mobile ofc).
Idk if it would be worth the effort but maybe u can just add some statscounter or similar tracker for 1 week to take a sample and then remove it for good.Last modified on 2018-02-03 at 15:07
#23 by yorhel
2018-02-03 at 15:39
[..section hiding..]
Let's get back to that later, it's not important at this point anyway.

This makes me think, do u have some of the "usual" site statistics?
I don't have any stats, and it doesn't really matter. We can build something that is acceptable at any size.
#24 by witchcapture
2018-02-08 at 07:14
Quick progress update, about 80% done here: link

Still need to do:

* Characters section
* Stats section / footer
* List management (add/rate/etc)
* Mobile view
* Make the background look better
#25 by leery
2018-02-08 at 08:22
So, er, I trust that once the 20 % is done, it won't look like this? link

Reply

You must be logged in to reply to this thread.

Secession Studios | Kau Pilih Dia Dadilia Band | Previous