14 ms·

NoDesign.dev – Tools and resources for non-artistic developers

762 points by uvic 6y ago

uvic 6y ago
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.
- xiwenc 6y ago
  Loosk very useful! Will definitely use this for my next design needs. 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.
  - uvic 6y ago
    Okay I will look into it...
- gwbas1c 6y ago
  Chrome warns me that the page isn't secure, even though you're using https.
  - zffr 6y ago
    I think this is because the page loads a mix of HTTP and HTTPS content. Did a quick check and all of the HTTP URLs are images, and nearly all of them already support HTTPS. Should be easy to fix. The only URL I found that didn't support HTTPS was https://www.entypo.com/images/entypo-webclip.png https://www.entypo.com/images/entypo-webclip.png
- awb 6y ago
  Thanks for creating this site. If you'd like to include it, I built MVP.css (https://andybrewer.github.io/mvp/ https://andybrewer.github.io/mvp/) for this demographic of folks that want a good looking design but don't have design skills themselves.
Ayesh 6y ago
This is pretty handy, thank you.
petargyurov 6y ago
This is awesome. I have been using unDraw and unsplash as well as some other things for my startup (shameless plug: https://makely.me 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)
- uvic 6y ago
  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....
snowoutside 6y ago
Love it! http://nodesign.dev http://nodesign.dev just lead me to https://www.happyhues.co https://www.happyhues.co which is beautiful. Already super useful. One nit: the "color" filter shows up twice for me, and both are checked when I click on one. Also, I'm super in that the subtitle says "Join the movement". It reminded me of this part of Alice's Restaurant. https://www.lyricsfreak.com/a/arlo+guthrie/alices+restaurant_20518619.html https://www.lyricsfreak.com/a/arlo+guthrie/alices+restaurant... And the only reason I'm singin' you the song now is 'cause you may know Somebody in a similar situation Or you may be in a similar situation, and if you're in a situation like That, there's only one thing you can do Walk into the shrink wherever you are, just walk in, say, "Shrink, you Can get anything you want at Alice's Restaurant", and walk out You know, if one person, just one person, does it, they may think he's Really sick and they won't take him And if two people do it, in harmony, they may think they're both faggots and They won't take either of them And if three people do it! Can you imagine three people walkin' in, singin' A bar of "Alice's Restaurant" and walkin' out? They may think it's an Organization! And can you imagine fifty people a day? I said FIFTY people a day Walkin' in, singin' a bar of "Alice's Restaurant" and walkin' out? Friends They may think it's a Movement, and that's what it is THE Alices's Restaurant anti-massacre movement! And all you gotta do to join is to Sing it the next time it comes around on the guitar
andersco 6y ago
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.
- petargyurov 6y ago
  > what font to choose, what color palette to pick etc. I don't think anyone but you will be able to give an exact response to this. After all, it depends on your product and how you want it to look. Remember, when it comes to design there are no universal right answers.
  - tekstar 6y ago
    Are you aware of colour theory, and how to effectively use the colour wheel?
    - tech-historian 6y ago
      The color wheel is great, but there are enough counter-examples that the original point stands -- design is inherently personal.
      - tekstar 6y ago
        So is what programming language or framework to choose. Just because people have preference doesn't mean you can't learn the basics
      - ulisesrmzroche 6y ago
        Name a counter example
  - ulisesrmzroche 6y ago
    There are better answers than others. You guys just don’t know any of them because you can’t draw
SeanDav 6y ago
Brilliant. Bookmarked. Of course some of the choices are personal opinion as to how good they are - especially items like UI Designers, but still good to have the choices in the first place.
onion2k 6y ago
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.
- berkes 6y ago
  Good advice, and I wholly agree: design is important and deserves an expert. > Reach out to some on social media Any tips on how, or where? My experience with fiverr is very much "hit or miss" and getting designers interested for a startup in very early phase is hard in my experience.
  - RobertKerans 6y ago
    As in Dribbble or Behance for example, or Twitter (et al). Or look for large designer communities on Slack or Discord etc (or FB) fiverr (or Upwork etc) are just meat markets and a race to the bottom, being hit or miss should be expected from those platforms: if you try to buy things on the [extreme end of] cheap, then often the end product is not going to be particularly good.
  - zerkten 6y ago
    > My experience with fiverr is very much "hit or miss" and getting designers interested for a startup in very early phase is hard in my experience. How are you paying them? Fiverr is a low-price marketplace and not where I'd try to find the best talent. Getting good Fiverr designs requires a lot of work and some understanding of design. The latter seems to run counter to this thread. Ultimately, you won't get great design on the cheap. My personal experience is the lowest cost option for really great design is having a couple of thousand dollars on retainer with a contract designer, or small design agency. Go through your working prototype and see how they can uplift the existing design within your budget. If you can come inside budget then get the same designers back later for more bits and pieces. This is how you build up a relationship and they might cut you some slack, such as doing an updated email template, or some other one-offs. Using bootstrap, or another standard framework is a potential win. They may be able to provide customizations for you directly. If you have a completely custom frontend, or something that's highly engineered, then it's harder and more expensive for developers to work with you. It goes without saying that you need to own the copyrights on the assets they create for you. The other part is that you need things in the right formats. If they created illustrations, then get the original AI files, not only the exported image files. If you have the source files, then you can make your own tweaks later. So many people forget to think about this. I've had to make tweaks 100% of the time. Copyright issues will come up much later and hinder you when you are successful, but it's easy to deal with those initially. If you don't have a couple of thousand to budget toward design then you should stick to generic templates because designers don't work for free. They generally don't win from startup success because of the bias towards engineers, so don't expect them to keen to work based on some promise of success and payment later.
kernel-dump 6y ago
Very cool collection of tools, thank you!
dan_can_code 6y ago
Thanks for sharing this! As a dev who would like to improve my awareness of design, this collection of resources will definitely help me learn.
tekstar 6y ago
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.
- schwartzworld 6y ago
  looks like someone didn't click the link
  - tekstar 6y ago
    Sure I did - It's a bunch of tools, generators, and frameworks to hide behind instead of learning the fundamentals
- gladuz 6y ago
  Which Lynda courses would you recommend taking for starters?
  - tekstar 6y ago
    The key thing is to look for courses released, like, 2018 or later. I started with Essential CSS as a refresher. If you don't know much about CSS it's a good start. https://www.lynda.com/CSS-tutorials/CSS-Essential-Training/5038219-2.html https://www.lynda.com/CSS-tutorials/CSS-Essential-Training/5... Now I'm watching Design Aesthetics for the Web https://www.lynda.com/Design-Techniques-tutorials/Design-Aesthetics-Web/506078-2.html https://www.lynda.com/Design-Techniques-tutorials/Design-Aes... On the same topic as "you don't need frameworks to get jobs done", the next one I'm going to take is learning ES6, because modern browser-supported javascript isn't completely terrible anymore.
winkeltripel 6y ago
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.
- uvic 6y ago
  I thought of the same thing....I just made it with next.js and bootstrap ....I will look into it..
nick-garfield 6y ago
I've got to recommend refactoringui.com. 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 https://refactoringui.com
- j_autumn 6y ago
  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.
- systemvoltage 6y ago
  I don't know. Just looking at one of the things that they've posted: https://twitter.com/steveschoger/status/981606881255976961 https://twitter.com/steveschoger/status/981606881255976961 > 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.
  - pyronite 6y ago
    I feel like you could ask similar "why" questions about everything design-related. "Why is no one asking why good-looking, modern designs are necessary?" Many people interpret quality of design as an indicator of content or product quality. To address your particular question, depth creates a more realistic and visually interesting representation of information on a screen. It can also serve to indicate the priority of information on a page. If depth draws your eye to or away from a particular element, it can help to achieve the designer's goals.
PresidentChuck 6y ago
Thanks, that's how you develop a bookmark
thrownaway954 6y ago
very nice!!! you have color twice as choice btw ;)
- uvic 6y ago
  Oh thanks, I will fix it....
  - Ash-k 6y ago
    Hey great resource. Any chance adding more categories like for the architecture diagrams.. visualparadigm sort of?
hirundo 6y ago
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.
- brlewis 6y ago
  The design of craigslist shouts "cheap and generic" at you, which is probably best for craigslist.
asicsp 6y ago
See also: https://github.com/LisaDziuba/Awesome-Design-Tools https://github.com/LisaDziuba/Awesome-Design-Tools
- uvic 6y ago
  This is great but I think the point of this is to use the least amount of tools as possible...
somehnguy 6y ago
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 6y ago
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.
- clairity 6y ago
  > "...that gives the content some air." 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".
  - gdubs 6y ago
    Yes, great point! Even the best design principles can fall into 'trend' territory if they're not applied intentionally, to solve an actual problem. Exceptions definitely make the rule, and a site might find that extreme information density is what's called for. It really comes down to being intentional, being wary of trends for trends sake, and hammering on the constraints, and the problem one is trying to solve for the user.
  - meristem 6y ago
    Can you tell me more about how more whitespace makes design easier?
andreigaspar 6y ago
Great resource, congrats! Thanks for featuring UI Design Daily:)
monokai_nl 6y ago
I've recently created a free tool to create good-looking CSS color gradients that might fit your audience: https://mybrandnewlogo.com/color-gradient-generator https://mybrandnewlogo.com/color-gradient-generator
- terrycody 6y ago
  Your website is really cool and useful, and I already used it for several times in the past 1 year, I think I knew it from a Show HN post. Btw, I hope you can add more combine elements of LOGO, yeah, current combos are already amazing!
  - monokai_nl 6y ago
    Glad you found it helpful. Enough ideas on the roadmap!
    - terrycody 6y ago
      Glad to hear that!
tannhaeuser 6y ago
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. Edit: what winkeltripel said
kgin 6y ago
Now that we’ve got no-code and no-design, I think we’re just missing no-idea.
fxtentacle 6y ago
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.
Ayraa 6y ago
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.): https://www.sessions.edu/color-calculator/ 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.
thrownaway954 6y ago
it would also be nice to just be able to click the tile for the listing and being taken to the site rather than having to click the title which is not apparent at first.
atlgator 6y ago
I thought I was the only one...
ac130kz 6y ago
This is very helpful indeed! It's difficult to find aspiration sometimes if you're not in the "flow" for quite a while.
rsweeney21 6y ago
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.
- sizzle 6y ago
  When you can afford it, I would hire a UX designer with a strong portfolio of usable/accessible design projects that knows how to interpret behavioral analytics into improving the UX over time as the company adds new features. If you can spend money on marketing, you cannot afford to not spend money on ensuring the UX is working for your users and to get insight into if poor design is the reason behind not performing as expected for your bottom line. Pro-tip: UX is NOT UI (there are a lot of off the shelf design systems that make designing UI trivial e.g. Salesforce lightning design system, material design, etc. - hire someone who is a UX design generalist until you can afford specialists - UX designers/researchers).
- vegesm 6y ago
  +1 taking heavy inspiration from other places gives a huge headstart
forlorn 6y ago
Submitting a new tool: 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 6y ago
  How long? 2 What? Years So 2 years. Or 2 write “months” if 2 months, or “projects” if 2 projects.
srameshc 6y ago
I love it. This is what I needed. I am not a designer but I design and build stuff. So I am going to use this very often.
cookingoils 6y ago
I actually find that design by programmers is usually much more elegant and user friendly than design by designers.
deleted 6y ago
[deleted]
miohtama 6y ago
Building startups with no design boringtech: Server-side rendering ORM (Ruby/Django) Bootstrap (jQuery one) FontAwesome Google Fonts Template from a store $50 - takes you from 0 to 1 Hetzner $40/mo single real hardware server
polyterative 6y ago
design is not making things pretty. it's about solving problems
quickthrower2 6y ago
I like the submission form. CPU: How long have you been using this framework? Me Type: 1 YEAR CPU: Must be a number greater than 0 Me Think: Mmm ok Me Type: 525600 CPU: Thank you!
- uvic 6y ago
  LOL....
yvan 6y ago
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/ 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 6y ago
  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. [1] https://youtu.be/_JhTaENzfZQ?t=382 https://youtu.be/_JhTaENzfZQ?t=382

762 points by uvic 6y ago

uvic 6y ago

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.

xiwenc 6y ago
Loosk very useful! Will definitely use this for my next design needs. 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.
- uvic 6y ago
  Okay I will look into it...
gwbas1c 6y ago
Chrome warns me that the page isn't secure, even though you're using https.
- zffr 6y ago
  I think this is because the page loads a mix of HTTP and HTTPS content. Did a quick check and all of the HTTP URLs are images, and nearly all of them already support HTTPS. Should be easy to fix. The only URL I found that didn't support HTTPS was https://www.entypo.com/images/entypo-webclip.png https://www.entypo.com/images/entypo-webclip.png
awb 6y ago
Thanks for creating this site. If you'd like to include it, I built MVP.css (https://andybrewer.github.io/mvp/ https://andybrewer.github.io/mvp/) for this demographic of folks that want a good looking design but don't have design skills themselves.

Ayesh 6y ago

This is pretty handy, thank you.

petargyurov 6y ago

This is awesome. I have been using unDraw and unsplash as well as some other things for my startup (shameless plug: https://makely.me 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)

uvic 6y ago
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....

snowoutside 6y ago

Love it! http://nodesign.dev http://nodesign.dev just lead me to https://www.happyhues.co https://www.happyhues.co which is beautiful. Already super useful. One nit: the "color" filter shows up twice for me, and both are checked when I click on one. Also, I'm super in that the subtitle says "Join the movement". It reminded me of this part of Alice's Restaurant. https://www.lyricsfreak.com/a/arlo+guthrie/alices+restaurant_20518619.html https://www.lyricsfreak.com/a/arlo+guthrie/alices+restaurant... And the only reason I'm singin' you the song now is 'cause you may know Somebody in a similar situation Or you may be in a similar situation, and if you're in a situation like That, there's only one thing you can do Walk into the shrink wherever you are, just walk in, say, "Shrink, you Can get anything you want at Alice's Restaurant", and walk out You know, if one person, just one person, does it, they may think he's Really sick and they won't take him And if two people do it, in harmony, they may think they're both faggots and They won't take either of them And if three people do it! Can you imagine three people walkin' in, singin' A bar of "Alice's Restaurant" and walkin' out? They may think it's an Organization! And can you imagine fifty people a day? I said FIFTY people a day Walkin' in, singin' a bar of "Alice's Restaurant" and walkin' out? Friends They may think it's a Movement, and that's what it is THE Alices's Restaurant anti-massacre movement! And all you gotta do to join is to Sing it the next time it comes around on the guitar

andersco 6y ago

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.

petargyurov 6y ago
> what font to choose, what color palette to pick etc. I don't think anyone but you will be able to give an exact response to this. After all, it depends on your product and how you want it to look. Remember, when it comes to design there are no universal right answers.
- tekstar 6y ago
  Are you aware of colour theory, and how to effectively use the colour wheel?
  - tech-historian 6y ago
    The color wheel is great, but there are enough counter-examples that the original point stands -- design is inherently personal.
    - tekstar 6y ago
      So is what programming language or framework to choose. Just because people have preference doesn't mean you can't learn the basics
    - ulisesrmzroche 6y ago
      Name a counter example
- ulisesrmzroche 6y ago
  There are better answers than others. You guys just don’t know any of them because you can’t draw

SeanDav 6y ago

Brilliant. Bookmarked. Of course some of the choices are personal opinion as to how good they are - especially items like UI Designers, but still good to have the choices in the first place.

onion2k 6y ago

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.

berkes 6y ago
Good advice, and I wholly agree: design is important and deserves an expert. > Reach out to some on social media Any tips on how, or where? My experience with fiverr is very much "hit or miss" and getting designers interested for a startup in very early phase is hard in my experience.
- RobertKerans 6y ago
  As in Dribbble or Behance for example, or Twitter (et al). Or look for large designer communities on Slack or Discord etc (or FB) fiverr (or Upwork etc) are just meat markets and a race to the bottom, being hit or miss should be expected from those platforms: if you try to buy things on the [extreme end of] cheap, then often the end product is not going to be particularly good.
- zerkten 6y ago
  > My experience with fiverr is very much "hit or miss" and getting designers interested for a startup in very early phase is hard in my experience. How are you paying them? Fiverr is a low-price marketplace and not where I'd try to find the best talent. Getting good Fiverr designs requires a lot of work and some understanding of design. The latter seems to run counter to this thread. Ultimately, you won't get great design on the cheap. My personal experience is the lowest cost option for really great design is having a couple of thousand dollars on retainer with a contract designer, or small design agency. Go through your working prototype and see how they can uplift the existing design within your budget. If you can come inside budget then get the same designers back later for more bits and pieces. This is how you build up a relationship and they might cut you some slack, such as doing an updated email template, or some other one-offs. Using bootstrap, or another standard framework is a potential win. They may be able to provide customizations for you directly. If you have a completely custom frontend, or something that's highly engineered, then it's harder and more expensive for developers to work with you. It goes without saying that you need to own the copyrights on the assets they create for you. The other part is that you need things in the right formats. If they created illustrations, then get the original AI files, not only the exported image files. If you have the source files, then you can make your own tweaks later. So many people forget to think about this. I've had to make tweaks 100% of the time. Copyright issues will come up much later and hinder you when you are successful, but it's easy to deal with those initially. If you don't have a couple of thousand to budget toward design then you should stick to generic templates because designers don't work for free. They generally don't win from startup success because of the bias towards engineers, so don't expect them to keen to work based on some promise of success and payment later.

kernel-dump 6y ago

Very cool collection of tools, thank you!

dan_can_code 6y ago

Thanks for sharing this! As a dev who would like to improve my awareness of design, this collection of resources will definitely help me learn.

tekstar 6y ago

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.

schwartzworld 6y ago
looks like someone didn't click the link
- tekstar 6y ago
  Sure I did - It's a bunch of tools, generators, and frameworks to hide behind instead of learning the fundamentals
gladuz 6y ago
Which Lynda courses would you recommend taking for starters?
- tekstar 6y ago
  The key thing is to look for courses released, like, 2018 or later. I started with Essential CSS as a refresher. If you don't know much about CSS it's a good start. https://www.lynda.com/CSS-tutorials/CSS-Essential-Training/5038219-2.html https://www.lynda.com/CSS-tutorials/CSS-Essential-Training/5... Now I'm watching Design Aesthetics for the Web https://www.lynda.com/Design-Techniques-tutorials/Design-Aesthetics-Web/506078-2.html https://www.lynda.com/Design-Techniques-tutorials/Design-Aes... On the same topic as "you don't need frameworks to get jobs done", the next one I'm going to take is learning ES6, because modern browser-supported javascript isn't completely terrible anymore.

winkeltripel 6y ago

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.

uvic 6y ago
I thought of the same thing....I just made it with next.js and bootstrap ....I will look into it..

nick-garfield 6y ago

I've got to recommend refactoringui.com. 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 https://refactoringui.com

j_autumn 6y ago
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.
systemvoltage 6y ago
I don't know. Just looking at one of the things that they've posted: https://twitter.com/steveschoger/status/981606881255976961 https://twitter.com/steveschoger/status/981606881255976961 > 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.
- pyronite 6y ago
  I feel like you could ask similar "why" questions about everything design-related. "Why is no one asking why good-looking, modern designs are necessary?" Many people interpret quality of design as an indicator of content or product quality. To address your particular question, depth creates a more realistic and visually interesting representation of information on a screen. It can also serve to indicate the priority of information on a page. If depth draws your eye to or away from a particular element, it can help to achieve the designer's goals.

PresidentChuck 6y ago

Thanks, that's how you develop a bookmark

thrownaway954 6y ago

very nice!!! you have color twice as choice btw ;)

uvic 6y ago
Oh thanks, I will fix it....
- Ash-k 6y ago
  Hey great resource. Any chance adding more categories like for the architecture diagrams.. visualparadigm sort of?

hirundo 6y ago

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.

brlewis 6y ago
The design of craigslist shouts "cheap and generic" at you, which is probably best for craigslist.

asicsp 6y ago

See also: https://github.com/LisaDziuba/Awesome-Design-Tools https://github.com/LisaDziuba/Awesome-Design-Tools

uvic 6y ago
This is great but I think the point of this is to use the least amount of tools as possible...

somehnguy 6y ago

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 6y ago

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.

clairity 6y ago
> "...that gives the content some air." 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".
- gdubs 6y ago
  Yes, great point! Even the best design principles can fall into 'trend' territory if they're not applied intentionally, to solve an actual problem. Exceptions definitely make the rule, and a site might find that extreme information density is what's called for. It really comes down to being intentional, being wary of trends for trends sake, and hammering on the constraints, and the problem one is trying to solve for the user.
- meristem 6y ago
  Can you tell me more about how more whitespace makes design easier?

andreigaspar 6y ago

Great resource, congrats! Thanks for featuring UI Design Daily:)

monokai_nl 6y ago

I've recently created a free tool to create good-looking CSS color gradients that might fit your audience: https://mybrandnewlogo.com/color-gradient-generator https://mybrandnewlogo.com/color-gradient-generator

terrycody 6y ago
Your website is really cool and useful, and I already used it for several times in the past 1 year, I think I knew it from a Show HN post. Btw, I hope you can add more combine elements of LOGO, yeah, current combos are already amazing!
- monokai_nl 6y ago
  Glad you found it helpful. Enough ideas on the roadmap!
  - terrycody 6y ago
    Glad to hear that!

tannhaeuser 6y ago

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. Edit: what winkeltripel said

kgin 6y ago

Now that we’ve got no-code and no-design, I think we’re just missing no-idea.

fxtentacle 6y ago

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.

Ayraa 6y ago

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.): https://www.sessions.edu/color-calculator/ 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.

thrownaway954 6y ago

it would also be nice to just be able to click the tile for the listing and being taken to the site rather than having to click the title which is not apparent at first.

atlgator 6y ago

I thought I was the only one...

ac130kz 6y ago

This is very helpful indeed! It's difficult to find aspiration sometimes if you're not in the "flow" for quite a while.

rsweeney21 6y ago

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.

sizzle 6y ago
When you can afford it, I would hire a UX designer with a strong portfolio of usable/accessible design projects that knows how to interpret behavioral analytics into improving the UX over time as the company adds new features. If you can spend money on marketing, you cannot afford to not spend money on ensuring the UX is working for your users and to get insight into if poor design is the reason behind not performing as expected for your bottom line. Pro-tip: UX is NOT UI (there are a lot of off the shelf design systems that make designing UI trivial e.g. Salesforce lightning design system, material design, etc. - hire someone who is a UX design generalist until you can afford specialists - UX designers/researchers).
vegesm 6y ago
+1 taking heavy inspiration from other places gives a huge headstart

forlorn 6y ago

Submitting a new tool: 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 6y ago
How long? 2 What? Years So 2 years. Or 2 write “months” if 2 months, or “projects” if 2 projects.

srameshc 6y ago

I love it. This is what I needed. I am not a designer but I design and build stuff. So I am going to use this very often.

cookingoils 6y ago

I actually find that design by programmers is usually much more elegant and user friendly than design by designers.

deleted 6y ago

[deleted]

miohtama 6y ago

Building startups with no design boringtech: Server-side rendering ORM (Ruby/Django) Bootstrap (jQuery one) FontAwesome Google Fonts Template from a store $50 - takes you from 0 to 1 Hetzner $40/mo single real hardware server

polyterative 6y ago

design is not making things pretty. it's about solving problems

quickthrower2 6y ago

I like the submission form. CPU: How long have you been using this framework? Me Type: 1 YEAR CPU: Must be a number greater than 0 Me Think: Mmm ok Me Type: 525600 CPU: Thank you!

uvic 6y ago
LOL....

yvan 6y ago

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/ 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 6y ago
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. [1] https://youtu.be/_JhTaENzfZQ?t=382 https://youtu.be/_JhTaENzfZQ?t=382