search

MutopiaProject / MutopiaWeb

MutopiaProject site evolution to HTML5
3 stars 7 forks source link

Home page mock-up #32

Closed PaulMorris closed 8 years ago

PaulMorris commented 8 years ago

Here's a possible redesign of the home page that I mocked up: http://clairnote.org/html5mutopia/index-full-wide-6.html

This moves the contents of the Browse page to the home page, except for the huge list of composers, which would, in this scenario, become its own “Composers" page. It also allows all 25 recent additions to go on the home page, removing a need for a separate page for them. It includes the Acknowledgements and RSS Feed sections from the current Contact page, putting the RSS feed next to the new additions. It goes in a somewhat different direction in terms of the header. I incorporated a 5 line staff into the logo. Everything still works at different screen sizes. Bootstrap with its CSS grid system is working great for that.

ksnortum commented 8 years ago

What I like:

What I don't like:

glenl commented 8 years ago

Thanks for posting this. I'd like to see more mock-ups as ideas present themselves.

Pros:

Perhaps our logo needs to be smaller.

PaulMorris commented 8 years ago

Thanks for the feedback. Here are some more mock-ups. I think it's getting better.

  1. http://clairnote.org/html5mutopia/index7.html I think this improves the squashed left-hand column thing (it took putting the right margin in the middle of a grid column...)
  2. http://clairnote.org/html5mutopia/index8.html Dropped staff lines. Simplified the text to the essentials, with a link to an "About" page (an expanded "Contact" page) for full details. Then gave the text its own row near the top. Allows browse lists to fit in one row, with Latest Additions in the first position for quicker access on phone. (I had moved it lower before thinking it would be of more interest to repeat visitors than new visitors, and optimizing for new visitors.)
  3. http://clairnote.org/html5mutopia/index9.html Tried moving search to top-right, logo top-left.
  4. http://clairnote.org/html5mutopia/index10.html Tried a different order to the browse lists. Moved search to right side of navbar. Centered logo. Might be nice to just have the navbar only as the header, without the logo below it, for pages that aren't the home page. Having the search in the navbar improves this option since it gives easy access to search everywhere. (Tried a little "MUTOPIA" image at left end of navbar, with the idea that it would stand in for a logo on pages that aren't the home page.) Or maybe the logo could be on all pages at a smaller size (maybe not centered?) and only be full size and centered on the home page?
    • advanced search link -- where to put it with no room under the search box in navbar.
    • search is in the drop down menu at phone sizes, harder to find.
ksnortum commented 8 years ago

I like index9 the best. My only comment is that I'd rather not have centered text.

glenl commented 8 years ago

9 - on a small format the menu bar just says "Home"

10 - small format: nice look and the advanced search ends up in the pull-down menu. Nice. I prefer having some offset color under the logo. I'm not a fan of the 2-word "Advanced Search" in the menu bar.

I'm with @ksnortum regarding centered text. Perhaps this section in the sidebar above the new additions and with a smaller font? I would consider having a "more>" link after the first sentence.

Now that @dominicus is done with his Thanksgiving activities I expect him to be catching up and giving some feedback.

PaulMorris commented 8 years ago

These versions have left-aligned text and I shortened the text some. (I like mentioning the licenses and file formats, and I think it is good to say that we offer editable LilyPond files, to emphasize that difference from IMSLP.) The navbar now has a "Search" link on larger screens, but "Advanced Search" in the drop down menu at phone size.

http://clairnote.org/html5mutopia/index11.html http://clairnote.org/html5mutopia/index12.html Search in the jumbotron, visible at phone size. Logo is now centered at phone size. Only difference between them is alignment of "Free Sheet Music..."

http://clairnote.org/html5mutopia/index13.html http://clairnote.org/html5mutopia/index14.html Search in the navbar, and in drop down at phone size. Only difference between them is alignment of "Free Sheet Music..." and logo.

I have a slight preference for 11 or 12 at the moment, as I like the balance the search box brings to the jumbotron, how the search is more prominent, visible by default at phone size, and having the "Advanced Search" link below the search box.

Perhaps this section in the sidebar above the new additions and with a smaller font?

I'm skeptical that this will look good as we would lose the horizontal alignment of the browse columns, but let me know if you want me to try it.

PaulMorris commented 8 years ago

Shorter text: http://clairnote.org/html5mutopia/index15.html http://clairnote.org/html5mutopia/index16.html

ksnortum commented 8 years ago

index16 is looking really good.

glenl commented 8 years ago

I was scrolling through these in various formats and I think I'm starting to warm to the idea of the search bar in to the right of the logo instead of the menu bar. It looks good on a small device and keeps it near the top.

I agree with @ksnortum on index16. It lays out nicely in all the formats I tried.

We will have to come up with an optimum number of instruments and composers to show. Composers: alphabetical order or most downloaded at the top? We have no choice right now because there is no mechanism in place for download counting, but which is better?

As much as I like it, the bare Mutopia on the menu bar might not be a good idea. Whoever owns Mutopia.org is being nice to us but I wouldn't want to purposely confuse what little brand we have.

dominicus commented 8 years ago

Overall, I really like the simplicity of these web templates. I'm attaching a hand sketch with my thoughts. The elements I think that should show prominently at the top block:

Text-based search is one of the primary ways visitors will be able to find what they're looking for. Benchmarking IMSLP, Google, Yahoo, best placement would be center or left-aligned. I liked mock #7 search box, in center with shaded outline.

Middle block: Descriptive verbose column on the left, search categories center, latest additions to right. I think the extended list of composers, styles, and instruments are a waste of premium real estate. For composers, instrument, and style, hopefully we could show top 6-10 sorted by number of entries, with a ">all..." link at the end. For collections, partial list with "all" link. "Latest additions", I like the idea of displaying a longer list.

Bottom block: Acknowledgement, RSS, Mirrors, disclaimer

mutopiaweb_sketch

PaulMorris commented 8 years ago

Here's a version like @dominicus sketch, with 8 items in most of the lists (welcome back! and thanks for the sketch which makes it clear what you're thinking): http://clairnote.org/html5mutopia/index17.html

Here's a version like 16, but with shorter lists. There are only 13 styles so I went with this size for the lists (so no need for "Show All" for styles). That size fits about one screen height on both phone and desktop for me. I think that works well, but it could be smaller. Also adds a row of text blocks below them for "Classical and Contemporary" and "Usage of the Music". http://clairnote.org/html5mutopia/index18.html

For the "All >>>" links... instead of having them open a new page, we could have them just show the rest of the list in-place on the same page. So the whole list would be there (which is good for text searches e.g. "sheet music for theorbo") but some of the list would be hidden by default. Composers is the exception which needs a link to its own page of 300+ items.

See: http://getbootstrap.com/javascript/#collapse

In that case it might make sense to have the lists sorted alphabetically rather than by number of items or popularity (however that's determined). The composers short list could be selected by popularity or number, and then also sorted alphabetically for consistency.

glenl commented 8 years ago

The major comment I wanted to make regarding the @dominicus mockup, @PaulMorris has handled in 18 --- putting the "latest additions" on the left allows this to flow better on a small format device. There is always a fine balance between a first-time viewer at site wanting more detail and the returning viewer who wants to see what is new. I'd prefer to be brief at the top with more information available with collapsed information or with links to the "About" page.

I like the "M" (or what I assume will be the site's favicon in a larger format) to the left on the menu bar. The title and address bar will give sufficient clues where the user is without more text.

All: as you are reviewing these, consider them on tablets and phones. Use the developer options in Firefox (Responsive Design Viewer) or Chrome with More Tools >> Developer Tools.

@dominicus - I absolutely love the mockup sketch. @PaulMorris - you are getting too efficient at this. ("Composers" on the menu bar? Did you mean "Browse"?)

PaulMorris commented 8 years ago

I've added the "show all" expand/collapse in-place feature to these:

http://clairnote.org/html5mutopia/index17.html

http://clairnote.org/html5mutopia/index18.html

Everything else is the same. If we use this we'll eventually want the "show all" link to either go away or change to "show less" when clicked. Either will take some work, as bootstrap doesn't handle that out of the box.

It might make sense to link to a separate page for latest additions (like with composers), rather than expanding them in place, because there are more of them and they take up more room. A page of their own would let each one have its own line.

On questions of new vs returning viewer I tend to favor the new viewer, but I'm fine with the Latest Additions on the left/top.

I like the "M" (or what I assume will be the site's favicon in a larger format) to the left on the menu bar. The title and address bar will give sufficient clues where the user is without more text.

The M works for me. I'd also be fine with the text "Mutopia Project" (could be colored blue) instead (along with the home link that Knute likes).

you are getting too efficient at this. ("Composers" on the menu bar? Did you mean "Browse"?)

Thanks! Working with bootstrap is fun. Much easier than doing things from scratch. I used "Composers" instead of "Browse" because if the other browse lists expand in place on the home page, the browse page could become a composers-only page. But I don't feel strongly about this, either way would be fine.

PaulMorris commented 8 years ago

Here are two more versions that combine elements in new ways: http://clairnote.org/html5mutopia/index19.html http://clairnote.org/html5mutopia/index20.html

(Headers could use some fine tuning at smaller tablet size eventually.)

Having tried out the expanding and collapsing "show all" business, I now think we're better off just linking to full lists on a browse page instead.

We could put the full latest additions list on the browse page too, to get it accessible from a link in the main navigation bar.

dominicus commented 8 years ago

I think it's fine to have a few more "latest additions" entries on the main page (12?), and have it's ">>more" link lead to a separate page with expanded count (say last 25-30), ordered by increasing days since initial publication.

For the other browse categories (composer, collections, instruments, styles), have the ">>more" or ">>show all" link to a page with full side-by-side expanded lists similar to the current "Browse" page. Maybe include a bookmark/anchor to the category header according to the ">>show all" link clicked. This way, if the user is using a mobile phone which may vertically stack the columns, it would auto-scroll to the category s/he wishes to see?

The fully-enumerated pages are still quite light on bandwidth. Our current "browse" page is only 43Kb.

I'm hopeful something can be implemented for main page to have the partial lists for composers, styles, instruments be the top X categories by amount of pieces published.

Until we have a popularity metric, I can't think of a good automated way to select a subset of entries in collections for the main page. I don't see an issue manually maintaining this lone subset.

PaulMorris commented 8 years ago

Here's another version 21 – same as 18 but with a background image for the jumbotron (and slightly different search box with integrated button as in 20). The image is just a slightly darker version of the current site's background image.

http://clairnote.org/html5mutopia/index21.html

One way or another, it would be nice to have some kind of graphical musical element. (For some reason, in the logo image that I downloaded from github, the font for "PROJECT" seems off...)

glenl commented 8 years ago

Well, the "logo" is a work in progress. Since it uses "tweaked" fonts and layouts, I have to remember to convert the font to a path before saving. If I don't it tries to find the font on the local machine and you may not have it installed. I forgot to do that in the first one so who knows what it looked like on your machine. I remembered on the current one. The "Mu" should hang out on the left and "topia" and "project" should line up.

I like the music background. I'm catching up on another project but might be able to update things Friday.

On Thu, Dec 10, 2015 at 7:33 PM, PaulMorris notifications@github.com wrote:

Here's 21, same as 18, but with a background image for the jumbotron (and slightly different search box with integrated button as in 20). The image is just a slightly darker version of the current site's background image.

http://clairnote.org/html5mutopia/index21.html

One way or another, it would be nice to have some kind of graphical musical element. (For some reason, in the logo image that I downloaded from github, the font for "PROJECT" seems off...)

— Reply to this email directly or view it on GitHub https://github.com/MutopiaProject/MutopiaWeb/issues/32#issuecomment-163827811 .

PaulMorris commented 8 years ago

On Dec 11, 2015, at 2:33 AM, Glen Larsen notifications@github.com wrote:

Well, the "logo" is a work in progress. Since it uses "tweaked" fonts and layouts, I have to remember to convert the font to a path before saving. If I don't it tries to find the font on the local machine and you may not have it installed.

That makes sense, thanks. I thought it might be font related. Glad you like the music background. I look forward to seeing the next prototype when it lands.

dominicus commented 8 years ago

Most suggestions for the launch are now implemented. Reviewing the new site, I still think we should sort by piece count in the truncated category lists of the main site for Instruments and Composers. For example, with alphabetical sorting, the truncated Instruments list hides popular categories like Piano, Voice, Violin from the main site. Similar result with Composers. Thoughts? Other issues from this discussion you care about?

ksnortum commented 8 years ago

As I remember, this is a difficult, but I think worthy, endeavour.

Knute Snortum (via Gmail)

On Fri, Apr 15, 2016 at 7:25 AM, Javier Ruiz-Alma notifications@github.com wrote:

Most suggestions for the launch are now implemented. Reviewing the new site, I still think we should sort by piece count in the truncated category lists of the main site for Instruments and Composers. For example, with alphabetical sorting, the truncated Instruments list hides popular categories like Piano, Voice, Violin from the main site. Similar result with Composers. Thoughts? Other issues from this discussion you care about?

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/MutopiaProject/MutopiaWeb/issues/32#issuecomment-210481748

dominicus commented 8 years ago

I peeled off the short-list improvement suggestion to #85. Glen also had created a separate one for popularity metrics. If no further items, I think we can close this tracker.