We have invited Manuel to talk about his experience with Pinegrow WP during the redesign of his website.

Note: The original version of the post is available on the Pinegrow Documentation Site

It took me over two years to relaunch my website. I decided to challenge myself by coding everything myself.

Pinegrow’s functionality and a lot of other web resources helped me in that process and hopefully this article will serve as an encouragement to other visual designers wishing to do the same and step into the code.

Not just another portfolio website

For as long as I’ve been in the creative business I’ve been interested in the design process of a project and this process is always about making decisions.

There’s often a long haul behind the countless beautiful works out there and I like to understand the story behind them. So I wanted to change my website from an outdated portfolio website to a place where I share this creative process.

Early sketches of the website. Scribbling is still the fastest way to visualize an idea. In the beginning I distinguished between blog and work. Eventually I fuse them together.

On the other side my goal was to give the website literally a personal look. I even had the idea of showing my body in some early scribbles, figuratively letting the visitor see behind the curtain – or at least behind the pullover!

I eventually chose an illustrative and minimalistic language with a touch of self-mockery, which was fine, as I’d decided to only write about my side projects, and none of the actual agency work.

I accordingly designed a rough screen design of the most important elements of the site:

  • The front page
  • The navigation
  • The Post page.

For such cases I use Sketch by Bohemian Coding. It’s a great App for screen design, SVG and exports.

Screen design of the front page – it’s almost the final look: Pullover section with logo, the ‘post’ section, the About me section with timeline and the footer section with my trousers in the background!

A challenging task

The technical execution of the website was kind of a challenge for me. I’m a stereotypical designer. If code gets too complicated I’m totally lost. So I was thinking of hiring a web developer, as we normally do at the agency. However I was already using Pinegrow in my daily workflow so the thought crossed my mind:

Why not use the WordPress feature of Pinegrow?

I knew it would take me some time. But as I had no deadline, why not extend my skillset?

Adding WordPress Actions to elements using Pinegrow.

Firstly I started with the static layout choosing the Foundation framework. I like its unstyled look. Further, I integrated Swiper Slider and Waypoints to trigger both animations and sticky navigation and then embedded Google Fonts.

And so the front end was ready.

As I had no clue where to start with creating a WordPress theme, I began to read all the WordPress tutorials in the Pinegrow Docs. I set up a local server with MAMP, used Bitbucket together with the Sourcetree App for version controlling and started to experiment.

I was impressed how easy it was to use Pinegrow’s basic features and create a theme but the difficult part was to decide which WordPress actions to use.

For the front page I used regular post, with custom post types for the logo slider, dates and images. The customizer served for the About Me and the Footer section. And the Contact Form is a simple widget.

About Me section with customizer – so handy.

As flexible as possible

I like blogs where there is some variety in the layout. So I was looking for a way to build flexible layouts. I experimented with custom post templates. I created four different post templates with different positioning of Title and Post Thumbnail Image. But I wasn’t fully satisfied.

The Content of the post should be also flexible. So I started to learn about Advanced Custom Fields and layout modules.

There are a lot of good tutorials out there. The great thing with modules is, you can change them and it will affect the whole WordPress site. That can be a huge time saver.

Backend with ACF’s and layout modules, filling content is a piece of cake.
Frontend view

Final Result

In conclusion I’m quite happy with the final result. It’s nothing special, nothing fancy but exactly what I wanted. And I can modify the theme every time I want. And I will certainly do that in the future.

The project:
www.herrbuerli.ch

About me

I’m 31 and a UI/UX and Graphic Designer named Manuel, who is married to the lovely Sarah and works for the Basel West, Communication Agency in Switzerland.

I’m involved in a lot of different web projects where I do conceptual work as well as screen design. I’m interested in almost everything that’s connected to design. I love good typography, packaging design, motion design and handcrafted things.

Why I like Pinegrow

As a designer, I mostly employ a visual approach. Pinegrow helps me to handle code in a natural way.

herrb089-2

Although there’s room for improvement, the software gets better with every update, and by the way, I like the fact that a small company from Slovenia (not California) develops great software. The community (slack and forum) behind it is great too.

Herr Bürli, Manuel (October 2016)