Episode Six: Drafts and Mockups
Things are starting to get real.
Previously…
(A quick note, as the typeface(s) had yet to be purchased when the mockups below were made, what you’re seeing is actually Adelle Sans)
If you’ve been following along, you’ll know that I’ve done quite a bit of content writing at this point, so the next logical step is to start laying it out into content blocks.
Low-Fidelity Sketches
Starting on paper, then moving to Illustrator, I started working on basic layout ideas, toying with a few variants to try and get the flow between sections right. As we deliberated on whether we would do a single page or multi-page site, the structure changed a few times.
Colour Tests
After jamming on a few colour schemes, using tools like Adobe Colour and Coolors, I started to hone in on a red/orange + blue vibe, which was then carried through a few iterations.
We’ve already decided to revisit the entire brand identity at a future time, so this colour scheme is intended as a starting point for future iteration. To match the friendly, optimistic, somewhat casual persona we’ve created in our writing tone, I see us maybe moving towards the lighter tones right at the bottom.
Team Presentation
Right after our daily standup one day, the team gathered round my desk to have a look at how the mockups were coming along, completely impromptu. Hello, Impostor syndrome, I’ve missed you.
At the time, the content was fairly placeholder (as you’ll see below), but everyone felt the direction was right and things were progressing well, generally speaking. Phew.
Setting up the Code Environment
I don’t even know what happened. All I know is suddenly people were talking about growler and node.js and NPM and localhost and…
I’m dizzy just thinking about it.
Here’s my understanding of what’s going on. We’re using the Foundation framework, and via the magic of node.js and grunt, I’m able to work on pieces of the site locally and then have them pushed to the test site, the GitHub repository and the live version on Heroku at once. Boom.
Small Wins Count Big Here
I’m nowhere near as confident in my coding skills as I am in my pixel wrangling, so it’s doubly important I celebrate the little things. I’ll never forget the joy I felt when I finally got this CSS pointy border thingy to work… 90% of my time was spent figuring out what to Google.
Speaking of Small Wins…
I set up a few integrations in Slack to leave a message whenever a commit was made or a Trello card was moved. That way, we’ve got a play-by-play of the action.
So, What’s Next?
Well, if all goes according to plan, we should have our first version up and running soon! Of course, that’s just the beginning, as the plan has always been to iterate often beyond that first launch.
If you’ve enjoyed reading and want to chat with me or any of the team, why not say hi to us on Twitter?
