- UX Design
- Visual Design
- Information Architecture
- Low and high fidelity wireframes.
The Rich Media Gallery started as a site for inspiring ad examples, but over the years it evolved into the primary destination for all rich media resources across Google. We approached the Rich Media Gallery redesign with an interest in simplicity, user-friendliness, and consistency. We set a goal to inspire and inform visitors with a site that's engaging to use and accessible from any screen. We wanted the site to be an entry point to getting started with display advertising at Google and a showcase of the best digital advertising examples.
As we set out to build a redesigned, mobile-optimized website, we learned that you can save time and improve satisfaction with your site by planning for consistency across screens. Here are five best practices for building cross-screen compatible content:
- Design with flexibility in mind so that components can be easily reused for use cases that you have yet to dream up. This will save you time in the future and can help others out, too.
- Avoid introducing different user interface elements on desktop that aren't available on mobile (or vice-versa). For example, there is no such thing as “hover” on a mobile device. If your design relies on this to work, you have just created more work for yourself.
- Think about mobile first. It is not as simple as “resizing your desktop ads to look pretty on mobile." In many cases, the way that people interact with a mobile device is very different from how they interact with a desktop. Consider, for example, how many smartphone users will hold their device in just one hand. Look for ways to make an person’s life easier if they are navigating your mobile site this way.
- Think about mobile device orientations early. The aspect ratio on devices can significantly vary from portrait to landscape modes. Therefore, it's important to think about the way that your assets, such as images, videos, or text, will behave in both modes.
- Consider content safe areas, since mobile devices have multiple screen sizes and pixel densities. Identifying a common denominator will go a long way when creating your design.