You can create a great looking website while sucking at design
thefullstackdev.net
thefullstackdev.net
- 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.
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...
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.
That is, somethings are easier to experiment with or to start out in code.
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.
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.
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.
If it is still a discipline, what does one read to pick it up?
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...
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.
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.
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
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.
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.
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.
Don't need a college degree for making software either
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 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.
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.
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.
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?
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.
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
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!
Or ever.
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.
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.
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.
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.
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.
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.
> 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.
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 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.
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".
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.
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.
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.
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.
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!).
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?
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.
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.
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.
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 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.
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.
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.
Every screenshot on the page is using border radius except for microsoft
The author chose 'fun' where that was allowed according to their own principles.
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 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
I am 45 minutes in and it looks like this:
Feedback is welcome.
I am not totally sure the green/yellow circle makes any sense though. I consider removing it.
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.
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.
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.
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.
Good point about letting people subscribe to something. I will probably explore some options in this direction.
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.
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.
Comments like these make me think that design is extremely unappreciated as an art form
That said, pretty-ness can certainly aid in actual design if it's serving the function of making something feel easier or more compelling.
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.
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.
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.
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.
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:
https://bobbydreamer.com/things-that-my-new-site-should-have
Later went with Gatsby starter template.
Where can one go to find/hire people who can create these?
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.
But they don't.
So disappointed...