Skip to content(if available)orjump to list(if available)

You can create a great looking website while sucking at design

seanwilson

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.

stickfigure

> Design a mockup first in something like Figma or InVision and only start coding when the design is ready.

I do this the opposite way. Just get the data crudely on the page and figure out the information architecture first. Then figure out how to make it attractive. Often during implementation I realize "oh, this data doesn't work quite the way I expected it to" and the IA changes.

code_biologist

Yeah, being handwavy about IA is absolutely a common sin of weak designs. I love getting a design that's technically sound, not just pretty.

Another problem I've seen at work with the "design first" approach vs planning for technical feedback on an initial design: our frontend engineers would take the design and implement it exactly as is, papering over differences between the data entry and the underlying data model as needed — then users get confused about what exactly each option or interaction does. It's close enough to be serviceable (and not get fixed) but different enough to be annoying.

adrianmsmith

A classic example of this imho is the "create filter" dialog in Gmail. Used to look like this https://images.ctfassets.net/lzny33ho1g45/3Bjwe3vYdJTAr9L6oV... i.e. had a bunch of options for what should happen when an email matched the rule, and also a "also apply this rule to existing email" checkbox.

Now it looks like this https://bleakton.com/wp-content/uploads/2018/09/Create-rules... . Some designer obviously thought, there are lots of checkboxes for what should happen when an email matches the rule and the "also apply this rule for existing email" is also a checkbox so just put them all in one row, despite it having a completely different meaning.

seanwilson

> Another problem I've seen at work with the "design first" approach vs planning for technical feedback on an initial design: our frontend engineers would take the design and implement it exactly as is, papering over differences between the data entry and the underlying data model as needed — then users get confused about what exactly each option or interaction does. It's close enough to be serviceable (and not get fixed) but different enough to be annoying.

This is where you should design wireframes first (e.g. rough greyscale sketches), turn them into clickable prototypes (Figma and InVision let you link up wireframes this way), and get feedback on these from user testing and the developers before creating high-definition designs or doing any coding.

wwweston

Is IA even a discipline anymore? I haven’t heard people speak in those terms for almost a decade, and it’s probably been longer since I heard it frequently.

If it is still a discipline, what does one read to pick it up?

jbothma

It very much is. A UX consultant we used introduced me to the term and it was incredibly helpful.

This training series from webflow touches on it, but perhaps not as much detail as you'd like https://university.webflow.com/lesson/freelancer-220-develop...

alfiedotwtf

Maybe it's just me, but I thought Information Architecture is design!

jbothma

Design has gotten blurry - is UX part of design?

I kinda see these parts as part of (non-dev-technical) design and designers differ in the degree to which they own these

- visual design towards a design system - abstract system of "this kind of thing looks like this so that the user can see it's this kind of thing and it looks good"

- information architecture - actual things we have on the site or page or app or system, and how we organise them so that they make sense and match the user mental model

- ux design - the use of the above two to sure it both looks good, and people find stuff, and are able to use stuff

- copywriting - hopefully happens somewhere in there

lupire

Parent was talking about coding the UI ("CSS"), not the data.

jxm262

Sorry im new to design and not familiar with the acronyms. What does IA mean in this context?

jxm262

Apologies, just scrolled down and read some other comments. Means Information Architecture

dceddia

And on the subject of learning the skill through practice, probably the most effective thing I’ve tried has been “copy work”, something I learned about in an article[0] by Erik Kennedy a few years back. Basically: reproduce existing good designs, pixel-for-pixel.

It’s like the 80/20 of design practice. It’s amazing the kinds of small details you start to notice when you try to faithfully copy a design.

0: https://www.smashingmagazine.com/2017/02/improving-ui-design...

DeathArrow

Yep, copy but don't look at the source. Make it look 100% the same but do it yourself.

irrational

The fact that people get college degrees in graphic design, yet we think we can duplicate their skills with little effort shows an amazing degree of hubris. This is like business people mocking programmers and saying that anyone could do it.

TobTobXX

There's no doubt a graphic designer can do more things better in this area. But a dev can acquire a skillset that is sufficient. I for example feel confident designing a frontend to the satisfaction of a customer, but I would never be able to put together a flyer or design an ad.

As a comparison: While a skilled sculptist is undoubtetly better at his craft than a mechanic, the latter can take pride in finishing off a machine part just as much as the sculptist, and to an untrained eye, the parts display an equal amount of skill.

Learning-by-doing gets you far. Actually investing the time and studying the field gets you further, but is more expensive.

indymike

> people get college degrees in graphic design, yet we think we can duplicate their skills with little effort

No one has said you can "duplicate their skills". What the article is suggesting is that you use a framework with great design engineered in: Tailwind. In the case of Tailwind you'll benefit from the collected UI work of Adam Wathan and about 200 others.

Mike_Andreuzza

Mmmmm...A degree is not needed to be good at design...

hansvm

_Can't_ anyone program? A few hundred of my classmates spent a couple quarters casually learning C++ in high school from a teacher barely scraping together the lessons a day before she taught them, and that was enough of a kickstart that most of us are some kind of programmer by trade, many of us in FAANG.

Sure it takes a little time to learn, you could probably short-circuit that process with more effort, and there are greater heights to be achieved with sufficient dedication, but the majority of programming just isn't that difficult. Just about anyone _could_ do it with a little effort.

That's also ignoring the compounding effects of education. People get college degrees in graphic design, but a couple of those years are shared between majors, some sizeable fraction of the unique couple years of training are dedicated to learning how to _efficiently_ perform certain tasks, and some other sizeable fraction is UI/UX knowledge that's somewhat duplicated in other fields. Is there really that much hubris in saying that some kinds of relatedly skilled professionals might only need to put in a little effort to equate to the ~<1yrs of unique effort obtained in a graphic design degree, especially when the professional in question doesn't need to use the entire degree and especially when learning is moderately accelerated by having learned other tangential things to hang the new knowledge on?

Maybe yes, but if so I don't think it's obvious enough to warrant a single-line dismissal.

null

[deleted]

dspillett

I think there is a level imbalance there, even in your statement.

I can design stuff, a bit, but at the sort of level of someone in the programming world scouring stack-overflow and putting parts together, and maybe coming up with something new (in the sense of new to me, it probably exists a great many times over already).

Some design “properly”, from fundamental building blocks and existing ideas, applying the right tools for the job. Much like I program a lot of the time.

A degree in graphics design isn't that though. There you'll be shown the fundamentals being derived from first principles, and the better students will be expected in future to maybe come up with new ideas/fundamentals.

Being a designer and having a design degree differ in a very similar way to being a developer and having a computer science degree.

lupire

You can get a college degree in drawing too, but you don't need one to be able to do nice sketches.

Don't need a college degree for making software either

avereveard

Yep. Here's my tip: just drop 15$ on theme forest.

bredren

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

This is what people say when they see me walking my cat. “I tried he just laid there.” I just smile and say, ah ya they’ll do that. If they hadn’t already given up, I’d probably probe on the fact that they probably bought a harness and tried it like once for 10 minutes.

It can take months and years to get a cat comfortable walking around on a leash in a residential environment. People want turnkey everything.

michaelsalim

Agreed with both.

My own experience for the second point: separating it makes a huge difference because I'm in such a different head space when focusing only on design.

What's funny is, 90% of the time this works well. But sometimes I just can't design something I like in figma. For those cases, I start coding and most of the time, I come up with a good enough design. The difference in how I think between the two is interesting.

Dracophoenix

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

This is where I get stuck. It's not because of analysis paralysis (although there is a bit of that too) so much as it is for optimizing loading time, comparing/triaging frameworks, and a whole host of other problems I'll call "optimization syndrome". I know the golden rule is to avoid premature optimization, but at same time I don't want to commit to a design that I like only to find out after the fact that it's slow, computationally expensive or relies on an outdated/EOL dependency. Any advice in that?

seanwilson

> I don't want to commit to a design that I like only to find out after the fact that it's slow, computationally expensive or relies on an outdated/EOL dependency.

Hmm, did you have a specific example in mind? I can't think this applies that often. You can for sure scope out the dev/tech side a little first then keep that in mind as you're doing the design first so you're not designing something that's infeasible to code. For example, I think I've developed quite a good feeling of what web design elements are going to difficult to adapt to mobile/responsive designs and will tend towards cleaner to implement ones.

It's a lot quicker to e.g. roughly draw a UI widget in a design tool to get a feeling for how it might work vs integrating a UI library and coding it up before realising it was the wrong direction to go. You'll likely come up with better ideas too by getting your head away from how you're going to code your app and thinking about what a new user wants to do with your app.

dsincl12

Completely agree. I spent a lot of time when learning design, "designing" writing code since I was a developer first. That was a lot of time wasted but it took effort and will to learn all the design tools and understand the process for sure, but it was definitely worth it.

bredren

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

This is what people say when they see me walking my cat. “I tried he just laid there.” What for like 10 mins once? It can take months and years to get a cat comfortable walking around on a leash in a residential environment. People want turnkey everything.

zwaps

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

polalavik

Haha I was thinking the same thing - and that falls under the umbrella of “design” too. Do not have hostile design!

I’ve tried to make my website absolutely non-hostile as a philosophy. No email harvesting, no data collection (besides Google analytics), no obnoxious loud flashy ads, minimal text-forward design. The web is a chaotic place. So make it look good and don’t attack your users!

ajdude

I was actually just about to post this. I clicked the link, began to read, and before even getting through the first paragraph, I encounter that full-page pop-up message for the e-list. At that point I just closed out the site.

billforsternz

This, so much this. It's such a dark pattern. Why don't they at least set the timer to 1 minute (or so) instead of 2 seconds (or so) to at least give the victim ^H ^H ^H ^H sitor a chance to read the start of the freaking article?

MrVandemar

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

Or ever.

jstummbillig

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.

xmprt

> but that is when you get the bootstrap-material-tailwind look and that is not so great either now, is it

The crux of your argument rests on this point and I think it's worth taking a step back and realizing that this is subjective and also that many people think the bootstrap-material-tailwind look is actually pretty good if not great.

It probably looks like crap to your trained eye but if the average person can't tell if something is wrong then it's probably just fine. I've seen a lot more cases of overzealous designers trying something custom and new and having it fail. Boring technology is often the best kind.

jstummbillig

> I think it's worth taking a step back and realizing that this is subjective

On an individual level it is almost impossible to argue about design. A friend might love their uncomfortable, rainbow colored chairs for various reasons that are both beyond mine and, frankly, their grasp.

Statistically however it becomes much clearer. Apple does something right with their product design. There is not a single job any of Apples products accomplishes, that you could not get done for less by buying from someone else. And yet, people don't.

We could then argue that this has nothing to do with the design. It's just the specs, it's the marketing, it's the golden cage that is some apple products. I can not dismiss any of those with publicly available data, but, again, the inversion offers insight: Imagine a iPhone that was made out of a cheap material you dislike and painted in multiple colors that made your eyes water. The worst possible product design, whatever that is to you.

There is certainly an image of a product that you would be pretty certain wouldn't sell because of its design. Someone might say "Oh, I don't know, it's all subjective" but even though you just have your instincts, you are certain it is not, without having to try. As soon as you imagine the look and touch, you know it's just not good and most people wouldn't enjoy using it. And you would be right.

It's somewhat harder to come up with analogous example for websites, mostly because data is even less in the because websites are usually not the product, but I hope it's not too much in this discussion to take the leap and infer that there is no reason to assume it would be any different.

enraged_camel

It certainly is subjective. However, there is definitely something to be said about the usage of Bootstrap/Material/Tailwind resulting in your site looking like thousands of others, with little character or distinguishing “feel” of its own.

unmole

Why does every website need a distinguishing feel? Does every published book try to come up with a new typeface?

Stevvo

I think it's a matter of scope. Building a simple personal blog? Most developers can probably make something fairly readable and pretty with some thought and a CSS framework.

Increase the complexity to something that has more interaction with users and their data and you would do yourself a service to hire a competent designer.

passivate

I am not a designer, so I take a more pragmatic view. If the intent is to earn money through your website and you are earning a ton of it, then you've succeeded. It doesn't matter if an outsider considers it good or bad design. But that' s just my simple-minded view.

jstummbillig

The whole conversation has been a bit sloppy about the differences between design and looks (and the difference is not entirely clear most of the time) but suffice to say: If you intent for your page to do x and you accomplish that because of and not in spite of the design, then, by definition, the design is good (and it might even be great).

> If the intent is to earn money through your website and you are earning a ton of it, then you've succeeded

Sure, but just as that does not mean your code is great, it doesn't mean your design is. "Earning a ton of money" is not exactly a well defined company goal. For example, if a better design (or code) could yield 2x what you make, even if 1x is "a ton", you might reconsider your stance on either. Or you maybe you wouldn't. Who am I to say.

passivate

>"Earning a ton of money" is not exactly a well defined company goal.

Well, okay, but you'll have to agree that at-least it is easy to quantify, "Good design" OTOH isn't, but again I'm not a designer so I see things differently. "Good design" "good code" in the abstract does nothing for me personally. The older I get the more I care much more about results, and the less I care about purity/aesthetics of design/code, etc. I'm around purpose-built biotech software all the time and to any UX person its going to look like ass. Janky, confusing menus, clusterfuck of various icon styles, seemingly random buttons littered everywhere etc, etc. No cohesive UX flow. But then this is expert software and is used in many aspects of vaccine r&d/production, and supports the production of high quality life saving products. I respect that, and therefore I respect the software as well.

tootie

I think the stuff in this article is very useful and it is definitely easier than ever to create a non-terrible design. They can create guardrails that makes your design is legible, responsive and mostly accessible. That's not a "great" design, that's a passable design. The bigger trick is UX. How do you actually optimize user behavior and minimize frustration. That's a whole other skill.

Brajeshwar

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.

doliveira

I think Portuguese and French have a better expression for this: "good", not "common" sense. I'm mentioning it because this sense for design is not that common. You may not be formally trained, but you're a designer.

wwilim

Yer a wizard, Harry

gregmac

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

yakshaving_jgt

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

Barrin92

Rich Hickey when talking about Clojure language design used to point out that 'simple' is not the same as 'easy'. In fact making something simple requires a lot of hard work. That's one of the reasons why you should use professional tools if possible. Because if they're good tools the people who made them have put a lot of effort already into making them simple in the first place.

phforms

This is especially true with design. My experience in becoming a professional graphic designer before switching to code is that it is often very hard to create something that looks simple and natural/effortless. You face many iterations of doubt and frustration before you get to the point where it “just feels right” (in a direct, non-convoluted way). Eventually you become so attached to your design that it is hard to look at it through the eyes of someone who has never seen it and doesn’t share your experiences.

I believe it actually becomes harder the more experienced you get, because you anticipate the struggle and cannot really approach design from a naive perspective again, where everything just seemed a lot simpler. I sometimes see works by amateurs that I really like, because they seemed to have a simple perspective on typography and composition and never thought about it in an overly complicated way.

I don’t think many professional design tools even today are simple in the way Rich Hickey describes (I am mostly talking about Adobe software; I am not very familiar with Figma, Affinity, etc., maybe they improved). I think they are rather too twisted and complected, especially because they try to do too many things and have gained a lot of weight over the decades.

Templates and very constrained/opinionated design tools reduce selectivity/complexity and therefore a lot of uncertainty that comes with design. They make things simpler in a lot of cases where “great” design just isn’t worth the effort/time/money, because what you need is not a masterpiece, but something that just works. If they are simple enough and well made by professionals I don’t see why one shouldn’t use them.

karaterobot

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.

sharps_xp

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.

hedora

I just want to read semantic HTML and handle the page formatting myself.

clairity

> "i’m building my own classless stylesheet that i plan to use across all of my projects..."

i'm doing the same! i tried use bootstrap again recently, and although it's gotten better from older versions, i just couldn't atop fighting it's anti-semantic assumptions (don't even get me started on tailwind!).

ffhhj

Do you plan to define your own tags to have a richer semantic html, and then translate it into plain html with corresponding js/css? Because html is very poor. Where is my menu tag??

clairity

> "Where is my menu tag??"

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/me...

<menu> is used like an unordered list, with <li> tags inside it, but has a specific semantic meaning.

ffhhj

But <menu> should contain <option> not list item <li>. They got the semantic wrong to reuse the list as a shortcut and called it a day.

jfk13

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?

DeathArrow

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.

strongbond

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.

hello_newman

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.

glaucon

I'm interested in this idea but, as feedback to shuffle, their demo sucks.

1. There are essentially three different types of UI component you can use within the demo, everything else is disabled. This makes building anything other than a landing page, within the demo, impossible.

2. The UI components that I could see (in five minutes of clicking around) are what I would term 'brochure-ware' components with nothing provided for forms etc.

3. The first thing that happens after you choose between bootstrap, tailwind etc is you get asked to choose a component library. As a non-designer I don't know on what basis I would choose between these and there's only a very ephemeral description of their characteristics. In my case I'm very interested in A11Y support and there's no indication to what degree, if any, those component libraries would help with that.

I'm not here to bag this entirely, I can see how it would be a significant accelerator in some cases but I do think addressing the above points would help.

BTW it's USD24/month or USD99/year from my point of view but it's possible they're A/Bing pricing.