Design the look of the Website.

[odysseywestra]

This so far what we discussed about the websites design.

@deevad manage to found backups of it's current theme back in 2011 in mypaint/mypaint#496.

I found in my backup/archives the themes + community screenshot from the 2011 campaign + the visual I made for the page. I put all in a zip here; http://www.davidrevoy.com/XYZ/2015-11-15_mypaint-web.zip

He also suggest we could use this theme and build upon that.

I just browsed a bit the themes. I like the design of the place-holder website you made on http://mypaint.org/ : something white, simple, classic. Maybe http://jekyllthemes.org/themes/fengzhichu-theme/

It looks good so far to me,but when I switch to its mobile navigation menu, it looks really ugly so we'll need to work on that. Like I replied, We'll use a lot of the old assets that @deevad had backups of, and We'll use some screenshots from mypaint/mypaint#149 to give it an updated look.

Here's what @achadwick had to say bout design of mypaint's website on mypaint/website#2

For the look: well, something a bit more modern than the old design would be nice! I'm not a huge follower of site trends, but "modern" seems to mean infinitely scrollable (not paginated), not column-based (normally one), and good for mobile right now.

Maybe use the (easily mocked, but serviceable) "page-sized dark image-background hero section with 2 or 3 white-outline CTA buttons" pattern. Yeah, I know, so generic. Perhaps just trim it down to a page-wide banner with especially awesome artwork (close-up photo of on-screen artwork being painted?) or a slideshow of similar in the index.html template, above the start of the blog posts? Anything to look a bit less corporate :grinning:

There are probably tons of readymades on http://jekyllthemes.org/ that can be adapted. One with strong support for multimedia posts would be best: particularly galleries, but consider that we might do tutorial videos too. It would need to be deployable without plugins, for hosting on github

Content: the default Jekyll theme's split between "pages" and "posts" is good.

Pages should be points of engagement that fire users off into development land, or towards the downloads or online communities relating to MyPaint, as well as basic info. We definitely need a who-we-are page listing out the devs, and probably a glossy what-this-program-is brochure page. IIRC, Krita have an especially good "how can I get involved (with development, site coding, artwork, resources, community building, you name it...)" page.

Posts of course should be development news, links to Things of Interest (e.g. tutorials, new brush packs) and release announcements, and I'll try to keep the blog updated.

And I replied:

Plus with design I'll probably build from one of the themes from the Jekyll site. I'll expand more upon in another issue once we have a set list of what the site needs, but I'll definitely don't want it to feel corporate.

With images if we name them correctly, we could avoid using folders. That's something I could expand upon in the website's wiki for contributors.

From all the information you guys gave, you are looking for a end to end web page, that point's to everything that we have in the community. Basically a portfolio for MyPaint with the front page highlighting the key features. I'll keep in mind both GIMP and Krita webpages as references. If you guys have any ideas for the design for the site, let me know down below.

Also if any artist wishes to have their artwork featured on the website, leave a comment down below with link to the artwork. The artwork also needs to be on at least a CC BY-NC to be compatible to the website.

[achadwick]

Found the article I was trying to remember for design guidelines. It's pretty good, particularly regarding text on images and what it calls B&WF.

• 7 Rules for Creating Gorgeous UI (Part 1, Part 2) by Erik D. Kennedy.

[achadwick]

From jekylthemes.org so far, I like:

• https://github.com/volny/creative-theme-jekyll
• https://github.com/DigitalMindCH/gridster-jekyll-theme (somewhat)
• http://jekyllthemes.org/themes/ion/ (from the thumbnail only, I've yet to play with it)
• http://jekyllthemes.org/themes/personal/
• http://jekyllthemes.org/themes/so-simple/
• http://jekyllthemes.org/themes/agency/
• http://jeromelachaud.github.io/freelancer-theme/

Simpler / less portfolioish?

[Deevad]

They all are ok @achadwick and could all looks perfect with the Mypaint logo/icon on top, and good screenshot/artworks. I didn't checked within this themes list the one the most lightweight, easy to maintain and using less Js or other heavy effect. The simplier, the better, imo :)

[odysseywestra]

@Deevad Yeah, my goal is to use as less js as possible. Keep it simple like you said.

@achadwick With that I've notice, a lot of the of the suggested themes propose for the site are single page style website. It makes the site look unique compared to other art software sites.

I've also notice that a few of them require octopress which is a frame work built on top of Jekyll to make switching themes and posting easier. The downside is that they are in a complete rewrite for v3.0. I would like to avoid using octopress until a stable release comes out. That way we avoid transitioning from v2.0 to v3.0.

In the mean time, I'll test out v3.0 on my own site since I'm transitioning to using gh-pages. That way it will make applying octopress 3.0 easier when a stable release comes out.

Any mockups, and wireframes ideas for the site are welcome.

[odysseywestra]

I found this set of tutorials about building our your own responsive site on youtube. It probably be a good resource to keep handy so I'll link it here for future reference.

[achadwick]

(From mypaint/website-old#7) for timelines, I often see layouts a bit like

on sites and in theme demos with more responsive disclosure (infinite scrolling...). The timeline is usually a summary of a company's or a person's history. The circles enclose screenshots or graphics that emphasise or augment what the text explains.

Circles are pretty and feel friendly. The amount of whitespace in a flow like that is quite appealing too. Would elements like this be easy to do with CSS?

[achadwick]

Whilst on the subject of thumbnails, http://d3js.org/ has some nice non-rectangular thumbnails tiled together, as the 1st thing you see hitting the page. Interesting showcase/gallery design.

[odysseywestra]

I also found this article which may help when we finally design the website. https://moz.com/blog/how-to-write-for-the-web-a-new-approach-for-increased-engagement-whiteboard-friday

[odysseywestra]

@achadwick had an idea for the design of the Get Involve in issue mypaint/website-old#9 .

Thinking about design, I think those headings might (one day, when we have a consistent deaign) collapse to just a matrix of image links all of the same size. If we want to retain the text, we might use a rollover showing a block background image and the header for one state, adding the detail text in the other state.

Each little section might become a block that behaves like the diagram below, and which tiles together with other blocks. rollover

Not to scale, and I don't know how workable it would be without doing it. For now, I'm trying to refine the texts to allow it by making them briefer and more equal in length.

I just wanted to take note of that before I close mypaint/website-old#9

[odysseywestra]

Found an Article about designing a good landing page. I'm posting it here for my reference.

http://www.addthis.com/academy/landing-page-best-practices/?utm_source=addthis&utm_medium=email&utm_campaign=20151216landingpagebestpractices

[daiyi]

Hello! I'm a long-time mypaint user, I just checked out mypaint.org for the first time in ages and saw you were looking for website help. I am just learning how to use design tools so I thought I might give wireframing a shot :D check it out

My goal was to make the design minimal but present information at a glance (similar to the mypaint philosophy :grinning:), linking to detailed pages in each section. The black rectangles at the top and bottom could feature community art, which I think would be fun (: (they can also just be empty for extra minimalism!)

If there's interest in this simple design I've also worked with templating (not in jekyll but they tend to follow similar patterns) so I can work on the site too. I'm also happy to refine based on your feedback.

cheerz \o/

[daiyi]

Oh also! I sneaked a peak at the old lost mypaint.org pages using wayback machine

[odysseywestra]

@daiyitastic Looks like a great start. If you want, you are more than welcome to fork the site and begin experimenting on the design. It's something that we really need to get done this year. I do have a unfinished Wiki that explains a bit.

As you can see above, we do have a few ideas of what we liked design wise. I'm sure @achadwick has a few more ideas for the site. From me, I started a thread on our Community Fourms about what my requirements were. You can also see the issue tracker for this site to get an idea of what we are looking for.

I help you get assets for the site too from Artwork Showcases(We'll need to ask permission first if its not stated) to Screenshots. I'm also working on making mypaint-tan our official mascot. So basically if you need help with artwork, I can help you there.

You can start a Development Thread on our Community Forums if you want feedback from the majority of users of MyPaint.

So basically what I'm saying if you are willing to help design our site, welcome to the MyPaint Community Team. I'll help you in anyway I can.

[daiyi]

Awesome!

It looks from the discussions that ya'll are interested in heavily featuring art from the community in the website. I think this is super awesome, but I would hesitate from this idea from above, as hiding text behind a mousehover is not very accessible. Best to do it in a dedicated gallery, I think!

I've forked the project and started setting up stuff here: https://github.com/daiyitastic/mypaint.github.io (: Just got the jekyll stuff up to date for now and dumped a bunch of info on the splash page! (Don't look at the css writing, it's super bad and I'm embarrassed but I'm just trying it get it out there \o/)

I saw that it's now possible to put jekyll themes into separates repos, and that's how I initially set up the project. However, git submodules are kind of annoying so I merged the theme files back in for now.

[odysseywestra]

Okay I added your fork as a remote on my local machine. If you want, you can add me as an collaborator so I can help out. We'll probably want to add MyPaint's Wiki as a Submodule since I do plan on having as part of the website too.

I guess once the design is finish. We can isolate the theme and make it's own github repo under the MyPaint organization. So then in the end we'll have three different repositories which will be the Theme, the core site, and MyPaint's Wiki.

Then we'll use Travis-CI have it tested and build the static site. It will be either transfered to an independent server, or well just create a new repo and have github pages serve it. That way we can update or change the theme without it messing up the core site itself in the future.

[daiyi]

That sounds like a great setup (three repos, theme/site/wiki)! The way I set up the theme files will make it easy to extract it into its own project :+1:

Also +1 to travis!

I'll get the basic skeleton of the site set up and then refine the typography, then look for art contributions. Do you all have a irc or discord or slack that you hang out in? :D

[odysseywestra]

We do have an IRC channel on freenode at #mypaint that I hang about in the mornings(PST) and late evenings. I'm working on spinning up a mattermost server for the community in general, but I need to get things done on the admin side before I can do that. I also use Telegram a bit too.

[Deevad]

Hey, I saw the link to my old Mypaint webdesign was broken when I reread this thread bumped this morning.

So, I uploaded a new link (hopefully more stable for the coming next years): https://www.peppercarrot.com/extras/forum/2011-webdesign_mypaint-web.tar.gz

[AesaraB]

Hi David, nice to see you around -- it was hard not to see your name while making the new website. Thanks for updating the link