Design UI Elements for NGX/FLAT-UI - Contribution

in #utopian-io6 years ago (edited)

thumb.png

Details

I have created a small presentation of few UI components followign flat and material design guidelines.

 
All previews are in 2x resolution. Open them on new tab for 1:1 ratio or download the source files.

 

Select

default dark blue: #2c3e50
text: #fff

turquoise (green): #1abc9c

Hover and selected effects are white or black with opacity. Precise amount up to PO's consideration.

 
NGX flat UI elements-01.png

 

Multiselect & search select

blue: #0077be
purple: #8e44ad

 
NGX flat UI elements-02.png

 

Checkbox, tooltip

borders / texts - default dark blue: #2c3e50
blue: #0077be
purple: #8e44ad
red: #c0392b

default - opacity of background: 0.2
hover - opacity of background: 0.4
checked - opacity of background: 1.0
disabled checkboxes - opacity: .5

 
NGX flat UI elements-03.png

 

Slide Toggle

borders / texts - default dark blue: #2c3e50
blue: #0077be
purple: #8e44ad
turquoise (green): #1abc9c

default - opacity of background: 0.2
hover - opacity of background: 0.4
checked - opacity of background: 1.0
disabled toggles - opacity: 0.5

 
NGX-flat-UI-elements-04.png

 

Benefits / Improvements

All components are done in similar style, following industry standard for size, contrast, legibility and usablity. Any and all further changes should be discussed with professional and should follow overall style of application they are used for.

Tools

Adobe lllustrator

Original files

Download

City image used for blurred background here.



Posted on Utopian.io - Rewarding Open Source Contributors

Sort:  

Thank you for the contribution. It has been approved.

You can contact us on Discord.
[utopian-moderator]

Hey @nilfanif, I just gave you a tip for your hard work on moderation. Upvote this comment to support the utopian moderators and increase your future rewards!

Awesome, thank you! :) Could you add the colros in hex format for each component and their parts? border, background etc.?

color codes and state description added.

Very good work, I have never work designing UI elements, your proposal has a very good finish.

This is amazing sir @andrejcibik so cool. I have promote this post

Really stunning components

Hey @andrejcibik I am @utopian-io. I have just upvoted you!

Achievements

  • Seems like you contribute quite often. AMAZING!

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

mooncryption-utopian-witness-gif

Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x

Coin Marketplace

STEEM 0.33
TRX 0.12
JST 0.038
BTC 69789.16
ETH 3514.62
USDT 1.00
SBD 4.56