Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Now UI Kit – A Bootstrap 4 UI kit

demos.creative-tim.com

Post reply on HN
Print view View original

51–59 of 59 posts

Re: Now UI Kit – A Bootstrap 4 UI kit

#51

Post by axelut »

harisenbon wrote: post #36

Question about how these UI Kits are made: Generally when I'm building a UI on top of bootstrap, I import all the LESS files into my project, and then compile them together with my project LESS files. This lets me, for example, change the brand-primary color, or the base font size, etc, without having to override every component that might use that variable. However, this UI Kit, as well as a number of other kits I'v…

There are 2 ways of working with Bootstrap. 1: the one that you specified where you change the variables directly in LESS/SASS (BS4). You need to know LESS/SASS for those changes. And 2: the one where you don't know LESS/SASS/CSS and you just want a different design for the default bootstrap. You download a UI Kit that has a new design and it is also containing new elements/example pages. Using the UI Kit/Theme/Template, you don't have to dig deeper into the variables if you don't want or you don't know how to do that. You just start to work with the backend and you are covered on the front end. Now the reason for us, here I'm talking just about our company, don't know why other do it in this way or another way, we want to overwrite the bootstrap and keep bootstrap as a separate file so we can easily migrate from v3.3.0 to v3.3.5 or from v3.3.5 to v4 alpha 4,5,6 etc, without doing major changes in our UI Kit. Makes sense?

Re: Now UI Kit – A Bootstrap 4 UI kit

#52

Post by axelut »

bastawhiz wrote: post #20

My two cents: - The hit boxes on the toggle switches is very small and finicky. I tapped three times before it worked. - Some of the controls look disabled, like the slider and toggle buttons. Combined with finickiness, it's a real UX frustration. - The box shadows make the animations very slow. On my nexus 5x, I get maybe 5fps at best. It would be worthwhile to explore ways to improve them, like using SVG instead of…

Thank you for the feedback. It makes sense the points that you have. Since we are constantly improving the product based on the customers feedback we will make these changes in the next v1.1.0 update.

Re: Now UI Kit – A Bootstrap 4 UI kit

#54

Post by axelut »

Sujan wrote: post #24

That Toogle Button in the navbar for "White/Orange" makes no sense as an UI element.

The original PSD/Sketch version of the UI Kit was built having the Orange as the primary background image: https://www.invisionapp.com/now Since that is not the most usable case for a website, we made also the white background version. We just wanted to show to the users that it is very easy to go between the states and all the elements are working fine on white/orange background. Makes sense now?

Re: Now UI Kit – A Bootstrap 4 UI kit

#55

Post by axelut »

jorgeleo wrote: post #42

THIS. LOOKS. AWESOME! Love it. Especially for people like me, that still uses stick figures for everything. I am missing only a couple of things. Styling data tables so it is consistent and select2 for the drop downs.

Thank you for the kind words! We are glad that you like it. On the regular basis, we add more elements like datatables, select2 etc. in the PRO versions of the products that we develop :D

Re: Now UI Kit – A Bootstrap 4 UI kit

#56

Post by Sujan »

axelut wrote: post #54
Sujan wrote: post #24

That Toogle Button in the navbar for "White/Orange" makes no sense as an UI element.

The original PSD/Sketch version of the UI Kit was built having the Orange as the primary background image: https://www.invisionapp.com/now Since that is not the most usable case for a website, we made also the white background version. We just wanted to show to the users that it is very easy to go between the states and all the elements are working fine on white/orange background. Makes sense now?

Why it is there I understand.

But using a UI element to switch between two states that only shows one of those, exchanges the option it shows at the same place and is normally used to indicate on/off states is a bad choice.

It would make semi sense if left was "white", right was "orange" and switching the toggle to each side chooses what it says on that side.

Re: Now UI Kit – A Bootstrap 4 UI kit

#57

Post by vickychijwani »

axelut wrote: post #49
sgt wrote: post #39

Earlier quoted context omitted.

It has a lot of potential but as many others have pointed out - usability is not very good. On certain screens you won't even see the placeholders in the text boxes. Heck, even on a Macbook Pro Retina it's hard to see, and those have really good screens. Apart from that, some of it looks pretty good, but there's tons of this kind of stuff out there already.

Thank you for the feedback. We will take it into consideration for the next v1.1.0 update.

For the record, I have such a screen: a Samsung SyncMaster B2030, about 6 years old. Several of Now UI's widgets (form placeholders, disabled input labels, tab labels on white background) are nearly unreadable on this screen.

I actually checked (using [1]) the contrast ratio of some of these widgets, and they work out to very low numbers:

- Form placeholders - #ddd on #fff - contrast ratio 1.4:1

- Labels of disabled checkboxes - #9a9a9a on #fff - ratio 2.8:1

- Tab labels - #b8b8b8 on #fff - 2.0:1

This is far lower than the W3C's recommended minimum ratio of 4.5:1 [2] for text smaller than 24px. And since the font weight is often lower than normal, the perceived contrast ratio is even lower than the figures above suggest. I think the contrast needs major improvements for decent UX.

PS: http://contrastrebellion.com/

[1]: http://leaverou.github.io/contrast-ratio/#%23dddddd-on-white

[2]: https://www.w3.org/TR/WCAG/#visual-audio-contrast

Re: Now UI Kit – A Bootstrap 4 UI kit

#58

Post by vickychijwani »

tomcam wrote: post #34
gondo wrote: post #12

input with a gray background means it is disabled. seeing it here as active input is immediate no go for me

Did you know that the CSS is user-modifiable? Do you consume only HTML and CSS in the form of perfect templates that can be used by you or your team immediately?

In a different context, I would totally upvote your comment, but in Now UI's case the contrast is extremely low and gondo's argument is quite valid. See my comment elsewhere [1] for hard numbers on the contrast.

[1]: https://news.ycombinator.com/item?id=14540281

Re: Now UI Kit – A Bootstrap 4 UI kit

#59

Post by vickychijwani »

axelut wrote: post #54
Sujan wrote: post #24

That Toogle Button in the navbar for "White/Orange" makes no sense as an UI element.

The original PSD/Sketch version of the UI Kit was built having the Orange as the primary background image: https://www.invisionapp.com/now Since that is not the most usable case for a website, we made also the white background version. We just wanted to show to the users that it is very easy to go between the states and all the elements are working fine on white/orange background. Makes sense now?

Agree with Sujan, I found it very confusing too. At first glance it seems like the switch's 2 states are "Now UI Kit" and "White", which of course makes no sense. Only when I clicked it did I discover the other state.

I think you could add some space on the left side of the toggle and maybe show the "Orange" label there, or at least just add the space so it looks separated from the "Now UI kit" brand label.

Post reply on HN