Hacker News Re-Imagined

You can create a great looking website while sucking at design

  • 215 points
  • 9 hours ago

  • @nearfal08
  • Created a post

You can create a great looking website while sucking at design


@egypturnash 5 hours

Replying to @nearfal08 🎙

I like how several of the examples really rely on art to create interest, and possibly as the source for their color palettes as well, and yet there is no discussion of this. No discussion of where to find stock art, no discussion of where to find someone to do custom art, no discussion of the pros and cons of stock vs custom art.

Reply


@strongbond 6 hours

Replying to @nearfal08 🎙

You know, the first justifying reason for choosing Tailwind "It uses classes that are abstractions of CSS properties" just might not jive too well with someone who doesn't know all this stuff in the first place.

Reply


@MrYellowP 2 hours

Replying to @nearfal08 🎙

If they actually looked great, that'd be actually nice.

But they don't.

Reply


@treerunner 4 hours

Replying to @nearfal08 🎙

This article is a recipe for ensuring you look just like thousands of other websites out there.

Reply


@hello_newman 4 hours

Replying to @nearfal08 🎙

As a primarily backend dev, one thing that has recently helped me with my design skills is to use page builders.

I’ve found that they’ve gotten really good over the last few years and the code they generate is actually pretty solid. I’m the kind of person where I think I can tell what good design is, but I can’t actually design it from scratch myself.

I recently bought a subscription to https://shuffle.dev/ which has a page builder for tailwind, bootstrap, material, and bulma and it’s saved me a lot of time and generated some really slick looking sites.

A $20 subscription is definitely a lot cheaper than a designer and is faster than waiting for a design and then building it yourself. I’m not affiliated with them in anyway, but would highly recommend it as a part of your workflow.

Reply


@squidbeak 7 hours

Replying to @nearfal08 🎙

This lost me at 'Tailwind' which has nothing to do with design.

Reply


@tagawa 1 hour

Replying to @nearfal08 🎙

One thing to add is check the contrast ratio when choosing colours for text and backgrounds. There are multiple online contrast checkers that will ensure your colour choice follows WCAG guidelines to help people with low vision, colour blindness, etc., or simply those viewing on a device in bright sunlight.

Reply


@Julesman 8 hours

Replying to @nearfal08 🎙

Results may vary. Greatly.

Reply


@meristem 5 hours

Replying to @nearfal08 🎙

Who is the user? Who is the site for? How does the design relate to the user and to the problem to be solved?

Reply


@sidedishes 5 hours

Replying to @nearfal08 🎙

I'd initially misread this, thinking it was an article on how a lot of websites that look pretty can be surprisingly horribly unusable.

Reply


@Brajeshwar 8 hours

Replying to @nearfal08 🎙

My personal confession is that I'm not a designer but I used to design a lot a decade+ ago. My friends, colleagues, and clients says I design really good websites. My trick was to follow patterns, sequences, and formulas.

I once, met an old colleague after 10 years, and told me they are still maintaining a website I designed for clinics and had made minimal design changes in that span of 10+ years.

I believe a thoughtful design is more about common sense.

Reply


@yakshaving_jgt 8 hours

Replying to @nearfal08 🎙

Article says "keep it simple" and then immediately features a professional illustration.

Reply


@s1k3s 6 hours

Replying to @nearfal08 🎙

As a backend dev, I made myself an expert at Tailwind specifically for this issue. I admit, using Tailwind out of the box simply creates decent interfaces. However, I disagree with the article: I don't think I'm ever going to be able to design something great, simply because I don't have the skills for that. I just don't think any library / tool or whatever can make you a skilled designer.

Reply


@karaterobot 8 hours

Replying to @nearfal08 🎙

Definitely. This is because design is an overloaded term. Creating a great looking website is a kind of design, in the same sense that interior decoration is a kind of design. But there's another kind of design which is more about solving problems or achieving some result given a set of requirements and constraints. This is the sense in which design is about "how it works" and not "what it looks like".

Both are valid and useful, I just wish that there was a richer taxonomy to describe such different activities.

In the same way that telling someone you're a programmer can lead to them asking you to fix their printer, telling someone you're a designer can easily lead to them asking you to pick paint colors, or make a logo for their school newsletter. From the outside, these seem like overlapping activities, but they are often unrelated.

Reply


@gregmac 8 hours

Replying to @nearfal08 🎙

There are a lot of themes and CSS frameworks that make this so much easier than it used to be, but there's still a specialized skill around design. Developers that fail to understand this are doomed to build, at best, mediocre design.

Early in my career I built a couple sites/applications that I thought were pretty decent -- after all, I "knew" HTML and CSS and how to use Photoshop, etc. Then we had an actual graphic designer come in, do some relatively small tweaks -- spacing, sizing, borders/gradients/corners, etc type of thing -- and it was a radical improvement. After a couple times of that happening I learned I just don't have that skill.

If you're a programmer, think of this like the difference between "working code" and "working, elegant code". It's hard to get a jr developer to really understand the differences, because often the benefits aren't seen until you come back to the code months later to add something new. I'd consider code to be "elegant" when someone can rapidly understand it, and then easily modify it without breaking anything, and then do that again in another few months. The extreme opposite would be where it gets to "throw it out and start from scratch".

Reply


@chiefalchemist 8 hours

Replying to @nearfal08 🎙

No offence to the process and tools (e.g., Tailwind) but Bootstrap solved this sometime ago. The gist of the idea begin: Follow our lead, stay within the guardrails and you won't muck it up.

Of course there's room for others doing the same. But Bootstrap did have an element of being a "design tool" for design-blind engineers.

Reply


@hedora 5 hours

Replying to @nearfal08 🎙

Is this page broken in mobile firefox, or is one of the implicit tips that the actual page content (in this case, bullet lists) should be no more than 1/20th the size of section headers?

I find the big chunky headlines distractingly bold and over word wrapped (with at most three words per line), but the li elements' characters are single digit pixels high on my retina-class high DPI phone display.

Reply


@jfk13 8 hours

Replying to @nearfal08 🎙

The greatest design can be undermined by careless content. Spell-check. Proofread. If writing isn't your strength, get a competent editor and proof-reader to help.

A big, bold title with a grammatical error such as "create a great looking websites"[1] does not create a good impression.

[1] Is this supposed to be singular or plural?

Reply


@z3t4 5 hours

Replying to @nearfal08 🎙

The most important skill is to know if something is good or bad. So its about having good taste. The rest you can learn by training. Do copy the best designs until you can make your own from scratch.

Reply


@seanwilson 8 hours

Replying to @nearfal08 🎙

My tips:

- Design is a skill you can learn but you need to put at least a few days or weeks into it to make some progress. A lot of people who say they can't design have barely spent a few hours working on their own designs or following tutorials. For example, I don't think anybody would say "I'm not good at Java" without trying to learn it first but people do this with design all the time without giving themselves a fair chance to try.

- Don't design and code at the same time. You'll waste time and burn yourself out getting lost in CSS rabbit holes, trying to make the code look pretty etc. and then when you get it working it and you step back to look at it, you realise the design doesn't work and it needs more iterations. Design a mockup first in something like Figma or InVision and only start coding when the design is ready. You can iterate on the design an order of magnitude faster this way because you can just drag/drop things around instead of fighting with how to align and style things in CSS.

Generally once I have an initial rough design drawn in a design tool, I duplicate the whole thing, tweak it (like changing the colors, sizes, fonts), duplicate that, tweak it etc. to explore and combine lots of different design ideas until I happen upon some combination I like. It's hard to replicate this process and avoid tunnel vision when you're designing in an IDE instead.

Reply


@sharps_xp 6 hours

Replying to @nearfal08 🎙

this might be controversial, but i just want to write semantic html and be able to toggle the design. if the design requires additional elements or JS, then it’s way too complex for a solo dev (for me anyway).

i think classless css frameworks really opened up the possibility for backend devs to spin up a project as long as they can write good thoughtful html.

i’m building my own classless stylesheet that i plan to use across all of my projects because todays classless are mostly for content or marketing sites but what i need is more app ui.

Reply


@DeathArrow 5 hours

Replying to @nearfal08 🎙

Yes, you can. By learning what good design is and how to accomplish it.

I am a software developer and I sucked at design. But I learned a few bits of design, tried different approaches from what I've learned, did and redid a lot of designs. Waited a bit to clear my eyes and redid the designs again. Until they looked OK.

I not want to say that I am a good designer or I can replace a professional designer, but that I think I can accomplish decent designs for my own needs.

It would be a better ideea to just pay a pro designer and save some money, since he will do the design way faster than I can and better. But I like to do all the things myself if it is a personal project.

Reply


@rmbyrro 2 hours

Replying to @nearfal08 🎙

I had high hopes from the title.

So disappointed...

Reply


@zwaps 4 hours

Replying to @nearfal08 🎙

If the person creating this website are reading: Please do not pop up a "sign up for newsletter" pop up before one can even take one decent look at the article.

There could not possibly a more clearer message saying: "we don't even want you to read what we write, we just want your e-mail".

Incidentally, I did not get to read this article, because of said pop up, and if you think I'm gonna hunt for that tiny x button as response to that dick move instead of closing the tab, well.

Edit: if this ain't clear, this isn't good design

Reply


@amelius 8 hours

Replying to @nearfal08 🎙

If you can recognize great design, then you can create great design. Period. Just trust your inner feedback loop, and know that great ideas often come as a surprise from experimenting.

Reply


@mg 8 hours

Replying to @nearfal08 🎙

Just when I make a break from fumbling with html and css to create a landing page!

I am 45 minutes in and it looks like this:

https://www.gnod.com/guest

Feedback is welcome.

Reply


@emadabdulrahim 5 hours

Replying to @nearfal08 🎙

uhm... yes and no.

This post fails to explain the core principle of designing websites; the content comes first, always.

1. Write: Write the content first, in google docs or whatever. 2. Edit: Go over your content, edit it. Cut it in half in possible. Remove most of the fluff. 3. Information Hierarchy: Structure your content. Go over this a few times. 4. Emphasis: Given each piece of the content, how best to emphasize it based on what its saying?

Now you're ready to think about design. Browse websites that you like and first focus on their typography. If you understand what makes good typography, you're already more than halfway there.

Obviously there's a lot more to it. My point is your content is your raw material that _needs_ designing. If your content is not good, I don't care how good your design skills are, your website will suck.

Reply


@kayodelycaon 1 hour

Replying to @nearfal08 🎙

Tailwind is not going to help much with this. Tailwind is a framework builder, not a framework.

If you want a decent looking website when you don’t have a lot of skills, grab Bootstrap, find a nice prebuilt theme for it, and start coding. You can learn CSS incrementally as you do it.

After you’re comfortable with that, do the same with your next project, but grab a design book and do more custom css.

Then start looking at Tailwind after you’ve learned the basics.

Reply


@monkin 4 hours

Replying to @nearfal08 🎙

Everyone can make a great-looking website, and not everyone can make it useful to end-users or goals. Worth remembering that websites are “living” organisms that evolve with your users, and you need to quickly adapt to any patterns that users throw at it.

Reply


@unnouinceput 8 hours

Replying to @nearfal08 🎙

I recommend to any programmer, no matter how sucky is at design, to start using your program. As in enter at least 1000 times data in it, or click on tools you offer. I bet after 50 tries, you'd start redesign it, then after another 100 you'd improve its performance. By 1000 tries, even if it's still ugly at least will be easy to work with. And that will have appreciation of your users. Then you give it to an UX designer to make it beautiful. Oh, and when you get it back from said UX designer go again with data entering, to check if the designer didn't screw your previous awesomeness.

Reply


@gernb 8 hours

Replying to @nearfal08 🎙

> Border Radius: Do not use border-radius. Square buttons and boxes give off serious vibes.

Every screenshot on the page is using border radius except for microsoft

Reply


@bzxcvbn 4 hours

Replying to @nearfal08 🎙

I'm not taking web design advice from a website that throws a whole-page popup at me after scrolling a bit.

Reply


@vmception 7 hours

Replying to @nearfal08 🎙

The way I do it is starting with the logo.

I have a graphic designer work with me on the logo. With the finished logo you get style guidelines and an entire kit of all logo formats and resolutions.

You also get:

1) Color scheme - primary and secondary colors (this article reinforces this as well)

2) Typography - primary and secondary fonts. Now your use of any fonts especially custom fonts is no longer arbitrary, and congruent to a theme

3) Evocative messaging. The logo already evokes something in the viewer, the site is now congruent to that

This gives you a great launchpad and highly combustible accelerant to propel everything forward.

Reply


@jstummbillig 5 hours

Replying to @nearfal08 🎙

No. No, you can not. You can't even do it while you don't suck at design. You actually need to be really good at web design to create great looking websites.

Great design is hard. If you have seen a cool, simple design and thought "well, that's easy, it's just a bunch of text, a few lines and one primary color" and tried to copy it, you know how hard. Everything matters and you have no clue why it does. Or how. Sure, you can just do the 1-to-1 copy and there's frameworks to allow for exactly that-- but that is when you get a bootstrap-material-tailwind look and while that's fine and ticks some boxes, most people would probably agree that that does not feel like great design.

Design is hard hard every time anew, because more so than with code, it requires something different every time (whereas good code, in my opinion, should strife to be as boring and repetitive as you can get away with, and if it's all tried, tested and recycled more power to you)

Let's not buy into the bait and don't get deterred either. I am all for enabling the maximum amount of people to do cool shit, but it would be great if we could in the process not berate that which we aspire to accomplish by lying to ourselves. You don't need to be a great designer to create something cool. Go ahead and create. But if you want great design, you actually need to get great at design.

Fortunately, you can just start by doing shitty design and take it from there.

Reply


@jyriand 9 hours

Replying to @nearfal08 🎙

Landing page is not a website. Wish there were more examples of some functional aspects of good design.

Reply


About Us

site design / logo © 2022 Box Piper