
NoDesign.dev – Tools and resources for non-artistic developers - uvic
https://nodesign.dev/
======
gdubs
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
> "...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".

~~~
galfarragem
Design is more complicated than just 'give content some air'. Here[0] doing
that would be a recipe to disaster. I'm a user of this tool and it really
works like it is. I doubt that making it look more trandy would make it more
functional.

[0] [https://www.bulkrenameutility.co.uk/assets/img-
bru/mainscr.p...](https://www.bulkrenameutility.co.uk/assets/img-
bru/mainscr.png)

~~~
murermader
Just because you got used to this tool, does not mean it is good UX. To me
this looks really cluttered, and I would be overwhelmed, if I looked at all
those options for the first time.

And I don't even see a reason that all these different modes need to be
visible at the same time. It also takes up alot of space.

There are probably many ways to make this more user friendly, but if it works
for you, thats great

~~~
wildrhythms
Airplane cockpit design is also "cluttered", but the people who will be using
the cockpit interface (trained pilots) want that. The cockpit is designed for
the pilot, and in every case design should be catered to the needs of the
user. I work in UX specifically and try to oppose designing same-y interfaces
at every turn. Different apps have different users with different needs.
Unfortunately, this is an uphill battle as we've established some mystical
need for "branded" interfaces that all look and act the same, regardless of
the function or user need.

~~~
rusticpenn
Airplanes are driven by people who are trained specifically for this purpose,
Software tools don't have this requirement.

~~~
eXpl0it3r
That's not really true. Every custom built tool receives some form of
training. Easily accessible designs lend themselves more for getting right
into and learning by doing as a lot is self-explanatory and the user isn't
overwhelmed. On the other hand, nice designs with lots of space, often also
end up with slow response times and lots of scrolling of clicking, making
certain work quite tedious.

As the parent comment said, software should really be built for the user and
not just so everyone and their children can use it (unless that's your target
group).

Financial terminals don't have the super nice designs to it, but they are
highly functional, customizable and fast. A lot of cashier terminals are still
running on old hardware with bad designs, yet they are highly functional.

I think there's always room for improvement and with every change you'll see a
certain amount of push back, but I think it's important to consider the user
and not write "simplified" software, when you have power users in front of
you.

~~~
rusticpenn
I agree with you. The UX/UI patterns should be functional first with a focus
on primary userbase. In many startup scenarios, however, the users are not
identified yet, so this UX pattern works only when you are well aware of the
business case and user capabilities.

------
nick-garfield
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)

~~~
systemvoltage
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
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.

~~~
systemvoltage
This is how you get more "trendy" designs than something timeless when
fundamentals are thought through.

~~~
ulisesrmzroche
Depth is a fundamental.

------
onion2k
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.

~~~
eitland
Isn't this for people who cannot afford to have a graphic designer?

Unless it is an open source project I feel it would be rude to ask someone to
work for free on it.

~~~
onion2k
_Unless it is an open source project I feel it would be rude to ask someone to
work for free on it._

I said work _with_ a designer, as in a collaboration. As in bring them onboard
as a co-founder, give them equity, have an agreement to share profits. Pay
them if you can. Share skills by getting them to do design work on your side
project in return for coding their side project. There are lots of ways to
work with people.

I am absolutely not suggesting anyone asks someone to work for free. That's
exploiting people. Don't do that.

~~~
duxup
Are designers usually co-founders?

~~~
onion2k
Two of YouTube's founders, Chad Hurley and Christina Brodbeck, were designers.
Charles Adler who started KickStarter is a designer. It does happen.

~~~
duxup
I think probably how it sounded to me was "Need a designer, get a designer as
a co-founder." and I was thinking of random designer drone and not sure how
that plays out as a skillet works out as a founder (I consider myself a
programmer drone equally likely or not likely to be qualified to be a
founder).

------
uvic
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
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
Okay I will look into it...

------
winkeltripel
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
I thought of the same thing....I just made it with next.js and bootstrap ....I
will look into it..

------
andersco
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
> 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
Are you aware of colour theory, and how to effectively use the colour wheel?

~~~
tech-historian
The color wheel is great, but there are enough counter-examples that the
original point stands -- design is inherently personal.

~~~
tekstar
So is what programming language or framework to choose. Just because people
have preference doesn't mean you can't learn the basics

------
tekstar
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.

~~~
gladuz
Which Lynda courses would you recommend taking for starters?

~~~
tekstar
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/5...](https://www.lynda.com/CSS-tutorials/CSS-Essential-
Training/5038219-2.html)

Now I'm watching Design Aesthetics for the Web [https://www.lynda.com/Design-
Techniques-tutorials/Design-Aes...](https://www.lynda.com/Design-Techniques-
tutorials/Design-Aesthetics-Web/506078-2.html)

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.

------
rsweeney21
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
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).

------
yvan
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
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)

------
petargyurov
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
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....

------
hirundo
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
The design of craigslist shouts "cheap and generic" at you, which is probably
best for craigslist.

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

------
asicsp
See also: [https://github.com/LisaDziuba/Awesome-Design-
Tools](https://github.com/LisaDziuba/Awesome-Design-Tools)

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

------
Ayraa
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.

------
fxtentacle
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.

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

------
tannhaeuser
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

------
monokai_nl
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
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
Glad you found it helpful. Enough ideas on the roadmap!

~~~
terrycody
Glad to hear that!

------
somehnguy
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.

------
forlorn
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
How long? 2

What? Years

So 2 years.

Or 2 write “months” if 2 months, or “projects” if 2 projects.

------
SeanDav
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.

------
dan_can_code
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.

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

------
srameshc
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.

------
miohtama
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

------
quickthrower2
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
LOL....

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

------
thrownaway954
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.

------
PresidentChuck
Thanks, that's how you develop a bookmark

------
kernel-dump
Very cool collection of tools, thank you!

------
thrownaway954
very nice!!!

you have color twice as choice btw ;)

~~~
uvic
Oh thanks, I will fix it....

~~~
Ash-k
Hey great resource. Any chance adding more categories like for the
architecture diagrams.. visualparadigm sort of?

------
Ayesh
This is pretty handy, thank you.

------
atlgator
I thought I was the only one...

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

