Design UI Elements for NGX/FLAT-UI - Contribution
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.
Multiselect & search select
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
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
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
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
Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!
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