User Interfaces can be easily defined as graphics that will be used & seen by the “simple user”. So you are reading this article on the website, look around, can you see those buttons? Navigation menus? Icons, forms, almost anything you see on the web are user-interface elements. As you might, or might not understand, good, actually great user interfaces are the key for success for a beautiful, eye pleasant and easy-to-use website. This crucial factor makes the user show more-or-less interest in your website or product, because appearances, especially when it comes to websites, are very important.

You wouldn’t want to ready why Joe sells awesome Products if he’s website is ugly, unless Joe will reveal FBI secret information, which won’t happen, will it? The responsibility for designing beautiful and crispy user interfaces relies on the designer, because he will have to make the design decisions and implementations required.

As with anything, creativity is the main key when designing user-interfaces and kits. The second factor to be kept in mind besides creativity is UX (user-experience). You can implement all the awesome and even sometimes crazy ideas, but if user-experience will be forgot your user interfaces won’t be really usable for the most simple user. Not only because he might be confused with various elements he has never seen before, and we can’t neglect the fact that users that simply browse websites might classify a super interesting piece as a strange one, because he can easily get confused, that is why you are some-how limited. The best way would be to but a lot of focus on details, while keeping the usual concepts in mind. Of course you could experiment and I do not encourage you to work on the same UI set all day long but once again, don’t get super-crazy about making something very unusual or user-unfriendly as the most simple user will get easily confused.

UI Kit by Haziq Mir

UI Kit by Haziq Mir

Haziq Mir is a young web designer that is very good at designing web layouts and especially UI elements. I’ve been admiring his work for a couple of months now and I can really say that he’s good at what he does and the UI set you can see above is a proof for that.

Haziq has kept that style we talked about in the introduction, he kept the usual styling of UI elements but tried to focus on details, at which he succeeded I’d say. One may wonder why would be consider this UI set as a great one since it doesn’t have anything special in, just usual forms, buttons, switches and check boxes but I couldn’t agree less with that, because great doesn’t necessarily mean unusual or very different – great means something very-well executed and Haziq has done his job very well while designing the UI kit. He kept a minimalist yet a little bit different style than Mike did. This user interface kits makes good use of subtle shadows and inner white shadows which make the elements really stand out. One more thing I like about this kit is the Gradient Overlay effect Haziq has applied to some elements, it’s really that subtle and soft that you can’t immediately notice it, and that’s what makes it really good and helps to keep that minimalist style.

UI Kit by Creative Mint

UI Kit by Creative Mint

It can’t be left without saying that Mike from Creative Mints, is probably the person who has one of the most unique and creative works in his category. As I noticed, he loves to combine very beautiful and well-designed 3D elements with “plain” web-pages which yield in unbelievably nice results. As you can see this is something different from Mike’s repertoire yet he simply couldn’t fail at this, coming up with a very beautiful UI Set. There are a few things that make this set really stand out of the crowd. First, it’s the beautiful colors he has used. That light-pink, very soft green and that pleasant brown make it all very eye-pleasant and appealing. He has made good use of nice fonts, which are very crisp and fit perfectly on whatever background. Another good point of this set is the pixel perfect icons Mike has used. From what I can tell they are vector icons, but that’s not the most important as long as the icons “do the job” and make the browsing easier for the user. However, there’s one thing I am unsure about regarding this user-interface set. As you can see, Mike has used various design techniques, but he tried to keep more of a “flat” style, trying to avoid all kinds of effects like Drop Shadows, Gradient Overlays and Strokes, however, he did apply some styling to buttons. I am unsure whether this is good or not, since it diversifies the elements in the set but crashes that “plain” style kept by the author. At the end of the day, it probably comes down to creator’s personal preferences.

Medieval UI

Medieval UI by Johnny Waterman

This Medieval user-interface kit is something very different compared to previous sets we’ve showcased in this article, but it doesn’t necessarily mean it’s not worth or it isn’t a “top-piece”. We can’t see any forms, or usual buttons or any kind of web related widgets, instead we can only see a bunch of very beautiful medieval-styled user interface elements. As we can suppose, these graphics will be used for either a browser or client-based game related to the ancient/medieval world. What I like about this set is the colors and the textured feel the designer has applied to the elements. Various/unusual shapes and high-end icons make this set even more interesting and eye-appealing to me. This proves once again that you can unleash your creativity if you make everything understandable, easy-to-navigate and intuitive, which Johnny has succeeded at.

Things to Consider When Designing UI Elements:

There are various factors that must be taken in consideration when designing a user-interface element and we will be discussing those right now:

Color Palettes:

Colors are probably the most important factor that affects an UI piece because obviously the first we’ll see is the color of an element, not the effects which are noticed afterwards. Of course I can’t tell you which colors are right and which are not, because it totally depends on the project you are working on, how well it will fit in the over-all concept and if it matches brands’ color palette. Make good use of soft and “neutral” colors more and try to avoid very bright colors unless you’re required to use any.

Shadows and Gradients

When it comes to User Interfaces, subtle shadows is the way to go. You should understand that when it comes to shadows, you MUSTN’T (ok, not really) follow the basic Drop Shadow effect it applies. Actually, Photoshop is very customizable when it comes to applying effects, that’s why you should ignore almost all its default settings. Shadows usually create an impression of “space” or “environment” which does affect the visual appealing that is why we have to pay enough attention do shadows and how we use/apply them.

As it is for the shadows, you should rely on subtle gradients more and try to avoid default gradient styles of photoshop. While you may be impressed with the effects you can achieve by adding Gradient Overlay effects, the most important is to not over-use them and make your element look as natural as possible. The gradient effect must be applied to give your element(s) some polish, and get rid of that default flat style (unless you want to keep it) and not make your elements much brighter or darker.

Textures & Patterns

Textures and patterns always add a sense of realism do layouts, but the same applies for user interface elements. The effect you can reach by adding textures/patterns can be as simple as a very light noise, and as advanced as an element made out all of wood. The main purpose of patterns and textures do add a visual interest to your elements, and the same as gradients and shadows, it helps us get rid of that flat effect we have on some elements by default. Besides that, textures and patterns help us divide content into various sections so often they can work as a grid for our project and add emphasis to a specific zone/element.

Final Polishing

I wanted to mention this for the sake of some effects which do not play a major role but I do consider them necessary. Some I can list are Inner Shadow, Stroke and Bevel and Emboss. I can’t imagine using at least one of the above-mentioned effects in a user-interface element I’ve designed in the past. For me, each of those effects, and their combination in specific makes everything much more eye-appealing, and pleasant. And, at the end of the day, all we’re trying to achieve is that simple goal. Make users browse through beautiful interfaces.

Final Word

That is it for this article guys. To sum it up, all you need to do to create awesome UI elements is to experiment with creative but don’t exaggerate too much, pay very much attention to details and last but not least, try to make everything eye-pleasant so that everyone becomes stunned by the amazing work you’ve done or will do.