Redesign Landing Page about summer-of-code HOT 70 CLOSED

I pushed a draft, you can see it here http://railsgirlssummerofcode.org/landing/
A few things content-wise:

• what links do we want in the header navigation(s), footer, etc
• what additonal information do we want after the tiles and before the footer right now?
• wording of all the things
• images, lots of images

Design-wise:

• please comment on all spacing, font-size, animation, ratios issues. Be as picky and specific as you can be. Or make a screenshot and draw on it or something.

Other:

• do we only want photos in the tiles or also re-use some of the scribbles? Call for projects could work with the megaphone in white
• ???

And then next steps: blog, all other pages, cleanup stuff.
ping: @svenfuchs @anikalindtner @alicetragedy @sareg0 @katrin-k @carpodaster

from summer-of-code.

it looks great!

I've only just taken a quick look, but here's my feedback so far:

• the image in the tile-students div has an extra bit of padding on the right side (20px) which makes your perfectly well-constructed tile grid look uneven.
• I really really like the new choice of typeface, it also distinguishes us from the Rails Girls website a little. 👍
• I feel like the tile-hover sub-headers could be smaller (in size they look almost as big as the actual tile headings) or the tile headings could be a big bigger. Right now the heading is 50px and the subheading 30px, but Amatic SC has such a strange "size" that I think we can easily bump it up to 70px or so (I'm just looking at the page source, so I don't know how you've set the font sizes/if they're relative values).
• And if the tile heading is changed to 70px, I guess the "Rails Girls Summer of Code" header should also have its size bumped up by a bit.
• From the User Experience, I think the "blog" and "submit a project" links at the top need some sort of a hover style (even if it's just an underline like in the footer)

from summer-of-code.

thx for the feedback, will update this afternoon/ evening.

from summer-of-code.

@alicetragedy it's online. Bigger font looks definitely better

from summer-of-code.

@lislis thank you 😍 and yes, it does look better when it's bigger - especially the GIVE US MONEYYYY part ;)

from summer-of-code.

I like the concrete call to action (Give us Money! Coach a Team! Become a Student!). Shall we make it 'Submit your Project' instead of 'Call for Projects', too?

Also the coach a team and give us money text isn't capitalized in the same way the other two boxes are.

Other than that: 👍 👍 😄

from summer-of-code.

AWESOMESAUCE <3

yes, for what carsten said. also: I'd say: "Donate now!" or sth like that instead of "give us money".

from summer-of-code.

The copy is by no means fixed! Suggest all the things!

from summer-of-code.

hehehe... The 'give us money!' text is definitely just a place holder... although...

'Give us Money' is the section for sponsors.
As per the design above we will probably have a section with a big CTA once the crowd funding campaign opens. Before then, our intention was to get people to sign up for the newsletter, and be informed that way (or follow us on Twitter)

I am really liking that this really looks like a landing page; no extra stuff.
Just in case no one saw it yet, have you messed about the with 'burger button' at the top right?
That's where all of the extra menu items are hidden.

I had some thoughts on copy. If there is a '1' and '2', it means one or the other not both.

• Open Source Project section
  Title: 'Submit your project'
  On hover: Learn more about proposing your open source project or become a mentor for one.
• Student section
  Title: 'Apply for 2015'
  On hover: take a look at our applicant guide for everything you need to know
  Note: do we want to call them students? I think it's nice, but since we are not actually an educational program perhaps best to portray that?
• Coach section
  Title: perfect
  On hover: take a look at our guide for coaches
  On hover2: User your coding powers for good. Find out how >
• Sponsors section
  Title: Become a sponsor
  On hover1: Make Rails Girls Summer of Code 2015 happen
  On hover2: take a look at our packages and perks

The Submit your project sections is a little hard, but I was imaging say a picture like this one
https://f.cloud.github.com/assets/1711357/1511866/0cffea00-4abb-11e3-9044-cc5d429cb90b.jpg
but with just the stickers/tees/icons of some open source projects we had the last few years.

Just an idea.
What do you think of the above copy?

from summer-of-code.

Or perhaps this picture
http://4.bp.blogspot.com/-mB7cCcThsz0/UgJCPSFSykI/AAAAAAAACIQ/J_UHse2yexU/s1600/rgsoc33.jpg

I found it one our blog, but it must have come from one of the teams.

from summer-of-code.

thanks for the feedback @sareg0! I'll try to finish the blog archive and then implement your suggestions

from summer-of-code.

Coooools! Shout if you need/want more help.

from summer-of-code.

@sareg0 well, actually, you could implement your suggestions :) I'm on slack if you need help

from summer-of-code.

huhu. just did a feedback round with my ux/ui/product dev colleague. She generally had a good impression :).

One thing: She advised to specifially add the names of the target groups, e.g. state the group in a clean/sans-serif font with small size. Also, text on hover should be more (like sara's texts). Not sure how the explicit naming of the target groups can be integrated since students' and coaches' section already have it in their title…

wdyt?

from summer-of-code.

One of our ideas was to have a line at the top saying

'I want to ...'
and the tiles say what the person want to do

• submit an open source project
• participate
• coach a team
• sponsor

That would be quite specific I guess. I'll implement my suggestions in the next hour (I'll touch base with you on slack @lislis), and you guys can see what you think.

from summer-of-code.

hey y'all. i pinged a friend of mine who is also a designer and she might have some good input and feedback here! say hi to @ApertoClaudi (be nice, she's a newbie here ;) ).

from summer-of-code.

Hi @ApertoClaudi,
Nice to meet you.
We just updated the landing page to 'finish' the content, and those changes are now live (fyi everyone else too).

http://railsgirlssummerofcode.org/landing/

@anikalindtner @alicetragedy @svenfuchs if anyone has suggestion for the content thus please do let us know.

from summer-of-code.

it's looking good! made some tiny changes (d8eb15c)
I really like that "use your coding powers for good" line!
I also just realised that maybe we should change something in the "Submit an application" area, it does not specifically say anything about students and as @katrin-k mentioned the target group should be clear in there somewhere.

from summer-of-code.

totally! My only concern was clarity of what the program is.
I was having this little debate with myself the other day; do we want to call particpants 'students', since there is not formal curriculum.
I'm totally ok with 'students' as a word, but just wanted to put it out there.

from summer-of-code.

true, we talked about this already :)
we have to find something to call them though if they are not students. The word "participant" implies just participating and not learning/being taught (in that respect, project mentors and coaches would technically be "participants" too, or not?).. In the contract we've referred to the grant as "fellowship" sometimes, but "fellow" sounds too formal to me. I can't really come up with anything better! 😞

We also have the subheading "Get rails girls students into Open Source software projects"..

from summer-of-code.

hi @ALL. :) i'm the newbie anika mentioned and i've got some input for you. ;)

you've done a good job so far but i've got some concerns about the structure of the website. i think the user should be guided a bit more. so your main target groups are students, mentors and coaches. but when the user visits the site, one can not clearly figure out where to click and to inform because it looks a bit random. i think it would be better if you have three balanced devisions for those target groups, so that the user can easily find ones interest. and of course you need a spot where all the donators can quickly donate, so i would suggest to create a big teaser for them. ;)
(i made a wireframe to show you, what i mean ^^)

and do you have some other photos, especially for the projects and sponsors section? they should be a bit more significant and nice looking, so that the user/sponsor thinks: hey, that's a nice place to be/donate/participate. :)

so far from my point of view. now i'm looking for your feedback.

from summer-of-code.

+1 on everything @ApertoClaudi said. I'd love to have clearer structure, since the tiles itself are more chaotic then a sidebar. 👍

from summer-of-code.

oh and about the pictures: yes, that's a debate right now to get them all in one place, nicely collected. I do have some other pictures, some you can find on the railsgirlssummerofcode.org/blog. i wanted to see anyway if i have more pictures on my computer... i'm gonna look through them.

from summer-of-code.

I updated landing according to @ApertoClaudi suggestions. Moar feedback please 💃

from summer-of-code.

@lislis awesome. looks so much better already. as for the photos we definitely need better ones. i will have time on friday hopefully to get to that.

Affect wise: I'd try out some other hover effects with the text. I'm not too sure about the effect right now, if that's a bit too slow (the appearance of the text). it also seems (correct me, if I'm wrong, I really have no idea about that) that the text appears from the middle? I'd try out a simple appear-effect, without too much movement - If that makes sense?

also: if you click on the menu button and the overview pops up, is there a way to make this action smoother? now it's a bit abrupt?

Thanks so much, @lislis for updating all this to and putting up with all the wishes <3

from summer-of-code.

I have a question related to the content/structure: do we also want coaching companies and possible supervisors as a target group? Is that what the "Help us out" tile would be for? I think coaching companies can be a really big asset for the teams, so maybe they shouldn't be hidden away somewhere.

And I don't know about the supervisors, I felt like we were really in over our heads last year that's why I thought it would be good to have a guide for them, too (does not mean that it has to feature prominently on the landing page, though).
just some thoughts! @sareg0 @lislis @anikalindtner

from summer-of-code.

Totally. Especially with the more streamlined design, they should make it to the front page. Not sure about getting them above the fold however. I'll leave the design decisions to the brilliant minds that do that stuff ;)

Here is the basic style guide we were working on
https://docs.google.com/document/d/1TFZxb79ar70jUU_UJAIxv041_AQoZB2HNwzf4Npxxvw/edit

It's pretty bare, but though it mighty be nice set one up as we go, so there is a method to the madness... Feel free to just transfer into a gist/repo/elsewhere where it is more appropriate

from summer-of-code.

@sareg0 I've added your style guide notes to the new design repo: https://github.com/rails-girls-summer-of-code/design
Alternatively we can add such a styleguide to this repo (summer-of-code) instead, if you think it's best that the website style guide is coupled with the website repo - in which case we keep the design repo for "print" stuff only. both work! :)

from summer-of-code.

I'm adding @ApertoClaudi's design here from the Slack channel.

claudi [9:33 PM]
"i'm not sure where to put the scribbles and it's definitely not finished, but give me all your feedback! "

from summer-of-code.

my Feedback: I love the structure with the three text-boxes (timeline etc.). it seems all so much more clear and tidy, I like that a lot! Also I think it's a good solution to put the "what is rgsoc"-text beneath the header, I like it! Also that there is a tiny link.

About the scribbles I'm not sure wether or not we want to include them still (since they are quite "old"), but I like the little birdie and I love having a structured, professional design with small and very carefully selected cuteness. We also have screws and nails and stuff in scribbles, which we never used on the website. So we could maybe try them out? Else I could maybe ping @bioshrimp and aks if she'd be up to draw some new ones.

from summer-of-code.

@anikalindtner yes, you can let me know if/when you need new stuff. cheerio.

from summer-of-code.

Hey! Looks amazing! I like the scribbles. Looks super nice.
Any thoughts/ opinions on the interaction/ animation design?

from summer-of-code.

@bioshrimp <3 !!!

from summer-of-code.

@bioshrimp I like the scribbles very much, so I definatley want to see them in the new landingpage! :) Maybe you can sketch one for the sponsors section or some other subtle ones like the tiny bird?

from summer-of-code.

So, I made an update for the home screen. I added a second layout for the open burger navigation and styled the hover effects. The arrow at the textlinks should maybe bounce a little and the teasers could have the red overlay, what they already have but with a button on it. The transition could be like the example "Ruby" on Codrops: http://tympanus.net/Development/HoverEffectIdeas/index.html

from summer-of-code.

I also added a teaser right in the Sponsor section. It could be a nice way to remind future sponsors to be part of rgsoc. It was just an idea. :)

from summer-of-code.

thanks so much for working on this! ✨ ❤️ 🌟 💖 ⭐ 🌠 ✨
Here are my thoughts:

• I love the sponsor's teaser! that's a brilliant idea
• the hover effect also looks cool (the ruby one), I probably have to see it implemented to have further comments on that
• The lines above the text kind of look weird to me. I think we should either leave them out or arrange it differently
• I'd love a bouncing effect of the arrow behind "More about us", that's a nice idea
• the menu: Lisa and I have also worked on this, and it looks kind of the same, i hope, Lisa can publish it soon so that you can see what we've done. I like the sunglasses, but the other scribbles (next to "About") confuse me a bit, because as a user I'd probably try to click on them. I could also understand if we say no scribbles in the burger menu at all, but I for my part like the sunglasses where they are 8)

@sareg0 and I will look for better images to put in the boxes. Do you have any suggestions? Also: I'd love to rethink this "Rails Girls summer of code"-part

but as that is probably some logo-work, we can also do that later in the process and leave it for now.

from summer-of-code.

+1. Here are my thoughts, and I will try to avoid repeating anything said above

• can the social/follow things be moved to the bottom. Although they are important People will know where to look for them if they are placed somewhere obvious. Normally footer, yes?
• i very much like that the 'grid' of sponsor logos will mirror the grid of tiles at the top.
• as the three sections of text don't match up to the four sections above, perhaps we could go with a contrasting layout. The design of the RailsConf registration page comes to mind. Third section down; the section is 'separated' in the middle by a grey line, and the content divided on either side. There are a few other pages that replicate this too, if you want to see more examples
• On the topic of the logo, because the title of the program is so prominently displayed on the hero image, perhaps the need for the text in the bar at the top is elliminated now?

I hope these suggestions offer some useful inspiration, just draw from them what you need :)

I have started an issue on just content, over here on issue #18, just to reduce to much noise about different 'topics'. Feel free to jump over there if you have specific copy ideas/plans

from summer-of-code.

@ApertoClaudi hahaha, the Cake Lorem Ipsum <3

from summer-of-code.

^^ Yeah, finally somebody has found my little "easter egg". ;)

from summer-of-code.

Thank you for your feedback! I totally agree to the point with the red lines above the textblocks. I'm not sure with it but wanted to have a CI element in these three teasers. Hm, I will think about it. And I'll make a version with two boxes. In my opinion three work as well, because with three boxes we have a little diversity in the layout and it has a bit more tension in it. But let's see! :)

from summer-of-code.

@anikalindtner @sareg0 By the way: Do you want the social icons in the footer? They are just on the sidebar in the blog on the current website. So how important are they? I made them in the teaser as a content example, because Sven mentioned to have teasers with different content possibilities.

from summer-of-code.

@ApertoClaudi yes, in the footer next to the imprint I'd say? what do you think? It's a good example, definitely! Just if we can save some space, I'd say, let's drop the third textbox and go for two. (Or at least try it out)

from summer-of-code.

also EASTER EGG FTW! all the cup and cakes <3

from summer-of-code.

• I changed the lines in the three-teaser-row from above the texts to underlines, V1 in dark grey, V2 in red. What do you prefer? (I share my opinion later ;) )
• v3 is the version with two tasers in a row AND the social icons in the footer.
• The menu has just the sunglasses now.
• Why would you like to change the logo?

from summer-of-code.

@ApertoClaudi niiice! I like the version with only one line between two text-blocks definitely the most. on the other versions it's just too many lines for my taste (although it still looks way better than anything before!). The v3 is awesome, since the color of the one line is the same as the background above.

I also like the icons down on the page.. Maybe we could also try to put them right next to the impressum? So one paragraph lower even? or does that look stupid?

from summer-of-code.

I <3 V3 soooo much! There is even a little white line delimiting the footer, which could be an awesome place for socials. Amazeballs designs :)

from summer-of-code.

I wish my clients would be so excited and give such lovely feedback for our work here … <3

Now the social icons are down the white line near the imprint. I think it works good.

@lislis Do you need the PSD or Icons etc to code the website? I'm not in Berlin this weekend, so if you need something, ask me now or tomorrow. :)

from summer-of-code.

@ApertoClaudi (the great community is one of the reasons I stuck with working for Rails Girls in general ;)) ) looks so good! thanks for implementing the feedback!!

from summer-of-code.

@ApertoClaudi AMAZING! I use fontawesome for the usual icon stuff. But do you maybe have the SoC logo as svg?

from summer-of-code.

Sorry that I've totally not been able to give any feedback about this at all, but great job @ApertoClaudi, it looks great. Like everyone else, I agree that having the two blocks (timeline and help out) like this, with the grey line in the middle and the tiny red line under the heading, looks beautiful, because it's very subtle and not "in your face".

One random question: Are we scrapping the "handwritten" typeface we were thinking of using? (just asking for consistency with other design things, and also so that we can update the style guide when we are done).

Also a tiiiiiiny suggestion if that's okay: for the line that divides the content from the footer, I think it would look good to have it not start at the edges of the page, but where the content blocks start and end. so, on the left it starts where the sponsor logos start, and on the right it would end in the same spot as the right edge of the "Become a sponsor" box.

And it's been said before but I'm saying it once more anyway: I love the sponsor call to action!!! thank you for your great work! <3

from summer-of-code.

@alicetragedy Thanks for your commendation ^^
I think your "tiiiiiiny suggestion" is absolutely right and @lislis can implement it right in her code. :) So no layout update necessary.

In case of the handwritten font: Sven would like to have a much "bolder" typeface which shows, that the railsgirls are a qualified group and not a bunch of girls who are giggling around all day. (I overdraw it a bit, he mentioned it more polite. ;) ) But I get the point and changed it. @anikalindtner what do you think, should we have the handwritten font as well for stickers etc.?

from summer-of-code.

@ApertoClaudi: oh I totally get Sven's point, and I actually really like the way it looked in your layouts (without the handwritten kind of typeface) so I'm very happy either way, as long as it looks great :)

from summer-of-code.

@ApertoClaudi I think I'd totally leave that up to you designer-pros :) We have used the stamp for the certificate and I still think it looks nice and warm. So I'd be up for having a stamp-sticker and one that shows the Rails Girls Summer of Code - logo (or even moar)! we can go more creative with the stickers, I'd say. But I'm not expert. If you from a design-position say that we simply CANNOT use fonts, we don't use on our website and that we should decide on a continual design, than that's fine for me too.

from summer-of-code.

@lislis great implementation and awesome work, thanks! Seeing it live, I have some things, I'd love to change/see if we can work something out:

• I'd remove the red line under HELP OUT and TIMELINE (if it's too simplistic, I'd gp for putting the squiggly-line there, but I'm not sure, if that looks too good)
• the grey line dividing those ^ two texts should be exactly in the middle of the 4 boxes above and go a bit further down
• remove the "interested?"
• move the whole timeline-list more into the center (but not center the list, if you know what I mean)

❤️

from summer-of-code.

to all of you: so much wow!
i so love the little birdy beside the boxes :)

this is what i found or suggest:

• top bar menu: set menu items and hamburger more vertically centered
• i find the name "Rails Girls Summer of Code" a bit hard to read. maybe a capitalize it? @ApertoClaudi wdyt?
• +1 on removing the red lines and centering the timeline. padding-top: 10px; padding-left: 160px; looked good to me. (with the divider still in the wrong place…)
• on the "Help out": set a padding on the paragraph so it has a similar width as the timeline. padding: 10px 70px; looked good.
• "Get in Touch" gets the email address
• as said: the links in the boxes and the sponsor's section ;).
• in sponsor's section: align tealeaf and site5 box
• feed/twitter/fb section: rather "Stay up to date with us"?

from summer-of-code.

overlooked some stuff:

• all the get-involved links in the toggle nav are dead: …/guide/… (instead of …/guides/…)
• add "Roles" to the toggle nav under "RGSoC". order should match with sidebar: About, Team, Roles, CoC http://railsgirlssummerofcode.org/about/roles/
• same for "Get Involved". order: Coaches, Coaching Company, Mentor, Supervisor (or change sidebar in case focus on Coaching Company is preferred)
• remove "Sponsorship Guidelines". Instead set link to campaign page?

from summer-of-code.

It totally rocks, ladies! :) And I'm fine with all the light changes regarding to the design.

from summer-of-code.

Oh, I just found out, that the Logo leeds to the old landing page after clicking on Imprint and then clicking on the Logo. That should be changed I think. ;)

from summer-of-code.

It actually still shows the old landing page for me if I go to: railsgirlssummerofcode.org
don't know if that's the plan for now, or if the index should be changed to reflect the new landing page. :)

from summer-of-code.

@alicetragedy that's the plan. Since the landing page is not entirely finished... (images still need to change, some a-line-ments (haha ;) ) too) but after everything is finished, we can SHIP IT!

from summer-of-code.

ok! I guess then that's the same "issue" that @ApertoClaudi just mentioned above, and it's "absicht" :)
YAY, can't wait! <3 🎈

from summer-of-code.

All the amazing Buttons:

I think, the one in the middle of these three examples is the one which is the one to be.

from summer-of-code.

@lislis can you make your ✨ magic ✨ happen again?

from summer-of-code.

Okay, so I think this issue is mostly done. The only thing that could be improved are the layouts on mobile. Do you have the time to do this @lislis. If not I can perhaps do a little hack session on the weekend to see what I can do... So we can then at least close this issue, and then work on the rest of the site.

from summer-of-code.

I made a small improvement to the logos on the landing page yesterday with @lislis's help.

The only thing left to do is fix up the burger menu on mobile, and perhaps add a tad of padding to the left of the logo

from summer-of-code.

awesome work @sareg0. Do you need help with something, or are you on it? ❤️

from summer-of-code.

I am on it this evening... I'll try to get a pull request out there in an hour or two

from summer-of-code.

@alicetragedy I have check locally, and it seems to work... Perhaps you just wanna check and merge if you feel like it #59

from summer-of-code.

I'm closing this one on up! It's long, and we can start a new issues if we have future changes :)

from summer-of-code.