TypeScript Website Home Page v2

[orta]

New Design: Figma link
Live Link: https://typescriptlang.org/

Last August, we shipped a re-design of the homepage with the constraints of mixing the old homepage's colors, style and content with some of the more modern design language from the VS Code site and the Microsoft fluent design system.

Now the site is stable, we've come back to the index with fresh eyes, new user tests and gone through 4 iterations of ideas:

• Simplifying the homepage content and text
• Minimalist tailwind-y aesthetics to closer match GitHub's product pages
• A re-focus on user-feedback from contrasting the two designs based on user-testing of the minimalist with the current site
• A constrained palette version of the re-focused design

The goals of the homepage are to introduce TypeScript, explain the value proposition of the language with a focus on the developer experience gains from migrating incrementally. We can use it to show JavaScript developers that it's not a 'cross the chasm to TypeScript' for getting better tooling, and can be a much slower / thoughtful process if they want.

You can preview the WIP implementation of the TypeScript re-design at https://static.staging-typescript.org/index4 - if you have ideas and suggestions for the design, you're welcome to leave feedback here.

[helloankit]

I loved the code examples in Get Started section of the new design, which is showcasing the thin line of difference between JS and TS.

On the current site, there is too much textual content. We can add some cool infographics, which can convey the message merely at a glance. Also, action items such as links to the documentation can be moved upwards.

[orta]

This is shipped 👍🏻