If I could give one piece of advice for technical developers it’s that design isn’t all about the way it looks, it’s about the way it works.
To expand on that, it’s how the pieces fit together within your set of constraints. There’s a LOT in common with what makes code beautiful or not. You get to the essential; nothing more, nothing less. This doesn’t mean “minimalist” , per se — just be wary of ornamentation that doesn’t add value.
A design can be award-winning without much “flash”. A readable font. A thoughtful, consistent, grid, that gives the content some air. Color choices based on accessibility, constrained to a palette that has some meaning for the project, etc.
Don’t be afraid to learn about design! Look to resources like IDEO, who take a principled approach to design that’s not superficial. Think about the field of Architecture, where engineering and aesthetics have been combined for centuries — and where the same concerns of “essential” vs “ornamental” remain an active area of debate to this day.
lots of whitespace and "air" has become especially fashionable in the past many years. it makes design easier in some ways without necessarily pushing it forward. yes, it forces more conscientiousness of essentiality and contribution of each element (a good thing), but it's also used as an ipso facto justification to resist change and meeting needs (a bad thing).
i love seeing designs that are intricate yet coherent. that seems to push boundaries more than "air". that approach seems more challenging than "cut as many elements as necessary to achieve a desired white space ratio".
> design isn’t all about the way it looks, it’s about the way it works.
That's a dangerous thing to say, I think. Because the way it looks is the way it works.
A huge part of design is managing the prominence (and presence/absence) of various elements, so people understand what something does, and find it as effortless as possible to find and take the actions they want.
Prominence is managed by relative size, weight, hue, brightness, saturation, shadow, whitespace, opacity, ornamentation, vertical ordering, horizontal ordering, and so on.
All of those things are how it "looks".
Presence/absence is managed by hierarchy, expand, hover, etc.
All of those are also how it looks, by what's removed or shown.
I think I agree with where you're coming from, especially in your last paragraph. I'm just worried that your first sentence is easily misinterpretable as "as long as all the information is on the webpage, fonts/colors/spacing are mostly irrelevant".
I think the problem is also with non-technical people who focus on aesthetics and push technical folks to make the product bloated. Design education would help project managers, and non-tech customers who are requesting that product or feature.
This is such a common problem that there is a meme about it "Can you make it pop a little more?".
Providing advice to technical folks is just a small part of this problem.
I agree with the overall point that design is about more than looks, but my impression is that design as practiced by the IDEO / Stanford d.school / design thinking crowd is a quite different beast from what’s being taught inside most architecture schools.
The former tries to distill design into a largely linear, repeatable process (that can be peddled by consultants, if I’m being a bit cynical), the latter would characterize such approaches as reductionist and limiting.
Dangerous to separate these. Poorly looking sites have poor experiences. Of course, aesthetics are subjective, so I'm speaking generally here.
My philosophy for design is to always, without exception, strive for a good looking and functioning site. You can't have a site that works well that looks like shit. Conversely you can often find sites that look great but are absolutely unusable.
What I particularly like about IDEO is that they hire non designers. It's very possible to have a biologist, historian,and and a designer sitting at one table trying to come up with new concepts.
They sell a (rather expensive) book on web/mobile app design that explains how to build your design system and use it to create great looking apps. They cover all the bases you would expect like fonts, line-heights, colors, shadows, borders, sizing, working with images, visual hierarchy, using white space, etc. etc.
I'm a developer by trade and I work primarily with one other developer, so we end up doing all of our design work. This book really helped us step up our game and gave us some very simple tactics to use to improve our designs. Imho, it was well worth the price.
1+ for the book. It gives enough inspiration for a clean look. The guy also worked together with Adam on Tailwindcss which is a nice class-based css framework which makes designing website a lot of fun. Especially because it gives some “constraints” i.e. only a handful of size options. Makes the whole design more consistent in my opinion.
I used to do a lot of web design back in ~2004-2008 before i became a developer, and while i like that the web nowadays is more accessible the design of today lacks individuality.The brand design is more shaped by the choice of colors and fonts imho.
Another +1 recommendation for the book and related videos. While it has not been a silver bullet (nothing is), it has given me a lot of helpful tools to improve my designs. The book does a good job of filling the "design for engineers" gap that I have observed while trying to find good resources on web design.
Alternatively, just work with a designer. There are thousands of them out there who want to build tech stuff but don't have the skills. They want developers to collaborate with. Reach out to some on social media and you might be surprised how receptive they are.
You don't have to do everything on your own, and you definitely shouldn't compromise on design if you want your project to succeed.
- you may not have the budget for that (small company, student, open source project, side project...)
- you may not be able to find the talent where you are (good designers are not uniformly distributed, and remote may not be possible for you. Source: lived in Africa)
- you may want/need to know the basics to evaluate the work of a designer, hire one or just communicate efficiently with one
- you may just be curious, and want to learn that for you. Or transition to be, you know, a designer :)
> There are thousands of them out there who want to build tech stuff but don't have the skills.
This sounds like a pretty cynical take. I know plenty of designers who want to design for tech, not because they "don't have the skills" to "build tech stuff" but because they have different skills, aka design skills (user research methods, applying UX best practices, visual design, the list goes on). Although many design departments may have originally started under engineering, I like to think that designers have much more to contribute than being developer-wannabes that your comment might imply.
That said, I agree with the rest of what you said! There are lots of designers out there who want a chance to practice their skills, and I encourage everyone to at least get your project design critiqued!
I think most of these resources are for devs who just need something to look good enough. if I'm building a UI for a small project, or even something for my own use, I'm not going to spend money on a designer. I just want a website to tell me two fonts that look nice together.
Hi guys,
Nodesign.dev is a collection of tools and resources for developers who want to make their site look "respectable" without using any design tools...It includes everything from favicon generator , illustrations to CSS frameworks.
Thanks for creating this site. If you'd like to include it, I built MVP.css (https://andybrewer.github.io/mvp/) for this demographic of folks that want a good looking design but don't have design skills themselves.
As a heads up, the site loads with a horrible amount of pop-in. I suggest loading the items in the order you want to display them, so that after the first 6 load, the pop-in is finished, so that the screen will stop flashing.
How will these tools in fact enable a developer to ship a better design? As a developer with limited design skills, I find that the problem is not finding tools, but rather knowing how to use them, eg what font to choose, what color palette to pick etc.
Design is a "talent" the same way software development is a "talent". Some people may have natural abilities, but overall it is something to be practiced and studied if you want to get better at it.
CSS is just a programming language.
I am as talentless a designer as any of you but I stopped reaching to libraries and frameworks to solve my design issues, and started learning modern CSS and some basic design skills.
Lots of good books and web sites, and my personal preference is video courses through Lynda.com, which I get for free through my public library.
I went from software engineer to founder. As part of that journey I had to learn something about design since my co-founder didn't have that skill or interest.
My advice for founders: copy.
Find a design you like, brand colors you like, and just copy it exactly. Colors, shadows, spacing, layout. As long as it is an established brand/company, the UX will be good enough that it won't harm your startup. And that's all you are going for initially: a design that doesn't turn customers away.
Most of my side projects just lay somewhere because I think a good design can make a difference. So this is really great resources.
Does anybody have experience with https://tailwindui.com/. As dev I like the tailwindcss and the founder released this some time ago and I am wondering if it's worth the price.
I'm just in the process from migrating from UIKit to tailwind. So take this with a grain of salt:
Before you get into tailwind-ui, I would start out with the basics of tailwind, which can already take you quite far. I would even say, that using simply tailwind will make your design unique in a way that tailwind-ui won't. That way, while you are in the process of designing your website, you always have the option, to extract your own components and don't fall back to templates which restrict your design.
One video, which was eye opening for me, was watching Adam Wathan rebuild Netlifly from scratch [1]. My takeaway: You don't need fancy ui-components to build something great.
This is awesome. I have been using unDraw and unsplash as well as some other things for my startup (shameless plug: https://makely.me)
Some feedback for the site: make the titles of each product a little more clear. For instance, "Free Stock Photos: High-Res Images for Websites & Commercial Use" doesn't tell me what the website is until I hover over it.
EDIT: Another thing, I was expecting the filters to be additive (i.e.: if I select "Art" and "Fonts", I would expect to see results from each category, instead I get nothing)
Hi, it's great you like your site...Thank you...I had perviously made the filters to be additive but later chose against it....as the the user needed to find the specific thing he is looking for like Favicon && Generators....
Craig Newmark proved that the graphic part of design isn't strictly necessary. But I wonder if that's as true now as it was when he began craigslist in 1995.
One of the most useful design-related tools I've found is this color picker which generates complimentary colors for you based on model of your choice (triadic, analogous, etc.):
I always struggled with picking complimentary colors and found this worked a lot better than most of the pre-defined color palette suggestions out there.
I see plenty of websites claiming to redistribute CC0 images. That can be a legal liability.
I mean there's nothing to stop someone from downloading photos from Flickr and uploading them in their own name to one of those CC0 websites, especially because the latter will usually do no contributor verification at all. But no matter what the website says, you - the person using the image - will be held legally responsible in case it was wrongly promoted as CC0.
FWIW, and since it's a design-oriented site (but maybe it's a pun on the site's name?), the masonry/grid flashes badly on first load on a desktop. I guess it's because of frequent CSS re-layouting as the individual grid cell's content graphics get loaded.
This is fantastic, thank you. I bookmarked it to use when I start my next side project. At work we have a graphic design team to develop assets, but on my own I have no such resource. And I'm beyond terrible at it.
[+] [-] gdubs|5 years ago|reply
To expand on that, it’s how the pieces fit together within your set of constraints. There’s a LOT in common with what makes code beautiful or not. You get to the essential; nothing more, nothing less. This doesn’t mean “minimalist” , per se — just be wary of ornamentation that doesn’t add value.
A design can be award-winning without much “flash”. A readable font. A thoughtful, consistent, grid, that gives the content some air. Color choices based on accessibility, constrained to a palette that has some meaning for the project, etc.
Don’t be afraid to learn about design! Look to resources like IDEO, who take a principled approach to design that’s not superficial. Think about the field of Architecture, where engineering and aesthetics have been combined for centuries — and where the same concerns of “essential” vs “ornamental” remain an active area of debate to this day.
[+] [-] clairity|5 years ago|reply
lots of whitespace and "air" has become especially fashionable in the past many years. it makes design easier in some ways without necessarily pushing it forward. yes, it forces more conscientiousness of essentiality and contribution of each element (a good thing), but it's also used as an ipso facto justification to resist change and meeting needs (a bad thing).
i love seeing designs that are intricate yet coherent. that seems to push boundaries more than "air". that approach seems more challenging than "cut as many elements as necessary to achieve a desired white space ratio".
[+] [-] crazygringo|5 years ago|reply
That's a dangerous thing to say, I think. Because the way it looks is the way it works.
A huge part of design is managing the prominence (and presence/absence) of various elements, so people understand what something does, and find it as effortless as possible to find and take the actions they want.
Prominence is managed by relative size, weight, hue, brightness, saturation, shadow, whitespace, opacity, ornamentation, vertical ordering, horizontal ordering, and so on.
All of those things are how it "looks".
Presence/absence is managed by hierarchy, expand, hover, etc.
All of those are also how it looks, by what's removed or shown.
I think I agree with where you're coming from, especially in your last paragraph. I'm just worried that your first sentence is easily misinterpretable as "as long as all the information is on the webpage, fonts/colors/spacing are mostly irrelevant".
[+] [-] systemvoltage|5 years ago|reply
This is such a common problem that there is a meme about it "Can you make it pop a little more?".
Providing advice to technical folks is just a small part of this problem.
[+] [-] yutopia|5 years ago|reply
The former tries to distill design into a largely linear, repeatable process (that can be peddled by consultants, if I’m being a bit cynical), the latter would characterize such approaches as reductionist and limiting.
[+] [-] ryanSrich|5 years ago|reply
Dangerous to separate these. Poorly looking sites have poor experiences. Of course, aesthetics are subjective, so I'm speaking generally here.
My philosophy for design is to always, without exception, strive for a good looking and functioning site. You can't have a site that works well that looks like shit. Conversely you can often find sites that look great but are absolutely unusable.
[+] [-] denster|5 years ago|reply
I think:
1) Design is like a muscle, you can always develop it
2) Digital experiences [1] are all around us! And they play a more pivotal role in our lives as time goes on.
So, hit the gym (practice) & with time everyone can improve.
[1] As the https://mintdata.com founder here, I'm highly biased -- I'm not a designer but certainly aspire to improve along this dimension.
[+] [-] cosmodisk|5 years ago|reply
[+] [-] dgb23|5 years ago|reply
In fact a UI is a programming language, just a visual, and usually very constrained one (for better or worse).
[+] [-] the_arun|5 years ago|reply
[+] [-] nick-garfield|5 years ago|reply
They sell a (rather expensive) book on web/mobile app design that explains how to build your design system and use it to create great looking apps. They cover all the bases you would expect like fonts, line-heights, colors, shadows, borders, sizing, working with images, visual hierarchy, using white space, etc. etc.
I'm a developer by trade and I work primarily with one other developer, so we end up doing all of our design work. This book really helped us step up our game and gave us some very simple tactics to use to improve our designs. Imho, it was well worth the price.
https://refactoringui.com
[+] [-] j_autumn|5 years ago|reply
I used to do a lot of web design back in ~2004-2008 before i became a developer, and while i like that the web nowadays is more accessible the design of today lacks individuality.The brand design is more shaped by the choice of colors and fonts imho.
[+] [-] jordanmarshall|5 years ago|reply
[+] [-] bdr|5 years ago|reply
[+] [-] woutr_be|5 years ago|reply
[+] [-] d0m|5 years ago|reply
[+] [-] systemvoltage|5 years ago|reply
> Overlapping images is a great way to add depth to an interface and make it look more “designed”.
I don't know if this is sarcasm. No one is asking why do we need to add "depth"? What problem is "depth" of overlapping icons solving?
I would stay away from this.
[+] [-] onion2k|5 years ago|reply
You don't have to do everything on your own, and you definitely shouldn't compromise on design if you want your project to succeed.
[+] [-] BiteCode_dev|5 years ago|reply
- you may not be able to find the talent where you are (good designers are not uniformly distributed, and remote may not be possible for you. Source: lived in Africa)
- you may want/need to know the basics to evaluate the work of a designer, hire one or just communicate efficiently with one
- you may just be curious, and want to learn that for you. Or transition to be, you know, a designer :)
[+] [-] eitland|5 years ago|reply
Unless it is an open source project I feel it would be rude to ask someone to work for free on it.
[+] [-] itsoktocry|5 years ago|reply
How can a person with minimal design skills (ie. me) tell if a designer is any good? I know when I like something, but I can't trust my own taste.
[+] [-] enhdless|5 years ago|reply
This sounds like a pretty cynical take. I know plenty of designers who want to design for tech, not because they "don't have the skills" to "build tech stuff" but because they have different skills, aka design skills (user research methods, applying UX best practices, visual design, the list goes on). Although many design departments may have originally started under engineering, I like to think that designers have much more to contribute than being developer-wannabes that your comment might imply.
That said, I agree with the rest of what you said! There are lots of designers out there who want a chance to practice their skills, and I encourage everyone to at least get your project design critiqued!
[+] [-] schwartzworld|5 years ago|reply
[+] [-] uvic|5 years ago|reply
[+] [-] xiwenc|5 years ago|reply
I can search trough it now via CMD+F, but it would be nice to add a search function showing a list of results. It can be very basic keywords search.
[+] [-] awb|5 years ago|reply
[+] [-] gwbas1c|5 years ago|reply
[+] [-] winkeltripel|5 years ago|reply
[+] [-] uvic|5 years ago|reply
[+] [-] andersco|5 years ago|reply
[+] [-] tekstar|5 years ago|reply
CSS is just a programming language.
I am as talentless a designer as any of you but I stopped reaching to libraries and frameworks to solve my design issues, and started learning modern CSS and some basic design skills.
Lots of good books and web sites, and my personal preference is video courses through Lynda.com, which I get for free through my public library.
[+] [-] rsweeney21|5 years ago|reply
My advice for founders: copy.
Find a design you like, brand colors you like, and just copy it exactly. Colors, shadows, spacing, layout. As long as it is an established brand/company, the UX will be good enough that it won't harm your startup. And that's all you are going for initially: a design that doesn't turn customers away.
[+] [-] yvan|5 years ago|reply
Does anybody have experience with https://tailwindui.com/. As dev I like the tailwindcss and the founder released this some time ago and I am wondering if it's worth the price.
[+] [-] zubspace|5 years ago|reply
Before you get into tailwind-ui, I would start out with the basics of tailwind, which can already take you quite far. I would even say, that using simply tailwind will make your design unique in a way that tailwind-ui won't. That way, while you are in the process of designing your website, you always have the option, to extract your own components and don't fall back to templates which restrict your design.
One video, which was eye opening for me, was watching Adam Wathan rebuild Netlifly from scratch [1]. My takeaway: You don't need fancy ui-components to build something great.
[1] https://youtu.be/_JhTaENzfZQ?t=382
[+] [-] petargyurov|5 years ago|reply
Some feedback for the site: make the titles of each product a little more clear. For instance, "Free Stock Photos: High-Res Images for Websites & Commercial Use" doesn't tell me what the website is until I hover over it.
EDIT: Another thing, I was expecting the filters to be additive (i.e.: if I select "Art" and "Fonts", I would expect to see results from each category, instead I get nothing)
[+] [-] uvic|5 years ago|reply
[+] [-] hirundo|5 years ago|reply
[+] [-] brlewis|5 years ago|reply
[+] [-] kgin|5 years ago|reply
[+] [-] asicsp|5 years ago|reply
[+] [-] uvic|5 years ago|reply
[+] [-] Ayraa|5 years ago|reply
https://www.sessions.edu/color-calculator/
I always struggled with picking complimentary colors and found this worked a lot better than most of the pre-defined color palette suggestions out there.
[+] [-] fxtentacle|5 years ago|reply
I mean there's nothing to stop someone from downloading photos from Flickr and uploading them in their own name to one of those CC0 websites, especially because the latter will usually do no contributor verification at all. But no matter what the website says, you - the person using the image - will be held legally responsible in case it was wrongly promoted as CC0.
[+] [-] cookingoils|5 years ago|reply
[+] [-] tannhaeuser|5 years ago|reply
Edit: what winkeltripel said
[+] [-] monokai_nl|5 years ago|reply
https://mybrandnewlogo.com/color-gradient-generator
[+] [-] terrycody|5 years ago|reply
Btw, I hope you can add more combine elements of LOGO, yeah, current combos are already amazing!
[+] [-] somehnguy|5 years ago|reply
[+] [-] forlorn|5 years ago|reply
For how long have you been using this tool? (Enter a number)
What does this number mean? Number of years/months/projects/...? I entered 2 and 1 and have no idea what you meant.
[+] [-] alibaba_x|5 years ago|reply
What? Years
So 2 years.
Or 2 write “months” if 2 months, or “projects” if 2 projects.