- Anytime you find a UI or mechanic you like while on the web, take a screenshot of it and save it
- Pick a palette from flatuicolors.com; congratulations, just use this forever (forever until you've gotten better at design to change)
- Make a logo with Photoshop, GIMP, or whatever graphics program you have using that above color palette
- If you have the time, sign up for Daily UI (dailyui.co) and and practice making mockups. Even if you're trying to learn front end web development, this will let your creative juices practice.
- Keep going! Everything you make on day one will suck, or look super cookie-cutter Bootstrap-y. So what, each time you make something, you'll hate a small piece of it and so when you make the next thing, you'll try to fiddle with that detail.
There are probably (much) better ways to get better at design, but this was the path I took and while I'm not going to be making a massive application for clients, what I have makes for pleasant looking visuals for my students and tools
Make a logo
Facebook: F on squarish background
HackerNews: Y on orange square
Google: Google with coloured letters (or multicoloured G in white circle)
LinkedIn: blue `in` text
You get the idea... they don't need to be complicated and could be as simple as just text.
Making something look simple but not boring, mundane or like a copy of something you saw 10 times today, is hard because it is highly depending on context and context is depending on understanding.
Facebook can get away with an f (and more so, it works for them) because it makes identification easy when it is ubiquitous – but that is not automaticaly the case when you have no brand recognition. The simple f might just be forgettable or, worse, remind people of something else.
There is a ton of additional caveats. That is what is hard about visual design: It is infuriatingly different even when you think it shouldn't be, every single time, and understanding both how and why it doesn't work – and I guarantee you, it will not work before it eventually does – is a recurring challenge for every designer, regardless of how simple the design or how experienced the designer.
Other than that I do agree.
Tips that help me are the antithesis of what you said. In fact, I believe that if one follows these tips, you're worse off.
- Anytime you find a UI or mechanic you like while on the web, take a screenshot of it and save it.
Instead of blindlessly snipping things on the internet, try to understand why you like it. What fundamentally makes it fun/pleasure to use?
What guides one from picking their "favorite"? You're omitting the entire "black box" that makes the designer pick their favorite. This black box is biases and training of looking endlessly on Dribble and other designers on Instagram. This is trend chasing. This is how you get practically every damn startup with a magenta-purple aesthetic we see all too often from Firefox to Datadog.
Instead start from the bottom-up. Can you get by without using a color? What does adding a color buy you? Why should you use different colors? Is there a hierarchy of importance that needs to be conveyed to the user? Why is a color needed in the first place?
Also make an owl (from another comment)
IMHO - UI that emerges out of the product-user interaction rather than chasing some trends, pintrest board or inspiration from other sites, is guaranteed to be functional because it was the first checklist in the designers process. Once functional, you can work on context seperation using colors or whitespace or typography, whatever...
Wow those are some gaudy colour schemes that all look the same.
- This post only touches on visual design. Important, but just a subset of what "design" is.
- Dribbble is very "artsy" and not typically as focused on practical product design. I personally dont think its beneficial to spend time there, unless like the author states, you're interested in emerging visual trends.
- The author doesnt mention the foundations of design, which is disappointing. Spacing, alignment, visual hierarchy. affordances, etc. If you're building an app without a designer its far more important to understand those concepts than how to design a logo.
My advice, depending on how much time you're willing to invest:
- Read "Dont Make me Think" by Steve Krug (2.5~ hour read)
- Read the first half-ish of "The design of everyday things" (4 hours?)
- You may balk at the length of those reads, but I promise you, spending one day to learn design fundamentals is an extremely valuable use of your time.
Common mistakes I see developers making:
- No attention to spacing consistency
- Not creating enough space between unrelated elements
- Not aligning enough things
- Weak visual hierarchy
- Misusing radios vs. checkboxes vs. dropdowns, etc
But with that said, it’s surprisingly hard to recruit designers to work on OSS projects, and I think you need to start out with a half-decent design before people who can actually help you will want to join on. So thank you for the input.
All good points you make, and after reading the comments here I will definitely pick up Don’t Make Me Think
Visual design is important — a pleasing site can have actual usability and accessibility impacts. But to paraphrase Steve Jobs, great design isn’t just what it looks like — it’s how it works.
I say important for developers because when we’re creating something it can be easy to make decisions that are easy for us, but not great for the user. (This is why solving your own problems is often recommended — if you’re passionate about the problem, and you yourself are a user, you’ll by nature make better decisions.)
While visual design is important, applying a nice coat of paint to an otherwise miserable UX won’t solve any problems.
Yeah, this is when it became evident that this was about chasing visual design trends, not about user experience.
1. Quick skim of the start. <thought>This looks interesting, and even worth saving for later detailed review</thought>
2. I go to save the page. Search box opens and starts filling out with the name of the directory I was pre-typing to save into.
3. <thought>I must have clicked unintentionally. Or mis-hit the tab key? Strange; I don't recall it. Try again.</thought>
4. Same result.
5. ?!$$@?. Test to be sure.
6. Confirmed. <thought>They have bound cmd-s to give the search box focus instead of allowing the user to save (seemingly unintentionally; ie due to 's' being pressed without recognising that a modifier key was also pressed)!</thought>
7. Cmd-W. Window closes. Not saved.
8. <thought>Nope, they didn't also overload 'w'</thought>
I will not take pointers from a site that messes up UX as badly as this. Anything I don't recall from a quick skim is not going to be worth using.
"The Non-Designer's Design Book" by Robin Williams.
An example of a key UX design concept: Visual hierarchy. It doesn't require any special tools, just a little understanding of what it is and why it's important. And it's fundamental to good interface design
You got any good resources you'd recommend to read about the visual hierarchy concept?
I can also highly recommend the book they sell.
Which might actually make you worse off because you'll waste your time trying to implement some design concept without understanding whether it's really appropriate for what you're doing.
I don't really want to be chasing what the "best" design professionals do. Rather I want to replicate the experiences I see on the most common web sites, the ones that I visit. That's often deceptively difficult, especially if what users are familiar with comes from sites like Facebook (that have large teams of professionals in both design and programming), but it's at least a common thing I share with my users.
And maybe Design of everyday things as well.
Design and designers today are completely and utterly misguided, self-serving and chasing trends. Yes, its a strong statement but I have observed complete lack of understanding of how to make products and services with users in mind. From Apple to your typical SaaS startup, from Slack to Stripe.
Design is not only appearance. It is how a thing works (quoting Steve Jobs who himself didn't follow his own advice). About the only Designer I deeply admire is Dieter Rams. There is so much clarity in what he devised and designed.
In my experience, engineers are ‘How it works’ people way more than they are ‘How it looks’ people. The UX article they didn’t write would be more helpful. It’d be hard to write, and I understand why they didn’t.
There’s a lot of good UI kits available now. Those open source projects need better UX way before they need better icons, fonts, logos, etc.
Working with existing controls and layouts, with pre-set helper classes is a good way to have good design on a product you're building rapidly and get a feel for what elements exist in useful design.
Often times developers and designers don't take the time to even understand Bootstrap or how to use it's layout system, instead choosing to hack it by adding CSS classes until it "looks right". These design choices often fall apart with the slightest change to display size or upstream changes in the HTML.
Simply by using these you can become more mindful of design. Asking a dev to start from zero and learn design is not realistic and for a potential solo technical startup founder a waste of time.
If designers don't understand bootstrap layouts that's fine. But if a developer doesn't they are not trying. And these templates don't fall apart from small changes, they are built responsive from the get go and have tons of helper classes so developers can still alter them without hacking them up.
To address a few of the comments here: in the first section I mention that I’m specifically not going to talk about UX which is a huge article itself. Hopefully people can find some value in the content that’s there rather than judging the content that’s not. I realise that design is very opinionated, but if you read this with an open mind you may find some useful tips.
It’s the middle of the night here, but I’ll try responding to everyone when I wake up tomorrow
like the basic is to design for the humans to the other side of the screen, and you want me to shift around or read the thing looking sideways?
there's more than visuals, it's forgetting the most important thing, whom we build things for.
but anyway, here's a different take: just build wire frames of the structure as needed to whatever default your framework has, then pay a professional. if you bill yourself your time, or factor in cost opportunity, you'll inevitably come ahead.
Paying attention to how things align, how big they are, how much and how consistent the spacing around elements is will make a huge improvement to the perception of the UI.
1. Go to a site like ThemeForest
2. Click on Admin Theme
3. Filter for Bootstrap 4
4. Find one that looks good
6. Start coding knowing your app will look professional and well-designed immediately.
Except for the recommendation of utility-first css. Tried it, not for me.