Viget.com gets iPhone-ized
Throughout the year the team here at Viget embarks on numerous internal projects aimed to expand our expertise. With that thought in mind, we just recently designed an built an iPhone-specific site to accommodate the majority of our mobile users. The overall process was an enjoyable one. Here's a glimpse of how the project came together.
This project, like the majority of our others, initially started with wireframes. Jackson conceptualized the site around the ideas of usability, audience and purpose. After consolidating his ideas, he jumped into a black hole of wireframing and emerged a day later, unscathed from his adventure, with a great set of wireframes to move forward with.
From there, I took wireframes and began the design process. Since the Viget brand is close to my heart and we have an existing look and feel, I jumped right into comps -- skipping over the moodboard process. The design concept came quickly because of the quality of the wireframes and my understanding of our brand and goals for the site. I designed and comped up the three main types of layouts:The homepage, a basic listing page, and a content page. Due to the low resolution, I kept in mind the audience, text-size, download time/connection speed, and readability.
Once we finalized and approved the design, I moved into buildout. This, in my opinion, was the best part of the process. When building out a site designed specifically for the iPhone, your hands are no longer tied with the typical browser constraints (<cough>IE</cough>). Mobile Safari -- the browser used by the iPhone -- supports CSS3, 24-bit tranparent PNGs, and custom CSS animations.
- Designing and developing for the iPhone is a blast. Only having to worry about one browser is a huge advantage during build out.
- CSS3 can't come soon enough. When CSS3 is more broadly accepted, and we can make it a part of build out process, it will save a lot of time and ease designer's pain.
- Webkit's CSS animations are a bit complex but extremely powerful.
You can view the new site by simply visiting www.viget.com on your iPhone or iPod Touch.