or how to make something actually useful out of this design style
Just to break the habit of (more or less) flat designs coming from Google/Microsoft/Apple and elsewhere lets look at neomorphic design, kind of already known between designers, and how I actually managed to make the whole interface based on it despite its drawbacks(described below).
On its own, the neomorphic design, has flatness when you apply just one way to show it:
in this case putting content right in the flat or pressed containers/buttons/inputs might still look fine but you might start to second guess if some element is a button, an input or simple text, not quite straight forward I would say.
So lets add some concave and convex effects to buttons and inputs:
and there you have it, this effects give to the UI elements subtle clues that differentiate inputs(concave) from buttons/actions(convex) and from flat surfaces of simple content such as texts or images.
After some experimentation I built a framework of rules on where apply which effects to have as much as possible diverse UI elements and keep it applied and coherent throughout development. Following are categorized UI elements based on flat(aka elevated), concave, convex and pressed effects:
Flat & Pressed
Definition images:
In no particular order the UI elements on this surfaces are:
- Labels
- Input help/validation texts
- Texts, more or less long
- Plain links
- Empty containers description texts
- Lists containers
Pressed Concave
Definition image:
By this effect I would apply mostly to:
- Inputs, such as texts, textboxes, checkboxes, dropdowns, etc.
Practically the pressed concave effect makes up for a, what I would describe, subtly deep and soft container for input. The concavity comes from having a background linear gradient that goes from top left dark shadow colour to the bottom right light shadow colour.
Flat Convex
Definition image:
Meanwhile this kind of effect is more appropriate to:
- Buttons
- Actions
- Tabs
They look elevated and inflated, pretty similar to real world old style top-rounded physical buttons.
Layering
Here I found that stacking layers have to be balanced, the more layers there are the lesser the elevation should be, which gives a pyramid kind of effect.
The same could be said when using pressed layers and going further down:
And then you can mix and match, without exaggerating and trying to use the same level elevation or the one above or below:
Sidenote about icons
I went with a duotone type of icons available in Font Awesome, the solid ones didn't give enough detail or emphasis so I went with duotone with colours coming from the main one.
Here I think I'll do more experimentation to figure out if complementary but different colours can improve a more distinct and emphasised look/perception.
Here's some SCSS that I use for different elevation/flat and pressed effects
.neomorph {
box-shadow: -8px -8px 16px var(--light-shadow), 8px 8px 16px var(--dark-shadow);
&Inset {
box-shadow: inset 8px 8px 16px var(--dark-shadow), inset -8px -8px 16px var(--light-shadow);
&Small {
box-shadow: inset 6px 6px 12px var(--dark-shadow), inset -6px -6px 12px var(--light-shadow);
@include MediaQuery(phone) {
&-mobile {
box-shadow: inset 6px 6px 12px var(--dark-shadow), inset -6px -6px 12px var(--light-shadow);
}
}
}
&XSmall {
box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow);
@include MediaQuery(phone) {
&-mobile {
box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow);
}
}
}
&XXSmall {
box-shadow: inset 2px 2px 4px var(--dark-shadow), inset -2px -2px 4px var(--light-shadow);
@include MediaQuery(phone) {
&-mobile {
box-shadow: inset 2px 2px 4px var(--dark-shadow), inset -2px -2px 4px var(--light-shadow);
}
}
}
}
&Small {
box-shadow: -6px -6px 12px var(--light-shadow), 6px 6px 12px var(--dark-shadow);
@include MediaQuery(phone) {
&-mobile {
box-shadow: -6px -6px 12px var(--light-shadow), 6px 6px 12px var(--dark-shadow);
}
}
}
&XSmall {
box-shadow: -3px -3px 6px var(--light-shadow), 3px 3px 6px var(--dark-shadow);
@include MediaQuery(phone) {
&-mobile {
box-shadow: -3px -3px 6px var(--light-shadow), 3px 3px 6px var(--dark-shadow);
}
}
}
&XXSmall {
box-shadow: -2px -2px 4px var(--light-shadow), 2px 2px 4px var(--dark-shadow);
@include MediaQuery(phone) {
&-mobile {
box-shadow: -2px -2px 4px var(--light-shadow), 2px 2px 4px var(--dark-shadow);
}
}
}
&Bottom {
filter: drop-shadow(8px 8px 14px var(--primary-color-dark));
}
}
.neo {
&Btn {
background: linear-gradient(145deg,var(--primary-gradiend-light),var(--primary-gradiend-dark));
box-shadow: -3px -3px 6px var(--light-shadow), 3px 3px 6px var(--dark-shadow);
border: none !important;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
&:focus {
box-shadow: -3px -3px 6px var(--light-shadow), 3px 3px 6px var(--dark-shadow) !important;
border: none !important;
}
&InsetPlain {
background: linear-gradient(145deg,var(--primary-gradiend-dark),var(--primary-gradiend-light)) !important;
box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow) !important;
border: none !important;
&:focus {
box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow) !important;
border: none !important;
}
@include MediaQuery(phone) {
&-mobile {
background: linear-gradient(145deg,var(--primary-gradiend-dark),var(--primary-gradiend-light)) !important;
box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow) !important;
border: none !important;
&:focus {
box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow) !important;
border: none !important;
}
}
}
}
&Small {
background: linear-gradient(145deg,var(--primary-gradiend-light),var(--primary-gradiend-dark));
box-shadow: -2px -2px 4px var(--light-shadow), 2px 2px 4px var(--dark-shadow);
border: none !important;
&:focus {
box-shadow: -2px -2px 4px var(--light-shadow), 2px 2px 4px var(--dark-shadow);
border: none !important;
&:not(:active) {
box-shadow: -2px -2px 4px var(--light-shadow), 2px 2px 4px var(--dark-shadow);
}
}
@include MediaQuery(phone) {
&-mobile {
background: linear-gradient(145deg,var(--primary-gradiend-light),var(--primary-gradiend-dark));
box-shadow: -2px -2px 4px var(--light-shadow), 2px 2px 4px var(--dark-shadow);
border: none !important;
&:focus {
box-shadow: -2px -2px 4px var(--light-shadow), 2px 2px 4px var(--dark-shadow);
border: none !important;
&:not(:active) {
box-shadow: -2px -2px 4px var(--light-shadow), 2px 2px 4px var(--dark-shadow);
}
}
}
}
&InsetPlain {
background: linear-gradient(145deg,var(--primary-gradiend-dark),var(--primary-gradiend-light)) !important;
box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow) !important;
border: none !important;
&:focus {
box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow) !important;
border: none !important;
}
@include MediaQuery(phone) {
&-mobile {
background: linear-gradient(145deg,var(--primary-gradiend-dark),var(--primary-gradiend-light)) !important;
box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow) !important;
border: none !important;
&:focus {
box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow) !important;
border: none !important;
}
}
}
}
&XInsetPlain {
background: linear-gradient(145deg,var(--primary-gradiend-dark),var(--primary-gradiend-light));
box-shadow: inset 2px 2px 4px var(--dark-shadow), inset -2px -2px 4px var(--light-shadow);
border: none !important;
&:focus {
box-shadow: inset 2px 2px 4px var(--dark-shadow), inset -2px -2px 4px var(--light-shadow) !important;
border: none !important;
}
@include MediaQuery(phone) {
&-mobile {
background: linear-gradient(145deg,var(--primary-gradiend-dark),var(--primary-gradiend-light));
box-shadow: inset 2px 2px 4px var(--dark-shadow), inset -2px -2px 4px var(--light-shadow);
border: none !important;
&:focus {
box-shadow: inset 2px 2px 4px var(--dark-shadow), inset -2px -2px 4px var(--light-shadow) !important;
border: none !important;
}
}
}
}
&Plain {
box-shadow: -3px -3px 6px var(--light-shadow), 3px 3px 6px var(--dark-shadow);
border: none !important;
&:focus {
box-shadow: -3px -3px 6px var(--light-shadow), 3px 3px 6px var(--dark-shadow) !important;
border: none !important;
}
@include MediaQuery(phone) {
&-mobile {
box-shadow: -3px -3px 6px var(--light-shadow), 3px 3px 6px var(--dark-shadow);
border: none !important;
&:focus {
box-shadow: -3px -3px 6px var(--light-shadow), 3px 3px 6px var(--dark-shadow) !important;
border: none !important;
}
}
}
}
}
}
&File {
box-shadow: 0px 0px 0px var(--light-shadow), 0px 0px 0px var(--dark-shadow) !important;
transition: all .2s linear;
-webkit-backface-visibility: hidden !important;
backface-visibility: hidden !important;
@include MediaQuery(phone) {
box-shadow: -3px -3px 6px var(--light-shadow), 3px 3px 6px var(--dark-shadow) !important;
background: var(--primary-color) !important;
}
&:hover {
box-shadow: -3px -3px 6px var(--light-shadow), 3px 3px 6px var(--dark-shadow) !important;
}
&.isSelected {
background: linear-gradient(145deg,var(--primary-gradiend-dark),var(--primary-gradiend-light));
box-shadow: inset 3px 3px 6px var(--dark-shadow),inset -3px -3px 6px var(--light-shadow) !important;
}
&.is-active, &.active {
box-shadow: inset 3px 3px 6px var(--dark-shadow),inset -3px -3px 6px var(--light-shadow) !important;
color: var(--black) !important;
}
}
&Input {
box-shadow: inset 2px 2px 4px var(--dark-shadow),inset -2px -2px 4px var(--light-shadow) !important;
background: linear-gradient(145deg,var(--primary-gradiend-dark),var(--primary-gradiend-light));
border: none !important;
&:focus {
border: none !important;
}
}
&Select {
& > select {
box-shadow: inset 2px 2px 4px var(--dark-shadow),inset -2px -2px 4px var(--light-shadow) !important;
background: linear-gradient(145deg,var(--primary-gradiend-dark),var(--primary-gradiend-light)) !important;
border: none !important;
&:focus {
border: none !important;
}
}
}
}
.neoCheckbox {
display: none;
&Container {
position: relative;
}
& + label {
padding: .15rem .15rem .15rem 2rem;
cursor: pointer;
font-size: 1rem;
line-height: 1.5;
&:before {
animation-name: none;
width: 1.5rem;
height: 1.5rem;
border-radius: 100px;
position: absolute;
left: 0;
top: 0rem;
content: '';
border: none;
box-shadow: inset 2px 2px 4px var(--dark-shadow), inset -2px -2px 4px var(--light-shadow);
background: linear-gradient(145deg,var(--primary-gradiend-dark),var(--primary-gradiend-light)) !important;
}
}
&:checked.is-checked-bold + label {
font-weight: bold
}
&:checked + label:after {
display: inline-block;
width: .375rem;
height: .6rem;
top: .35rem;
left: .55rem;
transform: translateY(0rem) rotate(45deg);
border-width: .1rem;
border-top-width: 0.1rem;
border-left-width: 0.1rem;
border-style: solid;
border-top-style: solid;
border-left-style: solid;
border-color: var(--text-color);
border-top: 0;
border-left: 0;
position: absolute;
content: '';
}
}I'm sorry for the many !important but I have family and a framework to override.
