Ο Steve Schoger είναι ένας πολυεπιστημονικός σχεδιαστής με έδρα το Kitchener του Οντάριο. Όταν βρίσκει ελεύθερο χρόνο, επιμελείται το 'Little UI Details' - μια συλλογή Twitter με σύντομες και χρήσιμες συμβουλές σχεδίασης για UI / UX σχεδιαστές.
Τα tweets του Steve καλύπτουν διαφορετικά στοιχεία του σχεδιασμού UI και περιλαμβάνουν, επίσης, εικόνες πριν και μετά, οι οποίες κάνουν ακόμα πιο εύκολο στο κοινό να καταλάβει τις προτάσεις του. Δείτε μερικά καλά UI/UX Tips παρακάτω.
1. Λιγότερα τονισμένα κουμπιά call-to-action για αρνητικές ενέργειες
“A subtle link for negative secondary actions often works better than a big bold button.
(Just make sure you have a confirmation step!)”
— Steve Schoger (@steveschoger) August 2, 2017
2. Μικρότερη χρήση πλαισίων
“Too many borders can make a design look really busy. Here's a few ideas that are a bit more subtle:”
— Steve Schoger (@steveschoger) August 16, 2017
3. Στοίχιση κειμένου
“Aligning text is an easy way to clean up your design and make your content much more scannable.”
— Steve Schoger (@steveschoger) June 15, 2017
4. Αύξηση θερμότητας (saturation) χρώματος γραμματοσειράς
“Pure grey text always looks "off" on a colored background. A quick fix is to saturate your text with a bit of the background hue.”
— Steve Schoger (@steveschoger) June 12, 2017
5. Διακριτικές σκιές
“Adding a subtle shadow to white text when on a bright background not only makes it more legible but helps it 'pop' more.”
— Steve Schoger (@steveschoger) June 29, 2017
6. Μορφοποίηση εικονιδίων
“Instead of blowing up small, in-app icons for your landing page, try putting a shape behind them and giving them a background color.”
— Steve Schoger (@steveschoger) November 16, 2017
7. Θερμά γκρίζα
“Grey doesn't have to mean Grey™. Try saturating your greys with a bit of blue or brown for a cooler or warmer feel.”
— Steve Schoger (@steveschoger) March 19, 2018
8. Ομοιομορφία σε κείμενο διαφόρων μεγεθών γραμματοσειρων
“If you want text of different sizes to *feel* like the same weight, make larger text thinner and smaller text bolder.”
— Steve Schoger (@steveschoger) March 28, 2018
9. Hero banners
“Desaturated photo + bold color + blend-mode: multiply. Great for hero banners and creating high contrast for text.”
— Steve Schoger (@steveschoger) July 20, 2017
10. Επικάλυψη (overlapping) στοιχείων
“Overlapping elements on a page is a great way to create depth and encourage users to scroll”
— Steve Schoger (@steveschoger) July 31, 2017
11. Box shadows
“Giving your box shadows a slight, vertical offset helps to make them look more natural.”
— Steve Schoger (@steveschoger) June 20, 2017
12. Εικονίδια με λιγότερο έντονο χρωματικό τόνο
“If I am using icons that have more weight than the text, I typically make the icons slightly lighter than the text for inactive states ????????”
— Steve Schoger (@steveschoger) June 8, 2017
13. Checkmarks vs. Bullets
“Using a generic icon like an arrow or a checkmark instead of the standard bullet is a great way to add visual interest to unordered lists.”
— Steve Schoger (@steveschoger) June 7, 2017
14. Χρώμα στην κορυφή της σελίδας
“Adding a hint of color (4 to 6px) to the top of your hero is a simple trick to bring more liveliness to your design.”
— Steve Schoger (@steveschoger) June 6, 2017
15. Αντίθεση vs Διαχωριστικής γραμμής
“A technique I've been using lately on panels to distinguish the titles instead of a keyline is using subtle contrast:”
— Steve Schoger (@steveschoger) June 5, 2017
16. Gradients με θερμές αποχρώσεις
“Make your gradients appear more vibrant by adjusting the hue by a few degrees (10º or 20º max) in either direction.”
— Steve Schoger (@steveschoger) June 26, 2017
17. Μέγεθος γραμματοσειράς: 16px / Ύψος γραμμής: 1.5
“If in doubt, 16px font with 1.5 line height is pretty good safe for body copy.”
— Steve Schoger (@steveschoger) June 1, 2017
18. Απόσταση μεταξύ γραμμάτων όταν σε μία φράση είναι όλα κεφαλαία
“Quick tip: All-caps can sometimes be difficult to read. Consider using letter-spacing to give your text a little more room to breathe”
— Steve Schoger (@steveschoger) May 31, 2017
19. Μορφοποίηση φορμών εισαγωγής (π.χ. αναζήτηση)
“Little details go a long way when styling UI components. Here are a few different ways to style inputs:”
— Steve Schoger (@steveschoger) October 18, 2017
20. Κατασκευή χάρτη
“How to make a stylish map with no graphic design skills ????”
— Steve Schoger (@steveschoger) July 6, 2017
21. Χρήση γραμμών για σύνδεση στοιχείων
“Keylines are not only great for dividing content but also making disconnected content feel more connected.”
— Steve Schoger (@steveschoger) July 5, 2017
22. Πολλαπλάσια για ορισμό αποστάσεων
“Using multiples to define your spacing is a great way to achieve vertical rhythm and provides a formula to justify your choices”
— Steve Schoger (@steveschoger) July 13, 2017
23. Χρήση δύο στηλών σε φόρμες
“This two-column form layout is great for organizing long forms and filling wider screens without using awkward long form fields.”
— Steve Schoger (@steveschoger) September 7, 2017
24. Χρήση χρώματος και πάχους σε γραμματοσειρές για να δοθεί έμφαση
“Font size isn't always the best way to emphasize or de-emphasize text, try using color and font weight instead:”
— Steve Schoger (@steveschoger) September 19, 2017
25. Ύψος γραμμής
“Using the same line-height for all text is a very subtle but common mistake. 1.5 may work great for body copy, but as text gets larger, your line-height should get tighter.”
— Steve Schoger (@steveschoger) February 27, 2018
26. Σχεδιασμός πινάκων
“Designing nice tables can be tough, but here's a few ideas that can make a big difference:”
— Steve Schoger (@steveschoger) September 27, 2017
27. Μορφοποίηση περιεχομένου
“Styling content can be difficult. Here are a few ideas that can make a big difference:”
— Steve Schoger (@steveschoger) December 14, 2017
28. Dropdowns
“Dropdowns can be more than just a boring list of links. They're just boxes, you can do anything you want with them!
For example, this two-column layout is great when you want to add supporting text:”
— Steve Schoger (@steveschoger) January 16, 2018
29. Επικάλυψη (overlapping) εικόνων
“Overlapping images is a great way to add depth to an interface and make it look more “designed”.
Use a border that matches the background color to create distinction and keep things looking clean ????”
— Steve Schoger (@steveschoger) April 4, 2018
30. Σκεφτείτε έξω από τη βάση δεδομένων
“Don't be afraid to "think outside the database" — your UI doesn't need to map one-to-one with your data's fields and values.
Here are a few ideas you can use to present "field: value" data in a more interesting way:”
— Steve Schoger (@steveschoger) May 17, 2018
