Creating Code for Australia (mockup stage)
I've been busy creating the Code for Australia website. I decided to record my 3 hour long Photoshop mockup session, and then create a time lapse video reducing it down to 6:29 minutes. The video is not a tutorial, but you can see some of the processes I go through in order to quickly iterate through the design. You can see it on Youtube below.
My workflow generally starts from wireframing and sketching using pen & paper, this may take a few hours or a few weeks depending on how complex the site/app is. In this case, I'm going for a simple single page web site, as it's purpose currently is to generate interest, and operate like an online brochure or business card when I'm presenting to external stakeholders. I then move to Adobe Photoshop in order create a higher fidelity mockup, the purpose of this stage is to flesh out the drawings into something that is more orderly/colourful. The mockup can also be presented to any potential clients. While it is easier to iterate on paper, it's easier to conceptualise the final design in Photoshop. The final stage in front end development is the prototyping stage in HTML/CSS/JS, which I'll get to in a couple of days.
Here are some of the resources that I used:
- 960 Grid for alignment
- Subtle Patterns for textures and backgrounds
- Kuler for colour selection
- Noun Project for icons
There won't be much back end code as there's no dynamic processes happening yet. When Code for Australia actually launches with various applications, then the site will turn more complex.
Here are some photos of the quickly drawn wireframes. My style of wireframing isn't common, it's more like scribbling. I guess every designer has their own style.
It is difficult to estimate the total amount of time taken to get to here, because I took many breaks in between the wireframing stage. If I had worked on it non-stop, I guess it probably would have taken 5 hours. Stay tuned for the next blog post showing the prototyping stage.
Current stage of the website:
Oh and I believe I should be writing up a newsletter for all those who signed up to the newsletter.