The Travellist Project: Designs using Sketch

Designs, Projects
Part 2 of The Travellist series. Lot’s has happened since the initial post, including hosting, designing and development (themes, plugins, custom CSS and PHP, and a whole lot more. This is a 2-person project between the client and myself, iterating and pushing things forward one step at a time.

There are so many things to document, but I’ll reserve this post for design mockups using Sketch.

Low Fidelity Mocks

Nothing beats pencil and paper when mocking something up for the first time. The first thing I presented to the client, however, after initial pen & paper, was a Balsamiq mockup which looked like this:


I really like Balsamiq, it’s a quick and easy way to get something out there to the client which doesn’t look too rudimentary (as opposed to pen & paper squiggles).

The problem that I have always found with low fidelity mocks is that it doesn’t give the client (or the developer for that matter) any clear vision of what the site would look like – which is, of course, the purpose of keeping it rough (this is what I can look like, and not this is what it would look like).

And the added problem with low fidelity sketches is that the rate of throwing away the design is quite high i.e. You design it in 10 minutes, the client has a 10-second glance and says “OK”, then you throw it away.

After the initial “yeah, that looks kinda right” agreement, we quickly went on to doing something more concrete using Sketch.

Sketch designs

Before you shoot me down and say, “That’s not high fidelity“, I would like to point out that the below was created a while back for the mobile first approach. I do have higher fidelity designs which present the designs in a clearer fashion, but I still need to do some Sketch cleanup’s before I can share.  

Without further ado.



Files: Sketch   

We’ve actually progressed quite a bit from this design pattern, adding a few more pages and flows on top of the above. I still personally use the designs as a ‘point of reference‘ when we ask ourselves questions on how the site should look.

It would be remiss of me if I did not thank Speckyboy and Meng To for their contributions to Sketch (I used their framework to build the above designs).

Trello cards

I put up some bare-bones Trello cards which represented each activity and task that needed to be done in my last post. Since then, we have dramatically increased the number of cards (yes, more things that I didn’t consider that either I came up with or the client suggested).

Rather than write it all down like I did last time, I thought it would be best to just show the screenshot of the work in progress:


I am personally finding Trello to be a fantastic workflow tool for client interaction. Of course, I know that it can be used as a team collaboration tool too.

Live but under-development

I could have taken the approach of suppressing the site and only giving access to the client, like the approach I have taken in this post, but to be honest the name of the site is so obscure that only the client and myself (and now you) know of that site. Besides, if the client wants more feedback from others, he can simply send the URL on.

I know a lot of guys are not a fan of developing in the live environment and they’ll point to a lot of good tools out there that can help assist (ServerPress and all these other tools here).

But to be honest it’s an overkill for 2 people interacting. I am not about to add extra complexity and cost for a 2-person project. If I make a change and the client happens to see it before I enter the comment in Trello, then he will give me immediate feedback.

It is this sense of urgency that I really enjoy when I publish something live. I know the client is looking, and I do hope that he gives me feedback sooner rather than later.


I’ll continue on with development updates including those WordPress specific nuances like ‘why doesn’t WP use my CSS overrides when I update the style.css‘ (Yes, I also check the PHP code in the header).

Some juicy ramblings will be coming your way soon.

About this post

PC Blue Avatar

Time is money and we all would ideally want to get paid for the work we do. However investing in yourself is as good as potential future earnings too.

And seriously if you enjoy doing something, it just doesn’t seem like work. These are the type challenges that make you better and one should do more.

2 thoughts on “The Travellist Project: Designs using Sketch

  1. Very cool stuff man, keep it up! Awesome to see you’re using WordPress for this project, another proof that it can do anything.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s