Mockups for site

[addyosmani]

Just putting the issue together so we can track this work :)

[addyosmani]

@zenorocha just checking: have you had a chance to start on this? :)

[zenorocha]

Still working on it, but we can discuss some topics for now.

First of all, I'm not a designer, just a developer trying to help, so sorry if this isn't the way your thinking about this project.

1. Web Components Logo (as discussed on #7)
2. Menu
   • Articles - List of links to community articles
   • Examples - List of links to Web Components Registries (as discussed on #5)
     • Bower components filtered by web components tag
     • Customelements.io
   • Presentations - List of links to community presentations
   • Polyfills - List of links to polyfills
     • Polymer
     • X-tags
   • Specs - List of links to specs
   • Status - List of links to Web Components implementation status
3. Google Custom Search
4. Title
5. Slogan to explain what Web Components is
6. Links to explain what Web Components is made of
7. Cards to show latest updates on each section
8. Credits (as seen on HTML5 Rocks)

---

About the website design, I'm thinking about some kind of card design, something like Google Plus and Google Now are doing.

Card Design References:

• http://insideintercom.io/why-cards-are-the-future-of-the-web/
• http://www.fastcodesign.com/1672605/how-google-unified-its-products-with-a-simple-index-card

---

This is a minimal idea for the first version, I'm sure there are lots of things that we can work on to improve it.

So, what do you think?

[addyosmani]

Really nice work on the first draft, @zenorocha :) I think the design/layout of the site will evolve based on the content we decide to include but it's super-useful for us to iterate early on. Going through your points:

1. Great!
2. I think this should work. We might want to keep our options open for navigation positioning (top full-width, sidebar, other) depending on how we position content. See 6 for more about this.
3. Works for me.
4. LGTM.
5. LGTM
6. I think the first take on site structure is great. Could we take a pass at looking at the proposed TOC of content from the strawman Google doc to see if we can better position the V0 features? We'll want to position 'best practices' for component authors quite strongly and clearly position links to the articles/community content, mailing list (will be Polymer for now, but we'll spin off at a later point when it makes sense) and leave space for things like component search (link to Bower).
7. So the idea here is that each card displays the latest update from each relevant section? Does the card mention the title overlayed or above the preview? Would the preview be clipped text, something similar to the summary/preview in an RSS feed?
8. I think the positioning here is perfect. The credits should probably be 'The WebComponents.org contributors' or something similar as this will be a vendor-neutral project :)

[ebidel]

Should we keep out articles, presentations, and videos and just have a "resources" section for v1? On Nov 4, 2013 12:16 AM, "Addy Osmani" notifications@github.com wrote:

Really nice work on the first draft, @zenorochahttps://github.com/zenorocha:) I think the design/layout of the site will evolve based on the content we decide to include but it's super-useful for us to iterate early on. Going through your points:

1. Great!
2. I think this should work. We might want to keep our options open for navigation positioning (top full-width, sidebar, other) depending on how we position content. See 6 for more about this.
3. Works for me.
4. LGTM.
5. LGTM
6. I think the first take on site structure is great. Could we take a pass at looking at the proposed TOC of content from the strawman Google dochttps://docs.google.com/a/google.com/document/d/1ujRzqMleLdIYZNFYpiVbBNlBzXrwLmkyhKsh2_D_990/editto see if we can better position the V0 features? We'll want to position 'best practices' for component authors quite strongly and clearly position links to the articles/community content, mailing list (will be Polymer for now, but we'll spin off at a later point when it makes sense) and leave space for things like component search (link to Bower).
7. So the idea here is that each card displays the latest update from each relevant section? Does the card mention the title overlayed or above the preview? Would the preview be clipped text, something similar to the summary/preview in an RSS feed?
8. I think the positioning here is perfect. The credits should probably be 'The WebComponents.org contributors' or something similar as this will be a vendor-neutral project :)

— Reply to this email directly or view it on GitHubhttps://github.com/WebComponentsOrg/webcomponents.org/issues/8#issuecomment-27668913 .

[0x-r4bbit]

@zenorocha @addyosmani I also like the mockup very much! I'm not a designer and also not a concepter but I like the idea more then the current yeoman site fork. Also, HUGE +1 for using cards :). This would work on mobile devices great too!

[addyosmani]

@ebidel Solid suggestion. I ended up doing this yesterday for the content on the pre-alpha site - "Community Resources". Does anyone have other opinions on this?

[0x-r4bbit]

I think that pretty much okay. Just as a side note, I would add a kinda indicator to each link that points to an external resource. One is a bit confused that almost every link on the site links to other sites rather than some internal content. Just a thought, I'm probably wrong.

[brizabueno]

I'll try it out ;) I guess we can improve it.

[addyosmani]

@brizabueno can definitely be improved :)

@PascalPrecht we could experiment with an icon to the right of each external link. Would you like to suggest a graphic we can try out for it?

[0x-r4bbit]

@addyosmani That's exactly what I thought! So to solve this, I think we should rely on one of those fancy icon services like fonticon and awesomeFont. I dunno which one is better because I didn't spend much time with them yet. However, I'm sure they provide what we need.

[brizabueno]

I just start working on it today, so tell me what do you think so far! For the logo, I thought of something simple that can go far... And about the subtitle? Too pretentious? Not sure yet of how do we show the Specs at that page. Do you have any idea?

[addyosmani]

I think we can iterate on the titles/subtitles and logo but the general look and feel looks fantastic. How do we feel about the color scheme others on the thread?

Nice work @brixabueno :)

Some thoughts:

I wonder if the homepage should attempt to summarize the WC platform features and give people a quick overview of why the site exists. These could be things we place in cards but just thinking this may be useful. We'll also want to highlight the best practics somehow.

Have to say I do like the idea of featuring resources and examples the way they're currently shown :)

[addyosmani]

Also tracking 'status' for are we there yet could be interesting!

[0x-r4bbit]

hey @brizabueno !

Thanks for you work! :) So here is what I think (again, I'm not a designer so things I'm saying are probably shit):

1. Logo The idea is actually pretty cool if one is smart enough to interpret it that way. For me, a logo like this reminds on a mail app. Maybe we can kinda tweak the logo from @ebidel 's slides.
2. Subtitle How about "Everything is an element" ? :)
3. Colorscheme IMO its a bit too blue. Also, how about using less shadows and gradients :) ? Isn't 'flat' the current trendy thing?
4. Cards I :heart: cards! However, I would not making them scrollable, rather truncate the content and stick with "see all"
5. Are we componentized yet? I'd be cool to also show something like this: http://jonrimmer.github.io/are-we-componentized-yet/

Great work so far @brizabueno ! :) I'm so happy that there are people out there who really can design :D

[ebidel]

This is looking really sharp!

A few thoughts:

• I like the design, but the heavy panel focus makes the homepage look like a dashboard.
• The logo concept is neat, but it and the tagline are non-intuitive and marketing-y. If we don't go with the current logo (well known), what about some sort of building block logo?
• "Everything is an element" is Polymer's mantra. It's a good one but, but I'm not sure we want to reuse it here. Maybe Alex K/Daniel B has thoughts?
• I agree with Addy that the first thing people see should be a blurb about the conceptual benefit of web components (what they are, why these specs are great, what problems they're solving), as well as a small description of each and implementation status. I should be able to come to this homepage and get a lay of the land...without any clicks.
• Instead of articles in the top nav, let's have a top-level item for "Best practices". The site probably won't have develop facing articles for v1.
• "Supports" -> "Community members"
• The components registry needs to be front and center on the homepage and nav.
• The blue bar for the 4 specs is interesting, but I'm not sure it's needed. You have a specs panel on this mock and a link on the homepage. Thoughts?

On Sun, Nov 10, 2013 at 4:52 AM, Pascal Precht notifications@github.comwrote:

hey @brizabueno https://github.com/brizabueno !

Thanks for you work! :) So here is what I think (again, I'm not a designer so things I'm saying are probably shit):

1.

Logo The idea is actually pretty cool if one is smart enough to interpret it that way. For me, a logo like this reminds on a mail app. Maybe we can kinda tweak the logo from @ebidel https://github.com/ebidel 's slides. 2.

Subtitle How about "Everything is an element" ? :) 3.

Colorscheme IMO its a bit too blue. Also, how about using less shadows and gradients :) ? Isn't 'flat' the current trendy thing? 4.

Cards I [image: :heart:] cards! However, I would not making them scrollable, rather truncate the content and stick with "see all" 5.

Are we componentized yet? I'd be cool to also show something like this: http://jonrimmer.github.io/are-we-componentized-yet/

Great work so far @brizabueno https://github.com/brizabueno ! :) I'm so happy that there are people out there who really can design :D

— Reply to this email directly or view it on GitHubhttps://github.com/WebComponentsOrg/webcomponents.org/issues/8#issuecomment-28149992 .

[addyosmani]

Some more thoughts now that I'm back to desktop:

• For the first version of the site, do we feel like the current tagline "a place to discuss web components and move them forward" isn't as effective as "everything as an element"? I'm thinking out loud as ideally we want folks to understand what the site is all about from the wording.
• I agree with Eric that a building block concept might work if we don't want to go for the existing Web Components logo. Is there a reason we don't like the current one? (e.g doesn't work well against blue). Just trying to understand :)
• +1 regarding the component registry being front and center.
• Cards: +1 on not using scrollbars for content if possible. I assume "see all" would take you to a dedicated page for the items previewed in the panel. e.g "Community Resources" > See all > Show community resources page.

Including well known WC logo below in case its needed.

[addyosmani]

cc @angelinatron for her feedback too.

[zenorocha]

Hey guys,

Thanks a lot for the comments, I just talked to @brizabueno (which is my sister btw :P) and we're going to iterate on it together. But first, just a few things:

1. Logo/Color Scheme We'll switch to this logo and probably change the color scheme to fit it.
2. Cards Not scrollable.
3. Specs We still need to figure out what to do. For me, the spec bar only need to exist if we author content about it. If not, we can just use a card and remove that bar. What do you think?
4. Examples Should we link to customelements.io and bower or should we create demos for the website and display them like this first design?
5. Subtitle I don't think slogans like "Everything is an element" will work, we need a big and descriptive one, otherwise people who never heard about Web Components will not understand what this website is about.
6. Supports/Community members What's the criteria for people to get into this list? Should they need to contribute to webcomponents.org?

[zenorocha]

And more:

1. Presentations/Articles/Community Resources Should we create a "Community Resources" card and display the latest content? Or should we create two different cards, one for Articles and another for Presentations?
2. Status Are we going to update the status from the spec? Or should we just link to Chrome Status and Are We Componentized yet?

[addyosmani]

Re: the above two points

1. Do we have a good feel for how these two might differ in preview on the homepage? If we intend on both being text links, I would say grouping into 'Community Resources' makes sense. If we want to show previews from presentations, like a thumbnail that might require re-consideration of splitting these out.
2. I think initially we can just link to Chrome Status and A.W.C.Y (unless we can find a super-clean way to embed/or display this information on the site).

[addyosmani]

1. I think we should link to the bower WC search. I'd personally love to have some samples/code that we can refer developers to when they're trying to learn about WCs but we may need to hold off on these until we have a set we agree upon. I think @angelinatron had some she might suggest as did @robdodson.
2. I would probably limit it to the top 6 or so initially (a little like we did for movethewebforward, below) and then just link to the contributors list for the rest. If we find we have a large number of active contributors later on we can always break them out into a dedicated page.

[addyosmani]

1. I'd still want us to link to the specs somewhere very visible on the homepage. We can switch these out to tutorial/our own content links when we do have dedicated content about the different specs.

[ebidel]

What about vendors as part of the contributors? Grass roots is good, but it would be nice to noobs there is heavy support from the browser community as well.

On Mon, Nov 18, 2013 at 9:16 AM, Addy Osmani notifications@github.comwrote:

1. I'd still want us to link to the specs somewhere very visible on the homepage. We can switch these out to tutorial/our own content links when we do have dedicated content about the different specs.

— Reply to this email directly or view it on GitHubhttps://github.com/WebComponentsOrg/webcomponents.org/issues/8#issuecomment-28717759 .

[addyosmani]

Big +1. I think vendors supporting the effort should be prominently shown on the site.

Side: I really wish we had some insight into how much/any interest there is from IE in exploring WCs. @ebidel do you know if they're considering implementing at all?

[ebidel]

I've heard things, but we won't be able to say anything. I think we'll see them participate when the time is right. If/when they start in on the wc implementations, we can reach out to them.

On Mon, Nov 18, 2013 at 10:49 AM, Addy Osmani notifications@github.comwrote:

Big +1. I think vendors supporting the effort should be prominently shown on the site.

Side: I really wish we had some insight into how much/any interest there is from IE in exploring WCs. @ebidel https://github.com/ebidel do you know if they're considering implementing at all?

— Reply to this email directly or view it on GitHubhttps://github.com/WebComponentsOrg/webcomponents.org/issues/8#issuecomment-28725923 .

[zenorocha]

+1 for limiting to like 6 contributors, at least in the beginning;

+1 for listing browser community support;

[zenorocha]

Btw, is this the right team list? Should we add/remove someone?

Although you haven't seen @eduardolundgren in the issue discussions here, he's been quite active on http://customelements.io and web components development since the beginning. He's also helping me in the 1.0.0-alpha branch development, so I think it might be a good addition to the team.

[addyosmani]

That initial list looks good to me. I know Angelina and a few others are also interested in helping with the effort so we can list more people as the site gains contributors.

With respect to Eduardo: I wouldn't mind us listing him but it would be fantastic if you could encourage him to help us with wc.org if he has time :) Getting our own search page/section setup is definitely something he might be able to help with given his experience there.

[zenorocha]

Totally agreed @addyosmani.

Closing... since the mockup is already done and development has initiate on #20