MozCoffee Website Design

[yofiesetiawan]

There was an idea to create a website regarding our popular event around the world, the MozCoffee. The idea is to put information about what is mozcoffee and how if you want to run one in your places. And this site can also give some preview of pictures embeded from Flickr.

Anyone have an idea about the moz.coffee domain status right now?

[elijahcruz12]

moz.coffee is currently not available.

[yofiesetiawan]

Thank you @ecwebservices

[ioana-chiorean]

Kensie - Majken Connors had website close to this name. Let me ask her.

[ioana-chiorean]

Here is the thread: https://discourse.mozilla-community.org/t/moz-coffee-domain/1733

[elioqoshi]

@yofiesetiawan would you be up to design the website for this?

[yofiesetiawan]

@elioqoshi i'm thinking of welcoming anyone who wants to pitch their designs?

[elioqoshi]

Okay, @all feel free to pitch with designs!

[seeam]

Hey, I may give it a try but after a few days. But @yofiesetiawan can you give me some brief that what type of content you want to present in the site?

On Feb 12, 2016, at 1:17 AM, Elio Qoshi notifications@github.com wrote:

Okay, @all feel free to pitch with designs!

— Reply to this email directly or view it on GitHub.

[yofiesetiawan]

@seeam the idea is to share short information about MozCoffee activity, and how people can create their own MozCoffee in their country. Then showcasing pictures of MozCoffee activities... This could be 1 page site...

[elioqoshi]

Maybe we can start with wireframes first?

[seeam]

@yofiesetiawan can you give some link/context about how can people arrange their own MozCoffe? Cause I'm not a reps and not aware of the event approving / proposing procedure.

[yofiesetiawan]

@seeam i'm not sure if i make a right definition about mozcoffee. But usually mozcoffee events can be sponsored by Mozilla because you have a mozilla rep helping for budget and swag request. But i think anyone who want to just create a meetup event and talking about mozilla, we can call that as mozcoffee already? How do you think? @elioqoshi

[seeam]

I tried to create a wireframe and ended up with this, usually I don't pitch my wireframe (cause it's difficult for others to understand). Anyway, basically the site will have following segments:

• Tabzilla.
• The MozCoffee logo at the top.
• A hero image, we may chose it from past events. Also an attractive title like Discuss the Mozilla Mission over a cup of Coffe. Then we may put some introductory text.
• Then a timer (see below the tabzilla), counting of the next event. We may get this data from reps portal.
• Then some tabs to elaborate what or why it is. The tab with a icon, a title and some text.
• Then we may show how to arrange, criteria and budget. (I just checked that those are available on the wiki page). I want to arrange this segment like FSA landing page. I really liked their hierarchy of content arrangment.
• Now we can show some photos from past events, blogs and crawl data from twitter with MozCoffe hashtag.
• The basic and commong Mozilla footer.

So what is your thought, @yofiesetiawan and @elioqoshi?

[yofiesetiawan]

Really nice job @seeam i think we can go with that...

[seeam]

I have changed the wireframe a bit, here is a high fidelity wireframe created in Photoshop. What do you think?

[yofiesetiawan]

Hi @seeam it looks great. However, what about we change the blue bg color to coffee image as background, but adding some dark shade on the image?

And maybe separate those 3 icons from the blue background? How do others think? @elioqoshi

Anyway @ioana-chiorean how is the news about the domain?

[seeam]

Adding the 3 icons inside blue background was intentional. If you think about visual hierarchy, the page is divided into 4 sections.

1. Summary: Which is inside blue background and at the top. Invitation for creating someone's own event and what to do in a nutshell.
2. Instructions.
3. Past Experience
4. Footer. That's why I keep those three tabs inside blue background.

And I am little confused about your suggestion for background. Do you thinking about coffee color as background?

[yofiesetiawan]

Well nice explaination.. Can you share the psd file? So i can try to modify the layout? @seeam

[seeam]

Sure, here is the PSD. MozCoffee Landing Page.zip

[yofiesetiawan]

I mean something like this.. @seeam anyway we need someone to help to code...

[seeam]

Oh, but this image looks like we are opening a coffee business! :smile: How about this, which symbolize community and coffee both?

[yofiesetiawan]

i like your idea @seeam but if possible, the background can also be carousel of images?

[seeam]

By the I have forgot to mention that these icons I have used is from http://www.flaticon.com under CC 3.0 license.

[anistuhin]

great things coming up, I see :) I can help coding it as soon you guys are done with selecting the final one @yofiesetiawan

[yofiesetiawan]

@ioana-chiorean do you already get the status of the domain? @elioqoshi have any comments regarding last design draft?

[elioqoshi]

I have, but currently preparing for my last exam so need to comment later. Let's put the proper logo on the header (fully in white) and the 3 icons in the middle to look more like the Mozilla ones on www.mozilla.org

The boxes should have different background colors, instead of white maybe? Looking great so far! @seeam can you share the PSD?

[seeam]

Here it is. MozCoffee Landing Page (2).zip

[yofiesetiawan]

proposing revision.. anyway... who should be the one to decide which design is chosen? @elioqoshi

https://dl.dropboxusercontent.com/u/4450713/mozilla/mozcoffee-seeam-modified-yofie.zip

[seeam]

@yofiesetiawan if you are planning to do this change the shadow color of mug and tabzilla.

[mijanurrahman]

Great thing (y) and Great design @seeam :D Love it

[elioqoshi]

@yofiesetiawan can we make the 3 circles in different colors? Also, you can find the logo here: https://wiki.mozilla.org/ReMo/SOPs/MozCoffee

Furthermore, maybe a very transparent background image behind the brown background?

@yofiesetiawan @seeam please post it on Discourse and/or Reps General after it's finished so we can get people's thoughts to choose the most popular choice.

[elioqoshi]

P.S: I personally prefer Yofie's variant (with the changes I suggested also)

[sukrosono]

may i ask why developer needed here?

[elioqoshi]

Someone needs to code it ;) @yofiesetiawan where are we with this?

[yofiesetiawan]

@elioqoshi i have difficulty to find the status of the domain name... if anyone can help to execute to code the latest psd file from @seeam that would be great..

[elioqoshi]

Which is the domain name, what needs to be done yet? Do we have any employees who can help out here? @LucyeoH

[parag9d]

Is the design final? I like the hero image of Seeam's work, it shows community discussions. But some work needs to be done on the icons and the footer. I would like to help with that and also with the responsive versions for tablet and mobile, if needed.

[yofiesetiawan]

Hi @seeam, can you work together with @parag9d to finish this?

[parag9d]

@elioqoshi @yofiesetiawan I had one doubt, I had been going through the Sandstone page(https://www.mozilla.org/en-US/styleguide/websites/sandstone/grids/) for the styleguide, it says that the width for desktop is 990px (12 columns). This is followed for all the event pages like https://reps.mozilla.org/e/fossasia-2016/ but in the Mozilla homepage, only the top nav including the tabzilla falls under 990px (12 columns), and the rest of the content goes out (maybe 16 columns).

So, in Mozcoffee page, should the tabzilla and the MozCoffee logo stay inside the 990px? In @seeam's psd it doesn't.

[seeam]

@yofiesetiawan I have final exam's ahead may be I can't give much time here. @parag9d I haven't followed sandstone grids, in my opinion it's a bit dated as most people uses bigger screen these days. So I have used bootstrap 1170px grids.

[parag9d]

Worked on the icons, CTA button, spacings, text style to make it consistent with https://www.mozilla.org/en-US/. Also tried to improve the instruction section and reduce the clutter. Earlier it seemed text heavy, tried to reduce that using tabs as done in https://www.mozilla.org/en-US/contribute/stories/. Waiting for your feedback, I will then move to the responsive sites for mobile and tablet...

[elioqoshi]

Love this! @yofiesetiawan what do you think?

[yofiesetiawan]

@elioqoshi @seeam i like this, can someone please help to start to code with this?

[sukrosono]

i wouldn't able to give full time due to some school test, who lead the development?

[yofiesetiawan]

@brutalcrozt its okay you can help during your free time... i will help to lead this project.. please note i'm not good with github :P

[anistuhin]

I can help with coding. @yofiesetiawan So we are all set to go on coding??

[sukrosono]

@yofiesetiawan okay sir, what are our tools?

[yofiesetiawan]

@anistuhin @brutalcrozt actually usually i work with start create a new account with cpanel. but that won't be right for our open source community, right? usually we start development on github? how do you guys do that as developers? i think you guys know better? then after we finished with the development, we can start to move it to proper server to make it online?

[anistuhin]

Yes, we should go with GitHub first. I have done few Mozilla projects that way as well. After we are done with development, we will then transfer it to live server and the repo can still be used for tracking and solving issues and bugs :) I am starting it from tomorrow :) Will post the GitHub repo link here then.

[yofiesetiawan]

Thanks @anistuhin for assigning as developer for this project. @brutalcrozt please help to keep an eye on this...