I tried to create a visual difference between the wiki and notes pages using the UI design.
As already stated in the issue , the ui for wikis and notes were same and you can't differentiate between them unless you saw the link.
Right now in the image below, you might not notice the difference I'm talking about, as the position still looks same. But I wanted to state it that from interpretation that I got from the concept of wikis and notes.**
Fig 1 : Wiki -- Fig 2: Note
Notes is more like a documentation of a contributor like me. So i gave it a Roboto font, to give it a common typeface and typography implying easy to read and straightforward thoughts or info.
And In wikis I used a family of serifs, as such fonts are more formal.Readers usually go for more of Serif family for reading then the Sans. I'm still thinking of giving wikis a big font as such thing is impactful.
- I didn't go for fancy UI as wikis and notes are for readers. And they want is simplicity with less distracting fancy UIs.
- Minimal block designs have been used. The notes page have authors beside it on right side, as notes are usually a documentation of authors, So it implies a close relation between the notes and its author. There is swipe section in authors so that we can multiple author too.
- Whereas in wikis, the authors aren't there as anyone can edit the wikis. And here what you care more about is the info in the article.
I've followed the original website. I didn't think of completely redesigning the site as it might cause many breaks but I improved it a little bit.
The comment section in notes is inspired from Github's comment section.
One thing I'm still confused is, I'm not sure that the meaning of wikis and notes that I understood is exactly what it is. :/**
Suggestion from everyone is huge welcome :).
The designs are created by me, So if there is any similar design to this, Do mention it down in comments. I would love to improve.
Since the main focus for outreachy is UI improvements, I'll keep on uploading new ui designs as per my design skills, discussions and feedbacks received on previous designs from the mentors. All the designs are created by me using the figma tool, any resemblance to similar website maybe a coincidence until explicitly mentioned.
cc - GIthub's comment section and illyas blog.