
Design Tips for Developers - kiwicopple
https://paul.copplest.one/blog/design.html
======
tsumnia
Tips that have helped me:

\- Anytime you find a UI or mechanic you like while on the web, take a
screenshot of it and save it

\- Pick a palette from flatuicolors.com; congratulations, just use this
forever (forever until you've gotten better at design to change)

\- Make a logo with Photoshop, GIMP, or whatever graphics program you have
using that above color palette

\- If you have the time, sign up for Daily UI (dailyui.co) and and practice
making mockups. Even if you're trying to learn front end web development, this
will let your creative juices practice.

\- Keep going! Everything you make on day one will suck, or look super cookie-
cutter Bootstrap-y. So what, each time you make something, you'll hate a small
piece of it and so when you make the next thing, you'll try to fiddle with
that detail.

There are probably (much) better ways to get better at design, but this was
the path I took and while I'm not going to be making a massive application for
clients, what I have makes for pleasant looking visuals for my students and
tools

~~~
rapfaria

      Make a logo
    

Draw the rest of the ducking owl?

~~~
mrpotato
No one said it had to be an owl.

Facebook: F on squarish background

HackerNews: Y on orange square

Google: Google with coloured letters (or multicoloured G in white circle)

LinkedIn: blue `in` text

You get the idea... they don't need to be complicated and could be as simple
as just text.

~~~
jstummbillig
You trivialize that which is not: The _good_ variety of simple does not come
easy. Not in programming, not in visual design.

Making something look simple but not boring, mundane or like a copy of
something you saw 10 times today, is hard because it is highly depending on
context and context is depending on understanding.

Facebook can get away with an f (and more so, it works for them) because it
makes identification easy when it is ubiquitous – but that is not automaticaly
the case when you have no brand recognition. The simple f might just be
forgettable or, worse, remind people of something else.

There is a ton of additional caveats. That is what is hard about visual
design: It is infuriatingly different even when you think it shouldn't be,
every single time, and understanding both how and why it doesn't work – and I
guarantee you, it will not work before it eventually does – is a recurring
challenge for every designer, regardless of how simple the design or how
experienced the designer.

~~~
khalilravanna
I think you're overthinking it. Throw something out there, try it out, see if
it sticks. If it doesn't iterate on it. What _won 't_ get someone an icon is
if they make it out to be some crazy, specific science that requires years and
years of mastery to create. Creating artificial barriers for yourself never
gets you closer to your destination.

~~~
jstummbillig
It seems to me you are conflating hard with important. The case was being made
for the former, certainly not the later.

Other than that I do agree.

------
sb636
Designer here. Author makes some decent points, but misses the mark elsewhere.
The post reads like a "developers idea of basic design tips."

\- This post only touches on visual design. Important, but just a subset of
what "design" is.

\- Dribbble is very "artsy" and not typically as focused on practical product
design. I personally dont think its beneficial to spend time there, unless
like the author states, you're interested in emerging visual trends.

\- The author doesnt mention the foundations of design, which is
disappointing. Spacing, alignment, visual hierarchy. affordances, etc. If
you're building an app without a designer its far more important to understand
those concepts than how to design a logo.

My advice, depending on how much time you're willing to invest:

\- Read "Dont Make me Think" by Steve Krug (2.5~ hour read)

\- Read the first half-ish of "The design of everyday things" (4 hours?)

\- You may balk at the length of those reads, but I promise you, spending one
day to learn design fundamentals is an extremely valuable use of your time.

Common mistakes I see developers making:

\- No attention to spacing consistency

\- Not creating enough space between unrelated elements

\- Not aligning enough things

\- Weak visual hierarchy

\- Misusing radios vs. checkboxes vs. dropdowns, etc

~~~
lambdasquirrel
The most obvious thing is listening to your designers, if you are in industry
and are lucky to have them.

But with that said, it’s surprisingly hard to recruit designers to work on OSS
projects, and I think you need to start out with a half-decent design before
people who can actually help you will want to join on. So thank you for the
input.

------
gdubs
To be clear, this is focused on _visual_ design. Arguably more important for
developers is to think about the _user_. What problem does the user have, and
how do your various choices impact their ability to solve that problem with
the least amount of suffering possible.

Visual design is important — a pleasing site can have actual usability and
accessibility impacts. But to paraphrase Steve Jobs, great design isn’t just
what it looks like — it’s how it works.

I say _important for developers_ because when we’re creating something it can
be easy to make decisions that are easy for _us_ , but not great for the user.
(This is why solving your own problems is often recommended — if you’re
passionate about the problem, and you yourself are a user, you’ll by nature
make better decisions.)

While visual design is important, applying a nice coat of paint to an
otherwise miserable UX won’t solve any problems.

~~~
EpicBlackCrayon
>Start feeding these trends into your projects. Even if you aren't a big fan
of them, it's good to remember that design is effective when it appeals to
your target audience and not yourself.

Yeah, this is when it became evident that this was about chasing visual design
trends, not about user experience.

------
fnordprefect
My (probably ironic) interaction with their design:

1\. Quick skim of the start. <thought>This looks interesting, and even worth
saving for later detailed review</thought>

2\. I go to save the page. Search box opens and starts filling out with the
name of the directory I was pre-typing to save into.

3\. <thought>I must have clicked unintentionally. Or mis-hit the tab key?
Strange; I don't recall it. Try again.</thought>

4\. Same result.

5\. ?!$$@?. Test to be sure.

6\. Confirmed. <thought>They have bound cmd-s to give the search box focus
instead of allowing the user to save (seemingly unintentionally; ie due to 's'
being pressed without recognising that a modifier key was also
pressed)!</thought>

7\. Cmd-W. Window closes. Not saved.

8\. <thought>Nope, they didn't also overload 'w'</thought>

I will not take pointers from a site that messes up UX as badly as this.
Anything I don't recall from a quick skim is not going to be worth using.

~~~
kiwicopple
Very odd, I use VuePress for the site and I didn’t realise they hijacked the
key commands. Thanks for the bug report, I’ll fix this behaviour in the
morning.

~~~
fnordprefect
Thanks - I've re-opened the article and will read it carefully now :)

~~~
kiwicopple
Hope there's something useful in there!

------
silvestrov
The first step should be this book because it so very clearly explains and
show-cases the 4 fundamental principles of basic design in a way that is very
easy for others to understand: proximity, alignment, repetition, contrast.

"The Non-Designer's Design Book" by Robin Williams.

[https://www.amazon.com/Non-Designers-Design-
Book-4th/dp/0133...](https://www.amazon.com/Non-Designers-Design-
Book-4th/dp/0133966151)

------
cousin_it
There's a whole genre of such tutorials. The best one I've seen is the Non-
Designer's Design Book:
[https://diegopiovesan.files.wordpress.com/2010/07/livro_-
_th...](https://diegopiovesan.files.wordpress.com/2010/07/livro_-_the_non-
designers_desi.pdf) It shows many messy layouts, and applies four principles
(alignment, contrast, proximity, repetition) to make each layout look better.

~~~
stackthatcode
Beat me to it. I can vouch for this book as being completely amazing. It
teaches you the fundamentals of how to _see_ design, which in turn contributes
to learning how to produce your own designs. Or evaluate someone else's. If
you read only design book, this one is worth the time.

------
chasing
"Design" is a big word. And I agree that many developers need to improve their
design sensibilities a bit. That said, this is a frustratingly superficial
take on visual design (icons, colors, fonts) and doesn't touch at all on the
tougher and (I think) more important point of user experience design and
simply _understanding_ what design is and how it fits into the software
development process.

An example of a key UX design concept: Visual hierarchy. It doesn't require
any special tools, just a little understanding of what it is and why it's
important. And it's fundamental to good interface design

~~~
hopia
I thought this was a decent opinionated post about some of the UI
fundamentals. I doubt many developers really have the patience to dig deep
into UX stuff after all.

You got any good resources you'd recommend to read about the visual hierarchy
concept?

------
rolae
If you want some good visual design tips, then I can recommend
[https://refactoringui.com/](https://refactoringui.com/)

I can also highly recommend the book they sell.

------
Unbeliever69
Design tips without pictures is like coding tips without code.

------
chasing
Visiting Dribbble for inspiration is fine, but you're not going to develop
your understanding of how design works based on whatever happens to be hot in
a given week on Dribbble. You'll probably just train yourself to mindlessly
chase design trends.

Which might actually make you worse off because you'll waste your time trying
to implement some design concept without understanding whether it's really
appropriate for what you're doing.

~~~
marrianeKK
Do you have any tips or sources for learning about how design works?

~~~
captn3m0
Read Don’t make me think.

And maybe Design of everyday things as well.

------
psweber
> I'm not going to go into UX (even though it's more important) because I
> think learning how to think in simple design patterns is the baseline for
> creating usable products.

In my experience, engineers are ‘How it works’ people way more than they are
‘How it looks’ people. The UX article they didn’t write would be more helpful.
It’d be hard to write, and I understand why they didn’t.

There’s a lot of good UI kits available now. Those open source projects need
better UX way before they need better icons, fonts, logos, etc.

------
bredren
Surprised they didn't mention using web templates such as wrapbootstrap's
collection.

Working with existing controls and layouts, with pre-set helper classes is a
good way to have good design on a product you're building rapidly and get a
feel for what elements exist in useful design.

~~~
cptskippy
It wasn't mentioned because design is more than just skinning the UI after the
fact. Design is about being mindful of things like presentation, layout and
organization. A skin can help with presentation but it will never make up for
poor layout or organization.

Often times developers and designers don't take the time to even understand
Bootstrap or how to use it's layout system, instead choosing to hack it by
adding CSS classes until it "looks right". These design choices often fall
apart with the slightest change to display size or upstream changes in the
HTML.

~~~
bredren
Using these templates does help understand good layout because the examples
have already shown 85% or more of how a common consumer or saas app needs to
display web UI. By implementing them, mixing and matching, you get a feel for
how it aught to be because there are plenty of examples.

Simply by using these you can become more mindful of design. Asking a dev to
start from zero and learn design is not realistic and for a potential solo
technical startup founder a waste of time.

If designers don't understand bootstrap layouts that's fine. But if a
developer doesn't they are not trying. And these templates don't fall apart
from small changes, they are built responsive from the get go and have tons of
helper classes so developers can still alter them without hacking them up.

------
datasert
Side topic: Any idea how sequence diagram in page [0] is created? It is not an
image but text over-layed with some background images and I think it looks and
feels awesome.

[0] [https://paul.copplest.one/gists/secrets-management-
sops.html...](https://paul.copplest.one/gists/secrets-management-
sops.html#how-sops-works)

~~~
coddingtonbear
Might be a mermaid graph, I think.

[https://mermaid-js.github.io/mermaid/#/](https://mermaid-
js.github.io/mermaid/#/)

~~~
kiwicopple
This is correct - I use mermaid js (the site is made with VuePress)

------
kiwicopple
Hey HN, this was something I wrote for myself and my team. It’s sort of my
‘Principles’ (Ray Dalio) of design. It’s not supposed to be too comprehensive,
just a good, simple starter - hence the ‘Tips’ in the title.

To address a few of the comments here: in the first section I mention that I’m
specifically not going to talk about UX which is a huge article itself.
Hopefully people can find some value in the content that’s there rather than
judging the content that’s not. I realise that design is very opinionated, but
if you read this with an open mind you may find some useful tips.

It’s the middle of the night here, but I’ll try responding to everyone when I
wake up tomorrow

------
LoSboccacc
can't take design advice from a site where the text is centered off to the
side of the monitor center line.

like the basic is to design for the humans to the other side of the screen,
and you want me to shift around or read the thing looking sideways?

there's more than visuals, it's forgetting the most important thing, whom we
build things for.

but anyway, here's a different take: just build wire frames of the structure
as needed to whatever default your framework has, then pay a professional. if
you bill yourself your time, or factor in cost opportunity, you'll inevitably
come ahead.

~~~
mildmustard
"can't take design advice from a site where the text is centered off to the
side of the monitor center line"

what?

~~~
LoSboccacc
[https://i.imgur.com/RJyMZO8.png](https://i.imgur.com/RJyMZO8.png)

------
greenie_beans
This is great! Thanks for sharing. One design rule you missed when you said
that every other color should be white or black: never use pure black (#000).
Use something that's slightly less black.

------
alexrage
This is missing a critical web design aspect that I see most developers miss:
Space.

Paying attention to how things align, how big they are, how much and how
consistent the spacing around elements is will make a huge improvement to the
perception of the UI.

------
meerita
First advice is "Visit Dribbble" Oh no, no, no.

~~~
andrethegiant
Why not?

~~~
meerita
Because if you want to solve a design problem, first you need to do other
things instead going to Dribbble and get biased with other solutions. Dribbble
is more a display of styles than complete design solutions.

------
bluedevil2k
For my webapps...

1\. Go to a site like ThemeForest

2\. Click on Admin Theme

3\. Filter for Bootstrap 4

4\. Find one that looks good

5\. Download

6\. Start coding knowing your app will look professional and well-designed
immediately.

------
makach
Here is a tip: Use an interaction designer.

------
luord
As a design-challenged developer, I liked this a lot.

Except for the recommendation of utility-first css. Tried it, not for me.

------
mxuribe
Nice and succinct post!

