No matter how you look at it, 2012 has been the year when movers and shakers of the web really stepped up their efforts to conquer mobile. We’ve seen innovations in all forms: native mobile, mobile web, or hybrid. The growth momentum will continue into the new year, and 2013 will be the year where mobile web design hits mainstream. As we come to the end of 2012, mPress has a lot to look forward to. Here, we’ll list ten design trends that we think will become common practice in mobile web design and usage in 2013:
1. Scrollwiping ↑↓←→: Up, down, left, right, and sideways, our fingers get quite a workout when swiping through pages on mobile devices, be it phone or tablet. In the days of mouse-based UI, scrolling can be quite annoying, but for touch-based devices, swiping and scrolling can be a powerful tool to increase user engagement and entertainment if used judiciously. More innovative scroll-based navigation can be expected on mobile websites as well as mobile apps. Parallax scrolling [ex] can also be expected to be ported over to mobile websites.
2. Buttons XXL: On mobile, buttons are more user-friendly than links. We know that. Extrapolating on that, HUGE buttons that are easy to recognize and access increase overall conversion rate of mobile apps. We can expect large buttons that take significant percentage of the visible real-estate on mobile screens to dominate much of the navigation in the coming year.
3. Typography Magnified: Similarly, large beautifully design text and fonts will become more common.
4. Authentically Digital: Inspired by Microsoft’s Metro style, flat, bright-colored digital design brings a bold and fresh look to mobile.
5. Skeuomorphism: On the opposite spectrum, photo-realistic elements that resemble real-life items, championed by Apple’s iOS UI, will continue to be embraced by many designers. Mobile lies at the edge of virtual and real, and this design style brings a sense of professional quality and elegance to any brand.
6. Image Sliders: Image sliders are commonly found on traditional websites to draw attention to graphics. On mobile, with exception of Coverflow and photo galleries, it hasn’t been a widely used element. These sliders also leverage the swipe motion and can be a powerful tool to show graphics or educate users via onboarding. We expect more mobile websites will use image slides as a way to engage visitors for anything from restaurant menus to product portfolios.
7. Fullscreen Image Background: Humans are visual animals. A simple trick to add style and character to any mobile site is a big fullscreen background image that best represent the site owner’s personality or goals.
8. QR/NFC Branding: As already mentioned, mobile bridges virtual and real, and QR/NFC tags are the links. Consider QR codes and NFC tags the URL of mobile, except in this case, they present a rare branding opportunity on top of their functionalities. Mobile website owners can use the graphical nature of QR codes or NFC tags to brand their site, business, or entity. You can think of it as a new logo form and we expect continued growing adoption as mobile becomes even more widespread.
Let us know what you think. Comments welcome.