CSS code for models page:


(Vlad) #1

What we have now:

But must be this (sorry i'm experienced UI/UX designer):

CSS code:

.card__quick-settings:before {
font-family: "FontAwesome";
color: #ff9e3a;
content: "\F013" " ";
font-size: 20px;
}

.card__quick-settings {
position: absolute;
right: 10px;
bottom: 55px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-font-smoothing: antialiased;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
}

.flag.--staffpicked {
width: 28px;
height: 28px;
padding-right: 0;
margin: 0;
margin-right: 6px;
background-image: url(/static/builds/web/dist/staffpicks-63b07943be48fb043a9a98f8e9b36356.svg);
background-repeat: no-repeat;
}


(Shaderbytes) #2

I like the current design. The settings icon overlaying the thumb edge creates a nice sense of depth to the thumb. I also like the scale of this icon since it is the one thing i actually need to click and interact with most. The overall weighting and flow is good.

Your suggested adjustments are just personal preference :slight_smile:


(Vlad) #3

It not about like or not. It wrong in UX.

You hide important icon - StaffPick == Award, it probably not needed for PRO or Business accoount, but really important for simple users. This is award them can receive if create something good. Also really important for followers, this is like mark that such User - skilled.

And force visibility of icon that page owner already know - Options. That icon required quite rare usage.
And can be hidden under submenu without losing usability.

Also you delete numbers of views - that also .... strange.

UI design is not Design or Art it all about User experience. If UX is broken - UI is bad.


#4

Only the author can see the settings icons, so it won't detract from other visitors seeing the bright orange SP icon.

A main focus of the design refresh is to focus on the art, not metadata and stats.


(Vlad) #5

Ok, here CSS for Stylist Chrome extension if anyone want fix UI design:

.flag.--staffpicked {
width: 28px;
height: 28px;
}

.card__quick-settings {
background-color: transparent;
right: 10px;
bottom: 55px;
width: auto;
height: auto;
box-shadow: none;
}

.card__quick-settings:before {
color: #ff9e3a;
font-size: 20px;
}