Michael G's Blog

Week 1 – Website Evaluation >>Dropular.net

Posted in Intermediate Scripting by michaelg1980 on October 14, 2009

Website Evaluation >>Dropular.net

My favorite website.  Lately.

My favorite website lately.

Message and Communication:

Characteristics of effective communication in general

  1. Speak clearly and to the point.
    • “There’s really no text, save for a brief description in the title that says “Dropular – Media Bookmarking,” and if you count link names as text.  I’d never heard of “media bookmarking,” but I kinda got the idea.  A place with lots of bookmarks to stuff.  So, while I had an initial idea what the site was about and got an even clearer picture once I started digging around, to start, the intent of the site is a little fuzzy.  After digging though, the value of the site becomes pretty apparent.  A huge, searchable, visual database to some of the latest in design, photography, and culture.”
  2. Be consistent in how you present information.
    • “The feel of the site is consistent and visually appealing.  There are two different layouts that the visitor encounters.  One for viewing the visual bookmarks as a list or gird, and one , after you click a “bookmark”, that displays what you clicked and has recommendations of similar things you might like.  Besides these two, there are about 12 different ways to view the site. The different views are temporal (i.e. recent bookmarks, today’s, this weeks, etc.) All feel the same.”
  3. Say something interesting.
    • “The site itself doesn’t post any blog text, but if it speaks through its “bookmarks”,  Holy fuck, what a statement.  Incredibly interesting and provocative.  I spend at least an hour each day combing through the various visual “bookmarks.”
  4. Speak in the same language as your audience.
    • “Again the site doesn’t verbally “say” anything, but as someone in its prime audience, I can say it definitely “speaks” my language. It’s a visual language of what’s cool.”

Guidelines for effective communication specific to web sites

  1. Web pages need to indicate their connection to a website and to the internet in the way they organize and present information.  Primarily through brevity and links.
    • “Well, the site definitely has brevity down, and the content is essentially all links so, the website clearly has connections between it’s own pages as well as connection to the sites elsewhere.”
  2. Each web page needs to present self-contained ideas that don’t rely on other pages for a point to be made.
    • “The intent of the the site seems to be to show inspiring images that link to either other pages within the site or to other websites, so in this regard, each page of the site is easily self contained…as well as inherently linked to the ‘whole.’ “
  3. Web sites need to rely on a “rugged” organizational structure that can withstand the minor or major tweaks that occur due to different browsers, settings, monitors and the like.
    • “Here too this site particularly well made in its ability to adapt to different size screens, browsers, and settings.  As long as you have flash that is.”
  4. Web pages need to communicate things as simply as they can.  No simpler.
    • “Can’t get much simpler than titles, pictures and links.”

Navigation and site organization

  1. Use conventions.  Headers, navigation, links, grids, etc.
    • “This is where the site loses a few points.  The navigation is small and all the way up in the upper left and in the upper right hand corner of the browser window.  As well there are three separate links on each visual ‘bookmark’ to navigate to different pages. The upper left navigation’s function isn’t clear until you click all that’s clickable.  And, although the functions of the other navigation is clearer, I initially missed it entirely. I would have grouped all the elements together.  As for the three different links on each bookmark, you have to click ’em first to understand how the site works.  Not very clear here.”
  2. Make it obvious where visitors are in a site and make it easy to move around.
    • “Sadly, here again, the site loses points.  The only part of the website that could be considered a homepage is the “Recent” category which you arrive at when you enter in the url which lists/girds the most recent items to be bookmarked. And, while there is a title for each page in the upper left, it’s easy to miss considering the noise of the picture links.  However, after perusing the site a bit, it seems that orientation is not the intent. Inspiration is.”
  3. If a website is more than a few pages, incorporate a search function, that is available on every page.
    • “Yup it’s got it, and lord knows it needs it.”

Characteristics of good content and content presentation

  1. Good content says something interesting or valuable in a clear and unique way.
    • “If pictures speak a thousand words, Dropular.net says a bazillion.  Loads upon loads of illustrations, designs, photography.  Lots of stuff.  And, it “says” it quite minimally which works incredibly well, allowing the bookmark content to be the real star.”
  2. Speaks with a human voice.
    • “This website is like the voice of your coolest friend’s older brother.”
  3. Scannable pages that appreciate the varied interest levels of visitors by making use of titles, headers, topic sentences, and minor point callouts.
    • “Not really.  The title is pretty small and easy to miss, but in terms of spreading out content to allow what interests you to pop out, this site is a star.”

Visual Design:

Design principles that promote visual clarity and simplicity

  1. White space gives emphasis as well as allows breathing room in a design.
    • “Depending on what view your looking at the site with, there are various amounts of white space to break up or highlight the content, which works pretty well to highlight the content and give a clean feel.”
  2. A clear visual hierarchy helps viewers decode a page or design.
    • “The visual hierarchy is pretty simple.  The content alone is king on this site.  Save for tiny titles, spilt navigation, and small text url links.”
  3. Unity groups things that are similar in content, appearance, or function.
    • “The navigation, like I said earlier is split, so that’s not good.  But aside from that, the unity derives from the list or gridded display of delicious visual bookmarks.”

Page layout principles that help users visually negotiate page and site organization.

  1. Alignment helps create order, groups items together and makes the page easier to read.
    • “This site uses pretty clean alignment in the top navigation sections as well as how the content aligns with left and right borders of the browser window.  Alignment in between items in “grid” view looks kinda choppy though.”
  2. Contrast whether in color, shape, size, or orientation help viewers distinguish different sections of a site.
    • “The main contrast of the site is between the white background and visual bookmark content, which I’m sure is the point.”
  3. Use of the principle of Action, such as an shape, or color, directs the viewers to certain elements on a page.
    • “I didn’t see any elements on the page that suggest specific action.  Deciding what to do once you get to the site is a matter of simply clicking around.”

Design fundamentals most critical to good web design.

  1. Use conventions (ex: placement of navigation, look of links, headers).
    • “The placement of the horizontal navigation and miniscule title at the top of the page seems to be the only noticeable convention.  Oh, and it uses a sloppy grid in grid mode.”
  2. Alignment helps create order and groupings to make a page easier to read (ex: columns)
    • “This site uses pretty clean alignment in the top navigation sections as well as how the content aligns with left and right borders of the browser window.  Alignment in between items in “grid” view looks kinda choppy though.”
  3. A clear visual hierarchy lets viewers know what’s most important and least important.
    • “The visual hierarchy is pretty simple.  Visual bookmark content #1.  Everything else is like #10.  But, of course as I’ve said and will probably continue to say in this “Evaluation Framework,” that’s the point.  It’s all about the inspiration.”

Color Design:

Guidelines for how/why to select a color palette

  1. Colors can trigger different emotions, especially depending on what country you’re from.  Primary colors, red, yellow, and blue, evoke an innocence and childlike feeling, while more subtle hues and shades, like lavender, gray, and rose, impart a more sophisticated attitude.
    • “The color palette for Dropular is pretty muted, using grays and blacks and white, but it suits well what the site is shooting for I think. Sophisticated underground artist, fashion/graphic designer, architect.”
  2. Harmonious combinations can be found using complementary colors, two colors found opposite each other on the color wheel, as well as tertiary colors, colors that form a triangle on the color wheel.
    • “Like I just said, it’s pretty basic. No frills.  Like an art gallery really.”
  3. Use of color and color combinations should be informed by the intent of what you’re designing.
    • “Being that the purpose of the site is to act as a repository of various types of inspiration for creatives, yeah I think the minimal black, white, and gray, color combo works.”

Principles of color use specifically helpful for effective web page design

  1. Color should be used as a secondary element to bolster and emphasize the organization of a site.
    • “Color is definitely not a primary feature of the site.  It makes the navigation and title fall quietly in the background like a butler.  Which is kinda of annoying when you first get to the site, but if you’re the target audience, you get over it really quick.”
  2. Colors should be used in coordination with the intent of the site (i.e to sell appliances vs. to teach soothing meditation).
    • “Yup, muted colors suit the intent.”
  3. It’s important to take into account how different colors interact with each other and how this interaction works or doesn’t work with the intent of your site.
    • “Very little interaction and noise between colors.”

2 Responses

Subscribe to comments with RSS.

  1. Gina said, on October 16, 2009 at 7:02 pm

    Nice Michael. I really do like that site, it was the first time I had seen it. Very interesting idea and layout. Now that you have your site evaluation framework (what you wrote out above) you should look at every site design with at least these standards (and any others you read about and did not mention).

  2. Gina said, on October 16, 2009 at 7:18 pm

    When you get a chance, be sure to add your blog to your web site (also a link to your site from your blog). Or if you want to use the free hosted WordPress, download it and install it into a blog folder on your site. Let me know if you do, because the link would change.

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 )

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s

%d bloggers like this: