WordPress.org

Making WordPress.org

Opened 2 months ago

Last modified 2 months ago

#2988 new task

Create a landingpage for the Global WordPress Translation Day

Reported by: CoachBirgit Owned by:
Milestone: Priority: normal
Component: wptranslationday.org Keywords: ui-feedback gwtd has-patch needs-testing
Cc:

Description

The third Global WordPress Translation Day will be held on Sept, 30th 2017. To host this event and use it as information hub it is needed to create a new landing page as 'save the date' announcement on http://wptranslationday.org/

Global WordPress Translation Day is 1 full day dedicated to bringing WordPress to more people around the world. 24 hours of live training sessions on WordPress i18n & L10n.

See the proposals attached.

Attachments (22)

template_gwtd.jpg (589.1 KB) - added by CoachBirgit 2 months ago.
Landingpage proposal by @nandz
template_gwtd.2.jpg (589.1 KB) - added by CoachBirgit 2 months ago.
Landingpage proposal by @zetaraffix
teaser&web-23-LR.jpg (533.7 KB) - added by zetaraffix 2 months ago.
@zetaraffix's proposal for temp landing page GWTD3
gwtd3_avatar.jpg (502.6 KB) - added by zetaraffix 2 months ago.
Social Media Profiles avatar
gwtd3_twittercover1.jpg (1.1 MB) - added by zetaraffix 2 months ago.
Twitter cover #1
gwtd3_FBcover1.jpg (700.9 KB) - added by zetaraffix 2 months ago.
FB event cover #1
PolyglotWapuu.jpg (858.7 KB) - added by zetaraffix 2 months ago.
PolyglotWapuu.jpg
gwtd3_twittercover4.png (204.2 KB) - added by zetaraffix 2 months ago.
Twittercover_final
PolyglotWapuu3.png (142.4 KB) - added by zetaraffix 2 months ago.
Social_Wapuu_Avatar
webdesign2-LR.jpg (458.5 KB) - added by zetaraffix 2 months ago.
webdesign_update230717
Web 1920 – 1.png (968.2 KB) - added by zetaraffix 2 months ago.
Tigher web layout - 2040717
iPhone 5SE – 1.png (347.5 KB) - added by zetaraffix 2 months ago.
mobile declination 240717
template_gwtd2.jpg (989.6 KB) - added by franfernandz 2 months ago.
Landing_Page_Proposal_2
GWTD3-web1.ai* @ 33,27% (RGB:GPU Preview) .png (53.7 KB) - added by zetaraffix 2 months ago.
inside pages-1
GWTD3-web1.ai* @ 33,27% (RGB:GPU Preview) .2.png (53.7 KB) - added by zetaraffix 2 months ago.
webdesign_update250717-1
gwtd3Artboard 2 copy 3.jpg (1.5 MB) - added by zetaraffix 2 months ago.
(sorry, right file here) webdesign_update250717-1
GWTD web assets.zip (1021.6 KB) - added by zetaraffix 2 months ago.
assets - 250717-1
Screenshot_20170727-062759.png (129.5 KB) - added by CoachBirgit 2 months ago.
404 page on Huawei P10 with Android / Google
Screenshot_20170727-062826.png (112.8 KB) - added by CoachBirgit 2 months ago.
Slide-in menu on Huawei P10 with Android / Google
Screenshot_20170727-063053.png (159.4 KB) - added by CoachBirgit 2 months ago.
Private page with Form 404 on Huawei P10 with Android / Google
gwtd3-270717-1Artboard 2 copy 3.jpg (2.3 MB) - added by zetaraffix 2 months ago.
Latest iterations - landing 270717
gwtd3-270717-1Artboard 2 copy 2.jpg (797.9 KB) - added by zetaraffix 2 months ago.
Inside pages-2 - 270717

Change History (44)

@CoachBirgit
2 months ago

Landingpage proposal by @nandz

@CoachBirgit
2 months ago

Landingpage proposal by @zetaraffix

#1 @CoachBirgit
2 months ago

Related to the landing page proposals we need to be aware of the new style guide proposal #2987

Last edited 2 months ago by SergeyBiryukov (previous) (diff)

This ticket was mentioned in Slack in #polyglots-events by coachbirgit. View the logs.


2 months ago

@zetaraffix
2 months ago

@zetaraffix's proposal for temp landing page GWTD3

#3 @netweb
2 months ago

  • Component changed from General to WordCamp Site & Plugins
  • Keywords gwtd added

#4 @SergeyBiryukov
2 months ago

  • Component changed from WordCamp Site & Plugins to wptranslationday.org

#5 follow-ups: @netweb
2 months ago

Based on the proposed styleguide here, the current color contrast of these images have WCAG accessibility issues:

#6 in reply to: ↑ 5 @franfernandz
2 months ago

Replying to netweb:

Based on the proposed styleguide here, the current color contrast of these images have WCAG accessibility issues:


interesting. i'm going to work using those links as a guide.

@zetaraffix
2 months ago

Social Media Profiles avatar

@zetaraffix
2 months ago

Twitter cover #1

@zetaraffix
2 months ago

FB event cover #1

#7 in reply to: ↑ 5 @zetaraffix
2 months ago

Replying to netweb:

thank you, I am familiar with the need of proper contrast, and this will come handy.
Please note that branding colours are generally NOT the colours used to write body text :)

Based on the proposed styleguide here, the current color contrast of these images have WCAG accessibility issues:

#8 follow-ups: @melchoyce
2 months ago

I see that there are two proposed designs here — is your team leaning towards one or another? Can I give some design feedback on one in particular or both? Also curious about if you have any copy written, since the first mockup includes some but the second one uses some lorem ipsum currently. Drafting up your content first is super helpful, IMO, since then you can design around that content.

@zetaraffix
2 months ago

PolyglotWapuu.jpg

#9 in reply to: ↑ 8 @zetaraffix
2 months ago

Replying to melchoyce:

I see that there are two proposed designs here — is your team leaning towards one or another? Can I give some design feedback on one in particular or both? Also curious about if you have any copy written, since the first mockup includes some but the second one uses some lorem ipsum currently. Drafting up your content first is super helpful, IMO, since then you can design around that content.

Good point @melchoyce, though I generally like to get an overall feeling for the space and the main points I need to get across, and then write the necessary content.
It is important we go online asap with a simple "soon online" format conceived to be smoothly integrated with the more complex content we are planning. I would absolutely appreciate all feedback you wish to share with us :-)

#10 in reply to: ↑ 8 @franfernandz
2 months ago

Replying to melchoyce:

I see that there are two proposed designs here — is your team leaning towards one or another? Can I give some design feedback on one in particular or both? Also curious about if you have any copy written, since the first mockup includes some but the second one uses some lorem ipsum currently. Drafting up your content first is super helpful, IMO, since then you can design around that content.


Hi @melchoyce .
I'm,no particularly fan to use "lorem ipsum". Nothing special, just a work choice :P, so I'd copied the text of thw #gwpt website.
You can give your feedback the way you want. We'll appreciate it really much.

@zetaraffix
2 months ago

Twittercover_final

@zetaraffix
2 months ago

Social_Wapuu_Avatar

@zetaraffix
2 months ago

webdesign_update230717

#11 @zetaraffix
2 months ago

Here's the text, for comments and inputs :-)

What is GWTD3?

Global WordPress Translation Day is a 24-hour global event dedicated to the translation of the WordPress ecosystem (core, themes, plugins).

It’s a unique and innovative event, a cool mix of digital and phisical: the international community of the WP Polyglots will meet at the same time locally and digitally for a 24-hour translating marathon that will provide inspiration and training to both coders and translators on localising and internationalising through live talks and local meetups.

And this year the celebration is double: September 30 has also been designated as International Transaltion Day by the United Nations!

Where is GWTD3?

Global WordPress Translation Day is ... well, everywhere! In the 24 hours from 00.00 to 24.00 UTC of September 30, 2017 a series of live sessions will be aired live via Crowdcast.

The sessions, offered in the local languages, will provide information, training, inspiration, case studies, Q&A sessions and more on the WordPress ecosystem: a “global Polyglots chorus” that will run from East to West, as the time zones roll out.

The live events (available on this website) are paired with physical meetups that volunteers can join locally, to add conviviality and support to the experience (and, if at alla possible, fall a little more in love with the Community)

Cool! How do I get involved?

So, don’t make ather plans for Saturday September 30 2017 and hop on: your local Polyglots team is waiting for you to get involved and chime in!

If you can, join other volunteers in your local community (usually, this turns into a fun occasion to meet other WordPress lovers and to learn more abou the platform and the Community) or, if you prefer, join us online... but either way: join the fun and help us make WordPress inclusive and accessible to as many people as possible.

Below are the links to our social net presence, to the International Slack channel and to the Polyglots’ page on the official WordPress.org site. Joining the coolest Community in the Universe is only a click away... So don’t wait a second longer!

This ticket was mentioned in Slack in #polyglots-events by zetaraffix. View the logs.


2 months ago

#13 in reply to: ↑ 8 ; follow-up: @semblance_er
2 months ago

What are the general thoughts regarding the use of the Polyglots logo over the WordPress logo? Is that allowed with the WordPress logo? Perhaps the relationship can be with each logo’s border, almost like a chain? When I see them over each other, it feels like it taking away the identity and meaning of each and not clear enough to make out. Especially for people that are less familiar with each logo type.

#14 in reply to: ↑ 13 ; follow-up: @zetaraffix
2 months ago

Replying to semblance_er:

What are the general thoughts regarding the use of the Polyglots logo over the WordPress logo? Is that allowed with the WordPress logo? Perhaps the relationship can be with each logo’s border, almost like a chain? When I see them over each other, it feels like it taking away the identity and meaning of each and not clear enough to make out. Especially for people that are less familiar with each logo type.

Hey there :) this combination has been used in the past and, personally, I don't see any issues with it (which is why I kept it as an element of continuity from past): the Polyglots are - in this case - the forefront act, and WP in the back provides the context. I am not sure, instead, that we would be allowed to intervene/modify the WP logo (in fact, I'm pretty sure we can't).

You can send your proposals for a different approach if you'd like, just be aware that we have very little time for explorations: the event is approximately 9 weeks away and we need to make decisions very rapidly (at least for this instance)

#15 in reply to: ↑ 14 @semblance_er
2 months ago

Replying to zetaraffix:

I understand. I did not realised it has been use in the past. Thus in that case and also from a timing point of view it probably make sense to not reinvent the wheel too much.

This ticket was mentioned in Slack in #polyglots-events by zetaraffix. View the logs.


2 months ago

#17 follow-up: @dinhtungdu
2 months ago

There are some accessibilty issues with the design in my opinion:

  • First is the line-height. It's too narrow which can cause hard to read.
  • The background color and text color of "Where" part may be hard to read.
  • Too many bold in paragraph ~> confusion.
  • Do we have any link in paragraph? Can we make it more recognizable.
  • Lack of Icon and CTA button.

@zetaraffix
2 months ago

Tigher web layout - 2040717

@zetaraffix
2 months ago

mobile declination 240717

#18 in reply to: ↑ 17 @zetaraffix
2 months ago

@dinhtungdu :) as mentioned in the meeting we will fine-tune legibility when online through font and color

I've just updated tighter layouts with secondary font for body text and icons and a first draft mobile version
the only links will be in last section and yes, will be either underlined or indicated in some other way (very tired now, long day) - not totally happy with icons, will work more on this

also as discussed in meeting, this landing page will grow as more content is implemented and will evolve along with comms campaign :)

Replying to dinhtungdu:

There are some accessibilty issues with the design in my opinion:

  • First is the line-height. It's too narrow which can cause hard to read.
  • The background color and text color of "Where" part may be hard to read.
  • Too many bold in paragraph ~> confusion.
  • Do we have any link in paragraph? Can we make it more recognizable.
  • Lack of Icon and CTA button.
Last edited 2 months ago by zetaraffix (previous) (diff)

@franfernandz
2 months ago

Landing_Page_Proposal_2

@zetaraffix
2 months ago

webdesign_update250717-1

@zetaraffix
2 months ago

(sorry, right file here) webdesign_update250717-1

@zetaraffix
2 months ago

assets - 250717-1

#19 @xkon
2 months ago

Making a reply here as I will be gone for some hours to run some errands.

Github is always updated ( wp-content with an .sql dump as well) and has the latest code that goes with a temporary preview at https://dev.xkon.gr . We decided to update the custom theme to use _s just in case more people wanted to join the team so they can get around more easily so it was done.

You can see the latest progress there.

What I still have to do:
1) Fix the menu.
2) Refine some css.
3) Make @CoachBirgit form and implement it properly.
4) Fixes here and there that won't alter the design so no need to worry or explain further atm.

What I'm missing at the moment:

1) Social link URLs for the footer icons.
2) Smaller alternative banner for the extra pages.
3) Is the form going to send an email somewhere or saved to database? If email what is the address?
x) General input about changes

After the landing page is done the workload will be divided between myself @dinhtungdu and @dipeshkakadiya to finish the main site as fast as possible, so designers have your creativity jumping and the resources ready asap as well :).

Tomorrow the landing page will probably go live if the design team has no objections or massive changes by tonight.

Hopefully I'm not forgetting something at the moment.

Best regards,
Konstantinos

#20 @xkon
2 months ago

  • Keywords has-patch needs-testing added

Hey there. Github repo updated I'm just pasting here for the ones that don't follow it:

gwtd3 theme

Landing Page ( to be continued as a theme :D ) based on _s.

Latest stable: v1.0.3

Currently includes:

Responsive design
Off-Canvas mobile menu
Scroll-to-top
Smooth Scroll on # links.
Customizer - Main Header
Extra custom header for the non-landing page posts.
Dev stuff: .sql export (latest: dev.gwtd3.sql) for easy setup, wp-content folder with all the uploaded files.

Tested on latest: Chrome, Firefox, Opera, Edge, IE11, Android

I would love some MacOS tests.


Tomorrow I will start implementing the form you asked as well @CoachBirgit but we can push it on live as well now if there are no other design changes.

I'm only missing the Facebook page link for the social footer menu but that's a minor thing.

Best regards,
Konstantinos

This ticket was mentioned in Slack in #polyglots by tobifjellner. View the logs.


2 months ago

@CoachBirgit
2 months ago

404 page on Huawei P10 with Android / Google

@CoachBirgit
2 months ago

Slide-in menu on Huawei P10 with Android / Google

@CoachBirgit
2 months ago

Private page with Form 404 on Huawei P10 with Android / Google

@zetaraffix
2 months ago

Latest iterations - landing 270717

@zetaraffix
2 months ago

Inside pages-2 - 270717

#22 @melchoyce
2 months ago

Hey @zetaraffix, wanted to give your latest iterations some feedback:

Landing Page

  • The color contrast is looking better!
  • The only place where I'm worried about contrast and readability is where the text overlaps the icons on each section. I'd recommend lowering the opacity on this images a bit more, and also moving the text over a bit to avoid overlaying the body text. I think the effect is okay just with the section headers.
  • Related, I think your line length could use shortening. In general, 45 – 75 characters per line is recommended. More than that makes a paragraph harder to read. (Less can be okay, especially on smaller screens.)
  • I also think your line-height's a little low; maybe try bumping it up just a little? I like to use 1.4 – 1.6x the size of my body font.
  • In general, I think the content of the site (header, nav, page content, footer content) could benefit from having some sort of max-width when it's implemented so it doesn't get too loose on wide screens. Probably between 800 – 1200px.

Contact Page

  • Same issue with long lines of text — narrow that down a bit and I think you'll be better off. :)
  • I think the form should also be narrower. I find using the content of a form is a good way to determine the general length of the form fields. So, names and emails are probably okay being 250 – 400px wide.
  • I'd recommend combining your "first" and "last" name fields to be just one "full name" field, which is a little more inclusive of cultures that use different name formats.
  • You're missing a "submit" button design for your contact form. (That trips me up all the time when I'm designing forms, lol).

Hope this helps! Let me know if I can clarify anything.

Note: See TracTickets for help on using tickets.