jonassalen
•
2y ago
senior FED
Designing good UI's is hard. It's also a completely other career.

It's not something you can learn easily, but where experience has a huge impact on your work.

Designing a good UI also is very correlated with UX, usability, accessability, user research, market research,... A good UI is not only a beautiful UI, but so much more.

You should look into courses for UI design. Focussing on a framework is a short term and narrow solution, that can make beautiful UI's, but not per say good and usable UI's.

The best answer right now is: start learning UI design and in a few years you can design good UI's. Or hire an experienced UI designer.



Upvote
71

Downvote
Reply
reply

Award
0 awards

Share
Share

Doctor-Dapper
•
2y ago
Senior React Engineer
Exactly. If you're working as a dev at anything other than a small company there will be people that do this for you. I'm not saying you should give up but also knowing this should make your goals more realistic. If you want to do it well you have to realize you're taking on the skills of 2 or more people.



Upvote
18

Downvote
Reply
reply

Award
0 awards

Share
Share

jonassalen
•
2y ago
senior FED
To be honest, I am a pure front end developer (focus on HTML, CSS and UX) that took the leap a few years ago and now also do UI design.



Upvote
4

Downvote
Reply
reply

Award
0 awards

Share
Share

MisterMeta
•
2y ago
I'm actually just the opposite. I've commercially done UI work for 6 years and fell in love modifying some html and css. Now I'm a mid Frontend engineer 😂

Nice to meet the other side of the medallion!


Upvote
4

Downvote
Reply
reply

Award
0 awards

Share
Share

Doctor-Dapper
•
2y ago
Senior React Engineer
I'm also a FE dev (react redux here) and I do a lot of UI work as well, but I'm not actually writing the specific CSS or designs. I'm implementing already existing designs with premade components and tweaking from there.


Upvote
3

Downvote
Reply
reply

Award
0 awards

Share
Share

u/techucf avatar
techucf
•
2y ago
I go to dribbble.com to get inspiration for components or specific views. It’s definitely made me a lot stronger on the UI side of things.


Upvote
32

Downvote
Reply
reply

Award
0 awards

Share
Share

u/sheriffderek avatar
sheriffderek
•
2y ago
Typography is at the core. And it’s in the details. The font, the size, the weight, the line height, the space around it. Padding, margin, contrast. It comes down to defining a visual language. Will things have hard angles or roundly corners? Will there be borders? Shadows? What is the core basics and what are a few little visual tricks. And also - the subtle neutrals are really important. The color can just act as an accent.

Want to talk about it sometime and look at an example you have?



Upvote
15

Downvote
Reply
reply

Award
0 awards

Share
Share

gimmeslack12
•
2y ago
CSS is hard
Fonts can make such a difference on pages. I completely agree.


Upvote
10

Downvote
Reply
reply

Award
0 awards

Share
Share

u/bregottextrasaltat avatar
bregottextrasaltat
•
2y ago
"How do I paint a good painting?"



Upvote
27

Downvote
Reply
reply

Award
0 awards

Share
Share

zephyrtr
•
2y ago
Ya unfortunately I think OP sees water and doesn't realize they're looking at an ocean.


Upvote
11

Downvote
Reply
reply

Award
0 awards

Share
Share

rth0mp
•
2y ago
Tell this to a communication design major and see how they respond


Upvote
4

Downvote
Reply
reply

Award
0 awards

Share
Share

gimmeslack12
•
2y ago
•
Edited 2y ago
CSS is hard
Here's my simple approach for building UI's

Good spacing (but not too much!)

Stick to common layout patterns (header/body/footer or header/sidebar/body etc.)

Color palette of 2-4 colors

A subtle font choice (just slightly different than Helvetica or Times-New Roman)

Whatever animation you added in, scale it back and keep those transitions to under 0.1sec.

Really cutting down on clicks or extraneous text and filler on the page (this one is where experience can really help).

CSS layout is going to be a big part of good UI's and when I say good I really am mean simple and efficient. To clarify that further a busy page can be a good UI if the content is efficiently spaced and needs to be there. When you start having words/data/elements on the page that are not needed then the UI is busy but confusing (which bleeds into bad UX).

The CSS part that you really should focus on is your display and position rules and once you master those two rules you will be on your way to wireframing a page that will hold up as you populate your sections. It will scale and adjust nicely on many screen sizes (though mobile is separate from this) as well as on window resizing.

This probably sounds somewhat subjective (and it is!). A good UI is somewhat subjective but, as others have mentioned, the UX will also play into a UI being perceived as "good". For me a simple rule I follow on UX is whether I feel anxiety when using a page; meaning: am I confused, am I lost (navigation issues), can I not get back to where I was, etc.

Experience can really help breed an eye for UI/UX, so get building and share your work. See if you notice trends in feedback that you get.

One last thing, don't think since you're not a "designer" that you can't be good at UI/UX. You certainly can learn from designers, but also it can come down to just observing pages you visit and paying attention to things that resonate with you ("spark joy" is very applicable in this sense).


Upvote
7

Downvote
Reply
reply

Award
0 awards

Share
Share

[deleted]
[deleted]
•
2y ago
You are developer trying to fit in shoes of a designer.

Well, seems like my situation.

Follow best practices of ux design. Like always make sure things align, follow hierarchy, maintain good color contrast, make good use of white space, simple animations, micro transitions, see some UI trends.

You don't need to create something unique, all you need is a decent looking design. So copy any designs you like personally, or just some UX details you felt as a nice touch.


Upvote
11

Downvote
Reply
reply

Award
0 awards

Share
Share

u/frontrangefart avatar
frontrangefart
•
2y ago
Are you trying to design or develop? If develop, use something like this as a base and customize it with your own colors/themes/animations etc. https://www.figma.com/community/file/817436609226882468

Build it out in typescript react and present it in storybook.


Upvote
2

Downvote
Reply
reply

Award
0 awards

Share
Share

chmod777
•
2y ago
Your Flair Here
On what should I focus to make beautiful web apps?

graphic design, typography, human interaction, ui/ux. code is just a way to implement design - not a replacement.


Upvote
2

Downvote
Reply
reply

Award
0 awards

Share
Share

Fannshine
•
2y ago
You can create great UI's by knowing CSS well. However, actually designing a great UI before creating it, is another thing.

For that, I'd recommend either watching some basics of UX, or just look up different webpages that you think look good, and see what they have in common.

But yeah, pure CSS is the way (altough you can get some good design with just using classes in the HTML, and not needing ro understand a lot of CSS at all)


Upvote
2

Downvote
Reply
reply

Award
0 awards

Share
Share

sylvant_ph
•
2y ago
Apparently you have no issue on the technical part. UI apperance depends lot more on artistic qualities. Picking and combining the right colors, measuring sizes, so things sit well together, are visible on the screen etc, covering space, make things comfortable to use and not a mess, stick to a concept. If the site is informative, formal, make things more simple; if its artistic project, put some more colors; you can use the site purpose and add it such flavor.

Colors are the easier tool to make site have a more distinguishable look, or turn into childish apperance. There are different approaches here and you can check some articles on color theory, blending colors, where to use them, right contrasts etc. How to cover space is another matter. How much free space you should actually allow and how much must be filled. If the site lacks text, most likely will want to fill by other means. You could use a background image, in which case you might avoid using too many extra color and make sure the oens you pick fit with the image. You might instead choose to only use pictures, drawings, or photos only on segments where space is blank. Again, use UI colors which will fit with the images. Or you might not use images at all, just plain color combinations to make things fluid. Or black and white, keep things to the point. Use symetry, there should be enough space to distinshing between elements and different content and proper size/emphasis on more important stuff.

You can use some ready templates, on elements positioning and color palettes, until you feel comfortable to come up with ones on your own.


Upvote
2

Downvote
Reply
reply

Award
0 awards

Share
Share

[deleted]
[deleted]
•
2y ago
Instead of focusing on UI, learn how to provide good UX and what makes good UX.


Upvote
2

Downvote
Reply
reply

Award
0 awards

Share
Share

dlford
•
2y ago
Learn a bit about design theory, balance, emphasis, color, empty space, etc.

Next, learn Figma, or another design tool for web, and always do a design before you start on the code, this forces you to focus on only design.

You can get decent at both of these in a few weeks, you won't be winning any design awards but it will greatly improve your ability to make nice looking UIs.


Upvote
2

Downvote
Reply
reply

Award
0 awards

Share
Share

[deleted]
signsignsignsignsign
•
2y ago
Practice making designs using tools like Figma. It’s absolutely amazing for creating mockups.


Upvote
2

Downvote
Reply
reply

Award
0 awards

Share
Share

Brandutchmen
•
2y ago
Try TailwindCSS or another modern css framework for some building blocks, but knowing how to use it will be the most important.

A good (and super quick) read that would help is “Refactoring UI”



Upvote
4

Downvote
Reply
reply

Award
0 awards

Share
Share

u/frontrangefart avatar
frontrangefart
•
2y ago
YES! Refactoring UI!


Upvote
6

Downvote
Reply
reply

Award
0 awards

Share
Share


[deleted]
•
2y ago
u/WadieXkiller avatar
WadieXkiller
•
2y ago
Interested too.



Upvote
2

Downvote
Reply
reply

Award
0 awards

Share
Share

u/canadian_webdev avatar
canadian_webdev
•
2y ago
Go to a website like behance. Search ui design. Copy.



Upvote
0

Downvote
Reply
reply

Award
0 awards

Share
Share

htmlmonkey
•
2y ago
Front-End Manager & Sasstronaut
This is horrible advice. Please don't do this folks. Get inspired, sure. Do no copy.



Upvote
0

Downvote
Reply
reply

Award
0 awards

Share
Share


[deleted]
•
2y ago
u/canadian_webdev avatar
canadian_webdev
•
2y ago
... It's actually great advice. It's meant to draw inspiration and help someone who sucks at UI get better.



Upvote
2

Downvote
Reply
reply

Award
0 awards

Share
Share

htmlmonkey
•
2y ago
Front-End Manager & Sasstronaut
the comment I was replying to said nothing about drawing inspiration to learn and get better. I totally agree with that. Which is why I said "get inspired"... but the post said "copy". Copying isn't the same as taking something you find inspiring and deconstructing it or otherwise iterating on it for the purposes of learning.


Upvote
1

Downvote
Reply
reply

Award
0 awards

Share
Share

u/WadieXkiller avatar
WadieXkiller
•
2y ago
Just check that out and that's amazing, there is plenty of projects to get inspiration from, thanks


Upvote
1

Downvote
Reply
reply

Award
0 awards

Share
Share

ConsoleTVs
•
2y ago
tailwindcss


Upvote
1

Downvote
Reply
reply

Award
0 awards

Share
Share

u/somethinggooddammit avatar
somethinggooddammit
•
2y ago
I'd highly recommend this book: https://hellowebbooks.com/learn-design/

It's one of the few resources I've found on basic design theory written for a developer audience. It's not perfect but will get you started. The author also has some good talks on YouTube identifying the common design "mistakes" many devs make.


Upvote
0

Downvote
Reply
reply

Award
0 awards

Share
Share

InsideRationalA
•
2y ago
I don't think that its bad not to be able create ui ux design for frontender if you haven't learned design. This why there are such professions as ui ux designer or web-designer. Try to find one for cooperation.


Upvote
0

Downvote
Reply
reply

Award
0 awards

Share
Share

alphex
•
2y ago
find a designer
or

use tailwind


Upvote
-1

Downvote
Reply
reply

Award
0 awards

Share
Share

joelypolly
•
2y ago
Start with understanding aesthetic, proportions, and things like rule of thirds. Some of it will be some what subjective but quite a bit of is "rule" based and well studied. This give you a solid foundation of getting feel for what looks right before you dive in to designing your own thing. It will allow you to remix what is available with frameworks without doing clean room designs.

Frameworks for UI are usually pretty opinionated but you can start with the well known ones like bootstrap, ant design and material ui. They don't really push design forward in any real sense but are have well structured components that won't offend people.

Lastly, look at themes (themeforest is a good starting place) people have built where they remix or tweak some of these components for other inspirations. Especially when you are dealing with non-form based UIs its some what non standardized. Sites like dribbble or behance are good options as well but not everything designed there will work well in real life as some of it feels like design for design sake.


Upvote
1

Downvote
Reply
reply

Award
0 awards

Share
Share

[deleted]
[deleted]
•
2y ago
It's a completely different skill from all those technologies you mention, unfortunately. Although using a UI framework helps with making individual things look better, and brings consistency.

Try out a lot of things. And when you see a design you like, try to figure out what makes it look so good, and then see if that's something you can emulate.

But I'm still not good at design either, after lots of years. There were always people who were better at that, while I was better at the actual programming.


Upvote
1

Downvote
Reply
reply

Award
0 awards

Share
Share

u/wuggawugga21 avatar
wuggawugga21
•
2y ago
Several Companies I know that are smaller, have had this issue of hiring coders, but not designers. Their answer was using a framework with limited design options. https://elastic.github.io/eui/#/ is an option for a simplified UI that takes a lot of the design choice away. This is for React specifically.


Upvote
1

Downvote
Reply
reply

Award
0 awards

Share
Share

u/ohlawdhecodin avatar
ohlawdhecodin
•
2y ago
Copy from good UIs that you can find online.

Being good takes its time. And you also need an eye for typography, spacing, colors, alignments and much more.


Upvote
1

Downvote
Reply
reply

Award
0 awards

Share
Share

[deleted]
Jkirpalani
•
2y ago
The first step is to familiarize yourself with beautiful UIs. Look at a ton and see what makes them beautiful. There are a lot of different "styles." Once you find some that you like, try to build them. It may seem daunting, but try break it down into small pieces.

There are a ton of youtubers that teach how to build beautiful UIs.


Upvote
1

Downvote
Reply
reply

Award
0 awards

Share
Share

u/thedeadsigh avatar
thedeadsigh
•
2y ago
learning design and good design at that is literally a field and an art in and of itself. don't feel bad, most programmers and software developers aren't very good at creating even good UI or UX. that's why companies hire teams of designers to figure out the UX and UI so you don't have to.

i feel like i don't have a great answer to this, but my answer would be to go online and search "best website design" or something like that. they have websites that are just archives of really cool looking websites. look at all these sites and get an understanding for what makes them seem cool/elegant/beautiful/etc. the only way to get good at it is to literally study it. see what other designers and developers are doing and practice by recreating what they do. over time you'll find you have a better sense of what's good and bad. i'm no designer, but after many years of working as a FED i feel like i can at least put together a modern looking splash page or build a modern looking component. it comes with time. and even in scenarios where i'm not responsible for design i'm still able to give constructive criticism to a designer based on what i know about UI/UX and my experience as a developer/user.


Upvote
1

Downvote
Reply
reply

Award
0 awards

Share
Share

Ser_Drewseph
•
2y ago
I could be misinterpreting what you’re asking here, but it sounds like what you need isn’t a technical skill, it’s design skill. Sure you can implement whatever you want with react and css or some css library/framework, but figuring out what that thing should look like is hard. I recommend taking a class about the principles of art and design, either at school or on something like frontendmasters.com. You’ll have a better sense for proportions, use of white space, color theory, and maybe even fonts and layouts if it teaches elements of digital design.


Upvote
1

Downvote
Reply
reply

Award
0 awards

Share
Share

[deleted]
[deleted]
•
2y ago
Copy and tweak, copy and tweak, etc


Upvote
1

Downvote
Reply
reply

Award
0 awards

Share
Share

Radinax
•
2y ago
Bro that is up to the designer not the developer


Upvote
1

Downvote
Reply
reply

Award
0 awards

Share
Share

Marble_Wraith
•
2y ago
How do I learn to make them look good? Is it just good old CSS? Is there any other framework/library that I should focus on? As of right now I am fairly confident with React, JS, HTML, python, sql, express.

These are implementation details, they are how you make a browser show something. But that sounds like it's not what you're struggling with.

I can make pretty make much any web app I can imagine(almost) but they look like a child put them together(though they do work lol).

This isn't how to make a browser show something, it's being creative and coming up with what to make the browser show in the first place.

Recommendation
There are different places to start in this area, but i'll talk about how i progressed in learning that worked for me.

You just like everyone else, can probably already recognize good / bad design aesthetic just by observation. What people can't do without study, is justify why something is good / bad. I'm not talking about the obvious things like "that isn't aligned", i mean things like: "why a blue element over here, compositionally is bad"

For that, at a minimum, you need a conceptual understanding of graphic design and the vocabulary (syntax) to match it. In the context of web this would be UI/UX and content creation. Examples:

Color?

Layout vs Composition?

Typography?

Fidelity vs Aesthetics?

Shapes vs Forms? (what is depth?)

Branding?

etc

Some sound trivial and even a little childish, but you can get surprisingly deep when you consider these things through the lens of other subjects like physics, math, psychology / marketing, and culture / history, and is how you derive some of the more UX-ey subjects e.g.

SEO

Fitts's Law

Images vs Video (when's it appropriate to use?)

Game theory (i.e. give users dopamine hits)

Dark Patterns

Primal vs Emotional vs Rational (brain)

This should get you to the point where you can look at a page (including your own) and expound on the specifics of why it's bad / good, and with this self-critique, improve incrementally.

OK cool, but that's about evaluating things that are already implemented, how do you dream them up in the first place?

Once you've got the vocabulary, search up brainstorming techniques / workflows.

Common Techniques: Mind Mapping / Associated words, Provocative actioning, Pessimist vs Optimist, problem tree diagrams, user stories, etc.

There are different workflows that can fit these techniques inside them, but one of my favorites is "the disney method", which is where you split the perspective into different conceptual demographics, and think about how they'd respond to different aspects.

Many things in this area of brainstorming will overlap with psychology / marketing, so you may want to use that as a pivot point i.e. if you get fatigued learning about design concepts (list above) you can flip over to learning about / practicing brainstorming.

based on that, make detailed prompt for ai model for creating amazing website, website should contain player stats page (name,kills,deaths etc.), page with server list (name,ip,players,map), prizes page (list of 3 prizes that top3 players will get). Website design should be modern, in nice dark theme or grey theme. Design should not be simple like website from 90s.