After completing the wireframe process, moving on to the visual design for the Beer Bowl web app was a pretty direct process. We've had such good feedback on the look and feel of the desktop version over the past several years, we knew that we wanted to extend that to the mobile implementation. I also knew that I wanted to keep the size of any associated files as small as possible, so I was going to use webkit's CSS3 implementation wherever possible to minimize the number of images required for download.

Keeping those ideas in mind as I started visual development, it was a fairly straightforward process of keeping the content at the forefront of the design. We had to adapt a version of the existing logo to display well in the mobile implementation, since with less screen real estate the colors in the standard logo draw the user's eye away from the important content. Otherwise, the wireframes provided a solid foundation to implement a tried-and-true style and create an UI that should provide engaging and helpful for users.

As development has already begun (which is part of the reason this blog post has been delayed and is brief) look for an update shortly chronicling the challenges of implementing a complex mobile UI into Joomla's infrastructure.