DMITRII Rumyantsev

DJ & Producer, Designer & UX Analytics

[DMITRII Rumyantsev @dmudrd]

@arminvanbuuren @asot This is a Test

[DMITRII Rumyantsev @dmudrd]

@arminvanbuuren @asot Classics! Orbion, Mirage, Aisha and others.

[Steve Schoger @steveschoger]

🔥 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]

🔥 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 💅

[Steve Schoger @steveschoger]

🔥 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]

🔥 "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]

🔥 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]

🔥 Styling content can be difficult. Here are a few ideas that can make a big difference:

[Steve Schoger @steveschoger]

🔥 Giving your box shadows a slight, vertical offset helps to make them look more natural.

[Steve Schoger @steveschoger]

🔥 Designing nice tables can be tough, but here's a few ideas that can make a big difference:

[Steve Schoger @steveschoger]

🔥 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]

🔥 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]

🔥 Font size isn't always the best way to emphasize or de-emphasize text, try using color and font weight instead:

[Steve Schoger @steveschoger]

🔥 This two-column form layout is great for organizing long forms and filling wider screens without using awkward long form fields.

[Steve Schoger @steveschoger]

🔥 Overlapping elements on a page is a great way to create depth and encourage users to scroll

[Steve Schoger @steveschoger]

🔥 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]

🔥 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]

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]

🔥 Too many borders can make a design look really busy. Here's a few ideas that are a bit more subtle:

[Steve Schoger @steveschoger]

🔥 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.