Third-Coast / website

The Third Coast Int. Audio Fest Website Code and notes
0 stars 0 forks source link

2022 Competition/Call for Entries Themes #53

Open mayags opened 1 year ago

mayags commented 1 year ago

Access Equity Community Shared Examine Explore Intention Care Consider Collectivity Collaboration Inviting Transparency Accountability Offerings Exchange

TCEmkenn commented 1 year ago

We want to move away from:

Institutional Self-Serious Remote

& move towards:

Inviting Clear Transparent

brendanmetzger commented 1 year ago

@TCEmkenn @mayags

Interesting notes. I've been playing with color this afternoon, and some typefaces. There are a few looks here, I wanted to keep the color decision-less for now, based off a CMYK palette. I set the typeface to reflect a tone that could carry h1s and some of the sidebar stuff as discussed. lemme take you through my thoughts—it feels like to get a stronger theme across without going down the design rabbit hole, an emotive typeface can pull a lot of weight, so I wanted to show some examples..


this typeface has a lo-fi game vibe, which brings to mind collectivity, collaboration, community, inviting...

Screen Shot 2022-10-11 at 4 42 29 PM

This typeface kinda has a cool origin.. it was designed for a google doodle celebrating the 40th(?) anniversary of the creation of hip-hop—it's look is based on the graffiti in brooklyn I think. Again, has a 'collective' vibe to me

Screen Shot 2022-10-11 at 4 41 24 PM

monospace tried on for size. Without playing harder with what monospace can do in terms of proportions and layouts, it will feels institutional. This one is a tad craft-y to get around that for now.

Screen Shot 2022-10-11 at 4 41 05 PM

this one is called marker felt. While handwritten can be over the top, I've always liked this one because it is consistent/precise and definitely has a "we are sketching this out" vibe, which inherently feels less institutional and more explore-y..

Screen Shot 2022-10-11 at 4 39 38 PM
brendanmetzger commented 1 year ago

Browsing google fonts for awhile this afternoon left me feeling like it was sort of dead ending, so I with to typekit and listed out some solid choices that weren't as emotive.


Rockwell Condensed

Classic well-regarded slab serif for review

Screen Shot 2022-10-12 at 7 41 58 PM

Unit Rounded

Kinda fun

Screen Shot 2022-10-12 at 7 40 06 PM

Unit Slab

Like above two, but a slab serif, and a lil more serious.

Screen Shot 2022-10-12 at 7 37 14 PM

Neue haas grotesk

The progenitor of Helvetica. v hip, sort of gold standard IMO for creating a modern type for the masses.

Screen Shot 2022-10-12 at 7 33 53 PM

Didot

For review, this is by Adrian Frutiger, one of the best typographers of 20th century

Screen Shot 2022-10-12 at 7 30 09 PM

OCR B

Also by Frutiger, this is typeface is so cool. It was designed in the 60s to be readable by machines (Optical Character Recognition). Really gives a modern throwback, and it is monospace so you can do clever things with it.

Screen Shot 2022-10-12 at 7 21 46 PM

Futura condensed

this ones always fun. maybe too trendy there for a min, but nothing wrong with that

Screen Shot 2022-10-12 at 7 14 36 PM
mayags commented 1 year ago

Hey there: thank you for these, Brendan! I like Futura condensed, and also Unit Rounded. Would it be possible to see these -- maybe next week -- using different colors (perhaps from our color template) as well? Thank you!

TCEmkenn commented 1 year ago

Hi there — ooo, fun! I like Futura Condensed, also have always loved Neue Haas Grotesk?

Can I see Neue Haas Grotesk in a slightly less-heavy weight? (Like a semi-bold?)

mayags commented 1 year ago

Would also love to see Neue Haas Grotesk in a semi-bold!

In terms of color/palette: what do y'all think of continuing to use & play with colors from the banner on the homepage?

Pidgey Header

TCEmkenn commented 1 year ago

hiya,

Echoing above. We like the idea of using the colors from the header “banner” from the home page (that Maya posted above), since we worked on that visual identity pretty intensely:

brendanmetzger commented 1 year ago

in order:

brendanmetzger commented 1 year ago

Here is future condensed and neue haas in medium/semi-bold

Screen Shot 2022-10-26 at 9 54 24 AM Screen Shot 2022-10-26 at 9 53 51 AM
mayags commented 1 year ago

Thanks, Brendan!

More soon but:

One small change/question: can the button "Apply Now" read "Enter Now"? Also, can appear across all pages related to the Competition? Is it possible for us to decide where to place that button on the sidebar, or is it set?

brendanmetzger commented 1 year ago

One small change/question: can the button "Apply Now" read "Enter Now"? Also, can appear across all pages related to the Competition? Is it possible for us to decide where to place that button on the sidebar, or is it set?

You can set the language, and it can be applied on any page individually or across a series of connected pages. Eg, if you put a button on the categories page, then all the individual categories connected will have an apply button too.

the language you need to execute is - [Enter Now](link to form)

mayags commented 1 year ago

Ok, thanks!

I just tried that out here for the button on this page: https://thirdcoastfestival.org/explore/detail/BwZ

What am I getting wrong?

brendanmetzger commented 1 year ago

@mayags it has to go in the 'extra/billboard' section

mayags commented 1 year ago

@mayags it has to go in the 'extra/billboard' section

Hmm, I've tried that on the category page: - Enter Now is in the Extra Section.

brendanmetzger commented 1 year ago

@mayags oh, sorry, none of this will show up yet until I push my code. It will look like what I have in the screenshot though

TCEmkenn commented 1 year ago

@brendanmetzger: @mayags & I talked, and I think we want to go with the neue haas in semi-bold/medium for now, and keep playing around with that color palette above

In terms of giving the banner a bit more texture could we make it a textured image with a slight gradient? Inserting an option:

Gradient with Effect

mayags commented 1 year ago

Hi Brendan:

I think the "Category" pages are looking better and better: I like the color for the banner & the billboard.

I just edited the "billboard" on the Best Documentary page -- I think it will be closer to this length, rather than the longer copy we were playing with before. With that in mind, could the "On this Page" section live just below the billboard?

Would it be possible to make the following pages consistent with the "category" pages (in terms of the banner + sidebar + billboard?): Landing Page, the "roadmap" pages aka the Categories Page, Offerings Page, Entry Guide Page, and Entry Rates Breakdown, plus our "Vision + Values" pages -- the Looking to the Future Page, History of the Competition Page and Collective Pricing Model Page (We may add on more page in this category!)

brendanmetzger commented 1 year ago

@mayags I've updated the sidebar on all the pages to have the gradient. Unfortunately the banner won't have an immediate solution, as those pages are technically still an article template, unlike the category page. I'll ponder it though and see if there is anything I can come up with that doesn't involve creating a new template.

That said, I have v. limited time left today, so it might not be something to wait on!

mayags commented 1 year ago

Ok -- let me know when the pages are ready, and I'll dive in.

Beyond this morning, when do you have availability left today (launch day!)

mayags commented 1 year ago

@brendanmetzger A few very specific questions/changes for you:

1) On the category pages, the H6 function (which allows the text to be clicked, and then more text to drop down) is no longer working! We really like/want the functionality of that -- we want everything below "How to Enter: Best Documentary" (or "How to Enter: X Category" on whatever category page) to mirror the way that each individual offering function on the Offerings Page. Does that make sense & can you fix that?

2) We're liking the way the "billboard" is looking more and more, for example on the Best Documentary page. We want to keep that copy inside the orange-y gradient "billboard" box, but DELETE the old copy from the old "billboard" or Extra section. That's the copy underneath the "Enter Now" button until the "Related Pages" section. How do we (or you) delete that copy?

3) The highlight function for "On this Page" is a really cool accessibility tool. Can the highlight color please be a different color than the bright yellow? Could it perhaps match the billboard color, or even the green?

4) On the Competition Categories page, why is the "Enter" button inside of the billboard? Is it possible for the Enter button to live below the billboard, like on the other pages?

mayags commented 1 year ago

Two more urgent things @brendanmetzger :

brendanmetzger commented 1 year ago

I only have a minute at the moment, but change the form url on the category page extra I think -- it's just a markdown link

In order to make a new award, it needs to be a collection/playlist, then attach it to the main category page and you'll be good

mayags commented 1 year ago

Hey -- so I am able to insert an Enter Now button the category page, but there's one Enter button that we don't have access to/can't edit... right? See here: https://www.thirdcoastfestival.org/explore/detail/Bwh

mayags commented 1 year ago

Hi there:

I see some of the issues above got resolved, yay!

Still wondering about the following:

We're liking the way the "billboard" is looking more and more, for example on the Best Documentary page. We want to keep that copy inside the orange-y gradient "billboard" box, but DELETE the old copy from the old "billboard" or Extra section. That's the copy underneath the "Enter Now" button until the "Related Pages" section. How do we (or you) delete that copy?

Also: is possible to include the "Enter Now" button on every page, consistent with how it's set up on the "category" pages? (In other words, as a separate "Enter Now" button, rather than inside of the "Billboard")

brendanmetzger commented 1 year ago

@mayags

We're liking the way the "billboard" is looking more and more, for example on the Best Documentary page. We want to keep that copy inside the orange-y gradient "billboard" box, but DELETE the old copy from the old "billboard" or Extra section. That's the copy underneath the "Enter Now" button until the "Related Pages" section. How do we (or you) delete that copy?

To delete the copy, you would remove it from the competition categories page. That parent page's 'billboard' is appended to each connected category page, which has the effect of putting the enter now on every page, which leads to your second ?...

Also: is possible to include the "Enter Now" button on every page, consistent with how it's set up on the "category" pages? (In other words, as a separate "Enter Now" button, rather than inside of the "Billboard")

As long as the link is in the extra/billboard section, it will be applied to all category pages (along with whatever copy you spec). There is now a caveat I hadn't accounted for when you asked to make the article pages have the orange-gradient 'billboard', which I'll try and articulate cleanly..

The rationale was to provide consistent language across child pages as the competition information needs to be updated, rather than updating lots of individual pages manually.

I can simply take away the orange box on article pages and make plain, or make 'parent' pages no longer share their billboard with 'child' pages, which removes the button from every page and would have to be added manually to each category (though then it would be in an orange box!)

Lastly, I can hard code it into the template to step outside of the orange box for the button, but should anything change, I would have to recode the template, which given the turbulence of my workload lately, may not be ideal  😕

mayags commented 1 year ago

Hi hi:

Ok, I think (?) I am understanding.

Also, wanted to bring your attention to this point from one of the posts above, which I think is also still unresolved: The highlight function for "On this Page" is a really cool accessibility tool. Can the highlight color please be a different color than the bright yellow? Could it perhaps match the billboard color, or even the green?

Index of Pages to include an "Enter Now" button outside of the orange "billboard":

ROADMAP-PAGES: Competition Categories 2022-23 Offerings Entry Guide

NUTS & BOLTS Entry Rates Breakdown General FAQ

CATEGORY PAGES: Best Documentary Audio Unbound Best Documentary: Non-English Language Best Documentary: Short Best New Artist Best News Feature Impact Best Serialized Story Directors’ Choice

VISION & VALUES PAGES Looking to the Future More on our Process Collective Pricing Overview History of the Competition

brendanmetzger commented 1 year ago
brendanmetzger commented 1 year ago

I have a little more time to update what I can—I still need to change the competition title, which should only take a few minutes, but I'd like to package the last set of changes together

mayags commented 1 year ago

Hi @brendanmetzger

I think I am good with you hardcoding the "Enter Now" button so that it appears on all pages, as long as it's something that we can remove once the Competition closes on March 10.

If the "Enter Now" button lived somewhere else on the page, could it be placed on the index of pages above, rather than every page on the website?

brendanmetzger commented 1 year ago

If the "Enter Now" button lived somewhere else on the page, could it be placed on the index of pages above, rather than every page on the website?

I'm not sure I follow the placement you refer to. Generally, text that says 'enter now' without any context is a bit hard for me to get behind, but I can certainly do it.

mayags commented 1 year ago

Ok -- scratch that thought. I am not totally sure if I'm following.

mayags commented 1 year ago

Ok, @brendanmetzger a point of clarification, in case this helps:

What I think we want is for an "Enter Now" button to only appear on the constellation of Competition pages that we're introducing today -- more on that below.

The exact placement of the "Enter Now" button that we're looking for would be on the sidebar, below the orange "billboard" and above the "On this page" menu.

The constellation of Competition pages we're hoping the "Enter Now" button would appear on is listed below, as an index:

ROADMAP-PAGES: Competition Categories 2022-23 Offerings Entry Guide

NUTS & BOLTS Entry Rates Breakdown General FAQ

CATEGORY PAGES: Best Documentary Audio Unbound Best Documentary: Non-English Language Best Documentary: Short Best New Artist Best News Feature Impact Best Serialized Story Directors’ Choice

VISION & VALUES PAGES Looking to the Future More on our Process Collective Pricing Overview History of the Competition

brendanmetzger commented 1 year ago

Right, so all of these are article templates except for the 'category pages', so if I hardcode into the template, the screenshot below will happen. If you want the enter button only on that list, it has to be added to the 'extra/billboard' portion of that page, but it will have the orange background (unless I remove the orange background from article pages).

Screen Shot 2022-10-28 at 12 00 01 PM
mayags commented 1 year ago

Got it.

Ok, @brendanmetzger, for now: let's not hard code the "Enter Now" button into the article template. You can leave the "Enter Now" button as you've set it up on the "category" pages. Also for now, let's leave the orange billboard up (and we'll include the "Enter Now" button in the billboards on those pages.)