ELEMENTS OF A WEBSITE –
- I have chosen 3 websites that I think are really clever and different. I shallbe deconstructing a page from each of these websites so that I get an idea of different styles, layouts etc so that when I create my own website, I can have some inspiration of existing sites to work from. Below are links to my 3 selected websites:
These are all quite different sites from quite different countries, the reason being I would like to delve into as many site possibilities as I can within one research section. Let’s begin:
- Shibui.me is a food health site. Upon first entering the site, we are immediately presented with a loading icon which, for most sites as elaborate as this one, is always present. The fact that the loading icon is there can be annoying to some, though I like how “be fruitful” is immediately immersing you in the topic of the site: Food. Paired with the spinning circle of simple fruit and veg icons, it’s keeping visitors interested while the cogs turn behind the scenes.
When it comes to the layout of this site, there is no specific element that is set in place (other than the colourful sidebar that tastefully slides out once the beginning of a new ‘section’ has been reached). Because of the site’s scrolling nature, their is the option to either scroll and let the beautiful animations take form, or you can skip to different sections and simply view the finished illustration. The beauty of this site is that it’s layout allows it to be quickly viewed and the information read with ease from the top right corner (quietly complimenting the beautiful illustrations), or the full intended experience of the sight and it’s scrolling effects can be taken in. Overall it’s simple yet effective and aesthetically pleasing.
Something that I really like about the site is the use of colours is cleaver. Mainly black and white is used for contrast and to exaggerate the movement of the panels and the singular colour that correlates with the type of fruit being represented. The bright tones scream modern and help to accentuate the small amount of information offered on the site – this is something a lot of sites use these days so these things never really seem too unique, though the way they have incorporated an interactive scroll really helps to separate it form the crowd.
There is no traditional masthead on this page… the only similar thing that helps with navigation is the sidebar which is a unique twist on a typical ‘masthead’ while still delivering information/navigation effectively.
The interesting thing that attracted me to this page so much is the fact that it seems to be set on only one page. In my opinion this is down to the different blocks of colour, fruit styles and moving black and white panels that splash colour into the visuals. The same goes for the footer as there doesn’t seem to be one.
Upon entering the site the first information we are confronted with is a title saying “Scroll for your health” in big, bold writing. This is a subtle way of telling us what the site is about without revealing too much in the process, the only worry I have about that is that it will fail to inform people enough, though I think in most ways the amazing graphics make up for that.
Something I would change about this site is most likely the amount of information. I think a hovering button of some sort or a tab you could click on to gain more information would benefit the purpose of this site and prevent people from leaving the site so quickly after reading the minuscule amount of info presented to them.
I wouldn’t realistically dream of incorporating such complex scroll animation into my personal website, though something I do like is the use of the sidebar as a kind of ‘section breaker’ allowing for much easier navigation. Below are some screenshots of the site incase your unable to access the link:
- The second site I have decided to look at is Numéro10.
Numéro10 is a bilingual communications agency based in Berne, they specialise in synchronized communication.
As for the layout of the site, their header is what people immediately look for to find information. What I find interesting about Numéro10’s is that they don’t have the standard menu navigation, they simply have a small but very summarising section to the left describing who they are and what they do paired with a small but intriguing animation to the right hand side. This then leaves the question: how to I navigate the site? Well, the answer is simple – you use the sidebar menu that allows you to jump effectively to whichever of the sections within the site you would like to find. This sidebar navigation is brilliant in my opinion because not only does it stick with you all the way to the bottom of the site, but that fact allows you to jump from wherever to anywhere instantly without the hassle of scrolling. The footer is really good in my opinion because despite it being large, it fits in well by blending into the blackness of the illustration and delivers so much useful information in one go. I noticed that when I highlighted some of the french text within the footer, the highlight colour was pink instead of default blue – I think this is a cleaver and unexpected way to incorporate more of the sites branding and colour scheme into the site.
One thing I thought would be a pain is that the site would look strange in tablet and mobile form…. but I have never been so wrong. Though the illustrations don’t move, all of the writing, sidebar, header, footer and information buttons become central and it still looks very unique and responsive.
The colours of the illustrations themselves are straight up black and white, this allows the bright blues and pinks of the more information orientated elements of the site to come through more easily and have a greater impact on the readers. An array of small buttons hover over each segment sporting their own bright colour to attract attention, I think the colour choice of the buttons could be a little better because towards the bottom two random colours (yellow and mint) that have no consistency within the site appear for the first time. I suppose this is a great way to attract more attention to these two buttons but then it belittles the other ones while not fitting into the sites colour scheme. The buttons are a great idea in my opinion because they offer a ‘fill in’ for any information people thing this site may be lacking in a creative and fully responsive fashion.
The images are what really make up the both foundations and the finishing touches to this website – they are controversial and unique, not only that, they have the most amazing parallax scroll effects, making them come to life before your very eyes. This is another one page site that makes use of it’s beautiful parallax structure and illustrations to make it seem like each section you come across is a different page all together.
The type without the information pop ups is limited, though for good reason. Unlike some websites who put little or no information at all, Numéro10 have put some very smart quotes that correlate with their beautiful artwork, a couple being the following: “Plug in your brand for more energy” (paired with a visual of a plug), also “Consumers from dinosaurs to butterflies” which reinforces how versatile they are. In my opinion, smart & witty sayings like these need not to be elaborated on as they portray what the business offers in a way as unique as the business itself. I like how their simplicity explains all and their messy yet somewhat appealing font screams ‘look at me’. This is an element I may use in my own website design. I wouldn’t change anything about this site – I love every design, visual and verbal element of this site and it’s some brilliant inspiration for my own site – in particular the parallax scrolling is something I would love to look into.
The screenshots below don’t show the beautiful parallax structure of this website, though they do show the use of colour, layout and the quality of the illustrations. If you can, check out the link at the top of this post:
- The third and final site I am looking at is actually a promotional website behind a rather popular movie, Life of Pi. Life of Pi was complimented by many for it’s stunning visuals and enthralling storyline so I expected the site to be beautiful, though I couldn’t have imagined just quite how stunning it actually is.
The layout of this site follows a rather ‘random’ (not in the sloppy sense) structure that reminds me a little bit of cubism with it’s sliding panels and overlapping images. The thing I like the most about the design is how user-controlled it is, while the site scrolls at the pace of the user it doesn’t necessarily scroll ‘down’… it goes across, up, down, you name it. This creates a sense of motion and control when paired with the selectable sections. There is no header on this one page site and there is really no need at all for one in my opinion, same goes for the footer – although there is one, it is tiny and serves only the purpose of informing people about Facebook, twitter, legal links and that there is in fact a Life of Pi DVD. It’s visuals are insignificant in comparison to the rest of the site, though it fulfils its purpose without imposing on the overall design so far. I can’t comment on the colour because this site doesn’t have much of a colour scheme due to all of the different cinematic images and videos – something I do approve of though is the white type and simple squares used, the reason for this is because they are simple yet tasteful and help to bring out the bright coloured images.
The text is tasteful and cleaver because though there isn’t much written, it gives you as much as you need to know alongside the images which tend to do the most explaining.
My favourite interactive element of this site is 100% two of the scenes from the movie used full screen. It is not just that these captures are beautiful and represent how beautiful the design is with pride, it’s that they are interactive, meaning every time you scroll slightly with your mouse, the stills start to play like a video. I have too a screenshot of these sections below, though I recommend visiting the site and scrolling to see the full beauty of these:
I intend to use something such as this in my website as I find the fullscreen, interactive element to break up each segment and add beauty at the same time.
There isn’t much of a navigation system other than scrolling which brings you to the ‘section breakers’ where your either fed information about the visuals at hand, or your introduced to a different part altogether. I think the site is very effective at fulfilling its purpose of selling the dvd. There isn’t really any need to do anything other than show how utterly beautiful the movie is which is done very well using layout and a flowing, interactive layout. I don’t think I’d change much about this site – the only thing would be to maybe add some sort of small button where a popup menu of sidebar can be used to skip to different segments of the website.
When it comes to inspiration for my own website, the main things that intrigue me are the scroll-triggered animation snippets from the movie, also the simplicity of the text.
Thankyou for reading this post! I hope you found these sites as beautiful and interesting as I did! 🙂