I’ll never go back to doing a website without a mockup. That was my big takeaway from this last week. I experienced the pain the previous week with multiple site redesigns, scraping ideas and having to start over because I had no clear vision of the direction that I wanted to go.
In the last week I finished up a Jekyll theme where we worked off of a mockup and then this week I’ve been spending some time redesigning and rebuilding my personal site with Jekyll but with a mockup in hand. A couple of nuggets of insight happened this week too but the biggest was the mockups.
So mockups, we love to use them when they’re provided to us but in the world of rapid prototyping things and beginners in the scene we can sometimes skip the mockup portion of development and opt to get right into the coding. I sure did before now. Now I will never build something without at least a rough sketch if not a full designed mockup at my fingertips. It makes things incredibly less painful.
When I decided to go back to the fundamentals and drop the styling frameworks like Bootstrap and Foundation it was difficult to build things from scratch without a mockup, now with mockups it reduces the added complications 10 fold and actually makes the process quite simple. The ability to look at a final visual representation of what you would like makes the difference between inefficiency and efficiency, winging it and hitting brick walls and smooth sailing on glass seas. By using a mockup, a proper mockup, it has reduces the stress, anxiety and feeling of not knowing what the hell I am doing. It’s quite incredible.
So why is having a mockup so great? Well number one you have a visual representation, a goal for the finish line, of what you want to build. The image is no longer stuck in your head susceptible to subjective warping and manipulation as you wander around the internet and spotting new and interesting design choices. Sticking to that visual guide reduces the indecisions and the “OOOO Shiny” effect of seeing things on the internet.
The other reason it makes like easier is that if you are using something like photoshop, which I use and I definitely recommend, you can layout your designs exactly how you want them and then use the mockup to grab dimensions to later use in your CSS. When you use pen and paper, while incredibly useful and the 1st step of a mockup, it doesn’t give you the pixel dimensions that later can be incredibly useful at a later time. I’ve been rebuilding my personal site and have been working off of a mockup I made. When I need to figure out how much margin, padding, width, height, etc I need for a specific element I just have to click on my photoshop mockup, grab the selection tool and measure the distance between elements, take that number and type it into my CSS. Just doing that I’ve got EXACTLY what I wanted.
Using mockups has reduced my time and effort that I put into making design choices. Yes it’s a decent amount of work ahead of actually typing in your first line of code but at the end of the day it saves you an amazing amount of time when actually coding. My mockups for the redesign of my website took me around 3 hours to do, not an insignificant amount of time. That consisted of 5 different ideas fully sketched out on graph paper, making the decision on which one I wanted, and then spending about 2.5 hours stumbling around photoshop (I’m terrible with photoshop and very rusty from years of not using it) creating my final mockup. Once I got to the coding it was ALL worth it!
Enough with the mockups, something else that I discovered this week is Cloud Cannon, a Jekyll CMS hosting system. Yes I said that correctly and now I will yell it because it’s that absolutely amazing! A JEKYLL CONTENT MANAGEMENT SYSTEM!!! For anyone not familiar with why this is amazing is because Jekyll out of the box is strictly for static sites and if you aren’t a developer or brave in learning code it doesn’t make it easy to add content to your site without having to do a bunch of work to get there. With Cloud Cannon all you have to do is add “editable” to the element you want to update or change and you can do that right from the Cloud Cannon’s admin interface. It’s fucking brilliant! Like amazingly, incredibly, superbly brilliant. I’ve been so impressed with the service, interactions with the team, and easy of getting your site setup that I’m going to be switching my personal site and business site over onto the Cloud Cannon platform. I’ve just barely got my toes wet with Cloud Cannon, in the coming weeks I will be diving deeper so look forward to hearing more about it.
The other little gem I stumbled on this week was more so one of a battle of attrition and “what the fuck this doesn’t make any damn sense”. AHHHH the frustration! Since I’ve been building my new personal site I am designing it with speed and performance in mind, enter Google Insights. Google Insights is a way of performance testing your site and see how you can improve your results placement in Google searches.
It’s a pretty incredible service with a lot of useful information but it’s like a drug, you’re just chasing that score and just like drugs you’ll never be able to achieve what you’re looking for. I’ve spent days optimizing my photography and gallery settings for my new site chasing that stupid dragon finally to realize, Google Insights is not the end all be all and it’s pretty inconsistent. I started with a 4/100, then got to 40/100, then compressed and resized more images getting me to 62/100 and then finally super compressing and resizing my thumbnails which got me to 76/100. This was a good level for me and I was satisfied but then I just decided to reload the Google Insights page without doing anything to my site or code and it came back with an 84/100. This makes no damn sense! At all! Finally I decided to performance test on other benchmark sites and consistently got a 90% and up in performance so none of it actually makes sense. That being said it gave me the direction I needed to optimize my site, the number results don’t matter as much as the end result of your site, optimization. This is another topic that could go real deep into and have already gone too deep for this. Use Google Insights and see how your site scores.
Well this became far longer than I anticipated it would so we’ll end here. Here’s the TL:DR version; build mockups and use them (they’ll save you a ton of time in the long run), Cloud Cannon is a bitching Jekyll CMS & hosting platform that makes Jekyll more like Wordpress, and Google Insights will give you great direction in optimizing your site but be careful of chasing the dragon, it’s not the end all be all performance benchmarking system. That’s all folks see you next week.