Pictogram.com.au

Branding & Web Design Case Study (4-minute read)

Overview

Pictogram is a small Sydney branding & design agency that was in need of an updated website. Pictogram has a long (30+ year) history, and the client needed the site to balance the importance of history and expertise with trustworthiness, and playfulness and creativity. As well as offering a visual refresh, the new site was an opportunity to include wider service offerings and news stories, and encourage more interaction.

Colour Palette & Icon Patterns

Yellow, for Pictogram, has been an important differentiator in their particular market, and has been used to great effect throughout their print material. For Pictogram's web presence, after tweaking the yellow for better on-screen legibility, I introduced a much-needed secondary colour palette – crisp greys to complement the now sunnier yellow.

Through a process of consultative design research with the client, we arrived at an idea that was worth some experimentation: it might be a shame not to emphasise the meaning of Pictogram's actual name. After a few iterations, below is one of the final patterned background images that uses pictograms in it.

Timeline

As one creative solution for providing some historical perspective and playful interactivity, we came up with the idea of a panning timeline. It integrates important moments in time for technology across the world with Pictogram's history – the ups and downs of both are combined in a cohesive upward-trending line graph. And for each year, when the user hovers, they get a glimps of a favourite Pictogram project completed in that year.

It took a bit of development, but I managed to structure the timeline with a very low resource load (so it appears straight away when you go to the page), and arrange it in such a way that the user's experience is delightful on either desktop or mobile.

Design Opportunities

To improve consumer trust, and encourage engagement with the site, I included two notable features into the design for most pages. The "quick contact" forms at the base of each of the service pages allow a low commitment and time investment of the user, and offer a customised experience for each particular service. And one of the items, integrated within the design, that helped to provide increased trust among users was the inclusion of randomised testimonial quotes.

Mobile Responsiveness

When it comes to mobile responsiveness, I coded the site to respond to natural break points. In case you're not familiar with those terms, this means that instead of creating different representations of the site for a limited number of devices (like mobile, iPad, and desktop computer), I instead designed by scaling the view, and programming design changes for individual sections at the point just before they look less than ideal for that size. This approach future-proofed the site by making it appropriately designed for any conceivable device.

Many mobile sites follow a popular trend by using a "hamburger menu". That's just a silly name for the symbol that consists of three horizontal lines. It means that more items can be found by clicking on it. Usually links. But its use offers no context via symbol or text of the kind of information that might be found. There are some designers who argue that it's a bad idea, and there's also some research to suggest that many (particularly older) users don't even know what it means. I'm not entirely convinced either way, but personally I think it's lazy design – if it can be avoided, it should!

For an example of navigation options that can't otherwise be refined or eliminated for a mobile experience, I suggest you visit pictogram.com.au on a mobile to see my preferred solution. As you can see in the mobile image below, instead of using a potentially misunderstood "hamburger menu" to hide navigation options, this solution uses two elements in design that provide clear meaning. The fade suggests something is hidden, and potentially scrollable. The arrow suggests more can be seen in that direction, and also brings with it associations of scroll bars and drop-down menus. A more discoverable solution that a user can both scroll, and expand to a fully-visible drop down menu.

My Roles/services

  • Branding & identity

  • Sketching, wireframing & initial design, through to completed project

  • Icon illustration

  • HTML, CSS, and integration with Adobe Business Catalyst

  • Javascript & CSS animation

  • Image optimisation

  • Search engine optimisation (SEO)

  • Things I didn't do: logo design, content writing, search engine marketing (SEM) strategy