Article | Work

Creating Contiki's Mobile Site, Part 3: Visual Design

Reading time: Less than a minute

The visual design is a key part of interaction design, as it provides not only an aesthetic component (making it look pretty) but more importantly, can help create a positive experience for the user by using color, shading, and graphics as visual cues to help the user navigate through the site and find what they need.

Because the creation of our quick prototype was relatively easy, we had the opportunity to go through a couple of rough versions in a short amount of time, and determine, not only, dimensions and placement of elements on the page, but also confirm the scope and functionality of the site. Additionally, having a better working understanding of jQuery Mobile provided a clear guideline on the patterns and themes we could use within that structure.

A clear focus

This meant that once it was time to add visual elements, having a clear framework, the solid consensus of stakeholders on functionality, and a full site we could source for imagery and style, the only decision left was really focused on color.

Using Contiki’s full site as our style guide, we played with different themes and combinations on the backgrounds and buttons, first starting on the homepage.

Here’s a few examples of a few color combinations we tried out before we settled on the final design:

Once we settled on a color theme for all of elements that were mobile-specific, we could easily apply that and add the graphics and visuals, incorporating patterns from the full site within the framework of jQuery mobile.

As you can see in the few of the screenshots above, even though we were limited by screen size, we were able to take designs already established in Contiki’s full site, and carry over many of the patterns for how we display things like the carousel image from the homepage, search results, tour information (like the map and experience), and tour reviews.

Visual Design Complete – On to Implementation

Because of the amount of upfront work we completed with the prototype and the ease of the jQuery mobile framework, it was easier to focus and quickly work towards consensus on the last remaining component of the user interaction, the visual elements. With the user experience complete, Contiki’s mobile site, now with design added, made its way back to our front-end developers to implement, this time for real – Part 4 in our series.

Check out the other posts in this series, Creating Contiki’s Mobile Site: