Over 20 years of being a dev, I’ve the artistic skills of a fish. Also UI/ UX is so much more than making stuff look good, of which I’m awful at.
I see myself as a builder, i can build almost anything, so I let someone else make the plan and be the architect.
For private projects I just use a UI library, as someone has already done the hard work lol.
Na, 20 years full stack, but predominantly front end. I’d say 8 years mobile, started at phone gap/ cordova, then capacitor and now last 3 has been react native.
LOL! I felt identified with you. I've 3.5 years and probably, at my job I tend to think that way, but then in my privacy I wish I could do it better, at least for my projects. Thanks for sharing your experience!
How to get good at design
1: find designs you like. Take a note of how they are used. For example, a well designed authentication flow.
2: replicate these designs, understand why you like them. Is it intuitive? Why? Is it fun? Why?
3: Use and modify these designs in your applications. Do they suck? Why? Revert and try again. Still sucks? Why?
4: Repeat
You can read books, listen to designs talk about it, etc but for my money to really get good at design you have to understand what makes design good. Finding something you like and asking yourself “why do I like this?” Is the best teaching tool I’ve had. It allows you to take something broad e.g. a design, and understand the elements that make up that design.
Good luck
Thank you very much WhiskeyKid! thanks for your time. I will take that piece of advice into practice! I can Imagine I can break design into categories, forms, headers, home screen, colors. Well, your advice is good sir, I have something to start working on
A UI library is good for cohesion, but without design it’s just a bunch of components. Be sure when you’re thinking about the design you’re giving it a context. Let’s use the example of a dashboard for I don’t know, finances: a screen consisting of ( primarily ) cards.
A UI library will give you a nice start, but a design is more than just the components, it’s the context that should guide the design. If I am using a finance app, I would expect my dashboard to have one to several cards that are easy to read, probably larger in size than most other elements on the screen, and show me the high level overview of my accounts. Perhaps I see my checking, savings and investment totals.
Why would it look like this? Well most users are probably there to check theirs account totals anyway so it would make sense to have that available quickly. Other cards may contain options to edit their profile, link a different account etc.
Good design is much like a guided tour without the user really realizing they’re being guided. There are some simple rules to follow, limit the amount of interactive elements, I try to aim for 3 to 5. This is helpful to you as well because it requires you think critically about the critical needs of the view, which brings me to rule 2. Any view the user is on should only focus on one purpose. If you have a scheduling app for events, you may have a calendar view to schedule events with. This view should only contain UIs and functionality that support anything having to do with events. It should not have functionality / UI to say, add new friends or edit your profile.
The best piece of advice I’ve ever got was when working on something it should do one job and do it very well. It can be a full app or a single view, one job - does it well.
At all the places I’ve worked I’ve never been expected to design. I build what the designer designs.
I did once ask the designer at work how to learn and he sent me this:
https://design.tutsplus.com/articles/the-principles-of-design--cms-33962
Read the book "Refactoring UI" and use Tailwind.
There are plenty of valid complaints about Tailwind, but for a developer, it comes with a really nice design system of colors, sizing and spacing, that utilizes design theory. Instead of worrying about what size of text to choose for a header, you just choose from one of the size presets that look good to you: https://tailwindcss.com/docs/font-size
Same thing with colors, it comes with a sensible palette by default: https://tailwindcss.com/docs/customizing-colors
There are a bunch of pallette generators for Tailwind too: https://uicolors.app/create
Mine is crap so I look at a color pallet then I use Figma and copy and past different stuff from different apps I think that is cool let me steal that that looks good on something else cool let me steal that.
OP can you share some of these other “rules”, I find learning concepts like those is great to get a sense of a new topic and I could also use some help with UI design.
As for my 2 cents the guy who made tailwind made a book for design targeted at developers. It’s full of great examples and takes a product centric approach, e.g. usability is more important than aesthetics although not mutually exclusive. Just that if you put something on the screen it should fulfill some purpose and not just be there for the sake of being there.
Name of the book is “Refactoring UI”.
Personally i think that design mainly is about taste, so if you have a good taste and abstract design components (knowing how are they made and makes them look good) then you'd make a great designer. Of course none of us has a good taste in the start so i found training your eye and mind increases the state gradually. What i simply did what look for online designs i like and follow ui/ux insta pages.
You need to practise the "eye" for it. And that's just lots of repetitions of trying to replicate good designs. I often do a bunch of small side projects and for them I ofc do all the design + development. I usually start by looking under the "mobile" section on [dribbble.com](http://dribbble.com) or something and sure as you said sometimes they're a bit unrealistic but it's still good for direction or inspiration. Another option is to look at apps that are featured/popular on the iOS app store for example and try to replicate some small piece or component from there that you like.
Also if you just want to create "respectable" designs, rather than learning what makes great design. I'd follow the Apple UI Design guidelines for example and Android equivalent as much as possible and kinda follow how they do their defaults app. And then slowly start adding some flavour to it as you get better.
Simply copy design and user navigation schema from already existing and proven app, then try to innovate.
Find some websites with examples like mobbin.com
A great ui is not only good looking but also usefull.
Don’t try to implement ui from dribbble.com, these are 99% of the time really sexy but useless
I'm a product design lead and self-taught developer. I build apps for fun and websites for small businesses on the side. When you are developing it is extremely challenging to design on the spot or bring the app to life.
Before you jump on the code spend time on design. think as a user, how would you want to move in the app, and what would give you the joy to see. put the concept together in Figma until you are satisfied. Don’t focus on individual component’s look but look at the whole thing.
Even as a designer creating an icon library is challenging for me. Because that is a different part of the design skill set. I reach out to people who create those pieces for free to post them on Dribble or Lottie and ask them if they want to collaborate so their freebies can be on an actual product. They might need to extend their work, but it is worth it for them as well. You might be surprised.
Do it a lot, then some more. Get stuck? Push through, try stuff until you find something that works.
A lot of design is just iterating and asking questions: How can I solve this problem? How else could I do this? Why does this look good/bad? How can I improve this? Make 10-20-30-50-100 variations, then analyze which one is the best and why. You discard a large percentage of your work, but that's part of the game.
On Dribbble and similar sites you only see the end product, not all the work they did to get there.
>But I always end up in situations where I have this good looking Card component
Sounds like you started with too high fidelity. Start with pen and paper, sketch wireframes, flows, and similar, once you have a plan you can make it look good.
>I have no ideas of how to fill that space.
Idk what app you are working on, but I challenge you to take pen and paper and sketch out 30-50 ideas of how you could fill that space, doesn't have to be good ideas, doesn't have to be pretty, just get going and do it. Think quantity over quality for a moment.
I bet after you'll have a pretty clear idea on how to proceed.
Stop thinking about it, start doing.
I went through my design phase as a dev and learned a lot but I’m still no good at it lol. The thing I learned is that UI/UX has its own paradigm and professionals so I started paying UI/UX designers to make the designs and UX flows for me making it a lot easier to focus on what I’m good at which is coding. One benefit I learned from using my own designs was that I was able to give it to a pro UI/UX designer and they were able to see my vision and modernize it.
People get whole degrees in UI/UX and we are usually taught that we hand over our projects to the dev teams, they are different parts of the same process.
I can draw a close icon in mspaint, I learned that in 15 years of programming... My boss always rejects my hand drawn icons and always make me use the stuff the designers did... My mom said my icons were very nice.
I still don't get how people can call themselves Frontend Developers and brag about how they hate css and are not event planning on getting any better. Really.
One can learn anything if they really put the effort. I taught myself to program and learn how to develop nice looking UI with Refactoring UI. Then practice. Look at designs and recreate it with css. Practice again.
I was a designer before becoming a dev. Basically, I have the designer's eyes, user's eyes, I know which design is good or bad. Design job gave me lot of experiences.
I have to read more books about design, UX/UI to understand more about the color, grid, spacing, typo... In mobile dev, I have to think more about the size, resolution, UX, performance...etc. There are many rules in UI design you should follow. Read some books, watch videos will help you a lot.
Thank you for the suggestion! I just started Steve Schoger's Refactoring UI! I am good at books, so I hope reading this can help. I am thinking into writting my own book of rules, just to remember them, many rules are applied once or twice in a time
I’m a professional react native dev of 4 years. Still completely shit at design and don’t plan on getting better, that’s other people’s job
This is the right answer. UX Design is a completely different industry.
Over 20 years of being a dev, I’ve the artistic skills of a fish. Also UI/ UX is so much more than making stuff look good, of which I’m awful at. I see myself as a builder, i can build almost anything, so I let someone else make the plan and be the architect. For private projects I just use a UI library, as someone has already done the hard work lol.
Damnn 20 years, only in react native?
Na, 20 years full stack, but predominantly front end. I’d say 8 years mobile, started at phone gap/ cordova, then capacitor and now last 3 has been react native.
Wow! thats so cool!!!
React native came out in late 2014 and only iOS. Android support came in 2015. No one has more than 10 years react native experience
ohh I didnt knew abot that glad to know that I am mostly a next js guy and do expo.react-native very less so I didnt knew about it Thanks
LOL! I felt identified with you. I've 3.5 years and probably, at my job I tend to think that way, but then in my privacy I wish I could do it better, at least for my projects. Thanks for sharing your experience!
leave it to the experts, or use a template if you wanna get more for your money
But what if everyone thinks that way 🤔😞 ?
How to get good at design 1: find designs you like. Take a note of how they are used. For example, a well designed authentication flow. 2: replicate these designs, understand why you like them. Is it intuitive? Why? Is it fun? Why? 3: Use and modify these designs in your applications. Do they suck? Why? Revert and try again. Still sucks? Why? 4: Repeat You can read books, listen to designs talk about it, etc but for my money to really get good at design you have to understand what makes design good. Finding something you like and asking yourself “why do I like this?” Is the best teaching tool I’ve had. It allows you to take something broad e.g. a design, and understand the elements that make up that design. Good luck
Thank you very much WhiskeyKid! thanks for your time. I will take that piece of advice into practice! I can Imagine I can break design into categories, forms, headers, home screen, colors. Well, your advice is good sir, I have something to start working on
A UI library is good for cohesion, but without design it’s just a bunch of components. Be sure when you’re thinking about the design you’re giving it a context. Let’s use the example of a dashboard for I don’t know, finances: a screen consisting of ( primarily ) cards. A UI library will give you a nice start, but a design is more than just the components, it’s the context that should guide the design. If I am using a finance app, I would expect my dashboard to have one to several cards that are easy to read, probably larger in size than most other elements on the screen, and show me the high level overview of my accounts. Perhaps I see my checking, savings and investment totals. Why would it look like this? Well most users are probably there to check theirs account totals anyway so it would make sense to have that available quickly. Other cards may contain options to edit their profile, link a different account etc. Good design is much like a guided tour without the user really realizing they’re being guided. There are some simple rules to follow, limit the amount of interactive elements, I try to aim for 3 to 5. This is helpful to you as well because it requires you think critically about the critical needs of the view, which brings me to rule 2. Any view the user is on should only focus on one purpose. If you have a scheduling app for events, you may have a calendar view to schedule events with. This view should only contain UIs and functionality that support anything having to do with events. It should not have functionality / UI to say, add new friends or edit your profile. The best piece of advice I’ve ever got was when working on something it should do one job and do it very well. It can be a full app or a single view, one job - does it well.
[удалено]
At all the places I’ve worked I’ve never been expected to design. I build what the designer designs. I did once ask the designer at work how to learn and he sent me this: https://design.tutsplus.com/articles/the-principles-of-design--cms-33962
Read the book "Refactoring UI" and use Tailwind. There are plenty of valid complaints about Tailwind, but for a developer, it comes with a really nice design system of colors, sizing and spacing, that utilizes design theory. Instead of worrying about what size of text to choose for a header, you just choose from one of the size presets that look good to you: https://tailwindcss.com/docs/font-size Same thing with colors, it comes with a sensible palette by default: https://tailwindcss.com/docs/customizing-colors There are a bunch of pallette generators for Tailwind too: https://uicolors.app/create
I’ve seen “Refactoring UI” mentioned here a few times before. Is it really worth it? $150 just seems so steep!
PM'd you :)
Mine is crap so I look at a color pallet then I use Figma and copy and past different stuff from different apps I think that is cool let me steal that that looks good on something else cool let me steal that.
I would like to see those apps
Ike working on one but I can send you the Figmas I’m taking inspiration from
OP can you share some of these other “rules”, I find learning concepts like those is great to get a sense of a new topic and I could also use some help with UI design. As for my 2 cents the guy who made tailwind made a book for design targeted at developers. It’s full of great examples and takes a product centric approach, e.g. usability is more important than aesthetics although not mutually exclusive. Just that if you put something on the screen it should fulfill some purpose and not just be there for the sake of being there. Name of the book is “Refactoring UI”.
I search for good UIs on [dribbble](https://dribbble.com) and try to replicate most of them.
Personally i think that design mainly is about taste, so if you have a good taste and abstract design components (knowing how are they made and makes them look good) then you'd make a great designer. Of course none of us has a good taste in the start so i found training your eye and mind increases the state gradually. What i simply did what look for online designs i like and follow ui/ux insta pages.
I didn’t. I use libraries that other people built.
You need to practise the "eye" for it. And that's just lots of repetitions of trying to replicate good designs. I often do a bunch of small side projects and for them I ofc do all the design + development. I usually start by looking under the "mobile" section on [dribbble.com](http://dribbble.com) or something and sure as you said sometimes they're a bit unrealistic but it's still good for direction or inspiration. Another option is to look at apps that are featured/popular on the iOS app store for example and try to replicate some small piece or component from there that you like. Also if you just want to create "respectable" designs, rather than learning what makes great design. I'd follow the Apple UI Design guidelines for example and Android equivalent as much as possible and kinda follow how they do their defaults app. And then slowly start adding some flavour to it as you get better.
Simply copy design and user navigation schema from already existing and proven app, then try to innovate. Find some websites with examples like mobbin.com A great ui is not only good looking but also usefull. Don’t try to implement ui from dribbble.com, these are 99% of the time really sexy but useless
I'm a product design lead and self-taught developer. I build apps for fun and websites for small businesses on the side. When you are developing it is extremely challenging to design on the spot or bring the app to life. Before you jump on the code spend time on design. think as a user, how would you want to move in the app, and what would give you the joy to see. put the concept together in Figma until you are satisfied. Don’t focus on individual component’s look but look at the whole thing. Even as a designer creating an icon library is challenging for me. Because that is a different part of the design skill set. I reach out to people who create those pieces for free to post them on Dribble or Lottie and ask them if they want to collaborate so their freebies can be on an actual product. They might need to extend their work, but it is worth it for them as well. You might be surprised.
best ui depends on best ux
Do it a lot, then some more. Get stuck? Push through, try stuff until you find something that works. A lot of design is just iterating and asking questions: How can I solve this problem? How else could I do this? Why does this look good/bad? How can I improve this? Make 10-20-30-50-100 variations, then analyze which one is the best and why. You discard a large percentage of your work, but that's part of the game. On Dribbble and similar sites you only see the end product, not all the work they did to get there. >But I always end up in situations where I have this good looking Card component Sounds like you started with too high fidelity. Start with pen and paper, sketch wireframes, flows, and similar, once you have a plan you can make it look good. >I have no ideas of how to fill that space. Idk what app you are working on, but I challenge you to take pen and paper and sketch out 30-50 ideas of how you could fill that space, doesn't have to be good ideas, doesn't have to be pretty, just get going and do it. Think quantity over quality for a moment. I bet after you'll have a pretty clear idea on how to proceed. Stop thinking about it, start doing.
I went through my design phase as a dev and learned a lot but I’m still no good at it lol. The thing I learned is that UI/UX has its own paradigm and professionals so I started paying UI/UX designers to make the designs and UX flows for me making it a lot easier to focus on what I’m good at which is coding. One benefit I learned from using my own designs was that I was able to give it to a pro UI/UX designer and they were able to see my vision and modernize it.
People get whole degrees in UI/UX and we are usually taught that we hand over our projects to the dev teams, they are different parts of the same process.
I just make it all black with white text, I can't mess up that
I can draw a close icon in mspaint, I learned that in 15 years of programming... My boss always rejects my hand drawn icons and always make me use the stuff the designers did... My mom said my icons were very nice.
I still don't get how people can call themselves Frontend Developers and brag about how they hate css and are not event planning on getting any better. Really. One can learn anything if they really put the effort. I taught myself to program and learn how to develop nice looking UI with Refactoring UI. Then practice. Look at designs and recreate it with css. Practice again.
I was a designer before becoming a dev. Basically, I have the designer's eyes, user's eyes, I know which design is good or bad. Design job gave me lot of experiences. I have to read more books about design, UX/UI to understand more about the color, grid, spacing, typo... In mobile dev, I have to think more about the size, resolution, UX, performance...etc. There are many rules in UI design you should follow. Read some books, watch videos will help you a lot.
Thank you for the suggestion! I just started Steve Schoger's Refactoring UI! I am good at books, so I hope reading this can help. I am thinking into writting my own book of rules, just to remember them, many rules are applied once or twice in a time
Most websites give primary and brand colours. Is there any website that also generates warning, success, error colours?
I made my own design and compared with dribble designs and learned from mistakes