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!
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:
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.
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 . For reference, these are the color palette in Anytype and Capacities:
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.
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.
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:
- 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.
- Make having a banner exclusive to the “basic” option.
- 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.
- 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.
- We can choose to show the “link to” relations and “tag” relations for instance to show at the top of the page.
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 ).
I would appreciate if the community and also the developers share their opinions and comments.