Following on from the last post where I talked about how I get inspiration by creating mood boards, I would now like to share with you how I go about creating the concept of my templates.
There are various ways one can do this. Some people prefer to use a pen and paper and begin to sketch out their ideas, others may use wireframe software such as Balsamiq Mockups, which essentially sketches out your concept ideas as well, the difference is that you have a number of out-of-the-box drawings that allow you to mess around with all the different web elements.
I would like to point out that I have actually used Balsamiq Mockups in the past and found it very useful.
Pick Your Color Palette
For this landing page concept I actually be started out in Photoshop and began to tinker with the design as I went along. Essentially, I am still wireframing – I usually start of with a low fidelity design and iterate as I go along generating more ideas on the fly.
I started the concept with one simple criteria; color. Picking the color palette of my design would allow me to delve even deeper into the concept and conceptualize the web elements more clearly.
The resource I used for this is called, called Adobe Kuler.
On this site you can select from millions of swatches (if not more) and select a swatch you think may work for you. What I love about Kuler is the fact that I can also search by a keyword and it will generate palettes on the mood of that keyword – pretty cool if you ask me.
Once I have selected my palette, I literally use the snippet tool (found in windows), cut it from Kuler, and paste it onto my blank canvas. I do this as it will allow me to color pick from the swatch as I go along. You can actually create the swatch and add it to your Photoshop swatches palette, but I find that this works for me and is less time-consuming.
Ok, so now that I placed my swatch on the canvas it’s time to begin organising my Photoshop document.
Keep Your Layers Organized
I usually like to break up my layers panel in folders which will roughly match up the markup structure. This works really well for me as it allows me to identify what section fits where.
Usually, I have a total of 3 to 4 layers, which I label and color code as Header, Main, Footer and Backgrounds. As you can see, this is a really useful way to keep organized and know exactly where your elements are found.
Of course as you add more layers, you can nest your elements within the corresponding group and re-arrange them as you see fit. Try it out yourself and let me know what you think.
Quick tip: I would recommend to set up a template with this same or similar structure if you find that you will be adding Photoshop design to your workflow.
Begin Your Design
Now that we have our Photoshop document ready to go, we begin the design. Remember to save your file before you even do anything else – believe me I have been in situations where I didn’t save and lost about 4 to 5 hours works. I won’t be repeating that mistake any time soon.
So when starting to design, continue to look for ideas on the web. This doesn’t stop. You have your mood board which will set the tone of your theme or template, but you are not locked into this. Research elements that work, that look great and that you could consider for your own project.
Sometimes I find some cool elements that I think would be great for my theme, so what I do is implement my own embellishments to the design, make it my own, make it unique – sure the functionality may be the same, but the branding and design identify can be your own.
Putting it All Together
Don’t feel like you have to rush your design – remember this is an incredibly important phase of the whole workflow, take your time, listen to music as you develop your ideas and put them on the screen.
For me, this phase can vary. Sometimes it can take me a few hours to come up with some really great ideas, other times I have a mental blank and it take much longer – it all depends how your creative juices are flowing I suppose.
For the Reprise landing page it has taken me about a day. In the next post I will share with you the finished version of the design and we’ll discuss how we begin the next phase – the code.
Thanks for spending this time with me, I hope you have gotten something from this post and as always, feel free to leave your comments below.
– Leo
Photo Credit: angelocesare