UI Design, (Emojis, Websites, Electron Apps and more!)

MagicCrayon9342

Discuss Web App, Native App, or Electron App User Interface design which includes:
Styling
Formatting
Layouts

If this is a duplicate notify me as soon as possible or report the topic as duplicate.

Last edited by MagicCrayon9342 (Jan. 12, 2022 21:58:27)

MagicCrayon9342

For users who can view imgur links: https://i.imgur.com/6kxPhJc.png

I'm getting better at web design, turning my usual 10 lines of code (20 for themes) into a little over 5 lines of codes for cards.

Dear Scratch Team, This is a complaint about not being able to use imgur, a popular image service in the img bbcode tag, change this it's better for all

Last edited by MagicCrayon9342 (Jan. 11, 2022 22:56:20)

skymover1239

I like UI design as well. I've heard that the new design trend now is Claymorphism. It's kinda cool, but seems like it would be hard to make apps with alot of elements close to each other.

John 3:16 wrote:
For God so loved the world that he gave his one and only Son that whoever believes in him shall not perish but have eternal life

First time a moderator got ninjaed??
500 Posts
Current Mainline projects
AquaCSS - A CSS framework.
Ink - An editor that does, lots of things.

LegoManiac04

skymover1239 wrote:
I like UI design as well. I've heard that the new design trend now is Claymorphism. It's kinda cool, but seems like it would be hard to make apps with alot of elements close to each other.

It looks really interesting, almost kinda like the Wii UI xD
I feel like it would be a pain to style with just CSS though.
—

Thoughts on rounded corners?

kccuber

MagicCrayon9342 wrote:
Dear Scratch Team, This is a complaint about not being able to use imgur, a popular image service in the img bbcode tag, change this it's better for all

The ST is done updating the forums unless it's some critical bug or something. So no.

Made using Nord Theme & Inkscape

-EmeraldThunder-

UI design in my opinion is the worst part of web development, it's so tedious trying to get the values exactly right for a decent UI and then try and make it at least semi-responsive.

Nothing here.

god286

-EmeraldThunder- wrote:
UI design in my opinion is the worst part of web development, it's so tedious trying to get the values exactly right for a decent UI and then try and make it at least semi-responsive.

tailwind has a nice breakpoints system. although it makes your html quite large

Here are some of my followers!

I joined: 5 years, 9 months, 24 days ago (31/03/2018)
I have: 479 followers
In total, I have attained: 1,403 loves, 1,145 favourites, and 33,731 views.
Fun Fact: If my account continued to gain followers at a similar rate to right now, in 14,210 years I would reach the number of followers griffpatch has today! Try to imagine how many followers he would have then!
Thank you everyone!
Script created by god286.

Maximouse

skymover1239 wrote:
I like UI design as well. I've heard that the new design trend now is Claymorphism. It's kinda cool, but seems like it would be hard to make apps with alot of elements close to each other.

Now I really can't understand why people called the Scratch 3.0 design childish when it came out.

This is Maximouse's signature. Learn more about signatures.

Chiroyce

-EmeraldThunder- wrote:
it's so tedious trying to get the values exactly right for a decent UI and then try and make it at least semi-responsive.

ikr….I spent ONE HOUR making only this

css + html

April Fools' topics:

— New Buildings in Scratch's headquarters
— Give every Scratcher an M1 MacBook Air
— Scratch should let users edit other Scratchers' projects
— Make a statue for Jeffalo
— Scratch Tech Tips™
— Make a Chiroyce statue emoji

<img src=“x” onerror=“alert('XSS vulnerability discovered')”>

this is a test sentence

skymover1239

LegoManiac04 wrote:
skymover1239 wrote:
I like UI design as well. I've heard that the new design trend now is Claymorphism. It's kinda cool, but seems like it would be hard to make apps with alot of elements close to each other.
It looks really interesting, almost kinda like the Wii UI xD
I feel like it would be a pain to style with just CSS though.
—

Thoughts on rounded corners?

It's actually kinda of easy to do with CSS. Just look Claymorphism CSS, and you should find something.
Rounded corners are necessary for every design. The pointed corners just look weird and wrong.

Maximouse wrote:
skymover1239 wrote:
I like UI design as well. I've heard that the new design trend now is Claymorphism. It's kinda cool, but seems like it would be hard to make apps with alot of elements close to each other.
Now I really can't understand why people called the Scratch 3.0 design childish when it came out.

Why does Claymorphism design seem like it's childish to you?

John 3:16 wrote:
For God so loved the world that he gave his one and only Son that whoever believes in him shall not perish but have eternal life

First time a moderator got ninjaed??
500 Posts
Current Mainline projects
AquaCSS - A CSS framework.
Ink - An editor that does, lots of things.

Chiroyce

skymover1239 wrote:
The pointed corners just look weird and wrong.

Sure I like rounder corners - but pointer corners are good as well, I don't see why they're “wrong”

April Fools' topics:

— New Buildings in Scratch's headquarters
— Give every Scratcher an M1 MacBook Air
— Scratch should let users edit other Scratchers' projects
— Make a statue for Jeffalo
— Scratch Tech Tips™
— Make a Chiroyce statue emoji

<img src=“x” onerror=“alert('XSS vulnerability discovered')”>

this is a test sentence

NFlex23

Chiroyce wrote:
(#11)
skymover1239 wrote:
The pointed corners just look weird and wrong.
Sure I like rounder corners - but pointer corners are good as well, I don't see why they're “wrong”

So true.

Help improve the Advanced Topics (Really!)
Before you create a topic:
Always search for duplicates or other similar topics before making an umbrella topic, e.g., “The Mac Topic”.

Is it about something you are planning on making but haven't made yet? If so, please wait to post until you have created a working prototype. This is a key factor to keeping the ATs as clean as possible.
The ATs aren't technical support. It is perfectly valid to ask questions about things related to programming, but not issues with external websites, apps, or devices. Most sites have their own support system; try asking there!
Is it related to something you are making in Scratch? (This includes OSes and other Scratch projects) If so, please post in Collaboration, Show and Tell, or another similar forum.
Is your topic questionably “advanced”? Try browsing the other forums to see if your topic fits better in one of those.
Issues with Scratch itself should be put in Bugs and Glitches.

Before you post: Is what you're posting likely to start an argument or derail the thread (e.g., browsers, operating systems)? If so, please re-think your post!

NFlex23

I'm not sure if this counts as “UI Design”, but I made a unique looking website: https://mystpi.github.io/

Help improve the Advanced Topics (Really!)
Before you create a topic:
Always search for duplicates or other similar topics before making an umbrella topic, e.g., “The Mac Topic”.

Is it about something you are planning on making but haven't made yet? If so, please wait to post until you have created a working prototype. This is a key factor to keeping the ATs as clean as possible.
The ATs aren't technical support. It is perfectly valid to ask questions about things related to programming, but not issues with external websites, apps, or devices. Most sites have their own support system; try asking there!
Is it related to something you are making in Scratch? (This includes OSes and other Scratch projects) If so, please post in Collaboration, Show and Tell, or another similar forum.
Is your topic questionably “advanced”? Try browsing the other forums to see if your topic fits better in one of those.
Issues with Scratch itself should be put in Bugs and Glitches.

Before you post: Is what you're posting likely to start an argument or derail the thread (e.g., browsers, operating systems)? If so, please re-think your post!

Chiroyce

NFlex23 wrote:
I'm not sure if this counts as “UI Design”, but I made a unique looking website: https://mystpi.github.io/

15/10 epic website

April Fools' topics:

— New Buildings in Scratch's headquarters
— Give every Scratcher an M1 MacBook Air
— Scratch should let users edit other Scratchers' projects
— Make a statue for Jeffalo
— Scratch Tech Tips™
— Make a Chiroyce statue emoji

<img src=“x” onerror=“alert('XSS vulnerability discovered')”>

this is a test sentence

NFlex23

Chiroyce wrote:
(#14)
NFlex23 wrote:
I'm not sure if this counts as “UI Design”, but I made a unique looking website: https://mystpi.github.io/
15/10 epic website

Thank you!

Help improve the Advanced Topics (Really!)
Before you create a topic:
Always search for duplicates or other similar topics before making an umbrella topic, e.g., “The Mac Topic”.

Is it about something you are planning on making but haven't made yet? If so, please wait to post until you have created a working prototype. This is a key factor to keeping the ATs as clean as possible.
The ATs aren't technical support. It is perfectly valid to ask questions about things related to programming, but not issues with external websites, apps, or devices. Most sites have their own support system; try asking there!
Is it related to something you are making in Scratch? (This includes OSes and other Scratch projects) If so, please post in Collaboration, Show and Tell, or another similar forum.
Is your topic questionably “advanced”? Try browsing the other forums to see if your topic fits better in one of those.
Issues with Scratch itself should be put in Bugs and Glitches.

Before you post: Is what you're posting likely to start an argument or derail the thread (e.g., browsers, operating systems)? If so, please re-think your post!

lolecksdeehaha

Here's my website so far, here's some links (working on some)
Home
Projects
404

Beep boop. I am a robot, and this action was performed automatically. If you have any concerns, please contact the owner of this robot.

ing season coming “soon”

I'm the founder of Forumoji, the source of all those neat forum emojis you occasionally see (the ones not in the default menu).

Maximouse

skymover1239 wrote:
Maximouse wrote:
skymover1239 wrote:
I like UI design as well. I've heard that the new design trend now is Claymorphism. It's kinda cool, but seems like it would be hard to make apps with alot of elements close to each other.
Now I really can't understand why people called the Scratch 3.0 design childish when it came out.

Why does Claymorphism design seem like it's childish to you?

The shapes of elements and the large shadows and gradients make things look like they're meant to be toys. That can be a good thing if you want a website to appear playful, but I don't think it's suitable for general use.

skymover1239 wrote:
LegoManiac04 wrote:
I feel like it would be a pain to style with just CSS though.
It's actually kinda of easy to do with CSS. Just look Claymorphism CSS, and you should find something.

That's probably an approximation without the proper shapes – or it uses embedded SVGs, but that isn't “just CSS”.

This is Maximouse's signature. Learn more about signatures.

MagicCrayon9342

Rounded corners are today, sharp corners are yesterday! (i mean 2 years ago)

MagicCrayon9342

New and improved card code

Before

.card-left {
  float: left;
  background-color: white;
  border-radius: 5pt;
 ... forgot the rest. there's also code for middle and right

After

.card { background-color: white; color: black; padding: 5pt; border-radius: 15pt; opacity: 85%; padding:2rem; margin: 0.5rem; /*width: 200pt; height: 100pt;*/ display: inline-grid; grid-column-gap: 50px; grid-row-gap: 50px; grid-row-start: 1;
    grid-row-end: 3; }

Last edited by MagicCrayon9342 (Jan. 12, 2022 21:56:38)

MagicCrayon9342

LegoManiac04 wrote:
skymover1239 wrote:
I like UI design as well. I've heard that the new design trend now is Claymorphism. It's kinda cool, but seems like it would be hard to make apps with alot of elements close to each other.
It looks really interesting, almost kinda like the Wii UI xD
I feel like it would be a pain to style with just CSS though.
—

Thoughts on rounded corners?

Wii UI has aged pretty well in my opinion…

Discuss Scratch