When the geek inside takes over…. things happen.

My web development is not always as fast as others, but there’s a reason for that. The use of cookie cutter websites, working from and sticking to predefined templates, sure makes development and design fast and easy, the downside however is that your presence has no unique identity, the one site looks like the other.

Now when I take on a project, to me, it’s like meeting a person, it’s always personal. Like people having different personalities and attributes so does sites and similarly as I see untapped potential, so do I when doing a site build.

I use WordPress for the greater deal of websites I build simply because there are so many resources, free and commercial, available. Admittedly during my photography years I haven’t done much development but rather played here and there on a local development server or help a friend so that my skill set wouldn’t get too rusty, however when the decision came to invest my full time energy into web development and graphic design I, from previous experience, immediately knew which route to follow.

I always used either pre-built themes from various providers as a starting base to cut down on design time and then customise them from there on forward to achieve something unique. One of these providers that I used in the past was Elegant Themes, which in the time I was “absent” from development released a new theme named Divi which is not just a theme but rather serves as a visual building framework. So needless to say that I chose to renew my subscription with them to be able to make use of their amazing product.

With the Divi theme there’s many great looking pre-build layouts integrated and many more available that you can either purchase or find for free and on starting to build the portfolio section of my site (to be released/publish soon) I just could not find something that specifically suited the layout I had in mind


Geek ninja time

Because of the theme’s ability to structure layouts relatively freely I decided to design my own wireframe layout and after playing around for an hour or two I finally had something that I was pleased with; a clean and structured layout for a project that displayed a sample image and the corresponding details.

The layout, albeit in wireframe form appearing to be simple, spurred a flow of ideas on different that’s possible from it with a bit of tweaking through CSS styling and javascript.

The more the merrier

This sparked further ideas and I did a secondary layout…. which led to a lightbulb moment. The second design took a while to tweak but once it was done I saw more and more possible variations of it and before long I had another four.

But that wasn’t enough, the eternal designer question kept popping up, “What would make it better?” and after scratching the head a bit I felt it needed “life” to it. I started adding different animation styles on load to the modules so the layout would present itself in an attractive way and then I added user involvement by adding hover effects to some elements.

At the end of the day I had so much fun with it I decided to make an individual project out of it and am hoping that by completion I will either have a Divi Child theme designed specifically for designers or at least a very customised Divi page layout which I will share as a freebie.

If you’re interested just pop us a message and I will make effort to finalise it.

Finished Layout

I ended up not using these portfolio layouts on my own site as I switched over from Divi to Extra as I wanted a more magazine-blog centric theme framework. The layout was too good to not use them, so I decided to use them on my graphic design business page.