Forem: Yamalab Design(Yuta)

How to make Weather Animation Button HTML&CSS only

Yamalab Design(Yuta) — Thu, 13 Apr 2023 02:20:32 +0000

Today, I will introduce how to create a weather animation button using only HTML and CSS.

How to make 3D Profile Card with HTML and CSS

Yamalab Design(Yuta) — Mon, 10 Apr 2023 21:56:09 +0000

Hello, I just throw how to make 3D profile card with only HTML and CSS.

See the Pen 3D Profile Card_CSS by YMCAts (@YMCAts) on CodePen.

4 Design Principles for Supporting Decision Making

Yamalab Design(Yuta) — Mon, 10 Apr 2023 09:36:44 +0000

When it comes to decision making, having the right design principles in place can make all the difference. Here are four design principles that can help support decision making.

Progressive Disclosure

Progressive disclosure is a design principle that involves revealing information gradually, as needed. This technique can include using tooltips, labels, and expanding sections. By presenting information in a progressive manner, users can make more informed decisions without feeling overwhelmed.

Cognitive Aids

Cognitive aids are tools or techniques that help users process and understand information. These aids can take many forms, from visualizations and diagrams to checklists and decision trees. Providing timely reminders, notifications, and visual cues can help users remember important information or tasks, and make complex information more accessible and easier to understand.

Feedback

Feedback is an essential component of decision making. Visual cues, messages, and animations can provide instant feedback to help users understand the results of their decisions and guide them towards desired outcomes.

Defaults

Defaults are pre-set options that users can choose from when making decisions. By setting defaults that are aligned with users' goals and preferences, designers can help support decision making by making it easier for users to make choices that are in their best interest. Smart defaults, such as pre-filled forms or suggested options, can help users make decisions in a context-appropriate manner.
By incorporating these four design principles into decision-making processes, designers can help support users in making better decisions. Whether it's through progressive disclosure, cognitive aids, feedback, or defaults, these principles can help make complex decisions more manageable and less overwhelming.

Thanks for reading!

Types of HTTP Status Codes like 404? 503?

Yamalab Design(Yuta) — Wed, 29 Mar 2023 07:55:49 +0000

Types of HTTP Status Codes

HTTP status codes can be classified into the following five categories. The 100s, 200s, and 300s codes indicate that the communication between the browser and the server is working correctly and are not displayed on the site. It is necessary to be careful of the HTTP error codes called the 400s and 500s.

100s Informational

The 100s indicate that the request has been received and is being processed.

200s Success

The 200s indicate that the request has been received and processed successfully.

300s Redirection

The 300s indicate that additional processing is required to successfully process the request.

400s Client Error

The 400s indicate that the request from the client has failed. The four most common codes are:

400 Bad Request: An error occurs in the request.
401 Unauthorized: The user does not have access privileges to the site.
403 Forbidden: The user is prohibited from accessing the site.
404 Not Found: The site itself cannot be found.

500s Server Error

The 500s indicate that the server has failed to process the request. The two most common codes are:

500 Internal Server Error: An error has occurred on the server.
503 Service Unavailable: The server is unable to process the request due to heavy traffic.

How to Handle HTTP Error Codes

|| 400 Bad Request: An error occurred in the request. | Try using a different browser or device.

|| 401 Unauthorized: The user does not have access privileges to the site. | Verify membership registration information.

|| 403 Forbidden: The user is prohibited from accessing the site. | Check access privileges and access links.

|| 404 Not Found: The site itself cannot be found. | Verify the URL.

|| 500 Internal Server Error: An error occurred on the server. | Investigate the cause of the server error.

|| 503 Service Unavailable: The server is unable to process the request due to heavy traffic. | Reduce the load on the site or consider changing the server.

It is not a problem to intentionally delete a page and display an error code. However, if an error code is unexpectedly displayed on a page that should be displayed normally, such as 403 Forbidden, 500 Internal Server Error, and 503 Service Unavailable, carefully investigate the meaning of the code and handle it appropriately.

Best way to finding a color palette to use as a reference

Yamalab Design(Yuta) — Fri, 24 Mar 2023 19:45:35 +0000

If you're looking for inspiration for your next color design, or simply need a reference for color palettes, I recommend checking out these website I found. It's a great resource for finding a wide range of color combinations that are sure to give your designs a professional and polished look. Happy designing!

1. Adobe Color CC

Adobe Color CC

2. Color Hunt

Color Hunt

3. Coolors

Coolors

4. NipponColors

NipponColors

5. khroma

khroma

6.colorable

colorable

7. grabient

grabient

8. pigment

Pigmet

8 Animated Backgrounds to Add Glamour to Your Web Design

Yamalab Design(Yuta) — Sat, 18 Mar 2023 20:34:20 +0000

Incorporating animation into web design not only attracts the viewer's attention but also adds a touch of glamour to it. This time, we will be discussing animated backgrounds. The animation used for backgrounds should be attractive yet subtle at the same time. Without further ado, here are our top 8 picks for a variety of animated backgrounds using CSS or JavaScript.

1.Animation background resembling liquid

2. Delicate animated backgrounds with colors that can be customized.

This is the final code example for my upcoming tutorial on creating a generative UI with a super zen orbs animation (built with pixi.js) and a nice frosty UI.

The colors here are generative too!

3.Animation background featuring waves

Lightweight animation between header & content. Easy to customize and apply into any website! Works with all devices and screen sizes.

4. Animated background with color-changing gradient

5.Seamless Animated Background Text

CSS only animated background on text, only works with seamless images.

6.Animation background with semi-transparent shapes floating up

Pure Css Animated Background Down to upside!!!

7.Hexagonal animated background that can create a high-tech vibes

8.Gradient and shape animation background

Incorporating animated backgrounds is a great way to add a touch of glamour to your web design while attracting the viewer's attention. From color-changing gradients to liquid effects, there are numerous options available. These eight examples demonstrate how creative and subtle animation can enhance the overall aesthetic of a website. By experimenting with various animated backgrounds, designers can create a unique user experience that stands out from the crowd.

If you found these tips helpful, please consider following my blog and Instagram for more insights and advice on UI/UX design.

3 Tips UI/UX designers to keep in mind when exporting images

Yamalab Design(Yuta) — Fri, 17 Mar 2023 23:52:18 +0000

As a UI/UX designer, you can make the developer's job easier by creating a user-friendly design that is easy to navigate and understand.

I am happy to share with you some great tips to create more user-friendly designs. These tips will help you to enhance the user experience and make the developers job easier.

Here are 3 great tips for creating a user-friendly UI/UX design that you should know before working with a developer.

1. Export without unnecessary margins and without mask processing.

When exporting images, it is important to avoid unnecessary margins and mask processing. These elements can cause frustration for developers who may need to spend extra time adjusting to accommodate for them. By taking the time to ensure that your designs are clean and easy to work with, you can make the development process smoother and more efficient. This will ultimately result in a better user experience for your audience as well. Additionally, creating designs that are easy to work with can help build a positive relationship between designers and developers, leading to more successful collaborations in the future.

2. Using a common name for coding with layer names.

Don’t you export file as random name?

When creating a design, it's important to use descriptive and consistent layer names to make it easier for developers to understand and use the design data. Using random or unclear names can cause confusion and frustration for developers, who may need to spend extra time renaming layers to match their coding conventions. By taking the time to use common names for coding with layer names, you can make the development process smoother and more efficient. This will ultimately result in a better user experience for your audience as well.

3. Resizing the image to an integer size.

Did you export your image data as decimal size?

When exporting image data, it's important to ensure that the size is an integer value rather than a decimal value. If the image data is exported with a decimal size, it can cause frustration for developers who may need to spend extra time adjusting to accommodate for the non-integer value. Resizing the image to an integer size can make the development process smoother and more efficient. Take the time to do this before proceeding.

Thank you for taking the time to read this article. If you found these tips helpful, please consider following my blog and Instagram for more insights and advice on UI/UX Design. Your support is greatly appreciated!

My instagram