Website Design Changes Over Time – Two Examples

I stumbled across this site during the summer. This screen shot was taken in July 2013.  I was immediately attracted to the clean, simple yet colourful grid design. Each square looks interesting. I was surprised there was no conventional menu at the top or side. There is a menu at the bottom.
website
http://juiceservedhere.squarespace.com/

These two screen shots were taken in October 2013. You can see the designer has added a minimal menu at the top under the main title. As I scrolled down the page, the title shrinks and moves up slightly. Then the menu moves up slightly. The title and the menu stay at the top of the screen as you scroll down. So I don’t have to scroll to the top to jump to a different page. I really like the clean, minimal look of the site and the title and menu movements are clever but having the title ‘Juice Served Here’ pinned above the menu means the viewer can see less of the content.
top
http://juiceservedhere.squarespace.com/

Here is another site I stumbled upon during the summer. This screen shot was taken in July 2013. Refinery29 is ‘the largest independent fashion and style website in the United States’. This site has a really cool showcase of articles on the front page. You click the arrow, either left or right and the boxes move. If you click right; As one article moves off to the left, a shadow moves up and the type disappears. At the same time an article moves in from the right and its shadow goes down and type appears. This makes a really nice, simple effect.
menu
http://www.refinery29.com/

You can see in this screen shot that I have clicked once on the right arrow and the boxes have moved along to the left by one space.
menu2
http://www.refinery29.com/

This screen shot was taken in October 2013. You can see the designer has added a banner at the top; its for a link to Facebook encouraging you to ‘like’ the site’s Facebook page. They have added another box which encourages the viewer to follow the site on Instagram. The other difference I notice is that the shadow on each side of the showcase is not as dark as it was before.
menu3
http://www.refinery29.com/

This site has a little floating box which stays in the same spot, always visible when you scroll up and down. It has the same purpose as a menu which is pinned to the top of the screen; to enable the viewer to jump to different sections without having to scroll. It seems like a bizarre little thing but it does work. The main problem I found with it is the way it crashes over and blocks other content as I’ve shown in the image below.
18 12 13
http://www.refinery29.com/

Conclusion
Its interesting to note that both these sites employ the rule of thirds in their design. I see that pinned menus are popular now and I find they do help to minimise the need to scroll around. I’m not sure I’m sold on the style of pinned menu on the Refinery29 site. Its hard to say what exactly it is that bothers me about it apart from the way it crashes over content. The black and mint green look a bit strange together. The Refinery29 site also looks a bit busy.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s