The journey of #100DaysOfCode (@Darine_Tleiss)

Darine_Tleiss · August 9, 2022, 7:53pm

Hello friends, our success counter, is increasing and with each increment a lot of knowledge, fun and collaboration with the amazing community .

Today is not like everyday, it’s really a special one that means a lot to me , " Community is the foundation to success , Inspired by this quote I’m happy to announce to you that Figma choosed me as a community advocate . Leading and representing the Friends of Figma Community in my lovely country Lebanon .

Really guys, from the first day I joined the community as a Core team member in the Google Developer Student Clubs at my university, moving to serve the GDG & Women Techmakers communities and my aim is to help my fellows, supporting them and facilitating the process for them, so they can start their journey in a smooth way by learning and growing then giving back to the community that helped them one day and everything in this case stay From the community to the community .

My Story with Figma and the UI/UX World

Starting at the age of 15, representing my high school in a Poster Design competition organized at the Lebanese American University, and ending this unforgettable competition with the place, inspired me to start this career by learning and learning without stopping. Filled with consistency and dedication, my friend was Figma doing every project and practicing every new topic, surrounded by amazing family and friends that support me every minute to achieve my dreams.
Today I’m representing this amazing community, aiming to serve more fellows, train and mentor them to the infinity until they reach the success and be able to join the UI UX industry as successful engineer’s.
I promise you all in this new amazing community launched today, a special roadmap that will take you from zero to hero in this amazing world. Join me all and be ready for a funny and knowledgeable journey

> Link : Figma Beirut

WAITING YOU ALL TO JOIN ME

Darine_Tleiss · August 10, 2022, 8:24pm

100daysofcode - Day64

Hello friends, the challenge on fire . Everyday is a new challenge, a lot of new informations are gained. And a daily dose of knowledge is consumed .

Yesterday was a special day where we celebrated the launching of the new Figma community in Lebanon .

Today we will get back to the track, as we will discuss the React conditionals ⁇ and their role.

if Statement

A Javascript operator that we can use to render some components based on a specific condition.
Example

    function Goal(props) {
      const isGoal = props.isGoal;
      if (isGoal) {
        return <MadeGoal/>;
      }
      return <MissedGoal/>;
    }
    
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(<Goal isGoal={false} />);

Logical && Operator

Another way to render conditional content is by using the &&
Any content after the && will render if the condition equates to true
Example

    function Garage(props) {
      const cars = props.cars;
      return (
        <>
          <h1>Garage</h1>
          {cars.length > 0 &&
            <h2>
              You have {cars.length} cars in your garage.
            </h2>
          }
        </>
      );
    }
    
    const cars = ['Ford', 'BMW', 'Audi'];
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(<Garage cars={cars} />);

Ternary Operator : condition ? true : false

The ternary operator is an operator that exists in some programming languages, which takes three operands rather than the typical one or two that most operators use . It provides a way to shorten a simple if else block.
Example

    function Goal(props) {
      const isGoal = props.isGoal;
      return (
        <>
          { isGoal ? <MadeGoal/> : <MissedGoal/> }
        </>
      );
    }
    
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(<Goal isGoal={false} />);

Darine_Tleiss · August 11, 2022, 8:17pm

100daysofcode - Day65

Hello friends, the 65th from this amazing 00 days of code is here, and as everyday a lot of new knowledge and fun are gathered by learning some new topics from this amazing e-world .

Today we will discuss an important topic in react, the styling , and it’s different ways.

Inline Styling

An inline CSS is used to apply a unique style to a single HTML element . An inline CSS uses the style attribute of an HTML element
Example:

    const Header = () => {
      return (
        <>
          <h1 style={{color: "red"}}>Hello Style!</h1>
          <p>Add a little style!</p>
        </>
      );
    }

Keep in mind while dealing with inline styles in react we should use the camelCase syntax to write down the properties with hyphen separators, like background-color to be backgroundColor
Example:

    const Header = () => {
      return (
        <>
          <h1 style={{backgroundColor: "lightblue"}}>Hello Style!</h1>
          <p>Add a little style!</p>
        </>
      );
    }

JavaScript Object

In react we can create an object with styling information, and refer to it in the style attribute
Example:

    const Header = () => {
      const myStyle = {
        color: "white",
        backgroundColor: "DodgerBlue",
        padding: "10px",
        fontFamily: "Sans-Serif"
      };
      return (
        <>
          <h1 style={myStyle}>Hello Style!</h1>
          <p>Add a little style!</p>
        </>
      );
    }

CSS Modules

CSS Modules are convenient for components that are placed in separate files.
The CSS inside a module is available only for the component that imported it, and you do not have to worry about name conflicts.
CSS module are created with the .module.css extension
Example

    my-style.module.css:
    
    .bigblue {
      color: DodgerBlue;
      padding: 40px;
      font-family: Sans-Serif;
      text-align: center;
    }

  Car.js:
  import styles from './my-style.module.css'; 
  
  const Car = () => {
    return <h1 className={styles.bigblue}>Hello Car!</h1>;
  }
  
  export default Car;

Harshit · August 11, 2022, 9:13pm

I just joined! Looking forward to learning Figma and designing from the community!
More power to you!

Darine_Tleiss · August 12, 2022, 8:32pm

Thank you so much for the support

Darine_Tleiss · August 12, 2022, 8:36pm

100daysofcode - Day66

Hello friends a new day is here, the 66th and our journey with react is rocking .

Yesterday we discussed the React conditionals.

Today we will dive more to work with the React lists.

What is a React List ?

Lists are used to display data in an ordered format and mainly used to display menus on websites . In React, Lists can be created in a similar way as we create lists in JavaScript.
To loop through the React list we mainly use the map , in JS

Example:

    function Car(props) {
      return <li>I am a { props.brand }</li>;
    }
    
    function Garage() {
      const cars = ['Ford', 'BMW', 'Audi'];
      return (
        <>
          <h1>Who lives in my garage?</h1>
          <ul>
            {cars.map((car) => <Car brand={car} />)}
          </ul>
        </>
      );
    }
    
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(<Garage />);

List keys

A “key” is a special string attribute you need to include when creating lists of elements in React . Keys are used to React to identify which items in the list are changed, updated, or deleted.
Keys need to be unique to each sibling. But they can be duplicated globally.
The key should be a unique ID assigned to each item. As a last resort, you can use the array index as a key.

Example

    function Car(props) {
      return <li>I am a { props.brand }</li>;
    }
    
    function Garage() {
      const cars = [
        {id: 1, brand: 'Ford'},
        {id: 2, brand: 'BMW'},
        {id: 3, brand: 'Audi'}
      ];
      return (
        <>
          <h1>Who lives in my garage?</h1>
          <ul>
            {cars.map((car) => <Car key={car.id} brand={car.brand} />)}
          </ul>
        </>
      );
    }
    
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(<Garage />);

Darine_Tleiss · August 13, 2022, 8:39pm

100daysofcode - Day67

Hello folks , the 67th from 100 is reaching the end. And our daily dose of fun and knowledge is ready to be shared with this amazing community.

Today we will discuss the React JS form and how to use them in an effective way.

React vs HTML forms

In HTML, form data is usually handled by the DOM. In React, form data is usually handled by the components . When the data is handled by the components, all the data is stored in the component state. You can control changes by adding event handlers in the onChange attribute.

Handling forms in React

In React, form data is usually handled by the components.
You can control changes by adding event handlers in the onChange attribute.
We can use the useState Hook to keep track of each inputs value and provide a “single source of truth” for the entire application.
Example:

   import { useState } from 'react';
   import ReactDOM from 'react-dom/client';
   
   function MyForm() {
     const [name, setName] = useState("");
   
     return (
       <form>
         <label>Enter your name:
           <input
             type="text" 
             value={name}
             onChange={(e) => setName(e.target.value)}
           />
         </label>
       </form>
     )
   }
   
   const root = ReactDOM.createRoot(document.getElementById('root'));
   root.render(<MyForm />);

Submitting Forms in React

You can control the submit action by adding an event handler in the onSubmit attribute for the <form>
Example:

   import { useState } from 'react';
   import ReactDOM from 'react-dom/client';
   
   function MyForm() {
     const [name, setName] = useState("");
   
     const handleSubmit = (event) => {
       event.preventDefault();
       alert(`The name you entered was: ${name}`)
     }
   
     return (
       <form onSubmit={handleSubmit}>
         <label>Enter your name:
           <input 
             type="text" 
             value={name}
             onChange={(e) => setName(e.target.value)}
           />
         </label>
         <input type="submit" />
       </form>
     )
   }
   
   const root = ReactDOM.createRoot(document.getElementById('root'));
   root.render(<MyForm />);

Multiple Input Fields

You can control the values of more than one input field by adding a name attribute to each element.
We will initialize our state with an empty object.
To access the fields in the event handler use the event.target.name and event.target.value syntax.
Example:

     import { useState } from 'react';
     import ReactDOM from 'react-dom/client';
     
     function MyForm() {
       const [inputs, setInputs] = useState({});
     
       const handleChange = (event) => {
         const name = event.target.name;
         const value = event.target.value;
         setInputs(values => ({...values, [name]: value}))
       }
     
       const handleSubmit = (event) => {
         event.preventDefault();
         alert(inputs);
       }
     
       return (
         <form onSubmit={handleSubmit}>
           <label>Enter your name:
           <input 
             type="text" 
             name="username" 
             value={inputs.username || ""} 
             onChange={handleChange}
           />
           </label>
           <label>Enter your age:
             <input 
               type="number" 
               name="age" 
               value={inputs.age || ""} 
               onChange={handleChange}
             />
             </label>
             <input type="submit" />
         </form>
       )
     }
     
     const root = ReactDOM.createRoot(document.getElementById('root'));
     root.render(<MyForm />);

Darine_Tleiss · August 14, 2022, 8:57pm

100daysofcode - Day68

Hello guys , Hope you are all doing great , the day 68 is here

Today we will move on to explore another interesting topic Motion Design

What is Motion Design

Motion design is a very crucial element in making users interactions with a brand’s digital products more intuitive and streamlined.
Motion tells stories. Everything in an app is a sequence, and motion is your guide. For every button clicked and screen transition, there is a story that follow.

Misconceptions about Motion Design

Motion is not a core aspect of the user experience.
That’s not true because motion really does help to tell stories. It helps user to process all the information and understand where they are within the flow.
We can add motion later.
If we don’t think about motion and how motion really helps the usability the product and every type of transition just happened instantly it will be very hard for the user to comprehend what’s actually happening.
Motion is just animation.
Although in a design we have a bit of animation, but it is doing it for the purpose of usability and delight.

Darine_Tleiss · August 15, 2022, 8:15pm

100daysofcode - Day69

Hello friends, day++ and a lot of fun and new knowledge are ready in the new amazing journey of motion design .

Yesterday we introduced this field in a gentle way.

Today we will discuss the role of the motion design in enhancing the UX .

Why is motion design so important?

When the user interact with any product, they might ask one of the following questions
1. What should I do next?
2. Am I done with my task?
3. What’s the most significant feature on this screen?
And asking such questions may uncover opportunities where motion can be used to improve the user’s experience

How motion design can assist in creating a better UX ?

It offers adequate attention between views.
It moves the user’s attention to a specific object and hints at what may likely happen on tapping the screen.
It also provides visual feedback.

How motion design will support the usability ?

Consistency : Does motion behaviour provide consistent and seamless interactions throughout the entire user journey?
Expectations : What does the user expect when he interacts with a UI element, for example, the navigation bar or a button? Does motion support the expected behaviour or does it cause confusion?
Narrative : Are interactions and the triggered motion behaviour linked to a logical sequence that is satisfying the user?
The bigger picture : How do the spatial, aesthetic, and hierarchical attributes of UI elements relate to each other? How do they influence the user’s decisions? How does motion affect the different relationships of individual elements to each other?

Motion design applications

Easing transitions
Engaging micro-interactions
Just-for-fun animations
Demonstrating interactions

Darine_Tleiss · August 16, 2022, 8:49pm

100daysofcode - Day70

Hello friends, a new day is here a lot of new informations are required and our dive in the world of motion design is still running. .

Today we will discuss the first 7/12 principle of motion design, that help us building amazing digital products .

1 Easing

Easing refers to the way in which a motion tween proceeds . You can think of easing as acceleration or deceleration. An object that moves from one side of the Stage to the other side can start off slowly, then build up speed, and then stop suddenly. Or, the object can start off quickly and then gradually slow to a halt.

2 Offset and Delay

When several UI elements move at the same time and speed, users tend to group them together and overlook the possibility that each element may have its own functionality.
Offset and delay creates hierarchy between UI elements that are moving at the same time and communicates that they are related, yet distinct. Instead of complete synchronization, the timing, speed, and spacing of elements are staggered, resulting in a subtle “one after another” effect.

3 Parenting

Parenting links the properties of one UI element to the properties of others. When a property in the parent element changes, the linked properties of child elements also change. All element properties may be linked to each other.
For instance, the position of a parent element can be tied to the scale of a child element. When the parent element moves, the child element increases or decreases in size.
Parenting creates relationships between UI elements, establishes hierarchy, and allows multiple elements to communicate with users at once.

4 Transformation

Transformation occurs when one UI element turns into another. For example, a download button transforms into a progress bar, which transforms into a completion icon.

5 Value Change

Representations of value (numerical, text-based, or graphic) are abundant in digital interfaces, appearing in products ranging from banking apps to personal calendars to eCommerce sites. Because these representations are tied to datasets that exist in actuality, they are subject to change.

6 Masking

Masking is the strategic revealing and concealing of parts of a UI element. By altering the shape and scale of an element’s perimeter, masking signals a change in utility while allowing the element itself to remain identifiable. For this reason, detailed visuals like photographs and illustrations are ideal candidates.

7 Overlay

In 2D space, there is no depth, and UI elements may only move along the X or Y axis. Overlay creates the illusion of foreground/background distinction in the 2D space of UIs. By simulating depth, overlay allows elements to be hidden and revealed according to user needs.

Stay tuned for tomorrow post where we will discover and discuss the rest of the principles

Darine_Tleiss · August 17, 2022, 8:27pm

100daysofcode - Day71

Hello friends, a new day is here, and a lot of fun and new knowledge are coming with it. As everyday our daily dose of informations is ready and the dive in the motion design world is still running .

Today we will continue yesterday post to resume our 12 design principles and master them .

8 Cloning

Cloning is a motion behavior wherein one UI element splits off into others. It’s a clever way to highlight important information or interaction options.
When UI elements materialize within an interface, they need a clear point of origin that links to an element already on-screen. If elements simply burst or fade into existence out of nowhere, users lack the context needed for confident interactions.

9 Obscuration

Picture a frosted glass door. It requires interaction to open, but it’s possible to discern (to some extent) what awaits on the other side.
Obscuration works the same way. It presents users with an interface that calls for interaction while simultaneously revealing a hint of the screen to follow. Navigation menus, passcode screens, and folder/file windows are common examples.

10 Parallax

Parallax is displayed when two (or more) UI elements move at the same time but at different speeds. Here again, the intent is establishing hierarchy.
Interactive elements move faster and appear in the foreground.
Non-interactive elements move slower and recede to the background.

11 Dimensionality

Dimensionality makes it seem as though UI elements have multiple interactive sides, just like objects in the physical world. The behavior is achieved by making elements appear as if they are foldable, flippable, floating, or bestowed with realistic depth properties.

12 Dolly and Zoom

Dolly and zoom allow users to “travel” through UI elements spatially or increase their scale to reveal greater levels of detail.
- Dolly : Dolly occurs when the user’s point of view gets closer to (or further from) a UI element. Imagine a person with a camera walking up to a flower to get a closer shot.
- Zoom : With zoom, the user’s point of view and the UI element remain fixed, but the element increases (or decreases) in size within the user’s screen. Now imagine that the person stays put and uses the camera’s zoom feature to make the flower appear larger.

Darine_Tleiss · August 18, 2022, 8:55pm

100daysofcode - Day72

Hello guys , a new day is here a lot of new informations are required and our dive in the world of motion design is still running.

Today we will discuss what is microinteraction

What is a microinteraction?

Micro interactions have the power to make that experience, much more effective and human.

Microinteractions are contained product moments that are meant for a single use case.

Example on Microinteraction

Checking your notifications: the little pop up that pop up when you have a notification is a micro interaction.
Adding to your cart: the click the feedback that you get and what is happening on the screen.

Benefits of Microinteractions

Help communicate the tone of your brand: Facebook is a great example: the like button and the little subtle animations, when you click them, when you hover over them and select.

The structure of a microinteraction

In order to create an effective micro interaction, there are essentials parts:

Trigger
Rules
Feedback
modes and loops

Darine_Tleiss · August 19, 2022, 8:59pm

100daysofcode - Day73

Hello guys , the day 73 is here, diving more in the amazing world of motion design and specifically microinteractions and their importance .

Today we will explore why microinteractions are so important

In most cases the difference between products we tolerate and products we love are the quality of the microinteractions.

Why are micro interactions so important?

They provide feedback:
if a user is in the middle of a payment process the user need to receive a feedback, if they did not get that confirmation they would be very confused and concerned and they would probably try and contact their costumer service line.
They help prevent errors:
It is always good to prevent errors from happening.
For example when we create an account and we need a password in most cases all the errors show up at the same time when we click on confirm so that is bad UX , what we should do is we need to handle this with inline validation, having this inline validation while it is happening instead of actually forcing the user to click submit is really helpful.
They can create seamless experiences:
We don’t want users to put too much effort into doing the tasks that we want them to do.
Example: swiping interactions allows the user to easily move throughout the list instead of constantly tapping another example is pooling to refresh
They encourage engagement:
Using emotion and design in general makes it possible to form a better connection with your users
Example: heart animation when somebody like something, or a confetti pop when the user does something like reaching a water drinking goal.
We need to tell the user that what they did is so important and huge and we want to celebrate those little moments with people, it could be something as simple as clearing the inbox to something much more bigger and much more celebratory like getting a job that they wanted.
These little animations really bring users back into your product, keep them excited about your product, get them just really to love your product.
They can help communicate the tone of your brand

Darine_Tleiss · August 20, 2022, 8:54pm

100daysofcode - Day74

Hello guys , a new day is here, a lot of knowledge are coming exploring the amazing world of Motion Design.

Today we will discuss what is Feedback and how to receive good feedback.

Receiving feedback

Feedback can be a frustrating part of every project, it may feel like a battle with clients.

Design critiques can turn painful quick when you don't define a process or if egos get in the way.

Why is it important to talk about feedback?

Feedback helps you distance yourself from your designs:
As a designer, you get so connected to your work and may lead to start making some choices that don’t necessarily benefit your users.
Feedback is a nice reminder that design is a craft.
Feedback helps you see your designs from a different perspective.
Feedback will help you grow as a designer:
As a designer you are going to inevitably work with other designers, and those designers may have different opinions, skill levels and experiences.
Listening to their opinions and feedback opens up your mind to new points of view, and it urges you to try new things that you may not have tried.

Feedback gives you new insight and approaches to design, and you will ultimately improve because of it.

There are two types of feedback that can have a significant impact on your design

Constructive:
This will help move the design forward, uncover clues to answering open questions you may have and identify new blockers for your idea of success and can add momentum towards a direction.
Both negative and positive feedback can be constructive.
Destructive:
This will cloud the way your design moves forward, your design can be misled by asking unrelated questions or wasting people’s time by derailing discussions.

How to get good and constructive feedback

Be clear and provide context
Clear goals
Let others know how far along your designs are
Bring up any big questions you want answers too
Invite only the people you need to
Figure out who is mandatory and who is optional in the meeting
Put your attendees to work by feedback generation, Voting, Discussing
Stay on track

Bookmark feedback that isn’t relevant right now and come back to it as a group at a later time

Darine_Tleiss · August 21, 2022, 8:17pm

100daysofcode - Day75

Hello friends , a new happy day is here. The 75th/100 a special day from all its sides. Today we reached the 3rd milestone in our amazing journey aiming to rock it till the 100.

In the other side, Today no learning & no new topics and information. As it was my birthday and I was enjoying my day with the family and friends. Celebrating the old successful happy days and learning the lesson from the bad ones . Believing that our life is limited and our journey on this earth is time bounded, make me a consistent person who aim everyday to make impact, grow and shine to leave a good footprint.

Today a new chapter is opened for me, with the amazing people that surround me, I promise my self and you all, that my new chapter will be filled with happiness, joy and knowledge. Always aiming to help anyone seeking help, and being a true motivator for them.

Darine_Tleiss · August 22, 2022, 8:57pm

100daysofcode - Day76

Hello friends , the first day in our last milestone is already here. So let’s wrap this amazing day with a lot of new information and knowledge.

In Past milestones, we discussed a lot of topics, including JS, CSS3, UI/UX and motion design.

Today we will continue this amazing journey with a new and interesting topic, The Human-Computer interaction and its importance in the user experience.

What is Human-Computer Interaction (HCI)?

Human-computer interaction (HCI) is a multidisciplinary field of study focusing on the design of computer technology and, in particular, the interaction between humans (the users) and computers. While initially concerned with computers, HCI has since expanded to cover almost all forms of information technology design.

The components of human-computer interaction design

The user : In product design, the UX designer works to stay focused on the user, often in the form of a persona. A persona encompasses a group of people with a common goal and a shared set of attributes, needs, and pains that affect their way of accomplishing their end goal. Human-computer interaction methodologies can help designers uncover the mysteries behind the focus groups.
The end goal: A user interacts with an application with the intention of achieving a goal. UX designers should focus on factors such as the complexity of the task, the time spent on achieving the goal, and whether the user reaches the end goal.
The interface: In human-computer interaction, the medium or the interface is a core component. The interface can be on a personal computer, laptop, smartphone, or any other device that accepts input. Designers should focus on factors such as the layout of the application, navigation, input and output, colors, icons, and other graphics when considering the interface.
The context : Describes the actual conditions under which the software system is used** . Determining the context of the system means describing how the software system interacts with the user in normal day to day situations.

The impact of HCI design in UX

Goal-driven design : It holds problem solving as the most important factor in product design. Goal-driven design focuses on making the interactions between the user and the system as smooth as possible when achieving the end goal.
Improved usability: Usable applications create better user experiences. The usability ensures that the user will interact with the application going through the core components such as learnability, efficiency, error rate, and error recovery of the application without getting stressed out.
Positive emotional responses : HCI design can help UX designers create positive emotions through colors, consistent elements, UX animations and interactions.
Put humans first: In product design, designing for the correct set of users is necessary to create meaningful interactions between the computer and the human. Using personas, UX designers can create a delightful experience for their users. Emotions influence designers to create better product behavior.

Darine_Tleiss · August 23, 2022, 8:46pm

100daysofcode - Day77

Hello friends, the 77th day is here, and the daily knowledge dose is ready to be taken. Our counter is incrementing and we are reaching the end very SOON. So let’s run our last days in an efficient way. Yesterday we talked about HCI design and it’s impact in the user experience process. Today we will wrap this topic in an informative way where we will talk about the fundamental principles of HCI design.

The fundamental principles of HCI design

Information processing

Human information processing : humans think the same as computers. The brain processes, calculates, and produces outputs similar to the central processing system of a computer. Human outputs can be verbal, emotional, or physical.
The human as a component : HCI design acknowledges the human as a fundamental element in the design. The whole interaction is centered around the human. The UX designer’s job is to understand the human mind and design the necessary interaction via the computer.

Perception

Color : Color is a core element when designing graphical user interfaces. The color psychology of human-computer interaction is a complex area of study, and the perception of color is based on cultural and societal factors. UX designers should exercise caution when creating color palettes because of these factors.
Patterns : Patterns are vital to HCI design in order to keep the design consistent. Patterns help users create mental models for the interactions that they are making. These patterns help users navigate through the application easily.
Positioning : The positioning of an object on an interface is vital to improve the affordance, understandability, and discoverability of the interaction. UX designers should always focus on making the interactions uncomplicated for the user.

Behavioral models and their types:

Predictive models : Predictive models are used to compare and evaluate motor behavior in the design of interfaces and systems.
Descriptive models : Descriptive models are models of human movement. They are commonly visible in HCI design and ergonomics. They help to predict the time it takes for a user to move to another target to interact with an object.

Darine_Tleiss · August 24, 2022, 7:57pm

100daysofcode - Day78

Hello folks, a new day is here and a lot of informations and knowledge are required to wrap this day in an amazing way. Yesterday we finished talking about Human computer interaction and its key role in the user experience journey. Today we will discover the design systems and their role in the UI/UX journey.

What is a design system ?

A design system is a documented catalog of components and styles used within a product, including how and why each should be implemented . While design systems are often confused with style guides and pattern libraries, a design system is more strategic and high-reaching.
image1400×1352 88.7 KB

Why Use a Design System?

Design (and development) work can be created and replicated quickly and at scale.
It alleviates strain on design resources to focus on larger, more complex problems.
It creates a unified language within and between cross-functional teams.
It creates visual consistency across products, channels, and (potentially siloed) departments.
It can serve as an educational tool and reference for junior-level designers and content contributors.

Why Not Use a Design System?

Creating and maintaining a design system is a time-intensive activity which requires a dedicated team.
It takes time to teach others how to use the design system.
There may be a perception that projects are static, one-off creations, which generally don’t require reusable components.

Elements of a Design System

Design-System Repository
The people who manage it

Stay tuned, for tomorrow post where we will talk about the elements of the design system in deep details expanding each of them

Darine_Tleiss · August 25, 2022, 8:10pm

100daysofcode - Day79

Hello guys Everyday we are exploring more and more in the amazing world of user experience and user interfaces.

Today our post, will be a special one where we will talk and discuss an interesting topic: Children-first design and how we can design and develop products that help our children’s needs by exploring the first 4 characteristics.

A UX design that works perfectly for most people, most of the time, might not work at all well for kids

When it comes to the interface designed specifically for the children, we usually have something like a colorful picture with large buttons before our eyes. In fact, the child needs an interface that takes into account the developmental characteristics at each stage and the set of skills that he possesses at different ages.

1- Colors : Children’s VS. Adults

For adult users, we are trying to find a color scheme that does not distract them from the tasks for which they came to this site.
With children, it’s just the opposite — they came to have fun, and the color scheme is the main visual guide for most of their activities, attracting attention, creating moods and so on.

2- Gestures

Children mostly use simple intuitive gestures such as tap and scroll, and are less capable of complex actions such as swipe or double clicking, which should be taken into account when considering UX.

3- Interaction

Adult users are still ready to wait, but children need an instant reaction and preferably in a game form from the first second of interaction with the interface.

4- User behavior

An adult user can follow the established interface rules. The child will start to click on everything, so UX designers should provide a multi-touch and think ahead of a limited set of options.

Why multi-touch is important ??

Multi-touch is important, because the child often does not notice that he holds the screen with one hand while trying to tap on something at the same time, and for some reason just nothing happens.

Stay tuned for tomorrow post, where we will discuss the rest of the characteristics of a well defined children first interface.

Darine_Tleiss · August 26, 2022, 8:17pm

100daysofcode - Day80

Hello friends , a new day is here and some special content are on the way. As everyday an amazing topic in the world of UI / UX is discovered & discussed.

Yesterday we started talking about the Children-first design characteristics.

Today we will continue our dive to learn more about the rest of them.

5- Perception of graphics and real-life metaphors

Adult users, as a rule, get annoyed and distracted because of excessive graphics
For children the “tangibility” of graphics is sometimes the only way to understand its meaning due to yet undeveloped abstract thinking. Pictures and real-life images should be used wherever possible.

6- Fonts

The font size should be the greater the age of the user deviates to one side or the other from the notional age mid-point, for which we put 10 points. Accordingly, for children and the elderly, we increase the font to 14 points.

7- Animation and sound effects

This is another powerful irritant for adults, which is wonderfully entertaining and pleasing to children. Animated characters that make sounds in response to the little user’s action are a great way to attract and retain the child’s attention.

8- Navigation

The important difference here is that the adult usually starts working with the search, while the child is more likely to operate with the provided bookmarks. In this case, any navigation elements should be large, clearly articulated and, if possible, animated.

9- Visual styling

For adult users, the attempt to mimic the real world may seem excessive; all they need is a simple and accessible mechanics in a convenient form.
For children, the interface should create a mood, be tangible and attractive, contain recognizable examples from real life; especially it’s about nature, such as water, trees and animals.

And now after discussing the rest of the children-first design characteristics, we can mark the topic as done and end our day in an amazing way. Stay tuned for tomorrow post where we will discover another interesting topic in this large e-world