NoDesign.dev – Tools and resources for non-artistic developers
nodesign.dev
nodesign.dev
To expand on that, it’s how the pieces fit together within your set of constraints. There’s a LOT in common with what makes code beautiful or not. You get to the essential; nothing more, nothing less. This doesn’t mean “minimalist” , per se — just be wary of ornamentation that doesn’t add value.
A design can be award-winning without much “flash”. A readable font. A thoughtful, consistent, grid, that gives the content some air. Color choices based on accessibility, constrained to a palette that has some meaning for the project, etc.
Don’t be afraid to learn about design! Look to resources like IDEO, who take a principled approach to design that’s not superficial. Think about the field of Architecture, where engineering and aesthetics have been combined for centuries — and where the same concerns of “essential” vs “ornamental” remain an active area of debate to this day.
lots of whitespace and "air" has become especially fashionable in the past many years. it makes design easier in some ways without necessarily pushing it forward. yes, it forces more conscientiousness of essentiality and contribution of each element (a good thing), but it's also used as an ipso facto justification to resist change and meeting needs (a bad thing).
i love seeing designs that are intricate yet coherent. that seems to push boundaries more than "air". that approach seems more challenging than "cut as many elements as necessary to achieve a desired white space ratio".
[0] https://www.bulkrenameutility.co.uk/assets/img-bru/mainscr.p...
And I don't even see a reason that all these different modes need to be visible at the same time. It also takes up alot of space.
There are probably many ways to make this more user friendly, but if it works for you, thats great
As the parent comment said, software should really be built for the user and not just so everyone and their children can use it (unless that's your target group).
Financial terminals don't have the super nice designs to it, but they are highly functional, customizable and fast. A lot of cashier terminals are still running on old hardware with bad designs, yet they are highly functional.
I think there's always room for improvement and with every change you'll see a certain amount of push back, but I think it's important to consider the user and not write "simplified" software, when you have power users in front of you.
It is also true that looking cluttered at first sight does not mean it's not good UX.
Just sticking to some proven standards, even from a 20 year old software book, can really enhance an interface. Right off the bat I can spot a half dozen instances where a text input could easily span to align with an element above it, but it falls a few pixels short.
here we call it the deer - headlight problem. why doesn't the deer dodge? because it's a novel situation, he's under pressure to understand and there's no frame of reference for instincts to take over
same with non driven users (users that aren't doing a specific job) having a novel interface, they don't know which operations and options are irreversibile and so get frozen trying to understand everything the computers tells them at once and once they're overwhelmed they just get stuck
giving UX air is a good catchall that both forces you to parcel only what's important for your user and help user not getting overwhelmed by options
a more detailed advice would be to present branching decisions in order of commitment and only showing the relevant options at each step, but more whitespace is a good rule of thumb because it forces you into wizards without becoming a mouthful like this one, and gives you enough agency to come up with alternatives design to wizards of you can get by with other representations of the data to be manipulated
That's a dangerous thing to say, I think. Because the way it looks is the way it works.
A huge part of design is managing the prominence (and presence/absence) of various elements, so people understand what something does, and find it as effortless as possible to find and take the actions they want.
Prominence is managed by relative size, weight, hue, brightness, saturation, shadow, whitespace, opacity, ornamentation, vertical ordering, horizontal ordering, and so on.
All of those things are how it "looks".
Presence/absence is managed by hierarchy, expand, hover, etc.
All of those are also how it looks, by what's removed or shown.
I think I agree with where you're coming from, especially in your last paragraph. I'm just worried that your first sentence is easily misinterpretable as "as long as all the information is on the webpage, fonts/colors/spacing are mostly irrelevant".
For most, yes, it will end up represented in 'how it looks', but I'm underlining the importance of 'how it got there'.
(Aside: worth just highlighting for everyone that not everyone is sighted, that accessibility matters, and that not every design choice is visual.)
You're thinking of visual design. That's obviously a significant part of a thing's design, but design is about so much more.
This is such a common problem that there is a meme about it "Can you make it pop a little more?".
Providing advice to technical folks is just a small part of this problem.
The IDEO philosophy – which has really influenced a lot of Silicon Valley's best teams – is all about what you're saying. Design Thinking is really about making everyone on the team a designer. Everyone has their speciality, but the Designer's role is to bring everyone together with a process that involves everyone.
This was the approach used by Apple when they first launched their Apple Stores, twenty years ago. Rather than impose a design created in a vacuum, they brought together a diverse team that included someone representing the retail employee perspective.
Also, just to nitpick - Apple has produced some of the worst products with no understanding of what the user wants - for e.g. Apple Music App. Also, Google, a recent one - Google Meet hides its mute/unmute button and in a completely undiscoverable way. Imagine driving a car where the brake pedal disappears only to appear when you hover your arm in a particular position left of the steering wheel. Now you can apply brakes. That's what they're doing with Google Meet, when I want to unmute to say something, I have to hover my mouse on the bottom of the screen and the unmute button pops up. Why isn't it always visible!? If I were leading that project, I would ask the team to scratch the entire UI and rebuild it and make sure these things don't happen again.
Microsoft Teams does the same thing, only with the entire toolbar, not just a single button.
The former tries to distill design into a largely linear, repeatable process (that can be peddled by consultants, if I’m being a bit cynical), the latter would characterize such approaches as reductionist and limiting.
Dangerous to separate these. Poorly looking sites have poor experiences. Of course, aesthetics are subjective, so I'm speaking generally here.
My philosophy for design is to always, without exception, strive for a good looking and functioning site. You can't have a site that works well that looks like shit. Conversely you can often find sites that look great but are absolutely unusable.
The best Visual Designers have superb pattern-recognition skills for applying principles they've become familiar with in their education and professional work. They can quickly recognize a certain type of problem, and call on their depth of experience to apply a solution. But even the best can slip into habit of using well-worn tricks in situations where perhaps a different approach would be more fitting.
There are many sites that work well even though they look like shit. Craigslist is a good example.
You said "poorly looking sites" can't work well. But Craigslist works fine, even though it's visual design is as homely as anything you'll find.
The point is that "visual design" is not "design". If you don't like my example, surely you can think of others.
I think:
1) Design is like a muscle, you can always develop it
2) Digital experiences [1] are all around us! And they play a more pivotal role in our lives as time goes on.
So, hit the gym (practice) & with time everyone can improve.
[1] As the https://mintdata.com founder here, I'm highly biased -- I'm not a designer but certainly aspire to improve along this dimension.
I agree that it's trainable, but to create a good icon a first timer can spend several hours. Several hours in which they could be doing work that they have trained for.
If one intents to be a sole developer then yes, they have to improve in all fields, but when one is in a team one has to let some things go, and let people better than them on that field do them.
In fact a UI is a programming language, just a visual, and usually very constrained one (for better or worse).
What I'm saying is that beauty in design doesn't come from slapping a facade onto something. It comes from a harmonious relationship between all the elements, adding up to something that solves the particular 'problem' of that site.
UI is a specialization within UX, the way databases are a specialization within Computer Science. CS deals more broadly in the constraints of memory, time, resources, etc. Databases deal with the same things, but through a specific lens.
UX deals with a set of constraints as well. The business needs, the user needs, etc. UI deals with a narrower subset of those constraints.
The fonts you choose, the colors you choose, the information density – if these are intentional choices based on your particular set of constraints, you'll end up with something elegant. That elegance is what makes something feel right.
Design is technical. Illustration is creative.
They sell a (rather expensive) book on web/mobile app design that explains how to build your design system and use it to create great looking apps. They cover all the bases you would expect like fonts, line-heights, colors, shadows, borders, sizing, working with images, visual hierarchy, using white space, etc. etc.
I'm a developer by trade and I work primarily with one other developer, so we end up doing all of our design work. This book really helped us step up our game and gave us some very simple tactics to use to improve our designs. Imho, it was well worth the price.
I used to do a lot of web design back in ~2004-2008 before i became a developer, and while i like that the web nowadays is more accessible the design of today lacks individuality.The brand design is more shaped by the choice of colors and fonts imho.
> Overlapping images is a great way to add depth to an interface and make it look more “designed”.
I don't know if this is sarcasm. No one is asking why do we need to add "depth"? What problem is "depth" of overlapping icons solving?
I would stay away from this.
Many people interpret quality of design as an indicator of content or product quality.
To address your particular question, depth creates a more realistic and visually interesting representation of information on a screen. It can also serve to indicate the priority of information on a page. If depth draws your eye to or away from a particular element, it can help to achieve the designer's goals.
I am just speaking my mind, what kind of things prevent me from trusting others despite of their benevolent intentions. Time and again, I've been bitten by bad subjective advice - there is a lot of bullshit out there. Tread carefully, adopt what makes sense to you and ignore others unless evidence shows otherwise. That said, there are a lot of gems out there as well.
If the thing I am making is art and is subjective, then why can't I just be original? If a particular activity is totally arbitrary, then all bets are off.
Blindly following advice is why we as a society get stuck in a local optimum and don't try other things. Domain exploration and experimention, originality and authenticity are paramount to getting out of the local optima. Every once in a while someone does and they revolutionize the world.
Anyone who can draw knows what that means.
You don't have to do everything on your own, and you definitely shouldn't compromise on design if you want your project to succeed.
- you may not be able to find the talent where you are (good designers are not uniformly distributed, and remote may not be possible for you. Source: lived in Africa)
- you may want/need to know the basics to evaluate the work of a designer, hire one or just communicate efficiently with one
- you may just be curious, and want to learn that for you. Or transition to be, you know, a designer :)
Unless it is an open source project I feel it would be rude to ask someone to work for free on it.
I said work with a designer, as in a collaboration. As in bring them onboard as a co-founder, give them equity, have an agreement to share profits. Pay them if you can. Share skills by getting them to do design work on your side project in return for coding their side project. There are lots of ways to work with people.
I am absolutely not suggesting anyone asks someone to work for free. That's exploiting people. Don't do that.
But I believe a UX designer would make a great co-founder if they focus on user research, information architecture, and interaction design.
I don't know much about UX designers jobs, do they deal with project management often?
[1] Conversely, a lot of product managers do not have the same UX sense of a good designer. My favorite PMs are ones that have a solid UX background.
Product management and UX get pretty blurry (positively) when product management wants to generate value to customers by listening to them/distilling what users want into a good strategy that meshes with the business.
Project and program management are detached from the skill set of both product manager and UX experts. One can have the skills, but it is not because they know product or UX.
[1]: https://en.m.wikipedia.org/wiki/Brian_Chesky
[2]: https://en.wikipedia.org/wiki/Joe_Gebbia
That’s 2 out of 3 co-founders.
They'd both be high though, that's for sure.
That said wouldn't it be risky to bring someone you hardly know on as cofounder?
Does anyone here have good experience with that?
Presumably you'd exchange % of future revenue / profit share, or an equity split if it's a company.
Or if it's not a revenue-generating project, there might still be people who would help you out in order to build their portfolio.
How can a person with minimal design skills (ie. me) tell if a designer is any good? I know when I like something, but I can't trust my own taste.
This sounds like a pretty cynical take. I know plenty of designers who want to design for tech, not because they "don't have the skills" to "build tech stuff" but because they have different skills, aka design skills (user research methods, applying UX best practices, visual design, the list goes on). Although many design departments may have originally started under engineering, I like to think that designers have much more to contribute than being developer-wannabes that your comment might imply.
That said, I agree with the rest of what you said! There are lots of designers out there who want a chance to practice their skills, and I encourage everyone to at least get your project design critiqued!
> Reach out to some on social media
Any tips on how, or where?
My experience with fiverr is very much "hit or miss" and getting designers interested for a startup in very early phase is hard in my experience.
fiverr (or Upwork etc) are just meat markets and a race to the bottom, being hit or miss should be expected from those platforms: if you try to buy things on the [extreme end of] cheap, then often the end product is not going to be particularly good.
How are you paying them? Fiverr is a low-price marketplace and not where I'd try to find the best talent. Getting good Fiverr designs requires a lot of work and some understanding of design. The latter seems to run counter to this thread. Ultimately, you won't get great design on the cheap.
My personal experience is the lowest cost option for really great design is having a couple of thousand dollars on retainer with a contract designer, or small design agency. Go through your working prototype and see how they can uplift the existing design within your budget. If you can come inside budget then get the same designers back later for more bits and pieces. This is how you build up a relationship and they might cut you some slack, such as doing an updated email template, or some other one-offs.
Using bootstrap, or another standard framework is a potential win. They may be able to provide customizations for you directly. If you have a completely custom frontend, or something that's highly engineered, then it's harder and more expensive for developers to work with you.
It goes without saying that you need to own the copyrights on the assets they create for you. The other part is that you need things in the right formats. If they created illustrations, then get the original AI files, not only the exported image files. If you have the source files, then you can make your own tweaks later. So many people forget to think about this. I've had to make tweaks 100% of the time. Copyright issues will come up much later and hinder you when you are successful, but it's easy to deal with those initially.
If you don't have a couple of thousand to budget toward design then you should stick to generic templates because designers don't work for free. They generally don't win from startup success because of the bias towards engineers, so don't expect them to keen to work based on some promise of success and payment later.
I am well aware of fiverr being the low-end of the spectrum, which is why I used that as example. As opposed to "finding a designer", which is costly.
I was not trying to argue that I want to hire a designer for a fiverr-price. Slavery has been abolished in Europe and I would not like to bring it back, thank you very much.
The advise to move forward with commonly known frameworks such as Bootstrap is a good one. As it allows to bring in (and properly pay!) designers when you can afford it.
I can search trough it now via CMD+F, but it would be nice to add a search function showing a list of results. It can be very basic keywords search.
The only URL I found that didn't support HTTPS was https://www.entypo.com/images/entypo-webclip.png
If the application works, hire someone with design skills. They can work on contract basis as well.
Any suggestions for using Bootstrap or another CSS framework without using JavaScript? I'd like a pure CSS framework. Bootstrap looks good, but doesn't document what if any limitations will apply if not using their JS.
On top of that, it uses CSS classes for things like "this button is rounded" (https://bulma.io/documentation/elements/button/#styles) or "this tab bar has borders around its tab labels" (https://bulma.io/documentation/components/tabs/#styles).
The kind of CSS framework I expected was one that provides semantic classes for things like tab bars and similar, and then themes can decide things like "my tab bars should have borders around their tab labels". (And, as a side effect, the CSS would also be smaller, since it only needs a style for "tab bar", and not "tab bar without is-boxed" and "tab bar with is-boxed".)
https://getbootstrap.com/docs/4.5/getting-started/introducti...
I don't think anyone but you will be able to give an exact response to this. After all, it depends on your product and how you want it to look.
Remember, when it comes to design there are no universal right answers.
If you struggle with knowing where to even start, then working with a designer is probably your best bet.
CSS is just a programming language.
I am as talentless a designer as any of you but I stopped reaching to libraries and frameworks to solve my design issues, and started learning modern CSS and some basic design skills.
Lots of good books and web sites, and my personal preference is video courses through Lynda.com, which I get for free through my public library.
I started with Essential CSS as a refresher. If you don't know much about CSS it's a good start. https://www.lynda.com/CSS-tutorials/CSS-Essential-Training/5...
Now I'm watching Design Aesthetics for the Web https://www.lynda.com/Design-Techniques-tutorials/Design-Aes...
On the same topic as "you don't need frameworks to get jobs done", the next one I'm going to take is learning ES6, because modern browser-supported javascript isn't completely terrible anymore.
My advice for founders: copy.
Find a design you like, brand colors you like, and just copy it exactly. Colors, shadows, spacing, layout. As long as it is an established brand/company, the UX will be good enough that it won't harm your startup. And that's all you are going for initially: a design that doesn't turn customers away.
If you can spend money on marketing, you cannot afford to not spend money on ensuring the UX is working for your users and to get insight into if poor design is the reason behind not performing as expected for your bottom line.
Pro-tip: UX is NOT UI (there are a lot of off the shelf design systems that make designing UI trivial e.g. Salesforce lightning design system, material design, etc. - hire someone who is a UX design generalist until you can afford specialists - UX designers/researchers).
Does anybody have experience with https://tailwindui.com/. As dev I like the tailwindcss and the founder released this some time ago and I am wondering if it's worth the price.
Before you get into tailwind-ui, I would start out with the basics of tailwind, which can already take you quite far. I would even say, that using simply tailwind will make your design unique in a way that tailwind-ui won't. That way, while you are in the process of designing your website, you always have the option, to extract your own components and don't fall back to templates which restrict your design.
One video, which was eye opening for me, was watching Adam Wathan rebuild Netlifly from scratch [1]. My takeaway: You don't need fancy ui-components to build something great.
Some feedback for the site: make the titles of each product a little more clear. For instance, "Free Stock Photos: High-Res Images for Websites & Commercial Use" doesn't tell me what the website is until I hover over it.
EDIT: Another thing, I was expecting the filters to be additive (i.e.: if I select "Art" and "Fonts", I would expect to see results from each category, instead I get nothing)
https://www.sessions.edu/color-calculator/
I always struggled with picking complimentary colors and found this worked a lot better than most of the pre-defined color palette suggestions out there.
I mean there's nothing to stop someone from downloading photos from Flickr and uploading them in their own name to one of those CC0 websites, especially because the latter will usually do no contributor verification at all. But no matter what the website says, you - the person using the image - will be held legally responsible in case it was wrongly promoted as CC0.
Edit: what winkeltripel said
Btw, I hope you can add more combine elements of LOGO, yeah, current combos are already amazing!
For how long have you been using this tool? (Enter a number)
What does this number mean? Number of years/months/projects/...? I entered 2 and 1 and have no idea what you meant.
What? Years
So 2 years.
Or 2 write “months” if 2 months, or “projects” if 2 projects.
Of course some of the choices are personal opinion as to how good they are - especially items like UI Designers, but still good to have the choices in the first place.
Server-side rendering
ORM (Ruby/Django)
Bootstrap (jQuery one)
FontAwesome
Google Fonts
Template from a store $50 - takes you from 0 to 1
Hetzner $40/mo single real hardware server
CPU: How long have you been using this framework?
Me Type: 1 YEAR
CPU: Must be a number greater than 0
Me Think: Mmm ok
Me Type: 525600
CPU: Thank you!
you have color twice as choice btw ;)