Portfolio - Minerva
Minerva
Minerva is a community web service where users debate each other about sensitive issues. Google Material theming is reflected while creating the service in detail.
About Minerva
Minerva is a web service where anonymous users freely debate about sensitive topics like politics, religion, or so on. The service suggests the recently trendy topic. Basically, its content is based on the text.
Minerva is designed to communicate between users, so branding is focused on typographic system, and appearance. It is designed on grayscale for most text content, but it shows the different colors when the opinion is conservative or progressive. If so, users notice which opinion is their party or not in the app easily.
Oriented and hierarchical content
Minerva is a debating service, so users should know which opinion is supporting them or not, and it should show which response is from the thread because the content has a hierarchy like comment thread.
For this reason, Minerva makes an indentation for the content and distinguishes the color for each party.
Product architecture
Minerva’s information architecture is composed of a bulletin service. A bulletin has a category of the articles, and the article has comments. Minerva’s comments are distinguished by the party which users agree or not with the topic in the comment list.
Minerva’s special comment list makes users notice which comments are friendly with their responses, and which comment is replied quickly in the comment list(comment thread).
Navigation drawer
Minerva uses a standard navigation drawer on tablet and desktop, and a modal navigation drawer on mobile. Users can find the navigation icon in the top app bar in order to open the navigation drawer on mobile.
Navigation sections
Navigation sections contain the category of the articles, and users can change the article list to debate.
Hint for the response
Minerva shows the hints for the responses from others, the notification icon indicates there is a response of the article or comment that they made when others respond to that. That minimizes the movement to check the response from where users are in the service.
Top app bar
Minerva contains a navigation icon, brand name, search feature, and profile icon. Mostly, the top app bar shows the title of the article or page, but it doesn’t consider this feature for cross-platform adaptation.
Minerva supports taking a look at the service without signing in, and users know the status if they signed in or not from the profile icon in the top app bar.
When it comes to mobile, the top app bar is applied by the action to hide and reveal while scrolling upward and downward.
Search
Minerva has search features to access what users want to find with persistent search on desktop.
On mobile, it is applied by expandable search, so the search bar is expanded when users touch the icon in the top app bar.
2. Icon to load the category content
Search result is categorized by the content type like articles of debating or audio book content that users can listen to debating history.
For search features, Minerva supports the detailed search for administrators. They can search the content by IP address, or they can also find the content by user ID, or so on.
Layout
Grid system
Minerva is designed to be the cross-platform service, desktop and mobile based on the Web. As you know. Web doesn’t support DP standard for the layout, but Minerva still considered keeping the basic rules and benchmarked some google services by Web.
Of course, Minerva supports responsive layout across the breakpoint. Design pattern for the responsive layout is “Reveal” from Material design guidelines. (This means the navigation drawer is revealed and hidden by the screen size.)
Elevation
Minerva uses shadow to present elevation.
Basically, Minerva applied the shadow to the top app bar, but if the page is transferred to the next page within the different context, the shadow is not applied.
For example, from the list page of the article to the writing page, the shadow of the top app bar in the writing page is not applied because any other features can’t be kept in the top app bar except going back to the page. It is an apparatus to distinguish the context to users by the app bar elevation.
In addition, the shadow is applied to the normal component like navigation drawer, dialogs, and audiobook player.
Color
Color theme
Primary color
Minerva’s primary color is white. It refers to a grayscale color palette by Material design because most content is based on text.
Secondary color
Minerva’s secondary color is purple. When it comes to the debate, there are usually two different parties, conservative or progressive. People notice them by red and blue, and Minerva targeted the neutral color as a service provider, and it shows the vision of the service to users.
Additional color
In order to make the data and response of the parties clear, Minerva uses the additional colors.
Color for legibility
Minerva considers the color for legibility, so opacity of black color is not 100%, and any other text types follow the WCAG standards.
2. Medium Emphasis (Sub title text)
3. Disabled (Disabled button label)
4. Error Text (Validation check text)
Typography
Typefaces
Minerva uses the Noto Sans CJK and Roboto fonts. Noto Sans family font supports the Asian character well to meet the legibility, and Roboto expresses alphabetical character better than Noto Sans.
Type scale
Minerva’s type scale follows the Material design guidelines.
Roboto
Roboto is an official system font for Android, and it is a type of Sans serif. It is specialized in english-like characters. Noto Sans and Roboto always show the best collection in Korean and English.
Noto Sans CJK
Noto Sans CJK is a typeface for Chinese, Japanese, and Korean characters. It is a type of sans serif and mono space. Serif typeface is used for handwriting or government documents, but Sans serif typeface is more common in the web service in Korean.
Iconography
Minerva is not a product to show up a lot of multimedia contents. It prefers to keep the design consistency more, so it uses the functional icons from Google material design. but some icons are changed by the point color, purple, to make sure the status changes like in the bookmark icon.
2. A collection of Minerva’s icons
Shape
Categories
Components are grouped into shape categories based on their size. The category includes small, medium, and large components. These components are designed by Figma, and they are customized or created from official assets of Google material design if there is no specific one from them.
2. Medium components
3. Large components
Small components
Text buttons have cut corners at 4dp, and Icon buttons have cut corners at 20dp. Chips have cut corners at 16dp.
| Component | Category | Attribute | Value |
|---|---|---|---|
| Button | Small component | Family size | Cut 4dp;4dp;4dp;4dp |
Medium components
Dialogs, Snackbars have cut corners at 0dp, and menus have cut corners at 4dp. Card have cut 8dp.
| Component | Category | Attribute | Value |
|---|---|---|---|
| Dialog | Medium component | Family size | Cut 0dp;0dp;0dp;0dp |
Large components
Backdrops and Menu drawer have cut corners at 16dp
| Component | Category | Attribute | Value |
|---|---|---|---|
| Backdrop | Large component | Family size | Cut 16dp;16dp;0dp;0dp |
Components
Dialogs and Snackbars
When Minerva needs users’ confirmation for input action, it uses the general dialogs. General dialogs make the scrim on background. That means users can’t do anything else before they confirm or cancel from the context.
When it comes to just showing the feedback or guide what to do for the feedback in detail, Minerva shows the snackbars, and users can notice what to do or not. Snackbars doesn’t make scrim and users can do what they want when the snackbars is on.
Text fields
Minerva has many types of text fields in the service. Text fields for comment support multi-line text input, and text fields in the form page show the field name above the field when it is selected. If it is necessary to do validation check for regular expressions like date or time. It shows the check result below the field.
2. Filled text field (Placeholder and validation check)
Chips
Minerva uses customized chips for articles from the bookmarked topic. The chip is composed of the icon and text on the desktop service, but it is nested by the only icon on the mobile service. The color of the icon is changed and the snackbar appears when the bookmark status has been changed.
2. Minerva’s chips
Buttons
Minerva uses a text and icon button. It is also nested like chips on mobile. There is not enough room to print out all the text, so it just shows the icon only on it.
2. Minerva’s buttons
Lists
Minerva uses a customized list for search result, article list, audiobook list by cards, and also uses a customized one for comment list and users’ suggestion list by multi-line text. The comment lists can be especially highlighted when other users respond to one’s comment.
Cards
Minerva uses a customized outlined card component for the articles. It contains a thumbnail to abstract the contents.
Text editor
Minerva supports flexible text editors for both mobile and desktop when users participate in the service.
Backdrops
Minerva uses backdrops for the audiobook player. It contains album art and the controls for the player. Backdrops can be minimized by a bottom player bar users drag down the component.
Motion
Navigation transitions
Minerva uses simple fade in and out. Component transitions are just focused on the clear direction going on and coming back.
댓글
댓글 쓰기