color-scheme-featured.png

Color Scheme

Creating a good interface and experience requires you to find the right mix of colors to display to user what is needed to be focused and what can be a supplement element. And it can be quite a tiresome process as well. Therefore I have curated different color schemes to help.

#fdbb2d
#22c1c3

#eeaeca
#94bbe9

#EE7785
#67D5B5

#3B4E32
#F8F8FF

#6a60a9
#fbd14b

#fff1b9
#3f4040

#fffcf0
#dedcee

#a5dff9
#feee7d

#4962f1
#e44c7d

#833ab4
#fd1d1d
#fcb045

#444f59
#fd999a
#fec8c9

#e85a71
#d8e9ef
#4ea1d3

#bd1550
#490a3d
#f8ca00

#fec9c9
#ee6e9f
#88dba3

#f9c00c
#00b9f1
#88dba3

#58c9b9
#df405a
#512645

Vincent HalimColor Scheme
spinkit.gif

9 CSS Loaders that I absolutely love!

I have found that CSS loaders or pre-loaders as some would call them, are one of the fine details when designing a premium UI.

CSS Loaders are usually used add another layer of interaction when users are using the application. Loaders usually defines the state to the user that something is happening, and they should wait.

As I have mentioned in my previous article that can be found here.

Users like feedback, and like us, when we are using an application when it provides us constant feedback, we feel we are constantly engaged.

And loaders is one of the things you can add.

See below on the list of CSS loaders that I love the most.

1. Ana Tudor – Snake Loader

This loader is based on SVG and I love this because it reminds me of the old Nokia games, snake!


Resource

2. Cassidy Williams

Resource

3. Joshua Ward


Resource

4. Vitaly Silkin


Resource

5. Idan Gazit


Resource

6. Michiel Bijil


Resource

7. Irem Lopsum


Resource

8. Spinkit


Resource

9. Ana Tudor – Tomato Loader


Resource

Hope that helps!

Vincent Halim9 CSS Loaders that I absolutely love!
SVG.png

SVG Animation

SVG or for its abbreviation Scalable Vector Graphics, has been a long standing element that is easy to manipulate, especially to increase the sophistication to a website or an application. We use SVG often for its flexibility for animation, and its clarity when it is scaled.

On top of that SVG has a great browser support, as it can be seen here.

I found several tools that makes it easier to animate an SVG out. Hope this will help you guys out.

SVGator

Originally SVGator is a free tool, on a recent event it has become a paid service. They do provide a 7 day free trial, therefore I would suggest create your animation within the 7 days and export it out!

The thing I like about this tool is that it segregates out the SVG into several parts, and it provides an interface that you can select each element and animate it the way you want it to.

I created a sample with their tool, you can download the sample animation here.

Snap SVG & SVG.js

Two other tools that I have found are Snap SVG and SVG JS, which can be found here and here, respectively.

Both of these tools have similar functionality, where you would need to get a bit hands on to code out the entire element, however, by doing that you have more control over each and every vector.

Currently, I am still experimenting with Snap SVG, and have not played with SVG.js. But from SVG.js, they reported that their performance is much better than Snap SVG.

Please do let me know which of the two would be better.

SVG Circus

One other tool that I stumbled upon, was SVG Circus, it provides the similar interface of SVGator, however, it is less sophisticated. I personally prefer SVGator, but with the recent pricing of SVGator, I would not mind using SVG Circus.

Have a play of the tools.

Happy animating!

Vincent HalimSVG Animation
reading-progress-indicator-featured.svg

Reading Progress Indicator by CodyHouse


One day, a friend of mine told me about CodyHouse‘s resources. At first I was unfazed, but I decided to just hop into the website and take a look. And I immediately fell in love with the amazing small web components that you can re-use. It was that good. One in particular that I found to be quite useful for websites that have long articles with sub-sections.

Although the initial article, which can be found here states that it was hidden from the mobile view. However, in my opinion, it is a good feature to have in our current mobile first era, and especially those articles that contain several chapters. This will result users to be able to simply flick through sections of an article with a touch.

Therefore, in this tutorial, I am going to simply extend the original snippet to tablet and mobile views. And I use this website for a quite comprehensive list of media queries for Apple devices, click here.

You can view the original article from CodyHouse here.

By adding the additional CSS above, you are provided with a navigation at the bottom of the screen. Having the navigation placed at the bottom allows for unobtrusive reading experience, while still providing that ease of navigating between chapters. Hope you like this extended tutorial, remember to have a read of the original article, by clicking here.

Vincent HalimReading Progress Indicator by CodyHouse