Discuss Scratch

MagicCrayon9342
Scratcher
1000+ posts

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

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)


Tired of the mainstream browsers being so darn slow, taking so much RAM on your super old laptop. Well, Catalyst is the solution. It is a zero compromise browser that will run on anything! Available for Windows, MacOS, and Linux! It is super fast and customizable with a fresh and modern UI!!!.

Always use the latest version of an antivirus. To get the latest security and protection, it is also recommended to use the latest version of MacOS or one that get's security patches. Update your software or you will regret it, and you will have several risks waiting for you.

MagicCrayon9342
Scratcher
1000+ posts

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

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)


Tired of the mainstream browsers being so darn slow, taking so much RAM on your super old laptop. Well, Catalyst is the solution. It is a zero compromise browser that will run on anything! Available for Windows, MacOS, and Linux! It is super fast and customizable with a fresh and modern UI!!!.

Always use the latest version of an antivirus. To get the latest security and protection, it is also recommended to use the latest version of MacOS or one that get's security patches. Update your software or you will regret it, and you will have several risks waiting for you.

skymover1239
Scratcher
100+ posts

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

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.


Featured projects

Katana a HTML Renderer - A python app the renders HTML.
AquaCSS - A CSS framework that brings modern design to your website.
Ink - A online word processor with no server involved.

Select some text, then Shift + Down to the rest of my signature.





Me -2022 wrote:

If you are going to criticize something, do so constructively.






Languages I like: HTML,CSS, JavaScript, Python,Bash

Languages and Frameworks I dislike
Batch, Java C/C++ TailWindCSS
LegoManiac04
Scratcher
1000+ posts

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

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
Scratcher
1000+ posts

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

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-
Scratcher
1000+ posts

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

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.

Male | 14 | Flask | Scratch | Pygame | Christian
Empires of Scratch Mincraft server (bedrock and java vanilla survival)
god286
Scratcher
1000+ posts

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

-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


                 _ ____  ___   __   
__ _ ___ __| |___ \( _ ) / /_
/ _` |/ _ \ / _` | __) / _ \| '_ \
| (_| | (_) | (_| |/ __/ (_) | (_) |
\__, |\___/ \__,_|_____\___/ \___/
|___/
^ inspired by @Chiroyce, made with figlet


Maximouse
Scratcher
1000+ posts

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

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
Scratcher
1000+ posts

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

-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


| Boy | 13 | Python | ATer |  Tech | Cars | Procrastinator | Forums | Cricket | ☁️ Cloud |

5fdb2e83ca5a134289edeb294044abb23578eeb6d0d851cca9dd976b38ec6508


I FOUND IT!!! https://scratch.mit.edu/adminpanel/adminpanel.png


skymover1239
Scratcher
100+ posts

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

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?



Featured projects

Katana a HTML Renderer - A python app the renders HTML.
AquaCSS - A CSS framework that brings modern design to your website.
Ink - A online word processor with no server involved.

Select some text, then Shift + Down to the rest of my signature.





Me -2022 wrote:

If you are going to criticize something, do so constructively.






Languages I like: HTML,CSS, JavaScript, Python,Bash

Languages and Frameworks I dislike
Batch, Java C/C++ TailWindCSS
Chiroyce
Scratcher
1000+ posts

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

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”


| Boy | 13 | Python | ATer |  Tech | Cars | Procrastinator | Forums | Cricket | ☁️ Cloud |

5fdb2e83ca5a134289edeb294044abb23578eeb6d0d851cca9dd976b38ec6508


I FOUND IT!!! https://scratch.mit.edu/adminpanel/adminpanel.png


NFlex23
Scratcher
500+ posts

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

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.

King of excessively editing posts
NFlex23
••
Programmer | #TrustTheST

Math • Raspberry Pi • Python • GitHub

Ninetails: a private, fast, and beautiful web browser.
NFlex23
Scratcher
500+ posts

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

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

King of excessively editing posts
NFlex23
••
Programmer | #TrustTheST

Math • Raspberry Pi • Python • GitHub

Ninetails: a private, fast, and beautiful web browser.
Chiroyce
Scratcher
1000+ posts

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

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


| Boy | 13 | Python | ATer |  Tech | Cars | Procrastinator | Forums | Cricket | ☁️ Cloud |

5fdb2e83ca5a134289edeb294044abb23578eeb6d0d851cca9dd976b38ec6508


I FOUND IT!!! https://scratch.mit.edu/adminpanel/adminpanel.png


NFlex23
Scratcher
500+ posts

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

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!

King of excessively editing posts
NFlex23
••
Programmer | #TrustTheST

Math • Raspberry Pi • Python • GitHub

Ninetails: a private, fast, and beautiful web browser.
lolecksdeehaha
Scratcher
100+ posts

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

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




This signature has the ECKSDEE™ badge of approval.
Maximouse
Scratcher
1000+ posts

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

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
Scratcher
1000+ posts

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

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

Tired of the mainstream browsers being so darn slow, taking so much RAM on your super old laptop. Well, Catalyst is the solution. It is a zero compromise browser that will run on anything! Available for Windows, MacOS, and Linux! It is super fast and customizable with a fresh and modern UI!!!.

Always use the latest version of an antivirus. To get the latest security and protection, it is also recommended to use the latest version of MacOS or one that get's security patches. Update your software or you will regret it, and you will have several risks waiting for you.

MagicCrayon9342
Scratcher
1000+ posts

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

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)


Tired of the mainstream browsers being so darn slow, taking so much RAM on your super old laptop. Well, Catalyst is the solution. It is a zero compromise browser that will run on anything! Available for Windows, MacOS, and Linux! It is super fast and customizable with a fresh and modern UI!!!.

Always use the latest version of an antivirus. To get the latest security and protection, it is also recommended to use the latest version of MacOS or one that get's security patches. Update your software or you will regret it, and you will have several risks waiting for you.

MagicCrayon9342
Scratcher
1000+ posts

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

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…

Tired of the mainstream browsers being so darn slow, taking so much RAM on your super old laptop. Well, Catalyst is the solution. It is a zero compromise browser that will run on anything! Available for Windows, MacOS, and Linux! It is super fast and customizable with a fresh and modern UI!!!.

Always use the latest version of an antivirus. To get the latest security and protection, it is also recommended to use the latest version of MacOS or one that get's security patches. Update your software or you will regret it, and you will have several risks waiting for you.

Powered by DjangoBB

Standard | Mobile