website quick fix: Sponsor page

jodygarnett commented 6 months ago

From email I have asked marketing committee for go-ahead to make an emergency quick-fix for the sponsors page:

Hey folks, I am making a proposal below for a quick fix, please respond with a +1 and we can unblock an issue that has become urgent.

Discussion welcome, but growing scope is not. I was present during the website project so I know some of the graphical design tradeoffs in order to answer questions.

Problem

So some pages of the website have run into problems (with updates and changes) and need some emergency graphic design decisions.

The https://www.osgeo.org/sponsors/ page is a bit broken right now, with logos displaying in a single column, and square logos ending up with too much visual weight making for an inconsistent visual.

Notes:

https://trac.osgeo.org/osgeo/ticket/3000 discussing the technical challenges e (This is held up due to lack of graphic design input)
Lior was going to look at sponsorship benefits and this page https://www.osgeo.org/about/how-to-become-a-sponsor/ (Presently it has very prescriptive benefits with exact icons sizes while is ill-advised)

Sponsor Page Quick-fix Proposal

Goal is a good single page presentation, with logos given representation based on sponsorship logo. Logos within a tier should have similar visual impact.
Restore columns: The https://foss4g.asia/2023/our-sponsors-partners/ page is similar to what we started with, with visibility based on sponsorship tier.
Logo scaling for fair visual impact: The https://foss4gna.org/ page is a good example of fair logo scaling with a perfect rectangle provided for each logo, with a margin for white space so each logo can breath, both square and rectangle logos end up with similar space. (This is an example of how to be fair, I am not recommending the rectangles be visible as is done on the foss4g-na site)

Planning

If we do get a budget for 2024 we should assemble a work package of outstanding requests (review emergency fix, mastodon social logos, committee page template etc...)

I strongly wish to avoid doing isolated quick fixes, it is so easy to do small changes that make sense for one objective, and damage the effectiveness of an individual page. Example: some sponsors get color logos, having logos moving in the footer, etc...

jodygarnett commented 6 months ago

From email discussion I was able to look up the original approved wireframes, and do some research on the image sizes expected for the graphical design:

GetInteractive Design

When editing a sponsors page - and adding a logo the image produces a warning indicating:

Width should be at least: 740px
Height should be at least: 412px
740 by 412px (aspect ratio of 1.80)

Reviewing the logos produced by get interactive show a distinctive "hotspot" where the logos are arranged within a tile.

the wordpress layout provides a square for the image above (example 500x500, or 200x200) however the images are not intended to be sure.
the wordpress layout does not have any css control of the gaps between images, instead it relies on the image being produced with an appropriate margin for the individual sponsor logo

Hotspot

Example of this used with sponsor logo provided by GetInteractive:

You can see how much whitespace is built in to the logo. This makes sense as a graphic designer is comfortable in a paint program and can make allowances for "unbalanced logos" (that have a mix of light and dark content).

Wireframe

Here is the wireframe showing intended multi-column layout:

the logos are intended to be rectangles, I assume squares were provided to force some whitespace in-between rows

jodygarnett commented 6 months ago

Notes on the theme to discuss with @cvvergara, any actual changes would be actioned here https://trac.osgeo.org/osgeo/ticket/3000

I am just looking at theme to determine design constraints for visual logos.

Checking www_osgeo/origional branch

wp-content/themes/roots/templates/atomic/organism-sponsors-list.php

grayscale indicates to me that this is for the footer

        <li class="col-sm-2 list-item sponsors-item grayscale">
            <?php if ($url): ?><a href="<?php echo $url ?>"><?php endif; ?>
                <?php gi_load_template('templates/atomic/atom-image.php', array(
                    'src' => $logo['url'], 
                    'title' => $sponsor->post_title,
                    'width' => 195,
                    'height' => 80
                        )); ?>
                <?php if ($url): ?></a><?php endif; ?>
        </li>

wp-content/themes/roots/templates/atomic/organism-sponsors.php

this must be for the individual rows

            <li>
                <?php if ($sponsorUrl): ?><a href="<?php echo $sponsorUrl; ?>" target="<?php echo $target; ?>"><?php endif; ?>
                    <?php
                    echo gi_load_template('templates/atomic/atom-image.php', array(
                        'src' => $sponsorImage['url'],
                        'title' => $sponsor->post_title,
                        'width' => $size,
                        'height' => $size
                    ));
                    ?>
                <?php if ($sponsorUrl): ?></a><?php endif; ?>
            </li>

wp-content/themes/roots/archive-sponsor.php

Not sure why these pages all say "archive" but this does the rows

    <section class="block diamond-sponsors">
        <div class="container">
            <h2>Diamond sponsors <?php echo $currentYear; ?></h2>

            <div class="row">
                <?php gi_load_template('templates/atomic/organism-sponsors.php', array('sponsorType' => 'diamond', 'size' => 400, 'target' => '_blank')); ?>    
            </div>
        </div>
    </section>

jodygarnett commented 6 months ago

I have produced the following guidelines to visually recreate the sponsor logos following GetInteractive design examples:

Heatmap:

Guidelines:

I have made the decision to allocate more vertical room to square logos, the chance for visual conflict is low as the sponsor logos are being arranged in a square grid.

For any sponsors with concerns about fairness:

horizontal guidelines: 692 x 248= 171,616 area
square guideline: 370 x 370 = 136,00 area
The square logos are often visually stronger, more dense with higher contrast, so the above looks fair to my eye.

Here are our top sponsors with this visual change in mind:

jodygarnett commented 6 months ago

I have uploaded assets here: https://github.com/OSGeo/osgeo/tree/master/marketing/website

jodygarnett commented 6 months ago

@cvvergara the main website is updated, if you can restore columns as part of https://trac.osgeo.org/osgeo/ticket/3000 then this issue can be closed.

cvvergara commented 6 months ago

@jodygarnett Sorry for the delay, I am sick, will do that tomorrow

jodygarnett commented 6 months ago

Please take care, volunteer activity so only we do as are able.

OSGeo / osgeo