How quickly we will design more for mobile than for PC’s?

Seems that mobile traffic is massively increasing lately. As a consequence there are a lot of online publications like Smashing Magazine that are writing more and more about mobile design, apps, tablets, responsive design and other related stuff.

Sooner or later we will put the mobile design in front of any other interface design, as the people will use the portable devices a lot better.

As UI and UX designer, I have noticed that designing for mobile devices is more fun and interesting. Why? Because the screen size limitation, the lack of a standard resolution, slow Internet connections, and poor support of JavaScript or Flash, puts me in the situation to better focus on the content and functionality. Basically, a mobile site is a lot more straightforward for both the users and the designer.

There is a lot of evidence on the web about the increasing mobile traffic. Today more than 10% of world’s web traffic is from mobile devices, Asia being the most developed this way (18%).

Year after year, the mobile traffic gets more than double, having a growth rate higher than anticipated.

Most than half of the mobile data traffic is currently used by video streaming websites like YouTube.

There are also rumors that by 2016 every man, woman or child from the planet will have at least one mobile device.

Analyzing these figures, I think that is clear for anyone that mobile Internet is the future, and we as web designers should prepare for this transformation!

To be continued…

How important is the screen size and resolution for designers?

The display is the most important interface between the designer and his work. The quality and size of the screen is more important when we deal with prints, but also for photo retouching and video editing. However, the web design can be done using middle-range displays, because most of the people don’t have high quality ones, so it can be more accurate. This doesen’t mean that better screens can’t be used, just isn’t mandatory.

Apple Thunderbolt 27 inch LCD

I don’t know what others prefer, but I am a fan of large displays. For the moment I work on a 24″ full hd display and a 22″, both TFT LCD’s using TN technology but one with LED backlight. I hope to get an update to 27″ IPS display soon 🙂

Here are some large high quality displays that I recommend for graphics design:

  • Dell UltraSharp U2711
  • HP ZR2740w 27 inch
  • HP XW476A4 27 inch
  • Apple Thunderbolt Display 27 inch
  • Apple Cinema Display 27 inch

A very important characteristic of a computer screen is the panel type. For designers I strongly recommend IPS displays, as they have very good viewing angles and color reproduction.  You can read more about IPS techonology here.

Bare in mind that very large displays have very large resolutions. For example 27 or 30 inch lcd’s usualy have 2560×1440 or even 2560×1600 pixels resolution, so the video card must be very good in order to render quality images at this size.

A feature very important for print industry but also for web si the “pivot” function, so the display can be rotated 90 degrees verticaly (from landscape to portrait mode).

A creative advertising campaign for KFC

Here is a creative advertising campaign made by an agency called Grey Group, from Singapore, for KFC.
The name of the campaign is: KFC Delivery: Life Gets Easier.

KFC Delivery: Life Gets Easier - Hunting

The images illustrates how food hunting, transportation and cooking have evolved in time, obviously in a funny and even ironic manner.

KFC Delivery: Life Gets Easier - Transportation

KFC Delivery: Life Gets Easier - Cooking

The brief was “to highlight the ease and convenience of getting food with KFC Delivery” and the idea was to use the Evolution Theory. Each poster was made using four handcrafted exhibits.

KFC Delivery: Life Gets Easier - How was made

Grey Group was selected by KFC for advertising services in 2010.

Designing mobile websites (basics)

Most of the time it is easier to design for mobile than for PC’s, even if a lot of designers are reticent to this new area. Of course there are a lot of differences, starting with the screen size, fonts, the use of images, technology support (JavaScript, Flash, even HTML and CSS) and finishing with the way users interact with the devices and what content they should see first on mobile.

Designing for mobiles is not just about minimizing things, is about user experience, content management and flow actions. You can work with the same design principles but you should be aware of the main differences: screen sizes and input method.

The most important issue is the screen size. There are a lot of mobile devices ranging from small smart phones (320 x 240 pixels) to tablets (1024 x 768 or higher). The next issue is about the browser ans OS: Android (Chrome) has a different user interface than iOS (Safari), not mentioning Windows Phone (IE).

What is a website without it’s content? If you ask this question you will understand that the content is the only thing the website is made for. While desktop sites are large, have multiple columns, big images and a lot of features displayed simultaneously, the mobile should offer a narrower view to the user, so he can easily reach the content through the small screen. Also the design should be adaptive so the content will take the entire shape and size of the screen. In other words, the user should reach the needed content as faster as possible and should read it as easily as possible. Thus, the content management and design needs to go hand in hand together.

The interface has to be simple, minimalist. There are standards that should be considered when designing buttons, forms, menus and other common UI elements. When using a touch screen, the user has to easily tap the needed elements with the finger. Regarding the layout, there is no enough space to waste with big borders, heavy backgrounds and other artistic artifacts. There should be only vertical scroll for all the pages.

While a content oriented website is pretty straight forward, a web application is another story. There are functionality and flows involved. The application should deal with technology limitations, like JS support. The functionality needs to be broken into smaller steps (for example wizards, registration forms, etc.) and reduced as much as possible. Take a look at a social website like Facebook on mobile, or YouTube. You can see that there are dramatic changes in the way that various features are displayed. The user might not have the same things available but the ones that remains are better used.

I think that we are assisting at the beginning of a new era of the internet, and in no time we will see migrating all the websites to mobile as the people will use this technology.

There are a lot of resources on the web for mobile design:

Here are some very useful articles related to mobile design: