September Status!

August and September were incredibly busy months for me. Some of the things I worked on during the past couple months will be shared more in detail later. They will most definitely be showcased on my upcoming portfolio. I am getting more and more excited to bring you my portfolio. However, I just wanted to let you guys know that I am alive and well; working as hard as ever to bring more quality content your way. In the meantime, here are some quick notes on the things that are currently going on and what I am working on!

My work with MCProHosting and Beam is really amazing! I wish I could share more details regarding the upcoming features, but I cannot at this stage. All I can say is that there were really hard UX problems to solve, which required me to dig deep in my studies to find some really creative solutions.

During the last week or so, I have started working on a new case study. I play Aion in my free time. Aion requires me to use a launcher called Gameforge Live. Since I am a UX and GUI expert, I noticed some problems with this particular piece of software. I decided that am going to do a case study on the launcher focusing on UX and Graphic Design. I will outline some of the most striking problems. My aim is to improve the usability of the software and remove some UX problems to make the launcher more appealing for the users.

I have also given some thought to developing my own game in the future. To that end, I have started the process of enrolling in Game Design courses. To further this, I have also continued my studies in concept art and digital illustration/painting. These skills will come in handy during the development of my games and many other projects. I am already seeing how these skills have proved themslves for clients who wanted Game UIs and graphic work. I believe I will be able to allocate a little more time to expanding these skills soon. Either way, it is something I am very interested in!

I have managed to land new projects that are very interesting to me in their nature. One project is a complete GUI art for an upcoming mobile game. The other is graphics heavy site for a comic strip.

I have sent out the first round of inqueries to my clients regarding portfolio participation. I will be sending the next round shortly. Please expect an e-mail from me in the upcoming weeks. I expect the portfolio data-gathering phase will be done by the end of October.

Stand by for more and as always: Keep it AWESOME!


New opportunity arises! Tube Alert

How exciting! I have just been recruited to work with the amazing people over at Tube Alert. Tube Alert is a mobile app that builds upon the foundation of YouTube and expands upon its functionality. The main focus of the app is to make YouTube better then what it currently is and expand its functionality. Specifically, one of the issues is where some subscribers don’t receive notifications about their favourite YouTuber’s newest video uploads. This results in subscribers missing out on some new content.

My responsibilities will include graphics design for the app, website and promotional materials. I am also tasked with improving the User Experience and graphical fidelity of their mobile app.

I am really looking forward to this project. It is a really interesting opportunity to further advance my skills in User Experience Design and Graphics Design.

[Tutorial] Preloader Splash Page

Website loading speed is a crucial thing to keep an eye out when you develop a project. Using heavy images, large JavaScript files, and having a bloated site in general will result in slow loading speeds for the average user. This might frustrate them, which might force the user to leave the site before they actually have had a look at the content. In the worst case scenario, while the site is loading it might not even display anything, and for a slow loading site and the user might end up leaving.

[flde_special_heading heading_size=”h3″]You can check out and grab the finished code from my codepen.[/flde_special_heading]

[codepen_embed height=”264″ theme_id=”20522″ slug_hash=”LprGLb” default_tab=”result” user=”LordFren”]See the Pen <a href=’’>A simple preloader splash page</a> by Lord Fren (<a href=’’>@LordFren</a>) on <a href=’’>CodePen</a>.[/codepen_embed]

This code has a simple animation built in. You can use it or you can replace it with your own.

[flde_special_heading heading_size=”h4″]The HTML[/flde_special_heading]

<div class="loader-wrap">
  <div class="loader">
    <div class="loader-logo">
      Put your logo, or custom text here!
    <!-- Custom Loading Animation -->
    <div class="loader-inner pulse-ball">
    <!-- Custom Animation End-->

Paste this just after the opening <body> tag in your HTML file. We will be using CSS to style all of the elements and animate them. Make sure to not include large files or a lot of graphics here. This has to be as light as possible, so it loads almost instantly for any user.

[flde_special_heading heading_size=”h4″]The CSS[/flde_special_heading]

This is the part where most of the magic happens so let me go through all the important steps.


.no-js .loader-wrap {
  display: none;
.js .loader-wrap{
  display: block;

This part is not mandatory, but I have included nonetheless.

If you are using a browser feature detect method, like Modernizr, you can use this snippet to hide or display the loader overlay depending if the JavaScript is turned Off or On in the browser of the user. If you do not already import detects, you can skip this step. Most of the users will have JavaScript enabled by default and it takes a lot of effort to turn it off nowadays for little to no gain.


  background-color: #f05a28;
  width: 100%;
  min-width: 100%;
  height: 100%;
  min-height: 100%;
  position: absolute;
  z-index: 9999;

This is the colored background of our loader. position:absolute; takes the contents and the <div> out from the normal flow of the website. We set it to 100% width and 100% height to ensure it will cover the entire site and add a z-index: 9999; to make sure it is always on top.


.loader-wrap .loader {
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  position: absolute;

We, again, call for the position:absolute; property to help us position this element to the centre of any screen with top:50%; and left:50%;. If you stop now and check the results you will see that it is not in the centre. This is because we did not take the element width and height into account when we positioned them.

We can actually branch off into 2 directions to solve this problem. We will go over both of them.

For the older method to work we needed to know the exact dimensions of the <div> and add negative margins for it to display in the exact centre. Let’s say this <div> was 200px in width and 100 px in height. What we needed to do was divide these by two and add that as a negative margin to the <div>. For the left margin we take the width of the <div>. 200/2=100 so we needed to add margin-left:-100px;. For the top margin we take the height of the <div>. 100/2=50 so we needed to add margin-top:-50px;. However (and lucky for us!) this is in the past now.

Nowadays we have evolved from the caveman era of CSS to a more civilized solution where we don’t need to know the exact dimensions of the <div> element because we can apply transform: translate(-50%, -50%);. The transform property is always relative to the element that it is being applied to and translate is how you move the <div> into place. It basically calculates the dimensions of the <div> and moves them by a percentage based off of these measurements. Pretty nifty, huh?

[flde_special_heading heading_size=”h4″]The jQuery[/flde_special_heading]

$(window).load(function() {

Let me explain the above code in simple terms. After the site ($(window)) finished loading all resources, triggers a function to hide (.fadeOut("slow")) the pre-loader overlay from sight. Making the waiting time and transition easy. I left the fade out animation simple, but if you wish you can add your own animations to make the overlay appear or hide.

[flde_special_heading heading_size=”h4″]The conclusion[/flde_special_heading]

As you can see this is a really easy and quick way to add a pre-loader splash page to your website. Adding this feature to your site will make the experience more pleasant for people who have slower connection speeds.

There are multiple ways to expand on this simple solution. For example, you can add your own animations for when the site finishes loading and the overlay is going to be hidden. Feel free to add your own loading animation and experiment with other functions and features.

Let me know what you think! Share your thoughts and implementations with me on Twitter @LordFren.



The previous version of the code used Absolute positioning (position: absolute;) which caused a few issues:

  • Unless you used a full height page (no scrolling) the scrollbar appeared
  • If you were scrolled down and refreshed the loader did not follow you, meaning it looked broken.

I have replaced the code with position:fixed this will make sure that the overlay will always cover the site completely.

Known issues

If the JavaScript is disabled in the browser this method will leave the site hanging… (Who does this?! – Editor).

To ensure compatibility for users without JavaScript you should always include Modernizr or similar piece of code to ensure JavaScript support.

The scrollbar is always visible on pages that are larger than the viewport.

This is not really an issue but if you want to remove the scrollbar you can expand the script a bit.

  • Add an overflow:hidden; to the body tag to disable scrollbars altogether.
  • Using the already added JavaScript you can re-enable the overflow after the loading is done by setting overflow:auto;
$(window).load(function() {
  $("html, body").css('overflow', 'auto');