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.
> 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.
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.
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.
maybe the thing to do would have been to just have two different buttons instead
> 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.
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?
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...
I've just watched the linked video. It was pretty good; thanks for sharing.
My first impression is that Information Architecture feels like it blurs the line between UX and marketing, and a company with a non-tech/design marketing person could do well to involve them in IA work.
It feels like there's a lot of overlap with https://en.wikipedia.org/wiki/Information_architecture for UI with what's a core activity when doing software architecture e.g. finding the right abstractions, schemas, object hierarchies, groupings and naming conventions that are going to be intuitive to other user/developers.
Indeed. I think it's important to bear in mind that it's ok for the abstractions to differ, and for the view to translate between the abstractions inside the system and the abstractions or concepts presented to the user. But it's certainly the same exercise.
If we see coding as an exercise in describing the system in a way the computer can execute but most importantly, other developers can understand and maintain, developers are simply another persona, and a card sort between developers would elicit the abstractions and names we should strongly consider using for things in the code. Same methods as information architecture for users.
Maybe it's just me, but I thought Information Architecture is design!
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
Parent was talking about coding the UI ("CSS"), not the data.
Sorry im new to design and not familiar with the acronyms. What does IA mean in this context?
Apologies, just scrolled down and read some other comments. Means Information Architecture
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...
Yep, copy but don't look at the source. Make it look 100% the same but do it yourself.
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.
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.
> 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.
Mmmmm...A degree is not needed to be good at design...
_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.
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.
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
Yep. Here's my tip: just drop 15$ on theme forest.
> 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.
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.
> 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?
> 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.
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.
> 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.
I would just do the coding first and use whatever crap I have on hand (Bootstrap, standard fonts) because I want the design to follow functionality, not the other way around.
And because design takes more time than coding for me. So, if I decide that something is wrong and throw the project, this way I lose less time.
Illustrator or Inkscape can import PDFs, so you can iterate between code and graphic design programs by exporting the page to PDF.
That is, somethings are easier to experiment with or to start out in code.
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
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!
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.
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?
> 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.
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.
> 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.
> 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.
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.
Why does every website need a distinguishing feel? Does every published book try to come up with a new typeface?
I mean, a lot of websites are landing pages for products, and therefore serve a marketing purpose. Most books are just books.
The landing page for a product *should* look like most other landing pages. I want to see all the important information in places that I would expect. Pricing, customer testimonials, list of features, documentation/tutorial links, etc., should all be presented up front and there aren't many ways to do that well.
An amazing design could stand out from the crowd but something custom would probably more than likely end up looking worse than using bootstrap/tailwind. Especially since these SaaS companies aren't spending their headcount on hiring designers - they'd probably prefer to hire more engineers to build the actual product. If I see a design company with a boring website then I'd be a bit disappointed but I don't expect that from a run of the mill SaaS company.
> The landing page for a product should look like most other landing pages.
Yes. The big caveat being: In most ways. Much like we are 98% chimpanzees, the pudding is in the remain 2%.
> there aren't many ways to do that well.
Well, no. That is akin to saying "Each house needs a roof and four walls so, really, there aren't many way to do that well". Oh yes, there are so many ways to do it well and even more do it poorly, and, statistically, people are very clearly able to judge which is the case.
Being a great creator (in whatever field) requires the right amount of attention to detail because, really, they are not actually details. They are the pudding.
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.
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.
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.
>"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.
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.
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.
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.
Yer a wizard, Harry
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".
Article says "keep it simple" and then immediately features a professional illustration.
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.
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.
Link to talk
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.
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.
I just want to read semantic HTML and handle the page formatting myself.
> "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!).
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??
> "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.
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.
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?
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.
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.
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.
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.
Landing page is not a website. Wish there were more examples of some functional aspects of good design.
Two words: Refactoring UI
I read it and began to apply what I learned, and my team now considers me the design expert of the team. And trust me, I'm not a naturally gifted designer.
Wanted to second this recommendation.
It's still very hard for me to design a _good_ looking website from scratch as that takes actual creativity and imagination, but after reading Refactoring UI I at least have a bunch of tactics to stop myself from designing _bad_ looking websites, because I now know exactly _what_ makes them look bad.
That is a problem with so many themes I see. For a real web site you need something that scales across pages that have little text and a lot of text, mobile and desktop, etc.
I am trying to learn to make web based application interfaces. Like, say, a web form that manages a stateful process. The user provides info to a form, initiates a set of actions, and then monitors the results and provides further input.
I am definitely not a designer. Mostly I just want a design that looks decent and stays out of the way.
I have tried widget libraries but I have been happier with the results I am getting from plain old css.
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.
I'm not taking web design advice from a website that throws a whole-page popup at me after scrolling a bit.
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.
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.
> 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
No border radius is the recommendation for 'serious' in the article.
The author chose 'fun' where that was allowed according to their own principles.
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.
> I find the big chunky headlines distractingly bold
I tend to scroll down and not read when I see these type of items... but either way, it's the same way on desktop so I think it is intentional
Results may vary. Greatly.
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:
Feedback is welcome.
Hi. I'm a designer, and thought I'd spend 10 mins on this to show the little tweaks I'd reach to first. I didn't do any thinking about the content, and I haven't tried to push away from the brutalist visual style you're going for.
https://www.figma.com/file/pUBqrZ0zUjXfVAc6nR13ZU/Gnod?node-...
Type. Everything about good typography is optimising for legibility. First off, you absolutely nailed the line length. I did increase the line-height to 150%, and swapped roboto for inter. I think Inter UI is a bit easier to read at small sizes, I find roboto comes out kinda excessively bolded on most screens.
Grid / padding. I increased the padding around the card quite a bit, from like 10px to 24px. A good way to find the correct padding is putting in way too much, then pulling it down until it's starting to feel cramped, tip from refactoring ui actually. Everything is in 8px units where possible. Notice the "Welcome to" and "Hello" text are both vertically aligned.
Sizing / visual prominence. Visual prominence is just about telling people where to look first, when you first open up the page, where is the eye drawn. Considering the size of the 'Welcome to Gnod' text, I assume that's what you're trying to highlight. I've reduced the size to just 18px - only 2px bigger than the 16px body font. But, cause it's got it's own padded background colour, it's still right where the eye goes. There's lots of ways to draw attention without size, and you don't need to use more than needed. Same with the dots, I don't really get what they're for honestly, but I made them a bit smaller.
Icons, swapped them out for font-awesome icons, felt a bit more premium idk.
Colour, I changed the pure black to off-black, slightly blue. It might seem like designers just hate contrast, and that might be true. But, there's lots of arguments for using 'rich' blacks, but I won't get into it haha. My subjective choice.
Anyway, that's my 10 cents, ignore as needed haha.
Wow, very cool, thank you!
I just woke up and saw this now.
Your changes definitely make it look more professional. I especially like the larger paddings and that the headline is aligned with the rest of the text.
I will get back to working on the page later in the day and then incorporate some of your changes.
So much better. Well done.
Can you comment on why you introduced underlines for the links?
No big reason beyond I liked the look, and underlining is a good affordance to let the user know it's a clickable link (beyond the heavier weight and colour change). There isn't visually a huge amount going on with the page so maybe adds a touch more flavour.
I’m on my phone, but the text feels too compact. The paragraphs would look better with bigger margins.
Also, the top feels like a logo, navbar, and a hero all in one. I would work on it more as a logo and lose the “Welcome to” since the next sentence also functions as a greeting.
The green dot is an interesting touch, but presently looks like a status indicator/green light, that, on a black background, attracts the eye more than the content and the sign-up button.
Design discussion aside, your site looks really cool. Interested to see where you take it.
Suggestion - I tend to forget these kind of things once a couple of weeks have passed (or at least, forget the name and can never find it again). It's good to have something prominent that I can subscribe to that reminds me what it is you do - a mailing list, Twitter/RSS feed/etc.
I know you have your Patreon, but being honest, I'm unlikely to subscribe straight away the first time I play with something for 30 seconds or so. I need that mental bookmark so I can come back to something a few weeks later. After coming back three or four times, I'm much more open to subscribing.
Glad you like it!
Good point about letting people subscribe to something. I will probably explore some options in this direction.
Would recommend the same green / yellow as the circle for the primary button.
Yes, maybe.
I am not totally sure the green/yellow circle makes any sense though. I consider removing it.
The nav circles are a bit misleading. I'm clicking on them, and nothing happens. Otherwise, the design is very nice!
I think it's a nice start for a unique style. I would suggest highlighting the main action button with some color.
Thanks. The style is already more or less defined by the home page, which I designed a while ago. So I mostly stitched together bits and pieces from the home page for this landing page.
Looks good to me. I quite like its simplicity.
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.
> 2) Typography - primary and secondary fonts. Now your use of any fonts especially custom fonts is no longer arbitrary, and congruent to a theme
It isn’t necessarily a good idea to use the same typeface as the logotype for setting other text, if that’s what you mean. It can make the logo just seem like some text. Obviously not a strict rule, you can make it work, but there’s value in having the logo stand apart.
this should be in the style guide as well, but not all designers do that
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.
There's a tremendous difference between recognizing greatness and having the creativity and skills to make something on that level yourself.
Yeah this seems a bit ridiculous. Imagine if people said this for music. "If you can appreciate good music then you can make good music. Just walk up to a piano and use your ear to correct yourself until it sounds good!"
Comments like these make me think that design is extremely unappreciated as an art form
From the headline, I thought this article was going to go in exactly the opposite direction- in other words, it's possible--and even common--that something looks great and is incredibly poorly 'designed' - because design is not about looks but about being effective.
That said, pretty-ness can certainly aid in actual design if it's serving the function of making something feel easier or more compelling.
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.
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.
Don't sell yourself short. The only reason that should keep you back from designing something great is that it doesn't make sense as you haven't optimised for that.
I can create great designs, I can write great code and I can solve difficult problems in any domain, the issue is that some of those things would take more time that someone who specifically trained be able to do that thing in a reasonable amount of time.
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.
This article is incredibly terrible. Use tailwind? Yikes. How about you use normal css, have consistent spacing between elements, and have a clear hierarchy of type and content?
You don’t need tailwind to do any of that, and you don’t need to be “good at design” to do any of that either.
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.
This is the correct answer. ALWAYS start with the content first. The content will lead the way with the design.
This article is a recipe for ensuring you look just like thousands of other websites out there.
Feature!
Consistency in design and architecture add value.
Differntiate in content, quality, and value.
https://www.nngroup.com/articles/consistency-and-standards/
The big problems are enduring, and inconsistency ranks several times:
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.
I had collected all these
https://bobbydreamer.com/things-that-my-new-site-should-have
Later went with Gatsby starter template.
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.
This lost me at 'Tailwind' which has nothing to do with design.
Ymmv but I’ve found that using tailwind has helped my side project design story a lot. It has me thinking a bit more outside of the components box and makes it super easy to do subtle adjustment.
What does it do besides design?
I'd initially misread this, thinking it was an article on how a lot of websites that look pretty can be surprisingly horribly unusable.
Many of the example sites feature attractive drawings/custom graphics.
Where can one go to find/hire people who can create these?
There are large collections of free-to-use stock art, including museums and the like.
Creating your own diagrams is a useful skill, and can be picked up reasonably easily. As with design, less is more. I'm a fan of Edward Tufte for quantitative information.
Tools such as pic and graphviz remain surprisingly useful and timeless.
That said, a good question.
Who is the user? Who is the site for? How does the design relate to the user and to the problem to be solved?
Repeating references to the same CSS framework are mildly annoying, especially in the given context.
If they actually looked great, that'd be actually nice.
But they don't.
I had high hopes from the title.
So disappointed...
