This is my first website wireframe template (for Photoshop) of a chain hotel website. I’m mostly interested with the individual pages that a property has on the corporate website.
I decided to start with a wireframe of Starwood Hotels & Resorts, specifically the design for properties under the “W Hotels” brand.
You can see a live example of what I’m talking about here (just a random sample):
W London – Leicester Square.
Starwood Hotels and Resorts Worldwide, LLC is a subsidiary of Marriott International.
The Design at a Quick Glance
The current website design uses a layout that is 1024 pixels wide, Arial as the main (and only) font.
Only 2 shades of pink ( #c11c57 and #ff5390) for links, buttons, highlighted areas, etc. No other color is used on :hover or on :focus, which I consider a bad thing.
The rest of the colors on the website are: black (#000), white (#fff), and some shades of grey for backgrounds, as well as #707070 for secondary text.
Things That I Like
Even though generally I am OK with the current design, there’s not really a lot that stands out as a big positive.
- I like the usage of a one-column layout.
- The header of the website, comprised of 3 different blocks, takes up only 216 pixels in height, which leaves enough room for the image slideshow to take over.
Things That I Dislike
There are some things that I would like to ask the designer of this website. Specifically this:
1. Why is the “W Hotels” brand logo block in the header 99 pixels tall, while the property title block below it is 81 pixels tall. WHY?
2. Why no color change on :hover and on :focus for links? I understand that corporate branding is important, but so is usability.
3. The background color and main text color is black #000. Why? Here’s a good (albeit old) article by Ian Storm Taylor Design Tip: Never Use Black.
4. The call to action buttons have pink background with black (again #000) text. That’s a really strong contrast. Wouldn’t it be better to have white #fff for the button texts? And what’s up with the call to action button height?
5. Some of the padding values seem random. Why is there a padding of 54px (44px + 10px) on both sides? Yes, the slider icons are 44×44, but that’s not a good reason to settle on a 44px padding value.
If you add up the padding on the left and right, you get 108pixels (54px x 2). Your layout being 1024px wide, it leaves you with usable space of 916 pixels. Is that easy to use for the rest of the layout blocks and elements?
Why not use a padding value of 52px instead? Then you will have 920 pixels to use for the rest of the content blocks.
Of course there might be a perfectly reasonable explanation to this, in which case I’m gonna look like a complete ass. Feel free to point this out in the comments section.
I’ve drawn up the homepage structure that they are using with very minor changes. I’ve kept the side padding, but fixed the call to action buttons (the extra 10px of top padding).
I’m also using FontAwesome for all the icons in the template, so they can be easily tweaked.
Rooms Page Mockup
The zoomed out screenshot of this page looks so neat and intuitive. I do think that there is room for tweaks and improvements, but the purpose of this was to present what they have now, and not what could have been.
What’s Included in This Package
This package comes with 3 files:
- website_wireframe_starwood_hotel_homepage.psd – Homepage Mockup (~8MB)
- website_wireframe_starwood_hotel_rooms.psd – Rooms List Mockup (~4.1MB)
Download This Free Template
Disclaimer: The purpose of this template is purely academic and for research purposes only.
All product names, logos, and brands are property of their respective owners. All company, product and service names used in this website are for identification purposes only. Use of these names, logos, and brands does not imply endorsement.