Portfolio

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.

Minerva

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. 

About Minerva
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. 

Top app bar on desktop
Top app bar on desktop

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. 

Top app bar on mobile
Top app bar on mobile

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.

Expandable search
Expandable search

On mobile, it is applied by expandable search, so the search bar is expanded when users touch the icon in the top app bar. 

1. Search result category
2. Icon to load the category content
1. Search result category
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.

Search filter for admin site
Search filter for admin site

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. 

Reveal navigation drawer on desktop
Reveal navigation drawer on desktop
Hide navigation drawer on desktop
Hide navigation drawer on desktop
Reveal navigation drawer on mobile
Reveal navigation drawer on mobile

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. 

App bar with shadow
Top app bar with shadow

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.

Top app bar without shadow
Top app bar without shadow

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.

Color theme
Color theme
Additional color

In order to make the data and response of the parties clear, Minerva uses the additional colors. 

Additional color
Additional color
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.

Color for legibility
1. High Emphasis (Menu, Title, Body text)
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. 

Roboto
Roboto
Noto Sans CJK
Noto Sans CJK

Type scale

Minerva’s type scale follows the Material design guidelines. 

Type scale for Roboto
Type scale for Roboto
Type scale for Noto Sans CJK
Type scale for Noto Sans CJK

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. 

Roboto's letterforms
Roboto’s letterforms

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. 

Noto Sans CJK's letterforms
Noto Sans CJK’s letterforms

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.

Minerva's icons
1. Minerva’s icons share the same underlying grid system from Material design
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. 

Minerva's shape categories
Minerva’s shape categories
Minerva's shape components
1. Small components
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.  

Small component
ComponentCategoryAttributeValue
ButtonSmall componentFamily sizeCut 4dp;4dp;4dp;4dp

Medium components

Dialogs, Snackbars have cut corners at 0dp, and menus have cut corners at 4dp. Card have cut 8dp.

Medium component
ComponentCategoryAttributeValue
DialogMedium componentFamily sizeCut 0dp;0dp;0dp;0dp

Large components

Backdrops and Menu drawer have cut corners at 16dp

Large component
ComponentCategoryAttributeValue
BackdropLarge componentFamily sizeCut 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. 

Dialogs
Dialogs

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.

Snackbars
Snackbars

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. 

Text fields
Text fields
Text fields examples
1. Unfilled text 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.  

Chips
1. Baseline for chips
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.

1. Baseline for buttons
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. 

List of cards on desktop
List of cards on desktop
List of comment thread
List of comment thread
List of articles on mobile
List of articles on mobile
List of notifications on mobile
List of notifications on mobile

Cards

Minerva uses a customized outlined card component for the articles. It contains a thumbnail to abstract the contents.

Cards of articles
Cards of articles
Cards of audiobook
Cards of audiobook
Cards of suggestions
Cards of suggestions
Cards of audiobook (Small size)
Cards of audiobook (Small size)


Text editor

Minerva supports flexible text editors for both mobile and desktop when users participate in the service.

Text editor on desktop
Text editor on desktop
Text editor on mobile

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.

Backdrops for audiobook player on mobile

Motion
Navigation transitions

Minerva uses simple fade in and out. Component transitions are just focused on the clear direction going on and coming back.

Navigation drawer

Navigation between pages

Expandable search

Backdrops in the audiobook player

댓글

인기 게시글

[오류해결] KMS 인증(Activation) 오류(error) 0xC004F017 문제 원인 및 해결 방법

[오류해결] 카카오톡 PC 버전 접속 오류(일시적인 장애이거나 네트워크 문제일 수 있습니다. 잠시 후 다시 이용해 주세요. 오류코드 70101, 11002, LL)와 다음(daum.net), 티스토리(tistory.com) 접속 오류(오류코드 DNS_PROBE_FINISHED_NXDOMAIN) 문제