819433 - [Flicks] Provide Base Layouts & Fonts

Status: RESOLVED FIXED

(Marketing :: Design, task)

Description

[Ben (:bensternthal)]

- base layout for homepage 
- base layout for dedicated page, include reqs for responsive layouts and fonts. 
- lightbox design & behavior

Comment 1

[Lee Tom]

Attachment: Firefox Flicks main page - R1 - 01

Hi all,
I wanted to post a mockup of how our main page is shaping up for R1 (warts and all). There are many holes, inconsistencies and issues we need to work on here. Hopefully seeing what we have so far (based on Holly's UX flow doc, and our current Flicks site) in context, will help us start to knock these out by section. 

I'm posting to this bug so we can approve this as our base layout, and for Craig to get an idea of what can or can't be done. 

I'll also post screenshots of the individual sections to their respective bugs, so we can have more focused discussions on content there.

Comment 2

[John Slater]

I really like this direction, thanks Lee. Feels really clean. My initial suggestion would be to consider how we can add little bursts of color to some of the more monochrome pages (like "What is Firefox Flicks)? Nothing too over the top, but they feel like they need something else to add extra personality. Perhaps the different colors from the Flicks wordmark could be used as a guide here?

Comment 3

[Holly Habstritt Gaal [:Habber]]

Love the addition of script text for "when should I enter?", etc. It's nice to have an additional font option that is more decorative/complementary to our headline and descriptive text. 

Agree with Jon's comment about adding color bursts. The clean, spacious, grey base gives us an opportunity to (sparingly) use some color from the new logo throughout where attention is needed. 



It's hard to get around the crowded nav, but perhaps everything doesn't have to be in a single horizontal line. Tabzilla shouldn't be thought of as navigation at the same hierarchy as the Flicks content. Right now it all seems like the same importance because it is trying to share the same horizontal space. If we let the Flicks content breath a little by starting all Flicks nav elements a "row" below Tabzilla, there will be more clarity and space between all nav and actionable items in the top of the page. Tabzilla will then also not be a distraction from the nav and social buttons. Lee Tom can make the call on this since in practice this might not work as well as it does in my head :) The rest of the page uses space wonderfully. 

*Keep in mind that this top area will also need room in phase 2 for a sign-in button.

Comment 4

[Craig Cook (:craigcook)]

I really like it. Very clean and simple, but with some nice subtle details like the embossed shadow effect on headlines and the faint background texture. I like the idea of carrying through some accent colors, maybe in the headlines or as hover colors for links.

Here are some initial questions/comments from an implementation standpoint:

1) The top navbar is a little crowded, of course, which could present some problems with l10n since the link labels may be longer in some languages. I'd worry about colliding with the social buttons or Tabzilla. 

Maybe we can allow a little more room for the nav by putting it on its own line below the header. Then it can stick to the top of the window independently and the logo and offsite links would stay at the top. We can try some options there and see what works, but I think squeezing everything into one bar will be hard (and +1 on Holly's comment on the visual hierarchy).

2) Are those social buttons just direct links to the Flicks Twitter account, Tumblr blog, and Facebook page respectively? Or are they meant to be "share" type buttons? If they're sharing buttons we should use our social sharing widget, but it doesn't include Tumblr (nor Vimeo, which is only in the footer here). I believe they're just offsite links but I want to confirm.

3) What's the cursive font in the promo headline and the "when should I enter?" etc links? We should make sure it's a) a webfont we can embed and b) that it has a broad enough character set to work with most locales.

4) How do you envision the video showcase interaction? If it's a main stage with a big video, and clicking a thumbnail loads a different video in that stage area, we can likely do that but we'll need to sort out what happens with the thumbnails as the video changes. If whatever is on stage moves into the thumbnail row, replacing the one that was clicked while the new video takes the stage, the ordering would change with each click. Or we may be able to maintain the order and do some kind of shuffling animation as the remaining thumbnails close up the gap. The much simpler solution is if the thumbnails remain static and we just include all six thumbnails, with one initially "on stage". I'd favor the simpler solution, of course.

5) What do you have in mind for the "Other Languages" in the footer? Would it show some dropdown menu, open a modal dialog, lead to another page, etc? Typically we might use a standard form select but that offers very limited styling. We may be able to do a JavaScript menu that gives us more visual options, but we'll have to make it so the language switch happens on a link rather than submitting a form. An ugly form select may be the easier option but we can see if it'll be possible with links in a more stylish menu.

Comment 5

[alainez]

Lee...

Thanks for putting this together and facilitating the discussion. I think we're already on the right path and this is a great backdrop for continue the discussion on how to improve it from last year! Thank you. Please let me know if we can meet to review the comments below. 

I shared this with the Flicks team earlier this morning and will include their feedback, as well as, mine below. The notes are long but better to say more than to say less at this point. 

Script font: can we find another font that works in multiple languages and is more elegant? The ideal would be to use a similar font throughout the site.

Logo and word mark: earlier in the process there was discussion about a new flicks logo being developed but it's not shown here. Is that still in the works and this current logo FPO? The contrast between the logo and word  mark is very jarring and I would ask to make those two elements seem as if they're from the same design family. 

Ideally we would love two see a few more ideas before really committing to the one shown. Some directions I would offer:
- elegant and strong
- bright and heavy
- thoughtful and serious
 
Navbar: I am going to echo Holly's feedback that the nav looks crowded. Anticipating the effect of adding the Sign-In and language variations button should also be considered here. 

We can create more space but just saying "Rules" instead of "Rules and Regulations"

Additionally, I feel like the word mark and nav should be aligned along the bottom - as if they were both resting on the same line.

Site Design
I think we have consider integrating the campaign theme - "Get Mobilized". 

Adding to John and Holly's feedback about splashing the site with visual elements around the main content would really heighten the user's visual experience. This could come from the logo or the Get Mobilized theme itself if we can visualize it.

An example of a film competition that does a good job of painting the rest of the web page "canvas" with their brand ID is Jarritos. It also maps nicely with their main site: 
- Jarritos Film Competition: http://jarritosfilmcompetition.com/
- Jarritos: jarritos.com

GE also runs a film competition on VIMEO that shows a log and word mark lock-up: Focus Forward/Short Films Big Ideas...
- http://www.focusforwardfilms.com/

Additionally, the Focus Forward site does a good job of creating a big, cinematic visual experience on the main page. 

Headline: Looking ahead to after we launch, we will have a follow up message/headline in place about Flicks? I also think we should leave space only for the headline. The sub-head clutters this space too much and probably not necessary since we deliver additional messaging in the carousel screens below the headline. 

My take is we should leave the headline space for the campaign theme "Get Mobilized".


Hero image: 
Adjust message to: Get mobilized and have your film seen by a panel of celebrity judges and a chance to get your next film made...something like this; not this exactly. 

Can the images shown be a panel of clips from 2012 films mixed in with judges panels/mozillians?

Promo boxes: we need to highlight these more than in the current version. Currently they blend in with the background. 

 - Submission: 
 - Brief: change to Creative Brief: Firefox OS
 - Best of: Change to "Scenes from Cannes. The 2012 Winners". Link this to the 2012 winners page. 

What is Firefox Flicks page: can this be a compilation page of the very best scenes from 2012 flicks? Maybe mixed in with some of the great photos from the community events and awards events...

Really like the idea of showing some of the key page links here as shown but of course in new font and maybe with a backdrop treatment to separate from the background?

2012 Films - Our Picks from Cannes
Looking good. As we continue to define the brand ID, I think we might revise this page to show more of that design.

Meet the Judges page: it looks a little barren at the moment. Wondering if we can revise with once we define the brand ID (color splash/get mobilized) or use page-wide imagery like in the GE example http://www.focusforwardfilms.com/

Prizes: would love it if we had some kind of iconography or visual references to have this page be more exciting to the reader. Do we have any images from last year's award winners?

Rules: I like Holly's wire frame visualization of the summary page. Could we follow that format? Not sure how much more we can do here.

Comment 6

[Holly Habstritt Gaal [:Habber]]

Hi Arcadio, Thanks for summarizing the feedback from the Flicks team! I think that asking for 2 additional variations before Wednesday is unrealistic. This timeline is very fast. In a typical design process we would have more time to consider and present multiple approaches both for UX and visual design. We want to create the best site we can for Flicks, but also have to realize the constraints we had when starting the project. 


There is room for updates, but we need to stick to the original ask as much as possible. Regarding the "What is Firefox Flicks" feedback... Just so I understand, would these images be on the dedicated FAQ page or on the Flicks landing page? I'm a bit concerned with trying to change the "What is Firefox Flicks" section on the landing page too much and with a lot of media. It was originally a simple blurb about Flicks with a link to the FAQ. Could you clarify where you would like this change?


Where can we learn more about the campaign theme "Get Mobilized"?

Comment 7

[Matej Novak [:matej]]

> Where can we learn more about the campaign theme "Get Mobilized"?

I have some questions about this as well. The only place I've encountered this copy is in the brief, but I didn't realize it was intended to be such a big part of the site. I think it's a great theme for the videos that we're asking people to submit, but it's confusing as a theme for a campaign about a film contest. There are definitely ways to work it in, but is there any wiggle room on making it the main headline of the site? The purpose of this page is to announce Flicks to people and get them excited about it (plus to provide information, of course), but I worry that leading with "Get Mobilized" isn't putting our best foot forward.

Also, regarding the references to Cannes, at some point someone mentioned that we don't want to talk about Cannes since we won't be going there this year. I agree with that and worry that it might be misleading to this year's contestants. Could we refer to last year's videos as the best of 2012 instead?

Comment 8

[Tara (musingt)]

Hey Arcadio thanks for the feedback.  I spoke with the team and also caught up with John (who had spoken with Kristin/Pete to get clarification on a few things), here are some thoughts in response to your feedback:

>> Site Design: 
What we all discussed and agreed to was a minimalistic/simple site that would lead with "Flicks" and serve as a container for this year's theme - letting the content shine vs. a heavy visual theme (like the red curtains).  What Lee showed here is still pretty rough and focused on laying out the content blocks, with a lot of FPO, vs. final visual design.  He is definitely looking at ways to add more color and personality to the site while keeping with the clean/simple aesthetic we have established.  The site will look great in the end, and it will capture the Firefox brand personality in the appropriate ways.  We'll get there, don't worry.

>> Exploring/presenting several directions:
I think there was a misunderstanding here.  I don't think you were asking for different versions of the entire site design but explorations around the logo/wordmark.  The latter is certainly more reasonable ;)

>> The Flicks Logo:
After speaking with John (who had spoken to Kristin and Pete) - it seems like the feedback is more about the wordmark vs the logo (graphic).  The logo is actually a modified version of the original, simplified to a more flat aesthetic and we won't be changing it beyond that.  If the logo needs to be changed more then we need to discuss and account for that in the timeline and resources.  With respect to the wordmark, we're looking into this more and will be able to share some recommendations later.  The focus for Lee right now is really the website design, not the logo/wordmark - since those elements can be dropped in at a later time.  Lets focus on the site design right now and come back to the logo/wordmark once everything else is fitted into place.  

>> "Get Mobilized": 
I'm not sure what the expectations were with respect to the "Get Mobilized" theme, can you please elaborate on that? My understanding is that "Get Mobilized" is the theme for the challenge this year, and it will be reflected in the creative brief and in related promos... vs. it being a primary element on the landing page or the site as a whole.  As discussed before, the campaign is Flicks (so we will lead with Flicks) and it will serve as a container for this year's theme: Firefox OS / Get Mobilized.  Out of context, "Get Mobilized" will not really make sense to a lot of people.  If there are specific ways you'd like this presented, or specific content you had in mind, please share those asap.  Lets make sure we're aligned on this as it will impact copy direction for Matej as well. 

>> Fonts:
The font that Lee has used are part of our standard font family, he is going to confirm that it is l10n friendly but otherwise I trust his judgement here on the font selection.  We can certainly explore it further if time permits, but I'd say lets make this a lower priority and focus on getting the rest of the site done first.  

>> Copy:
Thanks for the additional feedback regarding copy... I'd say that a lot of these will be addressed once the final copy content is provided and Matej has a chance to write.  So, please be sure Matej has what he needs to do that.


Hope this helps, if you have any specific questions or concerns, please share asap or ping me to discuss off-bug.  
Thanks.

Comment 9

[Holly Habstritt Gaal [:Habber]]

Thanks for clearing that up, Tara. I read that as its own paragraph. Variations of the logomark vs. the site design makes a lot more sense.

Comment 10

[Kristin Baird]

Attachment: Revised Brief Based on discussions today

Hi,

Attached is the revised Flicks creative and copy brief based on the email discussions today. Let me know if you want to spend some time going through this. Happy to do so.

Thanks.

Comment 11

[Kristin Baird]

Attachment: Revised Flicks Brief Attached

Comment 12

[Lee Tom]

Linking various Firefox Flicks design elements here: http://cl.ly/1S10460s3Y0B

Includes: 
- palette
- logo
- font
- graphic elements
- exploratory promo banners (not official)

Comment 13

[Tara (musingt)]

wohoo!  I'm going to go ahead and close this. THanks LEE