Redesign for Docs pages

[KyeMaloy97]

Summary

At the moment, the documentation for Appsody uses a fairly basic styling, which could do with some prettying up, as well as improving legibility and how code snippets appear/function.

Here are some initial screenshots of a potential design for the new collapsible sidebar and content of a doc. Feel free to leave comments or suggestions though on the design!

Mockups

[SueChaplain]

I like the ability to close the side TOC to create more space for the docs. It looks more intuitive to close than to reopen though .... some sort of chevron/tab half way up when it is closed might be something to try?

I like the pink highlighting in all but the inline code snippets, which seem to stand out too much. Perhaps a lighter shade of pink?

Overall, much better than we have today. Good stuff!

[KyeMaloy97]

Here is a tweak I have made to make the pink for the inline code less in-your-face, and also I have moved the tab for opening the sidebar up the page to make it more prominent :)

[KyeMaloy97]

Also, here are some examples of the design on an iPhone X and SE sized display.

[KyeMaloy97]

Updated some of the icons, added a light tint to the code blocks background and shuffled some elements around. Also shows the footer in one of the mockups.

[KyeMaloy97]

Made some more minor tweaks to the design

[KyeMaloy97]

Spoke with Melissa, and she made some suggestions on toning down all the pink and shifting caret positions in the sidebar

[DunnCoding]

Just a few things I've picked up on:

• The copy icon you're using for copying code is different to the one we're currently use for the stack cards on the homepage. We should ensure that the icons we use for copying are consistent as I do believe the new stacks design also uses a different icon to the others we have.
• I feel the pink background you're using for inline code snippets draws the eye more then other elements on the page, it seems more evident now that you've toned the pink down. I'd suggest trying the grey colour you're using for the code blocks, and see how that looks.
• The sidebar closing/opening icon, we need to make sure people know what that icon means in the context you're using it as it's not the typical icon to use especially on mobile where there is no helper text. It makes sense to me, but then I know what it's supposed to do. So it'd be useful to get peoples opinion on it.

Overall though, it is a massive improvement on what's currently there so a great job on this @KyeMaloy97 🎉

[KyeMaloy97]

Here is an example with a grey background matching the code blocks, for the inline code snippets.

As for the icon for copy and paste, mine was a quick example, and I don't mind using a different one to match what we are going to use on the Stacks cards. The icons for the sidebar opening and closing were probably the most fiddly bit as there is no convention for icons, gatsby has one, react has another, etc etc.

Would love to get some feedback on what people make of the icons and whether they understand what they do.

[CameronMcWilliam]

Hi as I'm currently going through the stacks documents on the website, restructuring etc. I can leave feedback on potential design changes. @helenmasters pointed me towards this issue as I thought I preferred the code blocks similar to the ones @ddunn2 implemented on the Kitura website. Coming here the changes look very good so far!

...While I'm here, the mobile sidebar icon isn't immediately obvious to me what it does, I feel like 3 horizontal lines when it isn't displayed and then just an X when to is displayed would suffice. But I've heard that some people have distain towards the classic burger menu icons.

[KyeMaloy97]

I have changed the icons to better suit the conventions users expect. I also have added a mockup with a longer sidebar to show how the sidebar would handle that (when we have lots of topics in it)

[KyeMaloy97]

Perhaps the final design before we go ahead and start splitting the work up and implementing these changes...

[DunnCoding]

Closing this issue as development work as begun based on the last screenshot here.