Graphics & UX design

[mudler]

This site is still a draft, starting the issue to discuss a graphic and UX change.

What's the current state:

• respected the links schema of the old site to avoid missing pages
• hugo skeleton for the contents and page visualization
• bootstrap and a minimal theming (design and graphic isn't actually my field of expertize)

Future (Notes also taken from users feedback):

• UI/X Redesign
• A more cool and appropriate color palette
• Jumbotron background image is just horrible && feels so default
• Screenshot gallery (where?)
• More informations about Sabayon
• [...]

State: draft

[wolfden]

Is there any way to do edits to the site via git to edit like the index.html page? Like if I clone this into a testing repo of my own. I don't see away to get to the /public folder to do commits.

index.zip

Here is some changes I did, download the index.zip attached file and rename it to index.htlm since we can't upload html files. I got hugo running here on windows but for some reason it won't update to the changes I make,

Should turn out looking like the jpg attached

[wolfden]

btw I been working on this - http://wolfden.github.io/ I like how that flows

[mudler]

@wolfden wow, the forensic spin site is amazing, can't we apply some of the magic from there?

thanks for your time, i can't open the zip it seems corrupted, but very nice! let me give some clues on the folder structure so you can directly work on this repository:

https://github.com/Sabayon/sabayon-website-next/tree/master/layouts contains the graphic templates of the site, here for example there is the index (which includes other files laying in /layouts) .

Layouts applies to contents, so depending from the type of page, hugo inherits the template from a layout and applies to the markdown/html content
e.g. https://github.com/Sabayon/sabayon-website-next/tree/master/layouts/post
content: https://github.com/Sabayon/sabayon-website-next/tree/master/content/post

while the index is entirely in layout

Have you run hugo server -w ? the -w should instruct to listen on file changes, but i think on windows it can't use libevent and maybe the feature works just on linux. Hugo builds a public/ directory each time, which contains the output of the files that are on the git repos.

[wolfden]

OK, got hugo working properly now. How in the world do you do images than? The public folder has a /img directory. How to get hugo to build the site with new images like .jpg As you can see in the pic the screen jpgs are missing yet.

[wolfden]

oh I think I figured it out, /static/img , augh.... 8:30am, must get to bed

[mudler]

@wolfden w00t!
static content is in the static/ folder of the git repository, images are in https://github.com/Sabayon/sabayon-website-next/tree/master/static/img , in html then you can reference with the relative url: /img/whatever.JPG e.g. https://github.com/Sabayon/sabayon-website-next/blob/master/layouts/partials/navbar.html#L10

[wolfden]

Been plucking away here, Results so far: http://photosbykjs.us/test2/ it has issues with some elements like the buttons, but just wanted to get a base first and than clean up the code issues

[mudler]

@wolfden we could do a dev branch here if that can help, anyway i can't see the preview :(
(you need to set up the baseurl in the config.toml)

[wolfden]

weird, loads for me, but anyway, I have this setup - https://github.com/wolfden/sabayon_site I just ftp up the public contents to my site. You should be able to clone and than run it locally to see it I guess. Dev branch might work better?

edit, yea I see it don't load now... struggling with this hugo stuffs I guess

[mudler]

@wolfden you have to change the base url here: https://github.com/wolfden/sabayon_site/blob/master/config.toml#L1 to match where you deploy the website, so links gets compiled correctly :)

You have permissions for this repo, feel free to push your changes in a dev branch so we can work on that and test! I could also change the wercker file to deploy the dev branch instead of master for testing

[wolfden]

Alright, I will start working in the dev branch. With hugo, it's that darn public folder that throws me off, I wasn't realizing that the config.toml file played a part with that folder, but it makes sense now. I was more or less wanting the ability for you to see what is done and if that works for you. Colors can be changed in the custom.css file. The jumbo tron image can be easily swapped out of course.

I want to change the footer stuff around yet
Debating on the download area of putting some description under the buttons

[mudler]

@wolfden it seems good to me! maybe we need to spend few more words on the Sabayon features (put some light on words that not all people knows e.g. - portage - entropy - package manager and so on)

Ineed, the download area feels "empty"

[wolfden]

Is wercker spitting out the results some place? http://next.sabayon.org/ still shows me the old stuffs. Finally got http://photosbykjs.us/test2/ working right

[mudler]

I just configured wercker to deploy the dev branch instead of master.
I noticed so far:

• Footer titles aren't readable anymore on the pages except index
• Background image is too low quality, on my 1980x1024 monitor it is a bit stretched and pixeled
• indentation markers on the feature list? can't we remove them at all?
• The jumbotron-> navbar gap returned, it is caused by this: 4ecbe5a
  The white gap is a problem just in the index that contains the jumbotron, that's why the style tag was there, in the other pages that doesn't show a jumbotron the gap is fine

Edit: i really like the new footer in the index, can't we use the same style on the other pages?

[wolfden]

I noticed the footer issue on the other pages too, but haven't looked as to why. I focused on index first and I'm not sure why it would of broke it as not much was changed.

Yea I didn't put much effort into the bg image till confirm if it stays or goes, its a pretty small image

Id markers, I assume the round dots, and yes, easily enough to remove.

I was thinking on your earlier comment about words people may not know. How about instead of adding more text, a link instead. For portage they could just click on the word portage and be taken to https://wiki.gentoo.org/wiki/Portage where they could than learn more indepth.

I tried the site out on my 7" tablet and it fits together nicely. The two top buttons (Download and Press Release) on the jumbotron causes the one button to drop down to next line, but isn't a bad thing.

I ran all the index code through html validators and was able to fix a lot of stuff it complained about. It still don't like some things, but it is fine.

[mudler]

Sure, let's focus on the index page then since it is actually the first thing that a person see (and should "capture" him/her)

For the words, sure they could be just links to the wiki or a website page, but the problem is that the wiki sometimes creates much confusion than actually helping understanding things ( 😢 )

Yeah about lint and validation, for now we could also not focus on that since we are just raw-testing and looking for the presentation impact.

For mobile the buttons goes in a column, but there is no much we can do about that, we could also remove the buttons for good, but 1 big download button should be right there (and, not like the old site pointing you to a list of mirrors, which is actually not really accessible to all people)

[wolfden]

lol, well that didn't work, it actually rendered the html code

[wolfden]

Ok the footer on the other pages is getting inside of a div /div and so on the Downloads page:

Choose your Sabayon flavour

notice the font color ^ on the downloads page

The footer is inheriting that font color which makes it hard to see. The footer needs to get moved down so it's out of the div /div but I am not seeing how the downloads page is getting generated

[mudler]

yeah problably is some mispelled tag in the page 🙈 , for the download you can check inside the content/folder: https://github.com/Sabayon/sabayon-website-next/blob/master/content/download.md
it's both HTML and markdown 😄

[wolfden]

@mudler got any feedback on current site? I've only heard from Joost on somethings for feedback. I'm running out of ideas myself.

I like the colors, I find it easy on eyes. It's not bright and loud on they eyes.

I've tried several jumbo tron images, tough choice, but I think the current one blends well.

Content wise - I feel the amount of content does well to give a good idea of what a user is getting into with the external links off the main page a user finds out even more. The Recent Events area is easy to update with news.

[mudler]

@wolfden sorry if you haven't heard nothing from me, i'm a bit busy atm. About the content disposition and layout it looks great to me, for the design (jumbotron image, color palette) i'm asking help to a designer to have some ideas to work on.
Colours: imho dark colours isn't good for accessibility and reading, but don't loose time on it since for color palette/wallpapers i'm going to ask for an external help.

We should focus now instead on content and its disposition. I really like the idea of recent events and few news on the home page (maybe just the head titles?)

[Ryuno-Ki]

Concerning readability/contrast, you could use https://leaverou.github.io/contrast-ratio/.

Concerning accessibility, I'd recommend Tenon. I can help with CSS and JavaScript (I'm earning my living with it).

[mudler]

@Ryuno-Ki thanks for the links, they seems very useful! Ill fix accessibilty issues reported by tenon asap, any help with CSS/JavaScript is always welcome :)

[Ryuno-Ki]

I was looking for that colour analysis tool I've read about recently and found several other articles with products to check out:

• http://ugottalookatthis.com/13-free-color-scheme-and-palette-tools/
• http://mashable.com/2013/01/15/color-scheme-tools/#saRq1eL8bZqc
• http://www.awwwards.com/trendy-web-color-palettes-and-material-design-color-schemes-tools.html
• http://www.creativebloq.com/colour/tools-colour-schemes-12121430
• https://www.shopify.com/partners/blog/69878531-the-ultimate-list-of-online-colour-palette-generators-for-web-design

Of course, I entered next.sabayon.org in some of them:

• http://webcolourdata.com/profile/163446
• http://stylifyme.com/?stylify=next.sabayon.org
• http://www.checkmycolours.com/

In case you want to attract more Front-End contributors, start discussing about the framing the app is running in (ideas: https://github.com/bradfrost/frontend-guidelines-questionnaire and bradfrost.com/blog/post/style-guides)
For example, you noted, that you're using Hugo (that is: Go programming language) for your blog. What about the forums/wiki/package repo? I'm using Sabayon Linux since ~3 years and helped translating a bunch of wiki articles. Any plans about those aspects? I'd like to have a common colour palette.

[Ryuno-Ki]

Ah! Found it!
http://www.cssstats.com/stats?url=http%3A%2F%2Fnext.sabayon.org

Whereby http://www.stylestats.org/ might be easier to gasp.

You could look at Cloud Four's redesign in the open process, too: http://blog.cloudfour.com/redesigning-cloud-four-in-the-open/ (to get an idea what information to gather before deciding on a colour palette or similar).

[Ryuno-Ki]

Since gh-pages branch (to be looked at GitHub.io) was created, I'd suggest, to declare sabayon-website-next-theme as git submodule in order to get it pulled in automagically.

[mudler]

@Ryuno-Ki thanks for the links and informations, it could take a while to me to process all of those informations, and I will came back to you.

Edit: however yes, the idea is to change the design of all the sabayon websites services (packages, forum, wiki, ecc..) but i'm not a designer, so with colour palette/choice i'm pretty stuck

[Ryuno-Ki]

@mudler I met @elioqoshi recently who has some design experience. Maybe I can learn from him about drafting a colour palette (I'm lacking experience their, too).

I've found time to look at the code, yet. Shall I comment on my findings here or open a new issue in order too not lengthen this one?

[mudler]

@Ryuno-Ki cool!

If you found issues or problems that you can solve, you are free to open a PR or open a new issue (or as you said this one will become too long)

[Ryuno-Ki]

I've created a Gist which you can fork to toy around the order of the content. It's the outline of layout/index.html as rendered in the browser.

You should be able to fork the gist (if not - tell me!) to edit it locally.

Once we have settled on the order we can put them back into the template. CSS3 allows for even greater separation of content and style :-) (except you're using Bootstrap 3 …).