A couple of design notes/suggestions

Greetings everyone and Happy new year!

I wanted to write this post for a long time but I didn’t have time to sit down and collect my thoughts. Now that the Any family is getting bigger and we’ve get to see amazing creations from the community, I wouldn’t be so terrible to share some of my thoughts regarding the design of the UI elements here and there.

I believe I have mentioned some of them before here and there in the community but I think getting them all together makes more sense. Plus, this way the other Anytypers can hopefully tune in and add to this list and share their thoughts so that we can have a nice exchange of ideas with the wonderful creators of Anytype. Obviously all of these ideas/notes are not mine alone and I’ve taken inspiration from other PKMs. With that being said let’s dive in and start cooking!

UI elements

I think over the past couple of year new features have being added to Anytype which don’t necessarily have the same design. I think having a consistent design among these would further streamline the UX. Some of them are:

Consistency across the corner radii of UI elements:

As you can see from the images below, the values of the corner radii of the various elements don’t exactly match. It’s most noticeable between elements such as “call outs”, “selection”, “table/set/collection row highlights” and “embeds” which are mostly rectangles and the other elements such as search box, pop-up object UI, card view for objects, etc. which are more rounded. I tried my best to include all UI elements and even bring them in the same screen shot to further contrast the differences and sometimes elements were brought over multiple times.

CleanShot 2024-01-12 at 16.34.45@2x









CleanShot 2024-01-12 at 17.13.55@2x










The choice of color palette in Anytype

I think anytype is much more beautiful than some of the competitors such as Notion which has a dated UI IMO. However, I believe the current color palette need a little update to make it even more modern. Right now, I think Capacities have a slightly better choice of colors for texts and backgrounds. I’m not necessarily suggesting to copy them, but maybe a little tweak would bring a fresh coat of pain to Anytype :heart_eyes:. For reference, these are the color palette in Anytype and Capacities:

CleanShot 2024-01-12 at 17.36.38@2x


Text formatting and styling

Right now we have to choose from either a toggle or a title for example. If we could have a collapsable title, that would be nice. Also, here are some other minor stuff:
a) the option of “justify” for text besides the align options
b) more sizing options when it comes to text. right now we have 4 options ranging from “title” to “text”.
c) having more options for the divider other than a solid line and 3 dots
d) The ability to choose different fonts.
e) Having another option beside changing the entire background of a block. Maybe an option to put a rounded rectangular ring around the block with a custom color.

Sets and Collections

a) being able to change the size of the cards in Gallery view. Right now we don’t have the option to choose custom heights for the card as its size gets determined by the number of shown relations. Also, the height of the cover image is fixed and it results in not showing the picture whether it’s a profile photo or a banner correctly.

b) The same goes for the calendar view. Right now, the height of the cells for each day is fixed. I think being able to manually adjust it or defining a better logic for its size would result in a more beautiful design.

Page layout options and the introduction of “pane”

I think having 4 options for page layouts are awesome. However, I believe that it’s currently underused. For example the difference between “Profile” and “Basic” is basically just the shape of the icon and the fact that it’s slightly larger. I think taking inspiration from Capacities would be a good idea. Here is what Capacities is doing:



I think for Anytype we can deploy the following changes:

  1. Introduce a second side bar on the right; for now I will simply call it “pane”. It would come in handy when we can finally show “local graph view” in it but for now I focus on the layouts.
  2. Make having a banner exclusive to the “basic” option.
  3. Move the “profile” layout’s icon to the pane with a much bigger surface area so that the icon which most likely is a “profile photo” looks nicer and more recognizable with better visibility.
  4. Divide the relations which are favorite between the top of the page and the pane. this way relations such as “text relations” would have more space to fully show their property.
  5. We can choose to show the “link to” relations and “tag” relations for instance to show at the top of the page.

Blocks

Right now if we have multiple blocks besides each other in a horizontal manner, we are locked to the number of columns we put together. Also, all the rows bellow, can’t have more columns. For example, if we have a row with 3 columns, we can’t divide the first column in the second row and we are stuck with 3 columns. I hope the illustration bellow helps my point.

I apologize for it being quite lengthy, but I wanted put all my thoughts in one place. Also, I tried my best to stick to only UI design elements and not go into functionalities and additional features ( maybe a I went little bit with the “pane” but :sweat_smile:).

I would appreciate if the community and also the developers share their opinions and comments.

Cheers everyone :blush:

12 Likes

Pointing out some details, almost all corners do not have continuous curvature, which leads to the corners looking rather awkward visually if they are too large.

1 Like

The radiii doesn’t bother me as much, but I agree with all your other points. Especially color for text and backgrounds that meets Web Content Accessibility Guidelines (WCAG) 2.1.

3 Likes

Hi!
I agree that it looks inconsistent and inaccurate in many places.
But you can’t just pick 2-3 radiuses and implement them. In that case, it would be very technical and boring.

I set out to make another attempt to systematize this. Thanks for your thoughts and such a detailed explanation!

4 Likes

Hello, thanks for reaching out.

my pleasure.

I agree. However, I think some design elements such as the “call out” radius needs some updating in order to make it more modern. :slightly_smiling_face:

1 Like

100%. Blocks in the editor were unified and I created a task for developers.

2 Likes

You’ve captured my thoughts perfectly. Recently, I stumbled upon capacities and, being the curious person I am :joy:, decided to give it a try. Upon exploring its features, I must commend them on their excellent work, especially with the page layout, use of tags, sidebars, wall view (or what I’d call card view), and the multi-window layout. While I’ve opted to stick with Anytype because it ticks all the functionality i need in a PKM system (offline, private, and mobile-support), I’d love to see some of capacities’ features, especially the page layout and tagging system, incorporated into Anytype. Nice work on spotting some of those bugs, and a big thank you to the team—I can’t express my gratitude enough!

3 Likes