Proposed front page layouts about opensourcedesign.github.io HOT 30 CLOSED

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/ ?

from opensourcedesign.github.io.

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. 🆒

from opensourcedesign.github.io.

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

from opensourcedesign.github.io.

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!!!

from opensourcedesign.github.io.

@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?

from opensourcedesign.github.io.

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?

from opensourcedesign.github.io.

@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:

from opensourcedesign.github.io.

@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:

from opensourcedesign.github.io.

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

from opensourcedesign.github.io.

Wow, that last wireframe looks really great 😄

from opensourcedesign.github.io.

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

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.

from opensourcedesign.github.io.

@MariekevC good on the mockup :)

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

from opensourcedesign.github.io.

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

@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)

from opensourcedesign.github.io.

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)

from opensourcedesign.github.io.

@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!

from opensourcedesign.github.io.

@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.

from opensourcedesign.github.io.

@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.

from opensourcedesign.github.io.

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.

from opensourcedesign.github.io.

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

from opensourcedesign.github.io.

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

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

from opensourcedesign.github.io.

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:

from opensourcedesign.github.io.

some input (rather sketchy, nowhere near usable):

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".

from opensourcedesign.github.io.

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

On Tue, Jun 9, 2015 at 5:19 PM, jdittrich [email protected] 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)
.

from opensourcedesign.github.io.

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

from opensourcedesign.github.io.

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

from opensourcedesign.github.io.

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

from opensourcedesign.github.io.

@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.

from opensourcedesign.github.io.

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

from opensourcedesign.github.io.

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.

from opensourcedesign.github.io.

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

from opensourcedesign.github.io.