Proposed front page layouts #17

Closed
simonv3 opened this Issue May 27, 2015 · 30 comments

Comments

10 participants
@simonv3
Member

simonv3 commented May 27, 2015

This version is more up front, targeted, and almost a marketing site:
website-sketch

One interesting thing to explore here is to maybe include little facts for each section (300 commits, 299 members, 400 tweets, 13 open jobs, etc)

This version is more functional:
website-sketch-2

@jdittrich

This comment has been minimized.

Show comment
Hide comment
@jdittrich

jdittrich May 27, 2015

Member

assuming that this page would be the first contact for anyone who might be interested I think the 1st ("marketing") is the way to go.

We could as well experiment with combinations of the strength of both layouts – what about the 1st with a footer that holds some current links (like the main section of the 2nd) for those who read that far, like on https://www.libreoffice.org/ ?

Member

jdittrich commented May 27, 2015

assuming that this page would be the first contact for anyone who might be interested I think the 1st ("marketing") is the way to go.

We could as well experiment with combinations of the strength of both layouts – what about the 1st with a footer that holds some current links (like the main section of the 2nd) for those who read that far, like on https://www.libreoffice.org/ ?

@Xaviju

This comment has been minimized.

Show comment
Hide comment
@Xaviju

Xaviju May 28, 2015

Member

Nice!
I would go with the marketing site since I think open source design still needs a presentation and purposes page because a lot of designers still don't understand very well the concept.
I would go too with minimal information and links, short text and visuals and then a functional version on the secondary level links. 🆒

Member

Xaviju commented May 28, 2015

Nice!
I would go with the marketing site since I think open source design still needs a presentation and purposes page because a lot of designers still don't understand very well the concept.
I would go too with minimal information and links, short text and visuals and then a functional version on the secondary level links. 🆒

@simonv3

This comment has been minimized.

Show comment
Hide comment
@simonv3

simonv3 May 28, 2015

Member

I'll tinker! Be back at the end of the day.

Member

simonv3 commented May 28, 2015

I'll tinker! Be back at the end of the day.

@ScintillaLuz

This comment has been minimized.

Show comment
Hide comment
@ScintillaLuz

ScintillaLuz May 28, 2015

hello!!!
Cool :)

My feedback: I like the structure of the second, since I feel it's more organized and the user can just jump from one block to the other without losing anything. The first one doesn't convince me because it gives a "funnel" or a direction (from top to bottom) that I don't see it reflects the content/mission, since if I get it right it's more on informing/getting interested than signup/contact.

The second one also still has the potential to be as bold as the first if the part underneath the line, "Open source design is a group..." would become a full width banner, maybe actually including the text that there's in the first one, that one that says "We provide resources, list jobs, ..." because it's a great text that could satisfy and catch the visitor right away.

But that's just my perspective!!!

hello!!!
Cool :)

My feedback: I like the structure of the second, since I feel it's more organized and the user can just jump from one block to the other without losing anything. The first one doesn't convince me because it gives a "funnel" or a direction (from top to bottom) that I don't see it reflects the content/mission, since if I get it right it's more on informing/getting interested than signup/contact.

The second one also still has the potential to be as bold as the first if the part underneath the line, "Open source design is a group..." would become a full width banner, maybe actually including the text that there's in the first one, that one that says "We provide resources, list jobs, ..." because it's a great text that could satisfy and catch the visitor right away.

But that's just my perspective!!!

@bnvk

This comment has been minimized.

Show comment
Hide comment
@bnvk

bnvk May 28, 2015

Member

@simonv3 nicely done! What about doing BOTH. Have the top of the site (above the fold) contain the big "marketing" style call to actions, each one could link to the more detailed blurb below?

Member

bnvk commented May 28, 2015

@simonv3 nicely done! What about doing BOTH. Have the top of the site (above the fold) contain the big "marketing" style call to actions, each one could link to the more detailed blurb below?

@jancborchardt

This comment has been minimized.

Show comment
Hide comment
@jancborchardt

jancborchardt May 28, 2015

Member

Yeah, agree with the previous comments - we need a combination here. The current site does that quite well already, maybe we just iterate on that?

Member

jancborchardt commented May 28, 2015

Yeah, agree with the previous comments - we need a combination here. The current site does that quite well already, maybe we just iterate on that?

@simonv3

This comment has been minimized.

Show comment
Hide comment
@simonv3

simonv3 May 28, 2015

Member

@jancborchardt The reason for this, in my mind, is that it helps architect the site a bit, and it'll give @ScintillaLuz a framework to work within and apply a more unique visual style, which she's offered to explore (yay!). That way we have a clear direction rather than just iterating towards an unknown goal. We can always continue to tweak and iterate beyond that. Let me know if that works for you.

Update taking features from both:
website-combo

Member

simonv3 commented May 28, 2015

@jancborchardt The reason for this, in my mind, is that it helps architect the site a bit, and it'll give @ScintillaLuz a framework to work within and apply a more unique visual style, which she's offered to explore (yay!). That way we have a clear direction rather than just iterating towards an unknown goal. We can always continue to tweak and iterate beyond that. Let me know if that works for you.

Update taking features from both:
website-combo

@jancborchardt

This comment has been minimized.

Show comment
Hide comment
@jancborchardt

jancborchardt May 28, 2015

Member

@simonv3 the big generic "what is this?" header we can remove. :) Instead we should make the "We are a group ..." a bit bigger. Also - clarify we are not only interested and also work on design.

That's what the current 2 sentences do a pretty good job at and I'm not sure we need to adjust the wording there:
opensourcedesign

Member

jancborchardt commented May 28, 2015

@simonv3 the big generic "what is this?" header we can remove. :) Instead we should make the "We are a group ..." a bit bigger. Also - clarify we are not only interested and also work on design.

That's what the current 2 sentences do a pretty good job at and I'm not sure we need to adjust the wording there:
opensourcedesign

@simonv3

This comment has been minimized.

Show comment
Hide comment
@simonv3

simonv3 May 29, 2015

Member

👍 agreed. I'll mock something up hopefully later today, definitely this weekend.

Member

simonv3 commented May 29, 2015

👍 agreed. I'll mock something up hopefully later today, definitely this weekend.

@Xaviju

This comment has been minimized.

Show comment
Hide comment
@Xaviju

Xaviju May 29, 2015

Member

Wow, that last wireframe looks really great 😄

Member

Xaviju commented May 29, 2015

Wow, that last wireframe looks really great 😄

@MariekevC

This comment has been minimized.

Show comment
Hide comment
@MariekevC

MariekevC May 29, 2015

Great to see this developing :-)
This discussion made me do this:

osdesign_fronttop

My thoughts for the top frontpage: when you want to invite for collaboration, be as bold and clear about it as possible.

And watching the open source icon change into a large dot, started this:

suggested logo's removed by me, to keep this clean

The trigger was to combine the open source icon with the design part.
OSDesign represents the Design part (...) of the Open Source universe, use the image that's already known and add to it, as in add design to open source.

Great to see this developing :-)
This discussion made me do this:

osdesign_fronttop

My thoughts for the top frontpage: when you want to invite for collaboration, be as bold and clear about it as possible.

And watching the open source icon change into a large dot, started this:

suggested logo's removed by me, to keep this clean

The trigger was to combine the open source icon with the design part.
OSDesign represents the Design part (...) of the Open Source universe, use the image that's already known and add to it, as in add design to open source.

@jancborchardt

This comment has been minimized.

Show comment
Hide comment
@jancborchardt

jancborchardt May 29, 2015

Member

@MariekevC good on the mockup :)

As for the logo - I guess we should try to keep it logo-ish, without any text needed, no?

Member

jancborchardt commented May 29, 2015

@MariekevC good on the mockup :)

As for the logo - I guess we should try to keep it logo-ish, without any text needed, no?

@simonv3

This comment has been minimized.

Show comment
Hide comment
@simonv3

simonv3 May 30, 2015

Member

So here's the concept based on what you suggested @jancborchardt:

website-sketch-3

@MariekevC I like what you're getting at! Thanks for putting forward some ideas :).

It took me a moment to realize that it said "You" in one of the titles. I wonder if the logo's location is detracting from the text around it - I'm more drawn to shape of the layout then the actual content. Could you play around with spacing maybe? And in this sense, maybe it makes sense to have a more direct call to action underneath each section (both the You and the Open Source Design)? Even if it only links to another part of the page. Let me know your thoughts on those things!

Side note: I just used the large dot as a placeholder for the logo. I want to give the people doing a visual version of this some leeway, not to feel stuck with with Open Source O (cc @ScintillaLuz)

Member

simonv3 commented May 30, 2015

So here's the concept based on what you suggested @jancborchardt:

website-sketch-3

@MariekevC I like what you're getting at! Thanks for putting forward some ideas :).

It took me a moment to realize that it said "You" in one of the titles. I wonder if the logo's location is detracting from the text around it - I'm more drawn to shape of the layout then the actual content. Could you play around with spacing maybe? And in this sense, maybe it makes sense to have a more direct call to action underneath each section (both the You and the Open Source Design)? Even if it only links to another part of the page. Let me know your thoughts on those things!

Side note: I just used the large dot as a placeholder for the logo. I want to give the people doing a visual version of this some leeway, not to feel stuck with with Open Source O (cc @ScintillaLuz)

@jdittrich

This comment has been minimized.

Show comment
Hide comment
@jdittrich

jdittrich Jun 3, 2015

Member

Maybe the 1 column, 3 column, 1column, 2 column (from the top) Structure is visually a bit restless. What about having three col. at the bottom: Activity , Interests and Get in Touch (or any other change that provides a more consistent grid)

Member

jdittrich commented Jun 3, 2015

Maybe the 1 column, 3 column, 1column, 2 column (from the top) Structure is visually a bit restless. What about having three col. at the bottom: Activity , Interests and Get in Touch (or any other change that provides a more consistent grid)

@bnvk

This comment has been minimized.

Show comment
Hide comment
@bnvk

bnvk Jun 4, 2015

Member

@simonv3 that's looking great man. My only thoughts are to make the two paragraphs "We are a community..." and "We provide resources..." side by side instead of on top of each other, I think this will help the "restless" bit that @jdittrich mentions!

Member

bnvk commented Jun 4, 2015

@simonv3 that's looking great man. My only thoughts are to make the two paragraphs "We are a community..." and "We provide resources..." side by side instead of on top of each other, I think this will help the "restless" bit that @jdittrich mentions!

@MariekevC

This comment has been minimized.

Show comment
Hide comment
@MariekevC

MariekevC Jun 6, 2015

@simonv3
I can play around with the spacing a bit, as you suggested. Maybe also look at possibilities that @jdittrich and @bnvk suggested?

The logo is in the middle as a focal point. From here the reader can choose what is of interest at that moment (instead of scrolling - menu, logo, content, contact).
A starting point which connects things - visually, information, invite, sharing, collaboration, etc. -.
But it can use a bit more space and maybe softening the tone to a grey makes it less distracting, but keep it as focal point?

We can add two call to action buttons to a relevant info on the same page.
But, is that necessary? What action(s) would you add?

@ScintillaLuz @jancborchardt @simonv3, I didn't notice that the logo was already 'taken care of'. I'm sure @ScintillaLuz will do a great job :).
I'll try to remove my suggestions, to keep this clean.

@simonv3
I can play around with the spacing a bit, as you suggested. Maybe also look at possibilities that @jdittrich and @bnvk suggested?

The logo is in the middle as a focal point. From here the reader can choose what is of interest at that moment (instead of scrolling - menu, logo, content, contact).
A starting point which connects things - visually, information, invite, sharing, collaboration, etc. -.
But it can use a bit more space and maybe softening the tone to a grey makes it less distracting, but keep it as focal point?

We can add two call to action buttons to a relevant info on the same page.
But, is that necessary? What action(s) would you add?

@ScintillaLuz @jancborchardt @simonv3, I didn't notice that the logo was already 'taken care of'. I'm sure @ScintillaLuz will do a great job :).
I'll try to remove my suggestions, to keep this clean.

@simonv3

This comment has been minimized.

Show comment
Hide comment
@simonv3

simonv3 Jun 7, 2015

Member

@MariekevC It's not taken care of! I was just saying that the reason that I put it in as just a circle was to show that we don't need to be stuck on the Open Source O logo we currently have. I'm open to ideas.

*Edit: * Maybe there needs to be some sort of clearer metaphor then just spacing then? A light venn diagram?

I'm going to play around with the spacing in the concept I was fiddling on, following @jdittrich and @bnvk 's ideas.

Member

simonv3 commented Jun 7, 2015

@MariekevC It's not taken care of! I was just saying that the reason that I put it in as just a circle was to show that we don't need to be stuck on the Open Source O logo we currently have. I'm open to ideas.

*Edit: * Maybe there needs to be some sort of clearer metaphor then just spacing then? A light venn diagram?

I'm going to play around with the spacing in the concept I was fiddling on, following @jdittrich and @bnvk 's ideas.

@elioqoshi

This comment has been minimized.

Show comment
Hide comment
@elioqoshi

elioqoshi Jun 8, 2015

Member

Love the proposals shown here, I agree the first 'Marketing-ish' one might suit more, but as @bnvk said, we could mix it a bit more with the more functional version.

Member

elioqoshi commented Jun 8, 2015

Love the proposals shown here, I agree the first 'Marketing-ish' one might suit more, but as @bnvk said, we could mix it a bit more with the more functional version.

@MariekevC

This comment has been minimized.

Show comment
Hide comment
@MariekevC

MariekevC Jun 8, 2015

@simonv3 👍
I like the idea of a venn diagram (maybe also nice input for a logo?)

@simonv3 👍
I like the idea of a venn diagram (maybe also nice input for a logo?)

@MariekevC

This comment has been minimized.

Show comment
Hide comment
@MariekevC

MariekevC Jun 9, 2015

Some input for the OSD logo, based on the venn idea

osd_logo_venn

Left: the design part (a brush as example),
Right: the code part ( {} as example),
Middle: the open source icon.

Some input for the OSD logo, based on the venn idea

osd_logo_venn

Left: the design part (a brush as example),
Right: the code part ( {} as example),
Middle: the open source icon.

@jancborchardt

This comment has been minimized.

Show comment
Hide comment
@jancborchardt

jancborchardt Jun 9, 2015

Member

Nice @simonv3! cc @bnvk – instead of putting the two paragraphs "We are a community..." and "We provide resources..." side by side I would make the first one bigger & more present. Also both should be a bit wider so it’s more readable.

As for the logo I think we should keep it very very simple. Similar to what Open Source Hardware did:

Member

jancborchardt commented Jun 9, 2015

Nice @simonv3! cc @bnvk – instead of putting the two paragraphs "We are a community..." and "We provide resources..." side by side I would make the first one bigger & more present. Also both should be a bit wider so it’s more readable.

As for the logo I think we should keep it very very simple. Similar to what Open Source Hardware did:

@jdittrich

This comment has been minimized.

Show comment
Hide comment
@jdittrich

jdittrich Jun 9, 2015

Member

some input (rather sketchy, nowhere near usable):
osdlogos2
The idea behind the left one is probably obvious (we could make the circle dark so the negative/positive is a coherent thing), for the right one I played around with the idea of a logo showing "in the making".

Member

jdittrich commented Jun 9, 2015

some input (rather sketchy, nowhere near usable):
osdlogos2
The idea behind the left one is probably obvious (we could make the circle dark so the negative/positive is a coherent thing), for the right one I played around with the idea of a logo showing "in the making".

@simonv3

This comment has been minimized.

Show comment
Hide comment
@simonv3

simonv3 Jun 9, 2015

Member

Could we move the logo convo to another thread? ;)

On Tue, Jun 9, 2015 at 5:19 PM, jdittrich notifications@github.com wrote:

some input (rather sketchy, nowhere near usable):
[image: osdlogos2]
https://cloud.githubusercontent.com/assets/3416487/8061486/5504bf3a-0ecb-11e5-9f07-9903dd2b2d8b.png
The idea behind the left one is probably obvious (we could make the circle
dark so the negative/positive is a coherent thing), for the right one I
played around with the idea of a logo showing "in the making".


Reply to this email directly or view it on GitHub
#17 (comment)
.

Member

simonv3 commented Jun 9, 2015

Could we move the logo convo to another thread? ;)

On Tue, Jun 9, 2015 at 5:19 PM, jdittrich notifications@github.com wrote:

some input (rather sketchy, nowhere near usable):
[image: osdlogos2]
https://cloud.githubusercontent.com/assets/3416487/8061486/5504bf3a-0ecb-11e5-9f07-9903dd2b2d8b.png
The idea behind the left one is probably obvious (we could make the circle
dark so the negative/positive is a coherent thing), for the right one I
played around with the idea of a logo showing "in the making".


Reply to this email directly or view it on GitHub
#17 (comment)
.

@plastelina

This comment has been minimized.

Show comment
Hide comment
@plastelina

plastelina Jun 9, 2015

Member

That would be handy @simonv3 :). Do we have to use the open source logo as an starting point? Small input for the logo ( I really like what @MariekevC but I think it's to big with too much information) - still working on the idea how to incorporate it into open source logo
coding_design_icon

Member

plastelina commented Jun 9, 2015

That would be handy @simonv3 :). Do we have to use the open source logo as an starting point? Small input for the logo ( I really like what @MariekevC but I think it's to big with too much information) - still working on the idea how to incorporate it into open source logo
coding_design_icon

@plastelina

This comment has been minimized.

Show comment
Hide comment
@plastelina

plastelina Jun 9, 2015

Member

I just found this - not sure who had design it but it's genius http://opensourcedesign.net/images/design-open-logo-512.png

Member

plastelina commented Jun 9, 2015

I just found this - not sure who had design it but it's genius http://opensourcedesign.net/images/design-open-logo-512.png

@simonv3 simonv3 referenced this issue Jun 9, 2015

Closed

Logos #18

@simonv3

This comment has been minimized.

Show comment
Hide comment
@simonv3

simonv3 Jun 9, 2015

Member

Hey @plastelina, @MariekevC, @jdittrich, could you continue the conversation about logos in #18?

Member

simonv3 commented Jun 9, 2015

Hey @plastelina, @MariekevC, @jdittrich, could you continue the conversation about logos in #18?

@jancborchardt

This comment has been minimized.

Show comment
Hide comment
@jancborchardt

jancborchardt Jun 9, 2015

Member

@plastelina that’s the logo of http://opendesign.foundation – we wanted to use that but that wasn’t very fruitful, see opensourcedesign/jobs#26 so we need a separate one.

Member

jancborchardt commented Jun 9, 2015

@plastelina that’s the logo of http://opendesign.foundation – we wanted to use that but that wasn’t very fruitful, see opensourcedesign/jobs#26 so we need a separate one.

@razetime

This comment has been minimized.

Show comment
Hide comment
@razetime

razetime Nov 22, 2015

Contributor

So, is the front page layout set, or not?

Contributor

razetime commented Nov 22, 2015

So, is the front page layout set, or not?

@bnvk

This comment has been minimized.

Show comment
Hide comment
@bnvk

bnvk Nov 22, 2015

Member

I think moving to the layout @simonv3 showed in his above comment would be a significant improvement over the current site

To that end, since none of us are working on this full time (in order to make maximum progress with minimum effort). Perhaps we should consider customizing / modifying something from Jekyll Themes. Personally, I think Grayscale is quite nice and could be best tweaked towards our goals.

Member

bnvk commented Nov 22, 2015

I think moving to the layout @simonv3 showed in his above comment would be a significant improvement over the current site

To that end, since none of us are working on this full time (in order to make maximum progress with minimum effort). Perhaps we should consider customizing / modifying something from Jekyll Themes. Personally, I think Grayscale is quite nice and could be best tweaked towards our goals.

@simonv3

This comment has been minimized.

Show comment
Hide comment
@simonv3

simonv3 Nov 24, 2015

Member

I can do a PR for this for the front page, but changing all the styles and headers for all the other pages is going to be a bit of a pain.

Edit: I'll push to a branch, and whoever is interested in working on it and helping me clean it up can do so.

Edit 2: feel free to work on this! Just remember to pull and push before working just in case something changes :). https://github.com/opensourcedesign/opensourcedesign.github.io/tree/site-redesign

Member

simonv3 commented Nov 24, 2015

I can do a PR for this for the front page, but changing all the styles and headers for all the other pages is going to be a bit of a pain.

Edit: I'll push to a branch, and whoever is interested in working on it and helping me clean it up can do so.

Edit 2: feel free to work on this! Just remember to pull and push before working just in case something changes :). https://github.com/opensourcedesign/opensourcedesign.github.io/tree/site-redesign

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment