http://nortikin.github.io/sverchok/ landing page redesign

[zeffii]

edit: now: http://nortikin.github.io/sverchok/

As we now have a growing collection of nicely formatted documentation, it's time (I think) to put the Sverchok site in the spotlight too and consider how to do an upgrade/redesign.

Prelim tests: http://sverchok.neocities.org/

[zeffii]

see: http://www.thefoundry.co.uk/products/nuke/ http://www.autodesk.com/products/3ds-max/overview http://www.blender.org/ http://al.chemy.org/

Large initial visual, maybe showing slow carousel with (fixed size images, no stretching)

• geometric images
• project rendering
• neat node layouts

Simple navigation to get more info / download .

Avoid doing everything on one page. "Less is more"

[nortikin]

First of all i hate standard approach to site constructon. Schemes of this large sites are similar and going as stamping stamping stuff. As one man will design and blindly share his design to all this sites. It is cruel and every time i see i hate that.

[nortikin]

if we talking of html5 usage, it maybe usefull, but for exact things as jsons librery with drugndrop and scrolling. What is main aim to change design conceptually? I see it as blocks, that situates in check order and expanding when you choose one. As now, but with hidden (not loaded) stuff under them. should i draw an idea?

[zeffii]

Whether we like it or not web-page design is an art and a primitive science. For people who see the page before using Sverchok it will be a big part of their first impression.

Yes! draw ideas -- i'll be doing some front end web development over the next few months, and if I have spare time I want to experiment on the sverchok site (even if you don't use the experiments)

[zeffii]

I agree about resisting the urge to mimic big sites, perhaps of all the links above I think the alchemy.org is closest to what I have in mind. It's not so busy, is easy and has obvious navigation. Simple typography.

[nortikin]

What you prepare to use, joomla? drupal? or something else?

[zeffii]

d3.js and handlebars for templating

[nortikin]

omg, it seems like powerfull tools

[nortikin]

How do people look at page http://www.creativebloq.com/ux/how-human-eye-reads-website-111413463

[zeffii]

looking for 800300 (w \ h) images for the banner

placeholder images for now

[zeffii]

actually, no wait.. it's bigger

[nortikin]

what data should D3 make as svg or tables? is it github stuff or something? not exactly understand. we need shop for layouts for sale and page folks can store theyr's own jsons... but it can be not functional on site. better to make uploader to pasteall and sending link to email (site if there php). And what hosting we need? php? IU don't know php and don't want study it now.

[nortikin]

http://haxiomic.github.io/GPU-Fluid-Experiments/html5/?q=Medium

[zeffii]

quite beautiful no? :)

[zeffii]

d3 can generate html, divs etc. fast example: http://tributary.io/inlet/b174ec8ccdceaaf91810

[nortikin]

fantastic, i have to learn. never saw javascript can build html on user side

[zeffii]

i'll add a markdown parser, so the content doesn't need to be formatted in textform as html :)

[nortikin]

I amazed

[zeffii]

more sketching http://tributary.io/inlet/8f9748503e271a0393fa

[ly29]

Nice progress

[zeffii]

http://sverchok.neocities.org/

See the Manual menu, the content of that is written in markdown and parsed by a js library called "showdown.js". I haven't added the proper styling yet -- it's just a placeholder.

I haven't really written html in 5 years, it's slowly coming back

[zeffii]

Unfortunately showdown.js doesn't parse Github Flavoured Markdown (GFM) , so no tables syntax and code highlighting in triple backticks. Those can be declared as plain HTML mixed into the markdown. Not a big issue, but worth noting

[nortikin]

Now i'm in Russia, dont know how much will follow github and other, preparing for CGevent in Moskow

[nortikin]

I amazed of how possibilities of java script, it is new for me, coding html without d3 is poor, as i see now. But how to link to page in that case? manual link will be just sverchok.cc or something as index is

[zeffii]

@nortikin yes writing html without support of javascript (and templates) is painful. CSS is still annoying. I think the Manual link in the menu should still generate a paragraph or something describing what can be found in the manual, how to inform us about mistakes or missing content - And of course a link to the compiled online / offline versions.

Have a good time at CGevent! I imagine Moskow is an exciting and crazy city.

[zeffii]

something like

Manual

The manual is an essential reference for new and existing users. Each node has at least one page dedicated to explaining what it does, what inputs to use and what kind of output to expect. We are humans and do make mistakes, if you find any node references missing, incomplete, or factually inaccurate please make a [new issue on the issue tracker](). We will act on this information at our earliest convenience.

[Download full documentation archive]() <-- recommended. [Browse documentation online]()

[nortikin]

nice solution with md. Maybe to continue md all pages?

[zeffii]

@nortikin how about I transfer all this to: gh-pages for the project?

[nortikin]

I donno wat is gh-pages. But you can do. I just learning from you now all this and have fun when see result.

[zeffii]

instead of http://nortikin.github.io/sverchok/

[zeffii]

cool. yes I will overwrite that content. It is a special type of branch, which doesn't track the main repository but is related

[nortikin]

yes, remember that page. Cool

[zeffii]

ok done. check again

[nortikin]

working. will update with github

[zeffii]

now we can collaboratively edit the markdown and style the css. not sure how to approach dual language but if you want larger audience, it may be more convenient to show english first?

[zeffii]

I think the javascript (js) is written in a way that lets you understand how it works, if not always i am open to questions

[nortikin]

site has to be stratchable, so for any width of monitor it needs to be same - from left to right nomergin. As Artemiy Lebedev do

[zeffii]

please worry about content first, responsive design to match screen orientation / resolution will come when the content exists

[nortikin]

what with popup areas? Let it be as in old site in css or in java better?

[zeffii]

Popups can almost always be avoided. If we need a popup, let's indicate it via CSS style, the actual popup even (or popup initiated on click) can be triggered and closed via javascript.

[zeffii]

I will fix design / color / css issues when all content is there and grammatically correct english :)

[nortikin]

It is, let me experiment with site. Need stratchable page.

[zeffii]

yes 'responsive' design means the site should respond to window dimensions, perhaps even orientation. I wasn't finished with design and implementation of subpages yet, keep this in mind don't put too much effort into this.

[zeffii]

Let me know when you are ready for me to take over again.

[nortikin]

take over now, will make other content later

[zeffii]

OK. will take a few days to add new code + css + layout and fix language. There may be some changes that you don't agree with but I won't know in advance.

[nortikin]

intrigued

[zeffii]

I am still thinking about these things even though not actively writing code yet. As carpenters say 'measure twice before cutting saves wood`. Where we don't have a real deadline it is not useful to impose an artificial one. I will be busy with this in slow increments for a while.

Next area of concentration will be the Lessons / Magazine / Video heading.

Video

Preferably we respect the visitors and not auto load a connection to youtube without their consent. In practice we do this by putting the video behind an image and only load the video frame when the user actively shows interest in the video. (easy)

Magazine

We should drop this entirely for good reasons. Only very few people care about how much Sverchok is mentioned in media, if you wanted this as a way to reinforce sverchok status.. those with true status never have to remind people of their successes, Other people do that for us.

instead of Magazine links we should make better release notes for major releases and write about features added / improved / fixed bugs new nodes. Write about the things we are really happy with for that release cycle. We can mix images with release cycle notes so as to make things less abstract.

Lessons

Many links on one page is a recipe for weakening the strength of these links. Firstly, I propose a maximum visible set of 5 links per origin . 5 for BlenderSushi and say 'Showing 5 of 25`. This would indicate, there are more but we don't want to overwhelm you with them. Secondly, name-only links to off-site destinations doesn't tell a reader why they should be clicking on these links. Each link should have a paragraph or at least two sentences describing what we think they'll learn from the link. This would be a good place for full .blends instead of Gallery.

Gallery

My intention was to reserve this for larger rendered images, to give an impression of the power of Sverchok. We don't have enough stylish renders, but sverchok is more than capable of generating the geometry to make very cool images.

[portnov]

@zeffii, About content. I think it would be good to add something like "news" - that (in ideal world) should be current news from development, like "wow, look we implemented new cool node!", so people can know what to wait in the next release.

Another thing about design/markup... When I follow links, URL does not change. That's weird. And as far as I understand, it will not work with JS disabled. I wonder how Google or other crawlers will index it?

[zeffii]

@portnov

Another thing about design/markup... When I follow links, URL does not change.

Yeah, keep in mind this is a working mockup with no url routing just DOM manipulation. Not having the URL update bothers me because it also means I can't link directly to a page. Google not being able to index the whole site doesn't bother me, yet

Agreed about news section, or even 'latest news', I have mixed sentiment about keeping old news articles around tho.