New http://mediagoblin.org/ website design

[Christopher Allan Webber]

We need a new design for
`http://mediagoblin.org/ <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 <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 <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 <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 <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 <https://gitorious.org/~schendje/mediagoblin/schendjes-mediagoblin/blobs/updated-homepage-jef/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/ <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/ <http://mediagoblin.org/>`_

OHHHHHHHHHHHH YEAHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH

[Will Kahn-Greene]

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