Hello /gd/, I've been working on a hotel website, this is a page about rooms. I would like to know what you think about it and what should I improve, because there is always a room for improvement, first time posting here.
Short guide and my reasonings. Headers with a medium-short height contain parallax images of room examples (at the moment those are just placeholders, I'm not satisfied with the photos that much honestly), and a button for reservation, rather simple. White div's show some information about the room (the info was already there as this is a website redesign), I put the numbers I think are important to the sides and they are easily noticed - number of persons per room and its size. I picked gray font for this because I think it is rather elegant. Lighter brown color is there for the details, I rather like it with a white background, I think it looks pleasant and delicious, I accented the borders with that same color but I'm not sure what others will think about it. The biggest room of them all, presidential, has a black background with the same gold-brown color, it symbolizes wealth and I chose it so it can contrast well with the other ones and be somewhat unique. The things I'm not sure about are the number for the room size of presidential suite because it has 3 digits so I had to scale it down to fit, also I had problems coding the paragraphs div to be centered vertically but on the other hand, I think it is a better idea to put it this way so the top part is parallel to numbers and in the same distance from the image as the rest of them.
So that is a short explanation and my thought process. I am looking forward to your opinions and hope to learn something worthwhile.
One more thing, I have a problem with color representation on my laptop monitor and now I see it on my phone screen. Grays will definitely be lighter and the brown should be somewhat less orange, oh well, I will fix it asap. Yes, I have pure white and pure black backgrounds and am aware that is not a good thing, but is it really that big of a problem or should I change it a little like rgb(10,10,10) and rgb(250,250,250)?
I would make the "sleeps" part flush right and the "avg room size" flush left to align itself toward the body content instead of away from the body content. I would also make the sleep/avg room size part a font weight bolder than it is now, because on the black it's going to be a legibility problem. good use of dark grey instead of pure black. I personally don't prefer parallax, but as an alternative suggestion, maybe the bottom right corner of each snippet image could have a full-screen button that blows up the image into a lightbox. that helps people if they're curious about the snippet without having to leave the page and go find the sexy pic etc. I hope this helps.
>>244911
Thanks for the reply.
I changed a few things so let's see what we got now, I'll post a mobile version of this in a post below.
>I would make the "sleeps" part flush right and the "avg room size" flush left to align itself toward the body content instead of away from the body content.
Like this? What do you think? I tried with different wordings on room size because when it is the longest version it looks kinda bad, not simmetric. This is somewhat better I guess, but can't decide.
>I would also make the sleep/avg room size part a font weight bolder than it is now, because on the black it's going to be a legibility problem.
I've set font-weight to 600 now. It is more readable but I didn't notice it to be the problem before though. It only bothers me a little because I kind of like a thinner font for this, but UX is more important if it gets too hard to read.
Also switched #000 to rgb(5, 5, 5) for the presidential bg.
That's a good rec for a lightbox, I actually didn't add a gallery yet, so I think I will probably make that "Reserve" button to be a link to pics of that room instead, there is a reservation button at top anyway so it didn't make much sense to me from the beginning though, but they had it that way. So I would rather change the link than putting another button on the side because I kind of don't want to mess with simmetry.
Thanks for the feedback. Few more would be nice too! I would show a main page which is based around grid system, somewhat like microsoft's tiles, but I didn't choose the right colors and images yet and I've spent more time on it than I would like to admit. This one though is simple and I am satisfied with it at the moment but it can always get better.
And here is the mobile version at the moment. I have yet to add a footer and will probably have to change that brown color to be nicer, as I said, I have a horrible color representation on my monitor. The capturing extension fucks up some parts, so yeah. The reservation button is just fixed on the bottom.
I'd use columns for the text
I would use symbols/icons with the numbers. It's just more interesting to look at.
For the mobile view, I would put both numbers in the same box. You get a better overview of the room without having to scroll.
Size of 296? meaningless to me
>>245120
for that matter "sleeps 3" is meaningless to me as well.
Give me the size of the bed, like the rest of the world.
Give me the size of the room in square meters/feet whatever you use.
Better to give me a floorplan
>>245121
>>245120
I need it to add it, that was supposed to be square meters (it fucked up the aligning so I removed it, but it probably needs to be there). Also, this information is on Sheraton hotel's website from my country, I'm just redesigning it, I know the info is a little strange, I'd rather want to know the cost or floorplan, but they don't have any of it.
>>245117
That's a nice suggestion for the numbers in the same box, this looks nice to me but isn't exactly the best UI, I'm aware. Will think about the icons.
>>245098
Don't really know what you mean by this. There are 3 columns in a row, left and right for the numbers and the middle is for the text.
Can somebody tell me what they think about the overall look? Is it pleasant to look at? Do you find the information placement good?
Thx for the reply guys, appreciate it.
>>245120
Oh and just to say one more thing, I put just the word "Size" after making the recommended changes by the reply above. Just wanted to test the length of the word, but obviously, it doesn't make sense, it is not supposed to say that but rather "Avg. room size". In a default version, in my language, the word is shorter so that's not a problem.
The room size and sleeps parts seem a bit weird to me. It's also very unclear in the mobile version. There's no clear separation between rooms and if you're scrolled down halfway there's no way of knowing which number corresponds with what room. Consider making the room size and sleeps more part of their respective room.
Also, isn't a small subtitle beneath the suite names enough? It's what the viewer reads first anyway.
"Deluxe Room"
"Average room size: 25 square meters."
"3 nights"
Or maybe make a single square with some bullet point room details like size, sleeps, price, room service availability etc.
>>245174
What do you think about having a smaller div element between header and paragraph in which I can put those information? Those 2 numbers are the only things I have btw, but I can put a few icons for wifi and similar room services in line and then below them put the room size and sleeps.
The only problem is with me because I really like something bigger on the sides of paragraphs to fill the empty space, I don't know what else I could put there, at least some small decoration hm...
Also, about the mobile version. I thought that image headers are good separator but then maybe I was wrong. Because, it is not very tall and if you are lost, you can scroll a little in any direction and see where you are based on headers. That was my thinking. Anyway, I can make every info in between the header and paragraph, as I said. Would that be better UI?
Thanks for the feedback again to anyone that replied and will reply, it sucks when I had a couple of web design courses but we didn't make smaller projects where professors could offer a critique, more or less the critique was on details and the rest was a theory. I'm doing this for a practice in responsive framework and needed to redesign some non-reponsive website, but again, no matter how it looks like, it probably won't be that important if it works nicely, but I really want to design it good, for myself and to show my best anway.
Worked as a front desk manager for 15 years in usa. First time on gd but mostly these pages are designed for ease of use. Otherwise you get a hundred calls a day from grandpa asking which picture it's which. In the usa most hotels with one presidential suite don't even put it on their webpage bc it's mostly given free to the person booking the rooms or the person the hotel is trying to impress. It's not really a money maker in terms of cash. Agree with previous adnon paralax Will confuse old people. Also if you click on the dates and click through it should show prices on the original site.
One more thing you really need to put a unit of measurement bc every American is thinking 25 sq feet is this room in japan. Or just very confused
>>245130
Sheraton is wrong. Fix it
