Good/Bad sites and CSS Diner

GOOD http://www.14-tagebuecher.de/

  • The site is incredibly smooth. any type of scrolling or motion acts as some sort of navigation. But in a really cool, unique way. And that is the case for every single page within the site.
  • There is incredibly easy access to all elements within the site, regardless of where you are. For example, there is an interactive header that not only gives as context to where you are, but it also has a clickable timeline built in, as well as portraits of the rest of the people you can view. The hover states are really clear as well
  • The timeline in particular is incredibly user friendly, as well as aesthetically pleasing. Even though this technically a foreign site (German, I believe), everything is very clear and easy to understand. There is a horizontal timeline underneath the header with helpful markers. Then, there is a main, vertical timeline. This has all of the more in-depth content. There are icons for quotes, images, and notable events. Even though it’s in a different language, I can easily identify what they are.
  • It’s a small element, but I really enjoy how the header/nav minimizes as you scroll down. It’s simple, smooth, but totally helps with clarifying navigation and what page you’re on.
  • On the home page, The way in which you can scroll and click on a page to view is something I’ve never seen before. It has this cool, slide-in split-screen thing, with really beautiful portraits of these historical figures. Instead of overwhelming the viewer with options of what to click on, you can look at each individually before ever clicking on the actual page.

    Screen Shot 2015-04-08 at 3.16.55 PM Screen Shot 2015-04-08 at 3.17.03 PM Screen Shot 2015-04-08 at 3.18.24 PM Screen Shot 2015-04-08 at 3.11.01 PM

BAD http://www.griplimited.com/

  • I don’t even know where to start. This is the most obnoxious, heavy-handed website I’ve come across in a while. First of all, what the fuck is with all the content. it’s way too much and cluttered and overdone.
  • It’s SUPER unclear that you need to click and drag in order to navigate. what’s that about.
  • There are no breaks within the content. My eye is jumping all over the place, and I have no idea where to focus or read. There is just a complete lack of hierarchy.
  • There are no “scrolling” bars, so it took a super long time before I realized that the page not only scrolls horizontally, but also each column scrolls vertically. Not to mention the “disclaimer” of how to use the site SHOULD be obvious, but because there is no hierarchy, It takes a while to find it. Plus, it’s in the third column. Something like that should definitely be first, especially because it’s so uncommon.
  • There is no description or context what so ever. Even after this entire assignment, I still genuinely don’t know what this company is about. Zero. What is even going on. It’s almost as if the entire site is a shitty infographic.

Screen Shot 2015-04-08 at 4.00.44 PM Screen Shot 2015-04-08 at 4.00.55 PM

And after all that, here’s my CSS Diner screenshot:

Screen Shot 2015-04-08 at 2.47.14 PM

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

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