Posts tagged “design”
Elements of a website’s User Interface need to be obvious. Said another way, don’t confuse users with ambiguous design choices.
Take a look at the following checkbox, a common form element:
Now ask yourself if the box is ticked. Well, there is a checkmark in the box so maybe it has already been ticked. But no, this is what the ticked checkbox looks like:
It’s not obvious, is it? There’s room for improvement here. Make your elements obvious.
The Dreamweaver blog takes a brief look at the evolution of buttons on the Internet.
Designmodo has a quick overview of what to expect in Bootstrap 4. My initial thoughts:
- Moving from Less to Sass. Crap, now I gotta learn Sass and set up my development environment to support it.
- Grid System based on ems instead of pixels. Nice.
- Dropped support for IE8. OK, whatever…
- Dropped Glyphicons. Uh… please announce a replacement.
- Optional Flexbox. Yesssssss…
- Cards as a new component. Nice.
My biggest gripe is easily having to switch to Sass. Ah well, I’ll live.
Now that Google has released it’s Material Design Lite (MDL) Framework, how does it stack up against the incumbent behemoth that is Bootstrap? Tutorialzine has a quick run-down comparing the two including their grid systems, navigation bars and other components. The article includes live, side-by-side comparisons of various components.
Want to get started with Google’s Material Design? Well now you can with the newly-released Material Design Lite Framework.
Over the past few months I’ve been using a lot of what I call Page Builders, WordPress plugins that come with a set of modules which you drag-and-drop into a grid-based layout. I haven’t used, nor could I possibly use, all the available Page Builder plugins but here is what I have played around with:
- Themify Builder (as part of one of their themes.)
- Elegant Themes Page Builder plugin.
- Elegant Themes Divi Theme (note that the page builder included in Divi is different from their Page Builder plugin. Elegant Themes is investing development into the Divi builder.)
Of course, there are a lot more Page Builders than these. You also have Visual Composer., Startup Framework, Qards… the list goes on.
I am not going to be reviewing the Page Builders I have used. Rather I want to share my thoughts on them after having gained some experience using them.
I saw this billboard on the campus of University Brunei Darussalam and had to do a double-take. I initially thought it was an advertisement for showing the movie Persepolis but instead it was a timely reminder to continue seeking knowledge.
I have neither seen the movie Persepolis nor read the comic on which the movie was based yet it was the first thing that came to mind when I saw this design. That really says a lot about the extensive reach of the movie’s art style.
Much like our little Chinese New Year re-skin we decided to dress the website up again for Hari Raya. Hey, if everyone else is going to be flaunting new clothes and accessories I think our website deserves a little bit of shine on this day as well.
In The Easy Way to make nice looking Gradients I shared a technique to create pleasing gradients easily using a graphics application like Inkscape. The thing is you can just as easily apply the principles to CSS. Browser support for CSS3 gradients is quite good across the board (save IE9 & Opera Mini) so this’ll work fine.
Here’s a simple tip I learned to create clean, presentable gradients. The key word is subtlety.
Social Media Links