With the wireframing process done, we moved on to UI design. The image search screen remained almost the same, with the exception of the images displayed: their size going up for better visualization.
#Notion covers generator#
Since the main purpose of Notion Cover Generator is to create an image, we opted to change the button’s placement to underneath the image, so to not block it by having it be directly on top. We decided to use the two-screen approach, and added its respective “change image” button. The way Notion solves this is by adding a “change cover” button that takes you to a separate image search screen. Notion’s solution for cover image uploading in mobile We went back to Notion in search of answers.
Plus, after placing the image (the website’s main point of focus), we were left with quite a bit of white space at the bottom, rendering the bottom bar pointless.įor that reason, the sidebar controls went to the bottom and we were faced with yet another challenge: where to put the image search?
#Notion covers update#
However, we wanted the flow to be as quick and easy as possible –the less clicks, the better–, and for the users to be able to edit and watch their image update live. It would contain 3 icons representing our 3 main edit categories (image search, text input/customization and background customization). While Notion tends to solve this spacial issue by having the sidebar triggered by a hamburger menu, that was out of the question for Notion Cover Generator.Īt first, a bottom bar was considered. Having less space and going from horizontal to vertical meant a completely different layout was needed. Text and background controls were kept in the side bar, while image search and image display were distributed in the content area. Background customization (adding filters and previewing the actual display size of both desktop and mobile formats).Text input and customization (choosing a font, size, style and color).On top of this, research revealed that this layout is also favored by most image generator/customization websites, such as Canva and Hotpot. Keeping the layout as similar as possible to Notion’s ensured a smooth transition from the app to our website, since users would be already familiar with the position of information categories. The desktop version was very straightforward and its layout mimicked Notion’s –a sidebar to the left and content displayed on the rest of the space. Let’s dive in! Mobile and desktop wireframes 🙂Īfter defining functionality, the first step was to create wireframes to establish information hierarchy and positioning.
The website (now live on beta! 👉 emulates the sleek, minimal design we know and love Notion for, and even though it seems simple enough, it proved a fun, challenging design exercise. The goal: to make a product that allowed users to customize their Notion covers with text. Timeline: 40 days from inception to beta launch! 🚀 Methods: Secondary research, Wireframing, Beta testing Worked on this fun project alongside developer Nick Akey.
0 kommentar(er)
