Redesign Landing Page

[sareg0]

@lislis and myself have started working on the landing page of the RGSoC site i.e. the home page of the SoC site

This is the first step in a website-wide design change, where content will also be reworked and pared down, to be more succinct and focus more heavily on the target groups that will be coming to the website for information

• Mentors/Call for Open Source Projects
• Students
• Coaches
• People wanting to donate to the crowd sourcing campaign.

Attached is the 'mockup' image of the accepted design/layout change.

Inspired by https://www.mozilla.org, the new design will stand apart from previous design schemes, and more oft-used 'hero image' style. This is to differentiate ourselves, and create a distinct look and feel to SoC, as well as (and most importantly) focusing on the target groups visiting the site.

The previous/closed issue for this redesign project is here; https://github.com/rails-girls-summer-of-code/summer-of-code-2014/issues/176

[lislis]

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

[alicetragedy]

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. :+1:
• 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)

[lislis]

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

[lislis]

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

[alicetragedy]

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

[carpodaster]

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: :+1: :+1: :smile:

[anikalindtner]

AWESOMESAUCE <3

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

[lislis]

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

[sareg0]

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?

[sareg0]

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.

[lislis]

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

[sareg0]

Coooools! Shout if you need/want more help.

[lislis]

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

[katrin-k]

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?

[sareg0]

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.

[anikalindtner]

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 ;) ).

[sareg0]

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.

[alicetragedy]

it's looking good! made some tiny changes (d8eb15ce274a24912f83effedb23dbb438a6c81f) 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.

[sareg0]

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.

[alicetragedy]

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

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

[ApertoClaudi]

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.

[anikalindtner]

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

[anikalindtner]

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.

[lislis]

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

[anikalindtner]

@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

[alicetragedy]

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

[sareg0]

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

[alicetragedy]

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

[anikalindtner]

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

[anikalindtner]

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.

[bioshrimp]

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

[lislis]

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

[anikalindtner]

@bioshrimp <3 !!!

[ApertoClaudi]

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

[ApertoClaudi]

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

[ApertoClaudi]

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. :)

[anikalindtner]

thanks so much for working on this! :sparkles: :heart: :star2: :sparkling_heart: :star: :stars: :sparkles: 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.

[sareg0]

+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

[alicetragedy]

@ApertoClaudi hahaha, the Cake Lorem Ipsum <3

[ApertoClaudi]

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

[ApertoClaudi]

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

[ApertoClaudi]

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

[anikalindtner]

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

[anikalindtner]

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

[ApertoClaudi]

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

[anikalindtner]

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

[sareg0]

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

[ApertoClaudi]

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. :)

[anikalindtner]

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

[lislis]

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