YEAR

2022


DELIVERABLES

STRATEGY
BRAND IDENTITY
DESIGN SYSTEM

Streamlining design for consistency and collaboration




Atomic Design Methodology
formulated by Brad Frost, is a methodology aimed at offering guidance for the
intentional construction of interface design systems, emphasizing explicit order and hierarchy



Organisms

As we enter the Organisms stage, our collections of atoms and molecules now become more complex than at the molecular level.


Molecules

are formed through the combination of multiple atoms, each retaining its unique properties within the group, resulting in distinct characteristics for the collective unit.

Atoms

like those in Chemistry, are the basic building blocks in our system. In design, they encompass buttons, inputs, labels, and other small elements used consistently throughout our framework

Organisms



Typography
is a crucial part of our visual language for user communication, alongside elements like color and form. It sets mood, tone, and product perception. We've integrated English, Korean, and Japanese, reflecting our global clientele.



English

Noto Sans
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
1 2 3 4 5 6 7 8 9
Korean

Noto Sans Kr
가나다라마바사아자차카타파하
1 2 3 4 5 6 7 8 9
Japanese

Noto Sans JP
あかさたなはまやらわをん
1 2 3 4 5 6 7 8 9







Color
you choose can mirror your brand's personality, drawing in users and enhancing the communication of your message. Most UI design guidelines emphasize the significance of colors, as they have the ability to establish the fundamental mood, tone, concept, and connotation for a brand or product.








Shadows
contribute to the overall cohesiveness, flexibility, and usability 
of the interface by providing a standardized way to handle 
depth and visual hierarchy within and between components.


Molecules



Button
typically designed as styled links, aim to capture users'
attention and guide them in a specific direction. Buttons
enable the linking to other pages or the completion of tasks,
such as form submissions or online purchases.










Forms
enable users to input text into a user interface, commonly appearing in forms and dialogs. The design of text field components should ensure a clear affordance for interaction, enhancing their discoverability in layouts, efficiency in filling them out, and accessibility.











Notifications
inform users of a process that an app has performed or
will perform. It indicates brief, informative message that appears
when a user interacts with an element in a graphical user interface














Date & Time
  • The Date/Time picker is used with the Selectbox/Dropdown menu.
  • Displays for users to select a date and time and the picker is displayed when the dropdown is clicked. (Not hovered)











Badges
  • It is used with other components and cannot be used alone.
  • Components such as avatars and icons use badges to indicate new notifications.
  • It can be used with just color/numbers/text.









Slider
  • Use to adjust the volume, such as speakers/mics, on the Settings page.
  • Please use it to set a specific range in various situations, such as image/text size and sound setting.
  • There are only two status values, Enabled/Disabled, and no status values when hover.









Chips
are compact, interactive element that represent choices or actions within a user interface. They allow quick selections, filtering options or displaying information in a visually appealing format.








Accordion
is an expandable and collapsible component that organizes content in a space-efficient manner. It allows users to reveal or hide sections of information, making it easier to navigate complex data without overwhelming the interface. Designed for clarity and usability, the Accordion enhances user experience by promoting interactive exploration while maintaining a clean layout.

Atoms



Left Menu & Layout/Grid
The left menu helps users orient themselves within the 
application and provides quick access to various functionalities 
without cluttering the main content area. Grid systems aid in 
creating visually appealing and consistent layouts across different 
screen sizes and devices, enhancing the overall user experience.








Templates
ensure that different sections or pages of an application or website maintain a consistent look and feel. By using predefined templates, designers can adhere to established design standards and guidelines, resulting in a cohesive user experience.







Modal
 is a dialog box that overlays the main content to capture user attention for 
critical interactions or information. It is designed to provide a focused user experience, 
allowing users to complete tasks, confirm actions, or view essential details without navigating
away from the current page. With clear messaging and intuitive controls, the Modal ensures 
users can engage with important content efficiently while maintaining context within the application.





© 2024 Jun Ho Kim. All rights reserved.