Plug Buyer's Guide on the homepage

gideonthomas commented 5 years ago

We'll have a small CTA for the buyer's guide below the theme on the homepage.

cc @mmmavis for awareness

kristinashu commented 5 years ago

~Please make sure to add google analytic event to this so we can track how many click throughs there are!~

mmmavis commented 5 years ago

@kristinashu I don't know much about GA but I'm assuming GA on Foundation site will already be able to tell what external site users came from?

xmatthewx commented 5 years ago

Yes @mmmavis, we can see referral site in Buyer's Guide analytics.

kristinashu commented 5 years ago

Ok so we'll just go off that!

beccaklam commented 5 years ago

@gideonthomas Talked to Sabrina and she suggested adding in some text before to more elegantly slate the buyer's guide ad in. Here is the proposed design along with the proposed copy: Large/Medium screens: https://redpen.io/ec814012c278651a4c Mobile Screens: https://redpen.io/km338698a51706d7ea @mmmavis If the design is approved what assets do you need from me? Logo, background image, anything else? I'm assuming we're building the ad and not just dropping in an image, but if we're doing the latter I can also just provide an image.

gideonthomas commented 5 years ago

Design looks good, I would recommend changing the copy to:

We've even created a guide to help you take control of your data and buy safe, secure gifts this holiday season. Check out the *Privacy Not Included Buyer's Guide [online](link to buyers guide), or come visit us during the festival weekend at Ravensbourne University on Level X to learn more.

Also love @xmatthewx's suggestion of adding the label on the graphic that says "Not your typical advert".

@Saallen what do you think of the redpen linked above and the copy (both in the redpen and what I suggest above)?

Saallen commented 5 years ago

Is this part of the effect - as this is where the links bring me screen shot 2018-10-19 at 12 56 32

gideonthomas commented 5 years ago

ugh, sorry @Saallen, looks like redpen is down. @beccaklam are you able to upload a screenshot for review instead?

beccaklam commented 5 years ago

@Saallen

Large/Medium Screens:

mozfest-ad

Mobile Screens:

mobile-banner-ad

beccaklam commented 5 years ago

Assets for build:

Background images, logo, mock ups, and psd file can be found here: https://drive.google.com/drive/folders/1QT6nV7mn7ETcCZ0O_l5RhUz4TrDKuQuO?usp=sharing

Spacing: Entire ad (for both desktop and mobile has 20px padding all around) Other spacing details (numbers are in pixels):

leaderboard 2x

medium rectangle 2x

"How Creepy Are You": Zilla Slab SemiBold 25 pt with drop shadow (x:0 y:0 blur size: 25px color #333333 blend mode: multiply opacity:100%)

Logo size: width-200px height-37px

"Not your typical advertisement": Nunito Sans Regular 12pt, Spacing is 5px padding top and right

See the Guide CTA button: Rounded rectangle width-114px height-26px, text is Nunito Sans Bold UPPERCASE 12pt letter-spacing of 10 centered in rounded rectangle

CC: @gideonthomas @mmmavis

Saallen commented 5 years ago

The how creepy is your wish list gets lost when you first scan the page- can you make it more prominent?? I did really think it was an ad...

gideonthomas commented 5 years ago

@natalieworth would you be able to change it slightly based on the feedback above? @beccaklam has linked the psd file.

natalieworth commented 5 years ago

Yeah!

On Sun, Oct 21, 2018 at 11:43 AM Gideon Thomas notifications@github.com wrote:

@natalieworth https://github.com/natalieworth would you be able to change it slightly based on the feedback above? @beccaklam https://github.com/beccaklam has linked the psd file.

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/mozilla/mozillafestival.org/issues/1142#issuecomment-431693344, or mute the thread https://github.com/notifications/unsubscribe-auth/AOL_lxMA-adiplfhP30T8FlA_pG2I2ygks5unMBGgaJpZM4XlUyj .

-- Designer, Vancouver natalie@mozillafoundation.org

xmatthewx commented 5 years ago

The intention was to make it appear like an ad so that we could skip a lengthy explanation, and be less disruptive to mozfest content. We could drop this approach, but I don't think we need to do that.

The "not your typical advertisement" could be nudged up above the image.

Saallen commented 5 years ago

Well I seriously thought it was an ad- so Great work ;)

natalieworth commented 5 years ago

medium rectangle 2x leaderboard 2x

cc @Saallen @xmatthewx @gideonthomas I adjust the colours a bit—so more readable at a small size/ on mobile. Let me know if this works for you

gideonthomas commented 5 years ago

this looks good to me, @natalieworth would you be able to provide the details Becca provides above - about fonts, colors, etc.?

natalieworth commented 5 years ago

For sure! So I annotated the fonts/ button colour. Pixel spacing measurements that Becca had are the same. I also removed the "not your typical ad" text from the actual ad

medium rectangle 2x