New http://mediagoblin.org/ website design

[Christopher Allan Webber]

We need a new design for http://mediagoblin.org/ for the 0.1.0 launch! This is the site about the software project, not an actual instance of the software. The colors should match a little bit closer to our MediaGoblin software, though the look and feel does not have to be the same (in fact, maybe shouldn't be, as the software is designed to be non-invasive so that the media can stand out, but this is marketing material, and so the design should stand out on http://mediagoblin.org)

I made a vague ascii art mockup for the frontpage.

|         |_blog_|_wiki_|_Download_|
|                                  |
|           MediaGoblin            |
|                                  |
| .------------------------------. |
| | Art   Text describing GMG    | |
| |       goes here!             | |
| |        - bullet              | |
| |        - point               | |
| | .-------. .------. .-------. | |
| | |       | |      | |       | | |
| | |scrnsht| |scrnsh| |scrnsht| | |
| | |       | |      | |       | | |
| | '-------' '------' '-------' | |
| '------------------------------' |
| .--------. .--------. .--------. |
| | Run it | | Use it | | Join us| |
| |        | |        | |        | |
| '--------' '--------' '--------' |
|  .----------------------------.  |
|  | News!                      |  |
|  |  - Headline!               |  |
|  |  - Headline!               |  |
|  '----------------------------'  |

The idea of this is like so. There's something similar to the top-navigation like we have now in the upper right, but the rest of the frontpage is broken up into three primary sections

• First section sells it: provide a cute image of the mediagoblin mascot, provide text perhaps with bullet points explaining it generally. Directly underneath the text/image but in the same block is a carousel of screenshots
• Second section directs you: Three columns, each one targeted with information to properly direct members of our three target audiences (Administrators, site-users, contributors)
• Third section informs you of updates: Just headlines from the blog with datestamps which link directly to recent entries.

Example detail of an element from the second section:

.---------------------.
| Run it              |
|---------------------|
|  Run MediaGoblin!   |
|  Be awesome!        |
|                     |
|   - Here's the docs |
|   - Maybe another   |
|     bullet          |
'---------------------'

We should also:

• consider reorganizing other sections of the site
• add archiving features to the blog, probably the yeararchives plugin http://pyblosxom.bluesock.org/registry/archives/yeararchives.html

[Sam Kleinman]

I think the proposal looks great. I don't think this comment should affect the substantive work of this topic; but, I think it might be good to begin assembling content so that we have a good idea of what the design needs to hold and convey before we're cemented to anything in particular.

[Christopher Allan Webber]

Hi Sam,

Yes, I think you're right.. I'm not sure this is cemented yet. The design needs I've thought of is "we need to address our three usergroups" as described above, "we need to sell the project", and "we need to give users updates". That's what I was thinking while making the design.

I'm welcome to more thoughts on requirements! :)

[Christopher Allan Webber]

Will, is it possible to get a list of recent blogposts on the frontpage? If so, could you point me in the right direction for that?

[Greg Grossmeier]

cwebber: The feed is available at http://mediagoblin.org/news/index.xml

I had to poke around the html source for that. There was no easy subscribe link/button/whatever.

[Christopher Allan Webber]

Thanks Greg, I'll make sure that's included in the design.

Jef, if you also do a mockup of the blogposts (not as high priority as frontpage) would be great to see if you could include a location for a feed button. If no time, I can work that in.

[Will Kahn-Greene]

I added the recent 5 blog posts to the front page just now. It'll show up in the next update (or it'll fail and I'll look into it).

[Will Kahn-Greene]

I added an RSS feed link to the navigation bar at the top. I also changed "Blog" to "News".

That's it for quick fixes from me.

[Jef van Schendel]

Here's the latest mockup: http://schendje.fedorapeople.org/goblin/homepage/final.png Still needs a few more changes, but I'd rather do that in HTML.

I've created a new branch of the mediagoblin repo which contains a first HTML mockup as /mediagoblin/templates/mediagoblin/root.html. What I need now is someone who can take the needed bits from that file and integrate them into mediagoblin-website for the new front page.

After that there are still several things that need work:

• Small design changes
• Correct links
• CSS files, images and icons
• Etc

...But I can do those myself. :)

[Will Kahn-Greene]

I overhauled the site style to use schendje's work and it's in the new-style branch of the mediagbolin-website repository now.

I have a few thoughts:

1. The new style ditches the /join/ page. We've got a lot of stuff pointing to that link, so either we need a new /join/ page or we need to update .htaccess to redirect that to where that information will live.
2. The new style has no link to the manual (http://docs.mediagoblin.org/).
3. We probably need to tweak the news section so that it has a place for the yeararchives.
4. The News link in the navigation links in the upper right needs the RSS icon and link to the feed. Either that or we need a better place(s) to have the News RSS link.

Having said all that, it sure looks a lot better already!

[Christopher Allan Webber]

Done! And LIVE! http://mediagoblin.org/

OHHHHHHHHHHHH YEAHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH

[Will Kahn-Greene]

The original url for this bug was ​http://bugs.foocorp.net/issues/543 .
Relations:
#246: related