Message strip appears in-page while the message toast floats and pops in the page just like toasted bread when it's hot (now you know what it is called toast).

Message toast is more obtrusive than the message strip since its purpose is to capture your attention.

Both UI used to display explicit information that requires attention, so used only for an appropriate scenario with a contextual message and proper amount of transition.

Human factors

Human factors we need to consider when designing digital products and applications :

• Cognitive loads
  (thinking, memory)
• Visual loads
  (perceiving, noticing)
• Motor loads
  (keyboard, mouse, pointing)

Modern typeface

We keep hearing ‘modern’ typeface in every design project and discussions, but why these typefaces called modern, and when it was started.

There is no clear-cut definition of what modern typefaces are and how to know one, but there is a deep connection with our history. Most of the modern typefaces were introduced and produced during the 19th century.

19th century is also the time when industrialization and progressive era begun, which contributes to the birth of the modern age of typeface where strengthened serifs rose, and forerunners of modern typeface have emerged. Modern typeface appeared very robust and had more or less neo-classical design features. The development and enhancement of printing technology and computer led to further popularity of modern typeface usage until the dawn of the 20th century.

Why good design?

Before the digital age, the "Modern Design" concept has been used by various industries since the 1930s as a new currency and relevance in the design industry. Until a decade after (WW2), a new program was starting gaining attention and taking its full form, which is called "Good Design". One of the influential pioneers who engage in defining and disseminating Good Design as an artistic movement is the Museum of Modern Art or MoMA - MoMA played a significant role in shaping what we knew about Good Design today. Industries who are actively developing Good Design came from architecture, furniture, and manufacturing.

Good Design founded on the modernist precepts of functionalism, simplicity, and truth to materials. Despite the unwelcome perception of some people towards Good Design, our predecessors have succeeded in forging the connection between Good Design and designers around the world.

Nowadays, Good Design becomes a necessity in every industry and in the world we live in.

4S of UI deliverables

I self-formulate components of UI deliverables for my design consulting. It can also apply when building a design system :

• Standards
• Styles
• States
• Scenarios

5U of the design ecosystem

I self-formulate the ecosystem that makes up the design. 

• User Experience (UX)
• User Interface (UI)
• Usability
• Users
• Us (Designers)

4C when choosing the right UI element

I self-formulate metrics when choosing the right UI. It will help the designers to make better decisions.

• Constraint
• Content
• Conformity
• Composition

AEIOU things that designers being overlooked or ignored:

• Accessibility
• Ethics
• Inclusion
• Optimization
• Usability

3P of reasons why we iterate:

• Pursue
• Pivot
• Purge
  

Humorously, experts tagged Pandemic as another good reason to iterate. I guess the Pandemic is the 4th P of reasons why we iterate.

4P that affects the marketing strategy:

• Product
• Price
• Placement
  
• Promotions

Low-Fidelity (Low-Fi)

• Sketch, drawing, sketch and scanned
  
• Can be interactive via a digital tool
• Tools: Pen/pencil and paper, Marvel, POP
• Characteristics: Rough, draft
• Focus: High-level structure, high-level features, and flow
• Time: For rapid prototyping like 5 mins activity
  

The prototype, in a technical sense, refers to how closely it matches the look-and-feel of the final system.

Mid-Fidelity (Med-Fi)

• Wireframes
• Can be interactive
• Tools: Balsamiq, UXPin
• Characteristics: Black and white/monochrome, Rough
• Focus: Detailed structure (layout and placement), information architecture, and flow
• Time: Moderate timeline

The prototype, in a technical sense, refers to how closely it matches the look-and-feel of the final system.

High-Fidelity (High-Fi)

• Fully-interactive (hotspot, clickable, motion-abled)
• Coded HTML/CSS
• Tools: Invision, Adobe XD, Framer, Sketch app, Figma, After Effects, Principle
  
• Characteristics: Color applied in some areas, detailed/refined
• Focus: Detailed structure, interactions, information architecture, flow, and shallow branding
• Time: Adequate timeline

The prototype, in a technical sense, refers to how closely it matches the look-and-feel of the final system.

6C to consider when seeking a design job:

• Challenges
• Culture
• Compensation
• Competencies
  
• Contribution
  
• Calling

VIDAS : Characteristics of Good Logo Design:

• Versatility
• Impactful
• Distinctive
• Appropriateness
  
• Simple

6T that affects design:

• Tasks
• Teams
  
• Technology
• Tools
• Trades
• Trends
  

Labels 101: Difference between the CREATE and ADD:

CREATE 

something from scratch or non-existence like create a report.

ADD 

Once in existence, you add them into a [container] like adding a user to a group.

Labels 101: Difference between the EDIT, MODIFY, UPDATE, and CHANGE:

EDIT 

can be a container that describes the modify, update, and change because edit can be represented by a pencil/pen icon.

MODIFY 

something you change its properties like quantity, color, size, or tweaking a part of something.

UPDATE 

something you change the data.

CHANGE 

something you replace one existing thing with another.

Labels 101: Difference between the REPLACE, DELETE, CLOSE, CANCEL, and REMOVE:

REPLACE 

something you replace one existing thing with another.

DELETE 

something you wipe it off, so it is no longer retrievable.

CLOSE 

when the user is closing the modal window, after not having performed a firm action.

CANCEL 

this causes pending action, and the user is returned to the state prior to the initiation of the action.

REMOVE

something you take it out of a container, and it still exists somewhere in your database.

In a time of world crisis, we need to plan the 5Ps'.

• Protocols
• Programs
• Policies
• Processes
• Personnel

5Gs of a logo technical documentation:

• Grid
• Gap
• Gritty
• Guides
• Goods
  

Things that designers need to embrace:

• Ambiguity
  
• Complexity
• Chaos
• Emotion
• Friction
  
• Noise

3C when deciding and designing date format:

• CONTENT
  
  • Legal documents:
    
    • Full form (January 15, 2020) - no abbreviations.
  • Non-legal documents:
    
    • Jan 01, 2020 (depends on the usage, the full form is still recommended) is okay since this is writing, we want to remove ambiguity. Writing is all about clarity.
      
      
• CONFORMITY & CONSTRAINT
  
  • UI (when space is limited, especially on complex table UI):
    
    • MM/DD/YYYY or DD/MM/YYYY - depends on where the application will be used or who are the audiences.
      This is also sortable-friendly.
      
      • American colonized: MM/DD/YYYY (ex. the Philippines)
        
      • European colonized: DD/MM/YYYY (ex. Singapore)
        
  • UI (when space is not an issue):
    
    • Jan 01, 2020 (most of the people/interface use this because this is also how we communicate it, which different how computer process it). We used to see the calendar as an object, and we group them months of the current year, like how we use the clock (we communicate hours first).
      
  • Interaction:
    
    • The type of DATE PICKER UI also has a factor like if we were going to use calendar view, dropdown, iOS style, etc. (must consider how the users interact with the UI) As well as the edit and view mode.
      
      
• COMPOSITION
  
  • The use case of an all-numeric and alphanumeric form still depends on the overall composition of the interface - like if the form/container composed mostly numbers/decimals, then it's good to have alphanumeric to create contrast among data.

Apparently, there is a governing standard, but it still challenged for those users who lived in countries that are used to this certain format.

5Ps of Service Design:

• People
• Places
• Processes
• Products
  
• Props
  

Elements of good system design architecture:

• Scalability
• Modularity
• Flexibility
• Configurability

What is the most effective way to check your visual grouping?

Blurring the entire design is the most effective and fastest way to check if you have already achieved the visual grouping. Spaces between the blurred edges indicate that you have the right amount of margin and padding. The length of spaces gives you a better picture of which group of items is together. Blurring can be achieved by flattening or rasterize the design (just don't forget to backup the layered and editable files).

Here are the fundamental rules:

• Think space as gap or margin and padding.
• The bigger the spaces is, the stronger the users perceived it as a group. The smaller the spaces are, the stronger the users recognized it belongs to the same group.

Difference of INBOX and ALERTS in header:

INBOX

• A list of direct and indirect messages from users.
  
• The data are arranged according to a status like unread or read.

ALERTS

• A list of activities and status generated by the system.
• The date is written in an absolute timestamp format.
• The length comes with a short text in a concise format.