The BarbLog

Design, front-end dev and other random thoughts

parallax

All of the posts under the "parallax" tag.

3 Examples of Good Websites

For this assignment my aim was to choose three quite different websites so it’s not just about some well-known and ‘safe’ designs. I did go for one well-known one though, as there is most likely a reason it’s so popular.

Click on the screenshots to enlarge them and the section titles to visit the live websites.

1. Dropbox.com

Dropbox website screenshot Dropbox website screenshot  Dropbox website screenshot Dropbox website screenshot

Dropbox is a popular online backup and file sharing solution and if you look at the website I don’t think you’ll be left wondering why. It’s extremely clean and simple to use but still retains a playful touch (i.e. it doesn’t feel like a cold corporate style website) with the little icons it uses on tabs and the sketchy graphic advertising Dropbox for Businesses on the second screengrab.  After all, this is your backup space, you have your personal files on there so you don’t want it to feel too impersonal.

Even more importantly though, it’s very straightforward to navigate and helps you out with tips highlighted in light blue at the top of the page (3rd and 4th screengrab). It has a separate view for files and photos, makes it simple to access your upload history and remaining storage space, and lets you download whole folders as zip files – handy! Dropbox can be installed on your computer making these things unnecessary for many people since it’ll sync automatically, but for those who for any reason don’t want to install it and prefer to use the website (myself included) it makes life much easier.

To sum up, the main things the Dropbox site has going for it in terms of good UX and design:

  • Simple and clean layout that nevertheless retains a friendly touch
  • Lots of white space allowing for visual separation of elements
  • Navigation is self-explanatory and doesn’t have too many levels
  • Functionality is easy to detect (eg. downloading as a zip file – the command is clearly visible)
  • Right-clicking on stored files triggers actions (more intuitive as it’s similar to using your computer)

2. Howmuchtomakeanapp.com

Howmuchtomakeanapp.com screenshot Howmuchtomakeanapp.com screenshotHowmuchtomakeanapp.com screenshot  Howmuchtomakeanapp.com screenshot

I really liked the concept of this site: it takes you through the estimating process for a new app (or website, works for that too) and all you have to do is choose from the options it presents. The layout is extremely simple and intuitive, with graphics used as buttons to make it easier to skim your options. There is a progress slider that steadily moves as the estimated costs increase based on your choices so you  know where you’re at at every step. At the end it gives you a breakdown of what you chose and how much it estimates, with an explanation of how it arrived at that figure. Just like Dropbox, it’s very clean and functional but the graphics make it more interesting and engaging than if it was only a bare-bones text-only tool.

The call to action is very clear at the end in red: submit your project using the Oomf website! It’s promotion of course, but subtle and not too pushy; the user can still feel like they’re in control and not being forced to do anything which in my book is always a positive in today’s world of ads shoved down our throats at every opportunity.

Having discussed the function of the site I still think form is worth a mention (can’t help it – I like pretty things!). The jQuery flip/fade effects when you click one of the options to progress to the next screen are rather pleasing to the eye, providing an odd sense of satisfaction reminiscent of  your childhood when pressing buttons in lifts and on trains was something you loved doing. Well, I did… surely I’m not alone with this?

Good points about this one:

  • Clean and simple design
  • Straightforward user journey
  • Easy to understand functionality
  • Pleasing feedback (progress bar, flipping buttons)
  • Summary of results is clear and helpful

3. SamMarkiewi.cz

Sam Markiewicz porfolio website screenshot
Sam Markiewicz porfolio website screenshot Sam Markiewicz porfolio website screenshot Sam Markiewicz porfolio website screenshot

This is a portfolio site of sorts, trying to sell the services of its owner, and as such it has to stand out from the thousands of other portfolio sites out there. It achieves this with humour and interactivity. It’s a one page parallax website which may or may not be everyone’s cup of tea but I think that in this case it really adds to the experience – check the link out to see for yourself!

Starting off with the witty choice of domain name, creativity is all over this website in my opinion and this is the most important aspect of a portfolio. The home page makes use of plenty of white space to draw your eye to the text and the poor guy standing there without clothes: and you just have to scroll down to see the rest and dress him appropriately! Not only can you dress him in a pink basketball outfit though but also explore his environment by hovering or clicking the mouse over certain elements such as his computer or the Twitter bird (it even flutters around). Curiosity is one of the most basic human traits so he does well to engage the viewer in this way.

The copy itself is kept simple, approachable and friendly; I got the impression that Sam must be a nice and reliable guy to work with which is important from a client’s perspective. The typography is an easy to read sans serif, lending a clean and minimal look to the site.

Sam also provides guidance on how to best view his page in the form of an overlay when you first visit the page, accessible later on via a button in the top right corner, never a bad thing when it’s important to make sure your audience views your content as it was intended. Of course we could debate this in general but in terms of what he wanted to present here I think we can say it’s not a problem to limit it to desktops otherwise the effect would not be the same.

Good points about this site:

  • Creative use of parallax scrolling
  • Uncluttered design drawing attention to the important parts
  • Engaging and colourful
  • Designer makes a good impression on the viewer

Summary

I didn’t deliberately choose these designs based on their looks but in hindsight they all look clean and simple with only a few accent colours. This doesn’t mean I don’t like more ‘cluttered’ websites but I think the general trend these days towards flat and minimal designs has influenced my tastes as well.

Barbara September 30, 2013 Leave A Comment Permalink

get_footer() ?>