Portfolio - CarTube
CarTube
CarTube is a dedicated video player for the automotive environment. It is developed by native application and Youtube API. Google Material theming based on Android Auto is applied to the app.
About CarTube
CarTube is a video player to watch or listen to YouTube in the car safely. Users who have an unlimited data plan to access YouTube normally use YouTube to listen to the music in the car nowadays.
Simple UI and ease of use
CarTube is designed to the AVN(Auto, Video, Navigation) system, so branding is focused on the bigger appearance like font, components. Drivers don’t have to pay attention to notice the component or content.
CarTube is also designed based on the Bluetooth interface standard to control the UI of the app, so drivers can control the app without the screen touch.
Product architecture
CarTube uses a product architecture similar to other video player apps: a navigation drawer that contains a playlist, a playlist that users chose, and a player to show the content and control settings.
A focus on the static condition
CarTube is a dedicated application to use in the car, so it doesn’t consider portrait mode or multiple layout like responsive layout. Rarely, AVN displays are designed to have a longer ratio, but mostly they are wider ratio, and the screen can’t be rotated.
Navigation drawer
CarTube uses a customized navigation drawer similar to Android Auto.
Drawer organization
Drawer destinations are represented using both icons and text. The top of the navigation drawer incorporates settings, and an account menu. The right arrow in the menu shows if the menu has a child page or not.
Top app bar
CarTube uses a top app bar to launch navigation. The app bar contains a menu drawer icon, title of the playlist or content, and search icon.
Search
CarTube has 2 different search capabilities. In the car, typing search keywords by virtual keyboard is a very poor way to do the task, so CarTube recommends giving a higher priority to voice search when it comes to search capability.
CarTube also supports keyword search, but it is a supportive way, and it can’t show any other layout while the virtual keyboard is on due to the lack of the space.
Layout
Grid system
CarTube uses a responsive grid even if it doesn’t consider portrait mode. There are still lots of different screen ratios, so horizontally the width should be adjusted depending on the device.
Elevation
CarTube uses a divider to create distinction between components. and also use the stroke effect for the floating player on the list. CarTube’s default color theme is a dark theme to prevent the burn-in on the screen of the AVN system. For this reason, shadow is not used for elevation so much.
Color
Color theme
CarTube’s primary color is red, but it is desaturated in the dark theme to meet the accessibility standard.
Saturated primary color can be used for branding or emphasis of the small component.
CarTube’s secondary color is Yellow, but the desaturated secondary color is also used to meet the accessibility standard in the dark theme.
The secondary color is used for the play button and the progress bar in the player.
CarTube doesn’t use pure black for surface color in the dark theme, and uses white colors for the typography in the dark surface.
2. High Emphasis
3. Medium Emphasis
4. Disabled
Scrim color
When navigation drawers appear, CarTube displays a primary colored scrim in front of the rest of app content. The scrim shows the distinction just slightly between drawers and playlist.
Typography
Typefaces
CarTube uses Roboto fonts.
Type scale
All items in the type scale provide more legibility than the variety. The use of type scale is minimized in CarTube, and bigger font size is used more than ever.
Iconography
CarTube takes the approach of using simple, recognizable icons that are not customized. Icon is also bigger than the normal case on mobile like the typography application.
2. A collection of CarTube’s icons
Shape
Categories
Components are grouped into shape categories based on their size. Shape categories let you set multiple component values at once. Shape categories include: Small components, Medium components, Large components.
2. Medium components
3. Large components
Small components
Text buttons have cut corners at 4dp.
| Component | Category | Attribute | Value |
|---|---|---|---|
| Button | Small component | Family size | Cut 4dp;4dp;4dp;4dp |
Medium components
Customized dialogs have cut corners at 16dp.
| Component | Category | Attribute | Value |
|---|---|---|---|
| Button | Medium component | Family size | Cut 16dp;16dp;16dp;16dp |
Large components
Customized menu drawer have cut corners at 0dp.
| Component | Category | Attribute | Value |
|---|---|---|---|
| Button | Large component | Family size | Cut 0dp;0dp;0dp;0dp |
Components
Top app bar
CarTube uses a customized top app bar to make it have more touch area in the car. It is designed to be thicker than a normal one.
Dialogs
CarTube uses customized dialogs. When the drivers make frequent touch events, the app blocks the events and shows the dialogs for a couple of seconds. Based on the regulations, drivers are allowed to touch the phone for an usual case, but watching the video is not acceptable in the country.
CarTube’s dialogs are also bigger than any other dialogs on mobile.
List
CarTube uses a customized list for the menu list in the menu drawer, playlist, and search result. The list is also designed to be thicker and the elements in the list have enough room for the layout.
Menu drawer
CarTube uses a customized menu drawer. It is much wider than the one on mobile. It is inefficient to use the canvas, but it is designed for safety first like Android Auto.
Video controller
CarTube uses a customized video controller. It is inspired by Android Auto, and there are simply 5 controls to play the video.
Floating player
CarTube uses a floating player to continue playing video when users return to the playlist from the player.
Safe driving layer
Safe driving layer is automatically overlaid while the car is driving. It blocks the video screen in the full screen player or floating player. Drivers still can listen to the sound or navigate the app through Bluetooth input or limited screen touch.
Motion
Launch screen
CarTube’s launch screen is simply made by the logo with the blink effect.
Navigation drawer
CarTube uses a customized navigation drawer from the top app bar.
Hierarchical navigation transitions
CarTube uses move-in animation for hierarchical navigation. It shows the transition from the playlist which is the main page to the player. When users come back from the player to the playlist, the floating player is turned on.
Peer navigation transitions
CarTube uses move-in animation for peer navigation. It shows the transition from the home to channel by the menu drawer.
Search sequence
CarTube uses search capabilities by voice or keyboard. It refers to a general search sequence from reference applications.
댓글
댓글 쓰기