Rose Island Design Analysis

This process post is for October 18th, 2022. 

In this post, I choose the Rose Island website as the website that I will be analyzing the design elements of it. The reason I choose to write about this site is that several simple interactions on the site still make it interesting. It is one of my favourite websites because I am interested in interaction design, so hopefully, I could pursue that path!

The part that is doing well is the visual graphics on the homepage. There is a clear hierarchy of what content the user has to look at, starting from the title to the 3D model of the house to the subtitles. The colours and font choices are strongly driving the website. The site uses light grey, orange and black as the main colour palette, with monochromatic images. The geometric shapes of the font, match the structure of the house that the site is going to focus on. On top of that, the body copy font choice is circular, contrasting with the title and creating balance in the tone. The content’s placement is symmetric, with asymmetric organization within the content section. 

The homepage of the Rose Island website

Another element that is working quite well is the transition between sections. It is my favourite part about this website! I found this very unique and make the site very special. This transition applies to other sections of the site, such as hovering on buttons. This transition shows the grid system used on the site and it is a cool way to put it into use. In the image I have attached below, the monochromic image and the black background are complementing each other, making the transition look even smoother.

The transition from the bleeding image section and the text section

The one comment I would have that is working but not to its full potential is the scrolling effects on the text. As in the image below, the user has the scroll all the way through to highlight all the text. Visually, yes it is very pleasing to see, but talking in terms of interactions, it is not working. This is very demanding for the user to complete, especially since the user interacts with the site mostly only through scrolling to find content.

The texts are highlighted after the user scrolls down the page

My recommendation for this site is, instead of fading word by word, they could work on the animation to create asymmetric balance on the white space more. For example, as the user scrolls, the whole content shows up all at once or comes out behind the image.

Overall, I still think it is a very strong website. I want to get inspired by their brand style to create my branding for my site. This includes the solid colour palette, image treatment and font choices on the site. I would also like to play more with the interactions on the site!

Leave a Reply

Your email address will not be published. Required fields are marked *