Finally our site redesign is live! We’ve have been procrastinating on going live with it since last year , when the first version of the design was ready (Yeah, in retrospect, that design had too much going on), but now we’ve have decided to “eat the frog” and just launch – “You can never arrive at the best version of anything at once”. We like this design alteration much better, so we’ve have decided to go live with version 2.0
Built With
We design quite well and extensively with WordPress, and this is the platform we used to design this portfolio site, and It has to be said, some of our initial design and feature implementations have changed since version the first version.
We decided to avoid off-the-shelf themes, and custom-made our own design, afterall, that is what we are great at. WP theme development can be frustrating and rewarding, but it gives you the confidence to hack and tweak any website to your specifications. We often start with a bare-bones wordpress starter theme called Underscore (from the Automattic team) , It provides you with all the skeletal functionality of wordpress without all the baggage. With this, you can build your custom design and implement your own functionalities with plugins or custom code. To do this, you need to have a basic understanding of wordpress file hierarchy, PHP, HTML, javascript and of course CSS.
Implementation
One key lesson in using wordpress powered sites, is to limit plugin usage to just few essential plugins as much as possible (Our plugin usage: Contact Form 7, breadcrumb NavXT, and in-the-box plugins such as jetpack, akismet, yoast and WP super cache) – this helps the site remain as light as possible, and reduces the complication of troubleshooting. We stuck with the standard recommendations of enqueuing Javascript files and CSS styles in the functions file etc, designed custom pages using template tags, and page templating. That said, understanding the wordpress file system, taxonomy and other wordpress terminology is very important in developing and customizing wordpress themes.
Design Decisions
We got inspiration for our design by visiting different portfolio sites of design companies that we admire their work. We tried to use whitespace to achieve a clean design as much as possible. As for the icons and illustrations used, they were created them from scratch specifically for this project, drawing inspiration from resources like undraw.co, and for interactivity, Javascript.
The next step was to put all the design ideas together into a complete design for the site. As It went along, we visited other sites for inspiration and continued to improve on the code and design, but as soon as we got the landing page design right, building the other pages was a breeze.
Customization of the design of the individual pages was a must, blog posts and categories were also redone to give the site a distinct look than what you’ll get from a typical wordpress site.
Our favourite feature is the light/dark mode feature on this project. In summary, we implemented a function that adds a special body class to the wordpress header that you can then customize in your CSS to switch from light to dark mode and vice-versa with exactly the same theme.
Summary.
When we eventually started building this, Its easy to get stuck in the cycle of constant improvement and never launching, but you have to overcome this perfectionist mentality and Just launch! There are always discover more ideas to implement in any creative work, effectively making it a never-ending project. So knowing when to stop is very important as a designer. As they say, when in doubt, KISS (Keep It Simple, Stupid).