Design Digital Assets for Webmaker Launch

edrushka commented 9 years ago

Driver: @edrushka Design lead: @jaykappa QA: @cassiemc CC: @secretrobotron @HPaulJohnson

These will be created using the core assets.

P1 Must Haves

[x] ~~Snippet icon~~ <-- being done by Moco
[x] MoFo email callout
[x] Facebook graphic
[x] Twitter graphic
P2 Nice to Haves
[x] Partner digital assets
[x] Teach.org promo
[x] Web banners
[x] Downloadable logos
P3 Only if there's time
[ ] ~~Snapchat graphic~~ <-- no time
[ ] ~~Youtube pre-roll~~ <-- no time
[ ] ~~LAN House digital assets~~ <-- no time

xmatthewx commented 9 years ago

The value, importance, and complexity of these digital assets is higher than the print assets. Seems like we should have @lovegushwa's talent here and across the P1s to make sure that we design a consistent system that works across print and digital.

cassiemc commented 9 years ago

@xmatthewx – Agreed that @lovegushwa should drive the work. I thought it'd be good for him to tackle print stuff first and establish styles/systems that a contractor can use, and he'll be involved in reviewing the contractor's work. It's useful to get the print stuff out first since it needs to go to production, and I actually don't see anything that complex in the P1s. If you disagree we should chat asap.

cassiemc commented 9 years ago

The contractor, Jay of Brand Muller, and contract are in place! Ready to start work on Tuesday. We'll be looking for at least one finalized print asset from @lovegushwa by EOD Monday so we can have a kickoff and get Jay started on Tuesday.

cc @edrushka @thisandagain @secretrobotron @HPaulJohnson @xmatthewx

thisandagain commented 9 years ago

Awesome. Thanks for the update!

jaykappa commented 9 years ago

2015-webmaker-facebook_twitter-eng-v1

2015-webmaker-facebook_twitter-eng-v2

The reason why I've combined everything for this initial presentation is because of how similar the Twitter and Facebook assets are going to be. Plus, the poster is still in WIP...What I've done so far is imaginative extrapolation based on the Google Play Store assets, so I figured we could narrow down which comp styles are preferred. The feedback will help me in developing clear-cut directions for Twitter and Facebook respectively.

At this point, all of the designs are quite flexible and interchangeable, including the various icons I've drawn to represent the concept of "downloading" (the app). At the same time if we need to nix it no problems as well.

You will notice that the larger V2 designs are either direct or very similar interpretations of the smaller V1s. I think it makes more sense that way, because the smallest assets in a set help define what should, can and will fit (content-wise) across the dimension board. The V2 designs do look a little vacant, but I was hesitant on adding random content and breaking out of the assumed branding.

R? @cassiemc @edrushka

edrushka commented 9 years ago

@jaykappa and I reviewed these during our stand today, and I got some further feedback from @HPaulJohnson:

love showing the phone
love the logo with wordmark
prefer showing people on the phone screen over landscapes (I'll attach screenshot we're using on the landing page).
no value proposition (tagline) needed on the small squares, since space is limited
let's go with the chevrons for the download icon
a bit less hand (overall)

Jay, maybe you want to throw the next set up on Redpen so @cassiemc can give specific feedback. Might be confusing to try to do that asynchronously on Github.

edrushka commented 9 years ago

hero 2x

jaykappa commented 9 years ago

@edrushka Thanks for the feedback I'll post a RedPen for the revisions and a link here afterward.

jaykappa commented 9 years ago

@edrushka is it possible to get a crop of this screenshot without the phone and a bit length (vertically) by about 500px ?

edrushka commented 9 years ago

@vasquez @cassiemc could either of you get that for @jaykappa? Or direct me to who I should ping? Thanks!

cassiemc commented 9 years ago

@edrushka – @vazquez (typo above) should be able to get that, or @lovegushwa.

jaykappa commented 9 years ago

Opened a RedPen for the Facebook and Twitter assets: https://redpen.io/jv101e34ce561d05cb

R? @cassiemc @edrushka @lovegushwa

Some general notes:

200 x 200

removed the rejected designs from the screenshots
feedback said that I could ditch the tagline to conserve space, but in some cases, tagline was kept to help balance out the composition (sometimes the wordmark logo and phone create whitespace that is slightly difficult to balance, visually-speaking)
almost all of the Hand designs now have non-Hand alternates
maybe the no-tagline options would be best for Twitter and Facebook but with tagline for MoFO email?

larger versions

revised designs now pair nicely with most of the 200 x 200 options (in some cases, might require a quick colour palette match-up)
also, still have the option of designing new larger ones to match whatever 200x200's are picked

jaykappa commented 9 years ago

Mofo Email Callout Opened a RedPen for the asset: https://redpen.io/qw6b3d43d04df3d468

after revising designs for Twitter and FB assets, the busier compositions with the tagline could work well for MoFo callout
took the options that could work best and re-sized them into the three requested dimensions (200x 200, 500x500, 800x800)

R? @cassiemc @edrushka @lovegushwa

jaykappa commented 9 years ago

Teach.Org Banner

Opened a RedPen for the asset: https://redpen.io/uh0fcccfcd8440a057

It might be too adventurous based on the guidelines but with some strong CSS it can work, but the limitations for what adjustments are possible for banner absolute positioning is of a bit unknown. If the positioning is very strict then the options are more limited to just the word or brand mark (because the brand name is seen in the content).

R? @cassiemc @edrushka @lovegushwa

yofiesetiawan commented 9 years ago

Hi, do we have any color guidelines?

jaykappa commented 9 years ago

Made some alterations based on our convo today @edrushka @cassiemc @lovegushwa

Mofo Email Callout/Facebook/Twitter: https://redpen.io/jmd1fe0a33abe69672 2015-webmaker-mofo-eng-v2

Teach.Org Banner: https://redpen.io/cj5346b0097f53c477 2015-webmaker-teachorg-eng-v2

Pending alterations based on font weights and print work later today of course this would be for layout selection. Also I think the Sketch app folder that went up on Drive didn't have the actual artwork file only Font files.

edrushka commented 9 years ago

Thanks @jaykappa, these are looking really good. @lovegushwa and @cassiemc can you select two and give final feedback so Jay can finish these up?

jaykappa commented 9 years ago

@cassiemc @lovegushwa here are the assets that need selections:

Mofo Email Callout/Facebook/Twitter (2 to be selected): https://redpen.io/jmd1fe0a33abe69672

Teach.Org Banner (1 to be selected): https://redpen.io/cj5346b0097f53c477

cassiemc commented 9 years ago

@jaykappa –

Mofo email callout – needs refinement on the spacing, hierarchy, text weight & color. @lovegushwa should inform you on the fira weight to use for the headline. Left some comments in the redpen, but generally prefer the bottom placement of elements (it's unlabeled but would've been D I guess?)

Teach.org banner – I prefer the patterned options. Would just fix the margins a big, and try one more with the plum shade instead of the brighter purple. #414468 Then we can choose between the blue and the plum.

jaykappa commented 9 years ago

Thanks @cassiemc please see below for the Teach.org banner

2015-webmaker-teachorg-eng-v3

Mofo email callout - I'll stay on standby. for details via @lovegushwa but will work with "D"

cassiemc commented 9 years ago

I think A&B are working well, just not sure about the white text on yellow button. Will check out the UI toolkit for consistency. @lovegushwa can you please design R? these?

jaykappa commented 9 years ago

Thanks @cassiemc when I took a peek at the UI the text was white, but it was Upper and lower case not all uppercase.

jaykappa commented 9 years ago

Thanks for the poster file @lovegushwa the revised Mofo Email callout was applied accordingly plus with the revisions previously if ya can R? @cassiemc

2015-webmaker-mofo-eng-v3

Should note that with making margins the same for logo on top as on it's sides and enlarging the phone the logo doesn't seem to breathe as much, but if smaller and not perfect margins on top (option B) it feels stronger to me.

lovegushwa commented 9 years ago

@cassiemc @jaykappa These are a hot mess but I was thinking about how to simplify the numbe of elements in the composition. I experimented with braking the lockup and more aggressive phone cropping. (maybe mozilla webmaker should be bold and discover. create. share in book weight.) Anyhow maybe breaking away from the lockup will give us a bit more flexibility. Also we could look at an alternative to the button like this: Discover. Create. Share." ... "Download Mozilla Webmaker." I'm off today but will check in on Monday.

screen shot 2015-07-03 at 10 54 35 am

cassiemc commented 9 years ago

@lovegushwa I really like the tighter cropping of the phone! Maybe amend it to include the + button. I'm not a fan of breaking the lockup though. Here's a really quick example of the kind of hierarchy I am after with the headline + image + button (colors, pattern, exact sizes and margins to be tightened up accordingly) cc @jaykappa email-banner

cassiemc commented 9 years ago

Re the teach.org banner, @jaykappa are you going to update it with a new screen? I'm happy with the general layout but I wonder if we can shorten the copy by a line. cc @KevZawacki

jaykappa commented 9 years ago

@cassiemc here's the updated Teach.org with the new screen.

2015-webmaker-teach-eng-v4

KevZawacki commented 9 years ago

@jaykappa @cassiemc

If we're planning to shorten the copy to two lines:

"Webmaker lets you build and share original content on your smartphone. Start creating in minutes."

jaykappa commented 9 years ago

Just an update for the Mofo Callout if lockup can't be broken. @cassiemc @lovegushwa

webmaker-mofo_callout-eng-v7

lovegushwa commented 9 years ago

@jaykappa We need to move ahead with the lockup for now. You can get access to a PDF screens in every language in Webmaker Launch Assets > PROCESS > Webmaker-Screens.pdf

cassiemc commented 9 years ago

I dig C & D, nice work @jaykappa! @lovegushwa will you review them for pixel perfection?

jaykappa commented 9 years ago

Sounds good @lovegushwa and great to hear @cassiemc - I'll wait for any other tidbits of adjustments and we can move forward.

lovegushwa commented 9 years ago

Awesome @jaykappa I think we should go ahead with D. Let's meet up tomorrow morning after or during stand up and sort through the details together.

jaykappa commented 9 years ago

Amazing @lovegushwa ! I'm free all day tomorrow shoot me an email and I'll be ready to go through things.

jaykappa commented 9 years ago

R? @cassiemc @lovegushwa Here is a red pen url to review the assets at this point: https://redpen.io/p/ch9b83172b72ab93bf

cassiemc commented 9 years ago

@jaykappa Left a bunch of comments! Would be great to see an update today if possible.

jaykappa commented 9 years ago

Thanks @cassiemc on it right now. All changes applied except for web banners, but that should be done soon and will be uploaded to Red Pen this afternoon.

HPaulJohnson commented 9 years ago

Adding a new deliverable to create a Webmaker email template for BSD. Tracking in https://github.com/mozilla/webmaker-launch/issues/91

lovegushwa commented 9 years ago

@jaykappa @cassiemc @HPaulJohnson

A few ideas for the mix. I'm really most interested in resolving the horizontal banner. The vertical banners tend to work out because you can left alight elements. An issue with horizontal banners is shifting baselines when trying to align with the logo. Also we often end up with 3 competing visual elements. Using an icon based download button creates a varied mix of widths of elements. I think it's a bit more pleasing spatially.

cassiemc commented 9 years ago

I like the download button and am okay with the light purple text. I don't think it's really necessary but I defer! The download icon is cool and I like the varied widths of the columns... Would just even out the margins on the left and right side of the 'discover, create,share' block as it feels a little too far to the right imo.

jaykappa commented 9 years ago

I'm happy with those alterations as well! greatness @lovegushwa Here's the implementations of the previous comments prior to these on RedPen:

Edit: Updated URL https://redpen.io/p/kd1c6243cb0d99e41c

jaykappa commented 9 years ago

Squares 2015-webmaker-webbanners-square-200x200

Horizontals 2015-webmaker-webbanners-horz-728x90-v1

Verticals 2015-webmaker-webbanners-vert-160x600

The pixelation on the camera I can't fix because it's a Hue/Saturation aleration to the vector. If we revert/adjust the vector to match then that could help.

@cassiemc @lovegushwa @HPaulJohnson

jaykappa commented 9 years ago

@edrushka @lovegushwa For localization I would need translations of the following please:

a) Download The App b) Download (I technically have this, but just in case) c) Webmaker lets you build and share original content on your smartphone. Start creating in minutes. d) Learn More

cassiemc commented 9 years ago

Thanks @jaykappa! @vazquez @lovegushwa Could you guys help with the pixelation in phone on the above images? That's the last bit of visual correction we need to finalize these.

Re. the translations we should really aim to do that Mon/Tues of this week since Friday is @jaykappa's last day on the project, and would be great to get translator's approval before then. cc @HPaulJohnson

KevZawacki commented 9 years ago

Re: translations, I've dropped requests into https://github.com/mozilla/webmaker-launch/issues/79#issuecomment-121001321, https://github.com/mozilla/webmaker-launch/issues/80#issuecomment-121001121 and https://github.com/mozilla/webmaker-launch/issues/47#issuecomment-121000810. Will keep all in this ticketed posted.

lovegushwa commented 9 years ago

@jaykappa are you using the current version of "Webmaker-Screens.pdf" in _PROCESS? I fixed the issue with the button. Also you will find all the localized screens.

jaykappa commented 9 years ago

@lovegushwa I was using the one that went up maybe 5-6 days ago, the white stroke on the blue button needed to be outlined to prevent the pixelation which is fine, but the camera is the new issue. When reduced it pixelated. I'll eye drop the PDF and apply the changes to the camera vector component I have. Hopefully that'll fix everything.

lovegushwa commented 9 years ago

@jaykappa Let me know if you need me to build a different kind of file for you than a PDF.

jaykappa commented 9 years ago

Thanks @lovegushwa I'll do what I can tonight, and will throw it to you for review. it won't be the best solution but it'll work for digital assets

KevZawacki commented 9 years ago

@jaykappa @lovegushwa @edrushka

We have translations for the four outstanding phrases: https://github.com/mozilla/webmaker-launch/issues/79#issuecomment-121001321 https://github.com/mozilla/webmaker-launch/issues/80#issuecomment-121001121 https://github.com/mozilla/webmaker-launch/issues/47#issuecomment-121000810

mozilla / webmaker-launch