Website redesign

[nzakas]

We'd like to do a redesign of eslint.org, with the goals of:

1. Making the landing page more useful. Some sites we think do this well (@eslint/eslint-team, feel free to add more here):
   • http://facebook.github.io/react/
   • http://emberjs.com
   • http://gruntjs.com/
   • http://babeljs.io/
   • https://git-for-windows.github.io/
2. Ensuring the most recent ESLint version number is featured prominently
3. Featuring most recent five blog posts
4. Providing good readability for documentation (typography and styling)
5. Being responsive

If you have thoughts or suggestions, please feel free to share them here.

[pedrottimark]

Example of a simple inconsistency which pushes me out of the flow a bit each time I learn a new rule:

http://eslint.org/docs/rules/ has rule string as hyperlink text followed by hyphen and rule description in all lowercase, for example:
comma-dangle - disallow or enforce trailing commas

http://eslint.org/docs/rules/comma-dangle heading has rule description in title case followed by rule string in parentheses, for example:
Disallow or Enforce Dangling Commas (comma-dangle)

Copied this comment to #186

[ilyavolodin]

Small list from me:
https://karma-runner.github.io/0.13/index.html
http://nightwatchjs.org/
https://code.visualstudio.com/
https://atom.io/

[omerbalyali]

UI Design for Landing Page. There will be feature drill-down with illustrations below the scroll. This page (home), has a title Getting Started, so this page acts as a starting point to understand what is ESLint (and Linting), what are the capabilities of it, which companies are using and links to more detailed guides/documentation.

Features:

• Everythings is pluggable
• Add Rules at Runtime
• Every rule is standalone
• Rules can be a warning or an error
• Test Ready
• Your code, your style
• Command Line Interface
• ES2015 Ready
• Open-Source
• Javascript and JSX
• Extensive Support (Editors, Build Systems, Command Line Tools, Testing and more)

Feel free to give feedback, so I can continue from there.
Headline and copy-texts can change of course, general feel and utility is more important at this stage.

[nzakas]

Thanks @omerbalyali, this looks like a good start. Some thoughts (in no particular order, and skipping over any notes on content):

• Really love the header
• Cool graphic
• Perhaps a bit too much purple and too dark at the top? For some reason, I'm thinking that splash area could use a faded-back background graphic rather than just color (maybe because that's what we have now, but I'm not sure).
• I like the centrally-located "Get Started" button
• Also like the stable version/view on github treatment.

So I think general 👍 on overall direction.

@eslint/eslint-team thoughts?

[ilyavolodin]

I know design taste is a very personal thing, but I'm definitely not liking this direction. Very heavy, hard to read mono-sized fonts, dark background, no air, colors that don't play well together, etc.
I do like visual linting representation though. Red -> Green text idea is pretty neat.

[nzakas]

@ilyavolodin it sounds like your biggest complain is being too dark (similar to my "too much purple")? I'm not sure the text reads as mono or hard to read to me, are you viewing the image in full size? (It took me a minute to realize I wasn't the first time I viewed the image.)

[BYK]

Agree with "too much purple/too dark" complaints. Rest looks pretty good. Key points got my attention immediately that we want a user looks answers to:

• What is this thing?
• How do I use it?
• What is the current version
• Is it pretty/polished?

[omerbalyali]

Thank you Nicholas,

I agree with the need of a background graphic but I didn't think of anything to illustrate so I just leave it with some transparent dotted lines.

@ilyavolodin We are trying to make the ESLint website accessible and easy-to-use for everyone, so it's important to get every feedback to make it so.

For the colors, I'm not sure which direction to go: purple or more blue, or in between (indigo color or gradient as it is now). Blue is more "reliable" color than purple, but purple has some character too. I would choose more blue but I want you to decide.

This one looks more clear and it surely reduced the color load on the eyes:

[omerbalyali]

For the color complaints; we can remove the background and use white background with some illustrations on top of it. I will experiment with it.

@BYK There will be features and installation/usage instructions below, I'm working on it. I will upload a wireframe, so it will be easy to discuss. I put the below text temporarily for now, it'll change to more appropriate description for newcomers.

Thanks for the feedback.

[nzakas]

Aw, I liked the purple header. :) I think the biggest issue is the giant purple splash. If we can lighten that area up, I think the purple header could work.

[ilyavolodin]

@omerbalyali Yes, that's what I was getting to. Text is more readable on white background. I don't really mind purple or blue (I'm not in love with the combination of two, I'd rather see a combination of cold and warm color, but that's a personal preference), but I think they should be used as accent colors. Our site is 98% text, and making it easy to read is a key, I think.

@nzakas I was talking about mono-spaced font in the header. I don't mind the font in the body.

[omerbalyali]

@nzakas You mean the top bar or the jumbotron?

@ilyavolodin I agree using warm-cold color combination. I will use orange-red as secondary color.

The important thing about font is, fonts like DIN or Avenir are available in webfont through fonts.com and the service is surely expensive. (30$/m for 1m pageview and 140$/m for 5m pageview, billed once for 3 years. There are monthly and annually payment options and of course it's more.) So I think the best way is using Google Fonts, probably Roboto Sans. But I wanted to show you the DIN option first, I will upload the Roboto version. But this doesn't mean we can't use DIN as a main brand font of choice. I need your opinions on this matter.

[ilyavolodin]

@omerbalyali Just to clarify, when you are talking about main brand font, you are mostly talking about logo? The font used in the logo is a bit too heavy for my taste, I would rather see something lighter.

[jacobp100]

Possible free (and lesser known) alternatives to,
Avenir: https://www.google.com/fonts/specimen/Montserrat
DIN: https://github.com/larsenwork/Gidole

Design (including logo) looks great though!

[omerbalyali]

@jacobp100 Gidole looks great, thanks!

Update: Gidole is only in Regular, no Bold or Italic. :/

[nzakas]

Here's another that I think looks good, and uses some purple, too. :)

https://sumome.com/

[nzakas]

And another: http://krakenjs.com/. I think this one does the upper-dark, bottom-light thing really well.

[kaicataldo]

Not sure if this is still being worked on or not, but I'm happy to help with building this when we get closer to a finalized design. Liking the screenshots posted by @omerbalyali :D

[nogagoldman]

Is this project still running? I'm a product designer and I'd love to help out!

[nzakas]

@nogaraviv definitely still running and happy you're interested. It's been a while since we did any work surrounding this, what do you think would be the best way to proceed?

[nogagoldman]

@nzakas Want to hop on a call? We should talk about whether you just want a polished version of what currently exists, or add new content (and if so, what the content will be) as well as style preferences the team has (if any). Some of these things have already briefly been discussed, but since it's been a year there may be more changes, and it'll be good to talk them through.

Also, we should chat about creating some sort of styleguide to follow for future pages, blogs, etc to make it easy to generate assets and keep a consistent style. 👌

I come home from vacation Jan 2, and can talk anytime Jan 3-5 b/w 1-4pm PST.

[nzakas]

I can try a short call to get this bootstrapped, I'll email you so we can set up a time.

We definitely want to add new content to the homepage to make it more useful. Right now it's a confusing jumping off point that doesn't provide a lot of useful information for new users.

A style guide would be awesome!