El diseñador Steve Schoger, del cual ya hemos hablado anteriormente cuando compartimos su serie de YouTube denominada Refactoring UI; en la cual, rediseñada la interfaz de diferentes sitios web y cuando compartió su póster para desarrolladores web sobre códigos de estado HTTP.
En fin, es alguien a quien le gusta ayudar y compartir contenidos de calidad, por lo cual, no exageramos en señala que vale la pena seguirle la pista.
De acuerdo a lo anterior, y en esta ocasión el diseñador está ayudando a la comunidad con 19 consejos de diseño UI bastante objetivos a través de la red social Twitter; consejos que puedes seguir uno a uno a través de este enlace.
19 Consejos de diseño UI por Steve Schoger
? 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. pic.twitter.com/eKxW4jSSs8
— Steve Schoger (@steveschoger) June 12, 2017
? Too many borders can make a design look really busy. Here's a few ideas that are a bit more subtle: pic.twitter.com/JEIrjAS5YL
— Steve Schoger (@steveschoger) August 16, 2017
? Styling content can be difficult. Here are a few ideas that can make a big difference: pic.twitter.com/oiAH4foGJu
— Steve Schoger (@steveschoger) December 14, 2017
? Instead of blowing up small, in-app icons for your landing page, try putting a shape behind them and giving them a background color. pic.twitter.com/BGknNtBzZ2
— Steve Schoger (@steveschoger) November 16, 2017
? Font size isn't always the best way to emphasize or de-emphasize text, try using color and font weight instead: pic.twitter.com/KCtZNrtfkd
— Steve Schoger (@steveschoger) September 19, 2017
? 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. pic.twitter.com/hE5BEKEpqh
— Steve Schoger (@steveschoger) June 7, 2017
? This two-column form layout is great for organizing long forms and filling wider screens without using awkward long form fields. pic.twitter.com/KbErS8hJHM
— Steve Schoger (@steveschoger) September 7, 2017
? 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. pic.twitter.com/v6GQczpoM8
— Steve Schoger (@steveschoger) February 27, 2018
? Overlapping elements on a page is a great way to create depth and encourage users to scroll pic.twitter.com/kD9gGUDH5y
— Steve Schoger (@steveschoger) July 31, 2017
? 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. pic.twitter.com/cdwzjRh5NN
— Steve Schoger (@steveschoger) June 6, 2017
? Giving your box shadows a slight, vertical offset helps to make them look more natural. pic.twitter.com/WcPsK8yFwu
— Steve Schoger (@steveschoger) June 20, 2017
? 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: pic.twitter.com/fh1CxDruSi
— Steve Schoger (@steveschoger) January 16, 2018
? Designing nice tables can be tough, but here's a few ideas that can make a big difference: pic.twitter.com/Q1qcF1hIG6
— Steve Schoger (@steveschoger) September 27, 2017
? 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 ? pic.twitter.com/G4Zs2wLUz0
— Steve Schoger (@steveschoger) April 4, 2018
? Recently had the pleasure of designing the pricing section of @adamwathan’s Advanced Vue Component Design course.
Here are a few visual design ideas I considered to give it some extra polish ? pic.twitter.com/6wMnUTVbJg
— Steve Schoger (@steveschoger) May 9, 2018
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 ?? pic.twitter.com/nlqB3Q2uNg
— Steve Schoger (@steveschoger) June 8, 2017
? Giving your box shadows a slight, vertical offset helps to make them look more natural. pic.twitter.com/WcPsK8yFwu
— Steve Schoger (@steveschoger) June 20, 2017
? "Grey" doesn't have to mean Grey™. Try saturating your greys with a bit of blue or brown for a cooler or warmer feel. pic.twitter.com/ToAMPLfDd1
— Steve Schoger (@steveschoger) March 19, 2018
? If you want text of different sizes to *feel* like the same weight, make larger text thinner and smaller text bolder. pic.twitter.com/kgGQJJh1EL
— Steve Schoger (@steveschoger) March 28, 2018
? 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: pic.twitter.com/NoL3wMtjLV
— Steve Schoger (@steveschoger) May 17, 2018
Visto en: DesignTaxi