How do you design the UI for websites or apps?
Hey devs,
Naively I always think that I'm able to create a good looking website but invariably the result is not very good. I'm mainly asking about aesthetics.
I purchased TailwindUi when it came out and it's been great experience. It reduces the amount of decisions I need to make.
What's your strategy to create good looking websites / apps?
Do you shop for themes or UI kits? DIY? Use the same thing over and over?
Thanks.
I am not a designer and probably never will be so take my opinion with a grain of salt.
As a Dev, I always try to avoid the not-invented here syndrome aka if somebody has done it(usually better than me), then I use it.
That includes frameworks for the UI. You know the ones, Bootstrap, Material, Foundation.
I tried the 3 of them and despite giving them a fair go, I always ended with UIs that were uninspiring and boring.
Tailwind changed all of that. For once I realized that I was able to code something that looked half decent. I started by trying to recreate a few webpages that I really liked and then created my own.
Don't get me wrong , Tailwind will not turn you into a design god from one day to the next, it will however give you the tools to actually express yourself and give your site the vibe that you are looking for.
If you then, pair Tailwind with a few design courses, you can start creating UIs that are intuitive and beautiful.
I am still going to that process myself.
You also need to change your mindset. Instead of looking at a webpage and saying: that's a great webpage, and move on, try to analyze your thoughts. Why is this page better than another one? Its is the colors, the layout, the copy?
Try to have empathy for your users. Put yourself in their shoes. Can a user understand what you are trying to convey?
Do they know what this button does? It may be obvious to you but as a professional Dev by day, I guarantee you that users use websites in ways that are unthinkable.
That thing that you thought that would never happen? Yep, it happens. Users find a way and then they adapt to your UI in unimaginable ways.
There is one story I like to tell, it goes like this:
There was this webpage on a site that returned the wrong data. The bug went undetected for a while(think years).
Instead of complaining and filing a ticket, users became used to this and started relying on it as the place where this data was displayed. Keep it mid that it should never have been there in the first place.
After a long while the bug was fixed and all was well. End of story? Not quite.
A few days after releasing the fix , a customer support rep got a call for one user. He claimed that the UI was broken, that he couldn't find the info that he was looking for. It turns out that this bug shaped the behavior of this user and now even though in the minds of Devs the bug was fixed, from the perspective of the user the UI was broken because his data was missing.
You get the gist.
I guess what I am trying to say is that a good design usually strikes balance between intuitiveness, usefulness and beauty.
If you can get that mix right, then you are golden but it will take many years and you ll need to learn and apply what you learn.
In today's world a good designer is a rare gem, that's why they get the big bucks.
Your designs are not going to be perfect and that is ok. Keep working on them, iterate, try something crazy. It might just work!
Awesome. Thanks so much for that. That story is spot on.
I agree with your analysis of breaking down good design and try to understand the decisions that were made.
My question was more in the likes of your go-to starting point for design. The same way Devs could start writing an application from scratch but instead use a framework like rails, laravel or even something not as complete like express or flask. To add to that, most of us will have a preferred infra stack, databases, auth system, cdn, etc.
When a dev starts something new it has a big head start and most likely the stack might not be the perfect match to the specific problem but the combination of the tools and your skills is at least in the beginning.
TailwindUI may provide that for me. I have something to start with and then iterate based on my needs. But the baseline is there, defined by someone who understands the problem, the ways to solve that problem and has an eye for aesthetics.
for improving your skills my favorite resource is: https://www.refactoringui.com/
Love buying themes. For your landing pages you can generally find some that look great with no coding required. For your app it's a little harder, there never seems to be a component library that does 100% of what your app needs, so you always have to do some styling yourself.
My approach is usually to collect a bunch of sample sites that have an aesthetic that I'm going for, and then right click -> inspect to see how they did it. I don't copy their actual CSS since that might be infringement, but it's just helpful to see what colors, fonts, and CSS rules they are using.
Buying that book is on my to do list for a long time. I should just buy it (and will).
Great to know. Where do you usually buy themes?
themeforest.net is the one I've used the most, their catalog has a ton of stuff (and it's not just Wordpress themes)
For landing pages you can do also pretty well with webflow.com and a paid theme.
Hey Antonio,
I usually use tailwindcss, if I need something quickly I search for that online, there are tons of free component maids with tailwind out there, that's fantastic.
Anyway, the important step for me, as a frontend developer without UI skills, was to take some courses about UI/UX, highly recommended
Here are some resources I recommend:
https://uxcademy.com
https://designcode.io
https://shiftnudge.com
https://www.studentswho.design
https://www.notion.so/3-Week-Course-Open-Source-ac8f9fa74ac9448e8cc41caf747c821b
https://university.webflow.com
Thank you for sharing these. I'll check them out. Really need to up my skills.
Most of the learning / training I've done has been more focused on UX. When I get to UI I'm stuck with basic shapes, colors, contrast, white space and so on. Leaving the design bare bones and dry.
How do you start your designs? Do you start from a template? Design components, pages, from blank?
I feel your same pain actually, UI is a complex topic, especially for a tech-oriented person.
I start designing features, not pages, on a blank canvas to avoid distractions, in a minimal way and with many iterations on it.
I suggest not focus on color and contrast initially, using a different version of the same color, like gray, should be enough, it will be easier to change it later when you have already defined the whole design.
Just use different thicknesses to create a hierarchy in your design, highlighting what is important at a first glance and what is not.
Try to not stuck on “implementation details” first, don’t think about pages, navigation bar, menu, catchy details that are not essential.
They will come next if you need them.
Think about algorithms, you do not start from how the algorithm connects to the other codebase, you (usually) start with a bottom-up approach, writing bad code, horrible variable names, and so on.
Then, iteration by iteration, you’ll get something that satisfies you.
I forget to mention the most useful resource I’ve read, is refactoring UI book (specifically created for developers 🙃)
Thanks. I definitely need more iteration on the design process.
Hey @ameneres
I love tailwind myself, but I'm literally writing a tool at the moment that can help developers creating landing pages in seconds ( I hope).
It uses React + Tailwind and hopefully might be able to help you?
It will be free to use, let me know if it can help?
https://gitpages.app
Great work!!! Looks awesome.
I'm currently working - idea phase still - on a b2c app for a non-technical crowd but I'll take a closer look at it.
Cool yeah, guess there is no reason why you couldn't use it for that, but yeah good luck with your venture!