Public Lab Research note

Create a Visual difference in wikis and notes

by lekhidugtal | | 103 views | 7 comments |

Read more:

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: Noteimage description

image description

For comparisonimage description

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.


Research notes are posted by one or two authors for a specific topic which is relevant only for a specific time frame like my call for outreachy proposal is useful only till March 26 and created for outreachy participants.

Wikis, on the other hand, are produced collaboratively by multiple users like a wiki on a country or a city, or gsoc-ideas wiki, etc. Here, community efforts are required to keep the information up-to-date and that's why anyone can edit the wiki(constraint: users which have posted atleast one valid note, etc -- for spam management). Research notes can be edited by author, co-author and admin only.

Reply to this comment...

Thanks for your response @gauravano . So everyone can edit wikis hmmm. I'll remove the author section from wikis. And notes can have multiple authors, so can we have auto sliding for authors one by by one.

Reply to this comment...

Hi, i really like these! It might be interesting for you to skim some of the most recent comments on these posts: for some context about our UI process. But there are lots of nice aspects of your designs that would be great to dig into!

I especially like the profile picture bigger on the notes page mockup, and lots of other small details.

What if the notes/posts stayed with a white background, but the wiki pages had the white block design on a (by default?) light grey background?

Is this a question? Click here to post it to the Questions page.

Reply to this comment...

@warren Thanks for your response. Your idea looks interesting .I'll try my hands out and do some experiments XP. I'll go through the comments. It would be great to dig out some more design trends and user's perspective. It would help me to improve a lot.

Reply to this comment...

Is this what you wanted to say regarding changing notes bg to white and keeping wikis grey as default ?



They look different . I went through all the comments, there are some great ideas in comment section. I'm curious about one thing and wanted to ask. Are you designer ?

Is this a question? Click here to post it to the Questions page.

Reply to this comment...

I've updated the notes ui with rounded edges. And made the button of ask a question on both wiki and notes a litle bit rounded. I went through the comments and realised and even noticed it in current website that public labs follows small rounded edges. But I didn't updated blocks with rounded features in wikis as I tried to make it more sharp along with its font.

Reply to this comment...

Login to comment.

Public Lab is open for anyone and will always be free. By signing up you'll join a diverse group of community researchers and tap into a lot of grassroots expertise.

Sign up