As it’s my first post on the blog, It’s probably a good idea to introduce myself. I’m James and I’m the web designer here at Civo. Want something that looks pretty, I’m your guy!
As we’re near the launch of the Civo community forums, I thought I’d give you a run down of what to expect, an insight into the design process here at Civo and a sneak preview of what’s to come.
Step 1 - It all started with a word doc…
I normally jump into the process of a feature when a Word document arrives in my email box. I take a look at the feature as a whole, the requirements set and I then get the opportunity to organise a meeting to discuss and put any ideas or stumbling blocks to the team.
Step 2 - Inspiration
After a meeting, I normally get an idea of what the team wants design wise for a feature. With the forum, we wanted something simple, not a cluster of features bolted together. Because we’re building from scratch in rails, we have the ability to pick and choose what features we want on launch and get a design which will work now and be as future proof as possible. I discuss what’s out there and we get a list of what looks good and what doesn’t and what will work with the Civo brand.
Step 3 - Time to design
Once I get an idea of what we want, I tend to start wire framing in blocks. This allows me to focus on the bigger picture before getting down to the smaller details. I tend to be over generous with variations (giving 3-4 design on average!) because I like to give people a bit more choice in the final design.
I’ve been with the team for a long time now and I tend to be able to guess what individuals will like and might not like in my designs. Giving variations allows everyone to have a part in the final product, picking and choosing bits from each design before getting a final wireframe.
Step 4 - Wireframes done - what next?
So with the wireframes signed off, I know exactly what needs to be on the pages and where they need to be, now comes the fun part…
I design in Sketch (thanks Andy!), which I moved to from Photoshop because it helped speed up my design process. In seconds I can have a page ready with the basics (nav, header, footer) as well as all the colours and fonts 1 click away. I then bring the wireframe blocks back and work on them as symbols, which is really handy for duplicated sections (such as forum posts and topics).
I worked on designs for the main pages (Index, forums, topics) which I knew would give me a base for future pages. The key for the forum was to seamlessly integrate it into the site, and not just bolt it on (I think we’ve managed it, what do you think?).
Step 5 - Improving
Once the initial pages were designed, I built out additional pages such as search results, profiles, notifications. At this point the team discussed the current designs and found that we could integrate the forum even better. Initially, we wanted to have a ‘forum nav’ which allowed quick access to things such as notifications, messages etc… but this would mean a disconnect between the forum and the other sections of Civo. We decided on dropping these from the forum nav and redesigning the main nav so it included a dropdown. A lot more helpful and easy to access… we think anyway!
Step 6 - Looking great
With the front-end of the forum design nearly complete, I go over all my designs, trying to ensure they’re pixel perfect, the colours used are Civo colours, font sizes are Civo sizes etc… This helps bring everything together, allows me to fix any last minute oversights and also helps speeds up the mark-up process for me.
Whilst I’m the web designer at Civo, I also handle the front-end web development too. Obviously the forum itself is a big job, so I sit down with the team and discuss the best way to approach coding up the designs, timescales and how many red bulls it will take before completion.
How did we do it… well that’s another story for another blog post!
Thank for listening and hopefully you'll enjoy using the Civo community forums as much as I did designing them. I’m off to work out what “make it pop” and “it needs to be more edgy” actually mean!