Design Tips for Developers | Hacker News Reader

Design Tips for Developers

paul.copplest.one

321 pointskiwicopple54 comments

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

  Make a logo

Draw the rest of the ducking owl?

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.

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.

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.

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.

You're assuming the logo will be good; which I didn't say. A logo is just another design exercise with constraints. By doing them, you'll see what you hate and work to avoid for your next design.

> Pick a palette from flatuicolors.com

Wow those are some gaudy colour schemes that all look the same.

I completely disagree.

Tips that help me are the antithesis of what you said. In fact, I believe that if one follows these tips, you're worse off.

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

Instead of blindlessly snipping things on the internet, try to understand why you like it. What fundamentally makes it fun/pleasure to use?

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

What guides one from picking their "favorite"? You're omitting the entire "black box" that makes the designer pick their favorite. This black box is biases and training of looking endlessly on Dribble and other designers on Instagram. This is trend chasing. This is how you get practically every damn startup with a magenta-purple aesthetic we see all too often from Firefox to Datadog.

Instead start from the bottom-up. Can you get by without using a color? What does adding a color buy you? Why should you use different colors? Is there a hierarchy of importance that needs to be conveyed to the user? Why is a color needed in the first place?

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

Also make an owl (from another comment)

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

IMHO - UI that emerges out of the product-user interaction rather than chasing some trends, pintrest board or inspiration from other sites, is guaranteed to be functional because it was the first checklist in the designers process. Once functional, you can work on context seperation using colors or whitespace or typography, whatever...

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

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.

It can also be immensely rewarding to read through the likes of Google’s Material site and Apple’s HIG. These resources not only show you what each system contains, but often some of the rationale and dos/don’ts that you won’t get by, say, looking at Gmail and copying what you see there.

I probably should have specified in the post that I’m a developer and not an actual designer, so a lot of the stuff you mention here is foreign to me. I touch briefly on spacing etc in the branding/consistency section.

All good points you make, and after reading the comments here I will definitely pick up Don’t Make Me Think

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.

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

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.

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.

Fixed by @brillout

https://github.com/kiwicopple/paul.copplest.one/pull/2

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

Hope there's something useful in there!

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

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... It shows many messy layouts, and applies four principles (alignment, contrast, proximity, repetition) to make each layout look better.

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.

"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

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?

If you want some good visual design tips, then I can recommend https://refactoringui.com/

I can also highly recommend the book they sell.

Design tips without pictures is like coding tips without code.

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.

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

Read Don’t make me think.

And maybe Design of everyday things as well.

A List Apart[0] is a great design website covering all sorts of topics around accessibility, visual design on the web, and digital communication. I've been reading them for years and would definitely recommend just digging around on their site for topics.

  [0] https://alistapart.com/topics/

Study objective design - NASA documents, cockpit instrumentation, nuclear power plant control panels, etc.

Design and designers today are completely and utterly misguided, self-serving and chasing trends. Yes, its a strong statement but I have observed complete lack of understanding of how to make products and services with users in mind. From Apple to your typical SaaS startup, from Slack to Stripe.

Design is not only appearance. It is how a thing works (quoting Steve Jobs who himself didn't follow his own advice). About the only Designer I deeply admire is Dieter Rams. There is so much clarity in what he devised and designed.

I feel as if "news" is probably a bad thing for most non-professional designers. I want to know what my users are most familiar with.

I don't really want to be chasing what the "best" design professionals do. Rather I want to replicate the experiences I see on the most common web sites, the ones that I visit. That's often deceptively difficult, especially if what users are familiar with comes from sites like Facebook (that have large teams of professionals in both design and programming), but it's at least a common thing I share with my users.

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

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.

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.

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.

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

If you look at the source you'll find out that it is actually a SVG. https://developer.mozilla.org/en-US/docs/Web/SVG

Might be a mermaid graph, I think.

https://mermaid-js.github.io/mermaid/#/

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

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

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.

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

what?

https://i.imgur.com/RJyMZO8.png

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.

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.

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

Why not?

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.

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.

Here is a tip: Use an interaction designer.

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

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

Nice and succinct post!

Reply on news.ycombinator.com