Design Examples: What We Like, What We Don't Like

Submitted by Michael Lehto on Tue, 12/27/2005 - 19:02.

What are the sites out there that implement good principles of design? Are they usable and interesting? Are they stimulating and beautiful? Are they innovative? Why do they work?

What sites out there are unimaginative or unusable (or both) and why?

This forum is intended to generate a discussion on DESIGN for the RealNEO community. Jot down sites that you like or don't like and try to explain why you feel this way about them. We can all stand to be better educated about what makes up a good design, and looking at examples is a good way to hone this kind of perception.

As an opening salvo, I'll throw out the following links:

  •  http://www.ourtype.be/

    This page is a good example of thinking outside the box. It's a commercial site for selling font packages. Implementation is all Flash. There's only a limited set of things in the menu, but you can scroll into other menu areas. For each menu item selected, a highly usable, customizable and visually fantastic display pops up on the right. Really a great site.

     
  • http://www.macromedia.com/software/studio/

    This is the commercial site for Macromedia's Studio 8 product. Not particularly stunning or sexy, but simple and clear. Color palette is severe but consistent with the product, which works well. Tabs within the page help break up the amount of information, another simple but great idea. Embedded video can be started on demand for a demo.

    This page is clean and simple: I know exactly what to do when I'm there.
     

  • http://www.redbullcreativitycontest.be/

    Another example of thinking outside the box: literally. Here's a site where the total usable field lies outside the visible window. Users can navigate the field by scrolling with the mouse. Navigation is laid down on the field along with other items. Fun stuff is laid around that the user can interact with, like picking up and moving the objects, even constructing the battery-powered flying machine. A lot of schnick-schnack in this site, but very interesting.

     
( categories: )

Tribe, Terminus and Times... here's why

There are three I think are important.

  • http://tribe.net - an excellent virtual community with very good technology. This is in many ways a model for our design. Good use of rich user profiles and FOAF and many other things - next time we get together I'll walk you through it
  • http://terminus1525.ca - the only thing that I really think stands out here is the integration of some richer design elements into the theme - I like how the users have a bold page for images and their blogs... good model of several cool angles
  • http://nytimes.com - I know Michael hates this site but I find it is a very good  tight news home page and taxonomy/navigation structure for managing lots of complex, rich media - there's a huge amount of content including images and video up there and it is nearly real time. With the two column format with a few headlines in each of six or eight categories, leading to home pages for those categories, with related content expanded there, it is very easy to view lots of information. I believe we'll need similar ease of use

Norm is correct about

Norm is correct about internal site organization (taxonomy in Drupal nomenclature) and making a site useful / attractive.  Sites become instinctive when you understand how things are organized.  They become like grocery stores.  When you want to find something, look at the overhead signs (navigation menus) and try to relate what you are looking for to one of the broad categories.  If the information is well organized, you should be able to navigate the web / grocery store efficiently and come back again.

 

Derek Arnold

Good point about grocery store

Hey Derek - good to see you. Happy holidays.

I like the grocery store comparison - we're working on a flow chart for the taxonomy for realneo so should make some progress in the coming weeks with usability - will appreciate your feedback.

Information Overload

tribe.net is an interesting one to look at. There is a tremendous amount of information on it and despite the shere number of links, it still works pretty well to navigate through and find what you want. But is it innovating in any way? Not really. Is it important that it innovate? Maybe not, but I think the visual design of it could be improved drastically.

 Take a look at this site: http://www.w3.org/People/Berners-Lee/

Burners-Lee has been an amazing proponent of the web over its life and has done wonderful things for it, but his site is one of the worst I've ever seen (very ironic, since he's credited with 'inventing' the internet). I bring this up because it shows an extreme example of the model of web design from about 1993... a model that still prevails today, although sites like Terminus and others are starting to break it.

As a counter-example, take a look at the MIT homepage (http://web.mit.edu/). By no means is this a stellar page, but it emphasizes one key design idea: everything of importance has been compressed hierarchically onto one page in a visual format that is easy to understand at a glance. I don't need to scroll down or read through endless text to find what I want. It's simple and easy to use.

We will overload people with information

One thing that is for sure is realneo will be an information overload - the site is full of 1,000s of pages of content, and probably 100,000s of links.

We can build a front end that is more graphical and Flashy, but one step in most people will be there to read and write so will expect a "newspaper", blog or forum type format.

When I come to realneo now I check to see who's online and new, see the block of my buddies' recent posts, and then whether there are new comments or postings. I check back a few times a day, and interact if there's anything new of interest. Once the calendar gets filled up, I'll get in the habit of checking that. Once more people I know are using realneo, I expect to use private messaging more. I see it becoming very useful to help me manage information overload in many ways.

re: Tim Berners-Lee's site

Tim Berners-Lee's site is an example of the belief that 

information is paramount.  For the most part, I agree.  Sure,

this site could use some dolling up but the site is what it

purports to be: a page with info about the creator of the

World Wide Web.  It isn't pretty, but it works.  I am not

thrilled about scrolling but sometimes it's necessary.  The

same with Tribe.  The true skill of web design is making a

site usable and pretty.

Derek Arnold

Here are a few sites I like

http://www.blogger.com/start - Very easy to tell what you are supposed to do.

http://cdbaby.com/ - A really fun friendly site. If you buy something they send you really cool funny email about the status. Makes you want to come back.

http://cafepress.com - Again, its really easy to figure this site out. I especially like the way they pitch "membership" right on the home page, and I like the wording they have used.

 

CBS news

this one is similar to the NY times but not quite as dry.

http://www.cbsnews.com

The Onion and Ourmedia

Here are two sites that actually run drupal.

Note that you can login to ourmedia using your realneo account information, e.g.:

robataka [at] www [dot] realneo [dot] us

Steal that theme...

The Onion is a perfect example of the type of content management we need, running in a Drupal environment. We need to change the taxonomy and look but the layout and structure are near perfect. One big difference will be our implementation will be interactive - we'll have lots of other cool differences.

Why are these good?

That's great that these sites are running Drupal - but why is this structure and layout near perect? Looking at the HTML code for the main page of the Onion, my computer  counted something like 189 links! It has a 4-column newspaper-like layout, but there is stuff everywhere - an assault on the senses. I'm not trying to criticize taste, but to get us to hone our ability to understand why it is we like certain things.

The Good, the Bad, and The Ugly...

...was always one of my favorite movies, and favorite titles of a movie.


Good questions Michael. As you are well aware, I stay away from design....I have no sense for it. I actually posted those to links for two specific reasons...

  • Both are actually drupal, for whatever that is worth...And The Onion is a hugely popular site...never had heard of ourmedia before this though.
  • Ourmedia, as you note in a comment below(above?) has video blogging on it. And it is drupal...

As I mentioned, I stay away from design as I have no sense for it. Trust me...I have enough problems matching my clothes....Hence, I cannot answer *why* I like them, I am not even sure I do since I really was posting both sites as what is possible with drupal.(Run on sentence...ah, I need more coffee!)

Why newspaper format - as one option

Happy New Year!!!!

Right now, we need to restructure and enhance the design of realneo. It seems we can organize the content into categories - arts/culture, environment, economy, education, health, technology - which would allow us to present it in a newspaper type format, like the Onion. That is logical to me, as I'm used to newspaper interfaces. I can go into details on what I like about a newspaper layout - we should have a design meeting on that.

That said, consider this is just one theme concept, which should be pretty easy to execute (assuming we can copy lots of their code). I like some of the features, I agree with you about some of the flaws.

What do you have in mind, that we can execute by the end of break? 

More comments

Here are the comments I emailed to everyone earlier:

Here's my 2 cents....

Somewhere along the way I heard someone, maybe David Moss, ask what the goals are for the site. I would think that needs to be defined before we make any design decisions. For example, Who will visit this site? Why? How will they find out about it? What will we do to get them to come back again? How do we keep them from moving on to something else after the first 3 seconds as opposed to being pulled into the site? Which pages will be likely entry pages...only the home page? Or will other pages end up containing commonly needed info and be indexed, thus becoming entry pages?

 

As far as the designs, I like the first and third designs - very impressive. But as a Macromedia customer I really don't like the new Macromedia design. Macromedia used to be one of my favorite websites 
- yesterday is the first time I saw the new design. I found it to be homogonized - at first I couldn't understand why I couldn't find what I was looking for (nice implementations of Flash video) - and then I realized that they were assimilated into Adobe and that is how they got that new design. So there's one customer's perspective - a company that specializes in artsy products should look artsy. What does RealNEO specialize in? Maybe defining that will help us to know how we should look.

The reason I suggested Flash Video and Vlogging is because these are things that are new enough to still have "wow" factor. I think its important that we get that "oooh" when someone arrives at the site, but it is equally important that they can quickly get down to business and find whatever it is they came to the site for (e.g., event listings, discussion of community projects, whatever).

 

thanks,
Karen

wow and oooh are very important

What we specialize in is a good question. We provide a free, open source virtual community for people to collaborate and communicate, and we have driven people to use that for raising awareness around economic development in Northeast Ohio.

We specialize in providing the capabilities to develop virtual communities, and we develop world-class virtual community capabilities, and we enable and deliver world-class virtual communities, like realneo.us.

Another virtual community we are enabling is for Voices and Choices, which will have 10,000s of members, generating lots of traffic and activity. Ultimately, the community of voices and choices, and realneo, and the sustainability and arts communities, and all others interested in this region and using technology well will all use realneo and many other internetworked virtual communities.

I think one thing that will draw people in will be the events calendars - both the content and the filtering are very useful... there are lots of enhancements and design opportunities to come with handling this.

I also find the realneo content is very good, even though it only represents input of a small group of people. The community and content are growing, and this forum is a good example of that. The content - the dynamic of interactive content - will keep people coming back.

Many people will use the blogs and image galleries, just as they are intended. As more people use the site, more people will rise up as leaders of forums, will add events and other content, and the site will become increasingly interesting.

I think good design will add wow and oooh. I'm counting on our design community to make that happen. I'll offer my feedback but it's up to you artisits to make this happen.

I do want to feature local art in the design and content, and encourage local artists to use the technology and develop themes. I think this will help them gain more market awareness and sell art.

We'll soon have many themes people can choose from - Rob wants something very fast and stark while you want something very graphical - my 12 year old daughter wants something light - and doesn't want a bunch of boring adult RSS feeds but wants to see what her buddies posted. 

So we need to quickly knock out a nice redesign of the current realneo.us site - and fix some module and CSS issues - and update the taxonomy - and at the same time we will work on future wow, oooh, and artsyness. 

ASAP, we want to deliver a bleeding edge experience that will bring millions of people together from around the world 

Feature ideas - List

This is a list of ideas for functional features. Please post your feature ideas as a reply to this post.

My initial ideas:

  • Flash Video
  • Vlogging
  • Ringtones
  • Podcasts - Audio & Video
  • Integration with MySpace (?) I've seen an "Add to MySpace" link for video on planetvids.com
  • Cell phone feeds
  • RSS Event Calendars (Rob has been talking about this)
  • "Branded" email

wikipedia definition of vlogging

vlog or video blog is a blog (short for weblog) which uses video as the primary content; the video is linked to within a videoblog post and usually accompanied by supporting text, image, and additional meta data to provide context.

Blogs often take advantage of RSS for syndication to other web sites and aggregator software (RSS readers). With the inclusion of RSS Enclosures, which provides the ability to attach media files to a feed item/blog post, it is possible to bypass the mainstream intermediaries and openly distribute media to the masses via the Internet. Vlogs typically take advantage of this technological development, just as audioblogs have in recent years via the podcast boom.

Videoblogging gains popularity with each passing month, especially since the release of the new Apple Video iPod and the availability of iTunes Store's video content. iTunes uses the term video podcast to describe a video blog.

more info:

http://en.wikipedia.org/wiki/Vlog

Cellphone Vlog - MobVcasting

How about implementing a Cellphone Vlog solution and feed it back out with RSS?

 

Check out:

http://www.mobvcasting.com/wp/

__________________

More info:

http://www.walking-productions.com/slop/cat_vlog.html

"I have been doing something that I call MobVCasting for some time.

Essentially, it is video blogging with a twist. My vlog posts are created, edited as well as posted directly from my mobile phone. I use MMS (or Multimedia Messaging or picture messaging or whatever your provider calls it) to post videos to my vlog.

You can see what I do by visiting http://www.mobvcasting.com/wp/

I am almost to the point where I feel comfortable offering this capability to all who are brave enough to try.

Although I am not ready for offering personalized service (which would entail posting to your blog though mobvcasting), I have opened up a test MobVCasting vlog that anyone is free to post to. I am calling it OpenVlog at MobVCasting. You can see it at: http://www.openvlog.mobvcasting.com/

Anyone is welcome to use their mobile phone to post to this "open" vlog. You will need a video capable phone and the ability to send MMS (multimedia messages or picture mail or whatever your provider calls it) to an email address. The address for this service is openvlog [at] mobvcasting [dot] com. The subject of your message will be the title of the post and any text in the body of the message becomes the body of the text.

One last thing, your mobile phone provider may charge you to send MMS messages. So if you give it a shot, don't go overboard until you get your first bill.

Please feel free to send any questions or comments my way: shawn [at] mobvcasting [dot] com"

Cell Vlog sounds great

This is a great idea, Karen - are you leading the implementation? What will it take, including time for documentation and some hands-on training of staff

I will take the lead intiitally

I believe we have the right team to be able to do this.  I think RealNEO would be the first Cellphone Vlog for Northeast Ohio, but I need to verify that.

I'll look into this further and give more details at tomorrow's meeting.

Video RSS

http://www.cctvcambridge.org/mediarss

"Media" RSS page for cambridge community tv. This is the part that excites me the most:

iPod Video Player: Download
No surprises, Apple's iPod portable music player now handles video playback. Use a different link to take your CCTV programming with you on the road, in iTunes use the link below, download the videos, and transfer them to your iPod: http://www.cctvcambridge.org/ipodfeed "

 

So, to make a long story short, we could allow registered users to transmit cell phone video to our vlog via email, and then feed that vlog back out to video ipods (as well as to other clients). 

 

Interesting movement

Sounds like the start of an interesting movement - I'm interested in the art of low res video so I could see something cool coming of this. I've been looking for something to work with on with Robert Banks... the extreme opposite of his medium but I think the outcomes will fit his style and vision... to be determined. Check into the technology side of all this.

Working example of cellphone vlog

http://www.openvlog.mobvcasting.com/?page_id=2

If you have a cell phone you can send a video to this and actually try it out. I'm going to try to contact the person who put this together.

Drupal Vlogging Funcitonality Started

here is a link to someone who began writing this for Drupal, and has been asking for help in finishing it:

http://moblog.nullcraft.org/?PHPSESSID=09bea10208ee8bed3bde314635721b9f

 

"It was a bear to get working - it's a Drupal module called moblog that seems to be still in development and is not too well documented. Info here: http://drupal.org/node/10477

To get it to run, you need to install the following modules in your Drupal site:
- The mailhandler module (retrieves the MMS message from a POP3 mail account)
- The mime_registry module (maps the image file, usu. jpg, to a file on your server)
- The moblog module
- The mailalias module (optional)

The module dowloads are here: http://cvs.drupal.org/viewcvs/contributions/sandbox/javanaut/

I think you also need the Image upload module:
http://drupal.org/project/image

Some install info is here:
http://cvs.drupal.org/viewcvs/contributions/modules/moblog/README.txt?rev=1.2&view=auto

One tip on something that tripped me up for a while: if you don't use the mail alias module, the email address for your Drupal account must be the same as your phone's email address, i.e. 4155551212 [at] tmobile [dot] com. The reason is that the moblog module uses that email to authenticate that the incomming MMS message. With the mail alias module you can keep your real email address in your account info and make the phone email address an alias.

Another caveat is that moblog only works with TMobile MMS messages. Each mobile phone service uses a slightly different format for their MMS messages, and moblog only has code written to parse TMobile MMS messages. With a litte work you could look at the file that parses the MMS message and write a version for another mobile phone provider.

Good luck! Let me know how it goes.

RE: the phpcraze site you metioned, it doesn't look like they are using the same drupal modules, but I could be wrong"

It's agreed we'll work on vLogging

Okay Karen - you've got all our support to go after development of the vLogging module. Get in touch with everyone who has worked on this in the past and figure out how much work is ahead to do what (e.g. write versions for other mobile phone providers), and see whether there's anyone else willing to help on this.

Once we know what is involved, we'll figure out how to pay for it. Ball's in your court.

As a side note, the site

As a side note, the site that Rob posted www.ourmedia.org (which is also a Drupal site), has a video blog. Check it out!

OurMedia is definitely cool

Our Media is definitely another excellent Drupal site - I think their focus is largely video. Check it out!

More on ourmedia

You can learn more about vlogging at http://www.ourmedia.org/node/128116

Wallpaper and Ringtones and the local Arts community

Offer cellphone wallpapers designed by local artists

Offer cellphone ringtones developed by local musicians

provide guidelines and instructions on how to create

Be able to offer them free or for sale. Maybe offer a different free set every week, that would bring people back to the site to check to see what is free each week.

Now you're rolling

Good creative energy. I have no idea how to make wallpaper and ringtones but if I could make them or get cool ones from here I would - so how do we do this?

This needs research

But as popular as it is, I'm sure there are multiple options. It can't be that difficult. Do we have any experience with these things in this group?

Event RSS

One example of what can be done with Event RSS is deployed at Lawrence.com. There you can subscribe to a general event rss, or even event rss for specific bands for example. Or specific venues as another example. The Lawrence.com site is powered by a system called Django, which was specifically developed in python to power that site and the Chicago Crime.org site. It was subsequently released as open source.


There are a couple of things that are possible here. First of all, RealNEO already has event listings. I am confused as to the difference in the top menu thing between events and calendar as they appear to me to be the same thing. One order of business would be to create a rss feed out of these event listings. One cool thing about the Realneo event listing is that you can download the event listing as an ical file and merge it with your work/personal calendar. For example, I am able to download it and merge it into my Kontact calendar.


The other thing is that we also have a feed aggregator on RealNEO. It should be fairly straight forward create one for events that already have RSS feeds. We just need to know where event feeds are located so we can pull them.


Sorry, but sort of a random thought comment....


On events and calendar

The events and calendar menus do the same thing and I'll simplify that today.

We definitely want to leverage RSS to create a central calendar of feeds from all the sites we support...we'll know where the event feeds are located.

I'd say this is one of the highest priorities. So who should work on that and what will it take? 

Other considerations

Here are a couple of other things not to forget relating to the redesign:

- Create a customized Favicon

- Search Engine Positioning / Title and Description tagging

- Compatibility with PDAs and Cell Phones

Checking out design elements : Upcoming.org

Greetings all,

I just thought I'd point out a site I encountered while searching for rich sources of calendar content and found one: upcoming.org which you can check out here.  The site appears to be a recent acqusiion of Yahoo! (it is a subsidiary)

Some of the interesting design features could be considered for our own calendar functionality.  They have the same vision we have always had of a rich, self-sustaining calendar open for the pubic to post events to.  They also use Tags- which categorize the event to drive users to events of the same category.  For example, a posted event on Russian Theater links to meta Tags for Theater, Russian, and Plays.  We could be very specifc and creative in our own tag design - I like that our tags link to relevant forums though,since that can provoke rich discussion and information sharing beyond event provision.  Let's design our own tag system to be creative and innovate beyond this level.  We can have a more socially conscious view about this and really foster positive changes in the process.

Absolutely right - we will overcome upcoming.org

There is no doubt one of the killer aps is the calendar - the Holy Grail. As soon as we have a centralized calendar for Northeast Ohio, which communicates with the calendars of all the organizations in NEO, and all the personal calendars of the members of the virtual community, we will have a highly effective community. For now, we can accomplish much of this with realneo.us and filtering by categories (and content type). What we still need to determine is what is the best taxonomy for the filtering - we'll discuss this over the coming weeks.... it's tricky.

This site (upcoming.org) is

This site (upcoming.org) is pretty good, actually. There's nothing visually stunning about it, but it seems really easy to use. I really like how the mission statement is right there to see, so that you know immediately what the site is about. There is then a very clear area in the middle that answers the basic questions that any user will have (how do I start, etc.). Good, simple design.

Skins contest at Nucleus is exciting

I noticed one of the themes for Drupal was developed for nucleus CMS, so I checked out their site and realized many of the Drupal themes come from there - and each of those have some layout issues (and this explains why).

I was particularly interested in their skins contest, as I'm proposing we do something like that for realneo. Check out their skins browser at http://skins.nucleuscms.org/browser/ and realize we'll start seeing the same range of creative approaches to realneo very shortly. I especially like the "Slick" skin, where you can change the background color... check it out.