Ivana McConnell // Blog

Design // Stipso

Role: Designer + Front-end developer
Worked with: Back-end developer, marketer, CEO, and CCO
Tools/Frameworks: ZURB Foundation framework, Barley CMS

Stipso's website, with design and front-end development done by me, in conjunction with the marketing department. From a front-end development perspective, the site makes use of the Barley CMS, and the Zurb Foundation framework. The design has been featured on Barley's website.

The first step with this site had been to do mockups (first on paper, and then in Photoshop) and wireframes, to get a distinct feel for how we wanted to organise the content. One of these wireframes is shown above, that of the homepage structure.

This mockup, without any associated imagery, was then given to the marketing team, so we could discuss any structural changes, or work through any assumptions that we might have that didn't show up in the wireframe. Once we work out the content arrangement, the design can then highlight that content as best as possible.

One of the first designs: We liked the grid-based setup, but it wasn't colourful or personable enough, and needed to be a little bit bolder.

The final design: We spent a good deal of time on fonts; as an early-stage startup, we wanted to strike a good balance between playfulness and professionalism. Our site's aesthetic and font would set that early tone. For that reason, we chose Azo Sans for the main site copy, as well as Rooney Web -- not seen here, but utilised in the blog design for long blocks of text.

To accompany the font, we created modular blocks to house the content, in the company colours. Later on, if we added to the front page, or to any other part of the site, we could use these blocks, and keep the overall aesthetic consistent.

This grid-based design was then easy to code responsively, using ZURB's Foundation framework. The site itself can be seen at stipso.com.