Maybe you were asked to complete twenty fields in one go. You carefully filled everything out, hit Submit — and only then were you told that your password didn't meet some hidden, unspoken requirement. A requirement that was never communicated upfront.

Instead of helpful guidance, you were met with a vague message: “Invalid input." Invalid how, you wonder?

Required fields weren’t marked. There was no real‑time validation. No helpful red outline showing which field was wrong. Just a generic prompt telling you to “go back and correct missing information,” as if you’re supposed to magically know what the system wants.

So you scroll.

You search.

You guess.

And you're now getting frustrated.

The reason you're frustrated is simple: no one enjoys repeating a task they thought they had already completed — especially when the mistakes could've been prevented with clear guidance along the way.

You manage to fill in the form and you tap the Submit button.

Nothing happens.

No loading spinner.

No subtle animation.

No confirmation message.

No success screen.

Just silence. For a brief moment, you’re left wondering: Did it go through? So you tap again. And maybe… one more time.

At this point, you become fed up and you either postpone the signup process to when you have the time, or you may not ever return.

Even if you haven’t experienced this exact scenario, you’ve almost certainly felt the same kind of friction: that moment when a digital interface makes you pause, hesitate, or wonder what you’re supposed to do next.

These frustrations often arise because frontend developers either overlook or are unaware of the essential design principles and theories that underpin a smooth, intuitive user experience.

As a frontend developer, your interface should minimise cognitive load, provide immediate clarity, and guide users effortlessly through every task.

In this handbook, I'll introduce the academic theories that should inform and elevate your frontend decisions.

Table of Contents

• 1.0 Fitts’s Law:

  • 1.1 Use padding wisely

  • 1.2 Use infinite targets

  • Design Takeaway from Fitts Law:

• 2.0 Hick's Law:

  • Design Takeaway from Hick's Law

• 3.0 Gestalt Principles:

  • Key Gestalt Principles:

  • 3.1 Proximity

  • 3.2 Similarity

  • 3.3 Continuity

  • 3.4 Closure

  • 3.5 Figure/Ground

  • 3.6 Common Fate

  • 3.7 Focal Point

  • Design Takeaways from the Gestalt Principles

• 4.0 Von Restorff Effect (The Isolation Effect):

  • Design takeway from Von Restorff

• 5.0 Jakob’s Law

  • Design Takeaway from Jakob's Law

• 6.0 Miller’s Law

  • Design Takeaway from Miller's Law

• 7.0 The Goal-Gradient Hypothesis

  • Design Takeaway from Goal-Gradient Hypothesis

• 8.0 Zeigarnik Effect

  • Design Takeaway from Zeigarnik Effect

• 9.0 Tesla’s Law:

  • Design Takeaway from Tesla's Law

• 10.0 Peak End Rule:

  • Design takeaway from Peak End Rule

• 11.0 Postel’s Law:

  • Design Takeaway from Postel's Law

• 12.0 Doherty Threshold:

  • Design Takeaways from Doherty Threshold

• 13.0 Serial Position Effect (Primacy and Recency):

  • Design Takeaways Serial Position Effect

• 14.0 Occam’s Razor:

  • Design Takeaway from Occam's Razor

• 15.0 Parkinson's Law

  • Design Takeaway for Parkinson's law

• Conclusion

• References

You might wonder what academic theories have to do with frontend development.

The answer is simple. Academic theories aren't abstract ideas. There are the result of rigorous scientific investigation — controlled experiments, validated models, and decades of research into how humans think, learn, perceive, and interact with information.

Because these theories are grounded in evidence rather than opinion, they offer reliable guidance for building interfaces that align with how the human brain actually processes information.

Applying them to frontend development means you're not designing by guesswork or personal preference. Instead, you're applying tested, scientific insights to create clearer, faster, more humane user experiences.

In other words, when you build with academic theory in mind, your frontend becomes more than just visually appealing — it becomes cognitively efficient, behaviourally aligned, and measurably easier for users to navigate.

You can use the following laws and principles to guide your development work. Let’s start by looking at Fitt’s law.

1.0 Fitts’s Law:

Fitts’s law is the brainchild of Paul Fitts. He was among the early psychologists who recognised that many human errors result from flawed design rather than simple human weakness.

During World War II, he studied airplane cockpit layouts and concluded that numerous incidents attributed to pilot error were actually caused by poor design decisions (Hall, 2023; Budiu, 2022).

Here's the formula:

$$T = a + b \cdot \log_2\left(1 + \frac{D}{W}\right)$$

T = Movement Time

D = Distance to the target

W = Width (size) of the target

a, b = Empirically determined constants

Based on his findings, Fitts postulated that the time required to acquire/reach a target is determined by the distance to the target and the size of the target.

Fig 1.0: Illustration of Fitts Law.

From the above, between Target B and Target C, it will be faster to interact with Target C than Target B simply because of the distance (Target B is farther away). Interestingly, though Target A and Target C are at the same distance, Target C will still be faster to interact with and less error-prone because of its larger size.

In simple terms, Fitt’s Law tells us that the time required to move to a target depends on two main factors: the distance to the target and the size of the target. The farther away an element is, the longer it takes to reach. The smaller it is, the more precision it demands, which increases the interaction time and the likelihood of errors.

Conversely, closer and larger targets reduce cognitive load, motor effort, and frustration.

In a nutshell, Fitts’s main message to developers is to reduce the distance users must travel on the screen and to make important buttons large and visually dominant.

Fig 1.1: Showing Call-to-Action buttons are the largest and most visually prominent elements on each screen.

From the image above, you can see that the Call-to-Action buttons on each of the screens are the most visually dominant button and largest in size. They're also placed within the natural region. This makes them faster/easier to interact with.

You should also place your Call-to-Action button within the natural zone. This is a zone on a mobile phone where it's easy to reach with the thumb (as most people use their thumbs to select things on a phone screen). Here's a diagram showing the "natural zone" on a typical smartphone. It's much faster for a user to interact within the "natural zone" than the "hard zone" (see figure).

Fig 1.2: Showing three different zones for buttons placement (natural, stretching and hard region)

1.1 Use Padding Wisely

Fitts' law can be applied to your development by increasing padding wisely. You can also use padding to increase the interactive area. By doing this, you're increasing the size of the targets.

This is important, because imagine a menu that disappears the moment your cursor drifts a few inches away. You’re weren't trying to close it — you simply moved slightly, and suddenly the entire menu collapses. That tiny slip forces you to start the interaction all over again. It’s a small mistake, but it creates a disproportionately frustrating experience.

This happens because the interactive area is too narrow.

That’s why effective padding — or more broadly, generous interactive zones — is essential. By increasing the clickable or hoverable area around a menu, you are increasing the size of the targets, which makes the interaction more stable, more forgiving, and far less cognitively demanding.

This ensures users can move naturally without fear of accidentally “falling off” the target.

1.2 Use Infinite Targets

Another fundamental principle that emerges from Fitt’s Law is the idea of infinite targets. When an interface element is placed at the very edge or corner of a screen, it becomes effectively “infinite” because the cursor can't move beyond the screen boundary. The edge acts as a physical barrier, allowing the user to fling the mouse in that direction without precision or careful aiming.

As a result, corners and edges become the fastest, easiest, and most reliable places for users to access important controls.

This is why operating systems such as Apple’s macOS and Microsoft Windows position their most essential menus and buttons at these locations. The macOS Apple Menu sits in the top‑left corner, Windows historically placed the Start button in the bottom‑left corner, and both systems anchor taskbars, docks, and notification areas along screen edges.

These placements reduce cognitive load, minimise motor effort, and increase interaction speed because users do not need to slow down or correct their cursor movement. The screen itself “catches” the pointer.

In essence, infinite targets transform small interface elements into large, easy‑to‑hit zones simply by leveraging the geometry of the screen.

What this means for you: place your most important and frequently used actions where users can reach them with the least effort. Screen edges and corners act as natural stopping points, meaning users can't overshoot them.

Design Takeaways from Fitts Law:

Place Primary Actions Where the Task Ends:
Placing a submit button at the top‑right forces users to travel all the way back after completing a long form. This increases interaction cost and breaks flow. The best place for a submit button is at the bottom of the form — exactly where the user finishes the task. This aligns with natural reading and interaction patterns.

Keep Related Actions Physically Close:
Separating “Add to Cart” and “Check Out” across opposite sides of the screen forces unnecessary thumb movement. Group related actions to reduce effort and speed up decisions.

Make Primary Targets Large and Visually Dominant:
Your main CTAs (“Subscribe Now,” “Pay Now,” “Create Account,” “Sign Up”) should be the most recognisable elements on the screen. Large, high‑contrast targets reduce errors and improve speed.

Place High‑Value Actions at Screen Edges and Corners:
Edges and corners act as “infinite targets” because the cursor can’t overshoot them. This makes them the fastest, easiest, and most reliable places for critical controls.

A tiny icon in the middle of the screen is hard to hit. The same icon placed at an edge becomes effectively huge because the boundary “catches” the pointer. Also, actions like navigation, primary CTAs, or global controls should live where users can reach them with minimal effort. Avoid burying important actions in the centre of the screen.

Increase Target Size With Generous Padding:
Small interactive zones force users to aim with pixel‑level precision. Adding padding expands the clickable or hoverable area, making interactions easier, faster, and more forgiving.

Prevent Accidental “Fall‑Off” With Larger Hit Areas:
Menus that collapse the moment the cursor drifts slightly create frustration. A wider interactive zone keeps the menu open during natural mouse movement, reducing accidental resets.

Users don’t move perfectly. Interfaces should accommodate slight slips without punishing them. Larger targets reduce cognitive load and eliminate unnecessary frustration. so by increasing the effective size of buttons, menus, and controls, you create interactions that feel stable and predictable, and users can move confidently without fear of losing their place.

To Sum Up: The farther away an element is, the longer it takes to reach. The smaller it is, the more precision it demands, which increases the interaction time and the likelihood of errors. Conversely, closer and larger targets reduce cognitive load, motor effort, and frustration.

2.0 Hick's Law:

Hick’s Law is a psychological principle that describes the relationship between the number of choices presented to a user and the time it takes them to make a decision. It was formulated by William Edmund Hick in 1952 (Yablonski, 2022; Proctor & Scheider, 2018).

The law states that as the number of options increases, the decision time increases logarithmically. In simple terms, more choices slow users down, while fewer choices speed up decision-making.

$$T = a + b \cdot \log_2(n + 1)$$

Where:

T = time to make a decision,

n = number of choices,

b= a constant that depends on the task and the individual

Figure 2.0 illustrates the relationship between user experience, reaction time, and the number of actions.

This is how users feel, for example, when they encounter a form that asks for too much information upfront. The longer the form gets, the more frustrated they become.

Examples of this are overloading menus with too many items, presenting long, unorganised forms, giving too many calls-to-action on one screen, and building nested menus with excessive depth.

All of these create friction and can lead to cognitive overload.

Design Takeaway from Hick's Law

Avoid Overloading Users With Too Many Actions:
Too many buttons, menu items, or choices at once increases cognitive load and slows decision‑making. Users freeze when everything competes for attention.

Keep Navigation Clean and Focused:
Cluttered menus hurt both usability and SEO. Search engines struggle to track overly complex navigation structures, and users struggle to find what matters.

Use Progressive Disclosure to Reduce Complexity:
Hide advanced or rarely used options under “More” or expandable sections. Reveal complexity only when the user needs it.

Break Complex Tasks Into Smaller, Manageable Steps:
Progressive disclosure works beautifully for multi‑step forms and decision flows. Smaller steps reduce overwhelm and improve completion rates.

Group Related Options Into Logical Categories:
Organising actions into meaningful clusters helps users process information faster. For example, placing “Edit” and “Delete” together leverages natural mental grouping.

Video 2.0: Video description of Progressive Disclosure.

From the video above, instead of showing all the menu details at once, it is better to hide them initially. As you can see, the additional information only appears when the arrow down button is pressed. This approach prevents overwhelming the user and keeps the interface clean and focused.

You should also reduce decision anxiety, as too many choices create doubt and friction (as they say, the more you ask from a user, the less you get).

Beyond this, try to use recommended labels, show brief descriptions, provide visual previews, and use comparison tables wisely to show comparison between products especially when they have many characteristics. An example of a comparison table is shown below:

Figure 2.1: A comparison table being used to simplify complex information.

Also, rather than showing advanced configuration options by default, display only the most commonly used settings. Advanced options can be hidden under an expandable section like “Advanced” or “More Settings. This makes your interface less cluttered and more visually organized.

And speaking of visual organization, this is the perfect moment to introduce Gestalt principles — the psychological rules that explain how users naturally group and interpret what they see.

To Sum Up: As the number of options increases, the decision time increases logarithmically.

3.0 Gestalt Principles:

In the 1920s, a group of German psychologists – Max Wertheimer, Kurt Koffka, and Wolfgang Köhlern – introduced what are now known as the Gestalt Principles. Their work sought to understand how humans perceive and interpret visual information (Bustamante, 2023).

The word “Gestalt” is German for “unified whole,” reflecting the core idea behind the theory: people naturally perceive objects as organised patterns and complete forms rather than as separate, disconnected parts.

These principles explain how the human mind structures visual elements to make sense of the world. Over time, they have become highly influential in fields such as design, user experience (UX), psychology, and data visualization, where understanding perception is critical.

Key Gestalt Principles:

3.1 Proximity

Elements that are placed close to each other are perceived as a group, while those spaced far apart are seen as separate. This is why labels are placed directly next to their corresponding input fields.

For example: In a blog feed, the "Title," "Author," and "Date" should have small margins between them (8px), while the space between one blog post card and the next should be much larger (40px). This tells the user's brain: "These three text strings belong to this specific post."

Fig 3:0 Illustration of proximity (Gestalt Principle)

From the fig above, the spacing within the blog feed plays a powerful role in how effortlessly users interpret what they see. When elements sit close together, the brain instinctively treats them as belonging to the same unit. This is why placing the author credit just 8px beneath the title creates an immediate mental link. The viewer doesn’t need to pause or decode who wrote which article; proximity does the cognitive work automatically, forming a tight, intuitive grouping.

Equally important is the generous 40px gap between individual cards. This larger spacing introduces “visual breathing room.” Without it, a feed can quickly collapse into a dense wall of text, overwhelming the user and discouraging exploration. The wider margin establishes a clear boundary—a natural stop-and-start rhythm—that makes each card feel distinct and the entire layout more scannable.

Finally, subtle spacing differences can guide behaviour, not just perception. The slightly larger 12px margin above the read‑more link separates it from the passive information above it. This spacing cues the user that the link represents an action rather than another piece of descriptive text. It’s a small adjustment, but it shifts the element’s role from informational to interactive, helping users understand what they can do next.

Together, these spacing decisions transform a simple list of posts into a structured, intuitive, and behaviourally clear interface—one where the user never has to think about the layout, because the layout is already thinking for them.

Proximity controls meaning: move elements closer to show connection, separate them to show difference.

3.2 Similarity

We naturally group elements that share similar visual characteristics, such as color, shape, size, or orientation.

For example, even if buttons are spread across a page, if they're all the same shade of blue, the user understands they perform similar functions.

If your primary "Submit" button is blue with rounded corners, every other primary action on your site should look exactly the same. If you suddenly use a square red button for a primary action, the user will be confused because the "similarity" is broken.

Fig 3:1 : illustration of similarity (Gestalt principle)

As you can see from above, the layout clearly demonstrates how the Gestalt Principle of Similarity works by showing two different visual situations: one where everything matches, and one where a single element breaks the pattern.

All three product cards share the same visual characteristics:

• Same card shape

• Same border and shadow

• Same image size and placement

• Same blue “Add to Cart” button

• Same font style and spacing

Because these elements look alike, your brain automatically groups them as one category — “products that belong together.”
You don’t have to think about it; the similarity creates instant visual unity.

This is the Gestalt Principle of Similarity in action.

In the second row, everything is still similar except one button:

• The middle product’s button is orange, not blue

• It has square corners, not rounded

• The text is italic, not regular

• The label changes to “Quick Buy”

Because this button breaks the shared pattern, your brain immediately notices it and treats it as different or special.

Developers can use broken similarity to intentionally highlight featured items, promotions, or urgent actions.

When similarity is broken, the different element stands out and draws attention.

3.3 Continuity

The human eye prefers to follow a continuous path or curve rather than jagged or broken lines. We perceive items aligned on a line or curve as being related. This is often used in navigation menus or horizontal carousels to guide the user's gaze.

For example, you might have a horizontal carousel where the last visible card is slightly "cut off" at the edge of the screen. This visual break creates a path that encourages the user to keep scrolling as their eyes follow the line of cards.

Fig 3:2: illustration of continuity (Gestalt principle)

As you can see, all four form fields — First Name, Last Name, Email Address, and Phone Number — are perfectly aligned along one continuous horizontal path. Because the human eye naturally prefers to follow an unbroken line, your gaze moves smoothly from left to right across the fields without effort.

The final field is slightly cut off at the edge, which creates a subtle visual cue that the line continues beyond the visible area. This encourages the user to keep scrolling or swiping, because their eyes are already following the direction of the form.
when elements are arranged along a straight path, curve, or flow, the brain automatically treats them as connected and expects the pattern to continue.

Another example is Instagram Stories, which are arranged in a smooth horizontal line at the top of the app. Instagram reinforces this by slightly revealing the next story circle at the edge of the screen. That tiny “peek” acts as a continuation cue — your eyes expect the line to keep going, so your finger follows.

Fig 3:3: illustration of continuity (Gestalt principle)

As you can see from above, all the circular story icons are arranged in a straight horizontal line, and your visual system instinctively follows that line from left to right without effort.

The slight visibility of the next story at the edge of the screen strengthens this effect, signaling that the sequence continues beyond what's currently shown. Also, because the icons share the same size, spacing, and shape, there are no visual interruptions, allowing your eyes to glide across them in one continuous motion.

This seamless flow is exactly what continuity describes: the tendency of the human eye to follow the direction of a line or pattern, assuming it continues even when part of it is out of view.

Continuity is the tendency of the human eye to follow the direction of a line or pattern, assuming it continues even when part of it is out of view.

3.4 Closure

Closure refers to the mind’s ability to perceive a complete, unified form even when parts of that form are missing. Rather than requiring every boundary, line, or shape to be explicitly drawn, the brain instinctively fills in the gaps. When used intentionally, closure allows interfaces to feel cleaner, more elegant, and more cognitively efficient.

When we look at a complex arrangement of visual elements, we tend to look for a single, recognisable pattern. If an image is missing parts, our brains fill in the gaps to "close" the shape.

One of the most celebrated examples of closure in visual identity design is the panda symbol used by the World Wide Fund for Nature (WWF). This logo demonstrates how strategic omission can produce a memorable, emotionally resonant, and universally recognisable mark.

At first glance, the panda illustration appears simple, composed of a few bold black shapes arranged against a white background.

Yet a closer look reveals that the panda is not fully drawn. There are no outlines defining the body, no complete contours around the head, and no explicit boundaries separating limbs from background. Instead, the designer uses a series of carefully placed shapes (ears, eye patches, nose, and partial limbs) to imply the rest of the animal. The viewer’s mind fills in the missing information, completing the silhouette effortlessly.

This is closure at its most effective: the brain constructs a whole from fragments, creating a sense of completeness without visual overload.

Fig 3:4: illustration of closure (Gestalt principle)

For example, a "hamburger menu" (three lines) isn't a literal drawer, but our brains "close" the shape to understand it represents a menu.

Fig 3:5: illustration of closure (Gestalt principle)

An example of closure in practice can be seen in step indicators commonly used in checkout flows. These components often rely on partial shapes, implied boundaries, and incomplete outlines to guide the user through a sequence of actions.

For instance, upcoming steps may be represented by dashed circles. Although the circles aren't fully drawn, the viewer immediately recognises them as complete shapes. The brain resolves the missing segments, allowing the interface to communicate progression without heavy borders or fully rendered icons. This subtle use of closure reduces visual clutter while preserving clarity.

Closure refers to the mind’s ability to perceive a complete, unified form even when parts of that form are missing.

3.5 Figure/Ground

This principle describes the mind's tendency to separate an object (the figure) from its surrounding area (the ground or background). In web design, using a "modal" or "pop-up" relies on this: by blurring the background, you force the user to see the pop-up as the focal figure.

When a user clicks "Login" on a modal/lightbox, the background site often dims (the "Ground") while the login box stays bright and centered (the "Figure"). This immediate depth change tells the user exactly where their attention belongs.

Video 3.5.0 Video description of Figure/Ground (Gestalt Principle)

From the video above, you can see that when the Quick View button is clicked, the selected figure stands out while the background darkens. This contrast guides the user’s attention and helps them focus on the figure. Developers can use this technique to direct users’ attention to what matters most or to what they want users to notice.

This principle describes the mind's tendency to separate an object (the figure) from its surrounding area (the ground or background).

3.6 Common Fate

Elements that move in the same direction are perceived as more related than elements that are stationary or move in different directions. Think of a dropdown menu: when all sub-items slide down together, they are clearly part of the same "unit."

For example, when you click a FAQ header and five sub-items slide down at the exact same speed and direction, the "Common Fate" tells the user that all those items belong to that specific category. If they flew in from different directions, the relationship would be lost.

Video 3.6.1 Video description of common fate (Gestalt Principle)

Video 3.6.2 Video description of common fate (Gestalt Principle)

From the video shown above, the e‑commerce animation example demonstrates these principles clearly by using two distinct motion patterns: a group of regular products that move upward together, and a pair of special‑category items that enter dramatically from the left. Through these contrasting movements, the interface communicates category differences without relying on text labels or explicit instructions.

Therefore, developers can use this motion‑based differentiation as a design strategy to guide users’ perception—allowing the interface to signal hierarchy, category structure, and product importance purely through animated behaviour rather than through static visual labels.

Elements that move in the same direction are perceived as more related than elements that are stationary or move in different directions.

3.7 Focal Point

Whatever stands out visually will capture and hold the viewer’s attention first. This is essentially the principle of emphasis. A bright "Sign Up" button in a sea of gray text acts as the focal point, directing the user's primary action.

For example, an alert banner or a pricing table should stand out from its surroundings. Beyond this, in a three-tier pricing table (Basic, Pro, Enterprise), the "Pro" column is often slightly larger or a different color. This creates a focal point that draws the eye to the "recommended" option immediately.

Fig 3:7: illustration of closure (Gestalt principle)

In visual interface design, the Gestalt principle of Focal Point plays a crucial role in directing user attention toward the most important element on a screen.

A focal point is created when one element breaks the established pattern of surrounding elements, making it stand out immediately.

In e‑commerce interfaces, this principle is often applied to highlight primary actions such as purchasing, subscribing, or upgrading. The “Buy Now” button provides a clear and practical example of how focal points function within a layout.

From the example above, the first two buttons share the same visual characteristics: neutral colours, and regular weight text. This repetition establishes a visual pattern that the user quickly becomes familiar with.

But the “Buy Now” button intentionally disrupts this pattern. It uses a bright colour, which contrasts sharply with the muted tones of the other buttons. This colour difference alone is enough to draw the eye, as humans are naturally sensitive to changes in hue and saturation within a uniform environment.

The Focal Point may sound like it's similar to the principle of Similarity, but the two operate in completely opposite ways within perceptual psychology.

Similarity explains how the mind naturally groups elements that share visual characteristics – such as colour, shape, or size – into coherent units. Once this grouping is established, the interface gains structure and predictability.

Focal Point, on the other hand, works by intentionally breaking that structure. Instead of reinforcing uniformity, it introduces a deliberate contrast – through colour, scale, brightness, or motion – to draw the viewer’s attention to one specific element.

In other words, Similarity creates the background pattern, while Focal Point identifies the one element that must stand out against that pattern.

Whatever stands out visually will capture and hold the viewer’s attention first.

Design Takeaways from the Gestalt Principles

Use Spacing as Your Primary Grouping Tool:
Elements that belong together should sit closer to each other than to anything else. Spacing communicates structure faster than borders or boxes. Use tight internal spacing (6–12px) for related items and wide external spacing (24–48px) to separate groups.

Build a Strict, Consistent Visual System — and Stick to It:
Define clear rules for button types, text styles, icon sizes, and alignment patterns. Consistent left‑aligned text blocks, predictable carousel lines, and stable flow patterns reduce cognitive load and make interfaces feel trustworthy.

Guide the Brain With Spacing, Alignment, Consistency, Contrast, and Motion:
The human brain is always trying to group, follow, and prioritise what it sees. Your job is to guide that instinct through intentional layout decisions, not fight against it.

4.0 Von Restorff Effect (The Isolation Effect):

This is the brainchild of Hedwig von Restorff, posited in 1933. In principle it states: An item that stands out is more noticable and more likely to be remembered than other items (Hunt, 1995).

So unique or visually distinct elements grab attention and are more memorable – in other words, distinctiveness dictates memory. When a user interacts with an interface, their brain naturally seeks patterns to minimize cognitive effort.

While consistency is generally a virtue in design, a perfectly uniform layout can lead to "banner blindness" or habituation, where the user stops noticing details.

By strategically breaking a pattern through changes in color, size, shape, or spacing, the developer can "isolate" an element, triggering a biological response that flags the item as high-priority.

Note that although the Focal Point principle may initially seem similar to the Von Restorff Effect, they describe two different psychological processes.

Focal Point is a Gestalt visual principle that explains how one element becomes the centre of attention within a composition because it carries the strongest visual contrast – through size, colour, brightness, position, or motion. Its purpose is to guide the viewer’s eye toward the most important element in the layout.

The Von Restorff Effect comes from cognitive psychology, not Gestalt theory. It states that an item that is noticeably different from a group of similar items is not only more attention‑grabbing but also more memorable.

So Focal Point is about where the eye goes first, while the Von Restorff Effect is about what the brain remembers later.

Design takeaways from Von Restorff

Use Isolation to Make CTAs Impossible to Miss:
On a page filled with neutral text and standard links, a single high‑contrast button (like a bold “Primary Blue” or “Emergency Red”) instantly becomes the standout element. This leverages the Von Restorff Effect to pull the user’s eye toward the most important action.

Create a Visual “Hitch” in the Scan Path:
A distinct CTA interrupts the user’s natural left‑to‑right, top‑to‑bottom scanning rhythm. This makes actions like “Buy Now” or “Sign Up” the first thing they notice and the last thing they forget.

Make Critical Actions Visually Distinct:
Because users naturally notice the one element that breaks a pattern, your most important actions should use deliberate contrast — color, size, shape, weight, or motion. Isolate key information instead of letting it blend into surrounding UI noise.

Avoid Over‑Differentiation — or Nothing Stands Out: If every button is loud, animated, or uniquely styled, the interface becomes chaotic. The Von Restorff Effect only works when there is a clear, stable pattern — and you break it once, intentionally.

To Sum Up: An item that stands out is more noticable and more likely to be remembered than other items.

5.0 Jakob’s Law

Jakob’s Law states that users spend most of their time on other sites, so they expect your interface to behave like the ones they already know.

Familiar patterns — hamburger menus, top navigation, search icons, and clickable top‑left logos — reduce cognitive load because users don’t have to interpret anything new.

But while Jakob’s Law is foundational to UX, I think it can also unintentionally suppress innovation.

When developers over‑prioritise familiarity, they fall into a standardisation trap: endlessly optimising conventional patterns instead of exploring fundamentally better ones.

The Pie Menu is a perfect illustration of this. According to Fitts’s Law, the time required to reach a target depends on its distance and size. Linear menus place the last item much farther from the cursor than the first, creating uneven interaction costs.

Radial menus position every option at an equal distance from the centre, and their wedge‑shaped targets effectively grow larger as the pointer moves outward.

Mathematically, pie/radial menu are faster to interact with and more efficient — yet they remain rare in mainstream web design because they violate users’ expectations. In other words, Jakob’s Law keeps us locked into a familiar but suboptimal pattern simply because “that’s how it’s always been done.”

But the challenge is not choosing between familiarity and innovation, but balancing them.

This is where the Aesthetic–Usability Effect becomes powerful. Research shows that users perceive attractive interfaces as easier to use, and they are more forgiving of minor usability friction when the design is visually pleasing.

A beautifully crafted Pie Menu, for example, can encourage users to invest the small amount of learning required to use it. By applying aesthetic delight strategically, developers can introduce innovative patterns without overwhelming users.

The principle that emerges is simple: Be conventional where it matters, and innovative where it delights.

Design Takeaway from Jakob's Law

Keep Trust‑Critical Elements Predictable:
Navigation, search, authentication, and other high‑stakes interactions must follow established conventions. Users rely on these patterns for speed, confidence, and safety — this is where Jakob’s Law should be respected without exception.

Experiment Only in Low‑Risk, High‑Creativity Areas:
In creative or productivity‑focused zones — like editing tools in a photo app — you can safely introduce new interaction models such as radial menus, gesture wheels, or context‑aware tool selectors. These areas invite exploration and benefit from efficiency‑driven innovation.

To Sum Up: Be conventional where it matters, and innovative where it delights.

6.0 Miller’s Law

Miller’s Law originates from George A. Miller’s classic paper “The Magical Number Seven, Plus or Minus Two.” It states that the average person can hold only about 7 (±2) chunks of information in working memory at any given moment (Miller, 1956).

Crucially, Miller emphasised that the brain doesn’t store isolated items — it groups them into meaningful units called chunks. Because working memory is so limited, developers must structure information in ways that respect this cognitive boundary.

This principle has direct implications for interface design. Long, unbroken strings of information overwhelm users, whereas chunked formats are far easier to process.

For example, instead of displaying a phone number as 1234567890, formatting it as 123‑456‑7890 transforms ten digits into three manageable chunks. The same logic applies to navigation: aim for five to nine primary menu items, and if you need more, group them into categories. Users remember the category as a single chunk rather than each individual link.

Miller’s Law also explains why long forms are so intimidating. When a user sees 30 fields on one page, their brain interprets it as a single, massive task — far beyond the 7±2 limit.

A progressive stepper solves this by breaking the form into smaller stages of 5–7 fields each. This reduces cognitive load, creates a sense of progress, and significantly lowers abandonment rates.

The same principle applies to product listings or search results. Expecting users to compare 50 items at once is unrealistic. Instead, provide strong filtering tools so users can narrow the set to a manageable size — ideally within the range their working memory can meaningfully evaluate.

In essence, Miller’s Law reminds developers that humans don’t process information in bulk. They process it in structured, meaningful chunks.

Fig 6.0: Illustrating progressive stepper

In the example above, the interface uses both a progress bar and a stepper to guide the user through multiple stages of a task. After completing the first page and selecting “Continue,” the user moves to the next step, and the progress bar updates accordingly. This creates a clear sense of forward movement and accomplishment.

By breaking the process into smaller segments, the interface prevents cognitive overload. If all the information were presented on a single page, users might feel overwhelmed, unsure where to begin, or discouraged by the sheer volume of work.

A step‑by‑step flow transforms a large task into a sequence of manageable actions, increasing the likelihood of completion.

Design Takeaway from Miller's Law

Respect the 7±2 Working‑Memory Limit:
Users can only hold about seven chunks of information at once. Long, unbroken content overwhelms them, while chunked information is instantly easier to process.

Chunk Information Into Meaningful Units:
The brain doesn’t store isolated items — it groups them. Format data (like phone numbers), menus, and settings into clear, memorable chunks instead of long, flat lists.

Keep Navigation Within 5–9 Primary Items:
If you need more than nine options, group them into categories. Users remember the category as a single chunk, not each individual link.

Break Long Forms Into Smaller Steps:
A 30‑field form feels like one giant task. A progressive stepper with 5–7 fields per step keeps users below the cognitive overload threshold and dramatically reduces abandonment.

Reduce Comparison Load With Strong Filters:
Expecting users to compare 50 products at once is unrealistic. Provide filtering tools that shrink the decision set to something the working memory can actually handle.

Design for Chunked Thinking, Not Bulk Processing:
Humans don’t process information in bulk — they process structured, meaningful groups. Interfaces that respect this limitation feel lighter, faster, and more intuitive.

To Sum Up: A step‑by‑step flow transforms a large task into a sequence of manageable actions, increasing the likelihood of completion.

7.0 The Goal-Gradient Hypothesis

This is the perfect moment to introduce the Goal‑Gradient Hypothesis, originally proposed by behaviorist Clark Hull in 1932 (Yablonski, 2022). The hypothesis states that people become more motivated as they get closer to achieving a goal. In other words, users naturally accelerate their engagement when they sense they are nearing completion.

This principle is incredibly powerful in UX design, especially for progress tracking, gamification, and reward systems.

The takeaway is straightforward: Because users are more motivated near the finish line, progress indicators should be prominent and meaningful.

Percentages, progress bars, and step counters reinforce momentum. Micro‑achievements — such as badges, checkmarks, or subtle confetti — amplify motivation by celebrating small wins.

Tasks should be broken into measurable milestones so users can see themselves advancing.

This is why e‑learning platforms display messages like “You’ve completed 8 of 10 lessons — almost there!” and why fitness apps highlight progress with prompts such as “3 km done, 2 km to go.” These cues leverage the goal‑gradient effect to keep users engaged, energized, and eager to finish.

By combining progressive steppers with clear progress feedback, developers create interfaces that feel lighter, more encouraging, and far more motivating — ultimately improving completion rates and overall user satisfaction.

But what happens when a goal isn't completed? Why do we sometimes feel uncomfortable leaving things unfinished? That discomfort is explained by another psychological principle called the Zeigarnik Effect — the tendency for people to remember and feel tension about incomplete tasks. We will look at this next.

Design Takeaway from Goal-Gradient Hypothesis

Make Progress Visible to Boost Motivation:
According to the Goal‑Gradient Hypothesis, users naturally speed up as they sense they’re nearing completion. Prominent progress bars, percentages, and step counters tap into this instinct and keep momentum high.

Celebrate Micro‑Achievements to Reinforce Engagement:
Badges, checkmarks, subtle confetti, and “step completed” cues reward small wins. These micro‑rewards amplify motivation and make long tasks feel lighter and more achievable.

Break Tasks Into Measurable Milestones:
Users stay motivated when they can see themselves advancing. Divide complex flows into clear steps so progress feels tangible rather than overwhelming.

Use Progress Feedback to Drive Completion:
Messages like “8 of 10 lessons completed — almost there” or “3 km done, 2 km to go” leverage the goal‑gradient effect to energise users and pull them toward the finish line.

Combine Steppers With Clear Feedback for Maximum Impact:
Progressive steppers paired with strong visual feedback create interfaces that feel encouraging, structured, and motivating — dramatically improving completion rates.

Video 8.0 : Video illustrating goal gradient

To Sum Up: People become more motivated as they get closer to achieving a goal.

8.0 Zeigarnik Effect

The Zeigarnik Effect is a psychological principle stating that people remember unfinished or interrupted tasks better than completed ones (Cherry, 2024).

Memory begins with sensory input, which is processed into short-term memory. Unfinished tasks persist in our thoughts, leading to active recall. This ongoing engagement can turn them into long-term memories, enhancing recall until resolved. This increases engagement, encourages task completion, improves retention, and drives conversions.

So because people remember unfinished tasks better than completed ones (Zeigarnik Effect), developers use progress indicators to make users aware that something is incomplete and motivate them to finish it.

In your designs, you can break long forms into multi-step processes to encourage completion and display profile completion percentages (for example, 70% complete) to push users toward 100%.

This is the main reason why e-commerce platforms send abandoned cart reminders to bring users back to complete their purchases. It's also why apps use streak systems to encourage daily engagement and habit formation and learning platforms show course completion bars to motivate users to finish modules.

Design Takeaway from Zeigarnik Effect

Unfinished Tasks Stay Active in Memory — Use That to Drive Completion:
Because incomplete tasks linger in working memory (Zeigarnik Effect), users naturally keep thinking about what they haven’t finished. This tension boosts recall, engagement, and the likelihood of returning to complete the task.

Make Incompleteness Visible With Progress Indicators:
Progress bars, percentages, and step counters remind users that something is still unfinished. This gentle psychological pressure motivates them to continue until the task is complete.

Break Long Flows Into Multi‑Step Processes:
A massive form feels overwhelming, but a stepper with smaller chunks keeps users moving. Showing “70% complete” nudges them toward finishing the last stretch.

Use Reminders to Re‑activate Unfinished Intent:
Abandoned cart emails, streak reminders, and “continue your lesson” prompts work because the unfinished task is already active in the user’s mind. The reminder simply pulls them back into the loop.

Celebrate Completion to Close the Cognitive Loop:
Checkmarks, confirmations, and completion badges give users closure. This resolves the mental tension created by the unfinished task and reinforces positive behaviour.

To Sum Up: Unfinished tasks persist in our thoughts, leading to active recall.

9.0 Tesler’s Law:

This law was proposed by Lawrence Tesler. He was a computer scientist known for his work on human-computer interaction, and he contributed significantly to making software more user-friendly, including work on cut, copy, and paste functionality.

This law is otherwise known as the Law of Conservation of Complexity. The core Idea here is every process has a certain amount of “inherent complexity" that can't be removed. You can only decide who handles it: the user or the system.

Some examples of these inherent complexities might be:

• translating user actions into correct operations behind the scenes,

• handling unreliable or slow network connections,

• connecting with third-party APIs, services, or legacy systems,

• sorting large datasets quickly,

• performing complex search operations

• managing version changes and compatibility issues,

• managing state, interactions, and animations without confusing the user.

All of these can be inherently complex, but it's the job of the developer to deal with the complexity.

As a developer, you should always try as much as possible to push complexity to the system. For example, instead of making a user type their full address manually, use an Auto-complete API (Google’s Places and Map is best for this). The complexity of finding and validating the address still exists, but the software handles the work for them.

Here's a practical example: let’s say you're designing a student platform that requires users to enter their university name. A practical approach would be to store an array of all universities in the UK in your codebase (This is the hard part Tesla hinted at).

As the user types, they don't need to enter the full name, and their full university name is shown (relating to what they have typed). For instance, if they intend to type “University of Sheffield,” simply typing “Sheff” should prompt the system to display the full university name, which they can then select.

In Dart, you can use a package like fuzzysearch to implement this kind of intelligent matching.

The advantage of this approach is greater than it first appears. It improves data consistency because users often enter the same information in different ways. For example, some users might type “Uni of Sheff,” others “Sheffield University,” and others “Uni of Sheffield,” while all are referring to “University of Sheffield.”

This is how messy data is created, and it creates more work for data analysts. Little wonder that data analysts spend up to 70% of their time cleaning data.

If developers invested more time in structuring how data is collected to ensure consistency, there would be far less work downstream for analysts. This same logic should be applied in how we collect date, time, and other information.

So apart from people's names and email addresses, you should try to standardize the data your app collects as much as possible. Use date and time pickers, stepper controls, input masks, checkboxes, dropdown menu and radio buttons, toggle switches. and so on.

The essence of removing complexity from the user is not only about improving usability, but also about ensuring that the data collected is standardised, structured, and consistent.

Design Takeaway from Tesler's Law

Push Complexity to the System, Not the User:
Every process contains unavoidable complexity. Your job is to handle it behind the scenes so the user experiences the simplest possible interaction.

Automate Tasks Users Shouldn’t Have to Think About:
Use tools like autocomplete, fuzzy search, intelligent defaults, and validation APIs to remove manual effort. The complexity still exists — but the system absorbs it instead of the user.

Standardise Inputs to Prevent Messy Data:
Users enter the same information in wildly different ways. Use pickers, dropdowns, input masks, radio buttons, and toggles to enforce consistent, structured data collection.

Handle Inherent Technical Complexity Internally:
Network issues, API quirks, large dataset sorting, search optimisation, state management, and animation logic are all developer responsibilities. Users should never feel this complexity.

To Sum Up: Every process contains unavoidable complexity. Your job as a developer is to handle it behind the scenes so the user experiences the simplest possible interaction.

10.0 Peak End Rule:

In 1993, Daniel Kahneman, Barbara Fredrickson, Charles Schreiber, and Donald Redelmeier invited volunteers into a lab for what sounded like a simple experiment. The task was straightforward: place a hand into a container of painfully cold water (Kahneman et al., 1993)

In the first round, participants kept their hand in 14°C water for 60 seconds. It was uncomfortable, sharp, and unpleasant but after one minute, it was over.

In the second round, they again endured 60 seconds in 14°C water. But this time, they were asked to keep their hand in for an extra 30 seconds. The temperature was raised slightly to 15°C. Still cold. Still unpleasant. Just slightly less intense.

Objectively, the second experience was worse. It lasted 90 seconds instead of 60. More total pain. More suffering.

Later, the researchers asked a simple question:

If you had to repeat one of the trials, which would you choose?” Surprisingly, most participants chose the longer one.

Why would anyone choose more pain?

The researchers realised something profound: people don’t remember experiences by calculating total discomfort. Instead, the mind summarizes the experience using just two key moments — the most intense point (the peak) and the final moment (the end).

In both trials, the peak pain was the same: 14°C. But the longer trial ended slightly better, at 15°C. That small improvement at the end reshaped how the entire episode was remembered. The participants’ “experiencing self” suffered more during the longer trial. But their “remembering self” preferred it because it ended on a less painful note.

From this, the researchers introduced what became known as the Peak–End Rule: we judge experiences largely by their most intense moment and how they finish, not by how long they last.

Since people largely judge an experience by how it ends, developers should focus on designing satisfying confirmation screens and smooth exit interactions. You should concentrate less on making every single moment perfect and instead prioritise optimising the peak and final moments.

A negative ending can overshadow an otherwise good experience, so carefully avoid frustrating final steps such as unexpected fees or confusing confirmations.

Emotional intensity strongly shapes memory, which is why many apps incorporate celebration animations, rewards, or success messages at key moments to leave a lasting positive impression.

Design takeaway from Peak End Rule

People Judge Experiences by the Peak and the Ending — Not the Total Duration:
Users don’t remember every moment. They remember the most intense point and how the experience ends. A slightly better ending can completely reshape how the entire interaction is remembered.

Prioritise Strong, Positive Endings in Your UX Flows:
A smooth final step, a clear confirmation, or a satisfying success screen leaves a disproportionately strong impression. A bad ending can overshadow an otherwise great experience.

Design for Emotional Peaks at Key Moments:
Celebration animations, rewards, checkmarks, and success messages create memorable emotional spikes. These peaks anchor the experience in the user’s memory.

Don’t Try to Perfect Every Moment — Perfect the Right Moments:
Optimise the peak and the end of the journey. These two moments define how users recall the entire interaction.

Avoid Negative Surprises at the Finish Line:
Unexpected fees, confusing confirmations, or friction at the last step can ruin the memory of the whole process. Protect the ending carefully.

To Sum Up: We judge experiences largely by their most intense moment and how they finish, not by how long they last.

11.0 Postel’s Law:

Jon Postel’s famous principle – “Be conservative in what you send, be liberal in what you accept” –  is a philosophy of kindness in software design. At its core, the principle argues that systems should be generous with what they accept from users, yet disciplined and predictable in what they output.

When developers follow this approach, users feel supported and understood. When they don’t, users feel punished for being human.

A user’s input is rarely perfect. People type quickly, make mistakes, follow their own habits, or rely on formats familiar to them. A robust system embraces this reality. It accepts messy, human input and quietly transforms it into clean, standardized data.

Real people don't think in strict formats. They write dates the way they learned in school, type phone numbers the way they say them aloud, and enter names and addresses in whatever structure feels natural to them.

A rigid system will reject anything that doesn’t match its narrow expectations, but a robust system, by contrast, adapts to the user.

Consider dates. A brittle interface might demand MM/DD/YYYY and reject everything else. A more humane system accepts a wide range of formats — “1 May 2024,” “2024‑05‑01,” “05/01/24,” or “May 1st, 2024” — and quietly converts them into a standard internal representation. This is where the complex handling described by Tesla's Law comes into play (Shifting complexity to the system, rather than the user).

Phone numbers follow the same pattern. People might enter (555) 123 4567, 555‑123‑4567, 5551234567, or +1 555 123 4567. A fragile system throws errors. A robust one parses all of them using libraries like libphonenumber and moves on.

Addresses are equally varied. “221B Baker St,” “221‑B Baker Street,” and “221 Baker St., Apt B” all refer to the same place. A forgiving system normalizes these instead of rejecting them.

Even names can be surprisingly complex. Hyphens, apostrophes, multiple words, and titles are all part of real human identity. Rejecting “O’Connor,” “Jean‑Luc,” or “Dr. Sarah Lee” is not just technically incorrect — it's disrespectful to the user.

Search bars offer another clear example. A strict search bar demands perfect spelling and exact phrasing. A robust one handles typos (“restuarant”), partial words (“resta”), synonyms (“food places”), and natural language (“where can I eat nearby”). It meets the user where they are instead of forcing them to think like a machine.

Currency should be normalized to a clear format such as GBP 5.00, no matter whether the user typed “£5,” “5 pounds,” or “5 GBP.”

Even file uploads benefit from standardization: whether the user uploads .jpeg, .jpg, .JPG, or .JPEG, the system should store everything as .jpg.

Error messages follow the same principle. Vague feedback like “Invalid password” leaves users confused and frustrated.

A clear, conservative message — “Incorrect password. Please try again.” — respects the user’s time. And instead of hiding password requirements, the system should state them upfront: minimum eight characters, at least one uppercase letter, at least one number.

Predictability reduces friction.

Because users inevitably make mistakes or enter data in unexpected ways, developers should design input fields that are tolerant rather than brittle. This means accepting flexible formats, offering autocorrect or intelligent parsing, and using forgiving validation rules that interpret the user’s intent instead of rejecting their effort.

Clear instructions, tooltips, and visible requirements should appear before submission so users understand what the system expects without trial and error.

When errors do occur, the interface should handle them gently—never crashing, and never forcing the user to start over.

Even simple variations, such as phone numbers typed with spaces, dashes, or parentheses, should be accepted and normalized behind the scenes.

By embracing flexibility on the input side and clarity on the output side, developers create systems that feel humane, resilient, and respectful of the way real people actually behave.

Design Takeaway from Postel's Law

Accept Messy Human Input, Output Clean Structured Data:
Users type dates, names, phone numbers, and addresses in unpredictable ways. A humane system accepts this variability and quietly normalises it into a consistent internal format.

Rigid interfaces punish users for being human. Robust interfaces interpret intent — handling typos, partial matches, synonyms, and natural language without complaint.

Also accept variations in spacing, punctuation, casing, and structure. Let users type naturally — the system should handle the complexity, not them.

Be Flexible With Input, Be Strict With Output:
This is the heart of Postel’s Law. Let users express information naturally, but ensure your system stores and displays it in a predictable, standardised way.

Use Intelligent Parsing and Autocorrection to Reduce Errors:
Libraries like libphonenumber, fuzzy search, and natural‑language parsers allow systems to accept a wide range of formats while still producing clean, reliable data.

Normalise Everything Behind the Scenes:
Dates, phone numbers, currency, file extensions, and addresses should all be standardised internally. This prevents messy data and reduces downstream cleanup work.

Provide Clear, Predictable Feedback:
Error messages should be specific and helpful. Requirements should be visible upfront. Users should never be surprised, confused, or forced to start over.

Combine Postel’s Law With Tesler’s Law:
Shift complexity to the system. Intelligent handling of messy input reduces cognitive load, improves usability, and ensures consistent, high‑quality data.

To Sum Up: A rigid system will reject anything that doesn’t match its narrow expectations, but a robust system, by contrast, adapts to the user.

12.0 Doherty Threshold:

The Doherty Threshold is a principle in human–computer interaction which proposes that systems should respond quickly enough to keep users actively engaged (Mod 2024).

When response times stay below a certain limit, users remain focused and productive. But once performance already meets this optimal responsiveness level, making the system even faster or adding extra capability doesn't significantly enhance satisfaction or efficiency.

The idea was introduced by Walter J. Doherty in 1976 in his paper “A Comparison of Programming Systems and Doherty Threshold.” His research showed that maintaining rapid system feedback fast enough to sustain continuous interaction has a stronger impact on productivity than simply increasing system power or features beyond that point.

Doherty proposes that this shouldn't be greater than 400ms Rule: If the system responds within this window, the user feels in total control. If the response takes longer, the user's attention begins to wander, and their "train of thought" is broken.

The challenge, of course, is that not every operation can realistically complete within 400ms. Some tasks require heavy computation, large network calls, or complex rendering. This is where the concept of perceived performance becomes essential.

Even when the system can't finish the work quickly, it can feel fast by responding instantly at the UI level. Developers can achieve this illusion of speed through a combination of thoughtful design patterns and disciplined engineering practices.

On the technical side, performance begins with reducing unnecessary work. Keeping the number of HTML elements low helps the browser render faster. Rendering only the visible portion of long lists prevents the Document Oject Model (DOM) from becoming bloated. Splitting scripts and deferring non‑critical code ensures that essential interactions load first.

Using CSS transforms and opacity changes avoids expensive layout recalculations. Lazy‑loading images, videos, and scripts ensures that the interface becomes interactive long before all assets are downloaded.

These optimizations don’t just improve raw speed — they create the foundation for interfaces that feel responsive.

Design Takeaways from Doherty Threshold

Instant Feedback: When a user clicks a button, provide a visual change (like a button press animation or a spinner) immediately, even if the background task takes longer.

Skeleton Screens: Use placeholder blocks that mimic the layout of the page while data loads. This makes the app feel like it is responding instantly.

Progressive Loading: Load text and basic structures first, then "pop in" high-resolution images later.

Optimistic UI: When a user hits "Save," don't wait for the server. Update the UI instantly (Doherty) and handle the "messy" data formatting on the backend (Postel).

Live Inline Validation: Show a green checkmark or a helpful error message as the user types. This keeps them below the 400ms "thought-break" limit.

Debouncing: In search bars, start showing results after a few keystrokes so the user feels the app is "predicting" their needs.

To Sum Up: When response times stay below a certain limit, users remain focused and productive. But once performance already meets this optimal responsiveness level, making the system even faster or adding extra capability doesn't significantly enhance satisfaction or efficiency.

13.0 Serial Position Effect (Primacy and Recency):

Murdock’s study investigated how the position of a word in a list affects recall, known as the serial position effect. He presented 103 psychology students with lists of 10 to 40 words, one at a time, at either 1 or 2 seconds per word (McLeod, 2025).

Participants were divided into six groups, each experiencing a different combination of list length and presentation rate, and were asked to recall as many words as possible in any order.

The results showed that participants were most likely to remember words at the beginning of the list (primacy effect) and at the end of the list (recency effect), while words in the middle were recalled less often. The recency effect persisted even in longer lists, and the middle section of the recall curve formed a flat asymptote.

Murdock explained this using the multi-store model of memory: early words were rehearsed and transferred to long-term memory, last words remained in short-term memory, and middle words were neither sufficiently rehearsed nor retained, leading to poorer recall.

The experiment demonstrated that memory performance varies systematically with the position of information in a sequence.

This is the reason why the most important information or actions should never be buried in the middle.

As a developer, you should put your most critical navigation links (like "Home" or "Dashboard") at the far left or the top of a list. In a pricing table, put the most popular or recommended plan on the Place "Final Actions" (like "Log Out," "Cart," or "Support") at the end of a menu or the far right of a navigation bar.

In a long onboarding flow, put the most exciting benefit of the app on the very last slide so the user enters the app feeling motivated.

Avoid placing highly important buttons in the middle of a row. If you have a row of 7 buttons, the user is statistically likely to overlook the 4th one.

Design Takeaways Serial Position Effect

Place Critical Items at the Beginning or End — Never the Middle:
Users reliably remember the first and last items in any sequence (primacy and recency). Anything placed in the middle is statistically more likely to be forgotten or ignored. Also, actions such as “Log Out,” “Cart,” “Support,” or “Checkout” should sit at the far right or bottom — the natural recency position.

Put Essential Navigation Links at the Far Left or Top:
Links like “Home,” “Dashboard,” or “Overview” should appear at the start of a menu, where recall and recognition are strongest.

To Sum Up: The results showed that participants were most likely to remember words at the beginning of the list (primacy effect) and at the end of the list (recency effect), while words in the middle were recalled less often.

14.0 Occam’s Razor:

Although first articulated in the 14th century by the Franciscan friar William of Ockham, Occam’s Razor remains one of the most indispensable principles in a developer’s toolkit. In fact, skipping this law while discussing other theories and principles would be like skipping the glue that holds the entire framework together.

At its core, Occam’s Razor states that “among competing explanations, the simplest one is usually the best.”

For example, if two user interfaces achieve the same goal, the one with fewer visual elements is typically superior because it requires less processing power.

The fundamental takeaway for modern developers regarding Occam’s Razor is that complexity is a tax on the user’s cognitive resources.

In an era of information density, the developer's primary role is no longer to provide "more" features – rather, it's to curate the most direct path to a solution.

In practice, Occam’s Razor becomes a reminder to keep things as simple as possible. This “less is more” mindset shapes everything from navigation to forms.

A good rule for navigation is the Rule of Five: aim for three to five main menu items instead of a long, overwhelming list. This keeps choices clear and prevents users from freezing up when they see too many options.

The same idea applies to data entry. When you ask only for the information that truly matters, you respect the user’s time and reduce the chance of “form fatigue,” which is one of the biggest reasons people abandon sign‑ups or checkout flows.

Simplicity isn’t just elegant — it’s practical, humane, and far more effective.

Design Takeaway from Occam's Razor

Choose the Simplest Effective Solution:
When two designs achieve the same goal, the one with fewer elements is almost always better. Simplicity reduces cognitive load and speeds up user decision‑making.

Simplicity Is Not Just Aesthetic — It’s Humane:
Clear, minimal interfaces respect the user’s time, reduce friction, and make the product feel effortless. Simplicity is both a design strategy and an act of empathy.

To Sum Up: Simplicity isn’t just elegant — it’s practical, humane, and far more effective.

15.0 Parkinson's Law

Occam’s Razor teaches us to prefer the simplest solution that works. But why do we so often end up with complex systems in the first place? That tendency is explained by another principle: Parkinson’s Law.

Parkinson’s Law states that "work expands to fill the time available for its completion". In design, this means projects often become overly complex or take longer than necessary if given too much time, resulting in inefficient, over-designed, or cluttered interfaces.

In design, this manifests as Feature Creep. If you give yourself three months to build an app, you will spend three months adding "nice-to-have" animations, extra settings toggles, and niche edge cases that nobody asked for and in reality, what you have added isn’t that important.

You just succeeded in adding layers of complexity that might ends up violating some of the laws we spoke about. Occam’s Razor reminds us that the simplest solution is often the most effective.

By being aware of Parkinson’s Law and the tendency for work to expand, developers can manage their time intentionally and focus only on what truly matters.

Design Takeaway for Parkinson's law

Set Clear Constraints to Keep Designs Focused:
Intentional time limits and scope boundaries prevent over‑designing. Constraints force clarity, prioritisation, and simplicity.

Build Only What Truly Matters for the User:
Parkinson’s Law reminds you to resist the urge to fill time with unnecessary features. Focus on the core experience, not the edge cases nobody asked for.

Use Occam’s Razor to Counterbalance Parkinson’s Law:
As work expands, complexity grows. Occam’s Razor pulls you back to the simplest effective solution. Together, the two principles prevent bloated, over‑engineered products.

To Sum Up: Work expands to fill the time available for its completion

Conclusion

Human-centered design is deeply influenced by a set of psychological principles that explain how users perceive, process, and interact with digital systems.

Among these, Fitts’s Law establishes that the time required to acquire a target depends on its size and distance. In practice, this means that larger and closer elements are easier and faster to interact with.

To apply this in practice, developers should make primary call-to-action elements prominent, large, and easily reachable – especially in mobile interfaces where thumb accessibility is critical.

Closely related to decision-making is Hick’s Law, which states that the more choices a user is presented with, the longer it takes to make a decision. Excessive options can overwhelm users and lead to decision fatigue.

To address this, developers should simplify interfaces, minimise unnecessary options, and guide users through processes step-by-step rather than presenting everything at once.

Another important cognitive principle discussed is Miller’s Law, which suggests that the average person can hold approximately seven (plus or minus two) items in working memory at a time. This limitation highlights the need to present information in manageable chunks.

By breaking content into smaller groups and avoiding information overload, developers can improve comprehension and usability.

User expectations are strongly shaped by Jakob’s Law, which says that people spend most of their time on other websites and therefore expect similar patterns across digital products.

Instead of reinventing basic interactions, developers should follow familiar conventions such as placing the logo in the top‑left, the shopping cart in the top‑right, and keeping scrolling behaviour predictable.

But innovation is still possible where it truly adds value. As we discussed with the Aesthetic‑Usability Effect, users are far more tolerant of new or unusual design patterns when the interface is visually appealing and thoughtfully crafted.

The Gestalt Principles provided additional insight into how users visually organise information. The principle of proximity suggests that objects placed close together are perceived as related, so grouping related elements improves clarity. Similarity indicates that elements with consistent colours, shapes, or styles are seen as belonging together, reinforcing visual hierarchy and function. Closure explains that users can perceive incomplete shapes as complete, allowing for minimalistic designs where the brain fills in missing details. Continuity highlights that users naturally follow smooth visual paths, meaning layouts should guide the eye logically through alignment and structure.

We also looked at The Von Restorff Effect which emphasizes that elements which stand out are more likely to be remembered. By using contrast in colour, size, or design, important features such as buttons or alerts can capture user attention.

Managing complexity was addressed by Tesler’s Law, which asserts that every system has inherent complexity that cannot be eliminated but only managed.

Developers must therefore shift complexity away from the user by simplifying interfaces while handling intricate processes behind the scenes.

The Zeigarnik Effect reveals that people remember unfinished tasks better than completed ones, creating a sense of mental tension. This can be leveraged by incorporating progress indicators, checklists, and reminders that encourage users to complete tasks.

Similarly, the Peak-End Rule suggests that users judge an experience based on its most intense moment and its conclusion. Developers should create memorable highlights and ensure a smooth, satisfying ending to user journeys.

We also discussed the Goal-Gradient Effect, which explains that users become more motivated as they approach the completion of a task. By showing progress –such as indicating that a process is “80% complete” – and breaking tasks into stages, developers can encourage users to finish what they have started.

In terms of system interaction, Postel’s Law advises developers to be flexible in accepting user input while maintaining strict standards for output. This means allowing different input formats while ensuring consistent and reliable system responses.

Performance is equally important, as highlighted by the Doherty Threshold, which shows that productivity increases when system response times stay under 400 milliseconds. Fast systems keep users engaged and create a sense of ease.

This means that developers should focus on building interfaces that feel instant, even when real processing takes longer, by combining smart engineering practices with thoughtful design patterns that maintain the illusion of speed.

Memory and attention are further explained by the Serial Position Effect, where users tend to remember the first and last items in a sequence more than those in the middle. Developers should position key information or actions at the beginning or end of lists.

Simplicity is reinforced by Occam’s Razor, which argues that the simplest solution is often the most effective. Eliminating unnecessary features reduces friction and enhances usability, and we further discussed about Parkinson’s Law, which suggests that tasks expand to fill the time available, indicating the importance of setting constraints such as deadlines or timers to encourage timely action.

These principles collectively highlight the importance of simplicity, clarity, performance, and user psychology in design. By applying them thoughtfully, developers can create intuitive, efficient, and engaging user experiences that align with both human behaviour and user expectations.

References

Budiu, R. (2022). Fitts’s Law and Its Applications in UX. [online] Nielsen Norman Group. Available at: https://www.nngroup.com/articles/fitts-law/.

Bustamante, N. (2023). Gestalt Psychology? Definition, Principles, & Examples - Simply Psychology. [online] www.simplypsychology.org. Available at: https://www.simplypsychology.org/what-is-gestalt-psychology.html.

Cherry, K. (2024). The Zeigarnik Effect Is Why You Keep Thinking of Unfinished Work. [online] Verywell Mind. Available at: https://www.verywellmind.com/zeigarnik-effect-memory-overview-4175150.

DO, A.M., RUPERT, A.V. and WOLFORD, G. (2008). Evaluations of pleasurable experiences: The peak-end rule. Psychonomic Bulletin & Review, 15(1), pp.96–98. doi:https://doi.org/10.3758/pbr.15.1.96.

GUPTA, S., GUPTA, S., MAHENDRA, A. and GUPTA, S. (2006). Inverse Halo Nevus. Dermatologic Surgery, 32(6), pp.871–872. doi:https://doi.org/10.1097/00042728-200606000-00025.

‌Hall, D. (2023). Pilot Error, Chapanis and The Shape of Things to Come. [online] UX Magazine. Available at: https://uxmag.com/articles/pilot-error-chapanis-and-the-shape-of-things-to-come.

Hunt, R.R. (1995). The subtlety of distinctiveness: What von Restorff really did. Psychonomic Bulletin & Review, 2(1), pp.105–112. doi:https://doi.org/10.3758/bf03214414.

Kahneman, D., Fredrickson, B.L., Schreiber, C.A. and Redelmeier, D.A. (1993). When More Pain Is Preferred to Less: Adding a Better End. Psychological Science, 4(6), pp.401–405. doi:https://doi.org/10.1111/j.1467-9280.1993.tb00589.x.

Mod, D. (2024). Doherty Threshold: UX Law of Swift Interactions. [online] Articles on everything UX: Research, Testing & Design. Available at: https://blog.uxtweak.com/doherty-threshold/.

Miller, G.A. (1956). The magical number seven, plus or minus two: Some limits on our capacity for processing information. Psychological Review, [online] 101(2), pp.343–352. doi:https://doi.org/10.1037/0033-295x.101.2.343.

Proctor, R.W. and Schneider, D.W. (2018). Hick’s law for choice reaction time: A review. Quarterly Journal of Experimental Psychology, [online] 71(6), pp.1281–1299. doi:https://doi.org/10.1080/17470218.2017.1322622.

Yablonski, J. (2022). Hick’s Law. [online] Laws of UX. Available at: https://lawsofux.com/hicks-law/.

Yablonski, J. (2022). Goal-Gradient Effect. [online] Laws of UX. Available at: https://lawsofux.com/goal-gradient-effect/.

‌

‌

‌

In this article, we’ll walk through a complete sample responsive screen, explaining each part of the code step by step. You’ll learn not only how to make your layout adapt to different screen sizes and orientations but also how to use scaling utilities to keep your text and spacing consistent across all devices.

By the end, you’ll understand how to structure a Flutter app that automatically adjusts its layout and typography based on the available screen real estate, a must-know skill for any developer targeting multiple platforms.

Table of Contents

• Prerequisites

• Understanding Responsive vs Adaptive Design

• Core Flutter Layout Widgets for Responsive UI

  • Container/SizedBox

  • Overly Fixed Sizing (Not Responsive)

  • Responsive / Flexible Sizing

  • SizedBox for Spacing or Constraints

  • Row, Column

  • Expanded and Flexible

  • LayoutBuilder

• MediaQuery and Screen Information

  • Breakpoints, Orientation and Large-Screen Adaptation

  • Responsive Typography, Images and Assets

  • Flexible Layouts: Expanded, Flexible, FractionallySizedBox

  • Advanced Tools and Packages

  • Handling Safe Areas, Notches and Insets

  • Adaptive UI for Tablets/Desktop and Multi-Window

• Best Practices and Performance Considerations

• Testing and Debugging Responsive Layouts

• Building Reusable Responsive Widgets/Custom Widgets

• Example of A Complete Sample Responsive Screen

  • Project Setup and Imports

  • App Entry Point: The MyApp Class

  • The Responsive Home Screen (MyHomePage)

  • Building the Core Content

• Full Walkthrough: Code Explained in Depth

  • Imports and App Entry Point

  • App Root: The MyApp Widget

  • The Home Screen Layout MyHomePage

  • The Scaffold and AppBar

  • SafeArea + LayoutBuilder

  • Handling Large and Small Screens

  • Building the Core Content

  • Why This Works

• Key Takeaways

• Conclusion

• References

Prerequisites

Before diving in, ensure you have:

• A working Flutter environment (SDK, IDE, emulator or device).

• Basic proficiency in Flutter: Knowledge of widgets, stateless/stateful, Row/Column, Scaffold, and so on.

• Familiarity with Dart basics and how layout works in Flutter (constraints, sizing).

• (Optional but helpful) A design/mockup (for example from Figma) with defined design size or target screen.

• Understanding that creating truly adaptive/responsive UIs means accommodating different screen sizes, orientations, aspect-ratios, and platforms (mobile/tablet/web/desktop).

Understanding Responsive vs Adaptive Design

It’s helpful to clarify terminology:

• Responsive design is about fitting the UI into the available space: The layout scales, reflows, rearranges as the screen size or orientation changes.

• Adaptive design is about selecting different UI patterns depending on the device/screen. For example, using a side-panel on desktop, bottom navigation on mobile. The UI adapts to the context of use.

• In practice with Flutter, you often do both: Responsive (scaling/reflow) and adaptive (choosing variant layouts).

• According to the official documentation:

  “Responsive design is about fitting the UI into the space. Adaptive design is about the UI being usable in the space.” (Flutter Docs)

• Also, some best practices to follow: don’t assume device type (phone/tablet) based on screen size, don’t lock orientation, and don’t rely solely on MediaQuery.orientation. (Flutter Docs)

Core Flutter Layout Widgets for Responsive UI

Flutter provides many fundamental widgets for layout – when used well, they form the backbone of responsive UIs.

1. Container/SizedBox

Container, SizedBox let you size widgets explicitly or via constraints.

Use cautiously: Overly fixed sizes can hamper responsiveness (for example, a Container(width: 300) may overflow on small screens).

Better to use relative sizing or allow flexibility.

Here are clear, practical Flutter code examples that illustrate how to use Container and SizedBox, including both bad (fixed) and good (responsive/flexible) sizing approaches:

Overly Fixed Sizing (Not Responsive)

class FixedContainerExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        // This might overflow on small screens!
        child: Container(
          width: 300,
          height: 200,
          color: Colors.blue,
          child: const Center(
            child: Text(
              'Fixed Size Container',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }
}

Problem:
If the screen width is less than 300px (like on small mobile devices), this widget may overflow or get cut off.

Responsive / Flexible Sizing

class ResponsiveContainerExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;

    return Scaffold(
      body: Center(
        // Use relative width and height
        child: Container(
          width: screenWidth * 0.8, // 80% of screen width
          height: 200,
          decoration: BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.circular(12),
          ),
          child: const Center(
            child: Text(
              'Responsive Container (80% width)',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }
}

Why better:
It adjusts automatically to different screen sizes.

SizedBox for Spacing or Constraints

class SizedBoxExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const Text('Above Spacer'),
            const SizedBox(height: 16), // Adds spacing
            Container(
              width: 200,
              height: 100,
              color: Colors.green,
              child: const Center(child: Text('Sized Container')),
            ),
          ],
        ),
      ),
    );
  }
}

SizedBox is lightweight and great for adding fixed spacing or defining simple dimensions without needing a full Container.

2. Row, Column

Row and Column arrange children horizontally or vertically.

Note: Row gives infinite horizontal space (subject to parent constraints), so children must handle sizing or else overflow.

When you use a Row or Column, Flutter tries to give them as much space as possible along their main axis (horizontal for Row, vertical for Column).
If the children inside don’t know how much space to take, they can overflow or not display as intended.

That’s why we use Expanded, Flexible, or SizedBox to tell Flutter how each child should use the available space.

Example:

Row(
  children: [
    Expanded(
      child: Container(
        // Your widget content here
      ),
    ),
    // Other widgets...
  ],
)

Here Expanded says: “take up remaining space proportionally”.

Expanded and Flexible

Expanded forces its child to fill remaining space in a Row or Column.

Flexible gives its child flexibility: it may shrink or grow but not forcibly fill.

Example:

Row(
  children: [
    Flexible(
      child: Container(
        // Widget content
      ),
    ),
    // Other widgets...
  ],
)

Using Flexible/Expanded helps distribute space dynamically and naturally adapt to varying screen sizes.

3. LayoutBuilder

LayoutBuilder gives you the parent widget’s constraints (maxWidth, maxHeight) and allows you to re-build UI accordingly.

LayoutBuilder(
  builder: (BuildContext context, BoxConstraints constraints) {
    if (constraints.maxWidth > 600) {
      // Large screen layout
      return LargeScreenWidget();
    } else {
      // Small screen layout
      return SmallScreenWidget();
    }
  },
)

This is often more reliable than just checking MediaQuery.orientation or MediaQuery.size, especially in multi-window/foldable devices. (Flutter Docs)

4. FractionallySizedBox and AspectRatio

FractionallySizedBox: Sizes its child as a fraction of the parent’s size (for example, widthFactor: 0.5).

AspectRatio: Maintains a fixed aspect ratio (width/height), useful for images or containers.

AspectRatio(
  aspectRatio: 16 / 9,
  child: YourWidget(),
)

These help maintain proportionally consistent layouts across screen sizes.

MediaQuery and Screen Information

Understanding screen size, orientation, padding, device pixel ratio and so on, is essential.

Using MediaQuery

double screenWidth  = MediaQuery.of(context).size.width;
double screenHeight = MediaQuery.of(context).size.height;
Orientation orientation = MediaQuery.of(context).orientation;
double devicePixelRatio = MediaQuery.of(context).devicePixelRatio;
EdgeInsets padding = MediaQuery.of(context).padding;

size gives the logical pixel width/height, orientation informs if the device is in portrait or landscape, devicePixelRatio shows how many physical pixels per logical pixel, helpful for image scaling, and padding gives system UI insets (notches, status bar, navigation bar).

Use these values to tailor your UI: for example, adjust font sizes, container widths, or layout decisions.

Example: Responsive Typography

Text(
  'Your text here',
  style: TextStyle(
    fontSize: screenWidth * 0.04, // 4% of screen width
  ),
)

Approach: Compute font size relative to screen width or height. But be cautious, text readability and accessibility (for example, system font size changes) should be considered, see best practices below.

Breakpoints, Orientation and Large-Screen Adaptation

To create UIs that look great on tablets/desktops as well as phones:

Orientation

if (MediaQuery.of(context).orientation == Orientation.portrait) {
  // Portrait layout
} else {
  // Landscape layout
}

Works for basic cases, but beware: orientation alone doesn’t capture window size (especially in desktop/multi-window environments), prefer checking constraints or size. (Flutter Docs)

Breakpoints and Adaptive Layouts

Define custom breakpoints based on width (or other metrics) to trigger different layouts.

Example:

if (screenWidth > 600) {
  // Tablet/large-screen UI
} else {
  // Phone UI
}

Some sources propose standard breakpoints, for example, compact (<600), medium (600-840), large (>840). With LayoutBuilder you can detect parent constraint width instead of global screen width, which is more robust.

Large Screens and Safe Use of Space

On very wide screens, filling full width may hurt readability. The official Flutter docs recommend limiting content width (for example, using ConstrainedBox + Center) for large screens so that lines of text aren't excessively long. (Flutter Docs)

Example:

Center(
  child: ConstrainedBox(
    constraints: BoxConstraints(maxWidth: 800),
    child: YourContent(),
  ),
)

Responsive Typography, Images and Assets

Typography

Use scalable units whenever possible (see packages later). Wrap text in Flexible/Expanded if inside Row/Column to avoid overflow, and consider system font scale factor: You can use MediaQuery.of(context).textScaleFactor to adapt fonts for accessibility.

Images and BoxFit

Image.asset(
  'assets/your_image.png',
  fit: BoxFit.cover,  // or BoxFit.contain, BoxFit.fitWidth etc.
  width: someWidth,   // responsive width
  height: someHeight, // responsive height
)

BoxFit.cover allows image to fill container while maintaining aspect ratio.

Use AspectRatio or FractionallySizedBox to keep images proportional.

Asset Density and Pixel Ratio

For high resolution devices (high devicePixelRatio), provide higher resolution assets (2x/3x) so they appear crisp.

Flutter handles asset variants (asset@2x.png and so on) automatically, but in very large screen layouts you may want extra details.

Flexible Layouts: Expanded, Flexible, FractionallySizedBox

We discussed these partially above, but here are deeper guidelines.

Expanded and Flexible

Use inside Row or Column to distribute space.

Example:

Row(
  children: [
    Expanded(flex: 2, child: Container(color: Colors.red)),
    SizedBox(width: 8),
    Expanded(flex: 1, child: Container(color: Colors.blue)),
  ],
)

The red container takes twice the width of the blue. Using Flexible allows its child to expand or shrink, but doesn’t force full space.

FractionallySizedBox

Example:

FractionallySizedBox(
  widthFactor: 0.8,  // 80% of parent width
  child: SomeWidget(),
)

Useful when you want a widget to occupy a fraction of available space without using exact pixel values.

AspectRatio

AspectRatio(
  aspectRatio: 16/9,
  child: Container(color: Colors.green),
)

Ensures the container maintains 16:9 ratio regardless of parent size.

Advanced Tools and Packages

Using packages can simplify many repetitive tasks. Here are some highly used ones.

flutter_screenutil

Helps scale widths, heights, font sizes based on a design size you specify.

Example initialization:

ScreenUtilInit(
  designSize: Size(360, 690), // your base design size
  builder: () => MaterialApp(
    home: MyHomePage(),
  ),
);

Usage:

width: 200.w,         // scaled width
height: 150.h,        // scaled height
fontSize: 16.sp,      // scaled font size
radius: 12.r,         // scaled radius

Advantages: Easy scaling of many sizes. But you must use .w, .h, .sp, .r consistently.

responsive_builder

Helps produce layouts for different device screen types (mobile/tablet/desktop).

Example:

ResponsiveBuilder(
  builder: (context, sizingInformation) {
    if (sizingInformation.deviceScreenType == DeviceScreenType.mobile) {
      return MobileLayout();
    } else if (sizingInformation.deviceScreenType == DeviceScreenType.tablet) {
      return TabletLayout();
    } else {
      return DesktopLayout();
    }
  },
);

Useful for switching entire widget trees based on device type. (Medium)

Others

1. responsive_framework, adaptive_breakpoints, and so on.

2. When choosing a package, check maintenance, popularity, compatibility with your Flutter version.

Handling Safe Areas, Notches and Insets

Modern devices have notches, status bars, navigation bars, foldables and so on. Use widgets and APIs to handle these.

1. Wrap main content in SafeArea to avoid system UI intrusions.

2. Use MediaQuery.of(context).padding to detect safe padding (top, bottom, left, right).

Example:

Padding(
  padding: MediaQuery.of(context).padding,
  child: YourContent(),
)

On Android you can also set UI mode:

SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);

and update styles so status/navigation bar become transparent, helps full-screen UIs.

Adaptive UI for Tablets/Desktop and Multi-Window

As your app runs on larger screens or in multi-window environments (foldables, desktops, web), consider:

1. Switching from bottom navigation (mobile) to a navigation rail or side‐panel (tablet/desktop).

2. Using ConstrainedBox to limit content width on wide screens for readability.

3. Layout changes: Instead of single column scroll, you may display side-by-side panels or grid layouts.

4. Use LayoutBuilder or packages to detect width/constraints and choose the appropriate layout.

5. Avoid device type checking (for example, “if tablet”), instead base on window size.

   Example:

    LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth > 1024) {
          return DesktopScaffold();
        } else if (constraints.maxWidth > 600) {
          return TabletScaffold();
        } else {
          return MobileScaffold();
        }
      },
    );
   

Best Practices and Performance Considerations

Summarizing key best practices:

1. Break widgets into smaller reusable widgets improves maintainability and reuse.

2. Start building from the inside out. Start with smallest components and move outward, rather than imposing outer container constraints first.

3. Ensure defined constraints to avoid infinite bounds and overflow by using Expanded, Flexible, and so on.

4. Avoid fixed sizes where unnecessary. Relative sizing or flex layouts adapt better.

5. Avoid relying solely on screen size or orientation, use constraints instead of device type checks.

6. Performance matters, avoid over-nesting heavy layouts, avoid rebuilding large subtrees when not needed. Use const widgets and keep build method lean.

7. Accessibility account for large font scaling (MediaQuery.textScaleFactor), screen readers, keyboard/mouse input on larger screens.

8. Test on multiple screen sizes/orientations actual devices/emulators/display sizes.

9. Font/text overflow wrap text in Flexible, set overflow, softWrap, and test for dynamic content.

Testing and Debugging Responsive Layouts

1. Use device emulators/simulators with different screen sizes (phones, tablets, desktops).

2. For web/desktop, resize browser window to see how layout adapts.

3. Use device_preview package or built-in Flutter tools to simulate various devices.

4. Use Flutter DevTools’ Widget Inspector and Layout Explorer to understand how widgets are sized and laid out.

5. Test orientation changes, multi-window, split view (for example, Android foldables).

6. Check for overflow errors (yellow/black stripes) or unexpected scroll behavior.

7. Check accessibility: Scale fonts up/down, test with screen reader, check keyboard navigation in desktop mode.

Building Reusable Responsive Widgets/Custom Widgets

One of the keys to scalable responsive UI is creating reusable widgets that encapsulate responsive behavior.

Example: ResponsiveText Widget

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class ResponsiveText extends StatelessWidget {
  final String text;
  final FontWeight fontWeight;
  final Color color;

  const ResponsiveText(
    this.text, {
    Key? key,
    this.fontWeight = FontWeight.normal,
    this.color = Colors.black,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(
      text,
      style: TextStyle(
        fontSize: 16.sp,         // scaled font size
        fontWeight: fontWeight,
        color: color,
      ),
    );
  }
}

Usage: Instead of manually specifying font size every time, you use ResponsiveText. Similarly, you can build ResponsiveContainer, ResponsivePadding, and so on. Encapsulating responsive logic in widgets improves code reuse and consistency.

Example: BreakpointAwareLayout Widget

import 'package:flutter/material.dart';

class BreakpointAwareLayout extends StatelessWidget {
  final Widget mobile;
  final Widget tablet;
  final Widget desktop;

  const BreakpointAwareLayout({
    Key? key,
    required this.mobile,
    required this.tablet,
    required this.desktop,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth >= 1024) {
          return desktop;
        } else if (constraints.maxWidth >= 600) {
          return tablet;
        } else {
          return mobile;
        }
      },
    );
  }
}

Usage: You supply three versions of your UI and widget will choose based on width.

Example of A Complete Sample Responsive Screen

We’ll divide the example into these parts:

1. Project Setup and Imports

2. App Entry Point (main() and MyApp)

3. ScreenUtil Initialization

4. Main Page Layout (MyHomePage)

5. Adaptive Layout with LayoutBuilder

6. Main Content Builder (_buildMainContent)

7. Responsive Styling with flutter_screenutil

Project Setup and Imports

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

void main() {
  runApp(MyApp());
}

App Entry Point: The MyApp Class

class MyApp extends StatelessWidget {
  // Design size corresponds to the reference design (e.g., iPhone 6/7/8)
  final Size designSize = const Size(360, 690);

  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
      designSize: designSize,
      minTextAdapt: true,       // adapts font size
      splitScreenMode: true,    // supports split-screen
      builder: (context, child) {
        return MaterialApp(
          title: 'Responsive Flutter Example',
          home: MyHomePage(),
        );
      },
    );
  }
}

The Responsive Home Screen (MyHomePage)

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final double screenWidth  = MediaQuery.of(context).size.width;
    final double screenHeight = MediaQuery.of(context).size.height;
    final Orientation orientation = MediaQuery.of(context).orientation;

    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Responsive UI',
          style: TextStyle(fontSize: 20.sp),
        ),
      ),
      body: SafeArea(
        child: LayoutBuilder(
          builder: (context, constraints) {
            if (constraints.maxWidth > 600) {
              // Tablet/Desktop layout
              return Row(
                children: [
                  Expanded(
                    flex: 2,
                    child: Container(
                      color: Colors.blueGrey[50],
                      child: Center(
                        child: Text(
                          'Sidebar Panel',
                          style: TextStyle(fontSize: 18.sp),
                        ),
                      ),
                    ),
                  ),
                  Expanded(
                    flex: 5,
                    child: Container(
                      padding: EdgeInsets.all(16.w),
                      child: _buildMainContent(context),
                    ),
                  ),
                ],
              );
            } else {
              // Mobile layout
              return SingleChildScrollView(
                child: Padding(
                  padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 24.h),
                  child: _buildMainContent(context),
                ),
              );
            }
          },
        ),
      ),
    );
  }
}

Building the Core Content

Widget _buildMainContent(BuildContext context) {
  return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text(
        'Welcome to the Responsive App',
        style: TextStyle(fontSize: 24.sp, fontWeight: FontWeight.bold),
      ),
      SizedBox(height: 12.h),
      Text(
        'This UI adapts to different screen sizes automatically. Try resizing your window or changing the orientation.',
        style: TextStyle(fontSize: 16.sp),
      ),
      SizedBox(height: 24.h),
      Row(
        children: [
          Expanded(
            child: Image.asset(
              'assets/sample.jpg',
              width: double.infinity,
              height: 200.h,
              fit: BoxFit.cover,
            ),
          ),
        ],
      ),
      SizedBox(height: 24.h),
      Row(
        children: [
          Expanded(
            child: ElevatedButton(
              onPressed: () {},
              style: ElevatedButton.styleFrom(
                padding: EdgeInsets.symmetric(vertical: 14.h),
                textStyle: TextStyle(fontSize: 16.sp),
              ),
              child: Text('Get Started'),
            ),
          ),
        ],
      ),
    ],
  );
}

Full Walkthrough: Code Explained in Depth

Let’s now go through a deep explanation of the full sample responsive Flutter screen, line by line and block by block.

Imports and App Entry Point

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

void main() {
  runApp(MyApp());
}

Explanation:

import 'package:flutter/material.dart'; brings in Flutter’s Material Design library, which contains essential UI widgets such as Scaffold, AppBar, Text, and Column. import 'package:flutter_screenutil/flutter_screenutil.dart'; imports the flutter_screenutil package, providing scaling utilities like .sp, .h, .w, and .r that automatically adjust UI elements based on the device’s screen size. The void main() function serves as the entry point of the Flutter app, calling runApp(MyApp()) to render the MyApp widget as the root of the application.

App Root: The MyApp Widget

class MyApp extends StatelessWidget {
  // Design size corresponds to the reference design (e.g., iPhone 6/7/8)
  final Size designSize = const Size(360, 690);

  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
      designSize: designSize,
      minTextAdapt: true,       // adapts font size
      splitScreenMode: true,    // supports split-screen
      builder: (context, child) {
        return MaterialApp(
          title: 'Responsive Flutter Example',
          home: MyHomePage(),
        );
      },
    );
  }
}

Explanation:

MyApp extends StatelessWidget, meaning it doesn’t maintain any internal state and simply builds the widget tree. The designSize defines the base design resolution used in your design mockups (in this case, 360x690, typical of an iPhone 8). ScreenUtilInit initializes the flutter_screenutil package, and its parameters configure how responsiveness works: designSize: Size(360, 690) sets the reference design size for all scaling calculations, minTextAdapt: true ensures text automatically scales on smaller screens without clipping, and splitScreenMode: true maintains proper layout behavior in split-screen mode on devices like Android tablets. Inside its builder, it returns a MaterialApp, which defines the app’s title and sets home: MyHomePage(), the main screen displayed when the app launches.

So far, this part sets up the environment for responsive scaling.

The Home Screen Layout MyHomePage

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

The widget is stateless, meaning its layout does not depend on mutable state.

Inside build(BuildContext context):

final double screenWidth  = MediaQuery.of(context).size.width;
final double screenHeight = MediaQuery.of(context).size.height;
final Orientation orientation = MediaQuery.of(context).orientation;

These three lines access MediaQuery, a Flutter API that provides information about the screen’s size, orientation, and other layout properties, where screenWidth represents the device’s current screen width, screenHeight represents its height, and orientation indicates whether the device is in portrait or landscape mode.

You’ll use these values to dynamically adjust your layout.

The Scaffold and AppBar

return Scaffold(
  appBar: AppBar(
    title: Text(
      'Responsive UI',
      style: TextStyle(fontSize: 20.sp),
    ),
  ),

Explanation:

Scaffold provides the basic structure of the page, including the app bar, body, and optional elements like a floating action button or drawer. Inside the AppBar, the title text uses 20.sp instead of a fixed pixel value, .sp (scaled pixels) from flutter_screenutil ensures that the font size automatically adjusts to the screen’s pixel density and resolution, meaning a 20.sp text appears smaller on compact screens and scales up proportionally on larger devices like tablets.

SafeArea + LayoutBuilder

body: SafeArea(
  child: LayoutBuilder(
    builder: (context, constraints) {

Explanation:

SafeArea ensures that content does not overlap with system UI areas such as the notch, status bar, or navigation gestures, while LayoutBuilder provides the constraints (maximum width and height) of the available space inside its parent, enabling the creation of responsive layouts that adapt dynamically to the screen’s actual size at runtime.

Handling Large and Small Screens

if (constraints.maxWidth > 600) {
  // Tablet/Desktop layout
  return Row(
    children: [
      Expanded(
        flex: 2,
        child: Container(
          color: Colors.blueGrey[50],
          child: Center(
            child: Text(
              'Sidebar Panel',
              style: TextStyle(fontSize: 18.sp),
            ),
          ),
        ),
      ),
      Expanded(
        flex: 5,
        child: Container(
          padding: EdgeInsets.all(16.w),
          child: _buildMainContent(context),
        ),
      ),
    ],
  );
} else {
  // Mobile layout
  return SingleChildScrollView(
    child: Padding(
      padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 24.h),
      child: _buildMainContent(context),
    ),
  );
}

Explanation:

This block handles responsive breakpoints by determining how the UI adapts to different screen widths. If constraints.maxWidth > 600, the layout is treated as a tablet or desktop view. In this case, the UI uses a Row to divide the screen horizontally, with Expanded(flex: 2) creating a sidebar that takes two parts of the available width, and Expanded(flex: 5) creating the main content area that takes five parts, maintaining a 2:5 ratio. The sidebar displays “Sidebar Panel,” representing where side navigation or additional panels can appear on larger screens. For smaller screens (phones), the layout switches to a vertical arrangement using SingleChildScrollView to enable scrolling, with padding applied through scaled spacing (16.w horizontally and 24.h vertically). The _buildMainContent() function is reused to keep content logic consistent across all layouts.

Building the Core Content

Widget _buildMainContent(BuildContext context) {
  return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text(
        'Welcome to the Responsive App',
        style: TextStyle(fontSize: 24.sp, fontWeight: FontWeight.bold),
      ),
      SizedBox(height: 12.h),
      Text(
        'This UI adapts to different screen sizes automatically. Try resizing your window or changing the orientation.',
        style: TextStyle(fontSize: 16.sp),
      ),
      SizedBox(height: 24.h),
      Row(
        children: [
          Expanded(
            child: Image.asset(
              'assets/sample.jpg',
              width: double.infinity,
              height: 200.h,
              fit: BoxFit.cover,
            ),
          ),
        ],
      ),
      SizedBox(height: 24.h),
      Row(
        children: [
          Expanded(
            child: ElevatedButton(
              onPressed: () {},
              style: ElevatedButton.styleFrom(
                padding: EdgeInsets.symmetric(vertical: 14.h),
                textStyle: TextStyle(fontSize: 16.sp),
              ),
              child: Text('Get Started'),
            ),
          ),
        ],
      ),
    ],
  );
}

Explanation:

This method builds the actual visible content of the app. It uses a Column to stack widgets vertically, with crossAxisAlignment: CrossAxisAlignment.start aligning all child widgets to the start of the horizontal axis (left side in LTR layouts). Text widgets use .sp for responsive scaling, applying a larger font size (24.sp) for the title and a smaller, comfortable one (16.sp) for the body. SizedBox provides vertical spacing (12.h or 24.h), where .h scales proportionally to the screen height. A Row containing Image.asset uses Expanded to make the image fill the available width, with fit: BoxFit.cover ensuring the image fills its container correctly and height: 200.h allowing dynamic height scaling. Another Row contains an ElevatedButton that spans the available width through Expanded, with padding and font size scaling via EdgeInsets.symmetric(vertical: 14.h) and TextStyle(fontSize: 16.sp). Overall, the _buildMainContent() method produces a clean, scalable, and responsive layout that maintains visual consistency across all devices.

Why This Works

LayoutBuilder gives the parent constraints, letting you conditionally render different layouts for mobile and large screens. ScreenUtil ensures that all elements (text, padding, sizes) adapt proportionally. MediaQuery can be used if you need real-time adaptation based on device rotation, size, or padding. SafeArea prevents clipping under system UI areas.

Together, these techniques combine Flutter’s native flexibility with ScreenUtil’s scaling power, making the UI dynamic, elegant, and consistent across all platforms.

Key Takeaways

1. Always design with a reference size and scale up/down with flutter_screenutil.

2. Use LayoutBuilder or MediaQuery for breakpoints.

3. Test layouts in portrait/landscape and across small/large screens.

4. Avoid hardcoded pixel values, use .sp, .w, .h instead.

5. Keep your content modular with helper functions like _buildMainContent().

Conclusion

Creating responsive and adaptive UIs in Flutter is not just about making things “look okay” on different devices, it’s about crafting fluid, consistent, and usable experiences regardless of screen size, orientation or platform. By leveraging Flutter’s built-in layout widgets (Row, Column, Flexible, Expanded, LayoutBuilder), and coupling them with screen-aware APIs (MediaQuery, SafeArea, etc) and specialized packages (like flutter_screenutil), you can build apps that scale beautifully.

Key takeaways:

• Think flexibility first: avoid rigid sizing.

• Use screen size/constraints to decide layout variations (instead of device type).

• Scale typography, images, paddings to maintain usability and aesthetics.

• Always test on multiple devices/sizes/orientations.

• Encapsulate responsive logic in reusable widgets to keep your code clean and maintainable.

With these practices in hand, you’ll be well-equipped to deliver visually stunning, well-performing, and truly responsive Flutter applications for 2024 and beyond.

References

• “Adaptive and responsive design in Flutter”, Flutter Docs. (Flutter Docs)

• “Building Responsive UIs in Flutter: Tips and Best Practices”. TheOneTechnologies blog. (TheOneTechnologies)

• “Best strategy to implement responsive design : r/FlutterDev”, Reddit discussion. (Reddit)

• “How to Make a Flutter App Responsive for Different Mobile Screen Sizes”, StackOverflow Q&A. (Stack Overflow)

• “5 Best Practices to Build Robust and Responsive UIs in Flutter”, Somnio Software blog. (somniosoftware.com)

In this article, we'll dive into Optimistic UI and explore how it works and keeps your web experience smooth as butter. We'll build a simple task app together that'll show how Optimistic UI can help turn mundane tasks into lightning-fast interactions that leave your users feeling happy.

Prerequisites

• Fundamentals of JavaScript and React
• Fundamentals of Async programming and Axios
• Knowledge of hook-oriented fetch libraries would also be beneficial

What We'll Cover:

1. What is Optimistic UI?
2. Why Does Optimistic UI Matter?
3. Other Benefits of Optimistic UI
4. Introducing SWR: Stale-While-Revalidate
5. How to Set Up the Environment
6. How to Build the Task App UI
   – Regular CRUD UI
   – Optimistic CRUD UI
7. Drawbacks of Optimistic UI
8. Ideal Use Cases for Optimistic UI
9. Conclusion

What is Optimistic UI?

At its core, Optimistic UI is all about keeping your app feeling snappy and responsive, even when a lot is happening behind the scenes. It's like having a superpower that lets your app predict the future – well, sort of.

When you perform an action in your app – whether it's adding a new item to a list or updating a profile – Optimistic UI kicks in to make it happen right away, without waiting for confirmation from the server. It's the ultimate optimist, always assuming everything will work out just fine.

Why Does Optimistic UI Matter?

So why should you care about Optimistic UI? Simple: because it's the secret sauce that turns good apps into great ones.

Think about it: when you click a button, you expect something to happen – and you expect it to happen fast. That's where Optimistic UI shines. By giving your users instant feedback and keeping your app feeling snappy, Optimistic UI enhances the overall user experience.

No more staring at loading screens or wondering if your click actually did anything – with Optimistic UI, every action feels easy and effective.

Other Benefits of Optimistic UI

1. Reduced Perceived Latency: Optimistic UI reduces the perceived latency of actions by displaying changes immediately without waiting for server confirmation. This creates a perception of faster response times, even if server communication takes longer.
2. Improved Responsiveness: Optimistic UI allows users to interact with the app continuously without interruptions from loading spinners or waiting screens. This uninterrupted flow enhances the overall responsiveness of the application.
3. Support for Complex Interactions: Optimistic UI helps complex interactions, such as drag-and-drop, multi-step processes, and real-time collaboration, feel fluid and intuitive. This flexibility opens up possibilities for innovative features and functionalities in the app.
4. Increased User Engagement: The responsiveness and interactivity provided by Optimistic UI can lead to increased user engagement and retention. Users are more likely to return to an app that provides a smooth and enjoyable experience.

Introducing SWR: Stale-While-Revalidate

Before we dive into the implementation, let's take a moment to talk about SWR. SWR is a lightweight React Hook library for data fetching. SWR stands for Stale-While-Revalidate, and it strikes the perfect balance between performance and freshness when fetching data in your React applications.

SWR also automatically revalidates data in the background while still serving stale data from the cache. This means your app stays fast and responsive, even when fetching fresh data from the server.

But that's not all – SWR also supports key features like caching, pagination, and error handling, making it a powerful tool in your arsenal for building fast, reliable web applications as well as implementing Optimistic UI.

How to Set Up the Environment

I've prepared a GitHub repository with starter files to speed things up. Simply clone this repo and install the dependencies.

The starter code consists of the basic JSX components required, as well as some basic Axios functions for performing CRUD operations. After installing all the necessary packages with npm i, open your terminal and start up your local endpoint using json-server.

npx json-server data/db.json -p 3500

To see all your data present, head over to that route:

Showing initial data

How to Build the Task App UI

In this section, we’ll first implement CRUD applications without Optimistic UI and then with Optimistic UI to show the differences between them.

Regular CRUD UI

Start by heading over to your TaskContainer component, then use the useSWR hook to call your fetch function.

const {
    isLoading,
    error,
    data: tasks,
    mutate,
  } = useSWR(cacheKey, fetchTasks, {
    onSuccess: (data) =>
      data.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt)),
  });

SWR uses a similar data fetching hook and pattern to other libraries such as React Query (TanStack Query) and Redux Toolkit Query. This hook fetching pattern often returns a loading state, an error state, your fetched data (if any) and a mutation function (but more about that later).

Note: The cacheKey is a unique key used to notify SWR when and where to re-call your function. The onSuccess function is a method used to trigger another action when the fetch is successful – in this case, sorting the data in descending order.

With your data back, you can now create the JSX markup.

return (

      <div className="flex flex-col gap-8 p-4">

        <div className="p-4 shadow-lg ">
          <div className="flex flex-col gap-4 ">
            {tasks &&
              tasks.map((task, index) => {
                return (
                  <div
                    key={task.id}
                    className="flex gap-4 items-center py-2 px-6 rounded-md bg-[#74a0a6]">
                    <div>
                      <label
                        htmlFor={`task-${task.id}`}
                        key={task.id}
                        className={`flex gap-4 text-[14px] items-center font-bold list-none p-4 rounded bg-[#88adb3] cursor-pointer hover:bg-[#609299]`}>
                        <div className="inline-flex items-center">
                          <label
                            className="relative flex items-center p-3 rounded-full cursor-pointer"
                            htmlFor="checkbox">
                            <input
                              type="checkbox"
                              name={`task-${task.id}`}
                              id={`task-${task.id}`}
                              className="before:content[''] peer relative h-5 w-5 cursor-pointer appearance-none rounded-md border border-[#edebd9] transition-all before:absolute before:top-2/4 before:left-2/4 before:block before:h-12 before:w-12 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-blue-gray-500 before:opacity-0 before:transition-opacity checked:border-lines checked:bg-[#545240] checked:before:bg-[#edebd9] hover:before:opacity-10 before:checked:hover:before:opacity-10 "
                              checked={task.completed}
                                                         />
                            <span className="absolute transition-opacity opacity-0 pointer-events-none text-stone-100 top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 peer-checked:opacity-100">
                              <svg
                                xmlns="http://www.w3.org/2000/svg"
                                className="h-3.5 w-3.5"
                                viewBox="0 0 20 20"
                                fill="currentColor"
                                stroke="currentColor"
                                strokeWidth="1">
                                <path
                                  fillRule="evenodd"
                                  d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                                  clipRule="evenodd"></path>
                              </svg>
                            </span>
                          </label>
                        </div>
                      </label>
                    </div>
                    <div>
                      <h2 className="text-xl font-bold text-[#161515] ">
                        {task.title}
                      </h2>
                      <p className="text-sm font-semibold text-[#42403f] ">
                        {task.description}
                      </p>
                      <div className="flex gap-2 mt-2 text-xs font-bold">
                        <div className="flex items-center ">
                          <img
                            src={userImages[index]}
                            alt=""
                            className="w-10 h-10 rounded-full "
                          />
                          <span> {task.assignedTo}</span>
                        </div>
                      </div>
                    </div>
                    <div
                      className="p-2 ml-auto rounded-full cursor-pointer hover:bg-red-300"
                    >
                      <FaTrash color="#545240" />
                    </div>
                  </div>
                );
              })}
          </div>
        </div>
      </div>

  );

UI after data fetching

After that, head into your Taskform component and create a form UI for creating new tasks.

import { addSingleTask } from "./services/api";
import toast from "react-hot-toast";
import { useState } from "react";

export default function Taskform() {
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const [assignedTo, setAssignedTo] = useState("");

  return (
    <div className="bg-[#74a0a6] p-4 rounded-md">
      <form className="flex flex-col w-full gap-2 ">
        <label htmlFor="title">
          <p className="font-bold ">Title</p>
          <input
            type="text"
            className="w-full font-medium  focus:outline-[#74a0a6] focus-within:outline-[#74a0a6] p-1 bg-transparent border rounded-md"
            value={title}
            onChange={(e) => setTitle(e.target.value)}
          />
        </label>

        <label htmlFor="description">
          <p className="font-bold ">Description</p>
          <input
            type="text"
            className="w-full font-medium  focus:outline-[#74a0a6] focus-within:outline-[#74a0a6] p-1 bg-transparent border rounded-md"
            value={description}
            onChange={(e) => setDescription(e.target.value)}
          />
        </label>

        <label htmlFor="assignedTo">
          <p className="font-bold ">Assigned To</p>
          <input
            type="text"
            className="w-full font-medium  focus:outline-[#74a0a6] focus-within:outline-[#74a0a6] p-1 bg-transparent border rounded-md"
            value={assignedTo}
            onChange={(e) => setAssignedTo(e.target.value)}
          />
        </label>
        <button className="p-2 mt-3 border text-white rounded-md w-max hover:bg-white hover:text-[#74a0a6]">
          Add
        </button>
      </form>
    </div>
  );
}

After that, import it into your TaskContainer component.

return (

      <div className="flex flex-col gap-8 p-4">
        <Taskform />
        <div className="p-4 shadow-lg ">
          <div className="flex flex-col gap-4 ">
            {tasks &&
              tasks.map((task, index) => {

UI with Form added

To add a new task, create a handler function in the Taskform, then import your POST function from your API file.

const addTaskMutation = async (e) => {
    e.preventDefault();
    const createdAt = new Date().toISOString(); // Get current timestamp as a string

    try {
      await addSingleTask({
        title,
        description,
        assignedTo,
        completed: false,
        createdAt,
      });

      toast.success("Task added succesfully.");
      setTitle("");
      setDescription("");
      setAssignedTo("");
    } catch (err) {
      toast.error("Failed to add the new task.");
    }
  };

Finally, call the mutate function after your POST function call to enable SWR to invalidate your current data and make a new request. You can get this mutate function from the useSWR hook in the TaskContainer, then pass it through props to the form.

const {
    isLoading,
    error,
    data: tasks,
    mutate,
  } = useSWR(cacheKey, fetchTasks, {
    onSuccess: (data) =>
      data.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt)),
  });
  return (
    <div className="flex flex-col gap-8 p-4">
      <Taskform mutate={mutate} />

Then call it in the TaskForm.

import { addSingleTask } from "./services/api";
import toast from "react-hot-toast";
import { useState } from "react";

export default function Taskform({ mutate }) {
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const [assignedTo, setAssignedTo] = useState("");

  const addTaskMutation = async (e) => {
    e.preventDefault();
    const createdAt = new Date().toISOString();
    try {
      await addSingleTask({
        title,
        description,
        assignedTo,
        completed: false,
        createdAt,
      });
      mutate();

      toast.success("Task added succesfully.");
      setTitle("");
      setDescription("");
      setAssignedTo("");
    } catch (err) {
      toast.error("Failed to add the new task.");
    }
  };
  return (
    <div className="bg-[#74a0a6] p-4 rounded-md">
      <form
        className="flex flex-col w-full gap-2 "
        onSubmit={(e) => addTaskMutation(e)}>
        <label htmlFor="title">
          <p className="font-bold ">Title</p>
          <input
            type="text"
            className="w-full font-medium  focus:outline-[#74a0a6] focus-within:outline-[#74a0a6] p-1 bg-transparent border rounded-md"
            value={title}
            onChange={(e) => setTitle(e.target.value)}
          />
        </label>

        <label htmlFor="description">
          <p className="font-bold ">Description</p>
          <input
            type="text"
            className="w-full font-medium  focus:outline-[#74a0a6] focus-within:outline-[#74a0a6] p-1 bg-transparent border rounded-md"
            value={description}
            onChange={(e) => setDescription(e.target.value)}
          />
        </label>

        <label htmlFor="assignedTo">
          <p className="font-bold ">Assigned To</p>
          <input
            type="text"
            className="w-full font-medium  focus:outline-[#74a0a6] focus-within:outline-[#74a0a6] p-1 bg-transparent border rounded-md"
            value={assignedTo}
            onChange={(e) => setAssignedTo(e.target.value)}
          />
        </label>
        <button className="p-2 mt-3 border text-white rounded-md w-max hover:bg-white hover:text-[#74a0a6]">
          Add
        </button>
      </form>
    </div>
  );
}

Testing your component now gives the following result:

Regular Create Operation

As you can see, the list is updated after each form submission. But this still doesn’t highlight our need for optimistic UI. You’re probably thinking, if the operation happened that fast, why bother with Optimistic UI?

What's the point gif

Well, for starters, no real-world application is ever going to beat the speed of your local JSON server, as the data is readily available to you and users often have unstable network connections.

Let's slow down the fetch to illustrate a real-world data request better. This better simulates a real-world scenario as users often come from different locations that have varying internet speeds.

Start by creating a delay function that runs before each of your function calls.

import axios from "axios";

const tasksApi = axios.create({
  baseURL: "http://localhost:3500",
});

export const tasksUrlEndpoint = "/tasks";

const delay = () => new Promise((res) => setTimeout(() => res(), 1200));

export const fetchTasks = async () => {
   await delay();
  const response = await tasksApi.get(tasksUrlEndpoint);
  return response.data;
};

export const addSingleTask = async ({
  title,
  description,
  completed,
  assignedTo,
  createdAt,
}) => {
  await delay();
  const response = await tasksApi.post(tasksUrlEndpoint, {
    title,
    description,
    completed,
    assignedTo,
    createdAt,
  });
  return response.data;
};

export const updateSingleTask = async (task) => {
  await delay();
  const response = await tasksApi.patch(`${tasksUrlEndpoint}/${task.id}`, task);
  return response.data;
};

export const deleteSingleTask = async ({ id }) => {
  await delay();
  return await tasksApi.delete(`${tasksUrlEndpoint}/${id}`, id);
};

Then attempt your create operation again.

Create operation after delay

As you may have noticed, the create operation was only fired after the delay function (spanning 1.2 seconds) finished running, which caused a brief spell of inactivity on the screen.

The usual way to handle those periods between loading is usually a loading spinner or indicator telling you that some background activity is running. But this often disrupts your flow when working in the application, and quite frankly is disappointing.

The same static effect can be seen in the update operation, where users have to wait for server confirmation to see fresh data.

const updateTaskMutation = async (updatedTask) => {
    try {
      await updateSingleTask(updatedTask);
      mutate();
      toast.success("Successfully updated task");
    } catch (err) {
      toast.error("Failed to update the task.");
    }
  };

  return (
    <div className="flex flex-col gap-8 p-4">
      <Taskform mutate={mutate} />
      <div className="p-4 shadow-lg ">
        <div className="flex flex-col gap-4 ">
          {tasks &&
            tasks.map((task, index) => {
              return (
                <div
                  key={task.id}
                  className="flex gap-4 items-center py-2 px-6 rounded-md bg-[#74a0a6]">
                  <div>
                    <label
                      htmlFor={`task-${task.id}`}
                      key={task.id}
                      className={`flex gap-4 text-[14px] items-center font-bold list-none p-4 rounded bg-[#88adb3] cursor-pointer hover:bg-[#609299]`}>
                      <div className="inline-flex items-center">
                        <label
                          className="relative flex items-center p-3 rounded-full cursor-pointer"
                          htmlFor="checkbox">
                          <input
                            type="checkbox"
                            name={`task-${task.id}`}
                            id={`task-${task.id}`}
                            className="before:content[''] peer relative h-5 w-5 cursor-pointer appearance-none rounded-md border border-[#edebd9] transition-all before:absolute before:top-2/4 before:left-2/4 before:block before:h-12 before:w-12 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-blue-gray-500 before:opacity-0 before:transition-opacity checked:border-lines checked:bg-[#545240] checked:before:bg-[#edebd9] hover:before:opacity-10 before:checked:hover:before:opacity-10 "
                            checked={task.completed === true}
                            onChange={() =>
                              updateTaskMutation({
                                ...task,
                                completed: !task.completed,
                              })
                            }
                          />
                          <span className="absolute transition-opacity opacity-0 pointer-events-none text-stone-100 top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 peer-checked:opacity-100">
                            <svg
                              xmlns="http://www.w3.org/2000/svg"
                              className="h-3.5 w-3.5"
                              viewBox="0 0 20 20"
                              fill="currentColor"
                              stroke="currentColor"
                              strokeWidth="1">
                              <path
                                fillRule="evenodd"
                                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                                clipRule="evenodd"></path>
                            </svg>
                          </span>
                        </label>
                      </div>
                    </label>
                  </div>
                  <div>
                    <h2 className="text-xl font-bold text-[#161515] ">
                      {task.title}
                    </h2>
                    <p className="text-sm font-semibold text-[#42403f] ">
                      {task.description}
                    </p>
                    <div className="flex gap-2 mt-2 text-xs font-bold">
                      <div className="flex items-center ">
                        <img
                          src={userImages[index]}
                          alt=""
                          className="w-10 h-10 rounded-full "
                        />
                        <span> {task.assignedTo}</span>
                      </div>
                    </div>
                  </div>
                  <div
                    className="p-2 ml-auto rounded-full cursor-pointer hover:bg-red-300"
                   >
                    <FaTrash color="#545240" />
                  </div>
                </div>
              );
            })}
        </div>
      </div>
    </div>
  );
}

Update operation after delay

And in the delete operation, which also waits for server conformation to rehydrate the page.

const deleteTaskMutation = async ({ id }) => {
    try {
      await deleteSingleTask({ id });
      mutate();
      toast.success("Successfully deleted task");
    } catch (err) {
      toast.error("Failed to delete the task.");
    }
  };
  return (
    <div className="flex flex-col gap-8 p-4">
      <Taskform mutate={mutate} />
      <div className="p-4 shadow-lg ">
        <div className="flex flex-col gap-4 ">
          {tasks &&
            tasks.map((task, index) => {
              return (
                <div
                  key={task.id}
                  className="flex gap-4 items-center py-2 px-6 rounded-md bg-[#74a0a6]">
                  <div>
                    <label
                      htmlFor={`task-${task.id}`}
                      key={task.id}
                      className={`flex gap-4 text-[14px] items-center font-bold list-none p-4 rounded bg-[#88adb3] cursor-pointer hover:bg-[#609299]`}>
                      <div className="inline-flex items-center">
                        <label
                          className="relative flex items-center p-3 rounded-full cursor-pointer"
                          htmlFor="checkbox">
                          <input
                            type="checkbox"
                            name={`task-${task.id}`}
                            id={`task-${task.id}`}
                            className="before:content[''] peer relative h-5 w-5 cursor-pointer appearance-none rounded-md border border-[#edebd9] transition-all before:absolute before:top-2/4 before:left-2/4 before:block before:h-12 before:w-12 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-blue-gray-500 before:opacity-0 before:transition-opacity checked:border-lines checked:bg-[#545240] checked:before:bg-[#edebd9] hover:before:opacity-10 before:checked:hover:before:opacity-10 "
                            checked={task.completed === true}
                            onChange={() =>
                              updateTaskMutation({
                                ...task,
                                completed: !task.completed,
                              })
                            }
                          />
                          <span className="absolute transition-opacity opacity-0 pointer-events-none text-stone-100 top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 peer-checked:opacity-100">
                            <svg
                              xmlns="http://www.w3.org/2000/svg"
                              className="h-3.5 w-3.5"
                              viewBox="0 0 20 20"
                              fill="currentColor"
                              stroke="currentColor"
                              strokeWidth="1">
                              <path
                                fillRule="evenodd"
                                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                                clipRule="evenodd"></path>
                            </svg>
                          </span>
                        </label>
                      </div>
                    </label>
                  </div>
                  <div>
                    <h2 className="text-xl font-bold text-[#161515] ">
                      {task.title}
                    </h2>
                    <p className="text-sm font-semibold text-[#42403f] ">
                      {task.description}
                    </p>
                    <div className="flex gap-2 mt-2 text-xs font-bold">
                      <div className="flex items-center ">
                        <img
                          src={userImages[index]}
                          alt=""
                          className="w-10 h-10 rounded-full "
                        />
                        <span> {task.assignedTo}</span>
                      </div>
                    </div>
                  </div>
                  <div
                    className="p-2 ml-auto rounded-full cursor-pointer hover:bg-red-300"
                    onClick={() => deleteTaskMutation({ id: task.id })}>
                    <FaTrash color="#545240" />
                  </div>
                </div>
              );
            })}
        </div>
      </div>
    </div>
  );
}

Delete operation after delay

These few seconds of inactivity or loading can impact the level of satisfaction users get from your application, which is why we’re going to use Optimistic UI to fix it.

Optimistic CRUD UI

The way this works in practical terms is that, when you perform an action, it immediately adds to your UI state (cache) while the async operation is running in the background.

If the operation is successful, nothing on the UI changes and everything acts like it worked on the first try. But if it fails, the UI state reverts to its previous state and an error is displayed via your toast.

An optimistic UI approach offers a much better user experience than traditional loading messages or spinners. When you see an immediate response after clicking a button, the app feels faster and more responsive, keeping you engaged and satisfied. You can continue interacting with the app seamlessly, without waiting for server confirmations, making the experience smoother and more intuitive.

This immediate feedback reduces your perceived wait time and keeps the interface visually stable, avoiding annoying flickers or sudden changes. Plus, when the app feels this responsive, you're more likely to keep using it and have a positive experience.

On the flip side, loading messages or spinners can interrupt your flow, making the app feel slower and potentially frustrating you.

Optimistic UI diagram

It still sounds a little like gibberish, eh? Well, let’s learn as we go!

In your swrAPI file, create another mutation function. This function takes in two parameters: the new task you want to add and the list of already existing tasks.

export const addTaskMutation = async (newTask, tasks) => {
  };

Then it uses your already existing create function to attempt to create a new task. After this, you store the result and return that result in a new array, together with the already existing tasks.

export const addTaskMutation = async (newTask, tasks) => {
  const addedTask = await addSingleTask(newTask);
  return [...tasks, addedTask].sort(
    (a, b) => new Date(b.createdAt) - new Date(a.createdAt)
  );
};

As you would suspect, this function does the same as the previous create function we wrote, but it’s what comes next that we’re after.

Next, create an options function which is responsible for treating the async operation as a synchronous operation and immediately yields a response.

This function also takes some parameters such as:

• optimisticData: which is the new data you want to display immediately.
• rollbackOnError: which sets the state to the previous one if the request fails.
• populateCache: which immediately sets this optimistic data in our UI state.
• revalidate: which lets us enable or disable another fetch after this function runs.

export const addTaskOptions = (newTask, tasks) => {
  return {
    optimisticData: [...tasks, newTask].sort(
      (a, b) => new Date(b.createdAt) - new Date(a.createdAt)
    ),
    rollbackOnError: true,
    populateCache: true,
    revalidate: false,
  };
};

To use this optimistic UI method with a create operation, import both functions into your TaskForm. Both functions need to be wrapped in the mutate function since they’re both attempting to mutate the data.

import {
  addTaskMutation as addSingleTask,
  addTaskOptions,
} from "./services/swrAPI";

import toast from "react-hot-toast";
import { useState } from "react";

export default function Taskform({ mutate, tasks }) {
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const [assignedTo, setAssignedTo] = useState("");

  const addTaskMutation = async (e) => {
    e.preventDefault();
    const createdAt = new Date().toISOString();
    try {

      await mutate(
        addSingleTask(
          {
            title,
            description,
            assignedTo,
            completed: false,
            createdAt,
          },
          tasks
        ),
        addTaskOptions(
          {
            title,
            description,
            assignedTo,
            completed: false,
            createdAt,
          },
          tasks
        )
      ); 
     toast.success("Task added succesfully.");

    } catch (err) {
      toast.error("Failed to add the new task.");
    }
  };

Note: The tasks array is passed into the TaskForm via props for this functionality to work.

To see instances where there might be an error, give your functions a 50/50 chance of success or failure, by adding a random condition.

export const addSingleTask = async ({
  title,
  description,
  completed,
  assignedTo,
  createdAt,
}) => {
  await delay();
  if (Math.random() < 0.5) throw new Error("Failed to add new task");
  const response = await tasksApi.post(tasksUrlEndpoint, {
    title,
    description,
    completed,
    assignedTo,
    createdAt,
  });
  return response.data;
};

export const updateSingleTask = async (task) => {
  await delay();
  if (Math.random() < 0.5) throw new Error("Failed to update task");
  const response = await tasksApi.patch(`${tasksUrlEndpoint}/${task.id}`, task);
  return response.data;
};

export const deleteSingleTask = async ({ id }) => {
  await delay();
  if (Math.random() < 0.5) throw new Error("Failed to update task");
  return await tasksApi.delete(`${tasksUrlEndpoint}/${id}`, id);
};

Testing your create endpoint now gives the following result:

Optimistic UI with Create operation

And voilà! Your app is officially optimistic. It attempts to immediately add the new task to the list even if it fails and gracefully rolls back in the case of an error.

This works similarly for the update operation – starting with the updated update function:

export const updateTaskMutation = async (updatedTask, tasks) => {
  const updatedTaskResponse = await updateSingleTask(updatedTask);
  return tasks.map((task) =>
    task.id === updatedTask.id ? updatedTaskResponse : task
  );
};

Then its corresponding options function:

export const updateTaskOptions = (updatedTask, tasks) => {
  return {
    optimisticData: tasks.map((task) =>
      task.id === updatedTask.id ? updatedTask : task
    ),
    rollbackOnError: true,
    populateCache: true,
    revalidate: false,
  };
};

To test this out, import the new updateSingleTask and updateOptions function in your TaskConatiner, and update the handler function.

const updateTaskMutation = async (updatedTask) => {
    try {
      await mutate(
        updateSingleTask(updatedTask, tasks),
        updateTaskOptions(updatedTask, tasks)
      );
      toast.success("Successfully updated task");
    } catch (err) {
      toast.error("Failed to update the task.");
    }
  };

Which gives the following result:

Optimistic UI with Update operation

And finally for the delete action:

// Function for deleting a task
export const deleteTaskMutation = async (taskToDelete, tasks) => {
  await deleteSingleTask(taskToDelete);
  return tasks.filter((task) => task.id !== taskToDelete.id);
};

// Options for deleting a task
export const deleteTaskOptions = (taskToDelete, tasks) => {
  return {
    optimisticData: tasks.filter((task) => task.id !== taskToDelete.id),
    rollbackOnError: true,
    populateCache: true,
    revalidate: false,
  };
};

Which can be used in the TaskContainer delete handler like so:

const deleteTaskMutation = async ({ id }) => {
    try {
      await mutate(
        deleteSingleTask({ id }, tasks),
        deleteTaskOptions({ id }, tasks)
      );
      toast.success("Successfully deleted task");
    } catch (err) {
      toast.error("Failed to delete the task.");
    }
  };

Which gives this:

Optimistic UI with Delete operation

Drawbacks of Optimistic UI

Now you must be thinking, if optimistic UI is so great, why not use it everywhere?

lighter hairspray gif

Well, like everything, that action turns chaotic without moderation. Here are some reasons why you should use optimistic UI in moderation.

1. Excessive Updates: Optimistic UI might get a bit carried away with updates, especially if your app's moving faster than your internet connection. Too many updates can slow things down, so it's essential to strike a balance.
2. Exposing server-side logic: While offloading all the smarts to your app (like generating unique IDs or checking if that username is already taken) is tempting, remember that your server plays a crucial role too. Letting the front end of your app handle everything can lead to security risks and messy code, so be mindful of where you're putting your logic.
3. Managing Mishaps: While Optimistic UI typically expects smooth sailing, life has a way of throwing curveballs. From a sudden internet hiccup to the server taking an unexpected coffee break, glitches can be quite a headache to manage gracefully.
4. Avoid Rapid Changes: Imagine adding an item to your shopping cart, and then deciding to remove it before the "add" request even reaches the server. It's like changing your mind at the checkout counter – a bit confusing, right? Rapid changes like these can leave your app disoriented, so it's best to proceed cautiously.

Ideal Use Cases for Optimistic UI

While optimistic UI may not be the holy grail of state management you were hoping to discover, it does have some good use cases such as:

1. Instant Messaging Apps: Almost all instant messaging platforms currently use this pattern. Your messages appear instantly in the chat window, even before they're confirmed by the server. This creates a seamless and responsive chatting experience, keeping the conversation flowing effortlessly.
2. Collaborative Editing Tools: Whether you're working on a document with colleagues or collaborating on a project with teammates, Optimistic UI ensures that changes are reflected in real time. As you type, edit, or make updates, your changes are immediately visible to others, fostering collaboration and productivity.
3. Social Media Feeds: Scroll through your social media feed, and you'll see posts, likes, and comments popping up like magic. Optimistic UI ensures that interactions, such as liking a post or leaving a comment, are reflected instantly, providing a more engaging browsing experience.
4. E-commerce Websites: Adding items to your shopping cart, updating quantities, and checking out should feel like a breeze. Optimistic UI speeds up the shopping process by immediately updating your cart and displaying feedback, such as item availability or pricing changes, without delay.

For convenience, here are some resources you may need:

• Starter Code
• Finished Code

I'd like to acknowledge Dave Gray. It was his YouTube video that inspired this article.

Conclusion

As we wrap up our dive into Optimistic UI, it's clear that this technique can be a user experience game-changer. It's the rush of your message popping up instantly or your shopping cart updating in real-time.

Optimistic UI is about speed as well as how it makes users feel – connected, empowered, and delighted. So, next time you click and see the magic unfold, remember: it's not just code...it's the pulse of user happiness (not a Coca-Cola ad 😂). Keep that magic alive in your apps!

Happy coding, and have an optimistic day!

Like my articles?

Feel free to buy me a coffee here, to keep my brain chugging and provide more articles like this.

Coffee Tom

Contact Information

Want to connect or contact me? Feel free to hit me up on the following:

• Twitter / X: @jajadavid8
• LinkedIn: David Jaja
• Email: Jajadavidjid@gmail.com

If you are looking for a way to build modern, stylish, and accessible web applications with Next.js, then Shadcn is a great option.

In this guide, you'll learn how to install and use Shadcn in your Next.js projects, how to style elements, and how to customize Shadcn components.

Table of Contents

• What is Shadcn?
• How to Install Next.js and Shadcn
• How to Install Next.js
• How to Install Shadcn
• How to Use Shadcn in Next.js
• How to Style a Button The Hard Way and The Shadcn Way
• How to Add a Component from Shadcn
• Styling a Button The Hard Way
• Styling a Button The Shadcn Way
• How to Customize Shadcn Components
• Conclusion

What is Shadcn?

Shadcn UI is not specifically a component library or UI framework. As stated in the documentation, it is described as "a compilation of reusable components that can be easily copied and pasted into our applications."

Shadcn leverages Tailwind CSS and Radix UI as its foundation. It presently offers compatibility with Next.js, Gatsby, Remix, Astro, Laravel, and Vite. There's a manual integration guide that can help you incorporate it with other technologies.

You can get the complete source code for this tutorial here.

How to Install Next.js and Shadcn

I'll follow the instructions in the Shadcn docs, so you can follow along if you like.

First, you have to choose what framework you are currently using. This article and the code in my repo above was written with Next.js in mind, so select the Next.js option.

Choose a framework to set up Shadcn

Now, you need to install and configure a new Next.js project.

How to Install Next.js

I typically use npm, but if you use a different package manager, feel free to copy a command for your respective package manager below.

To install Next.js with npm:

npx create-next-app@latest my-app --typescript --tailwind --eslint

To install Next.js with yarn:

yarn create next-app@latest my-app --typescript --tailwind --eslint

To install Next.js with pnpm:

pnpm create next-app@latest my-app --typescript --tailwind --eslint

To install Next.js with bun:

bunx --bun create-next-app@latest my-app --typescript --tailwind --eslint

After running one of those commands, you'll see the following configuration questions:

Need to install the following packages:
create-next-app@14.1.0
Ok to proceed? (y) y
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes

I selected "No" for the first question as I don't want to have a src directory inside my app directory.

I selected "Yes" for the second question because I want to use app router, which is the recommended way to go for Next.js 14.

Finally, I selected "No" for the third question because I like the way import works with @ in Next.js 14.

How to Install Shadcn

Before continuing, remember to go into the my-app directory in your terminal:

cd my-app

To initialize Shadcn with npm:

npx shadcn-ui@latest init

To initialize Shadcn with yarn:

npx shadcn-ui@latest init

To initialize Shadcn with pnpm:

pnpm dlx shadcn-ui@latest init

To initialize Shadcn with bun:

bunx --bun shadcn-ui@latest init

After running one of those commands you'll see some configuration questions again, but this time they're for Shadcn:

✔ Which style would you like to use? › New York
✔ Which color would you like to use as base color? › Slate
✔ Would you like to use CSS variables for colors? › yes

You can see the questions and my responses in the code above.

For the first question, there are two options, default and New York. I chose the "New York" style.

For the second question, there are five options Slate, Gray, Zinc, Neutral, Stone. I chose Slate because I like a minimalist black and white styling.

For the third question, I there are two options Yes and No. I chose yes, as I prefer to have CSS variables enabled for styling (although we won't be using this in this article).

You can read more about the style options, base options, and this configuration setup here.

And with that, you've set up a new Next.js 14 project with Shadcn.

Now you can see two new directories that have been added to your project directory, components and lib.

Notice that the components directory is currently empty, which means that Shadcn doesn't load up your project with any components you might not use. This gives you a lot of flexibility and keeps your project lightweight (so you can just add the components you need).

How to Use Shadcn in Next.js

First, let's remove all the boilerplate code from the my-app project's page.tsx file. (You only need to remove the boilerplate code from my-app/page.tsx.)

After removing all the boilerplate code from the page.tsx file inside the app directory, I'll add a simple hello world text.

Here's the updated page.tsx code:

export default function Home() {
  return (
    <>
      <h1>Hello World</h1>
    </>
  );
}

And here's what your project should look like in the browser:

Hello World setup for the Next.js project

How to Style a Button the Hard Way and the Shadcn Way

Now, lets add two buttons to the page. One button will be simple with no styling, and the other will be a component from Shadcn.

How To Add a Component from Shadcn

Before we add our buttons, though, we have to learn how to add a component from Shadcn into our project. Here's how to do that:

1. Go to the Shadcn docs.
2. Click on whatever component you want to use.
3. Then you'll see the command you should run to add that component to your project.
4. Finally, import that component into your project and start using it.

To add the Button component from Shadcn, follow these steps:

1. Go to the Button component page.
2. Then run this command in your terminal: npx shadcn-ui@latest add button. Note: This command is for npm – if you use a different package manager, you'll need to modify the command slightly.
3. Finally, import the button component in the file where you want to use it.

Now we'll see examples of adding a button in two different ways: using Tailwind CSS, and using Shadcn.

Styling a Button the Hard Way (Using Tailwind)

export default function Home() {
  return (
    <>
      <button className="p-2 bg-orange-400">Click me</button>
    </>
  );
}

Custom button with orange background

I have created a button with an orange background having a padding of 2 units. You can see that it looks ugly and also doesn't have any hover effects by default.

Styling a Button the Shadcn Way

import { Button } from "@/components/ui/button";

export default function Home() {
  return (
    <>
      <Button variant="outline">Button</Button>
    </>
  );
}

Shadcn default button

To use the Shadcn button, first import the Button component to the file where you want to use it – you don't need to add any styling to it (You can customize it, which you'll learn how to do in the next section). By default it looks good and it has hover effects. So just import the component and then you can use it.

You can also play around with the different options that Shadcn components give you. Either go to the docs page of that component and take a look at the options or open up the component's source code that is inside the components/ui directory.

Let's take a look at button.tsx source code to check how many variants of buttons you can create.

import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority";

import { cn } from "@/lib/utils";

const buttonVariants = cva(
  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
        default:
          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
        destructive:
          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
        outline:
          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
        secondary:
          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default: "h-9 px-4 py-2",
        sm: "h-8 rounded-md px-3 text-xs",
        lg: "h-10 rounded-md px-8",
        icon: "h-9 w-9",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
);

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean;
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : "button";
    return (
      <Comp
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
    );
  }
);
Button.displayName = "Button";

export { Button, buttonVariants };

You can see that there's a variants object, and inside that there are multiple variants to choose from. Notice that there's a size object that allows you to choose different sizes for the button as well.

You can also see that there's a defaultVariants object that stores the default variant and the default size of the button.

How to Customize Shadcn Components

Remember that after installing Shadcn, the components directory was empty. But after adding the Button component, you can see that there's a ui directory inside components directory. And inside the ui directory you'll have the Button.tsx file, which is the code for the Button component.

If you open the Button.tsx file, you'll see that there are multiple variants of the Button component like default, destructive, outline, secondary, ghost, and link. There's also a default size, and other sizes to choose from:

import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const buttonVariants = cva(
  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
        default:
          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
        destructive:
          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
        outline:
          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
        secondary:
          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default: "h-9 px-4 py-2",
        sm: "h-8 rounded-md px-3 text-xs",
        lg: "h-10 rounded-md px-8",
        icon: "h-9 w-9",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : "button"
    return (
      <Comp
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
    )
  }
)
Button.displayName = "Button"

export { Button, buttonVariants }

One of the best parts about Shadcn components is that you can customize them and remove variants that you won't use. You can also add your own variants to the component.

For example, say that you want to add the custom button we coded first as a Shadcn Button component variant. You can do that like this:

import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority";

import { cn } from "@/lib/utils";

const buttonVariants = cva(
  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
        default:
          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
        destructive:
          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
        outline:
          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
        secondary:
          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
        myButton: "p-2 bg-orange-400",
      },
      size: {
        default: "h-9 px-4 py-2",
        sm: "h-8 rounded-md px-3 text-xs",
        lg: "h-10 rounded-md px-8",
        icon: "h-9 w-9",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
);

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean;
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : "button";
    return (
      <Comp
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
    );
  }
);
Button.displayName = "Button";

export { Button, buttonVariants };

Notice, I have added a new variant myButton and then simply pasted the styling that we used for the custom button. That's it and now you have your own custom button inside the Shadcn Button component.

Notice that the code now includes a new variant named myButton, and I simply pasted in the styling for the custom button from our ealier example. And that's it! Now you have your own custom Shadcn Button component variant.

Here's how you can use the custom myButton variant in your project:

import { Button } from "@/components/ui/button";
export default function Home() {
  return (
    <div className="flex justify-center items-center flex-col gap-10">
      <Button variant="outline" size="sm">
        sm button
      </Button>
      <Button variant="destructive" size="lg">
        large button
      </Button>
      <Button variant="ghost" size="lg">
        ghost button
      </Button>
      <Button variant="link" size="lg">
        link button
      </Button>
      <Button variant="myButton">My Button</Button>
    </div>
  );
}

Shadcn multiple variants buttons

Note that I've added more variants of the Button component, just to show you that you can create multiple types of buttons with different sizes very easily.

The last button in the example above has the variant myButton, which is the custom variant you added to the Button.tsx file. But that just affects the styling, and you can add your own custom size if you'd like.

Conclusion

In this guide you learned how to integrate Shadcn in your Next.js projects. You can dive further into Shadcn's extensive component library and use them as-is, or you can customize them to your heart's content. The power to create your next app awaits – go build it!

If you have any feedback on this article, then please DM me on Twitter.

In documents and subtitles, embedding fonts can easily increase the file size tenfold. As for the web, here are some popular fonts and a potential network impact:

Size is based on rendering "Hello, Čihař!" in regular, bold, italic, and bold italic – it varies based on what characters you use. The estimated network speeds and latency are taken from Throttling - Firefox Source Docs.

On the modern web, we've normalized fetching fonts from client-side, or embedding fonts in resources that are served to users. While this may be tempting, it actually makes very little sense for most use-cases.

This isn't suggesting to never use external fonts. Just a reminder that fonts aren't free, and that it's a good idea to review if it's worth packaging or fetching external fonts when it's avoidable.

Instead, I'd recommend you consider an expansive font selection, featuring typefaces available across operating systems. There are times we should fetch external fonts, but it shouldn't be the default attitude in everything that we build.

In short, you may just need an arbitrary typeface to show arbitrary text on your website. That's fine. But it's worth sticking to the wide array of typefaces already installed on the client's operating system.

In other words… only fetch an external font when it actually enhances the user experience!

Why?

Given the number of typefaces available on all operating systems, there are likely many suitable options for your use-case.

There's no need to specifically fetch Roboto, Inter, or another font that's similar enough to the preinstalled options.

This is particularly relevant to corporate websites, blogs, forums, and web applications.

The user is there to consume content or get a task done. Unless you're looking to be creative, the average user doesn't know, and doesn't care, what typeface it has so long as it's legible.

Meanwhile, they may care for other things impacted by your font choices…

Performance

Whether we're talking about embedding fonts in offline documents, or fetching fonts on the web, it increases the overall size and load time of resources.

Typefaces can be upwards of 160 KB per font face. The impact of this can be significant on slower networks or old mobile devices.

Particularly on the web, you'd derive more value building a lightning-fast user experience, than fetching a typeface the user didn't ask for.

Until the typeface has finished fetching, sites can choose to block rendering or swap, neither of which is ideal.

Font swapping is when the font changes shortly after visiting the site, leading to a flicker and an increase in Cumulative Layout Shift.

A demo of blocking and font swapping on the MDN website. I refreshed with the cache disabled on a high-spec laptop connected to Wi-Fi with no throttling.

A demo of the MDN website using Nimbus Sans, based on Helvetica, instead of external fonts. I refreshed under the same conditions.

Dropping external fonts is pretty simple, but can improve load time, reduce bandwidth usage, and avoid font swapping, which all improve your Core Web Vitals and SEO.

Privacy

When fetching fonts from a third-party server such as Google Fonts, client information is leaked to the third party. This includes the IP Address, User-Agent, and Referer, among other headers.

Every website that loads a typeface from Google Fonts has given Google the potential to track the visitor. The domain you visited, the time you accessed it, what browser and operating system you're on, and so on. They can form a timeline of the websites you visit from the fonts alone.

Google states that they don't track or store this information. But given the nature of the internet, they inevitably must receive it.

A German court has actually ruled that websites that load Google Fonts are violating GDPR:

"A regional court in the German city of Munich has ordered a website operator to pay €100 in damages for transferring a user's personal data — i.e., IP address — to Google via the search giant's Fonts library without the individual's consent." (Source: German Court Rules Websites Embedding Google Fonts Violates GDPR)

This problem can be avoided by self-hosting fonts. If you're going to use an external font, make sure you consider this.

But you should also know that some users disable custom fonts or block third-party fonts, so you should still specify at least a generic family name regardless.

"You should always include at least one generic family name in a font-family list, since there's no guarantee that any given font is available. This lets the browser select an acceptable fallback font when necessary.‌‌‌‌‌‌‌‌" (Source: MDN Documentation for font-family)

Familiarity

Users are familiar with the experience of their operating system.

Maybe not how it works under the hood, or even how to perform simple operations, but they do encounter the welcome screen, context menus, and their preinstalled applications regularly.

It's safer to stick with typefaces the user already has access to because these are the typefaces the user is already accustomed to reading from.

This argument is in a similar vein to why it's a good idea to use the system date picker, color picker, or modal/dialog boxes instead of creating custom ones.

Users are familiar with their system!

From my experience, often one of the following occurs:

• The user couldn't tell that an external font was used, making it largely redundant. Most non-specialists experience this everyday, it's hard to even tell that websites are using different fonts from each other unless you're conscious of it.

• The user was able to tell, and thus has a different reading experience than what they're used to. The potential for disruption depends on the needs of the user, but that risk is often unnecessary.

Unless you have a reason to change it, it's best to stick with what the user is familiar with.

Who Else Does This?

Wikipedia is the most notable example, and they even have a page elaborating on the topic: Meta page on Wikipedia's use of typography.

Some of the most popular sites don't fetch a single font on their landing page, in favor of using system fonts only:

You can verify for yourself by inspecting the site with your browser's development tools.

There are no outgoing network requests for fonts, and the font-family properties are set to system fonts only.

Exceptions

There are times loading and embedding fonts does make sense, particularly if the look and feel you're after is significantly different from common system fonts:

• You're targeting an environment that doesn't have typefaces available.

• To fit with existing branding, like an in-house font.

• A creative or unique design, especially relevant for gaming and artsy sites.

• Icon fonts like OpenMoji, but note that most clients come with emojis already.

• A website that's literally for distributing, displaying, and testing fonts.

Consequences

If you apply a local font stack, your text content may not look pixel-for-pixel identical across clients. But you should measure success by the user experience.

It's important for the site to feel familiar, but there are more significant changes between clients already, like the human-interface, resolutions, and DPI.

Compared to this, it's fine if the arch of the a has a slightly different radius, or the tick on the l is a few pixels longer. In fact, this is unlikely to get noticed, so it's unlikely to impact the user experience at all.

Users would sooner have qualms with the difference in speed or a flicker, before the difference between similar typefaces.

Another argument is that allowing different typefaces may make the layout difficult to manage. Glyphs can have different widths, and therefore take up varying space.

But modern sites should be following responsive design, so you should be taking the time to make the pages fluid anyway.

To minimize impact, you can use web safe fonts.

If you dislike how limiting that is, pick a typeface included with your operating system, and find similar typefaces on other operating systems.

Even better if you can pick metrically compatible typefaces.

Comparison

Let's visit a website and see what it's like to disable downloadable fonts.

I'll also replace all font stacks to use Helvetica.

Note, my computer doesn't actually have Helvetica installed, so my operating system automatically translates this to Nimbus Sans, which is based on Helvetica. Nimbus Sans is preinstalled on Debian.

In the case of MDN, is the second version really so undesirable that we need to load a 252 KB font, given the penalties and demonstrations raised above? Ultimately, this one is down to user preference, so I'll let you decide.

MDN, with the Inter typeface fetched from client-side.

MDN, with the font-family overridden to use Helvetica.

On the flip side, that doesn't mean to never fetch fonts. There are examples where the aesthetic may be more valuable to the user experience than the performance penalty.

Let's look at Framasoft. They went for a more creative look and feel, also featuring a lot of David Revoy's illustrations.

Using Tovari Sans was a design choice which enhances the user experience, and isn't easily replaceable with a local font stack.

If we were to take that font away, the page feels inconsistent and unpolished. Even if we cleaned up the CSS, we'd still be detracting from the theme of the website.

Framasoft, with the Tovari Sans typeface fetched from client-side.

Framasoft, with the font-family overridden to use Helvetica.

Resources

Whether you want to go local, or just need to specify some fallback fonts, here are some helpful resources for picking out your font stack:

• List of typefaces included with Apple operating systems

• List of typefaces included with Windows

• Core typefaces included with ChromeOS

• Documentation for web safe fonts

Cross-Platform Font Stacks

There are countless articles and resources available online that feature predefined font lists you can use. These are referred to as "font stacks".

In particular, I'd like to highlight a resource by Dan Klammer, a designer and web developer who created Modern Font Stacks (GitHub repository), a website that helps you pick out native font stacks for your project.

Modern Font Stacks proposes a list of fonts for a variety of styles like Neo-Grotesque (a style of sans-serif) or Monospace Code (a style of monospace) and offers a visualization of how it will look across operating systems. It runs through a description of each stack, the CSS to use it, metadata like the weights available, and which of the fonts you personally have installed.

Some font classifications don't explicitly include a font from every operating system that exists, but remember that the generic font family (sans-serif, serif, monospace, cursive, and so on) at the end will have you covered.

If you like the stack, you can run with it. But don't feel constrained either, you can also use it as a starting point and tweak the font stack to your needs.

I've included images from the GitHub repository (at the time of writing), featuring proposed font stacks for two of the most common styles used on the internet today:

Base font stack proposed by Modern Font Stacks for the Neo-Grotesque style, a type of sans-serif font.

Base font stack proposed by Modern Font Stacks for the Monospace Code style, a type of monospace font.

Conclusion

In the end, the user experience is what matters most. Sometimes that means prioritizing visual design, other times that means prioritizing performance.

I hope this was worth your time, and that with the knowledge you can make an informed decision when choosing fonts for your next project.

Feedback and questions welcome, you can hit me up on GitHub or Mastodon.

Cover art illustrated by hashrock and released under CC BY 4.0.

You may know about some libraries that are full of pre-designed UI elements, each with their own style. But here's the catch – you might only need a handful of these components. So why make your application bulkier? In reality, a significant portion of the bundled styles might go unused.

Well don't worry – that's where un-styled UI components come in.

What are Un-styled UI Components?

Un-styled UI components are accessible UI building blocks without pre-set styles. This grants you unmatched authority over the visual presentation and behavior of these interfaces.

The term "un-styled" doesn't signify a lack of design – rather, it refers to a blank slate that lets you infuse your creativity and branding without the limitations that come with traditional UI elements.

This enables you to tailor the components to your application's distinct needs, while also prioritizing aesthetics and accessibility.

Benefits of Un-styled UI Components

Let's delve into the key features that set un-styled components apart and explore why they may be a must-have for your upcoming projects.

Control Over Visual Appearance and Functionality:

Conventional UI libraries have preset styles that might not align with your design or aesthetics.

Let's use this scenario, for instance: you're working on an e-commerce platform that needs a product catalog. With unstyled UI components, you can tweak each product card's look, hover effects, and interactions to mirror your brand's identity.

This freedom extends to colors, typography, and layout choices, resulting in a coherent, captivating experience unique to your app.

Reduced Overhead and Enhanced Performance:

Often, in personal projects, we only require a handful of components from extensive libraries. But incorporating these libraries can introduce unnecessary styles and bulk that slow things down.

Un-styled components tackle this issue by letting you include only what you need. This speeds up your app, making it leaner and more efficient, without unnecessary dependencies.

Flexibility for Customization

Un-styled components empower you to craft elements seamlessly tailored to your project's demands. This covers their appearance, movements, and reactions to user interactions.

Whether you're building a simple form or a complex interactive feature, un-styled components give you the freedom to mold every detail to align with your design and purpose, harmonizing with your app's overall style.

Accessibility and User-Friendliness

Crafting accessible interfaces that adhere to WAI-ARIA design principles is important for developers. Unstyled UI components, often designed with accessibility in focus, offer enhanced usability for a broader user spectrum. This abstraction eliminates manual implementation.

Future-Ready Development

Technology evolves, and so do design trends and user expectations. Un-styled components ensure you're primed for what lies ahead. Integrating them empowers you to adapt your app's look and feel as trends shift, without being constrained by outdated styles.

Modular and Scalable Architecture

Un-styled components resemble building blocks that seamlessly fit into your project. This streamlines your code and makes it easier to manage. It also lets you reuse these blocks across different app sections, saving time while preserving consistency as your project expands.

Exploring Popular Un-styled UI Components

To give you more context into how un-styled components work, we'll now compare modal components from five common un-styled UI component libraries.

For most of these components, the Dialog components facilitate the creation of interactive, visually pleasing modal boxes for actions like profile editing, confirming decisions, or displaying extra information without navigating from the main content.

I'll also outline the overall features of these component libraries so you'll be able to integrate them into your future projects.

Let's now dive into a selection of the most notable un-styled UI component libraries and examine their dialog components.

Radix UI

Radix UI's Dialog component, which you can find in the @radix-ui/react-dialog package, is a versatile tool that helps you build popup windows in your React apps. It allows you to interact with certain areas of your program without leaving the current screen.

You can create many types of popup windows, including those that stop the flow (modal) and those that do not (non-modal).

For designing comprehensive dialogs, you have numerous building pieces including Trigger, Portal, Overlay, Content, Title, Description, and Close. You can style it to match your design. It also adheres to accessibility requirements so that everyone can use it.

When you press the Escape key or click the close button, the dialog closes. For screen reader users, special components such as Title and Description are available.

The documentation is extensive and provides examples for several scenarios and It works well with the React ecosystem.

Sample code from Radix:

To get started with Radix, you can run this command on your terminal:

npm install @radix-ui/react-popover@latest -E

To use the dialog component, you can import the components like so:

import React from 'react';
import * as Dialog from '@radix-ui/react-dialog';

const DialogComponent = () => (
  <Dialog.Root>
    <Dialog.Trigger asChild>
      <button>Open profile</button>
    </Dialog.Trigger>
    <Dialog.Portal>
      <Dialog.Overlay className="DialogOverlay" />
      <Dialog.Content className="DialogContent">
        <Dialog.Title className="DialogTitle">Edit profile</Dialog.Title>
        <Dialog.Description className="DialogDescription">
          Make changes to your profile here. Click save when you're done.
        </Dialog.Description>
        <fieldset>
          <label className="Label" htmlFor="name">
            Name
          </label>
          <input className="Input" id="name" defaultValue="Chinenye A" />
        </fieldset>
        <fieldset className="Fieldset">
          <label className="Label" htmlFor="username">
            Username
          </label>
          <input className="Input" id="username" defaultValue="@chinenye" />
        </fieldset>
        <div style={{ display: 'flex', marginTop: 25, justifyContent: 'flex-end' }}>
          <Dialog.Close asChild>
            <button className="Button green">Save changes</button>
          </Dialog.Close>
        </div>
        <Dialog.Close asChild>
          <button className="IconButton" aria-label="Close">
         Button
          </button>
        </Dialog.Close>
      </Dialog.Content>
    </Dialog.Portal>
  </Dialog.Root>
);

export default DialogComponent;

Here's what it looks like:

Modal screen of the dialog component from Radix UI

To learn more about Radix and its other components, you can check out their documentation here.

shadcn's UI Component

shadcn UI components, which are based on Radix UI and Tailwind CSS, deliver a seamless and integrated user experience.

shadcn is efficient and lightweight because you can install only the components that you require. It supports two kinds of popup windows:

1. Those that require a response before closing Alert Dialog
2. Those that don't (which is useful for displaying messages)

The shadcn UI component is versatile since you can overlay content on the main screen or another popup. It's simple to use for keyboard and screen reader users as well.

To make your popups more visually appealing, you can apply effects like fading, sliding, or zooming. You can combine this with menus such as Context Menus or Dropdown Menus (also part of the Shadcn components) to increase functionality.

The components for the dialog are divided into sections like DialogTrigger, DialogContent, DialogHeader, among others for simpler implementation.

Sample code from shadcn:

To get started, you can install the shadcn dialog component by running
npx shadcn-ui@latest add dialog.

To use the component on your projects, you can import them like this:

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"

<Dialog>
  <DialogTrigger>Open</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Are you sure absolutely sure?</DialogTitle>
      <DialogDescription>
        This action cannot be undone. This will permanently delete your account
        and remove your data from our servers.
      </DialogDescription>
    </DialogHeader>
  </DialogContent>
</Dialog>

And here's the result of the above code:

Shadcn dialog display

You can read their documentation for other use cases.

Headless UI Library:

Headless UI Library provides a fully managed, flexible approach to constructing modal windows. You can use it in both React and Vue applications.

The library lets you customize popup windows to match the look and feel of your program. It also has built-in accessibility features, making it usable by keyboard and screen reader users.

To fit the appearance of your application, you can style the Dialog and Dialog.Panel components with className or style props. The Dialog.Panel can have an overlay or backdrop that can be animated individually to grab attention. It enables you to use CSS to build scrollable dialogs.

The library provides seamless transitions while opening and dismissing popups, which improves the visual experience.

Code Sample from Headless UI:

To get started with this library, you can run this command to install it:
npm install @headlessui/react.

You can use the dialog components as depicted below:

import { Dialog, Transition } from '@headlessui/react'
import { Fragment, useState } from 'react'

export default function MyModal() {
  let [isOpen, setIsOpen] = useState(true)

  function closeModal() {
    setIsOpen(false)
  }

  function openModal() {
    setIsOpen(true)
  }

  return (
    <>
      <div className="fixed inset-0 flex items-center justify-center">
        <button
          type="button"
          onClick={openModal}
          className="rounded-md bg-black bg-opacity-20 px-4 py-2 text-sm font-medium text-white hover:bg-opacity-30 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75"
        >
          Open dialog
        </button>
      </div>

      <Transition appear show={isOpen} as={Fragment}>
        <Dialog as="div" className="relative z-10" onClose={closeModal}>
          <Transition.Child
            as={Fragment}
            enter="ease-out duration-300"
            enterFrom="opacity-0"
            enterTo="opacity-100"
            leave="ease-in duration-200"
            leaveFrom="opacity-100"
            leaveTo="opacity-0"
          >
            <div className="fixed inset-0 bg-black bg-opacity-25" />
          </Transition.Child>

          <div className="fixed inset-0 overflow-y-auto">
            <div className="flex min-h-full items-center justify-center p-4 text-center">
              <Transition.Child
                as={Fragment}
                enter="ease-out duration-300"
                enterFrom="opacity-0 scale-95"
                enterTo="opacity-100 scale-100"
                leave="ease-in duration-200"
                leaveFrom="opacity-100 scale-100"
                leaveTo="opacity-0 scale-95"
              >
                <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
                  <Dialog.Title
                    as="h3"
                    className="text-lg font-medium leading-6 text-gray-900"
                  >
                    Payment successful
                  </Dialog.Title>
                  <div className="mt-2">
                    <p className="text-sm text-gray-500">
                      Your payment has been successfully submitted. We’ve sent
                      you an email with all of the details of your order.
                    </p>
                  </div>

                  <div className="mt-4">
                    <button
                      type="button"
                      className="inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
                      onClick={closeModal}
                    >
                      Got it, thanks!
                    </button>
                  </div>
                </Dialog.Panel>
              </Transition.Child>
            </div>
          </div>
        </Dialog>
      </Transition>
    </>
  )
}

Here's what that looks like:

Sample modal made with Headless UI

For more details about this component, you can check out their documentation.

PrimeReact UI

PrimeReact UI has a flexible Dialog component that lets you show content in overlay windows.

The dialog's appearance and disappearance times can be changed. It includes tools like resizing and drag-and-drop as well.

It automatically inserts a scrollbar for easy navigation if the material is too long. Based on various screen widths, you can adjust the dialog's width. The position setting allows you to place the dialog in different screen corners.

It is compatible with screen readers and keyboard navigation because it was created with accessibility in mind. Keyboard keys allow users to traverse the dialog. It complies with integration best practices and works nicely with other libraries.

Code sample from PrimeReact UI:

To get started, run this command on your terminal:

npm install primereact

Here is a code snippet of the dialog component:

import React, { useState } from "react";
import { Button } from 'primereact/button';
import { Dialog } from 'primereact/dialog';

export default function BasicDemo() {
    const [visible, setVisible] = useState(false);

    return (
        <div className="card flex justify-content-center">
            <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
            <Dialog header="Header" visible={visible} style={{ width: '50vw' }} onHide={() => setVisible(false)}>
                <p className="m-0">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
            </Dialog>
        </div>
    )
}

Here's what it looks like:

Position of dialog component on center-right of the screen

For more information about the library, visit their documentation here.

Reach UI Dialog Component:

The Reach UI Dialog component is a great option for designing user friendly and accessible popup windows.

It provides accurate control and is simple to use. It functions flawlessly on a variety of gadgets. It has usability enhancing accessibility features, and it's simple to make alert popups.

It also supports pinch zooming and is compatible with iPads and iPhones.

Code Sample from Reach UI:

To get started, you can run this command on your terminal to install the components: npm install @reach/dialog.

To use the components within your application, you can import them like this:

import { Dialog, DialogOverlay, DialogContent } from "@reach/dialog";
import "@reach/dialog/styles.css";

function Dialog() {
  const [showDialog, setShowDialog] = React.useState(false);
  const open = () => setShowDialog(true);
  const close = () => setShowDialog(false);

  return (
    <div>
      <button onClick={open}>Open Dialog</button>

      <Dialog isOpen={showDialog} onDismiss={close}>
        <button className="close-button" onClick={close}>
          <VisuallyHidden>Close</VisuallyHidden>
          <span aria-hidden>×</span>
        </button>
        <p>Hello there. I am a dialog</p>
      </Dialog>
    </div>
  );
}

Here's what they look like:

Dialog component from reach ui

To learn more about this library and its components, you can check out their documentation here.

Wrapping Up

This article highlighted several popular un-styled component libraries, including Radix UI, shadcn's UI Component, Headless UI Library, PrimeReact UI, and Reach UI Dialog Component.

To sum up, using un-styled UI components lets you customize your components according to your needs. It also brings performance efficiency and future adaptability.

These components offer reduced overhead, as they let you use only the components you need. This results in a more efficient application.

The flexibility of un-styled components also lets you tailor elements for specific project requirements, while prioritizing accessibility and user-friendliness. Integrating un-styled UI components elevates your ability to create accessible, visually appealing, and efficient user interfaces.

In this guide, I will discuss the differences between two popular frameworks: Tailwind CSS and NextUI.

Tailwind CSS is a framework that has gained a large following among developers due to its simplicity, flexibility, and ease of use. NextUI, on the other hand, is popular because of its scalability, performance, and flexibility.

This article will compare the critical features of the two frameworks, their pros and cons, and their suitability for different project types.

Whether you are a developer looking to select the best framework for your project or you're just curious about these tools, this article is for you.

Here's what we'll cover:

• What is Tailwind CSS and what are its pros and cons?
• What is NextUI and what are its pros and cons?
• How to decide between Tailwind and NextUI

Let’s dive in! 🚀

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework – that is, it's a framework that focuses on functionality rather than its looks or UI. Adam Wathan, a Canadian Software developer and entrepreneur, built Tailwind CSS.

Tailwind allows you to completely customize your utility classes without leaving the HTML. Tailwind CSS offers a fast and easy way to style your websites.

Tailwind CSS is highly customizable. This means as a user, you can modify the fonts, colors and other design elements to match your web design preferences.

This framework also has faster load time because of PurgeCSS (which removes unused or unwanted CSS styles from your final build resulting in smaller file sizes).

Pros of using Tailwind CSS:

Just as everything has advantages and disadvantages, here are the advantages of using tailwind CSS:

• Tailwind is easy to learn and use for first-time developers.
• Tailwind uses a few lines of code to create flexible designs.
• Tailwind can easily convert a design to reusable components since it is a utility-first framework.
• Tailwind is a guide and avoids using unfamiliar names for CSS classes and ids.
• Tailwind can effortlessly be customized to suit the developer’s needs.

Cons of using Tailwind CSS:

And now here are the disadvantages of using Tailwind CSS:

• Tailwind contains large CSS files because it provides low-level CSS classes, so when styling, the files may be too large and complex to maintain over time. This also affects the performance of the website or application.
• Tailwind may have many low-level classes, but it is hard to override the styles of specific elements when changing designs or styling specific elements.
• Tailwind is not always the best framework for some projects. It is undoubtedly a powerful tool, but specific design requirements may not be achievable using the available classes when working on a project. Tailwind is best for projects that involves a lot of styling UI and customizing design elements such as Prototyping, Dashboards, E-commerce websites and lots more.

What is NextUI?

NextUI is a component-based CSS framework, which means it provides a set of pre-designed components you can use at any time. Examples include buttons, forms, navigation bars, navigation menus, and more.

NextUI is built and maintained by the Vercel team. The beauty of NextUI is that it gives you a customizable template, so you don’t have to write much CSS code to create a responsive website.

The downside of using this framework is that developers won’t have 100% control of the design as the components are limited by NextUI.

In addition to its core UI components, NextUI offers developer tools such as automatic code splitting, server-side rendering, and built-in support for libraries like GraphQL and Apollo.

Pros of using NextUI:

Just as everything has advantages and disadvantages, here are the advantages of using NextUI:

• NextUI is highly scalable when handling large and complex applications if the application grows. It doesn’t slow down when handling such large files.
• NextUI is very flexible and built to suit the user’s needs or tastes.
• NextUI has a large, reliable community so getting help when using the tool is stress-free.
• NextUI has an extensive range of pre-built components and features, which saves the developer's time when building.
• NextUI is built on React, making it user-friendly to build a JavaScript application.

Cons of using NextUI:

And now here are the disadvantages of using NextUI:

• NextUI has a large footprint compared to other frameworks despite being built on ReactJS. This can also affect its performance if the developer does not fully understand how to navigate NextUI.
• NextUI may not be the best option when building an application that does not involve or use ReactJS.
• NextUI may be relatively easy to use but has a learning curve that may be difficult to understand for those who don’t use React.
• NextUI requires more attention in setting up and configuration because it offers a range of developer tools for customization.

How to Decide Between NextUI and Tailwind

If you are working on a React application for a large-scale project, NextUI is the best choice as a CSS framework. But if you are working on an application that requires you to focus on specific functionality or design requirements, Tailwind is the best choice for you.

Conclusion

In conclusion, Tailwind CSS and Next UI are different tools for developing web and mobile applications.

Tailwind CSS is a utility-first CSS framework designed to help developers build a custom user interface quickly. NextUI is a component-based framework designed to help developers improve the performance and scalability of the application.

Tailwind and NextUI each have strengths and weaknesses, and the best choice for your project depends entirely on the application’s design requirements, needs, and goals.

Tailwind CSS best suits developers looking for a simple solution to build a custom user interface. In contrast, NextUI is best suited for developers looking for CSS templates, so they can focus on other parts of the application, like scalability.

In the end, pick the best framework for you based on your preferences and skills as a developer. Before choosing, carefully evaluate the pros and cons of each tool to make an informed decision when building the best possible application for your users.

UX and UI design are two technical terms that can often be confusing.

Many people may use these two terms interchangeably, incorrectly, or assume they are the same thing. But that is not the case, as they are two different fields.

In a nutshell, UX design focuses on how well the product works and how the user feels when using it, whereas UI design focuses on how that software product looks.

Both are equally important and play a vital role when creating and developing software.

Think of it like this: a pretty UI may attract visitors, but if the product is not functional, the visitors won't stick around. And if the product works properly but doesn't look good, users will feel frustrated and look elsewhere to satisfy their needs.

There needs to be a balance.

With that said, the definition above only scratches the surface.

In this article, you will learn about the differences between UX and UI design and understand what UX and UI designers do in their day-to-day work.

Here is what we will cover:

1. What is UX design and why is it important?
2. What does a UX designer actually do? The UX design process explained
   1. Understanding phase
   2. User research phase
   3. Analyze and define phase
   4. Ideate and design phase
   5. Reporting phase
3. What is UI design?
   1. What does a UI designer do?
4. UX VS UI design - what's the difference?

What Is UX Design and Why Is It Important?

UX design is short for user experience design.

The term was coined and popularized in the early 1990s by Donald Norman, an American researcher, professor, and author, during his time at Apple.

According to Norman:

User experience encompasses all aspects of the end-user’s interaction with the company, its services, and its products.

Note that the original definition of UX referred to physical and digital products. Nowadays, UX design mainly relates to digital products.

So, user experience design is a process that involves cultivating a good relationship between a company, the company's software products /services, and the company's clients/customers.

The relationship is based on how a user feels when using the company's products.

UX has to do with feelings, emotions, thoughts, behaviors, and human psychology.

Specifically, good UX depends on the following points:

• How does a person feel when using the product?
• How accessible is it for the person to navigate the product? Can everyone use it?
• How usable is the product? Does it work as intended?
• How easy is it for the person to navigate and find the necessary information?
• How well-planned and intuitive are the steps a user needs to take to accomplish a task?
• How logical is the sequence of actions a user needs to perform to accomplish their goal with ease?
• Does it make it easy for them to achieve their initial goal?
• How well structured is the content available? Does it follow a logical hierarchy?
• How useful is the product?
• How valuable is the product?
• Does it serve a purpose?

All of the above are part of what makes good UX design and contribute to the value the software offers.

UX is all about solving problems and always keeping the user in mind.

The end goal is to provide a pleasant and positive experience for the user, create digital products that a user feels comfortable using, and for the user to accomplish their task and have their needs met.

All in all, it focuses on anything and everything that affects the user's journey when trying to solve a problem they have.

Good user experience is vital for every business. If the user/customer is happy and not frustrated, they are more likely to remain loyal.

If users can't use the product with ease, this will result in them giving up on it and looking for an alternative product/service that meets their needs, resulting in a loss for the business. They are unlikely to return to a product after a bad experience.

What Does A UX Designer Actually Do? The UX Design Process Explained

The UX design process is comprised of many parts. It is a sequential process with the end user always in mind throughout all stages.

The role of a UX designer will vary from business to business and depends on the size of the team they are on.

On a small team, a UX designer will probably be responsible for the whole UX process from start to finish. On a larger team, they might be involved in only one part of the process, such as UX research.

That means a UX designer may not be part of all the stages outlined in the following sections.

Now, let's see the different phases in the UX design process in more detail.

Understanding Phase

The first step in the UX design process is understanding the brand and its users.

Specifically, it is about understanding how the project the UX designer is working on aligns with the brand's mission, vision, and goals.

And it is about understanding the brand's users/customers.

A UX designer can't make assumptions about what the users really want or what problems they are facing when using the product/service. They will only know once they ask the users directly.

The UX designer needs to understand, be in tune with, and empathize with the problems users are facing and their pain points. They need to understand their users' wants and needs.

The key word here is empathy! Empathy is the ability to understand the user's hopes, goals, frustrations, and needs.

Once the UX designer has gathered those insights and identified the goals of the brand and the problems the users are facing, they can figure out how to solve problems and provide solutions through their designs and how they can create products/services that solve those problems.

User Research Phase

As mentioned in the section above, a UX designer can't assume, and if they do, they need to question those assumptions by conducting user research.

There are two main methods for conducting user research:

• Qualitative methods
• Quantitative methods

Qualitative research methods focus on observational and non-numerical findings, human behaviors, opinions, and emotions.

They include creating customer feedback surveys and asking open-ended questions to understand the key frustrations and pain points and what needs improving.

They also include reaching out to customers directly and conducting 1:1 face-to-face or online user interviews or focus groups of 3-5 target users for usability testing.

Quantitative methods focus on numbers, metrics, and measurable data points.

They include using web analytics tools and researching how the current design is performing. For example, they might find out how many visitors of an e-commerce site are clicking on a particular item and adding it to their cart, or what is the average time spent on the checkout page.

To learn more about user research, check out the following resources:

• Why you need a UX researcher on your product team
• Use User Research to Create the Perfect UI Design
• Qualitative VS Quantitative Definition – Research Methods and Data

Analyze and Define Phase

After gathering user insights, the next phase in the UX design process is for the UX designer to analyze and make sense of all the information and define the problem they need to solve for the user.

They define what their focus should be and what would have the most impact on the users.

At this stage, it is crucial not to lose sight of the user's needs.

For this reason, the UX designer will create user personas based on the research they've gathered.

A user persona is a fictional character that will use the product/service.

It represents a typical target user and identifies their needs, frustrations, behaviors, and goals.

User personas allow UX designers to understand their users better and make wise design decisions.

At this stage, a UX designer might also create use cases.

A use case is a description of how different users might use and interact with the product or service.

Finally, a UX designer might also create journey maps.

A journey map is a visual and graphic representation of how the user will interact with the product/service from start to finish, and a map depicting the whole user journey until the user accomplishes their goal.

Journey maps are useful for understanding the different pain points a user faces when using the product and where those pain points occur, which leads to restructuring the product/service.

To learn more about user personas and use cases, check out the following resources:

• How To Write User Stories, Epics, & Personas
• Use cases and organizational structure

Ideate and Design Phase

The ideate phase is all about brainstorming and exploring out-of-the-box design ideas.

At this stage, the UX designer will come up with different creative options for how to solve the problem at hand.

They will brainstorm ideas and sketch them on paper before using any digital tools.

They will also create wireframes. Wireframes are rough prototypes and visual representations of what the UI and its various components will look like and which act as a guide and direction for the final design.

They will outline the steps and the complete path a user will take while using the product/service.

The end goal of this phase of the UX design process is to design low or high-fidelity versions of the structure and layout of the product (which may or may not be interactive) and of what the final design will look like. The first design is never the final design.

After continuously iterating the designs, adding new ideas and features, rigorous testing, and feedback, the UX designer will have a detailed and carefully crafted digital mockup.

The mockup will look almost identical to the final product, which they hand off to the engineering team. The engineering team will build and ship the real-world working product.

To learn more about creating wireframes, check out the following resources:

• What is a Wireframe? This UX Design Tutorial Will Show You.
• How to Design a Website Prototype from a Wireframe

Reporting Phase

After the product launches, the next phase of the UX design process is the reporting phase. This includes conducting usability testing, observing how users are using the end product, collecting feedback, and gaining additional insights.

This phase helps the UX designer and their teams understand if the end product solves the initial problem and if it meets the needs of their end users.

At this phase, here are some of the questions that a UX designer may ask:

• "What did we do right?"
• "What didn't we do right, and why?"
• "What did we learn?"
• "How can we improve in the future?"
• "How are users responding to the product/service? Did we solve their problems and pain points?"

With that said, the UX design process doesn't end here, since there are continuous iterations and improvements to be made.

What Is UI Design and Why It's Important? An Overview of UI Design

So far, you have seen that UX design involves every aspect of a user’s experience when using a product. So what exactly is UI design, then?

Back in the 1970s, to use a computer, you had to use a command line interface (or CLI for short), and users needed to know a programming language to communicate with the machine.

At that time, you needed a lot of technical knowledge and skills to complete a simple task with a computer.

That changed in the 1980s with the introduction of Graphical User Interfaces (or GUIs for short) and personal computers.

A mouse, application icons, buttons, menus, checkboxes, and folders replaced the cryptic command line. Anyone could use a computer. Users could easily create, update, move, and delete files and send emails – no coding required.

The people that created these early graphical user interfaces were called User Interface (or UI for short) designers.

Nowadays, the term user interface involves every visual part of a digital product/service that a user interacts with. This includes mobile apps, websites, screens, touchscreens, keyboards, and wearable technology such as smartwatches, to name a few.

You can think of it as the bridge between the user and technology.

A UI designer is responsible for designing every step that allows a user to interact with the digital product/service. This includes layouts, structure, buttons, colors, and animations.

UI design is all about the look, feel, and aesthetics of a digital product. It involves every visual aspect and appearance of the product the user interacts with.

The end goal of a UI designer is to make something visually appealing to the user that's easy to interact with.

Good UI is vital for drawing attention to potential customers and attracting new users. Everyone appreciates a well-designed, clean, intuitive, and modern design.

But how does all this relate to UX design? You can think of UI design as a subset of UX design and a small part of the UX design process. But it is a separate discipline in its own right.

What Does A UI Designer Do? UI Design Skills Definition and Examples

UI designers need to have visual design skills.

Specifically, they need to know the following concepts and disciplines:

• Color theory, creating color palettes and creating accessible contrast that ensures both usability and readability.
• Typography.
• Layout, spacing, structure, and effective placement of elements on a page.
• Graphics, icons, and illustration design.
• Interaction design principles, animation effects, and motion design.
• Branding – creating a consistent visual identity for a brand/product and communicating the brand's mission and message.
• Responsive design, and ensuring the UI looks good on all screen sizes and devices.
• Creating style guides.
• Creating design systems.
• Knowledge of industry tools such as Figma
• Wireframing and prototyping.

UX VS UI Design – What's the Difference? The Difference Between UX and UI Design Explained in Plain English

By this point, you hopefully understand what UX and UI design involves.

To summarize their differences:

UX design is how things work and how useful they are. UX design focuses on the whole experience and the journey a user takes when using a product from start to finish. It involves the overall experience a user has when trying to solve a problem.

UX requires knowledge of psychology, cognitive science, human behavior, identifying the user's pain points, and solving their problems.

UI design is how things look. UI design is a subset of UX design and is a more specialized field. It focuses only on the visual aspects that a user interacts with and creates inclusive, accessible, pleasant, and aesthetically pleasing digital interfaces.

UI design also focuses on creating a brand aesthetic that leads to an emotional connection with users/customers.

Both UX and UI design are equally important in creating useful, usable, and modern digital products and services and meeting the needs of their users.

Conclusion

This marks the end of the article – thank you so much for making it to the end!

Hopefully, this guide was helpful, and it gave you some insight into what UX and UI design are, what UX and UI designers do in their day-to-day work, and what the differences between those two terms are.

Thank you for reading!

This is not a tutorial on building an app. It is rather a guide that will help you implement any UI you come across into an app you already have. This tutorial also explains a wide variety of UI concepts in Flutter.

Table of Contents

• What is Flutter?

• Widgets in Flutter

• The Widget Tree

• How to Implement any UI in Flutter
  1. Implement Top Left; Down Right
  2. Choose a Widget
  3. Use widget groups
  a. Column/Row
  b. Stack Widget
  4. Create custom widgets
  5. Add more customization
  a. Container Widget
  b. GestureDetector / InkWell

• How to Implement Scrolling Interfaces

• About CustomPaint

• Summary

What is Flutter?

Flutter is an open source framework by Google for building beautiful, natively compiled, multi-platform applications from a single codebase. – (source: flutter.dev)

In Flutter, contrary to most frameworks, Dart is the only programming language you use to code. This is an underemphasized benefit of Flutter. Especially for a tool that can build desktop, mobile, and web applications.

Most UI platforms use more than one language. For example, in front-end web development, you have to write HTML, CSS, and JavaScript. For Android, you have to write Kotlin (or Java) and XML. But in Flutter, it's just one language: Dart.

Coupled with the only-one-programming-language benefit, Flutter is simple because everything in Flutter is a widget. For example AnimatedWidget, BottomNavigationBar, Container, Drawer, ElevatedButton, FormField, Image, Opacity, Padding, ...

This is part of what makes Flutter easy to use – it's basically plain English. Widget names reflect what they are and their properties are easy to understand.

Widgets in Flutter

A widget is a Dart class that either extends StatefulWidget or StatelessWidget.

Your local Flutter installation comes with several widgets. To check out the widgets available by default, open the packages folder of your Flutter installation in your preferred editor. Then search across all files for "extends StatefulWidget" and "extends StatelessWidget" and take note of the number of results.

As of Flutter 2.10, you will get 408 StatefulWidgets and 272 StatelessWidgets. That is a total of 680 widgets available for you to use and implement UIs.

These widgets typically have all you need. But at times they may not be enough. pub.dev, Dart and Flutter's package manager, have many more widgets you can use to implement UIs.

It is difficult to count the widgets in pub.dev. But searching an empty string (don't enter anything in the search bar and then press the search icon) and setting the SDK to Flutter returns the current total number of published packages.

At the time of writing, there are more than 23000 Flutter packages in pub.dev. Each package has at least one widget. This means that you have more than 23000 widgets from pub.dev to implement, in addition to the available 680. This means that you can really implement any UI you want easily in Flutter.

Adding to the many available widgets, you can also create your own widgets as you implement UIs.

The Widget Tree

The following is part of the code you get when you create a new Flutter project and remove the comments:

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }

The parent Scaffold takes the appBar, body, and floatingActionButton parameters. In turn, the AppBar also takes a title parameter that has a Text value.

body takes a Center value that has a Column child. The Column in turn has two Texts as children. The FloatingActionButton takes the onPressed callback, 'Increment' tooltip, and an Icon for a child.

Flutter widget tree breakdown

This is a simple widget tree. It has parents and descendants. child and children are common properties of most Flutter widgets. As widgets continuously take more widget children, your app gradually grows into a large widget tree.

As you implement UIs in Flutter, bear in mind that you are building a widget tree. You will notice that your code indents inwards from the left margin. It seems to develop some kind of virtual greater than sign (of empty space) at the left.

Note: Huge indentation levels are a sign that you need to refactor your code. It means that you need to extract some widget hierarchy into a separate widget.

How to Implement Any UI in Flutter

1. Write your code starting at the top left and move down to the bottom right

You'll implement the UI widget after widget according to each element's position in the UI. So you will first write code for things that appear at the top of the UI. Then you keep writing code for the other items moving down the page until you reach the bottom of that UI.

This is intuitive.

On the horizontal axis, go from left to right. If need be, or if it is a right-to-left UI, then implement it from right to left instead.

2. Choose a Widget

Next you'll need to logically determine the widget you want to use for a given UI element. At a bare minimum, for a given UI element, you will use simple widgets you're familiar with based on what their names say they do.

Chances are the name of what the UI component looks like is the name of the widget. If you find it hard to make a choice, a quick online search will give you the answers. Flutter has a great online community.

3. Use widget groups

If a group of UI items is arranged vertically, one after another, use a Column. If they are arranged horizontally, one after another, use a Row. If they are placed on top of each other, use a Stack, with the floating widgets wrapped in Positioned widgets.

a. Column/Row

Inside a Column or Row, you can change or adjust how the widgets will align themselves on the main or cross axis. Use their CrossAxisAlignment and MainAxisAlignment properties for such adjustments.

For the cross axis, you can align to center, end, start, and stretch. For the main axis, you can align to center, end, space around, space between, space evenly, and end.

In a Column, the vertical axis is the main axis while the horizontal axis is the cross axis. In a Row, the horizontal axis is the main axis while the vertical axis is the cross axis.

Adapted from https://arzerin.com/2019/11/20/flutter-column/

Adapted from https://arzerin.com/2019/11/20/flutter-row/

In Columns and Rows, if you want a particular child widget to take as much available space as possible, wrap that widget inside an Expanded widget. If you are familiar with web frontend, you'll notice that Columns and Rows are like display: flex; in CSS.

b. Stack Widget

With Stack, the last widget(s) in the children's list appears on top of the earlier children.

You might have to edit the Stack's alignment to indicate the relative positions of the widgets. Like topCenter, center, bottomEnd, and so on.

The Stack's size is calculated based on non-positioned widgets (Widgets in the children list not wrapped in a Positioned parent). When coding, remember that your Stack should either have at least one non-positioned widget, or it should be wrapped in a parent widget that explicitly sets the Stack's size.

Positioned takes any or all of bottom, top, left, right. They set the child's position relative to the Stack. Negative values move the child in the opposite direction. However, negative values clip parts of the child out. Use clipBehavior: Clip.none on the Stack to show all the parts of the positioned widget.

Full code here.

4. Create custom widgets

As you build the widget tree, you will notice two things:

1. Either a chunk of the tree grows too big and it is a logical unit on its own.

2. Or some chunks or sets of widgets might repeat themselves with slight changes.

These are two indications that you should refactor your code. It means that you should extract out those widgets and define them in another Dart file.

Your code editor will help you with refactoring. With or without the editor, all you need to do is:

1. Create a new Dart file. The file name should reflect the new widget's name.

2. Create a new class that extends StatefulWidget or StatelessWidget, depending on if the new widget has State or not.

3. Then return the widget chunk from a build method.

4. (Optional) If need be, your new Dart class can take positional or named parameters to its constructor to customize the widget's look.

// in counter_display.dart
import 'package:flutter/material.dart';

class CounterDisplay extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
        mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text('You have pushed the button this many times:'),
        Text('$counter', style: TextStyle(fontSize: 24)),
      ],
    );
  }
}

// in main.dart
//
// ... 
  body: Center(child: CounterDisplay()),
// ...

You will build many custom widgets and they in turn will be descendants to more custom widgets, and that's fine. The widget tree is meant to continuously grow as the need arises.

5. Add more customization

You won't customize widgets only because of refactoring and repetitions (DRY code). You will create custom widgets because of the UI you are implementing.

You will create custom widgets because the many available widgets don't always meet the exact needs of a given UI. You'll need to combine them in some special way to implement a particular UI.

a. Container Widget

Container is a powerful widget. You can style it in different ways. If you are used to web frontend, you'll notice that it is like a div in HTML.

Container is a base widget. You can use it to create any UI piece.

Some Container parameters are constraints, decoration, margin, padding, transform, among others. Of course, Container takes a child which can be any widget.

The decoration property can take a BoxDecoration, which in turn can take several other properties. This is the heart of Container's flexibility. BoxDecoration takes parameters like border, borderRadius, boxShadow, color, gradient, image, shape, among others.

With these parameters and their values, you can implement any UI to your taste. You can use Container instead of the many material widgets that Flutter comes with. That way your app is to your taste.

b. GestureDetector / InkWell

GestureDetector as the name implies detects user interactions. Not every UI piece is a button. And while implementing UIs you will need some widgets to react to user actions. In such a case, use GestureDetector.

GestureDetector can detect different types of gestures: taps, double taps, swipes, ... GestureDetector of course takes a child (which can be any widget), and different callbacks for different gestures like onTap, onDoubleTap, onPanUpdate (for swipes), ...

Note: By default, when users interact with the empty spaces in the child of GestureDetectors, the callbacks are not called. If you want your GestureDetector to react to gestures on empty space (within its child), then set the behavior property of the GestureDetector to HitTestBehavior.translucent.

GestureDetector(
  // set behavior to detect taps on empty spaces
  behavior: HitTestBehavior.translucent,
  child: Column(
    children: [
      Text('I have space after me ...'),
      SizedBox(height: 32),
      Text('... that can detect taps.'),
    ],
  ),
  onTap: () => print('Tapped on empty space.'),
)

InkWell is similar to GestureDetector. It responds to some gestures that GestureDetector responds to. However, it shows ripple effects when interacted with (which GestureDetectors don't).

From https://stackoverflow.com/q/58285012/13644299

InkWell must have a Material ancestor. So, if your topmost widget is MaterialApp you need not worry. Else, wrap the InkWell in a Material.

You should also do this wrapping if you are changing the colors of the InkWell's parent or child. If you don't, the ripple won't show. You also have to set the color of the Material widget for the ripple to show. You can set the color to Colors.transparent and Flutter will take care of the rest.

How to Implement Scrolling Interfaces

Scrolling is a little delicate topic. By default, widgets don't scroll in Flutter. If your Column or Row will be scrollable, use a ListView instead. ListView takes children parameter too.

ListView also has factory constructors like ListView.builder and ListView.separated. The builder gives you more control over the build process of the children whereas the separated takes into account a Separator (like Divider for example).

By default, ListViews scroll their children vertically. However, you can change the scrollDirection of a ListView to Axis.horizontal to scroll its children horizontally.

At times, you might want to use SingleChildScrollView instead of ListView. As the name implies, it takes a single child and it can scroll. You can pass widget groups as its child.

There are other scrolling widgets.

But take special note of CustomScrollView. It gives you huge control of scrolling, unlike the others. It takes slivers, which in turn are scrolling widgets with powerful scroll mechanisms.

SliverFillRemaining, SliverFillViewport, SliverGrid, SliverList, SliverPersistentHeader among others, are examples of widgets you include in the list of slivers. Most of these widgets take a delegate, which handles how scrolling occurs.

A good case to use CustomScrollView is with SliverAppBar, where you want the AppBar to be expanded by default and shrunk on scroll.

Another example could be with a DraggableScrollableSheet where you keep some action button sticked to the bottom.

About CustomPaint

This is where Flutter gave ultimate flexibility to the UI world.

CustomPaint is to Flutter what the Canvas API is to HTML or SVG is to images.

CustomPaint is a widget in Flutter that gives you the ability to design and draw without limitations. It gives you a canvas on which you can draw with a painter.

From https://blog.codemagic.io/flutter-custom-painter/

You will rarely use CustomPaint. But be aware that it exists. Because there might be very complex UIs that widget combinations might not implement them and you will have no choice than drawing with CustomPaint.

When that time comes, it won't be hard for you because you are already familiar with other widgets.

Summary

For a given UI piece, choose a widget, write its code, build the widget with other widgets, and see what great UI you are implementing with Flutter.

Implementing UIs is a major part of mobile, web, and desktop app development. Flutter is a UI toolkit that build cross-platform for those platforms. Flutter's declarative nature and its widget abundance make UI implementation simple.

Keep implementing UIs in Flutter. As you do, it will become second nature to you. And you will be able to implement any UI in Flutter.

We just published a UI / UX design course on the freeCodeCamp.org YouTube channel that will teach you how to use Figma to design a web app based on the needs of users.

Joseph Brendan developed this course. Joseph is a great instructor who has taught thousands of people on his YouTube channel.

In this course you will learn how to use the d.school design thinking process and self process management to come up with design solutions. You will develop a Fintech app from scratch.

Here are the sections in this course:

• Outline Breakdown
• Workflow Breakdown In FigJam
• User Empathy ( Empathize )
• Creating User Experience Survey With Google Forms
• Creating User Personas
• Creating Problem Statement
• Ideate
• Prototype Analysis
• User Goals & User Tasks
• Information Architecture
• Low Fidelity Prototyping
• High Fidelity Prototyping
• Creating Style Library
• Creating Component Library
• Prototype Presentation & Assignments

Watch the full course below or on the freeCodeCamp.org YouTube channel (2-hour watch).

Transcript

(autogenerated)

In this course you will improve your user interface and user experience design skills by building a mobile app.

Instructor, Joseph Brendan is a great designer and great teacher.

Hey, guys, my name is Joseph, Brandon.

And in this course, I am going to show you how to design a mobile app from scratch.

Now, this mobile app will be a stock investing mobile app that users can use to invest in the stocks of companies that they would like to invest in.

So here is a demonstration of the app that we are going to design.

Now over here, we have the splash screen of the app, which is what's going to show up when you launch the app.

Now, let's go to the next page here.

Now, this is the page where the user will have to select their next action, which is either to log in as an existing user or to get started as a new user.

So I'll go ahead and click on get started, just like a new user would do.

And here on this page, the new user will be required to sign up to this application with an email address, a phone number and a password.

Now, when the new user doors that the new user will be taken to this page, where the new user will have to enter a verification code that's been sent to the phone number of that new user.

Now, when the phone number of the new user is verified, it means that the new user is now a registered user on this application, and the next thing the user is going to do is to click on the Proceed button here.

And when the user does that, the user will be taken to the homepage of the application, which is this page here.

And here on the homepage of this application.

Over here, the account balance of the user will be displayed here.

Also, the user will have a button here that can be used to fund the account on this application.

And right over here, the user will have a list of recent transactions that they have carried out on this application.

Now coming down here, the user will see a banner here that they can click on to get a referral link that can be used to invite friends to have an account on this app.

Now, at the bottom here, we have the navigation section of this app.

Currently, we are on the homepage of the app.

Now let's navigate to the InVEST page, which is the page where the user will have the features that they can use to invest in stocks.

So I'd come here, and I'll click on invest.

When I do that, I'll be taken to the InVEST page, which is this.

And over here on the InVEST page, you can see that we have a display of cash and assets owned by the user.

And right after that, over here, we have a list of top stocks that the user can invest in.

And also, we have the investment portfolio of that user over here, which is a list of all the investments that the user had made on this app.

Now let's say the user is trying to invest in one of the stocks listed here, let's say this one, yeah.

Now, if the user clicks on it, the user will be taken to the details page of that stock that they clicked on.

And on this details page, we are going to have information about the stock and the company that owns the stock.

Now if the user likes what they see here, the user will go ahead to click on the InVEST button here.

And when the user clicks on that button, the user will be required to enter the amount that they wish to invest in that stocks with.

Now when the user enters the amount and the user clicks on the Proceed button here, the user will see a summary of the investment that they are about to make.

And when the user is okay with what they see here in the summary.

The user will be required to enter their secrets pin here, and then click on the InVEST button here.

And when the user does that, it means that the investment has been successful.

So this app that I just demonstrated here is what we are going to design in this course from scratch.

Now before we start designing this app, I would love to break down the stages of our workflow for this project, so that you can understand In the execution process of designing products that are actual business solutions.

So here are the stages of our workflow.

First things first, the stakeholders of this project, which is the owner of the project, or the company we are working for, will present us with a problem that they would want us to design for.

Now, when they present these problems on us, they are also going to tell us about the users, which are the people facing the problem that they want us to design for.

Now, after that, the stakeholders will state their expected goals for the project.

Now after the stakeholders presents a problem and states, their expected goals to us, the next stage of our workflow will be for us, the UX designers to empathize with the users.

Now after we empathize with the users patient problem, we are going to create what we call a problem statement.

And after creating this problem statements, the next stage of our workflow will be the stage where we will have to come up with ideas that can be best business solutions to the problems highlighted in the problem statement.

Now, when we are able to get an idea for the problems in the problem statement, the next action will be for us to design that idea into a testable prototype.

And after designing that idea into a testable prototype, we will go ahead to test the design to be sure that it is able to solve the problems in the problem statement.

So let's get to work.

Now outcome here in figma.

And I'll use a fig jam file to walk on all the analytical parts of our workflow.

So let's create a fig jam file.

And to do that, come here and click on the new fig jam File button there.

When you do that, you have created a junk file as easy as that.

And I'd like to mention that if you are new to using fie jam, you have nothing to worry about.

It's a really simple tool to use.

Just follow along, and you'd see that at the end of this course, you would be good with using feature.

So I'll close this.

And the next thing I'll do after creating a fifth gem file is to give the fifth gem file a name.

So I'll call this stocks, big jam, you can call it whatever you want to call it.

Now after giving this junk pile in him.

The next thing to do is to outline the stages of our workflow here in peach jam.

So let's do that.

So first things first out, zoom into 200% outcome here to zoom in and out Select Zoom to 200% here.

And when I zoom in to 200% out, use a square shape here to write down a headline for our workflow.

So I would keep this there, I would select the text to now so that I can write my text.

And I would say, workflow stages, then outcome here, and I'll align the text to the left.

And I'll change the color of the rectangle to this.

And that.

Okay, so the next thing I'll do is to have sticky notes, were out outline the workflow stages in.

So to create a sticky notes in peach jam, I would come here and now select the sticky note tool here.

When I select it out, come here and out, click on the big jam Canvas to have this.

Now let's select this.

And let's expand the width to align with our sticky notes.

So first things first, I will change the color of my sticky notes to this, then I'll click on this Add text placeholder here.

So that I can write down all of those workflow stages that I talked about.

So I would like to make this a list.

And I'd like it to be a bulleted list.

So I would come here and I would select the bulleted list property here.

Then I would write down the first workflow stage, which is this, it says stakeholders present the problem and the users facing the problem.

Now I'll create another list item, which is going to be the next stage of our workflow.

And that's going to be where the stakeholders will define the goals for this project.

So I would say define goals.

Let's come here.

Let's create some space here.

Now let's outline the next stage of our workflow.

After the goals are defined, we view X designers will empathize with the users.

So let's come here.

Let's create the space also.

Now After we the UX designers empathize with the users, the next stage of our workflow will be where we are going to create a problem statement.

So I would say, creates problem statements.

So let's come here, let's create the space.

Now after we create a problem statements, the next stage of our workflow will be the stage, where we are going to come up with an idea that can solve the problems listed in the problem statement.

Now, after we come up with a best idea that can solve the problems in the problem statement, the next stage of our workflow will be the stage where we are going to design that idea into a testable prototype.

So I would say design prototype here.

And after we design that idea into a testable prototype, we are going to move over to the next stage of our workflow, which is going to be the stage where we are going to test that idea that we have designed into a prototype.

So I would just call that test and have that spaced.

Now we have outlined our workflow stages here.

So just to make this better, I would select all of these and I would make all of the text bold.

To have that outcome here, I would select this text, and I'll make it bold also.

Now zoom back to 100%.

To see what we have, and this is okay, so I'll use the hand tool, which is this, you can come here to click on it to select it or just press the H key on your keyboard to have it selected.

And now grab and shift a canvas to this point.

So now we have outlined our workflow stages here right.

Now the next thing to do is for AWS to outline all of the actions that will be taken on that each of this workflow stage.

So this means that we are now going to break down each of these stage one after another, so that we know what actions to take at each of these stage and how to optimize for our results.

So I would select the Move tool here by clicking on it or by pressing the V key on my keyboard to select it.

And I would come here, I would select the square tool there so that I can create this shape like this.

And over here, I would write a text inside this shape.

And that text will be this first stage out select all of this text here, then I'll use CTRL.

C, if you are using a Mac, its command C, I would use that to copy that text.

And I'll paste it inside this question like this.

Now expand this to this point.

Now this is the first stage of our workflow right outcome here now.

And I'd have a sticky note here, right under that.

Now in this sticky note out write out what's going to happen at this stage, which is the first stage of our workflow.

Now this stage is the stage where the stakeholders will present the problem to us.

And also let us know about the users that they want us to design for.

So in this course, I would like us to assume that we have a stakeholder somewhere or we have a company somewhere that wants us to design an app that you can use to invest in stocks for them, right.

So I'll paste this in here in this sticky note, which says users find it really hard to invest in stocks using existing investment apps due to information overload and complex presentation of information on the apps.

Now, who are the users, the users are stock investors in Nigeria.

So this so having this here means that the stakeholders have presented us with a problem and the users facing the problem.

So this is sorted.

So let's change the color of the sticky notes.

Something like this to differentiate it from this one here.

And let's come here.

Let's change this, to that to differentiate it also.

So this is the first stage of our workflow.

And we have seen what's going to happen here at this stage.

So let's look at the next stage here, which is the stage where the stakeholders will define the goals of the project.

So I would come here, I would select this and now duplicate it to duplicate is Ctrl D.

If you are using a Mac, its command D.

So I'll duplicate this and our habits to here.

I will take out this text inside this shape.

And out writes define goals there.

I can have in brackets saved by stakeholders.

So I'll keep this here.

Now outcome here also out duplicates these and out habits, they're right on the dish shape, which is a square shape, right.

So inside the sticky notes, I'll take all of these out and out.

also assume that we have stakeholders somewhere who sent us the goals.

That's the ones for this project.

So let's assume that the stakeholders sent us this as their goal.

And it says, research and help us us simplify every task needed to make a stock investment.

So what we have here so far is this, the stakeholders have presented us with a problem and B users facing the problem.

And they have gone ahead to define their expected goal for this project.

And the expected goal is that they want us to research and help users simplify every task needed to make a stock investment.

So let's move over to the next stage of our workflow, which is the stage where we the UX designers will have to empathize with the users facing the problem.

So I would come here, I'll duplicate this, I would have this here.

And I would say empathize.

Now I have this here also.

And I'll take out all we have here.

And at this empathize stage, this is actually the stage where we the UX designers will now get to work.

So what do we do at this stage? What are the actions that we need to carry out at this stage, so that we can say that we have properly empathized with the users facing the problem.

So what we are going to do is to interview the users face to face or send out surveys digitally to the users.

The purpose for that is so that we can understand the problems from the perspective of the people facing the problem.

Now after that, we are going to create what we call user personas, all under this empathize stage.

So out, make this a list, just like this, to have that organized properly.

And when we are done with the empathize stage, by carrying out these two actions here, the next thing we are going to do is to move over to the next stage of our workflow, which is the stage where we will have to create a problem statements.

So I would come here, I would have this here.

And I'll change that to create problems statements, and have this stay here.

So at this stage, where you the UX designer will be needed to create a problem statements, what you do to create a problem statements, it's easy, just state the problem of the users with all you have gathered from the previous stage, which is the empathize stage.

So after you have interviewed the users to understand the problems from their perspective, and you have created user personas for each of the user, what you do is you'd use all of that data to properly state the problem that the users are facing.

Now when you create the problem statement, which is you stating the problem properly, the next thing you do is to move to the next stage of our workflow, which is the idea stage.

Now, when you get to the idea stage, let's have this here.

When we get to the idea stage, the actions that you take at the idea stage are simple actions.

All you'd have to do with this, launch a brainstorming session, then during the brainstorming session, vote for the best idea, when you vote for the best idea, select the idea with the highest votes.

And there you have gotten an idea that you can then take to the next stage of our workflow, which is the stage where we are going to design that best idea into a testable prototype.

So before we go there, let's select this and let's make it a list like this.

Now, let's come here and let's look at the next stage here, which is the design prototype stage.

And when you get to this stage, what are the actions that you need to take for you to properly design a workable prototype, we are going to look at the actions now.

So out have this the here I'll take all of these out.

And the actions that we are going to take to properly design a prototype are all of this.

First things first, we are going to create an information architecture for the best idea that we got from the idea stage.

When we create that in commission architecture, we are going to use that information architecture to create what we call a low fidelity prototype.

Now, after we create that low fidelity prototype, we are going to test the low fidelity prototype.

And when the test is successful, we are going to go ahead to create a high fidelity prototype for that best idea that we got from the idea stage.

Now, after we create the high fidelity prototype, we are going to move over to the next stage of our workflow, which is the stage where we are going to need to test that high fidelity prototype.

So I would come here, I'd have this here, I would say test prototype.

And I'll bring this here, I can just say usability testing here.

And that's all.

Let's come here, let's make all of these illest.

And that's okay.

So what we have here is a proper breakdown of our workflow.

So I like to connect all of this so that we understand that these stages are to be followed one after another.

So I would select the connector tool here, you can see where my mouse cursor is on, click on it to select it, I would come here out, select this point, click hold and drag.

And I would connect with this other point here, I would select this also connected here.

I'll do that for all of these other items.

Also, I would have all of them connected.

So we are going to design our products by following the breakdown of this workflow.

So now that we have outlined our workflow stages, and we have broken down all of our workflow stages like this, the next thing we need to do is to start executing each of the actions that we have outlined here, one after another.

So let's get to work.

So the first stage of our workflow here is the stage where the stakeholders will present us with the problem and the user space in the problem, right.

And as you can see, that stage is sorted, because I assumed that a stakeholder presented us with this problem and the users facing the problem.

So this stage is sorted.

Now over to the next stage, which is the stage where the stakeholders will state their expected goals for the project.

And that is sorted also, as you can see here, I also assumed that the stakeholders has stated the expected goals to us, which is to research and help us simplify every task needed to make a stock investment.

Now over to the next stage, which is the stage where we the UX designers will get to work.

And that is the empathize stage.

And under the empathize stage here, these are the actions that we need to take.

The first action is to interview the users face to face, or send out surveys digitally to the users.

Now in this course, since this is a lesson, I can't show you how to set up a face to face interview.

But I'll show you how to create a digital survey using Google Forms.

So let's do that.

So I would come here in my browser, and I would open a new tab, then come here, I would click on this menu icon here so that I can access my Google Apps out scroll down and out, click on forms here.

And when I do that, I would come here and I would click on Blank there, then a blank form will be created for me.

Now I'll give this form a title.

I can call it stock app UX survey.

And that's its outcome here also, and I'll give the form a name.

So I can call the form stock up UX survey also, or you can give it any name at all that you want to give it.

Now the next thing I would need to do is to have a form description just to describe what the survey form is all about.

So outcome here, and I'll have this and it says this survey is carried out by best technologists.

And it is aimed at improving the experience of users who want to invest in stocks from an app without having complex steps.

Now you can come up with a better description when you are doing this in real life.

Now after that out, start passing in the fields that I want the users to give me a response to, and the first field out have here will be an email field.

I'd like to collect the email address of everyone that will take part in the survey.

So that's going to be my first field here.

So to collect email addresses outcome here.

I'll click on settings here.

Then I'll expand responses here.

You can see the responses section here, I'll expand it.

Then in front of this collect email addresses option here, I'll turn on this toggle button, just like that.

And that's sorted.

Now when I come back here, you will see that we have an email field here, which is going to require the user to enter their email address here.

And as you can see, there is a red Asterix there, showing that this is a mandatory field, which means that anyone taking this survey must have to enter their email address.

Now let's move over to the next question that we are going to ask anyone taking the survey? And that's going to be us asking them to enter their full name.

Yeah.

So I would come here, when I type that in, I would change this from multiple choice to shut answer just like that, then I would come here and I would turn on this toggle button to make this field a required field, meaning that anyone taking this survey must have to enter their full name.

And that's sorted.

So I would come here and I would click on the plus sign here to add another question.

Just like that, then this question will be country of residence.

Now, this is important, because coming from what the stakeholders presented us as a problem and the user space in the problem, we could see that the stakeholders are actually trying to solve a problem for people living in Nigeria.

So it is important to ask anyone taking the survey from where they reside.

So if someone from Germany takes the survey, by mistake or happenstance, then it means that when we are collecting the data from the survey, we are actually going to ignore that person's imputes.

Because the person is not based in Nigeria.

So that's why it's going to be important to ask this question.

So I would come here and I would make this required also.

Now make sure this is set to short answer also, then I would come here and I would click on this button to add another question.

Now this question is going to be us asking anyone to can be surveyed enter their age.

And this is also important, because usage of apps, and the experience behind the usage of apps differs by age range.

So I would ask this question, and I would set this to short answer, then I would make this a required question.

So I would go ahead and add another question option here.

So that I can ask my next question, which is going to be us asking whoever is taking the survey to enter their profession? I would keep this short answer.

And I'll make this required.

Then I'll add another question here.

And this question is going to be us asking, have you invested in stocks from a mobile app? Now this is going to be a yes or no answer.

And Google Forms automatically suggest this because I have a question mark at the end of the question.

Now outcome here, and I'll click on yes as my first option.

And I'll click on No as my second option, and that's going to be fine.

Then I'll come here and now make this is a required question.

Then I'll add another question here, which is going to be select the goals you always love to achieve when investing in stocks from a mobile app.

Now, I'll have that in brackets.

Same select more than one.

Now outcome here, and I'll make sure this is a checkbox option.

Now mimicking this checkbox option is because I want the person taking the survey to select more than one answer.

So I would come here, I'll type in my first option, which is going to be invest quickly.

My second option will be found my wallet with more than one option.

The third option will be withdraw my dividends quickly, the fourth option will be easily access transaction history.

And the final option here will be to save time.

So this is me asking anyone taking this survey to tell us what they would love to achieve more when using a mobile app to invest in stocks.

So these are all the options that they can choose from and from the answers they select.

We the UX designers will understand what to focus on when designing and what not to focus on when designing.

So I would come here and I would make this a required question also.

And that's fine.

And I'll add another question here.

Which is going to be me asking anyone taking this survey this question it says select the frustrations you face when investing with the app you are currently using to invest so out also good Give them the option to select more than one answer here.

And I'd have checkboxes selected here.

So the first option here will be complex and unnecessary graphs, the second one will be long time to invest.

And the third option will be excessive ambiguity of information.

The fourth option will be on friendly user interface.

And the final option will be difficulty in funding wallets or accounts.

Now, this is us asking whoever is taking the survey to tell us the problems that they have with any investment app that they're currently using.

Now from what they would select here, we the UX designers will understand the problems to tackle and what to completely avoid when designing our own investment up.

So outcome here and I would make this a required question also.

And the final question, or the final request out have in this survey is to have the person taking the survey to upload their picture.

Now, this is not going to be a mandatory field, we are going to make it optional if they like the upload if they like they don't.

So I would come here out, click on the plus sign that add question.

And I'd come here and select File Upload.

Now outcome here, and I'll click on Continue.

And I would come here and I'd say upload your image.

And I would make sure this is not set to required.

That's because I want it to be optional.

And that's fine.

So at this stage, I'd like for us to preview this survey to see how it will look like when it is sent out to the people facing the problem.

So I would come here, and I would click on this button here, you can see where my mouse cursor is on, when I click on it, I would have a preview of the survey.

And this is it here.

It looks okay.

So let's come back here.

And let's click on send.

When you click on Send, you'd have this pop up show up here.

Now you'd come here and you'd edit this message, just in case you want to send this as an email to whichever person you want to send it to.

So you would come here and you'd say, vest, technologies there, you put in your own company's name, best technologies, has invited you to fill in a survey for UX research, or whatever you want to say there.

And that's fine.

Now this option is only when you want to send this survey form an email directly to people, you would come here and you type in their email address.

Let's say you type this in, you would use comma then type in the next email and the next email and the next email.

Now, if you don't want to send this as an email, you have the option of sending this also adds a link.

Now this option will make it possible for you to put this link up on your social media or send it through WhatsApp or send it through any other app to the public so that anyone that stays in Nigeria can stumble upon the link and take the survey.

Now to do that, come here and click here.

When you click there, you'll see the link here.

Now come here and click on this checkbox that says shorten URL.

When you do that, you'd have a shorter link.

Now you'd come here and just copy this link.

When you copy it, then you can post it on LinkedIn, you can post it on Twitter, you can post it anywhere you want to post it, you can send it to anyone.

And when they click on the link, they will be taken to the survey form for them to take the survey.

Now when they take the survey, you will be having the option to see the responses here.

All you do is come back to the form, click on responses and you'd see all of the responses over here.

Currently, I have zero responses.

So what's going to happen is out take this survey myself, I would take it twice, so that I would have two responses.

And I'll use those two responses to continue our research process.

Now take note in real life, you'd have more than two responses.

So I'll pause this video here.

I would go ahead and out.

Take the survey myself twice.

So I have taken the survey by myself twice.

And these are my responses.

As you can see here we have this field that says who has responded and these are the emails of the people that have responded and these are their full names and all of that now, this summary tab here in the responses section will just give you a full summary of all the responses.

Now for you to attend to one response at a time, come here and click on the individual tab appear.

When you do that, then you can come here and select the individual responses based on their email addresses.

Currently, this email is and@xyz.com.

And, and all of these responses here, all of these answers are the answers of this particular user.

If you want to see the answer from any other user, come here and select that with the email of that user.

If I select chicks@xyz.com, you will see that I would have all of this show up here.

Now, as you can see here, this is the email of chooks.

And this is the full name of trucks, trucks, EK, and the country and city of residence is Nigeria, Enugu, the age is 24.

The profession is importer.

Have you invested in stocks? Yes.

Have you invested in stocks from a mobile app? Yes.

Select the goals you always love to achieve when investing in stocks from a mobile app.

And Chuck said to invest quickly to one my wallet with more than one option to easily access transaction history and to save time.

Now, the next question here is select the frustrations you face when investing with the app you are currently using to invest.

And chucks says, long time to invest complex and unnecessary graphs, excessive ambiguity of information and non friendly user interface.

Now, for the other user, which is n, you can see the email of the user here and the name of the user is M for lucky.

And the country and city of residence is Nigeria Lagos.

I know in my initial survey form, I did not include city of residence, actually.

But I just had to include that so that I can target the particular location where the user is staying.

And the age is 24.

The professional is mural artist.

Have you invested in stocks? Yes.

Have you invested in stocks from a mobile app? Yes, select the goals you always love to achieve when investing in stocks from a mobile app and MCs to invest quickly to find my wallet with more than one option is the access transaction history save time and for this question here and select long time to invest complex and unnecessary graphs, excessive ambiguity of information and non friendly user interface.

Now at the bottom here, you would also see that the date of submission and the time of submission is recorded.

So I'll come back here.

And I'd also like to let you know that you can, you can export this response to a spreadsheet.

Now, I would advise you that if you want to do that, come here, click on summary, then click on create spreadsheets.

When you do that, you'd have this option to select, create a new spreadsheet or select existing spreadsheets.

Now, if this is your first time, just create a new spreadsheet.

Now I'll keep that now out, keep that selected, come here and out, click on Create.

When I do that, I'll have a new tab launched.

And as you can see, all of my responses has been exported into the spreadsheets.

Now you can also choose to come here and make your analysis from the spreadsheets.

And that's okay.

So after you create your surveys and send them out and the users or the people that you sent them out to send in their responses, you would go ahead to create what we call user personas for each and every user that sent in a response.

So at this stage, I'd like us to see how to create user personas and take notes.

Creating user personas is an action you take while you're at the empathize stage.

Now just understand that this empathize stage is the stage where you get to know the users better and understand their frustrations better.

And that's because it's only when you understand a problem better that you can come up with a better solution for that problem.

So let's go ahead and let's see how to create user personas for each of the user that sent in a response to our survey.

So I would come here now.

And I would select the text tool here.

And I'd have this here, I would say user personas, I would keep that selected.

I'll change this text from a normal text to a sub heading text.

And I'd make this bold, then I would come here and I'll change the color of this text to that.

So this is going to be our user persona section.

Let's duplicate this.

Let's come up here.

Let's call this section, workflow break down.

However you want to call it, it's fine.

That's okay.

So I'll just scroll down to the user persona section.

And the first thing I'd have here is the image of the user that I want to create a persona for.

So I would come here, I would select the square tool here to have a square shape here, which I am going to use to place the image of that user in.

Now this is necessary, whether the user sends in an image or not, you can just have these here, if the user does not send in an image, then you leave this blank, go ahead and do the rest.

But if the user sends in an image, then you place the image in here.

Now there's one way to place an image into a shape here in feature, all you have to do is keep the shape selected, right click on it, then go to plugins and use the Unsplash plugins for that.

So I would come here, I would launch that plugin.

And I would come in here and I'll type in African woman.

So I can have an image of an African woman show up there.

So I'd come here and out select this.

And that's okay.

So the next thing to do is to have all of these details about this person who has this image.

Now the name here is an felucca, the country and city is Nigeria, Lagos the age is 24 Professional mural artists.

Now, over here, I would say an is a mural artist resident in Lagos, Nigeria, and is also a stock investor who invests in stocks with existing stock investing apps in Nigeria.

And this is like his summary about her personality.

Now, I'll go ahead and out highlight her frustrations with the existing investment apps that she used in Nigeria and out also highlights the goals that she aims to achieve with an investment app.

So outcome here, now have this here, outpaced this.

And over here, these are the things that she wishes that she had as an experience with an investment app.

And these are her current frustrations.

Now all of these details about an was gotten from the response that she gave us when she took this survey that we created.

So you can see how this connects.

So let's go ahead and let's create a user persona for the other user that took the survey.

So that is going to be chooks.

So I would come here, I would have this shape here.

And I would run the Unsplash plugin on that shape.

And I would type in African man.

And I would go with this here.

And that's okay.

So I would have this hair for chooks.

This is his name, and his country and city, age, profession, and all of that out also highlight his goals and frustrations.

And that's fine still.

So what we have done so far is this, we have concluded the empathize stage, we have gotten to know about the problem from the perspective of the users.

And we have created user personas for each user that took our survey.

So we are going to move ahead to the next stage of our workflow here, which is the stage where we are going to create a problem statement based on all we have gathered during the empathize stage.

Now this really makes sense because you can create a better problem statement when you understand the problem better.

And the way to understand the problem better is to empathize with the people facing the problem.

And that's what we have done.

So let's go ahead and let's create a problem statement based on what we have learned.

So I'll duplicate this outcome here, I'd say problem statements.

And for me going by all we have learned from the empathize stage, this is my problem statement.

My problem statement states that users are frustrated with existing investment apps, as a result of excessive ambiguity of information and complex steps.

These consents negatively affect the experience of these users.

Now, this is my problem statements and this is the problem that our try solve.

So, if we come up here, you will see that we have empathized with the users and we have created a problem statement.

So the next stage of our workflow is the idea stage, which is the stage where we have to come up with an idea that can solve the problems that we have in the problem statement and what actions are we to take at this stage.

So at the idea stage, the first thing we are going to do is to set up a brainstorming session where we are going to invite other designers, product managers, business managers Lawyers, software engineers, and so on and so forth.

Now, when we invite all of these people, we are going to present them with enough information about the problems in the problem statement, and ask them to come up with ideas that can possibly solve the problems in the problem statement.

Now, when each and every one of these people that we have invited, come up with an idea, the next thing to do is to read out all of these ideas to everyone and call a vote for the best idea.

Now, the idea with the highest votes should be selected.

And when that is done, it means that you are ready to move to the next stage of our workflow, which is the stage where you'd have to design that idea into a testable prototype.

So before we move over to this stage here, I'd like to come here out also highlights that this stage is the idea stage.

This is the idea stage.

And since this is going to be a brainstorming session stage, and obviously I can't have a brainstorming session here in this lesson, it's going to be something that you'd set up with the people you want to set it up with, beat on Zoom discord, beat real life, anyhow, you want to set it up, that's fine.

So I'll just highlight this stage here.

And what I'm going to do is, I would assume that I conducted a brainstorming session offline, just so that we can learn better.

And I'd also assume that during that brainstorming session, we arrived at an idea.

So I'd have this here selected idea.

And I would paste this as our selected idea.

Now this is the selected idea for this course, it says Create an investment app where graphs are represented with text, where users will have the option to fund the account and wallet via bank transfer or their debit cards, where recent transaction history will be easily accessible.

And were plain and easy to understand English will be mostly used.

Now if you look at this idea, you'd see that this idea solves the problems that we have in this problem statements.

And this problem statement was gotten from all we learned during the empathize stage.

And we were able to learn all we learned during this stage because we created a survey form and sent out the survey to use us so you can see how everything connects.

So now that we have an idea that we can use to solve the problem, the next stage here is the design prototype stage.

And at this stage, the actions that we need to take all of these First things first, we need to create an information architecture for this best idea that was selected during the idea stage.

So I would come here, I would scroll down to this point.

And I would have this here, I'd say information architecture.

Now before we create the information architecture, let's understand what an information architecture is and why it is important to create one.

So the information architecture of a mobile app is the way you organize and arrange information on the mobile app that will help the users have that mobile app to accomplish their task on that mobile app without a bad experience.

So it is in the information architecture, that you will decide what features and what information we exist on each page of the app, and each step of the app.

So let's go ahead.

And let's create an information architecture for this idea.

Now, the way to start creating your information architecture is to first of all, define the goals of the users who will use the app, then define the task that the users have to complete to achieve their goals on the app.

So outcome here, and I'd have this here.

So this here is the goal of the user to invest with a good experience.

Now the user task here are the actions that the user will have to take to achieve this goal.

Now, what are the task, the user will have to sign up to the application as a new user or log in as an existing user then fund their account or their wallet, then use the fund that they have in their account or wallet to invest in any stock of their choice.

So if they can accomplish this task, this task and this task, it means that they have achieved that goal on that app.

So after defining the goals of the user and stating the task that the user has to complete to achieve that goal, we are going to go ahead to create our information architecture flow, and for the sake of time out, speed up this process, and I'll explain it so that you can understand.

So what we have here is our information architecture flow.

And our zoom in so that I can break down this flow one after another and also show you how to come up with a flow like this.

This is the start point of the flow.

This is where the user launches the app.

So when the user launches the app, the user will have two options, one to sign up and want to log in.

So let's go with the signup flow here.

Now, if the user is trying to sign up, the user will be required to sign up with their email address, phone number and password.

And after this step, the user will have to verify their phone number.

Now, after the phone number is verified, the user will be taken to the homepage of the application.

When the user gets to the homepage of the application, the user will have all of these options here.

And the first route or the first option here will be the menu icon, which will be on the homepage.

The user will also have the account balance displayed on the homepage, the user will have a fund account option that they can use to fund the account still on the homepage.

And still on the homepage.

The recent transactions by the user will be displayed there on the homepage.

Now, still, on the homepage, we are going to have a referral banner.

Still on the homepage, we are going to have an invest route that the users can take if they wish to invest in stocks.

Now still, on the homepage, we are going to have a transact option, just in case the user wishes to deposit or withdraw.

So all of this is on the homepage.

Now let's look at the flow of the first item here, which is the Menu icon.

Now if the user clicks on the menu icon, which is on the homepage, the user will see all of these options, recent transactions, card management, investment portfolio request statements and settings.

Now, just for the sake of those who don't know what a menu icon is, if you go to an app or a website, using your mobile phone, you would always have this icon here at the top that when you click on it, you'd have a drop down or you'd have a menu bar sliding from the left or from the right now, that's what we call the Menu icon.

And most mobile apps have that.

So this is going to be all that we show up when the user accesses the menu icon route now for the account balance, or that's going to show a base available balance.

And that's all.

Now for the fund accounts option.

This is the flow, the user will have to choose a method.

And this is important for the experience.

Because from our user research, it was clear to us that the users actually want an experience where they would have the option to fund their account with more than one option.

So when they choose a method, then they would go ahead to find the account with that method that they have chosen.

So that's what the fund accounts route right now for the recent transactions route.

All the user will have when they access a recent transaction will be the transaction details.

And that's okay.

Now we have the referral banner option here.

And when the user access the routes, they would have a referral promo code that they can copy you know and send to a friend to join the app for all of that and all of that.

And that's fine.

Now we have the InVEST route here.

When a user accesses this route, the user will see a list of stocks that they can invest in and will also see their stock portfolio that they had invested in.

So if the user access one of the stocks that's been listed, the user will see the detail for that stock.

And if they like what they see in the detail, they will go ahead to invest.

And that's a good flow.

So if you come here, we have this route here, which is the transact route.

When the user accesses this route, the user will have the option to make a deposit, which is also like funding the account you get.

And the user will also have the option to make a withdrawal from the account.

So this is just the basic information architecture flow for this app.

And it is always important for you to create this information architecture, so that you will understand and organize the steps that the user will take on the app.

It is also important so that you can also streamline the core features that each page Your app will have.

Now if you remember, that was the signup proud, the login routes is still the same, because all you have to do here to login is just enter your email address and your password, then you'll be taken to the homepage.

Still, when you get to the homepage, every other theme is the same.

So that's that if you have any questions on the information architecture here, draw my attention to it.

And I'm there to help.

So if you come here now, in our flow breakdown, you'd see that under the design prototype stage, we have created our information architecture.

The next action at this stage is to create a low fidelity prototype of the best idea using the information architecture.

Now before we do that, I'd love to explain what a low fidelity prototype is.

So a low fidelity prototype is a dummy version of your final design for an app.

Now, the question you may ask is this, why do we need to design a dummy version? Now this is it.

Designing a dummy version is important because at this stage of trying to figure everything out, your design, and your design process can be subject to lots of changes, and imputes from the stakeholders.

Now, it's just like building a dummy house first, before you build the main house.

Now, if you use paper to build a dummy house first, before building the main house, it's going to be a lot easier when the owner of the house comes to make a correction or comes to make a change.

Since it's a paper, you don't have much to lose, all you have to do is just tear it and put it back in seconds.

But if you go ahead to build the main house first, and the owner of the house comes and says, Okay, I don't want this design here, I don't want that there, it means that you'd have to break down that part of the house and rebuild that part of the house with all of the resources that you have put into building that part of the house.

And that's going to be a lot more hectic compared to you using a paper to just build a prototype or a model of the house.

So that's basically what a low fidelity prototype is.

And that's why it is important for you to have a low fidelity prototype, then take that to the stakeholders for correction and changes and imputes and all of that.

Now, when the low fidelity prototype has been accepted and agreed on, then you can go ahead to design the real app itself, which is the high fidelity prototype.

So let's go ahead and let's see how to create a low fidelity prototype of our best idea.

So we are going to do that using a figma design file.

So I would come here, I would go to figma.

And I'll create a new design file.

And I'll call this stock investment app.

And out come here and out, rename the page one to low fidelity.

And this page is going to contain all our low fidelity screens.

So let's go ahead and let's start.

So to design low fidelity screens is easy.

And it is easy because you don't need a design system for that.

Like you don't need a style library.

To do that.

You don't need a component library.

To do that.

You don't need all of that, all you have to do is focus on the user task.

So if you come here, you'd see that our user task on this app is to sign up a login on your account or wallet and invest.

And if a user accomplish all of these tasks, it means that the user will achieve their goal on this app, which is to invest in stocks.

So we are going to design a low fidelity screams around these user task.

So let's come back here and I've picked my design file.

And let's see what it is to create low fidelity screams, all you have to do is select the frame tool, then go with any template of your choice, I would go with iPhone 13 Promax, and not have that.

So the next thing I'll do is to just come here.

And since this is going to be the splash screen, I'll just have this logo stay here out align it to the center, horizontally and to the center vertically, then I would go ahead to create the login screen, the signup screen and all of that.

And actually, the way I like doing it is this, I like to segment the screams into categories using the user task.

This section or this segment should be four authentication screens.

So I'll go ahead, speed up this process and have other screens here.

Then I'll explain how I came about all of that.

Now before I do that, I may have missed something here.

I know some people who are new to fit jam may not understand how these connectors are created.

Now all you have to do is use the connector to select it, click on the point, then you connect it anyhow, you want to connect it, you can take your connector anywhere, connect any shape that you are trying to connect, and that's fine.

And when your connector is created, you can actually play around with it, you can click on it to select it, grab the points, take it up, take it down, anyhow, you want to play around with it, it's fine.

Now you can also select the connector and change the color of the connector, just like this.

So all of these connection lines were created using the connector tool here.

So let's go back to our figma design file.

And out pause this video here and come back with all of our low fidelity screams, then I'll explain further.

So what we have here are low fidelity screens for the authentication task.

So let's zoom in.

As you can see, here, we have the splash screen, which is this.

Now after the splash screen, we have this screen where the user will have to choose that authentication action, which is either to login or to sign up.

Now to create this button here, you don't need to use an auto layout or any of that, all you just have to do is select the rectangle to like this created anyhow, you want to create it, then come here, select the text to and you can just say login or sign up or whatever you want to have.

They're just like this.

That's how I created this.

And I did not have to come up with a color.

And it's advisable for you not to use colors when creating your low fidelity screams.

And that's because if you have colors chosen, it may distract the stakeholders when you are presenting the low fidelity screams to them at this stage, all you should focus on is the user experience.

So having colors or making the low fidelity screams look good, may distract the stakeholders away from the user experience.

So that's how I came up with the buttons there.

And here also, this impute fields, I just use the rectangle, the rectangle to create a rectangle shape there, I added a stroke.

And I took out the field color and I had that then I had a text inside there saying email just like that.

And this button, we know how to do that.

I duplicated all of this.

And I had one more field here for the phone number.

And my button is still here.

Then here we have this field for a verification code.

And over here I have the Verify button that Okay, so all of the screens here are for the authentication task.

Now let's scroll down to the next task, which is going to be the fund wallets task.

And that task actually will happen from the homepage.

So that's why I created a low fidelity version of our homepage.

So you can see that we don't have too much of information here.

So if I scroll down, you'll see that I have the fund accounts pop up action here.

Now this element is going to show up when a user clicks on fund accounts here.

When they do that, this pop up will show up for them to choose the method that they want to fund the account with.

And that's okay, so this is easy to create, just have a rectangle like this and have your text inside of it.

Then the background of this navigation section is also a rectangle that I had across the screen like this, and I changed the color to something like this, just like that.

That's easy.

So over here, this is a rectangle also with a text on it.

And I have a rectangle here with a corner radius of 16 px.

And that's okay here, we know how to create a button.

And this is just text.

Now for this icon here, I got that from an icon plugin, I used the feather icons plugin to have that sorted.

So this task is complete, we have the font accounts button here, which if a user clicks on it, you will have this pop up show up like this.

Now let's move over to the next task on our app.

And the next task here is to invest.

So if I come here, and I scroll down, you'll see that I have this screens for the InVEST task.

Now this is the section for that we have this page here we have this icon we have this text here.

Now I have this section which is like the list of stocks to invest in.

I have this search bar here.

I have this search field here which is also easy to create.

All you have to do is create a rectangle give it a corner reduce of let's say 16 Or let's say 816 is a lot.

Then come here take out the the fill color and give it a stroke Hello, and you have that, then you have a text inside there, that's really easy to create, then I have the list of stocks here.

So I just have a rectangle here also with this text on top of it.

So it's also easy to create, all you have to do is just have something like this, then give it a canary use of 16, then take the color down the beats to this point, then have your text written on top of its plot away, then keep this here, then have this plus 234 percent.

They're all any number that you're okay with.

So that's how I created this.

And if you scroll down, you'll see that we have the your stock portfolio section, which has this also, we know how to create this.

And over here we have the navigation section.

And that's okay.

So the next page here, let's zoom out a bit.

The next page here is the stock Details page.

Now, this is all assuming that a user is interested in this stock here, you can see where my mouse cursor is on.

So if a user is interested in this stock, and the user goes ahead to click on it, this details page will show up for the stock showing the details of that stock and the company that owns the stock, you'd have the company logo here.

And you'd have the stock percentage and all of that there, you'd have the interest for that stock, minimum cap volume, about the company, the valuation rank and all of that, then you'd have an invest button here.

And I think by now we know how to create all of the elements here.

Now, if a user clicks on the InVEST button, they would go to this page where they would have to enter the amounts that they wish to invest in that stocks with.

And I believe on this page here, we know how to create all of the elements that we have here.

Now, if a user clicks on the next button here, after entering, the amount they wish to invest in that stocks with the user will be taken to the next page here, which is going to display the summary of the investments they're about to make.

Over here, they would have the amount that they typed in here, display here, the minimum cap, the interest value, and so many other details, and so many other details that are not listed here.

Now, if the user is okay with that, the user clicks on the Proceed button, and the next page that user will be taken to is the success page indicating that that investment is successful.

Now the user will have the option to click on the back to home button here.

And that's that it means that that task, which is the Invest task has been successful.

So for us to properly present low fidelity screens like this for testing and for impute and for opinions.

And for all of that.

For us to properly do that, it means that we need to make a prototype of this low fidelity screens, so that we can present them properly for testing and for imputes from the stakeholders.

So let's go ahead and let's do that.

I'll click on the prototype option here.

So let's start with the splash screen.

So out select out, click on the splash screen to select it.

When the splash screen is selected, you'd have this point here, all you have to do is click on it, hold it and drag it to the screen of destination.

So I would want the users to go from the splash screen to this screen here.

Now when I connect this splash screen to this other screen here, you'll see that figma will bring up this interaction details card for us.

So that we can set the mode of our interaction.

So over here I have the On Click event.

And the action for that onclick event is a navigate to action.

So what this means is that when the splash screen is clicked, we are going to navigate to this screen here, which is iPhone that in Promax two, this is the name here actually, you can actually it is advisable for you to rename all of your screens, that's the best way to do it.

So this practically means when the splash screen is clicked on, navigate to this other screen, which is this one here.

Now we have an animation section here that we can set the animation of that transition or the animation of that navigation.

So currently to set instance, I can come here and set this to smart animate, then set this to ease in and out and out.

Set the animation delay time to 800 milliseconds, just type in 800 there and press the Enter key on your keyboard and figma will add the milliseconds for you.

Now this animation settings is optional.

The most important thing here is that we have set the event and the action that will be triggered by that event, then we have sets to destination frame for that action.

And that's okay.

So that's sorted.

Now outcome here, out, click on this button.

And I will say, okay, when a user clicks on this login button, they should go to the login screen, which is this.

Now for the Interaction Details, ugly with set like this.

This is the setting we had before now.

So I'll leave it set like that.

Now, for the sign up button.

When a user clicks on the sign up button, it means the user is a new user.

So I would like that user to be taken to the signup page, which is this one here.

Now, when the user goes to the login page, and the user enters their email and their password, it means that they would have to click on the login button.

And when they click on the login button, I'd like them to go straight to the home page, which is this.

Now remember, for a user to log in, it means the user is an existing user.

Now, when a user selects the Sign Up option here, it means the user is a new user, and the user will have to enter their email address, phone number and password right.

Now when they do that, it means they would have to have their phone number verified first.

So when the user clicks on sign up, the user will be taken to the verification code page.

And when the user's phone number is verified, the user will then be taken to the homepage.

And that's fine.

So you have seen that we have created the authentication flow.

So let's come over here on the homepage, let's work on the next task.

Now the next task is to fund the accounts, right.

And to fund the accounts, the user will have to click on the fund accounts button.

Now when they do that, we are going to want a pop up to show up on the screen.

And that pop up should show this card here that will that will require the user to choose the method that they want to fund their accounts with.

Let's come here in our Interaction Details.

Over here, it's an On Click event.

That's okay.

Now, over here, we have the Navigate to option.

And that's not what we want, we want a popup to show up on that same screen, we don't want the user to leave that page that the user is on, we want the user to still stay on that page, but have a pop up show up.

So how do we make that happen, we are going to change this from navigates to to open overlay.

When we change it to open overlay, we are going to come here and select the center option, because I would want this pop up to stay at the center of the screen here.

So over here, I would keep this selected, which is closed when clicking outside and out.

Also keep this add background behind overlay options selected, then for the opacity of the background overlay out, keep it set to 25%.

Now for the animation, you can still keep it set instance or come here and select any other option of your choice.

So that's okay.

And we are okay with that.

Now, if a user selects bank transfer or debit card, they will be taken to another page where they would have to process that transaction method.

So you can also come here, if you don't mind, let's click on Design, you can come here and duplicate this page and and create a low fidelity screen for that you can call these bank transfer.

And you can have whichever element you want to have here.

And you can go ahead to have the debit card page also that the user will go to when they select the debit card option here.

But that's not the point here.

So I'll take this out.

Now we are done with the fund wallet task.

So the next task is the Invest task.

And this task will happen from the homepage.

It is when the users go to the homepage, that they would click on this invest option here for them to go to the InVEST page so that they can invest in stocks.

So from this homepage here, outcome held click on prototype.

From this homepage here, I would select this invest button here.

And I'll create a connection to this page.

And that's okay.

So when a user clicks on that invest button at the navigation section there on the homepage, that user will be taken to this page here, which is the Invest page where the user will see the list of stocks that they can invest in and their stock portfolio.

So if a user comes to this invest page, the task we want them to complete is to invest So let's say the user is cool with this stock here and the user wishes to invest in this stock, I would select it, then I would create a connection like this.

This means that when the user clicks on this stock, the user will go to the stock details page for that stock.

And when the user is okay with that stock details that the user sees here, the user will click on the InVEST button here.

And the user will go here to this other page, where the user will have to enter the amount that they wish to invest in that stocks with.

And when the user enters the amount they wish to invest with, the user will click on the Next button, which will take the user to this page here where the user will see a summary of the investment the user is about to make.

And when the user is okay with all the user sees here, the user will click on proceed and the investment, which is the task will be completed.

So what we have here is we are done creating a low fidelity screens.

And we can present a low fidelity screens for testing now.

So how do we do that, I would come here, I would select the splash screen, because that's where the whole journey starts from right? When I select it, I would come here, and I would click on this presents button here to have that presented, a new tab will be launched for that.

So I would come here, and I would click on the Enter full screen option here you can see where my mouse cursor is on.

Now, this is the presentation, I would present to the stakeholders, which are my employers or the owners of the app.

So I will take this presentation to them to demonstrate the user experience that I have come up with that will enable the users to accomplish their task on this app.

So I would go from here, I would click on this screen.

And I'll explain to the stakeholders at this point that existing users can click on login.

And new users can click on sign up.

So I would demonstrate these as a new user, I would say okay, when they click on sign up, they would come here enter their email, phone number and password.

When they click on the Sign up button, they would have to enter a verification code.

And when they are verified, they would go to the homepage.

Now, if they want to invest, it means they have to fund the account.

So I would click on the fund account button to demonstrate to them that in this case, now we have a bank transfer method and debit card method, I would say okay, if the users go ahead to fund to fund the accounts, then it means the users are ready to invest.

So for them to invest, they would come down here and click on the InVEST button there.

When we use that those that the user will see list of stocks that they can invest in.

And if the user chooses to invest in any of the stock, let's use this, for example, they would click on it, when they click on it, the user will be taken to the stock details page for that stock.

And when the user is satisfied with the details of the stock, the user will click on the InVEST button here, then the user will be required to enter the amount they wish to invest in that stocks with when the user does that, the user will click on the Next button here.

And when the user clicks on that next button, the user will see a summary of the investment they are about to make.

And if the user is satisfied, the user clicks on the Proceed button here and the investment will be successful.

And when the user is done, the user clicks on back to home, and the user will be taken back to the homepage.

So a presentation like this will really reveal the experience that the user will have using this product.

So if your low fidelity prototype has been accepted by the stakeholders, it means that it is now time for you to go ahead and start the process of designing your high fidelity prototype, which is going to be like the real design version of your app, or the final design version of your app.

And it is at that stage that you'd focus on themes like colors, typography, effects, components, library style library, and all of that.

So in this course, let's assume that our stakeholders gave us a pass for these low fidelity screams and they are okay with it.

Let's assume that our stakeholders now want us to go ahead to design the real version of the app.

So what do we do? Let's click on Design.

Come here.

Create a new page and call this Hi Fi deleting.

So at this stage, I'd like to welcome everyone to the most interesting part, which is the part where we start building our designs from scratch.

So first things first, I'll go ahead to create my style library.

And I will start by creating my typography styles.

So I will do that using the Material Design version to guide.

So I would come over here, I would go to material.io.

And when I come here out, click on Design.

When I click on Design out, come here on the left side, and I'll click on typography, then I would select the type system.

And when I do that, I would come here.

So the first thing that I would have set is the typeface or font family that I want to use for this project.

For this project, I would love to use the rubric font family.

So I would come here, and I would select it here for headlines and subtitles, then I would go ahead to select it here for body and captions, just like that.

Now I'll use the data here in this type scale to create my typography styles.

Now let's start with creating headline textiles for this project.

Now since this is a mobile app project, I won't see the need to have a headline one text, same for the headline to text.

So I would go with the headline for textile as my own headline one textile just because this is a mobile app design and this size of text is going to look too big for a mobile app.

So I would come here out click on headline for and I would use these details here.

So I would come here I'll create a frame here where my textiles are going to stay in so I would say headline one a duplicate this out say headline one bold.

So outloud say headline two now this is me getting everything set before I start applying the details that out get here from the type scale generator.

So outcome here out, duplicate this and out see headline to bold and out come here out have this out see a headline three.

And this is going to be headline three bold, and that's going to be that for my headline textiles for this project.

Now I'll go ahead to have my body textiles.

So I would come here out, prepare this for body large.

And I'd have this be a body large bold textile, then I would go with body small here.

And I'd have this as Bodhi small bald.

Now this is my own style.

And this is my own pattern.

I am not saying this is the standard out there.

I'm just doing this because this is what I feel will give me the best design.

Now come here.

This will be for my button text and I'll have a caption text.

So after having all of this set out, come here out select the headline one text here.

And I will use the headline for textile here in material design.

Just like I said I would use this for my headline one textile.

So the font family sets Rubik, the width is set to Normal, which is regular, the size is set to 35.

And the letter spacing is set to 0.25 px.

So I would go ahead and I would have all of these sets.

So I would come here keep this selected, how to set this to Rubik and how to set this to regular and for the letter spacing out come here and out set this to 0.25 px, and for the size out set it to 35 px.

Now I'll use these same settings for this headline one text for the headline, one bold text, the only difference will be that this is going to be a bold text and this is going to be a regular text.

So I would select this.

Now to set this to 35.

I would set this to beak and I'll keep it set to bold like I said, and I'll make this 0.25 px and that's okay, so I'll go ahead and now do same for headline to headline three body large body large bowed down to the caption text.

Now for the headline to text here, I would come here in material design and I would use the headline five textile for my own headline to textile.

So the font families Rubik, the weight is normal, the size is 24.

So I would set the size to 24.

And for the weights out, keep it set regular and for the font family.

I'll keep it set to Rubik.

Now the letters business zero px, so I can just keep it set at 0% or just come in here and type in zero px, and that's fine.

I would use the same setting for the headline to bold, but the difference will be that this is going to be a bold text So I would come here, I would set this to 24.

Send this to Rubik.

Keep this set to zero, keep the letter spacing set to zero, and then keep this sets bold.

So I can have that.

Now for my headline three text.

If I come here, I'll use the headline six textile here for my own headline pre text.

So I would keep this set Rubik, this set to medium size set to 20.

So I'll keep the size set to 20.

And for this, I'll keep it set to medium and outside this to Rubik.

Then for the letter spacing, it sets 0.15 px.

So I would come here, I would say 0.15 px.

And that's going to be cool.

Then for the headline three bold, I would have the same sentence there.

But the only difference as usual will be that this is going to be a bold text.

So I would come in here, outside this to rubik cube assets board.

And for the size, I think it's 20 px, and for the letter spacing is 0.15 px.

So I'll type that in.

And I'll keep this set to 20 Just like this.

And that's okay.

So for the body large text, come here and use the body one textile here, you can see that the size is 16 px, the width is normal, and the letter spacing is 0.5 px.

So I'd come here, keep this here, I would set the letter spacing to 0.5 px outsets, the weights to regular and outset these to 16.

And out set this to Rubik and that's okay, for the body large board, you know what to do already, how to set this to 16, set these to 0.5 px, set this to bold, then set this to Rubik.

And that's it.

So I'll go ahead and out, have my body small text here.

And if I come here and material design out, use the body to textile here material design for that.

So I'll keep it set to normal set the size to 14 and the letter spacing to 0.25 px.

So I would have this set to 0.25 px, I'd set this to 14, out set this to Rubik, and I'd set this to regular.

So I'd have this here.

And this is going to be 14 0.25.

And this is going to be Rubik.

And that's sorted.

Now for the button text.

I'll keep this here.

If you come here, you'd see that the button text here has a size of 14 px and a letter spacing value of 1.25 px with a weight that is set to medium.

Now, over here, material design to the button text is all in uppercase.

But in my case, I won't have my text stay in uppercase.

And I think in material design version three, the button text is not represented in uppercase.

So I would go ahead and I'd have this set of 14.

And the letter spacing is pretty big.

So I would have that set to 1.25 px.

And this will be set to medium with the font family sets to Rubik.

And that's what we have here.

Now for the caption text, it's going to be set to 12 px with a letter spacing value of zero points for PX and a normal weight.

So I would come here, I'll keep this here.

And now I have this sets regular, this will be 0.4 px.

And this will be set to 12 Just like this.

And the font family will be set Rubik.

So this is going to be a caption text.

So at this stage, what I'll do is I'll go ahead to save all of these styles that I have created to my style library.

And I think we all know how to do that by now.

So I would speed this process up, I would select this column here, and I would call this headline one out go ahead fast forward this part of the course and come back.

So this is it, I have created and saved the textile that I would need for this project.

So I would come here and I would rename this frame typography styles, just for better documentation, you know, now when I click on my empty canvas, you would see that I have all of my saved textiles over here.

Now let's go ahead and let's create a color styles out.

We'll name this frame to color styles.

I'd save that now out create my color styles based on my meat.

I want to make use of the Material Design Guide to create my color styles.

And that's because you can actually do that.

You can create your color styles your textiles you can create any of your styles without using the Material Design Guide And you can actually mix it, you can create your textiles with the Material Design Guide and have your color styles created from your own inspiration.

So outcome here, I'd like to have a background color here.

So I'll use this my background color, or have a text stay at the top here to indicate that this is for my background color, I would select this text and I would make use of one of my saved textiles.

So I'll go with the body large text there.

So for my background color style, I'd like to use this color.

And that's good.

Let's zoom into this point.

So we can see clearly, and after having a background color, I'll duplicate this use this here, I would love to have a surface color.

And for my surface color, I'd like it to be this color here, you can use any color of your choice, this is my own choice.

So I'll duplicate this, and have this day here.

And this time, I'd like to have a surface text column, you can call this an on surface color, actually.

So I'd like to have a surface text color, which is going to be the color that I'll use to write text on the surface color.

So I'd like this to be white.

Actually, I know this may not be visible.

But I'd like that to be whites just like that.

So I would duplicate this.

Now for us to make this visible out, select it and add a shadow effect.

The next color that out heavier, we called the off text column.

And that's my own choice, I'd like to have another color for my text.

So I would use this shade for my off text color.

And duplicate this.

And I'd have another color here, which is going to be my error column.

And obviously, this is going to be a red color.

So I'll use this shade of red for that, then I'd have this here.

And I'd like to have a second surface color.

And I'd like that color to be just like this.

And that's fine.

So I have selected all of the color styles that I would want for this project.

So I would go ahead and I would save all of these styles to my style library.

And I think we all know how to do that.

So I would select this column here.

And I'd call that background color, I would speed up this process and I would come back to it.

So as you can see, I am done creating and saving my color styles.

And these are my color styles here.

So that's sorted.

The next thing I'd like us to do is to go ahead and create the grid style that we are going to use for this project.

So to do that, I would use a mobile layout, I would use the iPhone pattern Promax layout, so I would have the iPhone 10 Promax layout here, I would rename it to mobile grid style out zooming to this point, I'll keep it selected, then I'll add a layout grid property to it, just like that, then I'd have this big column grid.

Now I have the count before I would have the margin be 16 out have the gotta be 16.

And for the color out go with something like this.

Now, we are sorted for the column grid.

So I would go ahead and add a row grid property to it.

I'll keep it selected still come here.

Now to add another grid property that outset, as a row grid property, just like this out, set the count to 800.

And out set the stretch to center out set the gutter property to zero out come here, I will set the height property to eight.

And that's because I want the space between the row lines to be eight px, then outcome here now change the color something like this.

And that's going to be okay for me.

So I would keep this selected.

Come here.

And I'll save this grid style as my grid style for this project.

So I'll click on style there.

And I'll call this mobile grid style.

You can call it whatever you want to call it.

Now we have three styles saved to our style library, we have our textiles, we have our color styles, and we have agreed styles.

So I would like for us to go ahead and create shadow styles for this project.

To do that, I would come here out have a frame here.

Then I would rename this to shadow styles, when I renamed that to shadow Stiles out have some rectangles right inside that frame.

And the rectangle is just to display the shadow effects and how it's going to look like.

So I'll keep that selected.

I'll make the corner radius to have a value of eight.

I'll give it this column.

And I'll duplicate this and have this here.

I'll just have three shadow effect styles.

So I'll keep that there and outcome here in material design.

Now, go to the homepage out, click on the Search icon there and I'll type in shadow.

When I press the enter key out, have these results show up.

So I would come here, I would click on this link here, that's going to take me to material design version one, bear out make use of the recommendations that they have there for creating shadow styles.

So I would click on that link.

Now come here, and I would use this shadow recommendations that's under the sketch section.

So I want to go with the one DP elevation table here, I'll scroll down, and I'll make use of the 16 DP elevation table.

So I'll use these values here to create my shadow styles.

So I'll create a key shadow and an ambient shadow.

Now on that key shadow, you can see that we have two types of key shadow styles.

We have the Umbra key shadow style and the penumbra key shadow style.

So I'll create an ombre key shadow style first, and for that the Opacity value is set to 14.

So I would come out keep this selected, I would add an effect property, and I would set the Opacity value here to 14, and the X property is set to zero with the Y property set to 16.

So outcome here for the Y property out set this to 16, the X property has already set to zero.

Now the block properties 24, and the spread properties too.

So for the block property out, set it to 24.

And for the spread property out set it to.

And here we have our umbrella key shadow effect.

So I would go ahead and create for the panel, Brad key shadow effect and the MPs shadow effects.

So I would speed up this process also, and I'll come back when I'm done.

So these are the shadow styles that I have created.

So I'll go ahead and out, save them to my style library, the way to do that is pretty easy.

Select this rectangle there, then come here in the Effects section, click on that style icon there.

And you can call this whatever you want to call it out call this light shadow out cold this other one here, mid shadow, and out cold this peak shadow and that's okay.

So far, I have my textiles created, I have my color styles created, I have my effects styles created and I have my grid styles created.

Now at this stage, we are ready to start designing the components for our app.

So I would like us to go ahead and start that.

So the method I would like to use in the designing of our components will go like this, I'd like for us to design our components based on the user task of this app.

Now the first task I'd like us to look at is the authentication task.

So for this task, I'd like us to design all of the components that will be needed to complete this task.

So let's come up here, let's have a text here, I would zoom in to 200.

And I would have a text here, this is going to be the section where I would have all of my authentication components.

So I would come here, I would select this textile to have that there.

So for the authentication task, we have the login form and the signup form.

So for the login form, which components do we have there, we have the input field, and we have the button.

So I would go ahead to design the input field.

So I would come here, I'll just say, inputs.

Now this is going to be my placeholder.

So I would come here and I'll use the body small text for that.

And I would keep it selected, then create an auto layout on it.

Now when I create an auto layout, and it out, add the fill color, like this, then I'll just stretch it to this point.

Now I'll still keep this auto layout selected, come here and make sure that the content of the auto layout is aligned to the left.

And that's fine.

Now for the corner radius property, I would give it a corner radius value of eight to have that now outcome here and I would rename this to impute field.

Now while this is here, I'll select the background color for the input field itself, then the text here, I'll give it this off text color here.

And I'd like this input field to have a stroke color, which is going to be the color of the off text also.

So I can have this.

Now this is sorted, we are done with creating a imputes field.

This impute field is what we are going to reuse for the collection of emails, passwords, phone numbers, so I'll go ahead keep it selected and out, come here and click on Create components.

Now the next thing to create will be our button components.

So I would come here and I would have this text here and for that text outcome here now to select the button text for that Now I'll keep the text selected and I'll create an auto layout on the text.

Now outcome here, for the Button Auto Layout out, make sure the padding around items value is set to 16.

Now, same happened for this, the padding around items value for this input field is also 16.

So take note of that.

Now for this button components outcome here now give it this color, which is the surface color.

Now for the text, their outcome here, and I'll give it the surface text color, which is white.

Now outcome here, I would select the button auto layout, come here, now align the content of that auto layout to stay at the center.

Still keep it selected, come here and give it a corner radius of eight.

And there we have our button components created.

So I would come here out, rename this to button, then come here and click on Create components.

And there we have created our button components.

Now the next component I'd like for us to create here under the authentication task will be the input field, but the users will have to impute their verification code in now that input field will not look like this, it's going to look different.

So I'd like for us to go ahead and do that.

So I would come here, out of habit text here, let's just say zero.

And I'll keep the number selected, then go ahead and create an auto layout on that number.

Now I'll keep the auto layout I just created selected, come here and align the content of the auto layout to stay at the center of the auto layout, then I'd come here and add the fill color to that auto layout.

Now I'd come here, I would select the pencil.

And I'll just draw a line horizontally, then I'd click on Done.

And this line I just created here will be grabbed and taken into that auto layout that has that number zero.

And you can see that the line is placed here.

Now what I'll do is this outcome here, inside this auto layout, now I would select this straight line that I created, which is called vector one here, when I select it, I would come here and now change its horizontal resizing value from fixed width to fill container.

So that I can have that now I have a problem here, the padding around value for this auto layout is really big.

So I would select the auto layout outcome here and I would set it eight.

When I set it to eight, it's going to look like this.

Now I'd like it to be like this, because if I am placing these components on my screen, I would most likely increase the width.

And as you can see, when I increase the width, the number zero just stays the way it is.

But the line itself stretches across the container, which is actually what I want.

So this is okay, now, now seems the verification code will be a four digit verification code, I like to have this component go into four places.

I'll go ahead and do that.

So I'll keep this component selected.

And I'll create another auto layout on top of it like this.

Now this auto layout that I just created is called prim to out, keep it selected, come here and now it sets its direction property to horizontal direction.

When I set that to horizontal direction, I would come here and I would set the padding around items value to zero, just like that.

Now outcome here now expand the frame to auto layout.

Now just so that I can access the frame one Auto Layout inside of it.

Now when I select that frame one Auto Layout inside of it, I'll duplicate it.

And you can see that I have duplicated this into four places.

Now I'll come back here how to select the frame to auto layout, and how to set the spacing between items value to zero, just to have this now let's check to see if this auto layout itself is a responsive auto layout.

So I'll keep it selected still an outcome here and I'll try to expand it.

And as you can see if I expanded horizontally, the layout itself is not responding to that expansion.

So I would Ctrl Z to go back to how we were before.

And at this stage, what I'm going to do is this out, select the individual sub Auto Layout inside this main Auto Layout out select this one, which is frame one outcome here now to set its horizontal resizing value to pill container.

And I'll do that for all of them just like that.

Now when I select the frame to auto layout now and I increase the size horizontally, you will see that it's all responsive.

And that's what I want.

So I would keep this here, I would rename these two, verification imputes keep it selected, come here and click on Create component and that's sorted.

So at this stage, I'd like for us to go ahead and create our authentication screams.

So let's create a section for that.

Not a page actually.

I'd say authentication screams authentication Hi Fi screens just like this.

So I would come here, I'd have an iPhone that in Promax screen here, and I would rename this, make sure you rename your layout at this stage.

So I would rename this to splash.

And we all know what the splash screen is.

Yeah, that's the screen you see, when you launch an app for outcome here, I'll change the color of the splash screen to this.

And on the splash screen, I'd like for us to have the logo of the brand.

And the logo of this brand is really easy.

It's just VXS t, just like that.

So I would keep the text selected outcome here, now go with the headline to bold, and I'd work with this.

So I'll keep that text selected, come here and align it horizontally and align it vertically.

And that's okay.

So this is our splash screen.

So after the splash screen, the next screen to create will be the screen where the user will have to select the authentication action.

So I will duplicate the splash screen, I'll take this out.

And I'll change the color of this screen now to this, then come here and rename it of selection.

You can call it whatever you want to call it.

Now over here, out, bring in the button components out, go to my Assets panel out, bring this in and out, align it to the center horizontally, now expand it to this point.

Now for me to expand it properly, I would need to apply my grid style on this layout.

So I would come here and now apply my mobile grid style here.

So that I can use this as my guide to properly expand these buttons.

So I'd like the button to take up two column grids.

And that's what I have here.

So I would come here, I'll change the text to login.

And I would bring in another button components here.

And I'll change these to get started.

Now outcome here, select this button components and change its color to this just to make a difference.

So I would keep this here.

And I'll keep this here.

And that's fine.

So I would select this, and now align it to the center vertically.

And I'd bring this in place this Get Started button right under this login button.

But I'll use the row grid to ascertain the space value out give to that.

So I have 1234 rows here, and it's into four places is 32.

So I have a 32 px bottom margin space between this login button and the get started button.

Now I think the row grid is not really visible.

So I would come here, I'd go to my row grid saved style, I'd click on Edit style out, select rows and out, increase the opacity of that color to 20.

So this is sorted, this cream is sorted.

Now if the user goes ahead to click on the login button here, it means the user will go to the login page, right.

So I'll create that now.

So let's zoom in.

Let's take this out.

And let's click on layers and change the name of this frame to log in page.

And what I'll do is this when I zoom in, I'll bring this here.

So what I'll do is I'll just have logo stay here, out, come here now to select headline to bold, that's too big out GUI headline three board, that's okay.

So out align it to stay at the center horizontally, and I'll bring it down to this point, then I'll change the color to this.

Now what I'll do next is to have my login form created.

And I'll do that with my input field here, which is this.

Now I'd like this input field to stretch from here to here, just like that.

Now, this input field would have a label here.

So I'll just give it a label here that says enter email address.

I'll keep label here.

Now the space between this liberal and this input field is 16 px have two row spaces between this label text and this input field.

Now for the input field, I'll change the placeholder text from inputs to enter email address.

That's okay.

So I would come here, I'd have another input field here, which is going to be used for the password.

So I'll change the placeholder here to enter password.

And I'll give this input field its own label or duplicate this.

And first of all, I would say okay, the space between this input field and this liberal text should be 1234568 times six is 48.

So I'd like a 48 px margin space between this input field and this liberal text.

So that's sorted.

Now I'd like a 16 px space between this liberal text and this impeach field.

So I would come here and I'll edit this from enter email address and password.

That's okay.

let's align this properly.

So the next thing I'd have here is the login button.

So I'll bring a button component here.

And for this button components, I'd like to have your margin space here of that two px.

So it's going to be 1234.

So I'll bring this here, place this there.

And let's zoom out, let's stretch this to this point and stretch this to this point, then I'll change the text of the button to login.

Let's see how it looks.

Okay, this doesn't look really good, the spacing is not really consistent.

So I'll zoom out.

And I'd have the space between this label text and this input field to be 32 px, actually, so it's going to be 1234.

So I'd have that stay there.

And I'd have this stay here.

Then I'd have 123456, which is 48 px.

So let's see.

Hi, looks.

So this looks okay.

Now, I like us to have a text here, which is going to be the forgot password.

txt, forgot password.

So let's keep this here.

And let's have that stay 16 px away from this input field and 16 px away from this button component.

So I would select the text, and I would make sure it is a body small text.

And that's okay.

So I'll just zoom out, you can see that we have that.

So I would go ahead and create the signup page for our authentication task.

So I would come here, I'll click on layers, and I would rename this to sign up page.

And if you come here, the only difference we are going to have here is the fact that we are going to have an additional input field to collect the user's phone number.

So this means that I'll take this out for now, take this out for now.

And I'd have another placeholder here, which is going to have a margin top space of 32 px, which is 1234.

I'll bring this here and out, bring in an input field, which is going to stay here, then out, stretch the input field to this point.

Now I'll use this second input field to collect the user's phone number.

And I'll change the placeholder here to phone number, then I'll use this thought imputes field to collect the user's password, just like that.

Now I'll go ahead and I'll bring in a button here.

And this button is going to have a 48 px margin top space, it's going to be 123456.

I'll bring this here.

And I'll change the text here to sign up.

So I'll zoom out, I'll keep this selected out, stretch this to this point and out, stretch these to this point.

And that sorted, so we have created a login screen and our signup screen.

Now when the users click on the Sign Up button here, the users will be taken to that page where they would have to enter the verification code that was sent to their phone number.

So we are going to go ahead to create that page.

So I would come here and out rename this verification page.

And I'll take all of this out over here.

After the logo, I would have a rectangle that's going to be that's going to be this big.

I like the rectangle to be 48 px tall rectangle, just like this out, zoom out, or have this here and out, stretch the rectangle to this point.

And I'd have the rectangle have this background color.

Now on this rectangle, I would have a text that says a verification code has been sent to just like that.

So I'll keep this text here.

And I'll use a body small text for that, then out align the text to the center horizontally, then I'll keep this text aligned to the horizontal center of the page, just as the like this.

And that's okay.

And that's okay.

So I'll go ahead and bring in that input components for the verification code.

But before I do that, let's change the color of this text.

So I would come here, and I'll give you this color.

Then I'll click on the Assets panel now and I'll bring in this component.

Now for this component, I'll keep it selected First things first, I'll change the color of that components out, select the individual items inside the components.

And now change these to the background color that we have.

Just like this.

And that's okay.

Now for the lines that we have, I'll change the color of all those lines to this.

And for the numbers.

I'll change the color of the numbers to this.

And that's okay.

So I would keep this selected.

Now increase the width to this point.

So let's zoom in.

So now we can organize this properly.

So I will keep this here and how to snap the heights.

This points just like this.

So I'd have a placeholder text there.

That's going to say enter very occasion code, just like this.

And now change the color of that text to this.

So let's go ahead, and let's change the color of this label text that we have here to this, change this to this, come here, change this to this and change this to this.

Now for the Enter password text here, I'll change this also.

And for the Forgot Password text, I'll change this.

And that's okay.

Now, let's go back to our verification code page.

And let's have this button come up to this point.

So it's going to be 123456.

Out keep this here, and I just have a verified text, just like that.

So at this stage, we have created a verification page for our authentication task.

Now when the users click on the Verify button, we are going to need a pop up that would show up on the screen to let the users know that their verification has been successful.

Now, how do we create that pop it simple outcome here, I would select the frame to now creates a pop up just like this.

Now the reason I'm creating this here is so that I can use the width of this layout to set the width of this pop up.

Now the definite way to do this is this, if you come here, and you select this page, you will see that the width is 428.

Now the margin space on this layout is 16.

Here, and 16 here, which is 32, right, so to get the container space here, and use the width of the container space for this, my pop would be me subtracting 32 from 428.

So I would just select this outcome here, I would say four to eight minus 32.

And that's going to be the width for my pop.

And this is it as easy as that.

So I would come here and I'll give it a corner radius of eight, then I would go ahead and I'll give it this background color, when I give it this background color, then I'll have a text right inside that layout that's going to say, pull number verified, or whatever you want to say.

So I would come here and I would select a better textile.

For that, I would go with the body large textile just like this out, align it to the center horizontally, now out bring in the button components here and out have a Proceed button here that the user will click on to go to the homepage.

And we are done creating this.

So I would select this, go to the Layers tab and out, call this verify popup just like that.

So that pop up is going to show up when the user enters their verification code here and click on the Verify button.

So I'll grab this now.

And I'll place it here.

And that's fine.

So at this stage, I'd like to say that we are done with creating all of the screens that we need for our authentication task.

So this is going to take us to the next task of our app.

And that task is actually the fund task where users will have to fund their wallets or their accounts so that they can invest.

So I would come here, and I'd have this here.

I'll change this to fund accounts.

So all of the components that are heavier will be the components that will aid the user to fund their accounts on this app.

So let's go ahead and let's do that.

Now what you need to take note of is this, for a user to fund the account, the user will have to go to the homepage of the app first, right? Because it is from the homepage, that dude see the fund account button.

So what does this mean? This means that we need to create components for the homepage and have our homepage sorted first, before we handle different account routes.

So let's go ahead and let's do that.

On the homepage, the first component that we are going to have will be a card components that will display the balance that we have in our account.

And it is still on that card components that we are going to have the one account button.

So let's go ahead and let's create that.

So I would have a text here is going to say primary accounts, I would keep that text selected.

And I would set the typography style to body small boat.

Now let's zoom in to 200.

So this is it.

Now outcome here and I'll create another text, which is going to be like the account number or the account ID I would say this and I'll keep that selected also.

Now I would set this to body small.

So now I would select both of these, and I'll create an auto layout on the both of them.

Now when that auto layout is created out make sure that the padding around items value is set to zero for now.

Now outcome here How to select this text and how to set its horizontal resizing value to fill container out, select this here, and how to set its horizontal resizing value to fill container.

And for the height outcome here and out sets the height property here to auto height to make it balanced.

Now we have this created to outcome here, I'll add a fill color to this.

Now, I'll duplicate this, I'll bring this here.

And I'll change this text to account balance, or let's just say available balance.

Actually, that's not the account balance, I would say available balance, and here I'll write down the available balance, that's fine.

So I'll keep this here also.

Now, what I'll do is I would select these two auto layouts, and now add an auto layout on the both of them for this new auto layout that I have created, I would come here and I would set the spacing between items value to 24.

And out select this auto layout that inside this new auto layout, and how to set its horizontal resizing value to fill container.

And I'll do that for this also.

Now I would select this new auto layout and add a fill color of white to it to have this now you can see that this is actually responsive.

And that's okay.

Now, I'd like to bring in a button component and place it inside this auto layout so that that button will be used for the font accounts action.

So I would come here and bring in a button component here, then how to select that button component in the in the design tree here, hold it and grab it into this frame seven auto layout, which is our auto layout.

And you can see that the button component is placed inside this auto layout.

Now I'd like this button component to look different.

So I would keep it selected.

Come here and I would set its top padding value to eight and its bottom padding value to eight.

So I can have this now change this text to font accounts, just like this.

And that's okay.

Now I'll go to the feather icons plugin.

And I look for an icon that out place on the right side to make the components just look better.

Let's come in here, let's just type in home.

I'll bring this in actually bring this here and replace it here.

Now I would select all of these and I'll create an auto layout on all of them.

Now a new auto layout called frame eight has been created.

Now inside this frame eight auto layout, we have this auto layout here and this icon.

So I would select this auto layout now that's inside the frame.

It's auto layout.

And now to set the value for its horizontal resizing property to fill container.

And I'll leave this set to fixed we know how to select the frame.

It's Auto Layout now, which is a main Auto Layout now, and I would come here and I would set the spacing between items value to 24.

When I do that, I would come here and add a fill color to this.

Now add the fill color to the auto layout to have this.

And the final thing I'll do here is to come here and set the padding around items value to 16.

When that's done, I'll give it a corner radius of eight.

To have this now I can expand this to this point like this.

And you can see that this component is responsive.

And that's that.

So let's go ahead and let's play around with the colors of the elements on this component.

So I would select this text here, and I'll give it this color, I would select this now give it this color do same for this and do same for this then for this out select the icon itself, and that's fine.

So I would rename this to balance card, or whatever you want to call it.

I will keep it selected and now click on Create components.

And here we have our components created.

So on the home page Still, I'd like to display a list of recent transactions that's been carried out on the app.

So let's go ahead and let's create a component that's going to serve that purpose.

So I'd come here out create a text out call that deposit come here now to select the body large bold text then I'd come here now create another text and I'd have this which is going to be a dates that deposit happened.

So how to select these two text and how to create an auto layout on the both of them.

Now how to select this text inside the auto layout and how to set its horizontal resizing value to fuel container.

Now do that for this also.

Now out select the auto layout and how to set it spacing between items value to four.

And that's okay.

Now for this deposit text.

I'll change the color to this.

And for the date here.

I'll change its color To this, and that's okay.

So I'll keep this here.

And the next thing I'll do is to have a frame here, that's going to be 48 by 48.

I'll keep it selected and out, give it a corner radius of 100.

To make it round, then I'll go to the feather icons plug in and out have an icon there, that signifies incoming, which is this, I would select this icon now, and I'll place it on top of this 48 by 48 px frame that I created.

When I placed it there, I would come here now to set its constraints value two center for the horizontal axis and center for the vertical axis.

And that's okay.

Now select this frame, which is now a circle and out set its color, let's set it to green like this.

And for the icon, outset, it's colored this and that's okay.

Now for this frame, now that I have created, I'll bring you to our PC here, and how to select all of this and out create an auto layout on the both of them.

Now for this new auto layout, I would come here and I would set it spacing between items value to 16.

And I would come here now to set its alignments value to the center just like this.

Now out keep it selected to come here and add a fill color to it just like this.

Now I would come here now and I would create this text.

And this text is going to be a body large bold text, I would come here and create another text, which is going to just like display the balance out keep that selected and out make it a caption text, just like this.

Now to select both of them, create an auto layout on the both of them and sets the spacing between items value to for now to select the text inside the auto layout now and how to set its horizontal resizing value to feel container to have that and that's sorted.

So I'll select this now and I'll give it a fill color of white.

Now for the color of the text out set this to something lights like this.

And this will be something like that.

Now what I'll do is I'll select all of these and I'll create an auto layout on all of them.

First things first out align the content of the auto layout to stay at the center, then I'll add a fill color to the auto layout to have this now for the spacing between items value of this new auto layout.

Now, I like to set it to 76.

And that's okay.

Now for the padding around items value, I'd like to set this to eight.

And that's okay.

Now let's check to see if this auto layout is responsive.

As you can see, it's not.

So let's sort that out.

And to sort it out is really easy.

I would select this frame here, this auto layout here, I would select this auto layout here.

And I'll set its horizontal resizing value to fill container.

Now when I set this to fill container out, select the auto layout that's inside it, which is frame eight and out set its horizontal resizing value to fill container also, now I'll make sure all of these sets of field container so I'll select the items to be sure that they are also set to feel container.

Now when I select the frame 12 Now, which is our major frame, you would see that this is now responsive.

And that's okay, so I'll keep it selected, come here and now set the corner radius value to eight.

And I have this I'd like to duplicate this to have a withdrawal component where the circle is going to be red and the icon is going to be different.

So I would set the position of this icon to let's set it to 180.

That's the angle position.

That's what I'm setting here.

Or you can call it the rotation property of that icon.

So I'm setting it to 180 degrees.

And I'll change this with roll.

Then you can change all of these details.

If you want to change them out, select the circle itself, which is this frame, and I'll change the color to this and that's okay.

So outcome here out, select this out, rename this to withdraw our card, keep it selected, make it a component, okay, that's supposed to be deposit card.

So out select this column here and out, rename this to deposits card.

Keep it selected.

Come here and click on Create components.

Then select this.

Rename this to weave Travel Card, keep it selected and make it a component and that's sorted.

Still on the homepage.

We are going to have a banner that will be used to copy referral links.

So I would go ahead and out creates that.

So I'd have this text here.

that's going to see invites your friends out, keep that selected.

And I would go with this textile here, which is the body large bold textile.

And I'd have another text here, that's going to be invite your friends with this pack code.

And I'll go with the caption textile here.

And that's cool.

So I would select this, when I select it, I would create an auto layout, and outcome out sets the spacing between items value to eight, then out, select the text items inside this auto layout and how to set these to fill container.

And I'll do that for this also.

Now the next thing I'd like to do is to have a frame layout here, that's going to be 48 by 48.

And I'll keep it selected still out, give it a corner, reduce value of 100, then come here and give it that color.

Now I would go over to the feather icons plugin and Outlook one and I would look for an icon I can use on that.

So I like to use this icon here, I would select it, or bring it here and place it on this frame layout.

Now when I placed there, I would make sure it's at the center, then I'd come here now to set its horizontal constraints value to center and its vertical constraints value to center.

And that's okay, now select that icon, then I'll set its color to this.

And that's okay now to select all of this creates an auto layout on it.

So I would come here and I would align the contents of that auto layout to always stay at the center.

Now I'll keep this auto layout selected, and I'll give it a fill color which is going to be the background color like this.

Now, I would select this auto layout that is inside this main auto layout.

Now as you can see, it's the brim 12 auto layout that has this text, when I select it out, come here, and I'll set this to fill container.

And when I select the main auto layout, now you'd see that this is a responsive auto layout, which means we are good to go.

Now for the spacing between items value of this auto layout, I like to set it to 24.

And for the padding around items value, I'd like to set it to 16.

To have that, then come here and set the corner reduce value to eight.

And here we have a component.

So I would keep this selected.

Now rename this to refer our banner, then come here and click on Create component to make it a component.

And that's okay.

Now on our homepage, we have one final component, which is going to be a very interesting components to create.

And that's going to be the navigation components on our homepage, which is going to be at the bottom.

So let's see how we can create that components before we put our homepage screen together.

So I would come here and I would get the home icon from the feather icons plugin.

I'll type in home there, I'll bring this in.

Now I'd like to zoom in at this point so that you can see clearly, when I placed this icon here, I would come here and I would create a text.

And I'll call that home.

Now for this home text, I would create an auto layout on it.

And I would set the padding around items value for that auto layout zero, then set its alignment position to the center.

Now select the Home text that is inside this auto layout.

And now to set its horizontal resizing value to fill container.

Now out keep this text auto layout here, then I would select the Home icon and that text auto layout.

And I will create an auto layout on the both of them.

Now this auto layout is frame 15.

What I'll do now is I would come here and I would set the spacing between items value for this auto layout to for when I do that, I would come here now to set the alignments of the contents in that auto layout to always be at the center.

Now outcome here and how to select the Home auto layout and how to set its horizontally resizing value to fill container.

And that's okay, just stretch this and it's going to be sorted.

Now at this stage.

What I'll do is this out have a frame layout here.

That's going to be 48 by 48.

And I'll grab this pre empting Auto Layout now and I'll place it on this 48 by 48 px frame layout, make sure it's at the center.

When I place it at the center, I would select the frame 16 frame layouts, which is our 48 by 40.

It's layouts now and I would make it an auto layout.

Now when I make it an auto layout, I'll bring it here and I'll rename this to Home link.

Now after I rename it to HomeLink outcome here and now set its alignment to the center so that the content of that auto layout will always be at the center.

Now the padding top value is set to three out, set it to four, just so that we are going to have even numbers all around, I would set this to four also, and this outset four, and this outsets.

Four, just to have this.

So at this stage, what I'd like to do now is to have other navigation links.

So I'll keep this home link Auto Layout selected, and I'll create another auto layout on top of it.

Now this auto layout that I just created has a padding around items value of 16.

Yeah, I'll leave it set to 16.

Because actually, that's what it's supposed to be now outcome here out, expand this new auto layout, and how to select the Home link or to layout and I'll duplicate it like this into three places.

And that's because I want to have just three items there.

Now outcome here, I'll change this from home to invest.

And I'll change this from home to transact.

Let's select our frame 16.

And let's add the fill color to it to have this.

So if I expand the frame 16, you'd see that the icon and the text is just that it's not responsive.

So I'd like to change that.

So to change that out, select this home link sets these to fill container, select this, do that also select this and do that also.

Now when I select frame 16, and I increase the width horizontally, you would see that this text wrap into the next line is actually fixed.

So for this icons, let's go ahead and let's change this icon to a better icon and these two are better icon.

So I would come here, I would go to the feather icons plugin.

And I would like to have this icon.

So I'll bring this here.

And I would come in here and I will trace the auto layout that has that you can see it's still called Home link, I'll change that to invest link, when I change it to invest link, you'd see that to have the home icon inside here.

So I would come here now, I would select this bar chart icon now.

And I'll take it inside the InVEST link auto layout.

Now place it right inside here.

And you can see that it is here at the bottom.

So I would select the Home icon and out, delete it with the delete key on my keyboard, then come here, grab this invest icon, hold it and take it upwards like this.

So I'll go ahead and I'll do same for the transact link here.

So I'll keep this selected.

Come here out, rename this to bottom navigation, keep it selected and click on Create components and that components has been created.

So at this stage, we can go ahead to make use of all of these components in designing our homepage.

So to design our homepage, out, come here out, select the frame to and I'll bring in an iPhone fatin Promax frame here.

Now zooming to this point, now I would select this iPhone 13 Pro Max frame, rename this to home.

When I do that, I would come here and how to apply the grid style on it.

And when I do that, let's zoom in to 200.

out go ahead and I would bring in the menu icon using the feather icons plugin.

So I'll use that one there.

Now whenever you bring in an icon and you want to place it into a layout, make sure the icon is inside that layout here in the design tree.

As you can see, currently, this icon which is aligned justified is not placed inside this layout, which is our homepage.

So what I'll do is I would come here in the design tree, click on it to select it, hold it and drag it into the home layout.

And as you can see it is now inside the home layout.

So I would come here, and I'll place this here.

So I would count it row spaces from the top 1234567 and eight.

And that's okay.

So I'll have a text here.

So I can come here and I can say hi and for laka.

Now I'd like to call your attention to something important.

And that is the fact that as you can see here, I have the name of the user written here, which is N for lucky.

Now the question you should ask is this, how did I arrive at displaying the name of the user here when in the signup form, I did not collect the name of the user.

If you remember, in my signup form, I only collected the email address the phone number and the password of the user, which means that the app itself does not have a record of the name of the user.

So the question you'd ask, which is no malice.

How did I arrive at displaying the name of the user here? Now this is going to be your first assignment in this course, because I'd like you to come here in the authentication section here and refactor the authentication flow here.

To collect the name of any user that's signing up to this app.

Now I'll leave this open without giving you a guide on how to do that.

I'd like to see your thoughts process on how to refactor this authentication process with the best experience.

And also with the fact that you would collect the name of any user signing up to this application.

If you think coming here and adding another field for the name collection is fine, go ahead and do that.

If you have another idea that can make the experience better, go ahead and implement that.

Now when you implement the name collection in the authentication task here, go ahead tagged me on social media for my comments.

That's your first assignment in this course, then I can have another text here.

I'll bring this here.

Now the next thing I'd like to have here is the balance card.

So I would come here in the Assets panel, and I'll bring this component in like this.

Now, I'd like to have four row spaces between this text and the balance card.

But before I do that, I like to keep this balance card selected, then come here and apply my shadow style that I saved.

So it so I would go with image shadow like this.

Now let's zoom into this point.

And let's make sure we have four row spaces.

And that's okay, let's zoom out.

Now what we are going to do is to stretch this to this point.

And that's going to be successful because our components is a responsive component.

So nothing is going to break.

And this is okay.

So I would come here at the bottom here, out, snap this to this roll line.

And that's sorted.

So the next thing I'm going to have here is a text that's going to say recent transactions out, keep that selected and out go with a body large bold text.

So I'll make sure I have 1234 Group spaces there.

And that's sorted.

So I'd have that there.

And I would select a different color for that.

I'll go with this.

Now for this also out have this color set this now just in case I forget to set the color of the text as I proceed, you go ahead and do that.

So I would select this icon also now change the color to this, that's okay.

Now right on that this will be sent transactions text out have those transaction cards there.

So I'll bring this in, which is the opposite cut out, give me the shadow style outcome here.

I'll give it a meet shadow style there.

Let's zoom out to this point.

And I'll just stretch this to this end here.

And I'll make sure this snaps properly too.

And that's not going to be a problem because a component is responsive.

So let's look at the space in between this card and this text out zooming, you can see we have 123 I'll make this four.

Let's zoom out.

Okay, that's actually too far away.

So I'll bring this here, I'll have two row spaces.

Okay.

So I would have this one here.

So I'd have two spaces from this text to this card.

And if I select the text, you'd see that I have one row space and two space before this card.

And that's okay.

So what I'll do now is I would go ahead, I'll duplicate this.

And when I duplicated, I'd make sure I have just one row space, which is SPX, I'll bring in this other one, which is four, which is for a withdrawal event.

Outcome.

Yeah, I'll give it a meet shadow out, zoom out and out, snap this to this points.

And I'll make sure it's just eight px space.

So I'll bring this here and that's okay.

Now I'll have just three recent transactions here.

So I'll go ahead and bring in this referral banner and upload it here.

So I'll make this snap to the end also, just the other point, now zooming, and I'll make sure I have a consistent space in here.

So I'll have a 48 px margin space over here, which is going to be six row spaces, right.

So I'd have 123456.

So I'll bring this in place here.

So I'll zoom out, and at this point, what I'll bring in will be a bottom navigation components.

I bring it up let's see here.

Let's zoom in and let's make sure this is properly placed.

As you can see I have properly placed this so I would keep it selected.

Come here and I'll change the fill color to this out select this, change the fill color to do this, select this select this I'll change the fill color to this now select the icon itself now change the fill color to this or do that for this also.

And I'll do that for this also.

Now for the text out select the text and I'll change the fill color to this and that's okay.

Now for the text color of this navigation link.

I like the text color actually to be pure white so that it can be really present there.

And I think this is better.

And that's it.

So we have just designed our homepage now using the components that we created.

So I would also advise that while designing, it's also good most times to test what you're designing, so I would select this column here, and I would click on present to see how this is going to look like actually.

So this doesn't look good like this, I like to present this inside an iPhone device.

So outcome here, click on prototype, click on prototype Settings and select a device here, which is iPhone 13 products.

When I do that outcome, help select this layout once more, and I'll click on present again, that's going to sort it.

And this is what we have, this looks good, you can come here and present this in full screen just like this, to see it better.

So let's go ahead and let's keep designing our application.

So I'll press the Escape key on my keyboard to go out of that full screen display and not come back here.

So the next action I'd like to design for will be the action of the user clicking on different accounts button.

So when the user clicks on the fund accounts button, I'd like to display a pop up that will allow the user choose the method in which they would like to fund the account with and that's easy, because we have actually created a pop up before.

So I would come here, I'll duplicate this pop pop, and I'd have the Pop Pop stay here.

And right inside this pop up here, I would have one button here, which is going to say bank transfer.

And I'd have another button here that's going to present the option to fund the account with a debit card.

So I'd have this the here and now expand this to this point.

Now expand this to this point.

I'd also keep this here and expand this to this point.

Now to expand this to this point, I'll keep it selected and how to center it horizontally.

So outcome here, I'll bring this downwards.

And I'd have it textured that's going to say select method.

So I'll change the color of that text to this.

And that's going to be cool.

So I would select this pop now, and I would rename it from verify pop to bond method pop up, keep it selected, and I would make it a component.

And that's going to be it.

So when the users click on bond account here, they would have this pop pop show up asking them to choose the method in which they would like to fund their account with now let's say the select the bank transfer method, they will be taken to the page where they would have that happen.

So for that out creates that page now.

So I would come here, I'll duplicate this, and I would rename it bank transfer, when I rename it to bank transfer, I would come here and I would take all of these outs.

And I would also take the bottom navigation out also.

So what I'd have here is an icon that will direct the users back to the previous page.

So I would go to further icons.

When I come here, I would scroll down, and I would select this icon for that.

So I'll take this out.

And I'll bring this here.

And as you can see, this icon is not inside this layout.

That's why this smart guy is not active.

So I would come here, I would select this icon and I'll take it into these layouts, just like this.

Now when I select it, and I move it around, you'd see that the smart guide is active.

So I'll make sure that I have it spaces from the top 12345678.

And that's correct.

So I will keep that icon select and I'll change the color of the icon vector to this.

And that's okay.

The next thing I'd have here is a title for this page.

That's going to say bank transfer, you can call it whatever you want to call it.

So I'll use the headline three bold text for that.

I'll keep that there how to center this horizontally actually, to be sure it's at the center horizontally.

And that's fine.

Now I'd come here, and I'd have bits here.

So I would have these details here.

So what I'll do is I'd make sure I have 1234.

Okay, I'd have it's row spaces there, I'd have 12345678.

So what we are going to have here is the destination account details where the user should make the bank transfer to so here's the account number.

Here's the account name and here is the bank name.

And that's it.

So I would come here and I'd have a button component here, out align it to the center and I would stretch it to this point and stretch it to this point also, I would have 123 456.

So I have seven, and eight.

So I'd have a two row spaces there.

Now what I'd have on this button will be copy account number.

So the user can just click on this button to copy the account number here.

So I have sorted the routes for funding the account on this app with bank transfer.

So let's go ahead and let's create the page where the user will use to fund the account with their debit card.

So outcome here, so I will change this debit debit card, or align this to the center, that's okay, I'll take this out, then I'd come here, I'll take this out also, then I'd have all of this here.

So I would have it row spaces from this icon also.

So let's zoom in so that we can count better.

So I would have 12345678.

I'll keep this here.

And I'd have one two, I'll have that there.

out, zoom out.

So this is going to be the page that will enable the user fund their accounts on this app with a debit card.

So what we have here is, the user will enter the amount and have the option to select that they want to use the existing card that they have on this app, or they would like to add another card.

So let's fix some alignment issues here.

Let's keep this there, come here and keep this here also, then come here, balance that's there.

And keep that there.

Also, I would also come here and make sure that this is sorted also here.

So for the action of adding another card, we are going to see how to do that as we proceed for now let's go ahead and let's have a button component here, align that to the center horizontally, keep that there, keep that there, then for the text out, say font accounts.

And that's that.

So if the users click on the font accounts button, they would have this pop up show up for them to choose the method they want to use, when they select the bank transfer method, they would have this page show up, if they select the debit card method, they would have this page show up also, they would have this page show up.

Now, if the user clicks on this fund accounts button, when they want to fund the account with a debit card, the user will be taken to another page, which is going to indicate that the account has been successfully funded.

So I'll duplicate this to have that there.

Now, before we work on that page, I'd like to change the name of this page from bank transfer to debit card transfer.

Now for this page here, out, rename it to transfer successful.

Come here, I'll take all of these outs.

I'll take this out also.

And I'd have a frame here, which is going to be 100 by 100 frame, that's how it's going to look like that's quite small.

So I'll make this 240 by 240.

And I'll just work with this.

So I'll give it this color.

And I'll give it a corner radius of 200 to make it a circle.

And I'll go over to the feather icons plugin.

And over here in the feather icons plug in out bring in this icon, and that icon will be placed on top of this frame.

Now go ahead and use the Scale tool to scale that icon to this point, just like this.

Now, when you scale the icon, make sure that the constraints of that icon is set to the center horizontally and the center vertically.

So I would come here now I would select this icon and I'll change the color of that icon to this when our habit text here that would say count funded successfully, or you can have whichever text you want to have they that's fine.

So I would come here and I'll change the color of this to that.

So after that, I would have a button component here, that will redirect the user to the InVEST page.

So I would say invest.

Now when they get this page, they would have the option to click on the InVEST button here to go straight to the InVEST page where they can invest.

So that's the next page we are going to look at we are going to look at creating the InVEST page where users can invest in stocks.

So to create that page, it means that we need to create the components that the page will need.

So let's go ahead and let's see how to create the components for that page.

So for the InVEST page, the first component I would have there will be a little card component that will be used to display the cash amount that the user has.

So I would come here and I would create that.

This is the fund accounts component section here.

So I would have the invest component section here.

And to create that card, I would have this here, I would say cash.

And I'll use the body small textile for that.

And I'd have an amount here, just any amounts.

Okay, so I would use body large bold here, then I'll just select the both of them, I would create an auto layout on the both of them, make sure the padding around items value is set to zero, then I'll come here and I'll add the fill color to it.

To have that now select the cache text and set the horizontal resizing value to fill container and do that for this or that text on the here, which is the amount of cash that the user has.

Now when that's sorted, select the auto layout, and then come here and set the space in between items value to for now, I'll go over to the feather icons plug in, and I'd look for an icon that I can use to represent cash there.

So I would scroll down and I'll look for one of the icons here.

So I am going to make use of this icon here, I would select it, I'll bring it here, then I would select both of these and out create an auto layout on the both of them the outcome here.

And I would make sure that the alignment value for this auto layout is set to be top left corner of the auto layout.

So I would keep this auto layout selected, I would add a fill color to it.

And I would set the spacing between items value to eight, then set the padding around items value to eight, then come here and I'd have the corner radius value set it also.

So over here, I would select this auto layout inside the main Auto Layout now.

And I would set its horizontal resizing value to feel container.

And when I do that, you will see that this component will be irresponsive components just the way I want it to be.

Now let's go ahead and let's set the colors for this.

So I will set the color of this to that now set this to this now for this icon out set the color of this icon to this.

So I'll keep this here, I'll duplicate it, when I duplicate it out, go ahead, change these two assets, then I'll leave the value here just like this, or you can change it if you want to change it.

Now the next thing I'd like to do is to take out that icon and have another icon there.

So I would go to further icons.

And I would have this selected for that.

So I'll bring this here, let's go to the Layers tab here.

And I would select the briefcase icon here, which is this, I would select it here.

And I'll take it into the frame 19 Auto Layout, just like this.

And you can see that it is staying here on the right side of the auto layout, I would grab it and I'll take it to the left side.

Now I'll select this one, and I'll delete it.

And I have that.

So I would select this icon now and I'll change the color of this icon.

And this is sorted.

So I would rename this to cash card, whatever you want to call it is okay.

And I would rename this to assets card.

And that's okay.

So I would select this, make it a component, select this, make it a component.

So let's go ahead and let's create the other components that we are going to need on the InVEST page.

So the next component, our need on the InVEST page will be an input field component that the user can use to search for top stocks that they would like to invest in.

So we have an input field here already created, it's already a component.

So what I'm going to do is out duplicate it, I'll bring it down here.

And I'll keep this here.

Now when you duplicate the components like this, the duplicates will be a child components.

Now, I wouldn't love to work with this as a child components.

So what I'm going to do is out out keep the components selected, right click on it and out select detach instance.

Now when I select detach instance, you would see that this is back to a regular auto layout.

So I would come here, and I would change the name to such impute field, then what I'm going to do is I would go to further icons now bring in a search icon, which is this out, grab it and drop it inside this auto layout, which is the search input field auto layout.

Now the issue is this.

I want this search icon to be smaller than this, because it's quite too big.

And as you can see it has increased the height of the impute field.

So I'll keep the icon selected.

Come here, and I'll set this to 12.

And I'll set this to 12.

And that I have that now I think 12 is too small outside this to 16.

And out set this to 16.

And that's sorted.

So the next thing is this, I'd like this icon to stay on the right side of this impute field.

So how do we do that? Just select the search input field auto layout.

Come here.

Click on the alignment and padding property.

then change this property from packed to space between, and that's going to be sorted.

Now let's change the color of that icon.

I'll change it from black to this.

Now I can select it now and make it a component.

And as you can see, it can be used just the way you'd like it to be used.

So let's go ahead and let's create the next component that we are going to have on our invest page.

So the next components will be the components that will display the list of stocks that are available to invest in, in this app.

So let's come here, let's have some space here, I'll use the brand fetch plugin.

To pull up the logo of a brand, I'd have this Come here, I'll type in dangoty, or press the Enter key on my keyboard.

And I'd have this here.

So I would select this out, click on it to select it, and I'd have it there in my canvas.

So I'll bring this here, and I'll make it a 24 by 24 frame logo just like this.

Now when I make it 24 by 24.

The next thing I'd love to have is the price of this stock, I would have that out select the caption text for that, then I would have this, then I would have this, make sure I use the caption text for that also, then I'll create an auto layout on this and I'll set the padding around items value to zero.

Now out select the text inside this auto layout and set its horizontal resizing value to fuel container.

Now, I'd like to have an icon here that will indicate decline or increase.

So I would go to the feather icons plugin.

And I would bring this icon in, and I place it here.

Now I'll make this icon a 16 by 16 icon just like this, when I plus here, how to select both of them.

Now create an auto layout on the both of them.

Now for the spacing between the auto layout, it's going to be set to four.

Now to select this auto layout that's inside this framlington Auto Layout, I am talking about the auto layout that has this number here, I would select it, when I select it, outset its horizontal resizing value to fill container, then out select the frame 19 Auto Layout now, and now add a fill color to it.

Now let's go ahead and let's select this icon.

And let's make the color to be green just indicates progress.

Yeah, so I would come here now, I would select both of these and create an auto layout on the both of them.

Now for this auto layout here, I would set the spacing between items value to eight, it's already set it for me.

So I'll just leave it set to eight.

Then I'll come here and I'll add if fill color.

To have this outcome here.

Out select this text now, which is inside this new auto layout and outset it's horizontal resizing value to fill container.

And for this outset, it's horizontal resizing values fill container.

Now when I select this frame 20 Auto Layout, as you can see here, it's a frame 20 Auto Layout, when I select it, and I resize it, you would see that it's a responsive auto layout, just like this.

And that's what I want, actually.

So I'll bring this here.

Now I'll go ahead to create a text that will signify the title of that stock, I'll just call it dang.

Now I'd come out set this to body large bold, and I'd have this day here with this text.

Now what I'll do is I would select this and this text, and I'll create an auto layout on both of them.

Now outcome here now add the fill color to this auto layout first, then come here and align the contents of that auto layout to the center.

After that, I would set the spacing between items value of that auto layout to eight to have this now bring this here and I'd have this here.

The next thing to do is to have all of these selected, then out add an auto layout on all of them.

Now for this new auto layout.

Now, I would set the spacing between items value to eight, then come here, select this auto layout and set its horizontal resizing value to fill container, then how to select the auto layout now and now add a fill color to it to have this now for the padding around items value, I would set it to eight and set the corner radius value to eight, just like this.

Now if I expand this, you'd see that I have this component looking just like this.

And this is okay.

So I want to select it out, name this stock list and out make it a component.

That's fine.

Now the next component I'd like to have there on the InVEST page will be a component that will be used to display the list of stocks that the user have invested literally the stock portfolio of the user.

So I would come here let's zoom in one small out have a 48 by 48 px frim going out, give it a corner radius of 100 to make it around, then I'll give it this color.

Now out, go to the brand fetch plugins, and out, look for the paystack logo, which is this.

Now outcome here, I would right click on this paystack logo, I like to pick out the background color.

So I'll use the Remove BG plugin.

for that.

I'll keep the logo selected, and I'll make it a 24 by 24 px logo, just like this, and I'll place it right at the center of this circular frame that we have created.

Now when you place that on top of that circular frame, make sure to set the constraints value for the horizontal axis to the center and for the vertical axis to the center.

So the next thing to do is to go ahead and I'd say pay stack, I'll keep it selected, come here.

And I'll use the body large bold text for that.

And right under this, paste that text out have plus 345, just to represent the appreciation value of that stock.

So I'll keep it selected and outcome here.

And I'll go with the body small text.

Now I'd make this to have a green color, just like this and for the paste that text and make it to have this color.

So I would select both of these, first of all, create an auto layout, make this space in between items value to be set to four, then out select this text, set it to fill container.

And for this outset to fill container also now out expand this, and that's fine.

Now the next thing to do is to select all of this, create an auto layout on all of them.

When I create an auto layout on this outcome, how to set the spacing between items value to eight, and out add the fill color to that to have this now when I set this to eight outcome here and out set the pattern around items value to eight.

Now I'd like for us to check to see if this is a responsive auto layout.

And as you can see, it's not and that's because I have not set the horizontal resizing value for this auto layout inside of it to feel container.

So when I set this to fill container, and I come here now you'll see that we have a responsive layout.

So I'll keep it selected outcome here.

Now it sets the corner radius value to eight.

And then we have our portfolio listing component.

So I would say portfolio portfolio list.

And I'll click on Create components.

So I think we have created all of the components that we are going to need on our invest page.

So at this stage, I'd like for us to go ahead and create our invest page.

So I would come here now out, select this out, duplicate it out, rename this to invest.

And I'd come here and take all of this out.

And now leave the bottom navigation components, this time around outcome here, what I'd have first will be that cash card.

So I'd have 1234 space before that.

But to see cash card, I'll bring the cash card in here.

And for this cash card, I'll change the fill color of this cash card to this out, select this and I'll change this also to this, I'll change the text color here to this.

And for this, I'll change this to that.

So I'll go ahead now.

And I'll bring in the Assets card.

And I'll do the same to that also come here, I'll change the color of that to this.

And this will be changed to this, change this to this and this to this.

And that's okay.

So what I'll do now is out arrange all of this to stay organized.

So I'd like this to take up two columns.

And I'd like this to come here and take up two columns.

So let's zoom in to be sure that this is properly organized.

So this is not properly organized.

And that's because I want four row spaces before this.

So I will bring this down here.

When I select this, I'd have 1234 And this is okay.

So I'll bring this here.

And I'll bring this down here.

So this is sorted, we have this section sorted.

So the next section of this page will be the section where I would write a text that's going to say top stocks to invest in.

So I would have eight row spaces before this.

So I would say 12345678.

I don't have this to hear.

Now for the text here.

I'd like this text to be a body large text, not a body large bold text.

Now after this text, I'd like to have that search field.

So I would snap this to this point.

And I would go ahead to bring in that search impute field which is this and I'll just have only an eight px space between this text here and the input field.

So out come here stretch these to this point.

And I'll change the placeholder fetch.

So let's change this from stock to stocks.

And that's fine.

So the next component I'd like to have is the stock list components.

So I'll keep this here, and actually give it a shadow effect so that we can see that clearly.

So let's zoom in.

So I would give it two spaces, one, two, and that's fine.

So out, snap this perfectly.

And I would like this stop here.

And I would like this also, to stop here.

Let's zoom out.

So I would duplicate this and have this house.

And let's duplicate this here.

Let's duplicate this hair also.

So let's zoom in to confirm that all our components are aligned perfectly.

So you can see this is okay, this is okay.

This is okay.

And this is okay.

So that looks okay, now on have a stock portfolio section.

Now, to differentiate the two sections out, bring in the button components, and I would use it for something different this time around.

So I would have 1-234-567-8910 1112 spaces.

So I'd have 12 Row spaces here, I would zoom out, out stretch this to the end like this, I would come here and align the content of this button now to the left, then I would set its top padding value to eight and the bottom padding value to eight.

Now what I have here will be stock portfolio.

Now to make this look different, I'll keep this selected, come here now to set the corner reduce value to zero, just like this.

Now what are we going to have here, we are going to have the paste back component here.

So let's zoom in.

And let's make sure this is properly organized.

So I'd have 1234 space before this.

And that's okay, outcome here.

Now give it a shadow effect, just like this now out, keep this selected, come here, now change the color.

So I would come here, I'll change the color to this.

So the green color here needs to actually be thicker than it is now, just like this.

So I would make this to have two columns, then I'll duplicate it and have this they have also taken up two columns also.

Now you can go ahead and have other stocks listed here.

That if you want to have that, and here we are, we are done with our invest page.

Now since we won't be able to display all of the stock portfolio here, I would like to have a see all text here.

So this see all text will be brought in text out copy here.

And I'll duplicate this see all text.

And I keep you here also, and I'll change the color of this, see all text or change this and that's fine.

Now the next flow will be this.

Now let's assume a user likes this talk here and the user wants to invest in this talk means the user will click on the stock and the user will be taken to the stock Details page.

Right.

So let's make that happen.

I'd come here, select this page, and I'll duplicate it, come here and change this to stock details.

And that's fine.

So for the stock Details page, I'll take all of this out and out zoom in, then go to the feather icons plugin to get that icon that signifies going back to the previous page.

And this is it.

I'll get it.

I'll bring it here.

And I'll make sure that this icon is actually inside the stock Details page.

And I'll take this to this point.

And that's sorted out, select the icon vector and I'll change its color to this.

So what do we have here, I like for us to have a title here that's going to say stock details.

And this text should have a headline three bold textile for it.

So I would align it to the center horizontally.

And that's okay, now let's change the color this and that's fine.

So what I'd have here will be a component that I would create, I would just come here, I would have this frame to select it and out create a frame with it like this out set this eight, then out sets the colored this van out sets the color to this than out go to brand fetch to get that logo and out place the logo right on that frame layouts that I just created.

I'll grab it and upload it here.

Now I'd keep it selected and outset the horizontal constraints to center and the vertical constraints to send that and that's okay, so what I'll do now is out keep this frame selected, rename this to stock detail.

And then I'll come here and I'd make it a component.

So I'll go to that page now.

And over here I'd have that stock detailed banner components placed.

This is it here.

I'd have it stay here out stretch it to this point.

and are stretched this this point, that's okay.

So I would come here now, let's snap that in.

And let's also make sure that this is snapped in perfectly, just like this.

So over here I have 123.

Let's make it four.

So over there have four row spaces between this stock details, text, and this stock detail banner components.

And that's fine.

So let's zoom out.

The next thing I'd have here will be the stock price.

And the appreciation value, I'll make sure I have 1234 spaces.

That's okay.

Now I'll go ahead to create a component that outplays here and and that component will go into more details about the stock.

So let's go ahead and let's create that component.

So to create that component outcome here, and now to select the frame to now create a frame that's 42 px tall, just like this.

Let's zoom in to this point.

When I create this frame here, I'll come over here and I'll create a text on this frame, I'd say my position, I'll keep this text here, just like that.

And that's fine.

Now for this text, I'll use the body small textile that I have here, which is this.

And that's okay.

Now I'll go ahead, I'll create another text here, I'll actually make this text box to be this Why'd not come here, now just type in 35.

Now, I'll keep this text box selected now and align the content of that text box to stay at the right select this frame layout now, and then make it an auto layout.

Now I would come here and I'll click on the alignment and padding value, and out sets the left padding to 16 and sets the right padding to 16.

Then out set the top padding to 12 and the bottom padding to 12.

Now I'd like this text to always stay here and this text to always stay here.

So I would come here and now change this from pact to space between.

And that's okay.

So if I come here now, you'd see that if I take this in, this is always staying here.

And this is always staying here.

Same thing happens if I resize the left side here, just like this.

And that's what I want actually.

So I'll keep that selected, then come here.

Now I'm select this text here to make sure this is set to hog content, then come here and select this text to make sure this is set to fixed width.

And that's okay.

So out select this, and out creates an auto layout on this auto layout now, just like this, now this new auto layout is called brim 25.

Yeah.

So inside this new auto layout that I just created, we have this auto layout here, which is frame 24.

Out select it and not duplicate it vertically just like this.

Now select the frame 25 Auto Layout, then I'll set the space between the items inside the auto layout for when I do that, I would come here and now change the padding around items value to zero just to have that now I would come here and I would set the color for this frame 25 auto layout to this.

Now what I'll do is I would set the corner radius value for this auto layout to eight.

Now the corner radius won't be visible.

And that's because this auto layout here is staying on top of that auto layout.

So I would select this auto layout here which is at the top, and I'll come here, I would click on independent corners here.

And I'll set the top left corner reduced value to eight.

And now set the top right corner reduce value to eight, just like this outcome here out select this, click on Independence corners and outset the bottom right corner reduce value to eight and I'll set the bottom left corner reduce value to eight.

And that's sorted.

Now for each of these rows here out select this, then come here and I'll change it horizontal resizing value to fill container.

I'll do that for this also.

Do that for this also.

And do that for this.

And that's okay.

Now let's see if this responding how we actually wanted to respond.

And it is actually now let's edit these values that we have here.

So I would come here and how to set this open and how to set this to previous close and out set this to market cap.

Now for this I'll change the value to So out, come here, previous close out, say that plus this and open, just any value there, actually, just any value, there will be fine, actually.

So with this, I have successfully created these components that allow us to show more details about that stock.

So I would come here and not call this detail table.

Actually, I would call it stock detail table.

And I'll save that, then come here and make it a component.

And here we have that.

So I would zoom out, and I'll go over to this page, and out, bring that component.

So let's come here, click on the Assets tab, come here, grab this and place it here.

So out, keep it selected, and I'll add a shadow effect, just like this, then zoom in so that I can calculate the row spaces better.

So from this item here, I would like to have 123 and four row spaces people this, let's zoom out, and let's stretch this to this point.

And that's fine.

So I can go ahead, select this text, so that I'll be able to change the colors out, select all of this, come here and change this.

To that good, this was not selected.

So I would change that.

For this also out, change it.

Now the next component I'd like to have here will serve as links just in case the user wishes to read more about the stock and the company that owns the stock.

So I'll go ahead, and I'll have that it's going to be similar to what we have here.

Now this is me creating this just the same way I created this stock portfolio components here.

The only difference here is that I just changed the color from what I have here to this.

So let's zoom in to be sure that we are placing our items properly.

So outcome here, I would have 1234 Row spaces before this.

And that's okay.

So at the bottom here, I'd have a button component just for a user who is satisfied with what they see here on this stock Details page.

And this button is going to be an invest button.

So out zooming to calculate the space better.

So I have 123456 Row spaces here.

And I would like to stop at the sixth rule space.

And that's it.

So if a user likes what they see here, on the stock Details page, the user can go ahead and click on the InVEST button.

If the user is not satisfied, the user can come here and click on this button to go back to the previous page where the user will still have to see all the stocks listed here.

So that's it.

So the next page here will be the page that the user will go to, when the user clicks on this invest button here, I'd like us to go ahead and create that page.

So I would duplicate this.

So outcome here, I would rename this to enter stock, amount, whatever you want to call it is okay.

So outcome here, I'll change this to enter amount.

And that's cool.

So I'll go ahead and I'll have this here.

Now this is me using an input field and a button as simple as that.

So I will zoom in to this point and out calculate the space better, I would select this item and out calculates the space from that item, I would say 123456.

So I'd like six rule spaces there.

So I would select this.

And I'll make sure that snaps perfectly.

And that's it.

Now the space between this input field and this button is 1234.

And that's fine.

How to come here.

Now check out this invest button.

And this page is sorted.

Now when the user enters the amount that the user wishes to invest in the stock with, the user will go ahead and click on this Proceed button.

Now when the user clicks on this Proceed button, the user will be taken to another page.

Now that page will be where the user will be presented with a summary of the investment that the user is about make.

Now outcome here.

I would select this and out duplicate it and out.

Rename this to investments summary.

Now I'll zoom in outcome here.

And now take all of these out.

And I'd have this here.

Now this is going to be a summary of the investment that the user is about to make.

And if the user is okay with the summary that the user sees here, then the user would go ahead and enter their secrets been here, before they click on the InVEST button to finally make the investment.

So outcome here out, select all of these, and out calculate the row space is better.

So I would come here, I would keep this here, I would make sure that I have lead zoomin, I'd make sure that I have 123456 Row spaces there.

And that's cool.

So out, zoom out to this point, and this page is sorted.

So this is the flow so far.

Now when the user is on the homepage here, and the user wants to invest, the user will click on this invest link at the bottom navigation here.

This is it here at the bottom navigation here.

When the user clicks on this link, the user will be taken to the InVEST page, which is this.

And if the user goes through the list of stocks that we have here, and the user is interested in investing in one of these stocks, let's say this one here, the user will go ahead to click on it.

And when the user clicks on it, the user will be taken to the stock Details page here, which is this.

Now when the user is taken to this page, the user will read about the stock.

If the user likes what the user sees here, the user will go ahead and click on the InVEST button here.

When the user does that, the user will be taken to this page, where the user will have to enter the amount that the user wishes to invest in that stock with.

Now, when the user enters the amount here, the user will click on the Proceed button here.

When the user does that, then the user will be taken to this page where the user will see a summary of the investments that the user is about to make.

Then if the user is okay with this, the user will go ahead to enter their secrets pin here.

When the user does that, the user will click on the InVEST button here for the investments to be made successfully.

So before we proceed further, I'd like to come here and change this to summary.

So I would keep that selected and align it to the center horizontally, I'd also come here, select these and make sure it's aligned to the center horizontally.

Now, I'll come to this page, which is the Invest page.

And I'd like to have a title here, I'll change this to invest an hour, align it to the center horizontally, just like that.

Now, when the user clicks on this invest button here, the user will see a page that says investment successfully made or investment made or whatever, whatever just a success message.

So I would come here, I would select this, and I'll duplicate it, and I would rename this successful investments.

And I'd save that.

So what I'm going to have here will be similar to what I have here.

So what I'll do is out, take out all that I have here on this page, I'll take this out.

Also, I was supposed to take this out also this debit card title here, I'll take that out.

Also, I'll just select all of this out, duplicate it.

And I bring this in here, just like this.

And I'll zoom in.

And I'll just change this to success.

I'll keep it selected and out, align it to the center horizontally.

Now I'd come here, I'd say go back home.

And that's it.

That's sorted.

So so far.

So so far, we have achieved the authentication task, we have achieved the funding task, and we have achieved the investment task.

Now we are going to go ahead to create more screens that will actually make the user experience on this app to be better.

So one of those screens will be the Transaction Details page.

And that's the page that the user will go to when the user clicks on any of this card here under the recent transactions section.

So if the user clicks on this card, for example, the user will be taken to a page where the user will see the full details of this transaction.

So let's go ahead and let's create that page.

So outcome here out select this one here, and I'll duplicate it.

And I have that.

So let's keep it selected, come here.

And let's call this transaction details.

And for the Transaction Details page, I'll take this out.

And I'll take this out.

Now this is what I would have on this transaction details page.

This is it's as simple as this.

So first things, first, let's calculate our row space to be sure that it's perfectly set.

So I'll have this here and out Count 123456.

So I like this to start here 123456 Out, snap this correctly, and out snap this correctly.

And that's okay.

So this here is to display the transaction date that that transaction happened.

So this is not complete, actually, I can give some space here and say 1603, just like that, so that we will depict the date and time of the transaction.

And that's cool.

Now, what we have here is the transaction amount.

And here we have the amount in words, here we have the transaction type, which is a withdrawal, here we have the transaction remark, which is for Netflix, and the status of that transaction is successful.

So I would select all of this zoom in.

And I would make sure I have 1234 photo spaces there.

Now for the button components here, how to select this, and I'll make sure I have 123456, I'll make sure I have six row spaces there.

And that's fine.

So if a user comes here, and the user clicks on one of these transactions, the user will go to a transaction details page, where the user will see more details about that transaction.

So I'll go ahead and out create other pages, that's going to make the experience on this app to be better.

Now, before we do that, I'd like to give this transaction details page, a page title.

So out, duplicate this, and I'll bring you here a lot call that transaction details out, align it to the center horizontally, just like this.

And that's fine.

So the next flow that I'd like to design will be the flow that the user will go to when the user clicks on this menu icon here.

Now when the user clicks on this menu icon, I'd like for a menu bar to slide in with other options that the user can use to improve their experience on this app.

So how do we make that happen? It simply, so outcome here, I'd have an iPhone 13 Promax, here, out, rename this to manage slide bar, and out, keep it selected, come here, and I would divide the width by two, just like this.

And I'd have this.

So I might decide to go ahead and increase this further.

And what I'll do is this outcome here, I'll just have the logo here.

And I would go ahead to have list items of menu links.

So the first menu link, I would have here will be recent transactions.

I'll keep that selected here.

And I'll change this to a body small text just like this.

Now let's zoom in.

Let's keep this here.

I'll keep it selected, and I would create an auto layout on that text.

Now this auto layout, I would like the auto layout to have a padding around items value of 16.

And I'd also like the alignment value to be set to the left.

So I would come here now I would keep this then creates another auto layout on top of it.

Now this new auto layout that I have created will have a padding around items value of zero, just like this.

Now outcome here out expand this new auto layout here in the design tree.

When I do that out, select the recent transactions auto layout, and I'll duplicate it just like this.

Now go ahead to edit all of these two other links.

Before I do that, let's select the main Auto Layout now, which is frame 34.

Here, and let's set the spacing between items value two, four, just to have that.

So the next link here will be card management, I'd have this be investment portfolio.

I would have this be request statement.

And I'd have this be settings and that's fine.

But I would come here I would select all of these text.

And I'll change the color to this.

And that's what we have.

So whenever the user clicks on On this menu icon, this is going to slide out from the left.

And that's okay.

So let's go ahead to create the routes that the users will go to when the users click on this transact link here at the bottom navigation section.

So to do that, I would come here, I would select this here, and I will duplicate it.

I would rename that to transact, without zooming out, come here.

And I would say, transact.

Keep that selected and out, align that to the center horizontally, then I'll take all of these outs.

Now, I'd like to have two card components here, one for withdrawal action, and one for a deposit action, as simple as that.

So let's go ahead and let's create those card components.

So outcome here out, create a text here, I'll just say deposits.

And I'll keep this text selected.

Come here, and I'll go with the headline three bold text, just like this.

Now, I'd come here and I'd have a 48 by 48 px frame layout, with a corner reduce of 100, then I'd come here and I'll give it a color, that's green, then go to be further icon slogan.

And I'll get an incoming icon there, which is this, this is our incoming arrow icon out, place this here, then come here and set the constraints value to center and center.

Now out, select the icon vector, and now change the color to this.

So I would bring this here, select this, and then create an auto layout on it.

Now for this auto layout, I would come here and I'd set the alignment property to center.

When I do that, I'd come here and outset the space in between items value to 16, then go ahead to add a fill color.

When I add the fill color out, come here and I'll set the padding around items value to eight.

To have that then I would go ahead to set the corner reduce value to eight.

Now outcome here now select the deposit text and change the horizontal resizing value from hog content to fill container.

So this is the deposit action card that I would have on that page.

outcome here, I would rename this to deposit action, save that, and then come here and click on Create components.

Now select this text and I'll change the color to this.

Now I would come here now I would go to this page.

And I would bring in VAT components.

This is it.

I'll keep it selected.

And I'll give it a shadow effect out zoom into this point.

I'll bring this here.

And I'd make sure I have 123456 Row spaces.

And that's okay.

So out stretch this to this point like this.

And I'll create a component or withdrawal.

I'll duplicate this component, which is the master component, take notes.

And I would detach instance, when I detach instance out, select the circular frame there out, make this red out, select the arrow frame there, and I would set the rotation value to 180 degrees.

And that's sorted, as easy as that.

So I would come here select it's come here and go to the design three and rename this to withdraw action.

When I do that, I'll keep it selected.

And I'll click on Create components here.

And that's okay.

So outcome here now, I'll bring this in give it a shadow effect, like this, I would have this day here.

And I would spread this to this point.

And that's okay.

So finally, on this page, I would love to have a button here that can be used to perform the adding of card action.

So I would keep this here I'd have 16 px margin space here, which is to row spaces.

One and two are keep the bottom selected.

out, set the top padding value to eight and the bottom padding value to eight.

Then I'll change the text contents there to add card just like that.

And that's sorted.

So this is the page that the users will go to when the users click on this transact link here at the bottom Navigation component.

So this is where I would stop for this project in regards to creating screens and outs stop here because we have achieved the actual user task for this app.

Now I'd like you to take this as your own assignments and and when you are done.

You can Tagami tweets on Twitter, my Twitter handle is you can go ahead and tag me to your assignment on Twitter.

Now, the assignment is this, I'd like you to have a notifications icon here.

And the notification icon should take users to a page of notifications when they click on it.

And the notifications can be anything.

It can be newsletters, it can be transaction notifications, it can be anything at all.

Now place the notification icon here and create a Notifications page that users will go to when the user clicks on the notification icon.

Now, after that, come here and create a route or create a page that the user will go to when the user select add another card, create a page that the user can use to add their debit card details to this app.

The third assignment will be this, come here and create a page that the user can use to request for their statement.

After that, create a settings page now on this settings page, lets the user be able to set their secrets been there.

Now over here, which is the card management link, the user should be able to delete a card that they have added to this app, or add another card that they want to add to this app.

So that should be possible when the user clicks on card management here.

This should take the user to a page where they will be able to see all the cards that they have on this app.

And and also, they should have the ability on that page to add and delete cards.

Now take notes, this Add Card button here should take the user to the same page that you would create for this add another card here, just like that.

And also, this recent transactions link here should take the users to a dedicated page for the list of all recent transactions.

This investment portfolio link here should take the user to a dedicated page of all the investments that the user has made on this app.

So go ahead to build all of those pages, so that you can have a full and complete user experience.

Now, finally, for the assignment, just before I forget, come here and create a Forgot Password page, create a page here that the user can use to reset their password just in case the user forgets their password.

And that's going to be it.

So at this stage, what we are going to do is to create a prototype of all of these designs that we have created, we are going to link this perfectly and see how it's going to work.

So to do that, let's zoom in out come here, I will start from the splash screen.

So I would select it.

Come here click on prototype.

When I click on prototype, I would come here and I would connect the splash screen to this page.

Now the action will be an on tap action.

And that's because this is a mobile app actually.

So we are actually supposed to tap this screen with our fingers.

Now when the user taps on the screen, the user should move to or should navigate to, you can see the action here should navigate to the author selection page, which is this.

Now the transition animation or the navigation animation should be a smart animation.

So it's going to be an ease in animation.

And I would like this ease in animation to be for 800 milliseconds.

Actually, I'd like this to be an ease in and out animation, just like this.

Yeah, that's better for me.

So outcome here now.

And I will say okay, when the user clicks on the login button here, the user should go to the login page.

And I'll keep all of the sets the way it is.

Now when the user clicks on the get started button here, the user should go to the signup page.

So I would come here, click on this login button here.

And I would say when the user clicks on that login button after after passing in their email address and password, the user should go to the homepage, which is this over here.

When the user clicks on the signup button, the user should go to the verification page where the user will have to enter the verification code sent to their phone numbers.

Now when the user types in the verification code here, the user should click on the Verify button.

And when the user clicks on the Verify button, this should show like a pop up so I would connect it to this.

So out connect this And I'd keep it as on top, then for the action out habit set to open overlay, then come here and I'll keep it sets a centered actually, after setting these two Centered Outcome here, and I won't select this option.

And that's because I don't want the user to close the pop up.

If they mistakenly click outside the pop, I'd like the user to click on proceed here.

So this other option here out selected, this is the add background behind overlay property or the add background behind overlay option.

When I select it, it means that when the popup shows up, the background will be faded.

So I would set the Opacity value to 35%.

And I would like the animation to be an instant animation.

And that's going to be okay.

Now, when the user clicks on this Proceed button, the user should be taken to the homepage.

Now, when you are creating a prototype like this, you can just take the connection here to any page at all, then come here and set it to the page you want to set it to.

So I would come here and I would select Home.

And you can see that the connection has gone to the homepage, just like this.

So the authentication is set.

Now when the users come to the homepage, and the users click on this menu icon, the user should be taken to the menu, slide bar them here, this is what should show up when the user clicks on that menu icon.

Now, I would want that menu slide bar or that slide bar menu to actually slide in from the left.

So I'll click on this connection here to have the Interaction Details page show up.

Now for the action here, I would set these to open overlay outcome here and I'll set it to manual.

When I set it to manual, it means I'll be the one to set how the interaction is going to happen.

So I'll grab this, and I'll place this here, just like this.

This is how it's going to look like when you click on that menu icon.

Now outcome here.

And I would say close this slide by menu, when the user clicks outside of it, I would select that and over here out have a background behind overlay properties selected, also an out have the Opacity value set to 35%.

Now for the animation, I'll change this from instance, to move in just like this.

And for the moving action out habits moving from the left and out have the speed of that animation set to 800 milliseconds.

Now outcome here, I'll click on this font Account button here.

And I'd say okay, when a user clicks on this button, this should show us a pop up.

So we all know how to set a pop up, right.

So I'll change this to open overlay.

Keep it set centered, and out add a background behind overlay action.

And also, if the user chooses not to fund the account anymore, the user can just click outside the pop up and go back to the homepage.

So I would select that.

I'll keep this set to 35%.

And for the animation here, I'll keep it set instance.

So I'll close this.

Now if the user selects the bank transfer option, the user should come here, as easy as that.

And if the user clicks on copy account number, this account number will be copied to the user's clipboard.

And when that happens, the user will come here and click on this arrow here to go back to the homepage out sets this from instant to smart animates.

And that's okay.

So if the user clicks on the debit card option here, the user would be taken to this page.

If the user is taken to this page, and the user types in the amounts that they are trying to actually fund the account with, then the user will go ahead to tap or to click on the fund account button here.

And when the user does that, the user would come to this page where the user will have a message that says account funded successfully.

Now, at this stage, we are going to want the user to go directly to the InVEST page.

So I'll select this button now.

And I'll take this flow to the InVEST page, which is this.

So when the user gets here, I'll take this menu icon out here actually, when the user gets here, and the user wants to invest in one of these listed stocks, let's say this one, the user will click on it and the user will be taken to the stock Details page.

When the user gets to the stock Details page and the user is okay with all of these details here.

The user will click On the InVEST button here.

And when the user does that, the user will come here and be required to enter the amounts that they wish to invest in that stocks with.

When the user enters the amount and the user clicks on the Proceed button, the user will be taken to this page, which is where the user will see a summary of the investment that the user is about to make.

Now, if the user is satisfied with this summary, the user will go ahead to type in their secrets pin here, and then click on this invest button.

And when the user does that, the user will be taken to this page, which is a success page, that's going to let the user know that, hey, you have successfully invested in that stock.

So the user will come here and click on the Go back home button, and out, take this back to the homepage, how to select home here.

So let's come here, let's see the other links that we have not created.

So let's say the US is trying to see the transaction detail of any of this recent transaction.

Yeah, let's see the withdrawal transaction here, I would click on it to select it.

And I would link this to the Transaction Details page, which is this.

So if the user clicks on that transaction card, there, the user will be taken to this page.

And if the user goes through the whole detail, and the user is satisfied, when the user clicks on done, the user will go back to the homepage, outcome here and select home here.

Same will happen if the user comes here, clicks on that arrow, the user will go back to the home page.

So you can see that we are creating lots of connections and flows here.

Lots of connections and flows here.

So let's go back to the homepage, and let's see the flow that we have not created.

So this is the home page here.

So this home link here is safe to be there.

Now let's say the user clicks on this invest link here, which is in the bottom navigation components, the user should be taken to the InVEST page.

If the user clicks on this transact link here, the user should be taken to the transact page.

So if I come here, now out still connect this, this should go to the homepage.

And since this is the Invest page here, it means we are here.

So this should go to the transact page.

I'll do that for this also.

So let's come here.

Let's see, let's see what we have not connected yet.

So if the user comes to the transact page, and the user clicks on the deposits card here, the user should have that pop up, show up, that would require them to select if they want to deposit with bank transfer or their debit card, it should be the same flow.

Now over here, I should actually change this to withdraw.

If the user clicks on this withdraw card here, the user should be taken to a page where they would have to enter the amount and the destination bank that they are trying to withdraw their funds to.

So this is also going to be a part of your assignment.

Go ahead and create that flow.

When you create it.

Go ahead and tag me on Twitter for my comment.

So let's go ahead and let's present this flow.

And let's see how it's going to look like.

So I would come here, I would select the splash screen.

And I'd come here and click on present.

So when I click on present, I would have the splash screen show up here.

When I click on it, I would have the option to either login or get started.

So I'll click on get started.

And here we are on the signup form page.

So if the user enters their email address, phone number and password when the user clicks on the signup button, the user will be required to enter the verification code.

When the user enters that the user will click on the Verify button here.

And a pop up will show up here saying phone number verified.

Now you'll see that when I click outside the pop up, the pop up won't go away until I come here and I click on the Proceed button.

When I do that, I'll be taken to the homepage.

Now here we are in the homepage.

Now if I come here and I click on this menu icon here, you will see that this menu slide bar or this slide bar menu and how you call it is fine.

This slide by menu slides in from the left.

When I click outside of it, it goes back in.

Now let's check the font accounts flow.

When I click on it, I would have this pop up show up here that says Select method.

Now let's say I choose to select the bank transfer method, I would have this show up here, I'd be able to copy the account number.

And when I'm done, I would come here and I would click on this arrow icon here.

To go back to the homepage.

Now let's click on the bond Account button once more, and let's select the debit card method, you can see that I'll be taken to this page where I would have to enter the amount that I'm trying to fund this account with.

Now, let's say I type in the amount, I would come here and I'll click on the fund account button, just like this.

And I'd have this message that says accounts funded successfully.

Now if I go ahead and click on this invest button, I'll be taken to the InVEST page, which is this.

And over here, I would see a list of stocks.

Now I'd like to present this in full screen actually, so that we can see better.

So over here, I would see a list of stocks that I can invest in.

Now let's say I'd like to invest in this one here, I would click on it.

And I would see full details about this stock here.

Now, I don't have some of my components showing here.

So I would go back to my design outcome here.

So this is the stock Details page.

So this three buttons actually not inside that layout.

So I would select the three of them.

And I'll take them inside that layout.

And that sorted.

Now when I come back here, you will see that I have that here.

So let's go back to our full screen presentation.

So if the user likes what they see here in the stock Details page, the user will go ahead to click on the InVEST button here.

And when the user does that, the user will enter the amount that they would like to invest in that stocks with.

When the user does that, the user will go ahead to click on the Proceed button here.

Now that flow is not created.

So I would come back to our design here, I would click on this Proceed button here, click on prototype.

And now let's see what the problem is.

So I came here and I clicked on this connection link here.

And I changed this from on drag to on top.

Now when I come back here, and I click on the Proceed button here, you will see that we are taken to the Summary page.

Now this page will be the page where the user will see a summary of the investments that the user is about to make.

And if the user is OK with this, the user will go ahead to enter their secrets pin here and then click on the InVEST button.

Now the InVEST button is not active also outcome here and out see the problem for that.

So I would click on invest here.

And I would select the connection flow here.

And as you can see here, there is an undo drag event here, outcome here.

And I'll delete that on drag event here.

And I'll just leave this set to tap now.

But the tap event, there is no navigation destination.

So I would set this.

First of all out to take note of the screen here.

This is the successful investment page.

So I would come here and I would go to the successful investment page.

And that's sorted.

Now when I come here, and I click on invest, I'd be taken to the success page.

Now when I click on Go back home, I'll be taken back to the homepage.

Now that is after I have successfully invested in a stock.

Now, what happens if I come here, and I click on one of the recent transactions here, let's say the withdrawal transaction here, you would see that I'll be taken to the transaction details page for that transaction.

When I'm done going through it out, click on Done.

And I'll be taken back to the homepage.

Now what's going to happen if I come here and I click on this invest link at the bottom navigation components.

I'll be taken to the InVEST page still.

And I'd be able to still invest in a stock just like this.

Now what happens if I come here and I click on the transact link here or be taken to this page where I'd have the option to deposit funds or withdraw funds.

And I'd also have the option to Add Card.

Now if I am okay with this outcome here, and I'll click on this arrow to go back to the homepage and that arrow is not active.

So I would have that sorted out come here and connect that arrow to be homepage and it's going to be an on tap event.

So when I come back here, when I click on that arrow now, you will see that I'm taken back to the homepage.

So go ahead, create the order pitches and the other route as your assignment, then tag me to it on Twitter.

So that's that for this course.

If you found this cost to be helpful, go ahead, click on the subscribe button, leave a comment in the comment section.

And stay tuned for more content.

Thank you and see you in another course.

In this article, I will provide definitions for UI/ UX design as well as starting salary information from around the world.

What is UX design?

The term User Experience refers to how users interact with a product or service. Whenever you login into a website, or play a game on your phone, your interaction with that application is considered user experience.

If you find a product to be easy to use and understand, then that would be considered a positive user experience. But if the product is confusing and frustrating then that would be considered a negative user experience.

If you want to learn more about UX design, and find resources to start learning, then I would suggest reading my article on What is UX Design?

What is UI design?

The term User Interface refers to the look and feel of a product. For digital products, UI design focuses on all visual aspects including fonts, colors, spacing, responsive design and more.

Good UI design is considered to be simple, easy to understand and consistent. You don't want users to have to struggle with navigating through the product because it is not intuitive.

Bad UI design is considered to be inconsistent and difficult to understand. If users are confronted with low quality images, inconsistent fonts or poor contrast in visual content, then the user will want to leave the product as soon as possible.

If you are interested in learning the fundamentals of UI design, then I would suggest reading through this Per Harald Borgen article.

Resources to start learning UI/UX design

Here is a list of resources to learn UI/UX design.

• Foundations of User Experience (UX) Design
• The 2019 UI Design Crash Course for Beginners
• Figma Tutorial – A Free UI Design/Prototyping Tool
• UXpin: Free UX Ebooks

Salaries around the world for UI/UX designers

In this section, I will show you some salaries from around the around for entry level UI/UX designers.

United States

This data was pulled from indeed.com, payscale.com, and ZipRecruiter.

This data represents the national average. If you want data for your specific city, then you can search for that in these job sites.

Canada

This data was pulled from ZipRecruiter.

Mexico

This data was pulled from payscale.com and is in MXN currency.

UK

This data was pulled from uk.talent.com. The average entry level salaries for UI/UX designers would start at £35,000.

Other Countries around the world

If you want to explore other UX salaries from around the world, you can look into https://uxdesignersalaries.com/

You can also use popular job sites in your area, to find out the average entry level salary for UI/UX designers.

I hope you enjoyed this article and best of luck on your UI/UX journey.

You're not the only one.

We live in a beautiful era of design, with new techniques and trends coming and going. Frontend development is also gaining increased momentum, with more and more developers getting involved in UI/UX design.

While both UI and UX design are often placed on the same pedestal, they are fundamentally different, and beginners should understand the difference between the two.

Knowing this, my team from Creative Tim and I have done a lot of research and created a comprehensive guide on the most important parts of these two huge domains:

1. UI Design — How Things Look
2. UX Design — How Things Work
3. What Are the Key Differences Between UI and UX Design?
4. What Do UI/UX Designers Do?
5. What Are the Disadvantages of a Combined UI/UX Role?
6. How Do UI/UX Designers Work Together?
7. What Are the Salaries of UI and UX Designers?
8. How Do You Become a UI or UX Expert? What Kind of Design Courses/Tutorials Should You Take?
9. Which Should You Specialize In? UI or UX Design?

UI Design — How Things Look

A UI (User Interface) deals with the application's graphical layout, which includes buttons, screen layout, animations, transitions, micro-interactions, and so on. In short, UI is all about how things look.

UI design includes the following formats:

• Graphical User Interface (GUI): GUI design involves how users interact with the visuals and digital control panels of a system. The computer's desktop is an example of a GUI.
• Voice-controlled Interface (VUI): VUI design deals with the interaction between a user and a system using voice. Smart assistants like Bixby for Samsung mobile devices and Siri for iPhones are examples of VUIs.
• Gesture-based Interface: This is mostly used in virtual reality (VR) and other gesture-based design scenarios, which deal with the engagement of users within 3D spaces. Here is an example of our fully coded simulation of the Soft UI Admin Dashboard in VR:

Source

For good UI design, you should take these characteristics into consideration:

• The design should be focused on helping users complete tasks quickly with minimum effort. Completing tasks should be a seamless experience.
• It should be enjoyable, satisfactory, and free from frustration.
• The UI design should communicate the brand value of the company/organization.

UX Design — How Things Work

UX (User Experience) design deals with how users interact with the system. Logical navigation and how smooth and intuitive the experience is all fall under UX design. In short, this type of design helps users have a positive experience.

To get a feeling of the UX process, here are the main steps:

• Interaction Design deals with how users can complete their tasks effortlessly by using the interactive components of a system (page transitions, animations, buttons, and so on).
• User Research involves conducting extensive research, collecting feedback and ideas from new or existing customers, understanding end user needs, and making design decisions based on these parameters.
• Information Architecture involves the organization of information and content that users need to do their tasks. This requires a UX designer to understand the relationship between different sets of content and present them in the most understandable way possible.

For good UX design, you should follow these practices:

• The product should be easily usable, logical, and self-explanatory.
• The product should solve users's problems.
• The product should be accessible and usable to a wide range of people.
• The product should create a positive experience for the user, allowing them to complete tasks without frustration.

Cognitive Biases

Great UX designers must be aware of the cognitive biases that we all have, as this can affect the interaction between the user and interfaces. Many marketing strategies are based on these biases:

_Source_

What Are the Key Differences Between UI and UX Design?

UI and UX design have often been used as interchangeable terms.

While the end product requires consideral input from both design methodologies, the process of designing UI and UX is very different.

UX design mostly deals with the user’s entire journey to solve a problem.

On the other hand, UI design is focused on how the product looks and feels when the problem is being solved.

Here are the main differences between UI and UX design:

• Main focus: The main focus of UI designers is to deal with the quality and visuals of the end product, and use hi-fi models as prototypes. UX designers focus more on the purpose and functionality of the end product, and care more about logic. Additionally, UI designers deal with the technicalities of the product design, while UX designers focus more on project management and analysis of the project.
• Use of color: UI designers design prototypes in full color while UX designers do so in black, white, or grey.
• Tools: UI designers use tools like Sketch, Flinto, Principle, and InVision for collaborative image designing. UX designers use wireframe-based prototyping tools like Mockplus.
• Artistic Component: UI designers have to include an artistic component in their design since it is related to what the end user sees, hears, and feels. UX design has more of a social component, as it needs to understand what a user wants to experience in the end product.

Here is an example of UX and UI prototypes for the same end product:

Source

What Do UI/UX Designers Do?

If you want to become a greate UI designer, you should develop the following skills/responsibilities:

• Working in agile teams.
• Creating user flows, wireframes, prototypes and so on.
• Visualization tools such as InVision, Sketch, Photoshop, Figma, etc. For more details about which tool to choose, check out our research in this article: InVision vs Sketch vs Figma vs Photoshop
• Frontend programming languages such as HTML5, CSS3, and JavaScript.
• Executing visual design stages from inception to final hand-off.
• Collaborating with UX designers, developers, QA, and product managers to design and implement innovative visual ideas for products.
• Communicating the branding and style of the company to users through design.
• Creating the look and feel of the product using customer analysis and research.
• Managing the responsiveness, interactivity, and animation of a product and making it adaptive to all device screen sizes.

If you want to become a great UX designer, you should develop these skills/responsibilities:

• Working in agile teams.
• A strong understanding of the UX process.
• Prototyping tools like Adobe Creative Suite, Sketch, InVision, Axure, etc.
• Problem solving skills and curiosity about everything related to design, people, life and technology.
• Stakeholder management and client interaction.
• Creating process flows, wireframes, sitemaps, prototypes, and UX deliverables.
• Collaborating closely with developers, product managers, UI designers, external stakeholders, and QA Engineers to iterate designs based on market dynamics, user feedback, and tech constraints.
• Analyzing customer needs, competitors, product structure, and strategies for designing the experience of a product.
• Creating seamless design and interaction strategies for mobile, web, desktop, and other hardware endpoints.

What Are the Disadvantages of a Combined UI/UX Role?

Having a combined UI/UX role is almost like wearing two different hats at the same time.

While most organizations advertize a UI/UX role as a single, combined role, a UI and UX designers have different skill sets. Their main focus, way of thinking, and method of prototyping a product differ greatly.

A combined UI/UX role requires constant switching between conceptualization and visualization, which is often difficult and can reduce the amount of attention that each discipline requires.

How Do UI/UX Designers Work Together?

While UI design and UX design require very different skill sets, they are both important components that must work in harmony to give the best experience to end users.

A UI design might be beautiful, but it can be clunky and confusing to navigate without a good UX design. On the other hand, the user experience of a product can be flawless, but it is nothing without a good looking user interface.

Any frontend development and design process should start with understanding the needs of the user. UX and UI designers should work in collaboration with other developers, managers, and product owners to understand what the end product should be able to do, how it should feel, and what it should look like.

UX designers are generally involved in the earlier phases of a product design since they need to design the flow of activities that take place when a user needs to solve a problem. This involves analytic and project management activities.

Later, a UI designer builds on the aesthetics and interactions based on the models provided by the UX designer.

Given this, it is safe to state that UX and UI go hand in hand. And while there are instances when the same person does both, one design principle cannot exist without the other.

What Are the Salaries of UI and UX Designers?

UI designers earn an average of 50k worldwide, with the average salary in the USA being 91k, Germany being 57k, France being 47k, and 67k in the UK.

UX designers earn slightly more, with an average of 52k worldwide. UX designers in the US earn 102k on average, with Germany paying 53k, 49k in France, and 68k in the UK. (Source: Glassdoor)

Note: All the salaries listed above are an average for the area, and are in USD.

How Do You Become a UI or UX Expert? What Kind of Design Courses/Tutorials Should You Take?

Becoming a UI or UX expert starts with being genuinely interested in UI/UX design. Once you know you're interested, you should find resources and take design courses that help prepare you for the job market.

There are online courses like the UI Design Program and Learning UI Design that can help you kickstart your journey towards becoming a UI designer.

For UX design, you can study online, paid courses, or courses from online universities. You can also look at the best online course websites to learn UI/UX so you can see which websites offer courses for free and the user feedback on these websites.

For UX design, there are a number of paid courses, of courses from online universities. You can also check out a list of the best online courses to learn UI/UX design so you can see which websites offer courses for free, and read user feedback.

Suppose you already have some of the required skills to be a UI/UX designer. In that case, you can also take a look at articles like the behavior patterns for UX design, UX methods that you can use, inspirational graphic designs from the world's best designers, and academic research papers that designers should read.

Which Should You Specialize In? UI or UX Design?

Specializing in UI or UX design is a personal preference that depends on your particular skillset.

However, there are a huge number of companies that advertise a combined UI/UX designer role.

While the roles and responsibilities of both these vary differently, there is still a niche market for UI/UX design, making it a good idea to have adequate knowledge about both.

While difficult to implement, a combined UI/UX career can prove fruitful in terms of salary compensation and importance in the company.

However, a combined UI/UX designer role is difficult to perform since it needs constant switching from one mindset to the other. So it is often a better option to specialize in one role instead.

For example, if you are artistic, know effective color combinations, and understand how products can be visually enhanced, UI design is a good choice for you.

On the other hand, if you are good with managing user and stakeholder needs, have excellent analysis skills, and understand how user experiences can be improved, UX design would be more suited to you.

Final Thoughts

User Interface and User Experience design both require an understanding of what users need.

Once you have this understanding, frontend development and design do not have to be a complex affair — there are a lot of ready-made components, tools, and kits that can make design easier and more effective.

Creative Tim offers you a huge number of free and premium, fully coded UI tools like Templates, Dashboards, and Design Systems.

If you want to build your illustrations using hand-drawn sketch components in a scalable manner, look no further than Creative Tim’s product: IRA Design.

And let's keep in touch on Twitter.

Whether you're an Apple fan or not, you'll likely agree that Apple sure does have a groundbreaking UI. And iMessage is definitely an important part of that design.

The curved arrow is something that I have always really liked and have wanted to replicate for a long time.

After a lot of trial and error, I was finally able to find a workaround to build a similar version of iMessage's chat bubble. In this article, I'll take you through the steps required to build a chat bubble that looks like Apple's iMessage.

If you're building a chat application or intending to display information in the form of a message, I'd definitely recommend that you try out this style as it makes your app look cool and professional.

Prerequisites

This article assumes that you know the basics of:

• JSX
• React Native
• HTML & CSS

What is a Chat Bubble?

A chat bubble is basically a container that holds text. Chat bubbles are mostly used in Instant Messaging apps to display chat logs effectively.

The conventional method is that sent messages are displayed on the right side of the screen and received messages are shown on the left, with different colors used to differentiate between sent and received message(s).

Most messaging apps have a basic chat bubble which is a regular container with rounded corners. The main differentiating factor between other apps and iMessage is the presence of a small curved-like arrow anchoring the text container, which looks like this:

How to Build a Chat Bubble that Looks like iMessage

If we look at the above image carefully, we can see that the iMessage chat bubble is a combination of a regular chat bubble with an added arrow in the corner.

The main challenge lies in tying the arrow to the text container.

Before directly hopping into the code, I'd want you to know how this arrow-like element is created and added.

First, check out this code, which shows how to implementation this arrow using HTML & CSS. Below is its code snippet.

p {
  max-width: 255px;
  word-wrap: break-word;
  margin-bottom: 12px;
  line-height: 24px;
  position: relative;
    padding: 10px 20px;
  border-radius: 25px;

  &:before, &:after {
    content: "";
        position: absolute;
    bottom: 0;
    height: 25px;
  }
}

.from-me {
    color: white; 
    background: #0B93F6;
    align-self: flex-end;

    &:before {
        right: -7px;
    width: 20px;
    background-color: #0B93F6;
        border-bottom-left-radius: 16px 14px;
    }

    &:after {
        right: -26px;
    width: 26px;
    background-color: white;
        border-bottom-left-radius: 10px;
    }
}
.from-them {
    background: #E5E5EA;
    color: black;
  align-self: flex-start;

    &:before {
        left: -7px;
    width: 20px;
    background-color: #E5E5EA;
        border-bottom-right-radius: 16px;
    }

    &:after {
        left: -26px;
    width: 26px;
    background-color: white;
        border-bottom-right-radius: 10px;
    }
}

If you just browse straight through the code it might seem quite awful. So let's break it down at an atomic level and later glue it all back together.

The <**p>** tag includes style constraints such as margin-bottom, position, padding and so on. Note that the max-width used here is 255px, which is a static value. But we'll be using a dynamic approach, as the chat bubbles need to be responsive across various screen sizes.

The &:before and &:after within the <p> style defines two elements with no content in it. They're positioned absolute with respect to the <p> tag (text container), and are placed at the bottom. They have a height of 25px (the height of the arrow).

Going further, the .from-me (sent messages) style defines that the text be white, background blue (#0b936f), and that it's placed at the right side of the screen (align-self: flex-end).

Now comes the important part – extending the &:before and &:after, which is the actual implementation of the arrow.

The &:before has a width of 20px and is placed at 7 pixels negative to the right. It has a border-bottom-left radius of 16px, which is what gives the curved look to the arrow.

Similarly, the &:after has a width of 26px and is placed at 26 pixels negative to the right. Since -7px > -26px, &:after is placed right side of the &:before element and partially overlaps it.

If you still feel confused, don't worry – just refer to the images below to gain a clearer insight into what I've been talking about.

&:before with black background and bottom-left-radius

&:after overlapping &:before with green background

&:after background changed to white to match the background of the chat screen.

&:before background updated to #0b93f6 to match chat bubble color.

So basically the arrowhead is created by overlapping two elements at the bottom corner of the chat bubble and adjusting the background colors to match those of the chat bubble and chat screen.

Further ahead, the translation of CSS and HTML into JSX is fairly simple, as most of the things are quite straightforward.

How to Build the React Native Version

Before starting, I want to note that this works best with FlatList, and I recommend that you use it, and not other components or functions such as map (which lacked consistency across different screens and devices).

The three steps we're going to follow here are:

1. Create chat bubble with arrow head
2. Add styles to chat bubble and arrow head
3. Embed chat bubble in FlatList

So let's get started.

First, we'll create the chat bubble with the arrow head, like this:

<View style={{
                    backgroundColor: "#0078fe",
                    padding:10,
                    marginLeft: '45%',
                    borderRadius: 5,
                    //marginBottom: 15,
                    marginTop: 5,
                    marginRight: "5%",
                    maxWidth: '50%',
                    alignSelf: 'flex-end',
                    //maxWidth: 500,

                    borderRadius: 20,
                  }} key={index}>


                    <Text style={{ fontSize: 16, color: "#fff", }} key={index}>{item.text}</Text>

                      <View style={styles.rightArrow}></View>

                      <View style={styles.rightArrowOverlap}></View>



</View>


//Recevied Message
      <View style={{
                    backgroundColor: "#dedede",
                    padding:10,
                    borderRadius: 5,
                    marginTop: 5,
                    marginLeft: "5%",
                    maxWidth: '50%',
                    alignSelf: 'flex-start',
                    //maxWidth: 500,
                    //padding: 14,

                    //alignItems:"center",
                    borderRadius: 20,
                  }} key={index}>



                      <Text style={{ fontSize: 16, color: "#000",justifyContent:"center" }} key={index}> {item.text}</Text>
                      <View style={styles.leftArrow}>

                      </View>
                      <View style={styles.leftArrowOverlap}></View>



                    </View>

The Outermost <View> tag acts as the 'p' tag in comparison with the HTML version. The remaining two <View> tags act as &:before and &:after.

Next, we'll add styles to the chat bubble and arrow head like this:

const styles = StyleSheet.create({
rightArrow: {
  position: "absolute",
  backgroundColor: "#0078fe",
  //backgroundColor:"red",
  width: 20,
  height: 25,
  bottom: 0,
  borderBottomLeftRadius: 25,
  right: -10
},

rightArrowOverlap: {
  position: "absolute",
  backgroundColor: "#eeeeee",
  //backgroundColor:"green",
  width: 20,
  height: 35,
  bottom: -6,
  borderBottomLeftRadius: 18,
  right: -20

},

/*Arrow head for recevied messages*/
leftArrow: {
    position: "absolute",
    backgroundColor: "#dedede",
    //backgroundColor:"red",
    width: 20,
    height: 25,
    bottom: 0,
    borderBottomRightRadius: 25,
    left: -10
},

leftArrowOverlap: {
    position: "absolute",
    backgroundColor: "#eeeeee",
    //backgroundColor:"green",
    width: 20,
    height: 35,
    bottom: -6,
    borderBottomRightRadius: 18,
    left: -20

},
})